/** reset **/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption,
footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html, body { margin: 0; padding: 0; width: 100%;height:100%; font-family: 'Prompt', sans-serif !important; font-size: 16px; color:#3a312a; position:relative; letter-spacing: 0}
body{
    position:relative; 
    /* background-image: url('../img/bg.png');  */
    background-color: #000 !important;
    color: #fff !important;
    /* background-attachment:fixed; */
}


/** layout **/
body{min-width:1200px;}
body:after{clear:both;display:block;content:""}
#wrap{width:100%; position: relative; overflow: hidden;}


/** header **/
header{position: absolute; width:100%; height:100px; z-index: 51;background-color:rgba(0,0,0,0.5); -webkit-transition: ease-in-out 0.3s; transition: ease-in-out 0.3s;}
header .menuLine{opacity:0;position: absolute; width:100%; top:100px; border-top:1px solid #111;-webkit-transition: ease-in-out 0.3s; transition: ease-in-out 0.3s;}
header .menuArea{width:1200px; height:100%; margin:0 auto;}
header h1{float:left; width:187px; height:61px; margin-top:19px; margin-left: -10px;}
header .nav{float: right; width:1000px; }
header .nav > li{float:left; width:140px; height:100px; line-height:100px; text-align: center;  }
header .nav > li > a{width:100%; height:100px; display:block; box-sizing: border-box;  font-size: 16px; color: #fff; }
header .nav li ul{width:100%; height:0; opacity:0; margin-top:33px; -webkit-transition: ease-in-out 0.3s; transition: ease-in-out 0.3s;}
header .nav li ul li{display: none; width:100%;height:30px; line-height:30px; text-align: center;}
header .nav li ul li a{display:block; width:100%; margin-top:5px;color:#7e7e7e; font-size: 14px;}
header .nav li ul li a:hover{color:#fff565}
header:hover{ background-color:#000; }
header:hover .menuLine, header:hover .nav li ul{opacity:1;-webkit-transition: ease-in-out 0.3s; transition: ease-in-out 0.3s;}
header:hover .nav li ul{height:100%;}
header:hover .nav li ul li{display: block}
header .nav > li:hover > a{color:#fff565; border-bottom:2px solid #fff565; }



/* main footer border-top เนŒย˜ยเนŒโ€”เธ*/
footer .terms ul{border-top:none}

/* Banner */
.banner{position: relative;	width:100%; height:580px; z-index: 30; background-color:#000;}
.slides{overflow:hidden;position:absolute; width:100%; height:580px;}
#slides{position:absolute; width:100%; height:580px; text-align: center}
#slides li{position: relative;width:100%;}
.slides .navWrap{width:100%; height:60px; position: absolute; bottom:0; left:0; background-color:rgba(0,0,0,0.5) }
.slides .navWrap .nav{display:table; width:1200px; margin:0 auto}
.slides .navWrap .nav li{display:table-cell; line-height: 60px; text-align: center; background:url('../images/main/img_bar.html') no-repeat right center;}
.slides .navWrap .nav li.last{background:none}
.slides .navWrap .nav li a{display:block; width:100%; height:100%; color:#fff; opacity: 0.4; font-size: 14px;}
.slides .navWrap .nav li a:hover, .slides .navWrap .nav li a.active {opacity:1;}
.slides .trigger a{position: absolute; top:50%; margin-top:-35px; display:block; width:36px; height:71px; cursor: pointer; }
.slides .trigger .btn_prev{left:20px;}
.slides .trigger .btn_next{right:20px;}


/** container **/
.mainContents{position:relative;margin:0 auto; width:100%; }
.mainContents:after{clear:both;display:block;content:""}

/* bbsArea */
.main .bbsArea{width:100%; height:230px; padding-top:60px; padding-bottom:30px;}
.main .bbsArea > div{float:left;}
.main .bbsArea .bbs{width:434px;}
.main .bbsArea .notice{margin-right:22px}
.main .bbsArea .bbs .title{width:100%; height:48px; border-bottom:1px solid #ababab; }
.main .bbsArea .bbs .title h3{float:left; font-size:28px; font-weight: bold}
.main .bbsArea .bbs .title .more{float:right;}
.main .bbsArea .bbs .list{margin-top:15px}
.main .bbsArea .bbs .list a{display: block; width:100%; height:30px; line-height:30px; }
.main .bbsArea .bbs .list a:hover p{text-decoration: underline}
.main .bbsArea .bbs .list a p{float:left; max-width:75%; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.main .bbsArea .bbs .list a strong{float:left; margin-left:5px; font-weight: normal}
.main .bbsArea .bbs .list a span{float:left; font-size: 14px; color:#777}
.main .bbsArea .bbs .list .iconlabel_news {float:left; width: 60px; height: 24px; background: url('../img/icon/icon-news.html') no-repeat left top; display: inline-block; vertical-align: middle; margin-right: 20px}
.main .bbsArea .bbs .list .iconlabel_notice {float:left; width: 60px; height: 24px; background: url('../img/icon/icon-notice.html') no-repeat left top; display: inline-block; vertical-align: middle; margin-right: 20px}
.main .bbsArea .bbs .list .iconlabel_event {float:left; width: 60px; height: 24px; background: url('../img/icon/icon-event.html') no-repeat left top; display: inline-block; vertical-align: middle; margin-right: 20px}
.main .bbsArea .bbs .list .iconlabel_promo {float:left; width: 60px; height: 24px; background: url('../img/icon/icon-promo.html') no-repeat left top; display: inline-block; vertical-align: middle; margin-right: 20px}

/* topBanner */
.main .topBanner{ position: relative; width:100%; height:133px; margin-bottom:10px;}
.main .topBanner a{float:left; display: block; }
.main .topBanner .banner1{margin-right:28px;}

/* mediaArea */
.main .mediaArea{position: relative; overflow:hidden; width:100%; height:352px;  box-sizing:border-box; background:url('../img/bg_media.html') no-repeat left bottom;}
.main .mediaArea .media{float:right; margin-right:47px;}
.main .mediaArea .media a{position: relative; overflow: hidden; float:left; display:block;width:338px; height:225px; margin-top: 88px; }
.main .mediaArea .media a img:first-child{transform:scale(1,1);transition: all 1s;}
.main .mediaArea .media a:hover img:first-child{transform:scale(1.1,1.1);transition: all 1s;}
.main .mediaArea .media .screenShot{margin-right:47px}
.main .mediaArea .media .play{position: absolute; top:93px; left:50%; margin-left:-16px;}

/* BannerArea */
.main .BannerArea{ position: relative; width:100%; height:173px; margin-top:23px;}
.main .BannerArea a{float:left; display: block; width:400px; height:173px; }

/* movie_wrap เน‹ยย™เนŒย˜ยเนŒยƒย */
.movie_wrap {
    position: fixed; transform: scale(0, 0); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; 
    top: 50%; left: 50%; width: 916px; height: 514px; margin-left: -458px; margin-top: -257px; z-index: 53; }
.movie_wrap.open {transform: scale(1, 1); transition: all .5s; opacity: 1;}
.movie_wrap .btn_close {position: absolute; top: -50px; left:50%; width: 40px; height: 39px; margin-left:-20px; z-index: 12;}
.movie_wrap .btn_close:hover {animation: rotate 2s;}
.movie_wrap .you_tube {position: relative; height: 0; padding-bottom: 56.25%; z-index: 9;}
.movie_wrap .you_tube iframe, 
.movie_wrap .you_tube object, 
.movie_wrap .you_tube embed {position: absolute; display: block; width: 100%; height: 100%;}

.home_sideArea {position:relative; float: left; margin-left:20px; width:290px; height:140px;}
.home_sideArea .btnArea .btnStart{position:relative; display:block; width:100%; height:100%; margin-bottom:10px; z-index: 5;}
.home_sideArea .btnArea .loginArea, .sideArea .btnArea .logoutArea{width:100%; height:80px;}
.home_sideArea .btnArea .btnLogin{float:left;width:175px; height:80px; margin-right:3px}
ol, ul, li, dl{list-style: none;}
a, input, button{outline:none; color:#333}
a:hover,a:active,a:focus{text-decoration:none;transition: all 0.3s;}
.wide-container {
	border:1px solid #dfdfdf;
	background-color:#eee;
	max-width: 100%;
	height: 250px;
	margin: 0 auto;
}
a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
}

/** skipNav **/
#skipNav{position:relative; z-index:100;}
#skipNav a{display: block; overflow: hidden; position:absolute; top:-40px; left:0; width:150px; text-align:center;}
#skipNav a:hover, #skipNav a:active, #skipNav a:focus{top:0; padding:5px; background:#841200 none;  color:#fff; text-align:center;}


.pointer {
    cursor: pointer;
}

#FBSlideLikeBox_left {
    background: url(../img/Facebook.png) 230px 0 no-repeat;
    float: left;
    height: 1790px;
    position: fixed;
    left: -232px;
    padding-right: 60px;
    top: 10%;
    width: 292px;
    z-index: 2000;
}
#FBSlideLikeBox_left #FBSlideLikeBox2_left {
    position: relative;
    clear: both;
    width: auto;
}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {
    height: 545px;
    right: 0;
    position: absolute;
    border: 2px solid #3B5998;
    width: 230px;
    background: #f8f8f8;
}

.tw-rounded-2xl {
    border-radius: 1rem !important;
}

.tw-bg-all {
    border-radius: 0.5rem !important;
    background-color: #161616; padding:1rem;
    filter: drop-shadow(0 0 rgba(163, 163, 163, 0));
}

.tw-border-yellow-400 {    
    border-radius: 1px;
    background-color: #232323;
    color: #fff;
}

.tw-border-bg {    
    border-radius: 1px;
    background-color: #3d3d3d;
}

.font10 {
    font-size: 10pt;
}

.font9 {
    font-size: 9pt;
}

.news-border {
    padding-bottom: 0.2rem;
    border-bottom: 1px dotted rgba(161, 161, 161, 0.151);    
}


::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #212020;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #424242;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #424242;
  }

::-webkit-scrollbar-thumb {
    background: #424242;
    width: 8px;
    height: 8px;
    border-radius: 4px;
}