@charset "utf-8";
/* CSS Document */

@font-face {
    font-family:'PSL162';
    src: url('../fonts/PSL162.eot');
    src: url('../fonts/PSL162.eot?#iefix') format('embedded-opentype'),
        url('../fonts/PSL162.woff') format('woff'),
        url('../fonts/PSL162.ttf') format('truetype'),
        url('../fonts/PSL162.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:'thaisans_neueregular';
    src: url('../fonts/thaisansneue-regular-webfont.eot');
    src: url('../fonts/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/thaisansneue-regular-webfont.woff') format('woff'),
        url('../fonts/thaisansneue-regular-webfont.ttf') format('truetype'),
        url('../fonts/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    margin:0px;
    padding:0px;	
    font-family:Tahoma, Geneva, sans-serif;
    /* background:url("../images/bg1.jpg") no-repeat center top fixed #fff; */
    background: #FFF !important; 
}

.gamelly_badge{
    display: inline-block;
    min-width: 10px;
    padding: 2px 7px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f00;
    border-radius: 10px;
}
h.a1{font-size:16px; color:#fff; }
h.a2{ font-size:2.6em; color:#fff; font-weight:700; font-family: 'thaisans_neueregular'; }
h.a3{font-size:26px; color:#000; font-weight:bold; }
h.a4{color:#fff; }
h.a5{font-size:60px; color:#ff076b; line-height:50px; letter-spacing:1px; font-weight:bold; font-family: 'PSL162';}
h.a6{font-size:60px; color:#323232; letter-spacing:1px; font-family: 'PSL162';}
h.a7{font-size:42px; color:#fff; letter-spacing:1px; font-family: 'PSL162';}
h.a8{font-size:80px; color:#fff; letter-spacing:0px; }

a:link {text-decoration:none; color:#fff; }
a:hover {text-decoration:none; color:#f6ff00; }

img{ max-width:100% ; background-size:100% auto; }

/* Login */
.box-login{ width:120px; height:60px; overflow:hidden; float:right; background:#1d1d1d; }
.text-login{ overflow:hidden; text-align:center; font-size:13px; color:#fff; padding-top:4px; }
.bt-member{ width:65px; height:auto; padding:2px; overflow:hidden; float:right; border-radius:5px; background:#f9e515; font-size:16px; color:#000; text-align:center; bottom:0px; }
.bt-member:hover{ opacity: .5; }

.box-login2{ width:120px; height:auto; overflow:hidden; background:#1d1d1d; margin:auto; display:block; margin-top:5px; }

/* Menu Button */
.section-btn{ width:100%; height:60px; overflow:hidden; position:fixed; z-index:10; }
.logo-btn{ width:175px; height:60px; overflow:hidden; float:left; }
.menu-btn {
    width: 100%;
    height:60px;
    padding-top:5px;
    margin-bottom: 0px;
    background: #fff;
    color: #000;
    text-align: right;
    font-size:30px;
    cursor: pointer;

}
.box-language{
    width:auto; height:auto; overflow:hidden; display:block;
    margin:14px 10px 0 0; text-align:center;
    float:right; background:#b35ef7;
     border-radius:5px;
    font-size:14px; color:#FFF; padding:7px 7px 7px 14px;
}
.box-language2{
    width:120px; height:auto; overflow:hidden; display:block;
    margin:5px auto; text-align:center;
    background:#b35ef7;
    font-size:14px; color:#FFF; padding:10px 0px 10px 0px;
    border: 1px solid #545454;
}
.sel-language{
    width:40px; height:20px;
    background: transparent;
    font-size: 14px; color:#fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../images/arrow.png") 100% no-repeat #b35ef7;
    border:none;
}

/* Menu*/
.section1{ 
    width:100%; height:60px; overflow:hidden; display:block; 
    background:rgba(255, 255, 255, 0.9); text-align:center; 
    position:fixed; z-index:100; border-bottom:4px solid #b35ef7;
}
.logo{ width:175px; height:60px; overflow:hidden; display:block; float:left; }
.menu{ width:55%; width: auto; height:60px; overflow:hidden; display:block; float:left; padding:0px; }
.bt{ 
    width:auto; height:100%; float:left; text-align:center; 
    font-size:30px; margin-left:30px; list-style-type:none; 
    font-family: 'PSL162';	color: #000;
}

.bt{
    position: relative;
    transition:600ms;
}
.bt:after{
    content: attr(data-hover);
    position: absolute;
    left: 0;
    bottom: 0;
    transform:rotateX(90deg);
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    -o-transform:rotateX(90deg);
    -ms-transform:rotateX(90deg);
    transition:300ms;
    opacity: 0;
    color: #b35ef7;
    height: 0;
}
.bt:hover:after{
    transform:rotateX(0deg);
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    -o-transform:rotateX(0deg);
    -ms-transform:rotateX(0deg);
    top: 0;
    opacity: 1;
    height: 100%;
}
.bt:hover{
    color: transparent !important;
}
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
    text-decoration: none;
    list-style-type: none;
    outline: none;
}

.bt-topup{ 
	width:105px; height:60px; float:right; 
	text-align:center; 	font-size:20px; display:block; 
	background:#b35ef7; color: #fff; font-weight:bold;
	text-decoration: none; padding-top:15px; 
	font-weight:bold; 
}
.bt-login{ 
	width:85px; height:60px; float:right; 
	text-align:center; 	font-size:20px; display:block; 
	background:#1d1d1d; color: #fff; 
	text-decoration: none; padding-top:15px; 
	font-weight:bold;  
}
.bt-login2{ 
	width:100px; height:auto; margin:auto;  
	text-align:center; 	font-size:18px; display:block; 
	background:#1d1d1d; color: #fff; 
	text-decoration: none; padding:10px;
	font-weight:bold; border:1px solid #545454;
}
.bt-topup2{ 
	width:100px; height:auto; margin:auto;  
	text-align:center; 	font-size:18px; display:block; 
	background:#b35ef7; color: #fff;
	text-decoration: none; padding:10px;
	font-weight:bold; border:1px solid #545454;
	
}
.bt-login:hover, .bt-topup:hover, .bt-login2:hover, .bt-topup2:hover{ opacity:0.8;}

/* Three Line Menu */
.box-shadow-menu {
    position: relative;
    padding-right: 1.25em;
}
.box-shadow-menu:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 0.50em;
    width: 1em;
    height: 0.15em;
    background:#000;
    box-shadow: 
        0 0.25em 0 0 #000,
        0 0.5em 0 0 #000;
}

.section2{ width:100%; height:730px; margin:0px auto; margin-top:0px; overflow:hidden; display:block; background:rgba(0, 0, 0, 0.2);}
.sub-section2 { width:1000px; height:auto; overflow:hidden; margin:auto; margin-top:10px; text-align:center;  }

.video-background {
    background: #fff;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
}
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.t-box01{ width:auto; height:auto; overflow:hidden; display:block; text-align:center; margin:auto; margin-top:120px; margin-bottom:140px; line-height:0.8; }
.t-big01{ width:auto; height:auto; overflow:hidden; margin:auto;  font-size:80px; color:#FFF; text-shadow: 1px 1px 1px #000; font-family: 'PSL162'; }
.t-small01{ width:auto; height:auto; overflow:hidden; margin:auto; font-size:40px; color:#FFF; text-shadow: 1px 1px 1px #000; font-family: 'PSL162'; }

.logo-big{ width:auto; height:auto; overflow:hidden; display:block; margin:auto; margin-top:80px; text-align:center; }
.box-down{ width:500px; height:auto; margin:auto; margin-top:0px; overflow:hidden; display:block; padding:10px; }
.box-down2{ width:1300px; height:auto; margin:auto; margin-top:0px; overflow:hidden; display:block; padding:10px; }
.bt-download{ width:235px; height:auto; overflow:hidden; float:left; margin-left:10px; }
.bt-download:hover{opacity: 0.8;}


.wrapper{ width:100%; height:auto; margin:0 auto; overflow:hidden;}

/* Banner */
.box-banner{ width:100%; height:auto; overflow:hidden; background:rgba(0, 0, 0, 0.6);  }
.banner{ width:68%; height:auto; margin-left:0px; display:block; margin:auto;  }
.gallery { /*background:;*/ }

.gallery-cell { width:100%; height:auto; margin-left: 0px; background: #8C8; counter-increment: gallery-cell; }

/* cell number */
.gallery-cell:before {
    display: block;
    content: counter(gallery-cell);
    line-height: 0px;


}

.section3{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background-color: #40004f  !important; }
.sub-section3 { width:100%; height:auto; overflow:hidden; margin:40px auto; margin-bottom:20px; padding:25px 0px; }

/* News */


.topic{ width:100%; height:auto; overflow:hidden; margin:0 auto; }
.topic-text{ width:auto; height:auto; overflow:hidden; float:left; margin:4px 0 0 30px; font-size:50px; color:#f7e042; font-weight:bold; font-family: 'PSL162'; text-shadow: 1px 1px 1px #000; }
.bt-more{ 
    width:700px; height:40px;  
    float:right; text-align:center; 
    line-height: 2; font-size:18px; color:#1d1d1d; 
    font-weight:bold; margin-top:20px;
    text-decoration:underline; 
}
.bt-more:hover{opacity: 0.8;}



.group-news{ width:100%; height:auto;
    display: flex;
    align-items: center;
    
  }
  
@media screen and (max-width: 1248px){
    .group-news{ 
    margin-left: 1%;
  }
}
/* 
width: 76%;
    height: auto;
    float: left;
    margin-left: 200px
px
; */



.sub-group-news{ width:92%; height:auto; margin:auto; }
.sub-news{ width:313px; height:auto; float:left; overflow:hidden; margin:10px auto; margin-left:7px; background:rgba(255, 255, 255, 0.8);}

.pic-news{
    width:auto; height:205px!important; margin:auto; 
    overflow:hidden; display:block; 
    background: -webkit-linear-gradient(-45deg, #3cff32 0%,#c11aff 100%); 
    background: linear-gradient(-45deg, #3cff32 0%,#c11aff 100%);
}

.pic-news img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;height:190px !important;  }
.pic-news:hover img{ opacity: 0.7;	-webkit-transform: scale3d(1.2,1.2,1);	transform: scale3d(1.2,1.2,1);}

.tnews-big{ width:auto; height:40px; margin:auto; font-family: 'thaisans_neueregular'; font-weight:900;  font-size:28px; color:#ff2a5e; line-height:30px; text-align:left; padding:10px; }
.tnews-small{ width:auto; height:30px; margin:auto; font-size:16px; color:#000; text-align:left; padding:10px; }
.tnews-date{float:left; margin-bottom:2px; font-size:14px; color:#ff2b5e; padding:10px; }


/* Sub Page */
.section-sub{ width:1130px; height:auto; overflow:hidden; margin:60px auto; display:block; }
.subpage-box{ width:100%; height:auto; overflow:hidden; margin:0px auto; display:block;   }
.subbox{ width:90%; height:auto; overflow:hidden; margin:5px auto; }
.sub-titel{ width:100%; height:auto; overflow:hidden; float:left; text-align:left; bottom:5px; border-bottom:1px dotted #b3b3b3; line-height:44px; }
.sub-date{ width:100%; height:auto; overflow:hidden; float:left; text-align:left; margin:10px 0 10px 0;  font-size:1em; color:#b3b3b3; font-weight:200; line-height:20px; }
.box-share{ width:100%; height:auto; overflow:hidden; float:left; margin:20px auto; }
.bt-share{ max-width:150px; height:auto; overflow:hidden; float:left; margin-right:5px; }
.bt-share:hover img{ opacity: .5; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.sub-content{ 
    width:100%; height:auto; text-align:left; margin:0 auto; 
    overflow:hidden; margin-bottom:30px; padding-bottom:20px; 
    display:block; float:left; border-bottom:1px dotted #b3b3b3; }
.sub-pic{ width:100%; height:auto; margin:0 auto; overflow:hidden; text-align:center;}
.box350{ width:350px; height:auto; overflow:hidden; float:left; margin-left:5px; }
.bt350{ width:350px; height:auto; overflow:hidden; display:block; margin:auto; margin-bottom:6px; }
.bt350:hover { opacity: 0.8;  }

/*********************/

.section4{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:#fff; }
.sub-section4 { width:1100px; height:auto; overflow:hidden; margin:auto; margin-top:20px; margin-bottom:20px; }
.pic-mobile1{ width:auto; height:auto; overflow:hidden; display:block; float:left; }
.text-section4{ width:auto; height:auto; margin:150px auto; overflow:hidden; float:left; text-align:left;  }

.section5{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:#fff; }
.sub-section5 { width:1100px; height:auto; overflow:hidden; margin:auto; margin-top:20px; }
.text-section5{ width:auto; height:auto; margin:200px auto; margin-left:50px; overflow:hidden; float:left; text-align:left; }
.pic-mobile2{ width:auto; height:auto; overflow:hidden; display:block; float:left; }

.section6{ width:100%; height:auto; margin:0 auto; overflow:hidden; display:block; background:rgba(0, 0, 0, 0.5); }
.sub-section6 { width:1500px; height:auto; overflow:hidden; margin:auto; margin-top:10px; text-align:center; border: 0px solid #fff; }
.text-section6{ width:auto; height:auto; margin:10px auto; overflow:hidden; margin:auto; text-align:center; font-family: 'PSL162'; color:#fff; }
.pic-mobile3{ width:auto; height:auto; overflow:hidden; display:block; margin:auto; margin-top:20px;}


/****** Sub Profile ********/

.box-member{ 
    width:300px; height:auto; overflow:hidden; display:block; 
    margin:20px auto; background:#FFF; border-radius:10px;
    padding:10px; text-align:center; color:#FFF;
}

/* ----------- Box OPENFANS ------------ */

.box-member-ofn{ 
    width:300px; height:auto; overflow:hidden;
    margin:0 auto; background:#018da1; border-radius:10px;
    padding:20px; text-align:center; color:#FFF;
}

.btn-input-ofn {
    width: 90%;
    padding: 10px;
    text-align: center;
    border: none;
    outline: none;
    border-radius:8px;
}

.h_bullet{
    color: #9400D3; font-size: 2rem; font-weight: bold; 
}

.txt_h_ofn {
    text-decoration: underline; font-size: 1.5rem; font-weight: bold; font-family: inherit;
}

.box-pic {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    margin: 0;
    /* background-color: #FFF; */
    /* border-radius: 20px; */
}

.pic-income {
    border-radius: 100%;
    border: 4px solid #1e8190;
    width: 40%;
}

/* ----------- END Box OPENFANS ------------ */

.box-sub-member{ width:300px; height:auto; overflow:hidden; display:block; margin:auto; background:#fff; padding:10px; }

.pic-member{ width:120px; height:120px; overflow:hidden; display:block; margin:auto; margin-top:20px; background:#666; border-radius:80px; border:5px solid #9966CC; } 
.sub-member {
    width: 280px; height: auto; overflow: hidden;
    display: block; margin:10px auto; background: #ebebeb;
    text-align: center; color:#d92a75; font-size:12px; 
    font-weight:bold; border-radius: 10px; padding: 5px; 
}
.sub-period {
    width: 130px; height: auto; overflow: hidden; display: inline-block; 
    margin:5px; background: #ebebeb; text-align: center; color:#d92a75;
    border-radius: 10px; padding: 5px; float:left;
}

.sub-history {
    width: 280px; height: auto; overflow: hidden; display: block;
    margin: 10px auto; background: #ebebeb; text-align: center;
    padding: 5px; border-radius: 10px; color:#d92a75;
}

/**************/



/****** foot *****/
.sub-social { width:200px; height:auto; overflow:hidden; margin-top:20px; float:right; padding:25px; }
.text-social{ font-size:24px; color:#000; float:right; text-align:right; font-weight:bold; }
.group-bt{ width:150px; height:auto; overflow:hidden; margin-top:0px;  padding:10px; }
.bt-social{
    width:50px; height:50px; margin-right:5px; 
    float:right; overflow:hidden; display: block; 
    text-decoration: none; float:right;
    outline: 0; -webkit-transform: scale(1);
    transform: scale(1); -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out;
}

.bt-social:hover{ -webkit-transform: scale(1.4); transform: scale(1.2); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

.foot{ width:100%; height:auto; overflow:hidden; background:#fff; border-top:1px solid #c4c4c4; }
.boxfoot{ width:80%; height:auto; margin:0 auto; margin-top:20px; margin-bottom:40px; text-align:left; padding-left:10px; }
.logofoot{ width:auto; height:auto;}
.textfoot{ width:auto; height:auto; overflow:hidden; margin-top:20px; padding:25px; text-align:left; color:#000; padding-bottom:10px; }




/**** Button to top *****/
a.back-to-top {
    display:none;
    width: 60px;
    height: 50px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 10px;	
    bottom: 10px;
    background: url("../images/back-to-top-01.png") no-repeat center 43%;

}
a:hover img.back-to-top {
    opacity: .5;  -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;

}

@media screen and (min-width: 1700px) and (max-width: 1920px){

    .sub-news{ width:24%; height:auto; float:left; overflow:hidden; margin:10px auto; margin-left:7px;}
    .banner{ width:100%; height:auto; margin-left:0px; display:block; margin:auto;  }

}

@media screen and (min-width: 1210px) and (max-width: 4600px){
    .menu-btn, .logo-btn, .t-box01 { display:none;}
	.box-down { margin-top: 550px;}

}
@media screen and (min-width: 1200px) and (max-width: 1248px){
    
    .box-language{
        font-size:10px;  
        padding:3.5px 3.5px 3.5px 7px;
       
    }
    .sel-language{
      
        font-size: 10px;
    }
}
    
@media screen and (max-width: 1216px){
    .section1{ display:none;}
    .menu-btn, .logo-btn, .t-box01 { display:block;}
    .section-sub{ width:100%;}
}

@media screen and (max-width: 1440px){
    .sub-news{ width:32%; float:left; margin:10px auto; margin-left:10px; }
}

@media screen and (max-width: 1024px){
    .wrapper, .boxfoot{ width:100%; }
    .sub-section3 { width:100%; padding:0px}
    .box-banner{ width:100%; margin:auto; }
    .banner{ width:100%; }
    .sub-section4, .sub-section5, .sub-section6, .sub-section2{ width:100%; height:auto; text-align:center; }
    .text-section4, .text-section5, .text-section6{ margin:10px auto; overflow:hidden; float:none; text-align:center;  }
    .pic-mobile1, .pic-mobile2, .pic-mobile3{ float:none; margin:auto; }
    .section3 { width:100%; margin-top:0px; padding:0px; }
    .topic{ width:95%; height:auto; margin-bottom:10px; }
    .sub-news{ width:30%; float:left; margin:10px auto; margin-left:10px; }
    .tnews-big{ height:auto; }
    .tnews-small{ height:30px; }
    .section-sub{ width:100%;}
    .subpage-box{ width:100%; }

}


@media screen and (max-width: 768px){
    .video-background { display:none; }
    .section2{ height:auto; }
    .sub-section3 { margin-top:60px; margin-bottom:10px; padding:0px; }
    .t-box01{ display: block;}
    .sub-news{ width:48%; float:left; margin:10px auto; margin-left:10px; }
	.logo-big{ display: none;}
}

@media screen and (max-width: 700px){
    .banner{ width:100%; }
}

@media screen and (min-width: 490px) and (max-width: 740px){
    a.back-to-top { width:60px; height:60px; background: url("../images/back-to-top-35x35.png") no-repeat center 43%; }
}

@media screen and (min-width: 380px) and (max-width: 480px){
    .t-box01{ width:auto; height:auto; margin-top:140px; margin-bottom:30px; }
    .box-down, .box-down2{ width:auto; height:auto; }
    .bt-download{ width:235px; height:auto; overflow:hidden; float:none; margin:auto; margin-top:15px; }
    .sub-section3 { margin-top:60px; margin-bottom:10px; padding:0px; }
    .sub-group-news{ width:100%;}
    .topic-text{ font-size:30px; margin:16px 0 0 5px; }
    .bt-more{ width:80px; height:30px; font-size:13px; }
    .sub-news{ width:95%; margin:auto; margin-bottom:10px; float:none; margin-left:10px;  }
    .tnews-big{ height:auto; }
    .tnews-small{ height:auto; }
    .sub-social { margin:auto; float:none; }
    .text-social{ float:none; text-align:center; }
    .group-bt{ margin:auto; margin-left:1px;  padding:0px; }
    .bt-social{ margin-right:5px; }
    .boxfoot{ width:100%; height:auto; text-align:center; padding-left:0px; }
    .logofoot{ width:40%; height:auto; margin:auto; }
    .textfoot{ margin:5px auto; text-align:center; padding-bottom:0px; }
    a.back-to-top { width:35px; height:35px; background: url("../images/back-to-top-35x35.png") no-repeat center 43% ; }

}

@media screen and (min-width: 320px) and (max-width: 375px){
    .t-box01{ width:auto; height:auto; margin-top:120px; margin-bottom:20px; }
    .box-down, .box-down2{ width:auto; height:auto; }
    .bt-download{ width:235px; height:auto; overflow:hidden; float:none; margin:auto; margin-top:15px; }
    .topic-text{ font-size:30px; margin:16px 0 0 5px; }
    .bt-more{ width:80px; height:30px; border-radius:20px;  font-size:13px; }
    .sub-section3 { margin-top:60px; margin-bottom:10px; padding:0px; }
    .sub-group-news{ width:100%;}
    .sub-news{ width:95%; margin:auto; margin-bottom:10px; float:none; margin-left:10px; }
    .tnews-big{ height:auto; }
    .tnews-small{ height:auto; }
    .livechat{ margin:auto; margin-top:15px; padding:0px; text-align:center; float:none; }
    .sub-social { margin:auto; float:none; }
    .text-social{ float:none; text-align:center; }
    .group-bt{ margin:auto; margin-left:1px;  padding:0px; }
    .bt-social{ margin-right:5px; }
    .boxfoot{ width:100%; height:auto; text-align:center; padding-left:0px; }
    .logofoot{ width:40%; height:auto; margin:auto; }
    .textfoot{ margin:5px auto; text-align:center; padding-bottom:0px; }
    a.back-to-top { width:35px; height:35px; background: url("../images/back-to-top-35x35.png") no-repeat center 43%; }
}


@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
    .vid-info { width: 50%; padding: .5rem; }
    .vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
    .vid-info .acronym { display: none; }
}