* { padding: 0; margin: 0; }
html { overflow-x: hidden; }
body { background-image: url('/data/1806/uploads/bg-mainbody.jpg?v1'); background-size: 100% auto; background-attachment: scroll; background-repeat: repeat; background-position: top center; vertical-align: middle; box-sizing: border-box; font-family: "Poppins-Regular", "Microsoft JhengHei"; font-size: 14px; line-height: normal; }
    body > div { display: flex; flex-direction: column; min-height: 100vh; }
#divBody { height: 100%; }

table { width: 100%; }
button { outline: 0; border: 0; }
input { outline: 0; border: 0; }
iframe { width: 100%; border: 0; }
a, a:hover, a:active, a:focus { color: #444; text-decoration: none; }
ul, ol { margin-left: 20px; }
li { list-style-type: disc; }

p { }

.w1000 { width: 100%; max-width: 1030px; margin: auto; padding-left: 15px; padding-right: 15px; }
.wrapper, .w1200 { width: 100%; max-width: 1200px; margin: auto; padding-left: 15px; padding-right: 15px; }

h1 { font-weight: bold; }

/**************************************************************************************************************************** HEADER */
#divHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 99; }

/*** Header Top ***/
.section-top { background-color: #fefefe; color: #222; display: none; }
    .section-top .wrapper { display: flex; justify-content: space-between; align-items: center; padding-top: 2px; padding-bottom: 2px; }
    .section-top .right > div { display: flex; align-items: center; }
        .section-top .right > div > div > a { padding: 3px 5px; display: block; color: #222; cursor: pointer; border-radius: 5px; }
            .section-top .right > div > div > a:hover { background-color: #efefef; }
        .section-top .right > div > div:not(:first-child) { border-left: 1px dotted #222; }
    .section-top .right img { max-height: 18px; }
    .section-top .btn { background-color: transparent; padding: 0; }
    .section-top .right .jackpot a { color: #222; }
    .section-top .right .language #dropdownLanguage img, .section-top .right .jackpot img { margin-right: 5px; }

#divHeader-logo { display: flex; align-items: center; }
#divHeader-bottom .dropdown.language > a { padding: 3px 5px; display: block; color: #dbba9c; cursor: pointer; border-radius: 5px; margin-left: 5px; }
    #divHeader-bottom .dropdown.language > a:hover, #divHeader-bottom .dropdown.language > a:active, #divHeader-bottom .dropdown.language > a:focus { background-color: rgba(0,0,0,0.2); }
    #divHeader-bottom .dropdown.language > a img { max-height: 18px; }

@media screen and (max-width:1023px) {
    .dropdown.language { display: none !important; }
}


.dropdown-menu { min-width: 250px; padding-left: 5px; padding-top: 5px; }
    .dropdown-menu .country { margin-bottom: 15px; }
#divHeader-logo .dropdown-menu .country img.flag { height: 20px !important; max-height: 30px !important; margin: 5px 5px 5px 10px; border-radius: 50%; border: 1px solid #aaa; }
.dropdown-menu .country a { padding: 5px 20px; position: relative; }
    .dropdown-menu .country a:after { content: ''; position: absolute; top: 0; bottom: 0; height: 14px; left: 0; width: 1px; background-color: #aaa; margin: auto; }
    .dropdown-menu .country a:first-child:after { display: none; }
    .dropdown-menu .country a.active { color: #fc0002; }
    .dropdown-menu .country a:hover { text-decoration: underline; }
.dropdown-menu .country .name { font-size: 10px; color: #aaa; }
.dropdown-menu .country .lang { display: flex; padding-left: 20px; }

@media screen and (max-width: 1023px) {
    .section-top { display: none; }
}

/*** Header nav ***/
#divHeader-bottom { box-shadow: 0px 0px 10px #403c39; background-color: #3c3a3b; position: relative; }
    #divHeader-bottom > .wrapper { display: flex; align-items: stretch; justify-content: space-between; }

#divHeader-logo { }
    #divHeader-logo > a > img { height: 75px; max-width: 300px !important; }

#divMenu { }

#divHeader-other { display: flex; align-items: center; }

.user-auth { display: flex; flex-direction: column; }
    .user-auth > button, .user-auth > a { background-size: 100% 100%; padding: 5px 25px; margin: 2px; background-color: transparent; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; height: auto; text-align: center; }
        .user-auth > a.btn-login { background-image: url('/data/1806/uploads/btn-01-active.png'); color: #222; }
    .user-auth > a { background-image: url('/data/1806/uploads/btn-01.png'); }



@media screen and (min-width: 1025px) {
    #divHeader-nav { padding-left: 15px; /*margin-right:auto;*/ margin-right: 0; margin-left: auto; }
        #divHeader-nav > .inner { height: 100%; }
    #divMenu { height: 100%; }

    #cssmenu { z-index: 9; height: 100%; position: static; }
        #cssmenu ul { display: flex; height: 100%; align-items: center; position: static; }
            #cssmenu ul li { float: none; height: 100%; display: flex; align-items: center; position: static; }
        #cssmenu > ul > li > a, #cssmenu > ul > li.has-sub > a { border: 0; color: #dbba9c; text-transform: capitalize; white-space: nowrap; font-family: "Poppins-Medium"; font-size: 12px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 10px !important; }
            #cssmenu > ul > li.has-sub > a:after { display: none; }
        #cssmenu > ul > li.active > a:after, #cssmenu > ul > li.has-sub.active > a:after { content: ''; display: block; position: absolute; bottom: 0px; left: 10px; right: 10px; background-color: #dbba9c; height: 4px; top: auto; width: auto; border: 0; transform: none; }
        #cssmenu ul li.active a { color: #fff; }
        #cssmenu > ul > li:hover > a { color: #fff; }
        #cssmenu ul li a > img { display: block; margin: 0 auto 8px; }
        #cssmenu > ul > li > a > img { height: 18px; }

        #cssmenu ul li.has-sub:hover { background-color: #222; }
        #cssmenu ul ul { left: 0 !important; right: 0; width: 100%; margin: auto; max-width: 1200px; text-align: center; display: none; top: 100%; height: auto; font-size: 0; text-align: left; padding: 5px 0; }
            #cssmenu ul ul:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100vw; transform: translateX(-50%); margin-left: 50%; background-color: #ffcfa6; box-shadow: 0px 0px 10px rgba(0,0,0,0.8); z-index: -1; }
        #cssmenu ul > li:hover ul { display: block; }
        #cssmenu ul ul li { height: auto; width: 14.2%; display: inline-block; font-size: 14px; position: relative; z-index: 2; margin: 5px 0; }
            #cssmenu ul ul li:after { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 2px; margin: auto; border: 1px solid #b49577; opacity: 0; transition: opacity 0.1s ease-in-out; border-radius: 20px; z-index: -1; background-color: #272526; box-shadow: 0px 0px 10px rgba(180,149,119,0.8); }
            #cssmenu ul ul li:hover:after { opacity: 1; }
            #cssmenu ul ul li a { width: auto; padding: 0 0; background: none; cursor: pointer; }
            #cssmenu ul ul li:hover { background: transparent; }
                #cssmenu ul ul li:hover > a { background: transparent; }
            #cssmenu ul ul li img { width: 100%; }
        #cssmenu > ul > li > a > img + img { height: 15px; margin: 0; }

        #cssmenu ul li:hover > ul > li { height: auto; }

    #divHeader-navTop { display: none; }
    #divHeader-menuBottom { display: none; }
    #divHeader-other .btn-menu { display: none; }
    #divHeader-other .btn-goMobile { display: none; }
}

@media screen and (max-width: 1024px) {
    #divHeader-nav { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgba(0,0,0,0.8); z-index: 99; transition: opacity 0.2s, visibility 0.2s; opacity: 0; visibility: hidden; }
        #divHeader-nav.active { opacity: 1; visibility: visible; transition-delay: 0.2s; }
        #divHeader-nav > .inner { position: fixed; top: 0; left: 0; width: 250px; background-color: #fff; height: 100%; overflow-y: auto; transition: transform 0.2s ease-in-out; transition-delay: 0.3s; transform: translateX(-250px); }
        #divHeader-nav.active > .inner { transform: translateX(0); }

    .navTop-logo { text-align: center; padding: 10px 0; }
        .navTop-logo img { width: 60%; margin: auto; }

    .navTop-user { text-align: center; margin: 0 5px 10px; /* border-bottom:1px solid #dbdbdb;*/ padding: 15px 0; margin-bottom: 0px; }
        .navTop-user .user-icon { padding-bottom: 10px; }
            .navTop-user .user-icon img { border-radius: 50%; width: 120px; border: 3px solid #fff; box-shadow: 0 0 0px 3px #dbdbdb; }
        .navTop-user .user-auth { display: flex; }
            .navTop-user .user-auth > a, .navTop-user .user-auth > button { flex: 1; margin: 5px; padding: 10px 0; }

    .navTop-mobile { text-align: center; margin: 0 5px 10px; border-bottom: 1px solid #dbdbdb; padding: 15px 0; margin-bottom: 0px; }
    .nav-mobile { background-image: url('/data/1806/uploads/img-jackpot-count.png'); background-size: 100% 100%; display: block; padding: 10px 0; }
        .nav-mobile img { height: 18px; }

    #divHeader-navTop { background-color: #7b0707; }
    .nav-language .lang-box:not(.malaysia) { border-top: 1px dashed #ddd; }

    #divMenu { }
    #cssmenu { }
    #divMenu ul { margin: 5px 5px; padding: 0; }
        #divMenu ul li { float: none; display: flex; flex-direction: column; list-style: none; }
            #divMenu ul li a { border: 0; color: #444; text-transform: capitalize; padding: 15px 20px; margin: 2px 0; font-size: 14px; font-family: "Poppins-Medium"; line-height: normal; border-radius: 40px; }
            #divMenu ul li.active a { color: #000; background-color: #eee; }
            #divMenu ul li a:hover { background-color: #eee; color: #000; transition: 0.2s; }
            #divMenu ul li a > img { margin-right: 10px;width: 18px; }

    #cssmenu > ul > li.has-sub > a:after { display: none; }
    #cssmenu ul ul { display: none; }


    .add-menu > div { margin: 0 5px; border-top: 1px solid #dbdbdb; }
    #divMenu p { line-height: normal; padding-top: 20px; padding-left: 20px; color: #888; font-size: 12px; }
    .nav-language li.active a { background-color: #efefef !important; background-repeat: no-repeat; background-image: url('/data/1806/uploads/icn-checked.png'); background-position: right 15px center; background-size: 18px; pointer-events: none; cursor: default; }
    #divHeader-other { }
    .nav-language .country { font-size: 10px; color: #aaa; padding-left: 15px; padding-top: 10px; }
    .nav-language .flag { width: 20px; margin-right: 5px; border-radius: 50%; border: 1px solid #aaa; }

    .nav-footer { line-height: normal; text-align: center; border-top: 1px solid #dbdbdb; padding: 20px 0; background-color: #222; color: #fff; margin-top: 25px; }

    .user-auth { flex-direction: row; }

    #divHeader-other .btn-goMobile { font-size: 10px; color: #fff; text-align: center; text-transform: uppercase; padding: 2px 12px; }
        #divHeader-other .btn-goMobile img { display: block; margin: 2px auto; }
        #divHeader-other .btn-goMobile:hover { box-shadow: inset 0 0 15px rgba(0,0,0,0.8); opacity: 0.8; }
}

@media screen and (max-width: 767px) {
    #divHeader-other .user-auth { display: none; }
}

@media screen and (max-width: 550px) {
    .nav-footer { padding-bottom: 65px; }
}

@media screen and (max-width: 319px) {
    #divHeader-nav > .inner { width: 200px; }
}

@media (min-width: 480px) and (max-width: 767px) {
    #divHomeVideo .video-wrapper { padding-bottom: 0; }
    .html5gallery { height: 250px !important; }
}

@media only screen and (max-width: 479px) {
    body { font-size: 100%; }
    #divHeader-bottom > .wrapper { padding-right: 5px; }
    #divHomeVideo .video-wrapper { padding-bottom: 0; }
    .html5gallery { height: 250px !important; }
}
/*** btn menu ***/
.btn-menu { background-color: transparent; border: 0; outline: 0; padding: 8px; }
.text-menu { color: #fff; text-transform: uppercase; }
.icn-menu { position: relative; padding: 12px 6px; }
    .icn-menu span { width: 25px; height: 4px; display: block; margin-top: 4px; margin-left: auto; margin-bottom: 4px; margin-right: 0; background-color: #b49577; border-radius: 4px; -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
        .icn-menu span:nth-child(1) { }
        .icn-menu span:nth-child(2) { width: 20px; }
        .icn-menu span:nth-child(3) { width: 15px; }

    .icn-menu.active span:nth-child(1) { -webkit-transform: translate(0px, 8px) rotate(45deg); transform: translate(0px, 8px) rotate(45deg); }
    .icn-menu.active span:nth-child(2) { width: 25px; -webkit-transform: translateX(10px); transform: translateX(10px); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
    .icn-menu.active span:nth-child(3) { -webkit-transform: translate(0px, -8px) rotate(-45deg); transform: translate(0px, -8px) rotate(-45deg); }


/**************************************************************************************************************************** HEADER TOP DOWNLOAD */
.section-download { background-color: #7b0707; }
.sd-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.close-sd { padding: 0; background-color: transparent; margin-left: 5px; border-radius: 5px; }
    .close-sd:hover { background-color: rgba(0,0,0,0.1); }
    .close-sd:active { background-color: rgba(0,0,0,0.5); }
        .close-sd:active span { background-color: #fff; }
    .close-sd > div { padding: 10px 5px; }
    .close-sd span { width: 15px; height: 3px; border-radius: 5px; background-color: #fff; display: block; }
        .close-sd span:first-child { transform: translateX(-1px) rotate(-45deg) translateY(2px); }
        .close-sd span:last-child { transform: translateX(-1px) rotate(45deg) translateY(-2px); }
.sd-icon { display: flex; align-items: center; }
    .sd-icon img { width: 25px; margin-right: 5px; }
.sd-inner { margin-right: auto; font-size: 12px; padding: 5px; display: flex; color: #fff; }

.sd-download { margin-left: auto; margin-right: 5px; }

.sdd-inner { display: flex; justify-content: center; padding: 0 5px; }
    .sdd-inner img { width: 100%; }
.sd-link { text-align: center; padding: 5px 15px; border-radius: 5px; background-color: #280000; color: #fff !important; margin: 5px 2px; flex: 1; }
    .sd-link:active { background-color: #480000; }
    .sd-link div { display: flex; justify-content: center; align-items: center; }
    .sd-link img { width: 25px; margin-right: 5px; }
    .sd-link p { font-size: 10px; margin-top: 5px; color: #888; margin-bottom: 0; }

.sd-download { overflow: hidden; }

.btn-sdlink { width: 90px; text-align: center; border-radius: 5px; padding: 5px 0; justify-content: center; align-items: center; margin-right: 5px; background-color: #ffbd42; color: #7b0707; }
    .btn-sdlink:active { background-color: #808080; color: #000000; }

@media screen and (min-width:1024px) {
    .section-download { display: none; }
}

@media screen and (min-width:650px) {
    .sd-wrapper { display: flex; justify-content: space-between; }
    .btn-sdlink { display: none; }
    .sd-link p { display: none; }
    .sd-download { display: block !important; }
}

@media screen and (max-width:650px) {

    .sd-download { display: none; margin: auto; }
    .sdd-inner { width: 100%; }

    .sd-link { min-height: 44px; }

    .download-height { margin-top: 66px; }
}

@media screen and (max-width:375px) {
    .sd-inner { font-size: 10px; }

    .sd-link div { display: block; padding-top: 5px; }
    .sd-link img { margin-right: 0px; }
    .sd-link p { font-size: .4rem; margin-top: 3px; margin-bottom: 5px; }

    .sd-link { min-height: 70px; }

    .download-height { margin-top: 90px; }
}

@media screen and (max-width:319px) {
    .btn-sdlink { width: 70px; }
}



/**************************************************************************************************************************** FOOTER */
#divFooter { background-color: #3c3a3b; margin-top: auto; }
    #divFooter .wrapper { }

#divFooter-logo { padding: 10px 0; }
.owl-footerLogo.owl-carousel.owl-drag .owl-item { padding: 10px 20px; }

#divFooter-info { color: #cccacb; font-size: 12px; padding: 10px 0 25px; }
    #divFooter-info a { color: #cccacb; }
    #divFooter-info .section { display: flex; border-top: 1px solid #636363; }
        #divFooter-info .section:not(:last-child) { padding-bottom: 25px; }
        #divFooter-info .section > div { flex: 1; padding-right: 30px; }
    #divFooter-info h3 { color: #fff; font-size: 16px; font-weight: bold; margin-top: 20px; margin-bottom: 10px; }
.footer-link { }
    .footer-link > ul { margin: 0; flex-direction: column; column-count: 2; }
        .footer-link > ul > li { list-style-type: none; padding: 5px 0; }
            .footer-link > ul > li > a { border-left: 1px solid #808490; padding: 2px 10px; }
                .footer-link > ul > li > a:hover { color: #fff !important; border-color: #fff; }

.footer-contact { }
    .footer-contact > div { padding: 5px; }
    .footer-contact img { height: 20px; margin-right: 5px; }
    .footer-contact a { }
        .footer-contact a:hover { text-decoration: underline; }

.footer-copyright { background-color: #1e181d; text-align: center; padding: 5px 0; }

.f-sm { }
    .f-sm a { margin: 0 2px; }
    .f-sm img { border-radius: 50%; }

.f-pm { }
    .f-pm img { height: 50px; margin: 0 5px; }

@media screen and (max-width: 1023px) {
    #divFooter-info .section { display: block; padding-left: 20px; padding-right: 20px; }

    .footer-link > ul { column-count: 4; }

    .f-sm, .f-pm, .f-gl { text-align: center; padding-top: 10px; }
}

@media screen and (max-width: 400px) {
    .footer-link > ul { column-count: 3; }
}

/**************************************************************************************************************************** Float Icon */
#floatIcon { position: fixed; z-index: 10; bottom: 15px; left: 15px; }
    #floatIcon a { display: block; padding: 10px; width: 70px; height: 70px; background-color: #dab99a; border-radius: 100%; margin: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
        #floatIcon a > img { width: 100%; }

@media screen and (max-width: 768px) {
    #floatIcon { display: none; }
}

/********************* adminLogin */
#theme-contain-adminloginx input { padding: 5px 7px; border: 1px solid #666; margin: 5px auto; background-color: #fff; }
#theme-contain-adminloginx > p + table { width: 350px; margin: 0 auto; }
ds #theme-contain-adminloginx > p + table > tbody > tr > td:nth-child(2) { padding-left: 10px; }

/**************************************************************************************************************************** HOME */
.divBanner { min-height: 37vw; }
    .divBanner img { width: 100%; }
.flexslider { margin: auto; border: 0; background-color: transparent; }
.flex-direction-nav { height: 0; }

.btn-close { position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 9; }
    .btn-close > div { padding: 20px 12px; border-radius: 50%; }
    .btn-close span { height: 4px; width: 22px; border-radius: 2px; display: block; -webkit-transform: translateY(2px) rotate(45deg); transform: translateY(2px) rotate(45deg); background-color: #aaa; }
        .btn-close span:nth-child(2) { -webkit-transform: translateY(-2px) rotate(-45deg); transform: translateY(-2px) rotate(-45deg); }
    .btn-close:hover { }
        .btn-close:hover > div, .btn-close:active > div { background-color: #eee; }
        .btn-close:hover span, .btn-close:active span { background-color: #222; }


/*** TITLE ***/
.title-main { text-align: center; position: relative; margin: 20px auto; }
    .title-main > .inner { display: table; margin: auto; width: 100%; max-width: 400px; }
    .title-main h1 { font-weight: bold; font-size: 36px; font-family: 'Merriweather-Bold'; margin-bottom: 0; }
    .title-main p { color: #aaa; margin-top: 5px; font-size: 14px; line-height: normal; }
    .title-main:before, .title-main:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100%; width: calc((100% - 300px) / 2); background-repeat: no-repeat; background-position: center; background-size: 100% auto; }
    .title-main:before { background-image: url('/data/1806/uploads/title-main-left.png'); right: auto; }
    .title-main:after { background-image: url('/data/1806/uploads/title-main-right.png'); left: auto; }

@media screen and (max-width: 1200px) {
    .title-main:before, .title-main:after { background-size: auto 70px; }
    .title-main:before { background-position: right bottom 15px; }
    .title-main:after { background-position: left bottom 15px; }
}

@media screen and (max-width: 767px) {
    .title-main h1 { font-size: 7vw; }
    .title-main:before, .title-main:after { background-size: auto 50px; }
    .title-main:before { background-position: right -40px bottom 15px; }
    .title-main:after { background-position: left -40px bottom 15px; }
}

.title-sub { text-align: center; position: relative; display: table; margin: 20px auto; max-width: 300px; width: 100%; }
    .title-sub h4 { font-weight: bold; font-size: 24px; font-family: 'Merriweather-Bold'; }
    .title-sub:before, .title-sub:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 9px; width: 123px; }
    .title-sub:before { background-image: url('/data/1806/uploads/title-sub-left.png'); right: auto; transform: translateX(-100%); }
    .title-sub:after { background-image: url('/data/1806/uploads/title-sub-right.png'); left: auto; transform: translateX(100%); }

@media screen and (max-width: 767px) {
    .title-sub { max-width: 55vw; }
        .title-sub h4 { font-size: 5vw; }
        .title-sub:before, .title-sub:after { background-size: 100% auto; background-repeat: no-repeat; width: 15vw; background-position: center; }
}

/*** home announce ***/
#divHome-announce { margin: 20px auto; padding: 10px 0; }
    #divHome-announce > .wrapper { display: flex; border-radius: 30px; border: 2px solid #daba9a; padding: 5px 15px; }
        #divHome-announce > .wrapper > .icon { width: 100px; position: relative; }
            #divHome-announce > .wrapper > .icon > img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: myAnnounce 2s infinite; }
        #divHome-announce > .wrapper > .scroll { width: 100%; }
            #divHome-announce > .wrapper > .scroll ul { margin: 0; padding: 0; }
                #divHome-announce > .wrapper > .scroll ul > li { list-style-type: none; }

@keyframes myAnnounce {
    0%,100% { transform: scale(1); }
    20% { transform: scale(1.1) rotate(3deg); }
    40% { transform: scale(.97); }
    60% { transform: scale(.99) rotate(-3deg); }
    80% { transform: scale(1.05); }
}

@media screen and (max-width: 1200px) {
    #divHome-announce > .wrapper { width: 95%; }
}

@media screen and (max-width: 767px) {
    #divHome-announce { margin-top: 0; padding-top: 0; position: relative; z-index: 9; }
        #divHome-announce > .wrapper { width: 100%; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; padding-left: 5px; }
            #divHome-announce > .wrapper > .icon { max-width: 100px; width: 30vw; }
                #divHome-announce > .wrapper > .icon > img { width: 20vw; max-width: 80px; }
}


/*** home highlight video ***/
#divHomeVideo .title-sub { margin-bottom: 0; }

#divHomeVideo .video-wrapper { max-width: 900px; margin: auto; width: 100%; padding: 30px; background-image: url('/data/1806/uploads/frame-border.png'); background-size: 100% auto; background-repeat: no-repeat; }
#divHomeVideo .html5gallery-container-0 { }
#divHomeVideo .html5gallery-elem-0 { padding: 0; box-shadow: none; }
#divHomeVideo .html5gallery-box-0 { }
#divHomeVideo .html5gallery-car-0 { margin-top: 25px; }


@media screen and (max-width: 767px) {
    #divHomeVideo .video-wrapper { padding: 2vw; }
}

/*** home production ***/
.prod-btn-container > .inner { display: flex; align-items: center; justify-content: center; }
.prod-btn-container .btn-prod { flex: 1; margin: 10px; text-align: center; background-image: url('/data/1806/uploads/btn-01.png'); background-size: 100% 100%; padding: 10px; font-weight: bold; cursor: pointer; }
    .prod-btn-container .btn-prod:hover,
    .prod-btn-container .btn-prod.active { background-image: url('/data/1806/uploads/btn-01-active.png?v1'); text-shadow: 0 0 5px #fff; }
    .prod-btn-container .btn-prod img { margin-right: 5px; }

.prod-main-container { margin: 25px 0 50px; position: relative; }

.prod-box { display: flex; align-items: stretch; justify-content: center; opacity: 0; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
    .prod-box.active { opacity: 1; position: relative; z-index: 2; pointer-events: auto; }
    .prod-box > div { overflow: hidden; flex: 1; transition: 1s ease-in-out; opacity: 0; }
        .prod-box > div.left { transform: translateX(-50px); }
        .prod-box > div.right { transform: translateX(50px); }
    .prod-box.active > div { opacity: 1; }
        .prod-box.active > div.left { transform: translateX(0); }
        .prod-box.active > div.right { transform: translateX(0); }
    .prod-box.unactive { opacity: 1; }
        .prod-box.unactive > div.left { transform: translateX(-50px); }
        .prod-box.unactive > div.right { transform: translateX(50px); }

    .prod-box > div.right { padding-left: 20px; }
.prod-detail { display: flex; flex-direction: column; }
.prod-box .img { text-align: center; position: relative; }
    .prod-box .img img { width: 100%; max-width: 500px; }
        .prod-box .img img.float { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: auto; animation: myFloat 3s ease-in-out infinite; }
.prod-top { margin-top: 25px; }
    .prod-top .title { font-size: 45px; font-family: 'Merriweather-Bold'; margin-bottom: 0; }
    .prod-top .sub-title { font-size: 14px; color: #666; }
    .prod-top .prod-text { font-size: 16px; margin-top: 25px; line-height: normal; }
.prod-logo { margin: 25px 0; }
.prod-btn { }
    .prod-btn a { display: table; padding: 8px 25px; background-color: #fff; border: 2px solid #cdae8f; font-weight: bold; color: #cdae8f; border-radius: 7px; }
        .prod-btn a:hover { background-color: #cdae8f; color: #fff; border-color: transparent; }

.owl-logo.owl-carousel .owl-item { padding: 5px; }

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

@media screen and (max-width: 1200px) {
    .prod-btn-container .btn-prod { margin: 10px 5px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .prod-container { display: flex; align-content: stretch; }
        .prod-container > div { overflow: hidden; }
    .prod-btn-container { flex: 1; margin-top: 25px; }
    .prod-main-container { flex: 4; margin-top: 0; }

    .prod-btn-container > .inner { flex-direction: column; }
    .prod-btn-container .btn-prod { width: 100%; }

    .prod-box { flex-direction: column; }
    .prod-top { margin-top: 0; text-align: center; }
    .prod-btn a { margin: auto; }
}

@media screen and (max-width: 767px) {
    .prod-btn-container > .inner { flex-wrap: wrap; }
    .prod-btn-container .btn-prod { flex: 1 1 31%; max-width: 31%; margin: 1%; }
        .prod-btn-container .btn-prod img { display: block; margin: 5px auto 0; }

    .prod-box > div.left { transform: translateY(0); }
    .prod-box > div.right { transform: translateY(0); }
    .prod-box.active > div.left { transform: translateY(0); }
    .prod-box.active > div.right { transform: translateY(0); }
    .prod-box.unactive > div.left { transform: translateX(0px) translateY(50px); }
    .prod-box.unactive > div.right { transform: translateX(0px) translateY(-50px); }

    .prod-box > div.right { padding-left: 20px; }
    .prod-box { flex-direction: column; }
    .prod-top { margin-top: 0; text-align: center; }
    .prod-btn a { margin: auto; }
}




/*** home jackpot ***/
.jackpot .img { text-align: center; padding-bottom: 40px; position: relative; background-image: url('/data/1806/uploads/img-jackpot-bg2.png'); background-position: center bottom; background-repeat: no-repeat; background-size: auto; }
    .jackpot .img .bg { position: absolute; top: 0; left: 0; right: 0; margin: auto; animation-name: myZoonIn !important; z-index: -1; pointer-events: none; }
        .jackpot .img .bg.animated { animation-iteration-count: infinite; }

.count-jackpot { position: relative; }
.count { color: #daba9a; font-size: 60px; font-family: 'Bebas'; position: absolute; bottom: 0px; left: 0; right: 0; margin: auto; background-image: url('/data/1806/uploads/img-jackpot-count.png?v1'); background-position: center; background-size: auto 100%; background-repeat: no-repeat; text-align: center; padding: 10px; display: flex; align-items: center; justify-content: center; }
    .count #foo { font-size: 60px; font-family: 'Bebas'; margin-left: 20px; }

@keyframes myZoonIn {
    0% { transform: scale(0); }
    10% { transform: scale(1.1); }
    15%, 70% { transform: scale(1.0); }
    75% { transform: scale(0.9); opacity: 1; }
    80%, 100% { transform: scale(2); opacity: 0; }
}

@media screen and (max-width: 1100px) {
    .jackpot .img { background-size: auto 100%; }
        .jackpot .img img { width: 100%; }
}

@media screen and (max-width: 768px) {
    .jackpot .img { padding-bottom: 4vw; overflow: hidden; }
    .count { font-size: 6vw; padding: 3vw; }
        .count #foo { font-size: 6vw; }
}

@media screen and (max-width: 767px) {
    #divHome-jackpot .wrapper { padding-left: 0; padding-right: 0; }
        #divHome-jackpot .wrapper .title-main { margin-left: 15px; margin-right: 15px; }
    .jackpot .img img { width: 200%; animation: none; transform: translateX(-50%); margin-left: 50%; }

    .jackpot .img { padding-bottom: 5vw; }
    .count { font-size: 10vw; padding: 5vw; }
        .count #foo { font-size: 10vw; }
}

/*** home step ***/
.step-wrapper { margin: 30px 0 50px; }
.step-container { display: flex; align-items: stretch; justify-content: center; }
.step-box { flex: 1; margin: 20px; text-align: center; padding: 30px 0 100px; border-radius: 20px; background-color: rgba(255,255,255,0.8); box-shadow: 0 0 10px #dab99a; position: relative; }
    .step-box .inner { }
    .step-box .img { border-top: 8px solid #dab99a; padding-top: 30px; padding-bottom: 10px; }
        .step-box .img img { width: 80px; }
    .step-box .text { padding: 0 30px; }
        .step-box .text h2 { position: absolute; bottom: 25px; width: 90%; left: -5px; background-color: #dab99a; color: #fff; font-weight: bold; padding: 10px 0; border-bottom-right-radius: 30px; border-top-right-radius: 30px; text-transform: uppercase; }
            .step-box .text h2 span { font-size: 24px; }
                .step-box .text h2 span.num { margin-left: 10px; }
        .step-box .text h3 { font-weight: bold; }
        .step-box .text p { line-height: normal; margin-top: 25px; }

@media screen and (max-width: 768px) {
    .step-container { margin: auto; width: 90%; flex-direction: column; max-width: 600px; }
    .step-box { margin: 10px; padding: 10px; padding-left: 125px; }
        .step-box .inner { display: flex; align-items: center; }
        .step-box .img { border: 0; padding-top: 10px; }
        .step-box .text { text-align: left; }
            .step-box .text h2 { width: 100px; height: 100%; top: 0; bottom: 0; left: 0; margin: auto; border-radius: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
                .step-box .text h2 span { }
                    .step-box .text h2 span.font { font-size: 14px; margin-top: 5px; }
                    .step-box .text h2 span.num { font-size: 36px; font-family: "Bebas"; margin-left: 0px; margin-top: 5px; }
            .step-box .text p { margin-top: 5px; }
}

@media screen and (max-width: 767px) {
    .step-box { padding-left: 5vw; border-top-right-radius: 0; }
        .step-box .text { padding-left: 5vw; padding-right: 15px; }
            .step-box .text h2 { width: auto; height: auto; top: 0; bottom: auto; left: auto; right: 0; display: block; border-radius: 0; padding: 0 20px 0 50px; line-height: 0; }
                .step-box .text h2:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 8vw 0 0 8vw; border-color: transparent transparent transparent #fff; pointer-events: none; }
                .step-box .text h2 span.font { font-size: 4vw; line-height: normal; }
                .step-box .text h2 span.num { font-size: 6vw; margin-left: 5px; line-height: normal; }
            .step-box .text h3 { font-size: 5vw; padding-top: 3px; }
}

/*** home about ***/
.about-container { display: flex; justify-content: center; align-content: center; text-align: center; max-width: 800px; margin: 50px auto 50px; }
.about-box { flex: 1; height: 100%; }
.count-box { color: #dab99a; }
.counter { font-family: "Bebas"; font-size: 80px; }
.count-box .plus { font-size: 40px; position: absolute; }
.count-info { font-weight: bold; color: #000; line-height: normal; }

#divHome-about .section2 { margin: 30px auto 50px; }
.aboutIcn-container { display: flex; align-content: stretch; justify-content: center; flex-wrap: wrap; }
.aboutIcn-box { flex: 1; height: 100%; margin: 0 30px; text-align: center; }
    .aboutIcn-box img { width: 120px; }
    .aboutIcn-box h3 { font-weight: bold; font-size: 18px; }
    .aboutIcn-box p { line-height: normal; font-size: 12px; margin-bottom: 0; color: #666; }

#divHome-about .section3 .title-sub { max-width: 500px; }
p.about-detail { text-align: center; color: #666; padding: 0 15px; margin: 25px auto; }

.aboutDetail-container { display: flex; align-items: stretch; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.detail-box { flex: 1; margin: 10px; margin-top: 50px; animation-duration: 0.3s; animation-name: myZoom; }
    .detail-box.active { position: relative; z-index: 100; }
    .detail-box > .inner { height: 100%; width: 100%; }
    .detail-box .btn-detail { background-image: url('/data/1806/uploads/bg-square.png'); text-align: center; height: 100%; cursor: pointer; background-size: 100% 100%; background-color: rgba(255,255,255,0.7); transition: transform 0.3s; }
        .detail-box .btn-detail:hover { transform: translateY(-10px); }
        .detail-box .btn-detail > .inner { display: flex; flex-direction: column; height: 100%; }
        .detail-box .btn-detail .img { margin-top: -40px; height: 100px; }
            .detail-box .btn-detail .img img { width: 100px; }
        .detail-box .btn-detail .text { padding: 20px 25px 25px; display: flex; height: 100%; align-items: center; justify-content: center; }
        .detail-box .btn-detail .text-title { font-weight: bold; line-height: normal; }
        .detail-box .btn-detail .text-detail { display: none; }
        .detail-box .btn-detail .btn-close { display: none; }
    .detail-box .popup-detail { display: none; }

    .detail-box .popup-detail { background-color: rgba(0,0,0,0.6); position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; align-items: center; transition: 0.5s; z-index: 2; }
        .detail-box .popup-detail.active { display: flex; }
        .detail-box .popup-detail .inner { max-width: 750px; background-color: #fff; height: auto; margin: auto; width: 90%; padding: 50px 0 30px; transition: 0.5s; position: relative; border: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); cursor: auto; text-align: center; border-radius: 20px; }
        .detail-box .popup-detail .img { margin-top: 0; height: auto; }
            .detail-box .popup-detail .img img { width: 150px; }
        .detail-box .popup-detail .text { padding: 20px 50px; display: block; height: auto; }
        .detail-box .popup-detail .text-title { font-size: 18px; padding-bottom: 25px; position: relative; font-weight: bold; }
            .detail-box .popup-detail .text-title:after { content: ''; position: absolute; bottom: -0px; width: 100px; border-top: 5px dotted #aaa; left: 0; right: 0; margin: auto; }
        .detail-box .popup-detail .text-detail { display: block; margin-top: 15px; text-align: justify; }

@keyframes myZoom {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@media screen and (max-width: 1023px) {
    .aboutIcn-box { flex: 1 1 50%; text-align: justify; padding: 10px 20px; display: flex; align-items: center; margin: 0; }
        .aboutIcn-box > a { display: flex; align-items: center; }
        .aboutIcn-box .img { margin-right: 15px; }
        .aboutIcn-box img { width: 100px; }
        .aboutIcn-box h3 { margin-top: 10px; }
}

@media screen and (max-width: 768px) {
    .detail-box { flex: 1 1 30%; max-width: 30%; }
}

@media screen and (max-width: 767px) {
    .counter { font-size: 12vw; }
    .count-box .plus { font-size: 6vw; }
    .count-info { font-size: 3vw; margin-top: 4vw; }

    .aboutIcn-container { display: block; }
    .aboutIcn-box .img { padding: 10px 0; }
    .aboutIcn-box img { width: 25vw; }

    .aboutDetail-container { flex-direction: column; width: 80%; margin: auto; }
    .detail-box { flex: 1; max-width: 100%; }
        .detail-box .popup-detail .inner { height: 90%; overflow-y: scroll; }
        .detail-box .popup-detail .text-detail { line-height: 25px; }
}

/**************************************************************************************************************************** BODY */
.bg-page { background-image: url('/data/1806/uploads/bg-page.jpg'); background-size: cover; background-position: center; overflow: hidden; }
.info-wrapper { padding: 25px 0; position: relative; }

.info-tab { position: absolute; right: 0; bottom: 150px; width: 50%; z-index: 3; transition: top 1s ease-in-out; }
    .info-tab > .inner { display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; justify-content: flex-start; }
        .info-tab > .inner > div { max-width: 15%; flex: 1 1 14%; }
    .info-tab .logo-box { margin: 1%; padding: 5px 0px; background-image: url('/data/1806/uploads/btn-01.png'); background-size: 100% 100%; cursor: pointer; transition: background-image 0.1s; }
        .info-tab .logo-box.active { background-image: url('/data/1806/uploads/btn-01-active.png'); }
        .info-tab .logo-box:hover { background-image: url('/data/1806/uploads/btn-01-active.png'); }
        .info-tab .logo-box img { width: 65%; }

.info-container > .inner { position: relative; }
.info-box.active { position: relative; z-index: 2; }
.info-box { position: absolute; top: 0; left: 0; right: 0; }
    .info-box > .inner { display: flex; }
        .info-box > .inner > div { flex: 1; }
    .info-box.active .img { transform: translate(0px, 0px); opacity: 1; }
    .info-box .img { transition: opacity 1s ease-in-out, transform 1s ease-in-out; transform: translate(-50px, 0px); opacity: 0; order: 1; }
        .info-box .img img { width: 100%; }
    .info-box.active .detail { transform: translate(0px, 0px); opacity: 1; }
    .info-box .detail { padding-left: 20px; position: relative; transition: opacity 1s ease-in-out, transform 1s ease-in-out; transform: translate(50px, 0px); opacity: 0; order: 2; }

    .info-box .detail-title { position: relative; }
    .info-box.active .detail-title .imglogo { transform: translate(0px, 0px); }
    .info-box .detail-title .imglogo { position: absolute; top: -15px; right: 0; opacity: 0.5; pointer-events: none; transform: translate(50px, 0px); transition: transform 1s ease-in-out; height: 80px; }
    .info-box .detail-title .title { font-weight: bold; font-size: 48px; margin-top: 36px; color: #dab99a; }
    .info-box .detail-title .country { font-size: 18px; color: #dab99a; }
    .info-box .detail-title .text { font-size: 18px; margin-top: 50px; margin-bottom: 25px; line-height: 30px; }

    .info-box .detail-game { margin: 25px 0; }
        .info-box .detail-game img { height: 25px; margin: 10px; }

    .info-box .btn-play, .info-box .btn-plsLogin { display: table; padding: 8px 25px; text-align: center; font-size: 14px; border: 2px solid #dab99a; color: #dab99a; cursor: pointer; font-weight: bold; position: relative; border-radius: 35px; background-color: #fff; }
        .info-box .btn-play:hover, .info-box .btn-plsLogin:hover { background-color: #dab99a; color: #fff; }
    .info-box .btn-play { }
    .info-box .btn-plsLogin { }

.casinoInfo-tab > .inner > div { }

@media screen and (max-width: 1200px) {
    .info-tab { bottom: 50px; }
}

@media screen and (max-width: 1100px) {
    info-box .detail-title .title { font-size: 4vw; }
    .info-box .detail-title .imglogo { width: 13vw; right: 10px; height: auto; }
}

@media screen and (max-width: 1023px) {
    .info-wrapper { padding: 25px 15px; display: block; }

    .info-tab { position: absolute; width: 100%; padding: 0 15px; bottom: auto; }
        .info-tab > .inner { margin-top: 0; margin-bottom: 15px; }
        .info-tab .logo-box { padding: 8px 0; }
            .info-tab .logo-box img { width: 90%; }

    .info-box > .inner { flex-direction: column; }
    .info-box .img { text-align: center; order: 2; }
    .info-box .detail { margin-left: 0; order: 1; padding-bottom: 15px; }

    .info-box .img { transform: translate(0px, -50px); }
    .info-box .detail { transform: translate(0px, 50px); padding-bottom: 50px; }
    .info-box .detail-title .imglogo { transform: translate(0px, 50px); width: auto; }

    .info-box .detail-title .title { margin-top: 25px; }
    .info-box .detail-title .text { margin-top: 10px; }
}

@media screen and (max-width: 767px) {
    .info-box .imglogo { display: none; }
    .info-tab > .inner > div { max-width: 18%; flex: 1 1 18%; }
    .info-box .detail-title .title { font-size: 9vw; }
}

.info-text { padding-bottom: 50px; }
    .info-text h3 { margin-bottom: 50px; font-weight: bold; position: relative; text-align: center; }
        .info-text h3:after { content: ''; position: absolute; bottom: -25px; left: 0; right: 0; margin: auto; width: 150px; height: 1px; border-top: 3px dotted #ccc; }
    .info-text p { text-align: justify; }

/*---------- sportsbook --*/
.divSport-title { text-align: center; font-weight: bold; }
.iframe-sport { width: 1100px; margin: auto; }
    .iframe-sport iframe { height: 650px; border: 1px solid #444; margin: 25px auto 10px; }

.divSport .btn { display: table; margin: 10px auto 50px; background-color: #fff; padding: 10px 25px; border-radius: 8px; border: 2px solid #dab99a; color: #dab99a; }
    .divSport .btn:hover { background-color: #dab99a; border-color: transparent; color: #fff; }

@media screen and (max-width: 1100px) {
    .iframe-sport { width: 100%; }
}
/*---------- lottery --*/
.lottoryInfo { }
.lottoryInfo-tab.info-tab .logo-box img { width: auto; }

.lotteryInfo-container { }
    .lotteryInfo-container > .inner { background-image: url('/data/1806/uploads/img-lottery-01.png'); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; }
    .lotteryInfo-container .img { position: relative; transform: translate(0); opacity: 1; }
        .lotteryInfo-container .img #drawresult { position: absolute; bottom: 15px; left: 0; right: 0; margin: auto; transition: opacity 1s ease-in-out, transform 1s ease-in-out; transform: translate(-50px, 0px); opacity: 0; }
    .lotteryInfo-container .info-box.active .img #drawresult { transform: translate(0px, 0px); opacity: 1; }

.lottab { text-align: center; margin: auto; background: transparent; color: #222; }
    .lottab ul { display: flex; flex-direction: row; margin: 0; padding: 0; }
        .lottab ul li { flex: 1 1; padding: 15px; list-style-type: none; }
            .lottab ul li strong { font-size: 13px; }
    .lottab table { border: 0px solid #dab99a; width: 100%; margin: 10px auto; font-size: 14px; border-top: 1px solid #b49577; border-left: 1px solid #b49577; }
        .lottab table th { text-align: center; background: #dab99a; padding: 10px 0; color: #fff; border-right: 1px solid #b49577; border-bottom: 1px solid #b49577; }
        .lottab table tr, .lottab table td { padding: 10px 0; color: #222; text-align: center; border-right: 1px solid #b49577; border-bottom: 1px solid #b49577; background-color: #fff; }

@media screen and (max-width: 1023px) {
    .lottab ul { flex-direction: column; }
}

@media screen and (max-width: 400px) {
    .lottab table tr, .lottab table td { font-size: 11px; }
}

#drawresult { width: 70%; margin: auto; max-width: 400px; }
    #drawresult ul { }
        #drawresult ul > li { width: 100% !important; margin: 0 auto !important; padding: 10px; background-color: transparent !important; font-size: 16px !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; vertical-align: top !important; border: 0 !important; }
            #drawresult ul > li table { background-color: #eee; }
                #drawresult ul > li table caption div { font-size: 12px !important; }
                #drawresult ul > li table tr td { color: #444 !important; }
                #drawresult ul > li table caption { border-radius: 0 !important; color: #fff !important; padding: 10px 5px !important; padding-left: 50px !important; }
                #drawresult ul > li table tr td { padding: 0 !important; }

            #drawresult ul > li ol.abc { display: flex; flex-direction: column; }
                #drawresult ul > li ol.abc > li { width: 50%; margin-left: auto; margin-right: 0; padding: 5px !important; border-bottom: 1px solid #888; background-color: #fff; position: relative; }
                    #drawresult ul > li ol.abc > li:after { position: absolute; top: 0; bottom: 0; left: -100%; right: 100%; background-color: #222; color: #fff; font-size: 14px; margin-left: 0; margin-right: auto; padding-top: 5px; }
                    #drawresult ul > li ol.abc > li:nth-child(1):after { content: 'First Prize'; }
                    #drawresult ul > li ol.abc > li:nth-child(2):after { content: 'Second Prize'; }
                    #drawresult ul > li ol.abc > li:nth-child(3):after { content: 'Third Prize'; }
            #drawresult ul > li ol.p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; padding-top: 31px; }
                #drawresult ul > li ol.p:after { content: 'Special Prize'; position: absolute; top: 0; left: 0; right: 0; font-size: 14px; background-color: #222; margin: auto; color: #fff; padding: 5px 0; }
                #drawresult ul > li ol.p > li { max-width: 25%; -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; padding: 5px !important; border: 1px dotted #ededed; background-color: #fff; }
            #drawresult ul > li ol.c { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; padding-top: 31px; }
                #drawresult ul > li ol.c > li { max-width: 25%; -webkit-box-flex: 1; -ms-flex: 1 1 25%; flex: 1 1 25%; padding: 5px !important; border: 1px dotted #ededed; background-color: #fff; }
                #drawresult ul > li ol.c:after { content: 'Consolation Prize'; position: absolute; top: 0; left: 0; right: 0; font-size: 14px; background-color: #222; margin: auto; color: #fff; padding: 5px 0; }

            #drawresult ul > li table caption { background-position: center left 10px !important; background-repeat: no-repeat !important; background-size: auto 50px !important; padding-left: 70px !important; }

            #drawresult ul > li#M table { border: 1px solid #f2bc00 !important; }
                #drawresult ul > li#M table caption { background-color: #f2bc00 !important; color: #000 !important; background-image: url('/data/1806/uploads/lotto-magnum.png'); }

            #drawresult ul > li#P table { border: 1px solid #148ea4 !important; }
                #drawresult ul > li#P table caption { background-color: #148ea4 !important; background-image: url('/data/1806/uploads/lotto-pmp.png'); }

            #drawresult ul > li#T table { border: 1px solid #dd0000 !important; }
                #drawresult ul > li#T table caption { background-color: #dd0000 !important; background-image: url('/data/1806/uploads/lotto-toto.png'); }

            #drawresult ul > li#S table { border: 1px solid #12689a !important; }
                #drawresult ul > li#S table caption { background-color: #12689a !important; background-image: url('/data/1806/uploads/lotto-singapore.png'); }

            #drawresult ul > li#B table { border: 1px solid #da002c !important; }
                #drawresult ul > li#B table caption { background-color: #da002c !important; background-image: url('/data/1806/uploads/lotto-sabah.png'); }

            #drawresult ul > li#K table { border: 1px solid #4e9803 !important; }
                #drawresult ul > li#K table caption { background-color: #4e9803 !important; background-image: url('/data/1806/uploads/lotto-sandakan.png'); }

            #drawresult ul > li#W table { border: 1px solid #094405 !important; }
                #drawresult ul > li#W table caption { background-color: #094405 !important; background-image: url('/data/1806/uploads/lotto-sarawak.png'); }

            #drawresult ul > li#H table { border: 1px solid #95650a !important; }
                #drawresult ul > li#H table caption { background-color: #95650a !important; background-image: url('/data/1806/uploads/lotto-gd.png'); }

            #drawresult ul > li#N table { border: 1px solid #777 !important; }
                #drawresult ul > li#N table caption { background-color: #777 !important; background-image: url('/data/1806/uploads/lotto-perdana.png'); }

            #drawresult ul > li#R table { border: 1px solid #00aced !important; }
                #drawresult ul > li#R table caption { background-color: #00aced !important; background-image: url('/data/1806/uploads/lotto-lucky.png'); }

@media screen and (max-width: 1100px) {
    .lotteryInfo-container .info-box .detail-title .imglogo { width: 5vw; margin-top: 25px; right: 25px; }
}

@media screen and (max-width: 1023px) {
    .lotteryInfo-container .info-box .img img { width: 80%; }
    .lotteryInfo-container > .inner { background-size: 80% auto; background-position: center bottom; }
}

@media screen and (max-width: 767px) {
    .lotteryInfo-container .info-box .img img { display: none; }
    .lotteryInfo-container > .inner { background-image: none; }
    .lotteryInfo-container .img #drawresult { position: static; width: 90%; }

    .info-tab.lottoryInfo-tab { position: static; }
    .lotteryInfo-container .info-box .detail { margin-bottom: auto !important; }
}

/**************************************************************************************************************************** MODAL */
/*---------- login --*/
.modal { background-color: rgba(0,0,0,0.7); /*display: block !important;*/ opacity: 0; transition: 0.2s; }
    .modal.active { opacity: 1; visibility: visible; transition: 0.5s; display: block !important; }
    .modal > div { transition: 0.5s; transform: translateY(-100px); opacity: 0; }
    .modal.active > div { transform: translateY(0); opacity: 1; transition: 0.2s; }

    .modal > .modal-dialog-centered { display: flex; align-items: center; height: 100%; margin: auto; }
    .modal .modal-content { width: 100%; margin-top: -100px; margin-bottom: 0; }

.login-form { width: 90%; margin: 0px auto; padding: 25px 25px; border-radius: 20px; position: relative; }
    .login-form h3 { text-align: center; font-weight: bold; color: #b49577; font-size: 30px; letter-spacing: 1px; }

#remoteloginform, #customform { width: 100%; margin: 25px auto 0; text-align: center; }
    #remoteloginform dl, #customform dl { margin-bottom: 0; }
    #remoteloginform input, #customform input { padding: 10px 15px 10px; border: 0px solid #ccc; border-bottom: 1px solid #ccc; margin: 10px auto; width: 100%; color: #000; font-size: 14px; position: relative; }
        #remoteloginform input[name="user"], #remoteloginform input[name="pwd"], #customform_UserName, #customform_Password { padding-left: 50px !important; background-position: center left 10px; background-repeat: no-repeat; }
            #remoteloginform input[name="user"]:focus, #remoteloginform input[name="pwd"]:focus { border-color: #dab99a; }
        #remoteloginform input[name="user"], #customform_UserName { background-image: url('/data/1806/uploads/icn-user.png?v1') !important; }
        #remoteloginform input[name="pwd"], #customform_Password { background-image: url('/data/1806/uploads/icn-lock.png?v1') !important; }
        #remoteloginform input#remoteloginformsubmit, #customform input#customform_submit { margin-top: 50px; background-color: #ccc; color: #000; font-size: 18px; text-transform: uppercase; border-radius: 25px; cursor: pointer; font-weight: bold; letter-spacing: 1px; }
        #remoteloginform input#remoteloginformsubmit, #customform input#customform_submit { color: #fff; border: 0; background: rgb(206,200,166); background: -moz-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: -webkit-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cec8a6",endColorstr="#dab99a",GradientType=1); }
            #remoteloginform input#remoteloginformsubmit:hover,
            #customform input#customform_submit:active,
            #remoteloginform input#remoteloginformsubmit:hover,
            #customform input#customform_submit:active { background: rgb(180,149,119); background: -moz-linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); background: -webkit-linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); background: linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b49577",endColorstr="#dab99a",GradientType=1); }

        #remoteloginform input::placeholder { transition: 1s; }
        #remoteloginform input:focus::placeholder { opacity: 1; transform: translateX(50px); opacity: 0; }

        #remoteloginform input[name="user"]:-webkit-autofill,
        #remoteloginform input[name="user"]:-webkit-autofill:hover,
        #remoteloginform input[name="user"]:-webkit-autofill:focus,
        #remoteloginform input[name="user"]:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #fffde7 inset !important; }

.btn-fogetp { text-align: right; margin-top: -105px; position: absolute; left: 5%; right: 5%; }
    .btn-fogetp a { color: #b49577 !important; padding: 15px 0; }
        .btn-fogetp a:hover { text-decoration: underline; color: #444 !important; }

.loginv1 { text-align: center; background-color: #a80000; border-radius: 40px; padding: 5px 30px; text-decoration: none !important; color: #fff !important; }
    .loginv1 a { padding: 5px; color: #fff !important; }
        .loginv1 a:hover { }

.modal-login .login-register { width: 90%; margin: auto; }
.modal-login .btn-goRegister { border-top: 1px solid #ccc; padding: 25px 0; text-align: center; }
    .modal-login .btn-goRegister p { margin-bottom: 0; }
    .modal-login .btn-goRegister a { padding: 5px 30px; border-radius: 40px; display: table; margin: auto; background-color: #dab99a; font-size: 16px; color: #fff !important; }
        .modal-login .btn-goRegister a:hover { background-color: #b49577; }

@media screen and (max-width: 767px) {
    .modal > div { transform: translateY(-100%); }
    .modal-login > .modal-dialog-centered { width: 100%; margin: 0; }
    .modal-login .modal-content { height: 100%; border-radius: 0; box-shadow: none; border: 0; }
    .modal .modal-content { margin-top: 0; }
}

.divLogin { display: flex; justify-content: center; }
    .divLogin > div { flex: 1; }
.divlogin-box { max-width: 500px; width: 100%; position: relative; padding: 20px; margin: 25px; background-color: #fff; border-radius: 20px; box-shadow: 0px 0px 10px #dab99a; }
    .divlogin-box h3 { text-align: center; }
.btnloginv2 { padding: 5px 25px; display: table; margin: 15px auto; border-radius: 8px; background-color: #ccc; cursor: pointer; }
    .btnloginv2:hover { background-color: #dab99a; }




/*---------- please login --*/
.plsLogin-container { text-align: center; padding: 50px 25px; }
    .plsLogin-container h3 { color: #b49577 !important; font-weight: bold; }
    .plsLogin-container p { color: #444 !important; }

.plsLogin-bottom { display: flex; padding-top: 15px; padding-left: 50px; padding-right: 50px; }
    .plsLogin-bottom .btn-goPage { text-align: center; flex: 1 1; text-transform: uppercase; padding: 10px 10px; margin: 5px 10px; font-weight: bold; color: #fff !important; border-radius: 30px; font-size: 18px; background: rgb(206,200,166); background: -moz-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: -webkit-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cec8a6",endColorstr="#dab99a",GradientType=1); }

@media screen and (max-width: 767px) {
    .plsLogin-bottom { padding-left: 0; padding-right: 0; flex-direction: column; }
        .plsLogin-bottom .btn-goPage { }
    #modal_plsLogin.modal .modal-content { margin-bottom: auto; margin-top: 100px; }

    .divLogin { flex-direction: column; }
    .divlogin-box { margin-left: auto; margin-right: auto; }
}

/**************************************************************************************************************************** REGISTRATION */
.register { padding-top: 25px; }

#registerform { width: 90%; margin: 25px auto 50px; border: 1px solid #dab99a; background-color: #fff; border-radius: 20px; padding: 25px 50px; }
    #registerform dl { margin: 15px auto; }
    #registerform dt { width: 100%; color: #222; font-size: 10px; margin-bottom: 5px; }
    #registerform textarea, #registerform input[type=text], #registerform input[type=password], #registerform input[type=email] { width: 100%; color: #000; font-size: 15px; padding: 10px; background: transparent; border-bottom: 2px solid #ccc; }
        #registerform textarea:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus { border-color: #dab99a; }
#groupUsername dd { font-size: 0; }
#registerform #registerform_UserName { width: 70%; display: inline-block; }
#registerform .btnCheckUser { width: 30%; display: inline-block; text-align: center; }
#registerform #registerform_Currency { background: transparent; border: 0; border-bottom: 2px solid #ccc; border-radius: 0px; padding: 10px; font-size: 18px; color: #888; width: 100%; }
    #registerform #registerform_Currency:focus { border-color: #dab99a; }
#registerform #registerform_varifycode { width: 135px; float: left; }
#registerform .btnCheckUser, #registerform_btnSubmit { border-radius: 15px; color: #161616; font-weight: bold; border: 0px; padding: 8px 12px; font-size: 14px; text-transform: uppercase; margin: 6px 0; background: rgb(206,200,166); background: -moz-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: -webkit-linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); background: linear-gradient(90deg, rgba(206,200,166,1) 0%, rgba(218,185,154,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cec8a6",endColorstr="#dab99a",GradientType=1); }
#registerform_btnSubmit { padding: 10px 35px; cursor: pointer; }
#registerform:after { font-size: 10px; color: #fff; }
#groupVerifyCode img { margin-left: 15px; height: 30px; }
input::-webkit-input-placeholder { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input::-moz-placeholder { transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input:-ms-input-placeholder { transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input::placeholder { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input:focus::-webkit-input-placeholder { -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }
input:focus::-moz-placeholder { transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-timing-function: ease-in; }
input:focus:-ms-input-placeholder { transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-timing-function: ease-in; }
input:focus::placeholder { -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }
.small { font-size: 12px; }
.w3-text-red { color: #dd0000; }

@media screen and (max-width: 1023px) {
    #registerform #registerform_UserName { width: 60%; }
    #registerform .btnCheckUser { width: 40%; }

    #registerform .btnCheckUser, #registerform_btnSubmit { border-radius: 2vw; }
}

@media screen and (max-width: 767px) {
    #registerform { padding: 25px; }
        #registerform .btnCheckUser { font-size: 3vw; }

    #registerform_btnSubmit { margin: 25px auto 0; display: table; }
}

/**************************************************************************************************************************** Promotions */
#faq_modal { margin-left: 0; padding-left: 0; }
    #faq_modal > li { list-style-type: none; padding: 5px 0; }
#question img { width: 100%; }
.question .promo .row { border-right: #fee1c3 1px solid; border-bottom: #fee1c3 1px solid; }
.fancybox-inner { width: auto !important; height: auto !important; }
    .fancybox-inner .info { display: none; }
.promo .col-md-5 .more-btn { margin-left: 0 !important; }

.popup_contain { max-width: 90% !important; height: 90% !important; top: 5%; margin: auto !important; padding: 20px !important; }
    .popup_contain .donatetab { overflow-y: auto; height: 100%; padding: 10px 0 10px; }

#promotion-filter { text-transform: capitalize; margin: 25px auto; max-width: 1024px; }
    #promotion-filter > ul { overflow: hidden; margin: 0; display: flex; }
        #promotion-filter > ul > li { flex: 1; padding: 10px 0; text-align: center; margin: 5px; cursor: pointer; list-style-type: none; background-image: url('/data/1806/uploads/btn-01.png'); background-size: 100% 100%; color: #222; }
            #promotion-filter > ul > li img { margin-right: 5px; height: 25px; }
            #promotion-filter > ul > li.mixitup-control-active { color: #222; background-image: url('/data/1806/uploads/btn-01-active.png'); }
            #promotion-filter > ul > li *::-moz-selection, #promotion-filter > ul > li::-moz-selection { color: none; background: none; -moz-user-select: none; user-select: none; }
            #promotion-filter > ul > li *::selection, #promotion-filter > ul > li::selection { color: none; background: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#faq_template_list { }
    #faq_template_list ol#faq { padding: 0; margin: 0; list-style: none; }
        #faq_template_list ol#faq li#faq div#question a { display: inline; }
        #faq_template_list ol#faq li#faq { margin-bottom: 25px; }
            #faq_template_list ol#faq li#faq div#question { padding: 0px 15px; }
                #faq_template_list ol#faq li#faq div#question a:hover { text-decoration: none; }
            #faq_template_list ol#faq li#faq div#answer { border: 6px solid #0c0c0c; padding: 15px 20px; margin-top: 15px; background: rgba(0,0,0,0.8); }

.promo .col-md-7 { margin: 0px !important; padding: 0px !important; }
    .promo .col-md-7 h3 { position: absolute; right: 10px; text-transform: uppercase; text-shadow: 1px 1px 1px #333; color: #fff; text-align: right; padding: 10px 20px; font-size: 30px; }
    .promo .col-md-7 img { width: 100%; }
.promo .col-md-5 { min-height: 205px; padding: 10px 30px !important; background: #fdead7; }
    .promo .col-md-5 h5 { margin-bottom: 40px; color: #dbba9c; }
    .promo .col-md-5 a { color: #c39972; }
    .promo .col-md-5 .more-btn { color: #333; padding: 5px 20px; background: #ddd; font-size: 18px; text-transform: uppercase; border: 2px solid #999; cursor: pointer; margin-left: 50px; }
        .promo .col-md-5 .more-btn:hover { background: #fff; }
    .promo .col-md-5 .join-btn { color: #fff; padding: 5px 20px; background: #b49577; font-size: 18px; text-transform: uppercase; border: 2px solid #b49577; }
        .promo .col-md-5 .join-btn:hover { background: #dab99a; border: 2px solid #dab99a; }
.promo-title { font-size: 18px; font-weight: bold; color: #dab867; }
.promo-subtitle { font-size: 14px; color: #dab867; font-weight: 400; margin-bottom: 10px; }

@media screen and (max-width: 1023px) {
    #cms5faq_modal_template_list { padding: 0 15px; }
}

@media (max-width: 1023px) and (min-width: 768px) {
    #promo { display: flex; padding-top: 25px; }
        #promo #promotion-filter { flex: 2; margin-top: 0; }
    #promotion-filter > ul { flex-direction: column; }
    #promo #prmotion-faq { flex: 6; }
}

@media screen and (max-width: 767px) {
    #promotion-filter { padding-left: 15px; padding-right: 15px; }
        #promotion-filter > ul > li img { display: block; margin: 5px auto; }
        #promotion-filter > ul > li { background-image: none; border-radius: 10px; border: 1px solid #b49577; background-color: #fff; margin: 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
            #promotion-filter > ul > li.mixitup-control-active { background-image: none; background-color: #dab99a; color: #fff; }
}

/**************************************************************************************************************************** CHARITY */
#theme-contain-charity .hub-charity-container .tile-content { bottom: 0; left: 0; right: 25%; margin: auto; top: 10px; }
.hub-charity-container[data-game="ch"] .tile-content .tile-title .title-box h2 { color: #6b4625 !important; }
.hub-charity-container .tile-content .tile-title .title-box { border-color: #6b4625 !important; }
    .hub-charity-container .tile-content .tile-title .title-box .line { border-color: #6b4625 !important; }
.hub-charity-container .button { background-color: #6b4625 !important; }
.hub-charity-container[data-game="ch"] .tile-content .tile-title h1 { color: #6b4625 !important; }

#theme-contain-charity .flex-control-nav li { margin: 0 10px; }
#theme-contain-charity .flex-control-paging li a.flex-active { background-color: #b49577 !important; }
#theme-contain-charity .flex-control-paging li a { background-color: #dab99a !important; }

#theme-contain-charity .ab_titleh3 { color: #b49577 !important; }

#app2 .titleBox { margin-bottom: 0; padding-bottom: 110px; text-align: center; }
#app2 .titles { float: none; padding-bottom: 25px; }
#app2 .catNav { float: none; }
    #app2 .catNav ul li { width: 150px; margin: 5px; height: auto; padding: 0; }
        #app2 .catNav ul li a { display: block; padding: 25px 0; }
        #app2 .catNav ul li button { width: 100%; background-color: transparent; border: 0; padding: 25px 0; }
#app2 .tooltip-inner img { width: 100%; }

.donatetab table { background-color: #fff !important; }
    .donatetab table tr:nth-child(1) { background-color: #b49577 !important; }
    .donatetab table tr:nth-child(even) { background: #ecd9c8 !important; }
    .donatetab table, .donatetab table th, .donatetab table tr, .donatetab table td { border-color: #6b4625 !important; }

#theme-contain-charity .open_popup { background: rgb(180,149,119); background: -moz-linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); background: -webkit-linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); background: linear-gradient(90deg, rgba(180,149,119,1) 0%, rgba(218,185,154,1) 100.%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b49577",endColorstr="#dab99a",GradientType=1); }
#theme-contain-charity .popup_close { background-color: #b49577 !important; }

#theme-contain-charity .newsContent .titdiv ul .onli { background-color: #b49577 !important; }

.tab1 ul li a:hover .numLeft, .tab1 ul li a:hover .numTxt h4, .tab1 ul li a:hover .numTxt span { color: #b49577 !important; }
#theme-contain-charity .catNav ul li:hover { background-color: #b49577 !important; }
#theme-contain-charity .catNav ul li span.ps01 { background-image: url('/data/1806/uploads/charity-icn-contact-whatapp-hover.png'); }
#theme-contain-charity .catNav ul li span.ps02 { background-image: url('/data/1806/uploads/charity-icn-contact-telegram-hover.png'); }
#theme-contain-charity .catNav ul li span.ps03 { background-image: url('/data/1806/uploads/charity-icn-contact-wechat-hover.png'); }
#theme-contain-charity .catNav ul li span.ps04 { background-image: url('/data/1806/uploads/charity-icn-contact-fb-hover.png'); }

#theme-contain-charity .catNav ul li:hover span.ps01 { background-image: url('/data/1806/uploads/charity-icn-contact-whatapp.png'); }
#theme-contain-charity .catNav ul li:hover span.ps02 { background-image: url('/data/1806/uploads/charity-icn-contact-telegram.png'); }
#theme-contain-charity .catNav ul li:hover span.ps03 { background-image: url('/data/1806/uploads/charity-icn-contact-wechat.png'); }
#theme-contain-charity .catNav ul li:hover span.ps04 { background-image: url('/data/1806/uploads/charity-icn-contact-fb.png'); }

@media screen and (max-width: 1024px) {
    #theme-contain-charity .hub-charity-container .flexslider .slides { transform: translateX(-100%); margin-right: 77%; }
        #theme-contain-charity .hub-charity-container .flexslider .slides img { width: auto; height: 100%; margin-top: -31px; }
    #theme-contain-charity .hub-charity-container { min-height: 400px; }
        #theme-contain-charity .hub-charity-container .tile-bgs div { /*position:static;*/ }
        #theme-contain-charity .hub-charity-container .flexslider .slides > li { height: 355px; }
}

@media screen and (max-width: 1000px) {
    #theme-contain-charity .hub-charity-container { /*min-height:100px;*/ height: auto; padding: 0; }
        #theme-contain-charity .hub-charity-container .tile-bgs { /*position:static;*/ }
            #theme-contain-charity .hub-charity-container .tile-bgs div { /*position:static;*/ }
        #theme-contain-charity .hub-charity-container .tile-content { /*position:static; */ /*margin:40px auto 0;*/ right: 35%; }
        #theme-contain-charity .hub-charity-container .flexslider .slides { margin-right: auto; margin-left: 22%; }
    #theme-contain-charity .news-box { width: 90%; margin: auto; float: none; }
        #theme-contain-charity .news-box .title a i { top: auto; }
    #theme-contain-charity .Img-b { float: none; margin: 20px auto 0; max-width: 540px; width: 100% !important; }
    #theme-contain-charity .mr_frUl { }

    #theme-contain-charity .newsContent { max-width: 640px; width: 90%; margin: auto; float: none; }
        #theme-contain-charity .newsContent .titdiv { text-align: center; }
            #theme-contain-charity .newsContent .titdiv ul { margin: auto; display: inline-block; }
}

@media screen and (max-width: 767px) {
    #theme-contain-charity .hub-charity-container .tile-content { left: 0; right: 0; top: 30px; }
    #theme-contain-charity .hub-charity-container .flexslider .slides { margin-left: -100%; margin-right: -100%; transform: translateX(-15%); }

    #theme-contain-charity .tile-logo img { max-width: 33% !important; }
    #theme-contain-charity .hub-charity-container[data-game="ch"] .tile-content .tile-title h1 { padding: 10px 0; }

    #theme-contain-charity .ab_titleh3 { font-size: 4vw !important; }
    #theme-contain-charity .newsContent .titdiv ul { width: 100%; }
    #theme-contain-charity .tempWrap { width: 100% !important; }
    #theme-contain-charity .mr_frUl ul li { height: auto !important; }
    #theme-contain-charity .tempWrap > ul { width: auto !important; }
        #theme-contain-charity .tempWrap > ul > li { height: 65vw !important; width: 100% !important; }
    .flex-control-nav, .flex-direction-nav { display: none; }
    #theme-contain-charity .open_popup { width: auto !important; font-size: 3vw !important; }
    .popup_body { height: 100vh; }
    .popup_contain .donatetab table tr, .popup_contain .donatetab table td { font-size: 2.5vw; padding: 1vw !important; }
    #app2 .titleBox { padding: 0 20px; }
    #app2 .titles { float: none; }
    #app2 .catNav { float: none; margin: 20px auto 100px; display: block; }
        #app2 .catNav ul li { width: 49%; margin: 0.5%; }
}

@media screen and (max-width: 375px) {
    .header-charity { right: 230px; margin-top: 28px; z-index: 98; }
        .header-charity img { height: 20px; }
}

@media screen and (max-width: 374px) {
    #theme-contain-charity .tempWrap > ul > li { height: 77vw !important; }
}

/**************************************************************************************************************************** LUCKY JACKPOT */
@media screen and (max-width: 1200px) {
    #theme-contain-lucky-jackpot #divTitle #priceMYR { margin-top: 18vw; }
    #theme-contain-lucky-jackpot #divTitle #priceSGD { margin-top: 27vw; }
}

@media screen and (max-width: 1000px) {
    #theme-contain-lucky-jackpot .wl-section--main { height: 60vw !important; background-position: center !important; }
    #theme-contain-lucky-jackpot .wl-section__inner { width: 90vw !important; }
    #theme-contain-lucky-jackpot .wl-section--steps { height: auto; }
        #theme-contain-lucky-jackpot .wl-section--steps .wl-section__inner { padding-bottom: 25px; }
    #theme-contain-lucky-jackpot #divTitle { position: relative; height: 36vw !important; }
        #theme-contain-lucky-jackpot #divTitle #priceMYR { width: 100%; font-size: 4vw; margin-top: 16vw; }
        #theme-contain-lucky-jackpot #divTitle #priceSGD { width: 100%; font-size: 4vw; margin-top: 24vw; }
            #theme-contain-lucky-jackpot #divTitle #priceMYR span, #theme-contain-lucky-jackpot #divTitle #priceSGD span { font-size: 6vw; }
    #theme-contain-lucky-jackpot #lottery-title { width: 100%; }
    #theme-contain-lucky-jackpot #tdLucky-top > div > ul > li > h1 { font-size: 6vw; }
    #theme-contain-lucky-jackpot #tdLucky-bottom > div { padding: 8vw 5vw 0; }
    #theme-contain-lucky-jackpot .perdanaContainer { }
    #theme-contain-lucky-jackpot .wl-section--steps-bottom { height: auto !important; }
    #theme-contain-lucky-jackpot .perdanaDetail { width: 100%; }
        #theme-contain-lucky-jackpot .perdanaDetail td { padding: 5px 0.25vw; }
    #theme-contain-lucky-jackpot .perdanaContainer td { padding: 7px 0.25vw; width: auto !important; }
    #theme-contain-lucky-jackpot .perdanaContainer { min-width: initial; min-width: 1px; width: 79vw; }
}

@media screen and (max-width: 1000px) {
    #theme-contain-lucky-jackpot .wl-section--steps .wl-section__inner { margin-top: -7vw; }
}

/**************************************************************************************************************************** VIP */
.vip-tabs { display: flex; margin: 0; padding: 0; }
    .vip-tabs > li { flex: 1; text-align: center; align-items: stretch; justify-content: center; }
        .vip-tabs > li > a { border: 1px solid #dab99a; border-top-left-radius: 20px; border-top-right-radius: 20px; height: 100%; }
        .vip-tabs > li:first-child > a { margin-left: 0; }
        .vip-tabs > li:last-child > a { margin-right: 0; }
        .vip-tabs > li > a h4 { font-size: 24px; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background-color: #dab99a; color: #fff; }
.nav-tabs > li:hover > a { background-color: #e0d3c7; border-color: #dab99a; }

.sml-title { margin: 15px 0 5px; font-weight: bold; }

.vip-content { padding-bottom: 30px; }
    .vip-content .tab-pane { border: 1px solid #dab99a; border-top: 3px solid #dab99a; padding: 25px; background-color: #fff; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; }
    .vip-content li { margin: 10px 0; }
    .vip-content table { text-align: center; border-spacing: 0 !important; border-collapse: collapse !important; width: 100%; }
        .vip-content table tbody tr:first-child th { background: #000; text-align: center; }
        .vip-content table tbody tr:first-child td, .vip-content table tbody tr:nth-child(2) td { color: #fff; background-color: #b49577; border: 1px solid #dab99a; }
        .vip-content table tbody td { border: 1px solid #dab99a; background: #fff; }
        .vip-content table tbody th, table tbody td { padding: 6px 10px; }
.bg-subtit { color: #222; font-weight: bold; background-color: #dab99a; }

.vip-content p { line-height: normal; }
.ms-scroll { padding: 20px 0; }

@media screen and (max-width: 1000px) {
    .vip-tabs > li > a h4 { font-size: 2vw; }
    .ms-scroll { width: 100%; overflow-x: auto; }
}

@media screen and (max-width: 1000px) {
    .vip-tabs > li > a h4 { font-size: 4vw; margin: 10px auto; }
}

/**************************************************************************************************************************** HELP */
.help-container { padding-bottom: 50px; }
    .help-container > .inner { display: flex; justify-content: center; align-items: center; }
.help-box { padding: 30px; display: block; flex: 1; border: 1px solid #dab99a; margin: 10px; max-width: 320px; width: 100%; border-radius: 20px; background-color: #fff; }
    .help-box:hover { background-color: #fff; box-shadow: 0 0 10px #dab99a; }
    .help-box .img { text-align: center; }
        .help-box .img img { max-width: 100px; width: 100%; }
    .help-box .text { text-align: center; }
        .help-box .text h3 { font-size: 24px; font-weight: bold; }
    .help-box .button { padding: 7px 15px; display: table; margin: 25px auto 0; background-color: #dab99a; color: #fff; border-radius: 4px; }
        .help-box .button:hover { background-color: #b49577; }

@media screen and (max-width: 767px) {
    .help-container > .inner { flex-direction: column; }
}

.aboutus-container { margin-bottom: 50px; }
    .aboutus-container > .inner { display: flex; flex-direction: row; align-content: stretch; }
        .aboutus-container > .inner > .left { max-width: 180px; width: 100%; height: 100%; }
        .aboutus-container > .inner > .right { width: 100%; padding-left: 20px; border-left: 1px solid #dab99a; padding-bottom: 25px; }

.left-inner { margin-top: 10px; }
    .left-inner a { display: block; padding: 10px; }
        .left-inner a:hover { background: rgb(255,255,255); background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(230,211,194,1) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(230,211,194,1) 100%); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(230,211,194,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e6d3c2",GradientType=1); }
        .left-inner a.active, .left-inner a.active:hover { border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: -3px 0 5px #dab99a; background: none; background-color: #fcfbf7; position: relative; z-index: 2; border-top-color: transparent !important; }
            .left-inner a.active:after { content: ''; position: absolute; right: -2px; height: 100%; width: 2px; background-color: #fcfbf7; top: 0; bottom: 0; margin: auto; pointer-events: none; }
            .left-inner a.active + a { border-top-color: transparent; }
        .left-inner a:not(:first-child) { border-top: 1px dashed #dab99a; }
        .left-inner a img { max-width: 30px; margin-right: 5px; }

.right-title h3 { font-size: 24px; font-weight: bold; border-bottom: 1px dashed #aaa; margin-bottom: 20px; padding-bottom: 20px; }

@media screen and (max-width: 767px) {
    .aboutus-container > .inner > .left { width: auto; }
    .left-inner a { }
        .left-inner a img { display: block; margin-right: auto; }
        .left-inner a span { display: none; }
}

/*************** social media */
.sm-container { }
    .sm-container > .inner { display: flex; flex-direction: row; flex-wrap: wrap; }
.sm-box { flex: 1 1 50%; max-width: calc(50% - 20px); margin: 10px; background-color: #fff; border: 1px solid #dab99a; padding: 25px; display: flex; align-content: stretch; transition: transform 0.5s ease-in-out; box-shadow: none; border-radius: 8px; }
    .sm-box:hover { box-shadow: 0px 0px 10px #dab99a; transform: scale(1.05); }
    .sm-box .img { display: flex; align-items: center; margin-right: 10px; }
        .sm-box .img img { width: 50px; }
    .sm-box .text { }
        .sm-box .text h3 { margin: 0; }
        .sm-box .text p { margin-bottom: 0; display: inline-block; padding: 5px 0; }

@media screen and (max-width: 767px) {
    .sm-box { flex: 1 100%; max-width: 100%; width: 100%; margin: 10px 0; }
}

/*************** feedback */
.contact_form { padding: 20px; background-color: #fff; border-radius: 20px; margin: 25px 0; }
    .contact_form input, .contact_form select, .contact_form textarea { padding: 5px 10px; border: 1px solid #888; }
    .contact_form td { vertical-align: middle; }
    .contact_form input[type=submit] { background-color: #dab99a; border-radius: 20px; padding: 10px 25px; color: #fff; font-weight: bold; border: 0; margin-top: 25px; }
        .contact_form input[type=submit]:hover { background-color: #b49577; }


@media screen and (max-width: 767px) {
    .contact_form { }
        .contact_form tr { padding: 10px 0; display: block; }
        .contact_form td { display: block; width: 100%; padding: 0; }
        .contact_form tr > td:nth-child(2) { display: none !important; }
}

/*************** contact us */
.cu-container { }
    .cu-container > .inner { display: flex; flex-wrap: wrap; }
.cu-box { flex: 1 1; max-width: calc(50% - 10px); margin: 25px 0; background-color: #fff; border: 1px solid #dab99a; border-radius: 20px; padding: 25px; position: relative; text-align: center; }
    .cu-box:first-child { margin-right: 10px; }
    .cu-box:nth-child(2) { margin-left: 10px; }

    .cu-box .icn-country { position: absolute; top: -15px; right: -15px; width: 50px; }
    .cu-box a { padding: 5px 0; font-weight: bold; font-size: 16px; }
        .cu-box a:hover { text-decoration: underline; }
    .cu-box .img-qr { width: 90%; display: block; margin: 10px auto; }

@media screen and (max-width: 767px) {
    .cu-box { max-width: 100%; flex: 1 1 100%; margin-left: 0 !important; margin-right: 10px !important; }
        .cu-box a { display: block; }
}

/*************** contact us */
.guide-container { }
    .guide-container #faq_modal { display: flex; flex-wrap: wrap; flex-direction: row; }
    .guide-container li.question { flex: 1 1 33%; margin: 10px; max-width: calc(33% - 20px); background-color: #fff; border: 1px solid #dab99a; border-radius: 20px; }
        .guide-container li.question:hover { box-shadow: 0px 0px 10px #dab99a; }
        .guide-container li.question > a { display: block; padding: 20px; font-weight: bold; text-align: center; }
            .guide-container li.question > a img { display: block; margin: auto; margin-bottom: 10px; max-width: 80px; width: 100%; }

@media screen and (max-width: 767px) {
    .guide-container li.question { flex: 1 1 50%; max-width: calc(50% - 20px); }
}

@media screen and (max-width: 399px) {
    .guide-container li.question { flex: 1 1 100%; max-width: calc(100% - 20px); }
        .guide-container li.question > a { display: flex; align-items: center; text-align: left; }
            .guide-container li.question > a img { margin-bottom: auto; margin-right: 10px; max-width: 60px; margin-left: 0; }
}

/**************************************************************************************************************************** DESKTOP OR MOBILE */
#desktop-mobile { display: block; width: 100%; height: 100%; margin: auto; }
#desktop-mobile { background-size: auto 120px; padding-top: 150px; background-repeat: no-repeat; background-position: center top 30px; position: relative; }
    #desktop-mobile:after { content: ''; background-color: #3c3a3b; background-image: url(/data/1806/uploads/logo-smcorwn-04.gif); background-size: auto 120px; background-repeat: no-repeat; background-position: center; position: absolute; top: 0px; left: 0; right: 0; width: 100%; height: 120px; }

    #desktop-mobile #message { display: block; max-width: 350px; margin: auto; font-size: 18px; padding: 20px; padding-top: 200px; background: url(/theme/smcrown-2020/imgs/responsive.png) top no-repeat; background-size: 100%; }
    #desktop-mobile #message { padding-top: 0px; text-align: center; background-image: none; }
    #desktop-mobile #links { text-align: center; }
    #desktop-mobile a#desktop, #desktop-mobile a#desktop:visited { display: block; background: url(/theme/Default/imgs/device-desktop.png) 15px 15px no-repeat #0057AE; color: #ffffff; padding: 20px 20px 20px 50px; margin: 10px; text-decoration: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
        #desktop-mobile a#desktop, #desktop-mobile a#desktop:visited { }
    #desktop-mobile a#mobile, #desktop-mobile a#mobile:visited { display: block; background: url(/theme/Default/imgs/device-mobile.png) 15px 15px no-repeat #C10000; color: #ffffff; padding: 20px; margin: 10px; text-decoration: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
        #desktop-mobile a#mobile, #desktop-mobile a#mobile:visited { }


#theme-contain-cockfight .info-tab { display: none; }
#theme-contain-cockfight .info-tab { display: none; }


/**************************************************************************************************************************** HIGHLIGHT */

.w1400 { max-width: 1400px; margin: auto; width: 100%; padding-left: 15px; padding-right: 15px; }


.title-box { margin-top: 15px; }
#titleMain { font-size: 32px; color: #7B0B07; outline: 0; border: 0; cursor: pointer; padding-right: 15px; font-weight: bold; background-color: #fff; }
    #titleMain option { font-size: 13px; color: #000; cursor: pointer; }

.news-box { display: none; }
    .news-box.active { display: block; }

.close-box { position: relative; z-index: 2; }
.closeHighlight { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; }
button.xclose { float: none; margin-left: auto; margin-right: 0; opacity: 0; visibility: hidden; padding: 10px 10px; position: absolute; right: 25px; top: 25px; opacity: 0.5; }
button.closeHighlight.show:hover { opacity: 1; }
button.closeHighlight.show { opacity: 0.5; visibility: visible; transition: 0.5s; }


.highlight-container-box.active > div.waist { display: block; }
.waist { display: none; }
.waist { min-width: 100px; }
.wwraper { display: flex; flex-direction: column; position: relative; align-items: center; justify-content: space-between; height: 100%; }
    .wwraper > div { flex: 0 0 auto; position: relative; }
        .wwraper > div > div { transform: rotate(270deg) translateX(-35%); white-space: nowrap; }
.wclose { padding-bottom: 15px; }
.wtitle { height: 70%; opacity: 0; transition: 0.5s; }
.waist .title { font-size: 32px; letter-spacing: 5px; color: #aaa; text-transform: uppercase; }
.wstitle { height: 20%; }
.waist .stitle { font-size: 16px; color: #ccc; text-transform: uppercase; letter-spacing: 2px; }

.highlight-container-box { max-width: 1920px; width: 100%; margin-left: auto; margin-right: auto; }
    .highlight-container-box.active .waist .wtitle { opacity: 1; transition-delay: 0.5s; }

.container-box { position: relative; padding-bottom: 25px; padding-top: 25px; max-width:1180px;margin-left:auto; margin-right:auto;}
    .container-box.active {max-width:1920px; }
    .container-box .swiper-button { }

.swiper-button { max-width: calc(1400px - 100px - 15px); margin: auto; width: 100%; padding-right: 15px; position: relative; }
.sb-wrapper { position: absolute; top: -50px; right: 0; }
.swiper-button .swiper-button-prev, .swiper-button .swiper-button-next { position: relative; background-image: none; width: auto; height: auto; left: auto; right: auto; margin: auto; top: auto; bottom: auto; padding: 10px 15px; display: inline-block; border-radius: 6px; }
.swiper-button .swiper-button-prev { }
.swiper-button .swiper-button-next { }
    .swiper-button .swiper-button-prev:hover, .swiper-button .swiper-button-next:hover { background-color: #eee; }


.highlight-container .highlight-wrapper { align-items: flex-end; }
.highlight-container.active .highlight-wrapper { align-items: flex-start; }

.highlight-container .swiper-slide { cursor: pointer; }
.post { display: block; position: relative; }
    .post:after { content: ''; position: absolute; top: 25%; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, #efefef, #ddd); z-index: -1; transition: 0.2s; border-radius: 50px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
    .post .img { transform-origin: center bottom; transition: 0.2s; pointer-events: none; transition-timing-function: ease-in-out; }
        .post .img img { }
    .post img { width: 100%; transition: 0.2s ease-in-out; }
    .post .detail { padding-bottom: 15px; padding-left: 25px; padding-right: 25px; }
    .post .description { display: none; }
        .post .description .imgs { overflow: hidden; margin-bottom: 10px; margin-top: 0; }
            .post .description .imgs img { margin-right: 10px; width: calc(33.33% - 10px); float: left; margin-bottom: 10px; margin-top: 0; }
        .post .description img { margin-top: 10px; margin-bottom: 10px; width: 100%; cursor: pointer; }

.highlight-container .swiper-slide.swiper-slide-active:last-child:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: translateX(100%); display: flex; justify-content: center; align-items: center; color: #aaa; pointer-events: none; }

.highlight-container.active .swiper-slide { overflow: hidden; }
.highlight-container.active .swiper-slide-active { height: 100%; }
.highlight-container.active .swiper-slide-active { cursor: auto; display: block; }
    .highlight-container.active .swiper-slide-active .post { }
        .highlight-container.active .swiper-slide-active .post:after { top: 100px; }

.highlight-container.active .swiper-slide .post .description { display: none; }
.highlight-container.active .swiper-slide-active .post .description { display: block; }

.highlight-container.active .swiper-slide-active .post .detail { }
.highlight-container.active .swiper-slide .post { margin-right: 0; width: 100%; }
    .highlight-container.active .swiper-slide .post:after { border-radius: 0; transition: border-radius 0.5s; }
    .highlight-container.active .swiper-slide .post .img { /*opacity: 0;*/ }
.highlight-container.active .swiper-slide-active .post .img { opacity: 1; padding-left: 25px; padding-top: 25px; padding-top: 0; }
.highlight-container.active .post .img img { width: auto; max-width: 100%; }



[data-news] { display: none; }
    [data-news].active { display: block; }


@media screen and (min-width:1024px) {

    .highlight-container.active .highlight-wrapper { align-items: stretch; }
    .highlight-container .swiper-slide:hover .post .img { transform: translateY(-15px); }

    .highlight-container .swiper-slide-prev .post .img { width: 100%; transition-delay: 0.1s; }
    .highlight-container .swiper-slide-prev .post:after { top: 20%; }
    .highlight-container .swiper-slide-next .post .img { width: 100%; transition-delay: 0.2s; }
    .highlight-container .swiper-slide-next .post:after { top: 20%; }
    .highlight-container .swiper-slide-active .post .img { width: 100%; }
    .highlight-container .swiper-slide-active .post:after { top: 15%; }
}

@media screen and (min-width:768px) {
    .wwraper { padding-top: 100px; }


    .highlight-container-box.active .sb-wrapper { right: 60px; }

    .highlight-container-box.active { display: flex; }
    .highlight-container-box > div { }

    .post .img { width: 100%; margin: 0 auto; text-align: center; }

    .highlight-container.active .highlight-wrapper { }


    .container-box.active { padding-bottom: 0; }
        .container-box.active .swiper-button { }

    .highlight-container.active { width: calc(100vw - 80px); }
        .highlight-container.active .swiper-slide { width: calc(100vw - 80px) !important; }

        .highlight-container.active .swiper-slide-active { height: 100%; }
        .highlight-container.active .swiper-slide .post { display: flex; width: 100%; }
            .highlight-container.active .swiper-slide .post:after { top: 60px; }
        .highlight-container.active .swiper-slide-active .post:after { border-top-left-radius: 200px; opacity: 1; }
        .highlight-container.active .swiper-slide .post .img { transform: scale(1); max-width: 40%; }
        .highlight-container.active .swiper-slide .post .detail { margin-top: 50px; padding-top: 35px; padding-right: 50px; max-width: 60%; }
}

@media screen and (min-width:1200px) {
    .waist { min-width: 120px; }
    .highlight-container.active { width: calc(100vw - 120px - 17px); }
        .highlight-container.active .swiper-slide { width: calc(100vw - 120px - 17px) !important; }
}

@media screen and (min-width:1900px) {
    .highlight-container .highlight-wrapper { /*min-height: 480px;*/ }
}

@media screen and (max-width:1900px) and (min-width:1200px) {
    .highlight-container-box { min-height: 35vw; }
}

@media screen and (max-width:1024px) and (min-width:768px) {
    .waist { max-width: 80px; min-width: 80px; }
        .waist .title { font-size: 20px; }

    .highlight-container.active { width: calc(100vw - 80px); }
        .highlight-container.active .swiper-slide .post:after { border-top-left-radius: 25px; }
        .highlight-container.active .swiper-slide .post { display: block; min-width: calc(100vw - 80px); }
            .highlight-container.active .swiper-slide .post .detail { margin-top: 0; padding-top: 0; max-width: 100%; padding-right: 25px; }
    .post .img { width: 80%; }
    .post .description .imgs img { height: auto; width: calc(33.33% - 10px); }
    .post .detail .title h2 { font-size: 24px; }
    .post .detail .title { font-size: 12px; }
    .post:after { border-radius: 20px; }
}

@media screen and (max-width:1023px) {
    .post { padding-top: 15px; }
}

@media screen and (max-width:767px) {
    .highlight-container-box { padding-bottom: 50px; }
    button.xclose { position: absolute; right: 0; top: -50px; }

    .highlight-container-box.active { display: flex; }
    .wwraper > div > div { }
    .waist { max-width: 25px; min-width: 25px; }
        .waist .title { font-size: 12px; transform: rotate(270deg) translateX(-90%); letter-spacing: 2px; }
        .waist .stitle { font-size: 10px; }
    .wclose img { width: 20px; }

    .news-box { position: relative; }
    .swiper-button { max-width: 100vw; position: absolute; bottom: -45px; left: 0; }
    .sb-wrapper { position: static; float: right; margin-right: 15px; }

    .container-box { padding-top: 15px; padding-bottom: 0; }
    .post { padding-top: 0; }
    .highlight-container.active .swiper-slide { overflow: visible; }
    .highlight-container.active { width: calc(100vw - 25px); }
        .highlight-container.active .swiper-slide { width: calc(100vw - 25px) !important; }
        .highlight-container.active .swiper-slide-active .post { }
        .highlight-container.active .swiper-slide .post:after { border-top-left-radius: 10px; }
        .highlight-container.active .swiper-slide-active .post .img { padding-right: 20px; padding-left: 20px; }
        .highlight-container.active .swiper-slide .post .detail { margin-top: 0; padding-top: 0; max-width: 100%; padding-right: 20px; padding-left: 20px; }
    .post .description .imgs img { height: auto; width: calc(33.33% - 10px); }
    .post .detail .title h2 { font-size: 24px; }
    .post .detail .title { font-size: 12px; }
    .post .detail { font-size: 12px; text-align: justify; }
    .post:after { border-radius: 20px; }
    .post .description .imgs { margin-bottom: 5px; }
        .post .description .imgs img { margin-right: 5px; width: calc(33.33% - 5px); }
}
/* ----------- YOUTUBE LIST ----------- */

.btn-vf { color: #888; background-color: #eee; border: 0; padding: 15px 15px; display: block; width: 100%; margin: 5px 0; text-align: left; font-weight: bold; }
    .btn-vf.active { color: #222; background-color: #dbba9c; }

.vf-list ul { margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; }
    .vf-list ul > li { list-style-type: none; border: 0; }
.vf-list h3 { font-size: 15px; }
.vf-list iframe { width: 100% !important; height: 300px !important; }

ol.f li {list-style-type: decimal;}

@media screen and (min-width:1200px) {
    .vf-list ul { padding: 0 5px; }
        .vf-list ul > li { flex: 1 1 33.33%; margin: 10px 0; padding: 0 5px; max-width: 33.33%; }
}

@media screen and (max-width:1199px) and (min-width:600px) {
    .vf-list ul { padding: 0 5px; }
        .vf-list ul > li { flex: 1 1 50%; margin: 10px 0; padding: 0 5px; max-width: 50%; }
}

@media screen and (min-width:768px) {
    .vf-wrapper { display: flex; }
    .vf-tabs { flex: 2; padding-top: 5px; }
    .vf-list { flex: 10; }
}

@media screen and (max-width:767px) {
    .vf-tabs { background-color: #fff; display: flex; border-bottom: 1px solid #aaa; }
    .btn-vf { margin: 0; flex: 1; text-align: center; background: #fff; border-bottom: 5px solid #fff; }
        .btn-vf.active { border-color: #fcd14e; background-color: #fff; }
    .vf-list ul > li { width: 100%; padding-bottom: 25px; }
}

.css-yandx8 { background-image: url(/data/1806/uploads/wechat_20221130175012.jpg) !important; }

/* ----------- POPUP IMAGE ----------- */
#popup-image { display: block; }
    #popup-image.active { background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); overflow-y: auto; opacity: 1; visibility: visible; }
    #popup-image .modal-content { max-width: 800px; margin: 25px auto; display: block; width: 85%; }
    #popup-image .close { float: none; position: absolute; top: 15px; right: 15px; font-size: 40px; color: #fff; opacity: 1; z-index: 9; }
        #popup-image .close:hover { color: #bbb; }
        #popup-image .close:focus, #popup-image .close:active { color: #666; }