html { scroll-behavior: smooth; }
body { background-position: center; background-size: cover; background-attachment: fixed; margin: 0; line-height: normal; font-family: "Lato", "Open Sans", sans-serif, "Microsoft JhengHei"; color: #000; font-size: 16px; transition: background 0.2s ease-in-out; background-image: none; overflow-x: hidden; background-color: #fff; }

* { padding: 0; margin: 0; box-sizing: border-box; }
img { vertical-align: middle; }
table { width: 100%; }
button { outline: 0; border: 0; }
input { outline: 0; border: 0; }
iframe { border: 0; }
a, a:hover, a:active, a:focus { text-decoration: none; }
ul, ol { margin-left: 20px; margin-bottom: 20px; }
li { list-style-type: disc; }


@media screen and (max-width:767px) {
    iframe { height: 70vh; }

    body { font-size: 12px; background-size: 300% auto; background-position: center bottom 15%; }
}

@media screen and (min-height:767px) {
    #divBody { min-height: 500px; }
}

#scene { width: 100vw; height: 100vh; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
#copy { display: none; }

/***************************************************************************** style */
.w1440 { max-width: 1440px; margin: auto; width: 100%; }
a { color: #000; }
    a:hover { color: #0c99c7; }
b, strong { color: #000; }
h1 { color: #000; font-weight: bold; font-size: 3.125em; font-family: Arial; margin: 0.5em 0; }
h2 { color: #000; font-weight: bold; font-size: 2em; font-family: Arial; margin-bottom: 1em; }
h3 { color: #0c99c7; font-size: 1.125em; font-weight: bold; }
h4 { color: #000; font-weight: bold; margin-top: 30px; margin-bottom: 15px; }
h5 { color: #000; font-size: 1.125em; line-height: 1.5em; }

button.close { transition: transform 0.2s ease-in-out; font-size: 40px; opacity: 1; text-shadow: none; font-weight: normal; }
    button.close:hover { transform: rotate(180deg); }
.pd-5 { padding: 5px; }

.modal-backdrop { /*background-color: #fff; */ }
    .modal-backdrop.in { opacity: 0.8; }

@media screen and (max-width:767px) {
    .box-container { margin: 25px auto; }
}

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

@media screen and (min-width:1024px) {
    .mobileOnly { display: none !important; }
}

/**** bootstrap */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.text-center { text-align: center; color: #000; }
.collapse { display: none; }
    .collapse.in { display: block; }
.collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height,visibility; -o-transition-property: height,visibility; transition-property: height,visibility; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: bold; line-height: 1.1; color: inherit; }
    .h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small { font-weight: 400; line-height: 1; color: #777; }
.h1, .h2, .h3, h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
    .h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small { font-size: 65%; }
.h4, .h5, .h6, h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
    .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small { font-size: 75%; }
.h1, h1 { font-size: 36px; }
.h2, h2 { font-size: 30px; }
.h3, h3 { font-size: 24px; }
.h4, h4 { font-size: 18px; }
.h5, h5 { font-size: 14px; }
.h6, h6 { font-size: 12px; }
p { margin: 0 0 10px; }

.btn-group-vertical > .btn-group:after, .btn-group-vertical > .btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before { display: table; content: " "; }

:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; }
    .fade.in { /*opacity: 1;*/ }
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.modal-dialog { position: relative; width: auto; margin: 10px; }
.modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); }
.modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
.modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

@media (min-width: 768px) {
    .modal-dialog { width: 600px; margin: 30px auto; }
    .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); }
}

@media (max-width: 767px) {
    .h1, h1 { font-size: 28px; }
    .h2, h2 { font-size: 25px; }
    .h3, h3 { font-size: 20px; }
    .h4, h4 { font-size: 16px; }
    .h5, h5 { font-size: 14px; }
    .h6, h6 { font-size: 12px; }
}

/**** scroll bar */
::-webkit-scrollbar { width: 5px; height: 0px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #888; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-thumb:hover { background: #888; }
    ::-webkit-scrollbar-thumb:active { background: #888; }
::-webkit-scrollbar-track { background: #F5F5F5; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-track:hover { background: #F5F5F5; }
/*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/
::-webkit-scrollbar-corner { background: transparent; }


/*** btn menu ***/
.btn-menu { background-color: transparent; border: 0; outline: 0; padding: 8px; }
.btn-menu { position: relative; }
    .btn-menu span { width: 25px; height: 3px; display: block; margin-top: 4px; margin-left: 0; margin-bottom: 4px; margin-right: 0; background-color: #000; border-radius: 4px; transition: transform 0.3s linear; transition: 0.3s linear, 0.3s linear; }
        .btn-menu span:nth-child(1) { }
        .btn-menu span:nth-child(2) { width: 20px; }
        .btn-menu span:nth-child(3) { width: 15px; }

    .btn-menu.active span:nth-child(1) { -webkit-transform: translate(0px, 8px) rotate(45deg); transform: translate(0px, 8px) rotate(45deg); }
    .btn-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)"; }
    .btn-menu.active span:nth-child(3) { width: 25px; -webkit-transform: translate(0px, -8px) rotate(-45deg); transform: translate(0px, -8px) rotate(-45deg); }

/*** btn ***/
.btn-contact { background: linear-gradient(to left, #901e2c, #ed1c24, #901e2c); padding: 0.5em 1.25em; font-size: 1em; color: #fff; border-radius: 50px; margin: 5px; position: relative; cursor: pointer; }
    .btn-contact:hover { box-shadow: inset 0px 0px 50px rgba(0,0,0,0.2); }
    .btn-contact:active, .btn-contact:focus { /*background: #304969; */ /*color: #fff; */ }

    .btn-contact:before, .btn-contact:after { content: ''; position: absolute; width: 20px; height: 20px; background: #e21c25; display: block; }
    .btn-contact:before { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 50%, 70% 30%, 50% 15%); transform: translate(5px, -5px); }
    .btn-contact:after { bottom: 0; left: 0; clip-path: polygon(15% 50%, 30% 70%, 50% 80%, 100% 100%, 0 100%, 0 0); transform: translate(-5px, 5px); }


    .btn-contact:hover:before { animation: mybb 2s ease-in-out infinite; }
    .btn-contact:hover:after { animation: myba 2s ease-in-out infinite; }

@keyframes mybb {
    0%, 100% { transform: translate(5px, -5px); }
    50% { transform: translate(10px, -7px); }
}

@keyframes myba {
    0%, 100% { transform: translate(-5px, 5px); }
    50% { transform: translate(-10px, 7px); }
}

.btn-contact2 { background: linear-gradient(to right, #ff695a, #fdbe31); color: #fff; padding: 0.6em 2em; margin: 40px auto 20px; }
    .btn-contact2:hover { box-shadow: inset 0 0 100px rgb(226,193, 139,0.6); }
    .btn-contact2:active { box-shadow: inset 0 0 100px rgb(181,59, 26,0.6 ); }
.goto { font-size: 1.125em; font-weight: bold; text-decoration: underline; margin: 0; padding: 0.6em 2em; }

.btne { position: relative; }
    .btne:before, .btne:after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); height: 100%; width: 125%; max-width: 500px; background-repeat: no-repeat; pointer-events: none; }
    .btne:before { top: -70%; background-size: 30px 30px, 30px 30px, 15px 15px, 50px 50px, 20px 20px, 30px 30px, 22px 22px, 30px 30px; background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 30% 90%, 36% 90%, 47% 90%, 67% 90%, 86% 90%; animation: topBubbles 3s ease-in-out infinite; }
    .btne:after { bottom: -70%; background-image: radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 20%, #d85454 20%, transparent 30%),radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 10%, #d85454 15%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%); background-size: 30px 30px, 20px 20px, 20px 20px, 15px 15px, 30px 30px, 30px 30px; background-position: 10% 0%, 30% 10%, 55% 0, 70% 0%, 85% 0%, 70% 0%, 70% 0%; animation: bottomBubbles 3s ease-in-out infinite; }
    .btne:hover:before, .btne:hover:after { animation-duration: 2s; }

.btne2:before { background-image: radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #3866a2 20%, transparent 30%),radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3866a2 15%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%); }
.btne2:after { background-image: radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #3866a2 20%, transparent 30%),radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3866a2 15%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%), radial-gradient(circle, #3866a2 20%, transparent 20%); }


.btne3:before { background-image: radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 20%, #d85454 20%, transparent 30%),radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 10%, #d85454 15%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%); }
.btne3:after { background-image: radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 20%, #d85454 20%, transparent 30%),radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, transparent 10%, #d85454 15%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%), radial-gradient(circle, #d85454 20%, transparent 20%); }



@keyframes topBubbles {
    15% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
    30%, 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; }
}

@keyframes bottomBubbles {
    15% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
    30%, 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 0%; background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; }
}


@media screen and (max-width:1023px) {
}
/***************************************************************************** ADMINLOGIN */
#theme-contain-adminloginx { padding: 75px 15px 20px; max-width: 500px; background: #ffffff; border-radius: 5px; margin: 15px auto; width: 90%; }
    #theme-contain-adminloginx input { padding: 5px 7px; border: 1px solid #666; margin: 5px auto; background-color: #fff; color: #000; width: 100%; }
        #theme-contain-adminloginx input[type=submit] { width: auto; background: #26c6da; color: #fff; font-weight: bold; min-width: 50%; }
    #theme-contain-adminloginx > p + table { max-width: 350px; margin: 0 auto; width: 90%; }
        #theme-contain-adminloginx > p + table > tbody > tr > td:nth-child(2) { padding-left: 10px; }
    #theme-contain-adminloginx table { border: 0 !important; }
        #theme-contain-adminloginx table td { border: 0 !important; white-space: nowrap; vertical-align: baseline; }
/***************************************************************************** CSSMENU */
.nav { display: flex; align-items: center; }
#cssmenu ul { margin: 0; }
    #cssmenu ul > li { float: none; list-style-type: none; }

#cssmenu > ul { position: static; }
    #cssmenu > ul > li { position: static; }
        #cssmenu > ul > li > a { border: 0; color: #8a8a8a; position: relative; display: block; font-weight: bold; }
        #cssmenu > ul > li.active > a { color: #fff; }
        #cssmenu > ul > li > a:before, #cssmenu > ul > li > a:after { content: ''; position: absolute; width: 20px; height: 20px; background: #e21c25; display: block; opacity: 0; transition: 0.4s ease-in-out; }
        #cssmenu > ul > li > a:before { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 50%, 70% 30%, 50% 15%); transform: translate(-5px, 5px); }
        #cssmenu > ul > li > a:after { bottom: 0; left: 0; clip-path: polygon(15% 50%, 30% 70%, 50% 80%, 100% 100%, 0 100%, 0 0); transform: translate(5px, -5px); }
        #cssmenu > ul > li.active > a:before, #cssmenu > ul > li.active > a:after { opacity: 1; transform: translate(0); }
        #cssmenu > ul > li.has-sub > ul { display: none !important; }

@media screen and (min-width:1024px) {
    #divMenu { position: static; display: block !important; visibility: visible; opacity: 1; overflow: visible; }
        #divMenu .modal-dialog { width: auto; margin: auto !important; transform: none !important; position: static; }
}

@media screen and (min-width:1023px) {
    #cssmenu { position: static; margin-right: 10px; }
        #cssmenu > ul { display: flex; align-items: center; }
            #cssmenu > ul > li > a { font-size: 14px; padding: 12px 15px !important; }
}

@media screen and (max-width:1024px) {
    #cssmenu > ul > li > a { padding: 15px !important; }
}

@media screen and (max-width:1023px) {
    #divMenu .modal-dialog { background: #fff; width: 100%; margin: 55px 0 0; }
    #divMenu.in .modal-dialog { }
    #cssmenu > ul > li { flex-basis: 25%; padding: 10px 5px; }
        #cssmenu > ul > li > a { text-align: center; padding: 20px 10px !important; }
}

@media (max-width:1023px) {
    .footer-content { padding-bottom: 75px; }
    #cssmenu { position: fixed; bottom: 0; left: 0; right: 0; background: #000; border-top: 1px solid #524c4c; }
        #cssmenu ul { display: flex; align-items: center; justify-content: space-between; }
}
/***************************************************************************** STYLE */
.container { max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-upper { text-transform: uppercase; }
.text-white { color: #fff; }
.text-red { color: #E61C25; }
.pd-15 { padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; }

@media (min-width:1024px) {
    .container { padding-left: 50px; padding-right: 50px; }
}
/***************************************************************************** FOOTER */
.footer-content { background: #070707; }
.footer-top { padding-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #909195; }
.footer-bottom { margin-top: 30px; margin-bottom: 30px; }

.footer-text h2 { font-size: 1em; font-weight: normal; }

.footer-img img{width:200px;height:47px;}
@media (max-width:500px){
    .footer-img img{width:150px; height:35px;}
}
/***************************************************************************** HEADER */
.header-logo { padding: 0.3em 0; }
    .header-logo img { height: 45px; width: 193px; }

.header-content { position: fixed; top: 0; left: 0; right: 0; background: rgba(0,0,0,0.8); z-index: 19; transition: background 0.5s ease-in-out; }
    .header-content.changeColor { background: linear-gradient(to left, #1a1a1a, #000, #1a1a1a); }
.header-wrapper { }

.header-left { display: flex; align-items: center; }
.header-center { margin-left: 0; margin-right: auto; }
.header-right { display: flex; justify-content: flex-end; align-items: center; }

@media (min-width:1023px) {
    .header-left, .nav, .header-right { flex-grow: 1; flex-basis: 0; }
    .header-center { margin-left: auto; margin-right: auto; }
}

@media (min-width:768px) and (max-width:1023px) {
    .header-content { padding: 5px 0; }
}

@media (max-width:600px) {
    .header-content { padding: 5px 0; }
    .header-logo img { width: 150px; height: 35px; }
}

/***************************************************************************** HOME */
div.content { padding: 0; }

main .container { /*margin-top: 50px;*/ margin-bottom: 50px; }
.container-header p { max-width: 850px; }
.text-center p { margin: auto; }

/*---   banner  ---*/
.divBanner { background: #2a2a2a; background-image: url('/data/bg-01.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.banner-container { position: relative; z-index: 3; }
.banner01 { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; padding: 200px 0; }
    .banner01 img { width: 80%; max-width: 570px; margin-top: 10px; margin-bottom: 20px; }

@media (min-width:650px) {
    .banner01 h1 br { display: none; }
}

@media (max-width:650px) {
    .banner01 h1 { font-size: 8vw; }
    .banner01 h3 { font-size: 5vw; }
    .banner01 h4 { font-size: 3vw; }
}


.box.star { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.box div { position: relative; display: inline-block; list-style: none; opacity: 0; bottom: 0; left: 10vw; animation: animate 15s linear infinite; width: 30px; height: 30px; background-image: url('/data/1749/uploads/img-light-01.png'); background-size: 100%; }
    .box div:nth-child(2) { left: 36vw; animation-delay: 2s; }
    .box div:nth-child(3) { left: 22vw; animation-delay: 4s; }
    .box div:nth-child(4) { left: 56vw; animation-delay: 6s; }
    .box div:nth-child(5) { left: 76vw; animation-delay: 4s; }
    .box div:nth-child(6) { left: 80vw; animation-delay: 8s; }

@keyframes animate {
    0% { transform: scale(0) rotate(0); opacity: 1; bottom: -100%; }
    100% { transform: scale(5) rotate(360deg); opacity: 0; bottom: 0%; }
}
/*---   INTRO  ---*/
.intro-item { padding: 20px; text-align: center; }
    .intro-item h3 { font-size: 1.1em; }
    .intro-item p { line-height: normal; color: #666; font-size: 14px; }

@media (min-width:1024px) {
    #theme-content .section-intro .container { margin-top: 100px; margin-bottom: 50px; }
    main .section-intro .container { margin-top: 100px; margin-bottom: 50px; }
    .intro-container { display: flex; justify-content: center; }
    .intro-item { flex-basis: calc(33.33% - 40px); margin-left: 20px; margin-right: 20px; }
    .intro-img img { width: 80px; height: 80px; }
}

@media (min-width:1125px) {
    .intro-item { flex-basis: calc(33.33% - 100px); }
}

@media (min-width:768px) and (max-width:1023px) {
    .section-intro { margin-top: 50px; }
    .intro-container { display: flex; justify-content: center; }
    .intro-item { flex: 1; }
        .intro-item h3 { font-size: 1em; }
        .intro-item p { font-size: 0.875em; }
    .intro-img img { width: 60px; height: 60px; }
}

@media (max-width:767px) {
    .section-intro { margin-top: 50px; }
    .intro-item { padding: 10px; display: flex; text-align: left; }
    .intro-img img { width: 60px; height: 60px; }
    .intro-text { padding-left: 10px; }
    .intro-item h3 { margin-top: 0; }
    .intro-item p { font-size: 11px; }
}

.section-sol { padding-top: 50px; }

/*---  BUSINESS ANALYTIC  ---*/
#bizAn { display: flex; }

.ba-top { padding-top: 25px; }

.ba-box { }
    .ba-box.ba-btnss { margin-right: 10px; }
    .ba-box.ba-content { margin-left: 10px; }

.ba-btn { background: #e21c25; color: #fff !important; padding: 10px; border-radius: 6px; border: 1px solid #c2c6cf; display: flex; align-items: center; margin: 8px auto; width: 100%; }
    .ba-btn:hover { color: #fff !important; }
    .ba-btn.collapsed { background: #EEF1F8; color: #000 !important; }
    .ba-btn img { width: 30px; height: 30px; margin-right: 10px; }
    .ba-btn img { filter: invert(1); opacity: 1; }
    .ba-btn.collapsed img { filter: invert(0); opacity: 0.5; }


.section-ba .container { max-width: 1000px; }

.ba-img { text-align: center; margin-top: 10px; margin-bottom: 20px; }
    .ba-img img { max-width: 100%; }

@media (min-width:600px) {
    .ba-box.ba-btnss { flex-basis: 30%; }
    .ba-box.ba-content { flex-basis: 70%; }
}

@media (max-width:450px) {
    .section-ba .container { padding-left: 15px; padding-right: 15px; }
    .ba-box.ba-btnss { margin-right: 5px; }
    .ba-box.ba-content { margin-left: 5px; }
    .ba-btn { line-height: normal; padding-left: 6px; padding-right: 6px; }
        .ba-btn img { display: none; }
}

/*---  INTEGRATION PLATFORM  ---*/
.sol-wrapper { }
.sol-box { }
.sol-img { width: 100%; }

.ba-container .panel-group .panel { border: 0; margin: 0; box-shadow: none; }
.ba-container .panel-body { padding: 0; }

@media (min-width:1024px) {
    .sol-container { margin-top: 25px; }
    .sol-wrapper { position: relative; justify-content: center; max-width: 1200px; width: 100%; display: flex; margin: auto; }
    .sol-box { max-width: 50%; display: flex; align-items: center; justify-content: center; }
    .solb { position: absolute; border-radius: 8px; background: #efefef; box-shadow: 2px 2px 3px rgba(0,0,0,0.2); padding: 15px; width: 28%; margin: auto; }
    .solb01 { left: 0; }
    .solb02 { right: 0; }
}

@media (min-width:650px) and (max-width:1023px) {
    .sol-container { margin-top: 25px; }
    .sol-wrapper { position: relative; display: flex; }
    .sol-box { flex: 1 1 40%; }
    .solb01 { border-bottom: 1px solid #a8a8a8; margin-bottom: 20px; padding-bottom: 15px; }
    .solb { }
        .solb p { font-size: 12px; }
    .solb-img { display: flex; justify-content: center; align-items: center; flex: 1 1 60%; }
}

@media (max-width:650px) {
    .solb-img { display: flex; justify-content: center; align-items: center; flex: 1 1 60%; }

    .sol-img { max-width: 400px; margin: auto; }
}


.section-advs { position: relative; }
    .section-advs:after { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 80%; margin: 0; pointer-events: none; background-image: url('/data/bg-01.jpg'); background-size: cover; background-position: center; }
.advs-container { position: relative; z-index: 2; }


.advs-container { margin-top: 30px; }
.advs-head { color: #fff; }
.advs-items { display: flex; flex-wrap: wrap; }
.advs-item { flex-basis: calc(33.33% - 12px); margin: 6px; }
.advs-content { background-color: #fff; border-radius: 8px; height: 100%; padding: 20px; box-shadow: 3px 3px 5px rgba(0,0,0,0.2); }
    .advs-content img { margin-bottom: 10px; width: 80px; height: 80px; }

@media (min-width:1024px) {
    .advs-container { display: flex; }

    .advs-head { flex-basis: 40%; padding-right: 25px; }
    .advs-items { flex-basis: 60%; }
}

@media (min-width:1200px) {
    .advs-box { flex-basis: 50%; }
}

@media (max-width:1023px) {
    .advs-head { text-align: center; margin-bottom: 25px; }
        .advs-head .container-header { margin-top: 25px; margin-bottom: 10px; }
    .advs-detail { font-size: 12px; line-height: normal; }
}

@media (max-width:750px) {
    .advs-content { padding: 12px; font-size: 11px; }
        .advs-content img { width: 60px; height: 60px; }
}

@media (min-width:600px) and (max-width:1023px) {
    .advs-head { width: 80%; margin: auto; }
    .advs-content { display: flex; align-items: center; }
    .advs-detail { padding-left: 20px; }
}

@media (max-width:600px) {
    .advs-item { flex-basis: calc(50% - 12px); margin: 6px; }
}
/*---  GAMES PLATFORM  ---*/
.sg-container { position: relative; }

.sg-container { background-position: center; background-size: cover; }
    .sg-container:before { background: #888; position: relative; }
    .sg-container[data-bg="games-sport"] { background-image: url('/data/1749/uploads/bg-g__sport.jpg'); }
    .sg-container[data-bg="games-casino"] { background-image: url('/data/1749/uploads/bg-g__casino.jpg'); }
    .sg-container[data-bg="games-slot"] { background-image: url('/data/1749/uploads/bg-g__slot.jpg'); }
    .sg-container[data-bg="games-lottery"] { background-image: url('/data/1749/uploads/bg-g__lottery.jpg'); }
    .sg-container[data-bg="games-p2p"] { background-image: url('/data/1749/uploads/bg-g__p2p.jpg'); }



.sg-btn { display: flex; }
.btn-cat { margin: 5px 0; border-radius: 10px; cursor: pointer; position: relative; background: #fff; }
    .btn-cat.active { background: #b71d29; color: #fff; }
        .btn-cat.active:after { opacity: 1; }
.btnC-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.btnC-content { text-align: left; }

.gbl-top { display: flex; align-items: center; justify-content: space-between; position: relative; padding-bottom: 10px; }
.gb-nav { position: relative; display: flex; align-items: center; }
    .gb-nav .swiper-button-prev, .gb-nav .swiper-button-next { position: static; width: 40px; height: 40px; background-size: auto 80%; margin-top: 0; }

@keyframes mygamesp {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(10px); }
}

.btnC-img img { width: 50px; height: 50px; margin-left: 10px; opacity: 0.7; }
.btn-cat.active .btnC-img img { filter: invert(2) brightness(2); opacity: 1; }

.gb-img img { width: 100%; }

.gb-lists { padding: 20px; background: #fff; border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 5px 5px 10px rgba(0,0,0,0.6); position: relative; z-index: 2; }
.gb-list img { width: 100%; border-radius: 8px; border: 1px solid #8a8a8a; }

.gb-content { color: #fff; }


.games-box { opacity: 0; height: 0; overflow: hidden; }
    .games-box.active { opacity: 1; transition: opacity 0.5s ease-in-out; height: auto; overflow: visible; }


@media (min-width:700px) {

    .games-box .gb-img { transform: translate(25px); transition: transform 0.4s ease-in-out; }
    .games-box.active .gb-img { transform: translate(0px); }
}

@media (min-width:768px) {
    .sg-container:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(to right, #fff, rgba(0,0,0,0)); pointer-events: none; }
    .sg-wrapper { position: relative; z-index: 2; }

    .btn-cat:after { content: ''; position: absolute; top: 0; bottom: 0; right: -30px; background: #b71d29; animation: mygamesp 1s ease-in-out infinite; clip-path: polygon(0 0, 0 100%, 50% 50%); width: 25px; height: 25px; margin: auto; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; }

    .btnC-img img { margin-right: 5px; }


    .section-games { padding-top: 125px; }

    .sg-btn { flex-direction: column; }

    .sg-container { padding-bottom: 25px; }
    .sg-wrapper { max-width: 1920px; display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
    .sg-bread { width: 25%; padding-right: 20px; padding-left: 25px; padding-top: 25px; padding-bottom: 30px; text-shadow: 0px 0px 10px #fff; }
    .sg-content { width: 75%; padding-left: 50px; }
    .gb-top { max-width: 1000px; display: flex; margin-top: -50px; /*padding-left:50px;*/ }
    .gb-img { width: 50%; }
    .gb-content { display: flex; flex-direction: column; justify-content: center; width: 50%; padding-left: 25px; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); }

    .btnC-container { padding-left: 15px; }
}

@media (min-width:1441px) {
    .sg-bread { padding-left: 100px; }
}

@media (min-width:768px) and (max-width:1200px) {
    .section-games { padding-top: 100px; }
    .sg-bread { width: 30%; }
    .sg-content { width: 70%; padding-left: 20px; }
    .gb-top { display: block; }
    .gb-img { margin-left: auto; margin-right: auto; width: 80%; }
    .gb-content { width: 100%; padding-right: 25px; padding-left: 10px; }
}

@media (min-width:1024px) and (max-width:1200px) {
    .gb-img { width: 50%; }
}

@media (max-width:1350px) {
    /*.games-soon{display:none !important;}*/
}

@media (max-width:767px) {
    .section-games { padding-top: 50px; }
    .sg-container { padding-top: 25px; }
    .container-header { text-align: center; }

    .gb-top { padding-top: 20px; }

    .sg-btn { padding-left: 5px; padding-right: 5px; }
    .btn-cat { flex: 1; width: calc(20% - 10px); margin: 3px; }
    .btnC-container { flex-direction: column; padding: 10px 5px; }
    .btn-cat:nth-child(1) { z-index: 5; }
    .btn-cat:nth-child(2) { z-index: 4; }
    .btn-cat:nth-child(3) { z-index: 3; }
    .btn-cat:nth-child(4) { z-index: 2; }
    .btn-cat:nth-child(5) { z-index: 1; }
    .btnC-content { order: 2; }
    .btnC-img { order: 1; }
        .btnC-img img { height: 35px; width: 35px; margin: 0; }
    .btnC-content h4 { font-size: 12px; margin-bottom: 0; }
    .btnC-content p { display: none; }

    .gb-img { width: 80%; margin: auto; }

    .gb-lists { border-radius: 0; border-top: 1px solid #aaa; box-shadow: none; padding-left: 0; padding-right: 0; margin-top: 25px; background: transparent; }
    .sg-content { padding: 0 15px; }

    .games-box .gb-img { transform: translateY(25px); transition: transform 0.4s ease-in-out; }
    .games-box.active .gb-img { transform: translateY(0px); }

    .gb-title { color: #fff; }
    .section-games .container-header { color: #fff; margin-bottom: 25px; }

    .section-games .swiper-button-prev { background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTAsMjJMMjIsMGwyLjEsMi4xTDQuMiwyMmwxOS45LDE5LjlMMjIsNDRMMCwyMkwwLDIyTDAsMjJ6JyBmaWxsPScjZmZmZmZmJy8+PC9zdmc+); }
    .section-games .swiper-button-next { background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTI3LDIyTDI3LDIyTDUsNDRsLTIuMS0yLjFMMjIuOCwyMkwyLjksMi4xTDUsMEwyNywyMkwyNywyMnonIGZpbGw9JyNmZmZmZmYnLz48L3N2Zz4=); }
}


/***************************************************************************** faq */
.section-api { padding-top: 70px; }

.faq-header { text-align: center; padding-top: 25px; }
    .faq-header p { font-size: 11px; }

.fancybox-skin { background: #fff; }
.fancybox-inner h4 { display: flex; align-items: center; }
    .fancybox-inner h4 img { width: 35px; height: 35px; margin-right: 5px; margin-left: 5px; }

.tblDescList td { padding: 2px 5px; }
.panel .inner { padding-left: 0 !important; padding-right: 0; }
.tblList { border-left: 1px solid #8a8a8a; border-top: 1px solid #8a8a8a; }
    .tblList .tblHeader td { background: #dbdbdb; }
    .tblList td { border-bottom: 1px solid #8a8a8a; border-right: 1px solid #8a8a8a; padding: 5px; }
    .tblList ul { margin-bottom: 0; }

#faq_modal { display: flex; flex-wrap: wrap; max-width: 1000px; width: 100%; margin: auto; }
    #faq_modal .question { list-style-type: none; flex-basis: calc(25% - 20px); margin: 10px; }
        #faq_modal .question a { display: block; padding: 20px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid #dbdbdb; min-height: 200px; font-size: 14px; text-align: center; }
            #faq_modal .question a:hover { background: #efefef; color: #000; }
        #faq_modal .question img { width: 50px; height: 50px; margin-bottom: 10px; }

@media (max-width:1024px) {
    #faq_modal .question { flex-basis: calc(25% - 10px); margin: 5px; }
        #faq_modal .question a { min-height: calc(22vw - 10px); }
}

@media (max-width:767px) {
    #faq_modal .question a { font-size: 11px; }
    #faq_modal .question img { width: 40px; height: 40px; margin-bottom: 10px; }
}

@media (max-width:500px) {
    #faq_modal { max-width: 350px; }
        #faq_modal .question { flex-basis: calc(50% - 10px); }
            #faq_modal .question a { min-height: calc(33vw - 10px); }
}


/***************************************************************************** contact */
.xbox { max-width: 1200px; margin: auto; background: #000; border-radius: 10px; padding: 50px 20px; text-align: center; background-image: url('/data/bg-01.jpg'); background-size: cover; background-position: center; }
    .xbox p { margin: 20px auto 50px; max-width: 500px; width: 100%; color: #fff; }
    .xbox .btn-contact { }
    .xbox img{width:60px; }

#contactModal .modal-dialog { width: 90%; max-width: 1000px;  pointer-events: none; }
    #contactModal .modal-dialog .modal-content { pointer-events: auto; border-radius: 10px; }
.contact-container { padding: 25px; }

#contactModal form{margin-top:30px;}

@media screen and (min-width:1024px) {
    .contact-container { }
}

@media screen and (max-width:1024px) and (min-width:768px) {
    .contact-container { }
}

@media screen and (max-width:768px) {
    .contact-img { max-width: 300px; width: 100%; margin: auto; }
}