@charset "utf-8";
/* CSS Document */
body {
    margin: 0;
    padding: 0;
    font-family: "微軟正黑體", "新細明體", "Arial Unicode MS";
    font-size: 13px;
}
a { text-decoration: none !important; }
img { border: none; }
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
*{ box-sizing:border-box;}
.txt_red { color: #F33; }
.txt_small { font-size: 12px; }
.txt_bigger {
    font-size: 18px;
    font-weight: bold;
}
#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    z-index: 99;
}
#layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
#top {
    height:60px;
    width: 900px;
    margin: 0 auto;
}
#top .r_area { float: right; }
.menu_in .T_logo {
    position: absolute;
    top: -55px;
    left: 1px;
    width: 215px;
    height: 135px;
    display: block;
    z-index: 999;
}


    
#top .favorate {
    margin: 20px 10px 0 0;
    display: block;
    height: 20px;
    width: auto;
    text-align: right;
    font-size: 12px;
}
#top .language {
    
    width: auto;
    display: block;
    font-size: 12px;
    line-height:60px;
    overflow:hidden;
    
}
#top .language > i {
    float: left;
    font-style: normal;
}
#top .language > p {
    float: left;
    width: 40px;
    height: 22px;
    display: block;
    background: #FFFFFF;
    
    text-align: center;
    line-height: 21px;
    margin: 19px 3px 0;
    
    /*border-radius: 30px;*/
    
}
#top .language > p a {
    width: 40px;
    height: 22px;
    display: block;
    color: #7e7e7e;
    padding: 3px 0;
    line-height: 15px;
    
    /*border-radius: 30px;*/
    
}
#top .language > p a:hover {
    background: #f99032;
    color: #FFFFFF;
}
#top .language > .lan_active {
    background: #f99032;
    color: #FFFFFF;
    
}
#nav { /*background:url(../images/menu_bg.png) center top repeat-x;*/
    position: static;
    width: 100%;
    display: block;
    overflow: hidden;
}
 .menu {
    background: url(../images/menubg.jpg) repeat-x 0 0;
    width:100%;
    height:auto;
    
    
}
.menu_in {
    position: relative;
    width: 900px;
    height:80px;
    padding: 0 0 25px 0;
    margin: 0 auto 0;
    
    
    

}
.menu_bg { background: url(../images/menu_in_bg.jpg) repeat-y 0 0; }
#nav .menu_r {
    float: right;
    width: 230px;
    display: block;
}
#nav .menu_l {
    float: left;
    width: 665px;
    height: 100%;
}
#nav .menu_inner {
    width: 665px;
    margin: 0 auto;
    display: block;
}
.login { }
.login .txt { }
/*nav*/
.navbar-x {
    text-align: center;
    font-family: "微軟正黑體", "新細明體", "Arial Unicode MS";
    line-height: 67px;
    float: right;
    font-weight: bold;
    font-size: 15px;
    margin-right:20px;
}
.navbar-x .nav {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a {  }
.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus {
    color: #421400;
    background-color: inherit;
}
.navbar-x .nav > li > a {
    width: 100px;
    color: #a20c2b;
    transition: color 0.42s ease-in-out;
    
}
.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus {
    color: #421400;
    background-color: inherit;
}
.navbar-x .nav > li.active > a {
    color: #421400;
    background-color: inherit;
}
.navbar-x .nav > li.bottom-bar {
    transition: left 0.42s ease-in-out;
    position: absolute;
    height: 4px;
    width: 100px;
    background-color: #770001;
}
.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar { left: 0px; }
.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar { left: 0px !important; }
.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar { left: 100px; }
.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar { left: 100px !important; }
.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar { left: 200px; }
.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar { left: 200px !important; }
.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar { left: 300px; }
.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar { left: 300px !important; }
.navbar-x .nav20px;
    top: 0; > li:nth-child(5).active ~ .bottom-bar { left: 400px; }
.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar { left: 400px !important; }

.navbar-x .nav > li:nth-child(6).active ~ .bottom-bar { left: 500px; }
.navbar-x .nav > li:nth-child(6):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(6):focus ~ .bottom-bar { left: 500px !important; }
/*
.navbar-x .nav > li:nth-child(7).active ~ .bottom-bar { left: 570px; }
.navbar-x .nav > li:nth-child(7):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(7):focus ~ .bottom-bar { left: 570px !important; }
*/
/*login*/
.form { width: 100%; }
.form .field {
    position: relative;
    margin: 0 8px;
}
.form .field i {
    font-size: 14px;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 35px;
    width: 35px;
    color: #f7f3eb;
    background: #676056;
    text-align: center;
    line-height: 36px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}
/* === Logo === */
.logo {
    background-image: url("https://www.dropbox.com/sh/3kmitwavpcm721g/f0rLBKoHsG/lunarpixel_logo.png?dl=1");
    background-position: center;
    height: 60px;
    width: 140px;
    margin: 100px auto 30px auto;
}
/* === Login === */
.login {
    position: relative;
    margin: 0 auto;
    width: 230px;
    background: white;
    /*border-radius: 3px;*/
    border: 1px solid #c7c7c7;
    display: block;
}
.longer {
    display: inline-table;
    overflow: hidden;
    background: #eceadd;
    border-bottom: 0px;
}
.longer1 { border-bottom: 0px; }
.login:before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.login h1 {
    line-height: 51px;
    font-size: 15px;
    font-weight: bold;
    font-family: "微軟正黑體", "新細明體", "Arial Unicode MS";
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    background: #f2672e;
    margin: 0;/*  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;*/
}
.login h2 {
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    font-family: "微軟正黑體", "新細明體", "Arial Unicode MS";
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    background: #f2672e;
    margin: 0;
}
.login p:first-child { }
.login_title{ 
    height:50px; 
    color: #E9E9E9; 
    float:left;
     border:#F97602 1px solid;
      margin:7px 0 8px 7px;
      width:94%;
    text-align: center;
    font-size:17px;
    line-height:50px;
    padding:0 10px 0 45px;
    font-weight:bold;
    background: #F97602;
    display:block;
    overflow:hidden;
    
    }
.login_title_frame{padding:0!important;}
.login p.remember { float: left;}
.login p.remember label {
    color: #a7a599;
    font-size: 12px;
    cursor: pointer;
    
}
.login p.submit { text-align: center; }
.login p.forgot {
    float: right;
    margin-right: 5px;
}
.login p.forgot a {
    color: #065e96;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease-out;
}
.login p.forgot a:hover { color: #f2672e; }
/****Login to membeer***/
.munber_info {
    font-size: 14px;
    padding: 0 20px 0 20px;
}
.munber_info li { height: 15px; }
.login .munber_history {
    margin: 0;
    display: block;
    height: 80px;
    width: 100%;
}
.login .munber_history li {
    width: 100%;
    height: 29px;
    display: block;
    border-radius: 6px;
    margin: 2px 0 0 0;
}
.login .munber_history li a {
    float: left;
    width: 100%;
    height: 100%;
    display: block;
    padding: 3px 0;
}
.login .munber_history li a:hover { background: #fff5c0; }
.login .munber_history li img {
    height: 80%;
    border: 2px solid #d5d3d0;
    margin: 1px 0 0 5px;
}
.login .munber_history li img:hover { -webkit-filter: brightness(130%); }
.login .munber_history li .name {
    width: 122px;
    margin: 0 0 0 10px;
}
.login .munber_history li .server {
    float: right;
    margin: 0 5px 0 0;
}
.login .loginbtn {
    width: 200px;
    height: 40px;
    margin: 5px auto;
}
.login .loginbtn a {
    float: left;
    font-size: 14px;
    text-align: center;
    width: 47%;
    display: block;
    background: #ffdd3e;
    color: #000;
    padding: 5px 0;
    margin: 0 5px 0 0;
}
.login .loginbtn a:hover { background: #fdd30f; }
.member_photo img {
    border: 1px solid #099;
    margin: 10px auto;
    border-radius: 30px;
    width: 80px;
    height: 80px;
    display: block;
    overflow: hidden;
}
.member_name {
    margin: 75px auto 0 auto;
    width: 100px;
    text-align: center;
}
.munber_detail li {
    background: #fff;
    width: 90%;
    margin: 20px auto 0 auto;
    height: 45px;
    font-size: 16px;
    text-align: center;
    border-radius: 30px;
}
.munber_detail li a {
    width: 100%;
    display: block;
    padding: 10px 0 11px 0;
    color: #090909;
}
.munber_detail li a:hover, .munber_detail li.active a {
    background: #FC3;
    width: 100%;
    border-radius: 30px;
}
/***********************************************************
all rightside
***********************************************************/
#memberinfo_index, #memberinfo_detail, #topup, #service, #news {
    top: 150px;
    width: 600px;
    font-size: 16px;
    border: 2px solid #8dca56;
    border-radius: 8px;
    margin: 20px 0 20px 270px;
    display: block;
    overflow: hidden;
}
/****Member Info***/
#memberinfo_index h3, #memberinfo_detail h3, #service h3 {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 0 10px 0;
    color: #000;
    background: url(../images/member_title01.png) no-repeat 0 0;
}
#memberinfo_index h3.bg02 { background: url(../images/member_title02.png) no-repeat 0 0; }
#memberinfo_index h3.bg03 { background: url(../images/member_title03.png) no-repeat 0 0; }
#memberinfo_index ul, #memberinfo_detail ul, #topup ul {
    width: 95%;
    margin: 20px auto;
}
#memberinfo_index h3 span { font-size: 14px; }
#memberinfo_index h3 span.more a, #memberinfo_index li span.more a, #memberinfo_detail h3 span.more a, #memberinfo_detail li span.more a {
    float: right;
    height: 25px;
    margin: 15px 20px 0 0;
    padding: 2px 10px;
    color: #000;
    background: #ff8838;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
#memberinfo_index li span.more a, #memberinfo_detail li span.more a {
    height: 35px;
    border-radius: 0;
    padding: 5px 20px 0px 20px;
    margin: -20px 0 0 0;
    border-radius: 30px;
}
#memberinfo_index h3 span.more a:hover, #memberinfo_index li span.more a:hover, #memberinfo_detail h3 span.more a:hover, #memberinfo_detail li span.more a:hover { background: #ffa838; }
#memberinfo_index li, #memberinfo_detail li, #topup li { height: 30px; }
#memberinfo_index li span.bar, #memberinfo_detail li span.bar {
    padding: 2px 32px;
    background: #FC6;
    border: 1px solid #CC6;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
}
#memberinfo_index li span.bar20, #memberinfo_detail li span.bar20 {
    background: #FC0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin: 0 0 0 10px;
}
#memberinfo_index li span.bar40, #memberinfo_detail li span.bar40 { background: #F90; }
#memberinfo_index li span.bar60, #memberinfo_detail li span.bar60 { background: #F60; }
#memberinfo_index li span.bar80, #memberinfo_detail li span.bar80 { background: #F30; }
#memberinfo_index li span.bar100, #memberinfo_index li span.barno, #memberinfo_detail li span.bar100, #memberinfo_detail li span.barno {
    background: #F00;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}
#memberinfo_index li span.barno, #memberinfo_detail li span.barno {
    background: #f7eedb;
    color: #aaa;
}
#memberinfo_index li span.save20 {
    background: #F30;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 2px 42px;
    margin: 0 0 0 5px;
}
#memberinfo_index li span.save40 { background: #F90; }
#memberinfo_index li span.save60 { background: #FC0; }
#memberinfo_index li span.save80 { background: #9C0; }
#memberinfo_index li span.save100 {
    background: #6C0;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    padding: 2px 42px;
}
#memberinfo_index li.security {
    height: 50px;
    padding: 20px 0 20px 120px;
}
#memberinfo_index li.bg1 {
    background: url(../images/security_1.png) no-repeat 20px center;
    border-bottom: 1px solid #aaa;
}
#memberinfo_index li.bg2 { background: url(../images/security_2.png) no-repeat 20px center; }
#memberinfo_index .security .txt {
    font-size: 12px;
    color: #888;
}
/** game history*/
#memberinfo_index .game_history li {
    float: left;
    width: 175px;
    height: 150px;
    display: block;
    background: #eee;
    border-radius: 6px;
    border: 1px solid #999;
    margin: 0 5px 20px 5px;
}
#memberinfo_index .game_history span {
    width: 158px;
    height: 37px;
    display: table;
    margin: 0 auto;
    padding: 3px 5px;
}
#memberinfo_index .game_history li img {
    width: 90%;
    height: auto;
    margin: 10px 10px 5px 10px;
    border: 1px solid #fff;
}
#memberinfo_index p.game_name a {
    float: left;
    color: #e2551e;
    font-size: 18px;
    margin: 5px 0 0 6px;
}
#memberinfo_index p.game_name a:hover { color: #000; }
#memberinfo_index .game_play a {
    float: right;
    text-align: center;
    line-height: 25px;
    height: 25px;
    margin: -5px 0px 0 0;
    padding: 3px 8px 8px 8px;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    background: #ff5521;
    border: 1px solid #fff073;
}
#memberinfo_index .game_play a:hover { background: #ff8f21; }
#memberinfo_index .game_play { }
/****memberinfo_detail******************/
#memberinfo_detail li { margin: 20px 0; }
#memberinfo_detail table, #service table {
    width: 530px;
    margin: 0 0 0 20px;
}
#memberinfo_detail tr, #service tr { height: 50px; }
#memberinfo_detail td, #service td {
    height: 30px;
    padding: 5px 3px;
}
#memberinfo_detail td input, #memberinfo_detail td select {
    width: 100%;
    height: 100%;
}
#memberinfo_detail td.fill_title {
    width: 15%;
    text-align: right;
    padding: 0 10px 0 0;
}
#memberinfo_detail td.sinfo { width: 250px; }
#memberinfo_detail td.linfo { width: 50%; }
/**form**/

#memberinfo_detail .form input[type=text], #memberinfo_detail .form input[type=date], #memberinfo_detail .form select[name=contact], #service .form input[type=text], #service .form select[name=contact], #service .form textarea, #topup .form input[type=text], #topup .form input[type=date], #topup .form select[name=contact], #topup .form select[name=pay], #topup .form select[name=server] {
    font-family: 'Open Sans', Calibri, Arial, sans-serif;
    font-size: 14px;
    padding: 5px 15px;
    position: relative;
    color: #676056;
    border: none;
    background: #f7f3eb;
    color: #777;
    transition: color 0.3s ease-out;
    width: 100%;
    height: 30px;
}
#memberinfo_detail .form select[name=contact], #service .form select[name=contact] {
    height: 40px;
    margin: -5px 0 0 0;
}
#memberinfo_detail .form input[type=text], #service .form input[type=text] { margin-bottom: 13px; }
#memberinfo_detail .form input[type=text]:hover ~ i, #memberinfo_detail .form input[type=password]:hover ~ i { color: #ded9cf; }
#memberinfo_detail .form input[type=text]:focus ~ i, #memberinfo_detail .form input[type=password]:focus ~ i { color: #f2672e; }
#memberinfo_detail .form input[type=text]:focus, #memberinfo_detail .form input[type=password]:focus, #memberinfo_detail .form button[type=submit]:focus, #news .form button[type=submit]:focus { outline: none; }
#memberinfo_detail .form input[type=submit], #service .form input[type=submit], #topup .form input[type=submit], #news .form input[type=submit] {
    /*margin-top: 10px;*/
    width: 180px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    letter-spacing: 0;
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    -moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    color: #0B0B0B;
    background-color: #ffdd3f;
    text-shadow: none;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    position: relative;
    margin: 30px 32%;
}
#memberinfo_detail .form input[type=submit]:hover, input[type=submit]:focus {
    color: #0B0B0B;
    background: #f2cf2b;
}
#memberinfo_detail .form label { float: left; }
#memberinfo_detail .form label input {
    width: 16px;
    height: 16px;
    margin: -2px 4px 0 5px;
    vertical-align: middle;
    cursor: pointer;
    background-color: #ffdd3f;
}
/***service Page************/

#service { border: 2px solid #68abda; }
#service .bg1 { background: url(../images/service_title1.png) no-repeat 0 0; }
#service .bg2 { background: url(../images/service_title2.png) no-repeat 0 0; }
#service .bg3 { background: url(../images/service_title3.png) no-repeat 0 0; }
#service table { width: 85%; }
/**form**/
#service .form {
    margin: 15px;
    width: 95%;
}
#service .form input, #service .form select { width: 100%; }
#service .form input { margin: 5px 0 0 0; }
#service .form select[name=contact] { margin: -20px 0 0 0; }
#service .form textarea {
    width: 100%;
    height: 100px;
}
#service .faq_title {
    font-size: 18px;
    font-weight: bold;
    color: #105a7c;
}
#service .progress {
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 1px 5px 5px 5px;
    border-radius: 15px;
}
#service .btn1 { background: #F90; }
#service .btn2 { background: #7db363; }
#service .btn3 { background: #cf4868; }
#service .date {
    float: right;
    font-size: 12px;
    color: #555;
    margin: 0 0 0 5px;
}
#service h4 { margin: 20px 0 20px 0; }
#service h4 span {
    width: 20px;
    height: 20px;
    display: block;
    margin: -6px 10px 0 0;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    float: left;
}
#service h4.question { color: #338786; }
#service span.question { background: #57b2b1; }
#service h4.answer { }
#service span.answer {
    background: #f29d2e;
    font-size: 18px;
}
#service p.answer {
    margin: 0 0 20px 40px;
    color: #bc783c;
    font-size: 16px;
}
#service p.txt { margin: 0 0 0 40px; }
#service p.pic { margin: 10px 0 0 40px; }
#service p.pic img { width: 100%; }
#service li {
    margin: 0;
    display: block;
    line-height: 26px;
}
#service .form2 {
    width: 570px;
    margin: 15px;
}
#service .form2 textarea {
    width: 95%;
    border-top: 1px solid #dbc89e;
}
#service .form2 .comment_again {
    width: 120px;
    height: 35px;
    margin: 0 0 -5px 0;
    padding: 5px 0 0 0;
    color: #975a24;
    text-align: center;
    background: #f0e0bb;
    border: 1px solid #dbc89e;
    border-top-left-radius: 22px;
    border-top-right-radius: 19px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
hr.dot { border-top: 1px dotted #aaa; }
#service div.page { margin: 0 30%; }
/*****topup page***********************/
#topup { border: 2px solid #d4c166; }
#topup h3 {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 0 10px 0;
    color: #000;
    background: url(../images/topup_title.png) no-repeat 0 0;
}
#topup .bg2 { background: url(../images/topup_title2.png) no-repeat 0 0; }
#topup .bg3 { background: url(../images/topup_title3.png) no-repeat 0 0; }
#topup h4 { color: #809c00; }
#topup h4 span {
    width: 20px;
    height: 20px;
    display: block;
    margin: -6px 10px 0 0;
    padding: 5px;
    background: #a1c206;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    float: left;
}
#topup li { margin: 20px 0; }
/**left******/
#nav h2 {
    width: 100%;
    height: 25px;
    background: #d1cba2;
    display: block;
    overflow: hidden;
    margin: 15px 0;
    padding: 0;
    color: #796d21;
    line-height: 25px;
}
#nav .topup_left ul {
    display: block;
    margin: 10px 0;
    width: 100%;
    height: 100px;
}
#nav .topup_left li {
    width: 90px;
    height: 30px;
    line-height: 10px;
    font-size: 14px;
    border-radius: 20px;
    float: left;
    margin: 5px 0 18px 17px;
    display: block;
}
#nav .topup_left li a:hover, #nav .topup_left li.active a {
    clear: both;
    display: block;
    background: #d5db57;
}
/**form***/
#topup .form { margin: 10px 0 10px 20px; }
#topup .form hr {
    width: 93%;
    height: 2px;
    margin: 10px 0;
}
#topup .form input[type=text] {
    margin: 5px 0 0 0;
    width: 75%;
}
#topup .form select[name=pay] {
    width: 80%;
    height: 37px;
}
#topup .form textarea {
    width: 100%;
    height: 100px;
}
#topup .fill { width: 100%; }
#topup .ok {
    position: absolute;
    right: 50px;
    top: 220px;
    display: block;
    margin: -6px 10px 0 0;
    padding: 5px;
    background: #f2672e;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    float: left;
}
#topup label { color: #666; }
#topup label span.ps {
    color: #F90;
    margin: 0 0 0 25px;
}
#topup .pay { margin: 10px 0 20px 35px; }
#topup .pay label { margin: 0 20px 0 0; }

/**table****/
#topup table, #service table { width: 80%; }
#topup tr { height: 50px; }
#topup td {
    height: 30px;
    padding: 5px 3px;
}
#topup .form td input[type=text], #topup .form td select[name=server] {
    width: 100%;
    height: 100%;
}
#topup .form td input[type=text] { width: 88%; }
#topup .form td select[name=server] { height: 35px; }
#topup td.fill_title {
    width: 50%;
    text-align: right;
    padding: 0 10px 0 0;
}
#topup td.sinfo { width: 250px; }
#topup td.linfo { width: 52%; }
#topup .finalcoin { margin: 10px 0 0 175px; }
#topup .coin {
    color: #f2672e;
    font-size: 18px;
    font-weight: bold;
}
#topup .check_coin { margin: 0 0 0 150px; }
#topup .topup_list { width:100%;}
#topup table.topup_list th { font-weight:bold; border-top: 1px solid #8e7d2c; border-bottom: 1px solid #ae9c45; background:#d4c166;}
#topup table.topup_list td { color:#a18b21;}
#topup table.topup_list th, #topup table.topup_list td { text-align:center; height:20px;}
#topup table.topup_list .status { background:#FC3;
    border-radius: 10px; color:#574c10; padding:5px 10px;}
    .list_B { background:#f1f1d7;}

#topup .page { margin: 0 0 0 30%;}
/****news***************************/
#news { border: 2px solid #f47d13; }
#news h3 {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 0 10px 0;
    color: #000;
    background: url(../images/gamenews_title.jpg) no-repeat 0 0;
}
#news div.page { margin: 0 0 0 30%; }
#news h4 {
    margin: 20px 0 20px 15px;
    color: #b52600;
}
#news h4 span {
    width: 20px;
    height: 20px;
    display: block;
    margin: -6px 10px 0 0;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    float: left;
}
#news h4.question { color: #338786; }
#news span.question { background: #57b2b1; }
#news h4.answer { }
#news span.answer {
    background: #f29d2e;
    font-size: 18px;
}
#news p.answer {
    margin: 0 0 20px 40px;
    color: #bc783c;
    font-size: 16px;
}
#news p.txt { margin: 20px; }
#news p.pic { margin: 10px 0 0 40px; }
#news p.pic img { width: 100%; }
#news .form2 {
    width: 570px;
    margin: 15px;
}
#news .otherbg1 { background: url(../images/others_title1.png) no-repeat 0 0;}
#news .otherbg2 { background: url(../images/others_title2.png) no-repeat 0 0;}
#news .otherbg3 { background: url(../images/others_title3.png) no-repeat 0 0;}
#news .otherbg4 { background: url(../images/others_title4.png) no-repeat 0 0;}
/* === Input Form === */
::-webkit-input-placeholder {
 color: #ded9cf;
 font-family:'Open Sans';
}

:-moz-placeholder {
 color: #ded9cf !important;
 font-family:'Open Sans';
}
.code {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    width: 210px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
}
.code input {
    width: 110px !important;
    height: 26px;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    float: left;
}
.code img {
    float: right;
    display: block;
}
.form input[type=text], .form input[type=password] {
    font-family: 'Open Sans', Calibri, Arial, sans-serif,"微軟正黑體";
    font-size: 12px;
    font-weight: 400;
    padding: 5px 15px 5px 55px;
    position: relative;
    width: 100%;
    /*height: 24px;*/
    color: #676056;
    border: none;
    background: #f7f3eb;
    color: #777;
    transition: color 0.3s ease-out;
}
.form input[type=text] { margin-bottom: 13px; }
.form input[type=text]:hover ~ i, .form input[type=password]:hover ~ i { color: #ded9cf; }
.form input[type=text]:focus ~ i, .form input[type=password]:focus ~ i { color: #f2672e; }
.form input[type=text]:focus, .form input[type=password]:focus, .form button[type=submit]:focus { outline: none; }
.form input[type=submit] {
    /*margin-top: 10px;*/
    width: 95%;
    margin-top:5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    height: 35px;
    letter-spacing: 0;
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    -moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
    color: #0B0B0B;
    background-color: #fee476;
    text-shadow: none;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    position: relative;
    /*margin-bottom: 10px;*/
    -webkit-animation: shadowFadeOut 0.4s;
    -moz-animation: shadowFadeOut 0.4s;
}
.form input[type=submit]:hover, input[type=submit]:focus {
    color: #0B0B0B;
    /* -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
  -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
  box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;*/
    background: #f2cf2b;
}
 @keyframes shadowFade { 0% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
 @keyframes shadowFadeOut { 0% {
 -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
 @-webkit-keyframes shadowFade { 0% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
 @-webkit-keyframes shadowFadeOut { 0% {
 -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
 @-moz-keyframes shadowFade { 0% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 46px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 46px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
 @-moz-keyframes shadowFadeOut { 0% {
 -webkit-box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 44px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 44px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
 100% {
 -webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
 -moz-box-shadow:    inset 0px 0px 0px 0px rgba(204,86,15,1);
 box-shadow:         inset 0px 0px 0px 0px rgba(204,86,15,1);
 color: #fff;
}
}
.form input[type="checkbox"], .form input[type="radio"] { display: none; }
.form input[type="checkbox"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: -2px 4px 0 5px;
    vertical-align: middle;
    background: url("https://www.dropbox.com/sh/3kmitwavpcm721g/rDv1UvRmhG/checkbox.png?dl=1") left top no-repeat;
    cursor: pointer;
}
.form input[type="checkbox"]:checked + label span { background: url("https://www.dropbox.com/sh/3kmitwavpcm721g/rDv1UvRmhG/checkbox.png?dl=1") -16px top no-repeat; }
.other_txt {
    font-size: 13px;
    width: 100%;
    display: block;
    text-align: center;
}
/********/
.form input[type="radio"] + label span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: -2px 4px 0 5px;
    vertical-align: middle;
    background: #e3d28c;
    cursor: pointer;
    border: 2px solid #aa9e6f;
    border-radius: 10px;
}
.form input[type="radio"]:checked + label span {
    width: 6px;
    height: 6px;
    background: #fff;
    border: 5px solid #ff6501;
}
.other_txt {
    font-size: 13px;
    width: 100%;
    display: block;
    text-align: center;
}
/********/
.linkicon {
    display: table;
    margin: 0 auto;
}
.linkicon img { margin: 0 5px 13px; }
/*banner*/
#banner {
    display: block;
    margin: 0 auto 40px;
    
}

#abgneBlock {
        
        width: 920px;
        height: 250px;
        /*
        padding: 5px;
        border: 1px solid #ccc;
        */
        margin:0 auto;
    }
    #abgneBlock #player {
        position: relative;
        overflow: hidden;
        height: 100%;
        width:100%;
    }
    #abgneBlock ul.list {
        padding: 0;
        margin: 0;
        list-style: none;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    #abgneBlock ul.list li {
        float: left;
        width: 100%;
        height: 100%;
    }
    #abgneBlock .list img{
        width: 100%;
        height: 100%;
        border: 0;
    }
    #abgneBlock ul.playerControl {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        bottom: 8px;
        right: 8px;
        height: 20px;
    }
    #abgneBlock ul.playerControl li {
        float: left;
        color: #FFFFFF;
        text-align: center;
        line-height: 20px;
        width: 20px;
        height: 20px;
        font-family: Arial;
        font-size: 12px;
        cursor: pointer;
        margin: 0px 5px;
        background:  #ff7a19;
    }
    #abgneBlock ul.playerControl li.current { 
        color: #fff;
        font-weight: bold;
        background-position: 0 0;
        background:#f5cb8d;
    }
/*tab*/
#hotgame {
    width: 920px;
    margin: 0 auto;
    display: block;
    clear: both;
}
#newgame {
    width: 920px;
    margin: 0 auto;
    display: block;
    clear: both;
}
 @import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);
@-webkit-keyframes content-opacity { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @-moz-keyframes content-opacity { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @-o-keyframes content-opacity { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @keyframes content-opacity { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @-webkit-keyframes content-rotate-y { from {
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
 @-moz-keyframes content-rotate-y { from {
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
 @-o-keyframes content-rotate-y { from {
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
 @keyframes content-rotate-y { from {
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
}
 @-webkit-keyframes content-rotate-x { from {
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
}
 @-moz-keyframes content-rotate-x { from {
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
}
 @-o-keyframes content-rotate-x { from {
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
}
 @keyframes content-rotate-x { from {
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
to {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
}
 @-webkit-keyframes content-rotate-both { from {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-transform-origin: 0% 50% 50%;
 -moz-transform-origin: 0% 50% 50%;
 -ms-transform-origin: 0% 50% 50%;
 -o-transform-origin: 0% 50% 50%;
 transform-origin: 0% 50% 50%;
}
to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0% 50% 50%;
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -o-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
}
}
 @-moz-keyframes content-rotate-both { from {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-transform-origin: 0% 50% 50%;
 -moz-transform-origin: 0% 50% 50%;
 -ms-transform-origin: 0% 50% 50%;
 -o-transform-origin: 0% 50% 50%;
 transform-origin: 0% 50% 50%;
}
to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0% 50% 50%;
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -o-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
}
}
 @-o-keyframes content-rotate-both { from {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-transform-origin: 0% 50% 50%;
 -moz-transform-origin: 0% 50% 50%;
 -ms-transform-origin: 0% 50% 50%;
 -o-transform-origin: 0% 50% 50%;
 transform-origin: 0% 50% 50%;
}
to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0% 50% 50%;
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -o-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
}
}
 @keyframes content-rotate-both { from {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
 -webkit-transform-origin: 0% 50% 50%;
 -moz-transform-origin: 0% 50% 50%;
 -ms-transform-origin: 0% 50% 50%;
 -o-transform-origin: 0% 50% 50%;
 transform-origin: 0% 50% 50%;
}
to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0% 50% 50%;
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -o-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
}
}
 @-webkit-keyframes content-pop-out { 0% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
}
 @-moz-keyframes content-pop-out { 0% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
}
 @-o-keyframes content-pop-out { 0% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
}
 @keyframes content-pop-out { 0% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
}
 @-webkit-keyframes content-pop-in { from {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
to {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}
 @-moz-keyframes content-pop-in { from {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
to {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}
 @-o-keyframes content-pop-in { from {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
to {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}
 @keyframes content-pop-in { from {
 opacity: 1;
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
to {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}
 @-webkit-keyframes content-slide-bot { from {
 top: 20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @-moz-keyframes content-slide-bot { from {
 top: 20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @-o-keyframes content-slide-bot { from {
 top: 20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @keyframes content-slide-bot { from {
 top: 20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @-webkit-keyframes content-slide-top { from {
 top: -20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @-moz-keyframes content-slide-top { from {
 top: -20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @-o-keyframes content-slide-top { from {
 top: -20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}
 @keyframes content-slide-top { from {
 top: -20px;
 opacity: 0;
}
to {
    top: 0px;
    opacity: 1;
}
}

/* used for wrapper animation after the load of the page */
@-webkit-keyframes show { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @-moz-keyframes show { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @-o-keyframes show { from {
 opacity: 0;
}
to { opacity: 1; }
}
 @keyframes show { from {
 opacity: 0;
}
to { opacity: 1; }
}
html {
    webkit-font-smoothing: antialiased;
    font: 1em/1.5em "Raleway";
    font-weight: normal;
}
.tabs-wrapper { /* margin: 5% 10% 0 10%;*/ }
.tabs-wrapper input[type=radio] { display: none; }
.tabs-wrapper label {
    transition: background 0.4s ease-in-out, height 0.2s linear;
    display: inline-block;
    cursor: pointer;
    color: #585858;
    width: 20%;
    height: 3em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ffffff;
    text-align: center;
    line-height: 3em;
    border: 1px solid #767676;
}
.tabs-wrapper label:last-of-type { border-bottom: none; }
.tabs-wrapper label:hover { background: #e5e5e5;/*@include transform (translate(0,-0.2em));*/ }
 @media screen and (max-width: 1600px) {
.tabs-wrapper label { width: 15%; }
}
 @media screen and (max-width: 900px) {
.tabs-wrapper label { width: 20%; }
}
 @media screen and (max-width: 600px) {
.tabs-wrapper label {
    width: 100%;
    display: block;
    border-bottom: 2px solid #4d4c47;
    border-radius: 0;
}
}
 @media screen and (max-width: 600px) {
.tabs-wrapper { margin: 0; }
}
#tab1:checked + label, #tab2:checked + label, #tab3:checked + label, #tab4:checked + label {
    background: #056f8d;
    color: #f2f2f2;
    border-top: 1px solid #0aa4a2;
    border-left: 1px solid #0aa4a2;
    border-right: 1px solid #0aa4a2;
    border-bottom: 1px solid #056f8d;
}

.tab-body ul { }
.tab-body ul li {
    width: 210px;
    margin: 10px 10px;
    height: auto;
    float: left;
}
.tab-body ul li img { }
/*
.tab-body ul li span {
    width: 204px;
    height: 37px;
    display: table;
    margin: 0 auto;
    background: #282828;
}

.tab-body ul li span .startgame {
    width: 81px;
    height: 22px;
    display: block;
    background: url(../images/startGame.png);
    text-align: center;
    line-height: 22px;
    color: #565656;
    float: left;
    margin: 7px 12px;
}
.tab-body ul li span .startgame a {
    width: 81px;
    height: 22px;
    display: block;
    color: #565656;
}
.tab-body ul li span .startgame a:hover { background: url(../images/startGameH.png); }
.tab-body ul li span .webgame {
    width: 81px;
    height: 22px;
    display: block;
    background: url(../images/Gameweb.png);
    text-align: center;
    line-height: 22px;
    color: #565656;
    float: left;
    margin: 7px 5px;
}
.tab-body ul li span .webgame a {
    width: 81px;
    height: 22px;
    display: block;
    color: #FFFFFF;
}
.tab-body ul li span .webgame a:hover { background: url(../images/GameweH.png); }
.tab-body-wrapper {
    background: #f3f2f2;
    border-top: #056f8d 5px solid;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: show;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.2s;
    -moz-animation-duration: 1.5s;
    -moz-animation-name: show;
    -moz-animation-fill-mode: forwards;
    -o-animation-delay: 0.2s;
    -o-animation-duration: 1.5s;
    -o-animation-name: show;
    -o-animation-fill-mode: forwards;
    animation-delay: 0.2s;
    animation-duration: 1.5s;
    animation-name: show;
    animation-fill-mode: forwards;
}
*/
 @media screen and (max-width: 600px) {
.tab-body-wrapper {
    border: none;
    border-radius: 0;
}
}
#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4 {
    position: relative;
    top: 0px;
    overflow: hidden;
    /* Choose one */
    -webkit-animation-delay: 0.2s;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-name: content-opacity;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.2s;
    -moz-animation-duration: 0.8s;
    -moz-animation-name: content-opacity;
    -moz-animation-fill-mode: forwards;
    -o-animation-delay: 0.2s;
    -o-animation-duration: 0.8s;
    -o-animation-name: content-opacity;
    -o-animation-fill-mode: forwards;
    animation-delay: 0.2s;
    animation-duration: 0.8s;
    animation-name: content-opacity;
    animation-fill-mode: forwards;/* @include animation(0.2s,0.8s,content-rotate-x); *//* @include animation(0.2s,0.8s,content-rotate-y); *//* @include animation(0.2s,0.8s,content-rotate-both); *//* @include animation(0.2s,0.8s,content-pop-in); *//* @include animation(0.2s,0.8s,content-pop-out); */
  /* @include animation(0.1s,1s,content-slide-bot); */
  /*@include animation(0.1s,1s,content-slide-top);*/ }
.game_more {
    position: absolute;
    width: 57px;
    height: 25px;
    background: #68cfec;
    border-radius: 15px;
    right: 0;
    top: 5px;
    text-align: center;
    line-height: 25px;
}
.game_more a {
    width: 57px;
    height: 25px;
    border-radius: 15px;
    display: block;
    color: #161616;
}
.game_more a:hover { background: #4DC0E0; }
/*new*/
#new {
    width: 900px;
    margin: 0 auto;
}
/*service_list*/
#server_list {
    width: 390px;
    float: left;
    display: block;
    overflow: hidden;
}
#server_list .tabs {
    width: 100%;
    margin: 15px auto;
}
#server_list .tabs >input { opacity: 0; }
#server_list .tabs > label {
    cursor: pointer;
    background: #FFFFFF;
    color: #4E4E4E;
    border-radius: 5px 5px 0 0;
    padding: 2% 4%;
    float: left;
    margin-right: 2px;
    font: 1em cambria;
    border: 1px solid #a2a2a2;
}
#server_list .tabs > label:hover { background: #D7D7D7; }
#server_list .tabs > input:checked + label {
    background: #f2672e;
    color: #FFFFFF;
    border: #f2672e 1px solid;
}
#server_list .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, #server_list .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), #server_list .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), #server_list .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
    opacity: 1;
    -webkit-transition: .3s;
}
#server_list .panels {
    float: left;
    clear: both;
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 0 10px 10px 10px;
    min-height: 220px;
}
#server_list .panel {
    width: 100%;
    opacity: 0;
    position: absolute;
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 0;
    box-sizing: border-box;
    border-top: 2px solid #f2662d;
    border-right: 1px solid #A2A2A2;
    border-left: 1px solid #A2A2A2;
    border-bottom: 1px solid #A2A2A2;
}
#server_list .panel h2 {
    margin: 0;
    font-family: Arial;
}
#server_list .tr_b {
    border-bottom: 1px solid #A2A2A2 !important;
    font-weight: bold;
}
#server_list .tr_b:last-child { border: none; }
#server_list .tr_b a { color: #8A8A8A; }
#server_list .server_name { color: #f2662d; }
#server_list .server_name a { color: #f2662d; }

/*new_list************************************************/
#new_list {
    width: 95%;
    float: right;
    display: block;
}
#new_list .tabs {
    width: 100%;
    margin: 15px auto;
}
#new_list .tabs >input { opacity: 0; }
#new_list .tabs > label {
    cursor: pointer;
    background: #FFFFFF;
    color: #4E4E4E;
    border-radius: 5px 5px 0 0;
    padding: 2% 4%;
    float: left;
    margin-right: 2px;
    font: 1em cambria;
    border: 1px solid #a2a2a2;
}
#new_list .tabs > label:hover { background: #D7D7D7; }
#new_list .tabs > input:checked + label {
    background: #fbb738;
    color: #000;
    border-bottom: #fbb738 1px solid;
}
#new_list .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, #new_list .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), #new_list .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), #new_list .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
    opacity: 1;
    -webkit-transition: .3s;
}
#new_list .panels {
    clear: both;
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 0 10px 10px 10px;
    min-height: 220px;
}
#new_list .panel {
    width: 100%;
    opacity: 0;
    position: absolute;
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 0;
    box-sizing: border-box;
    border-top: 2px solid #fbb738;
    border-right: 1px solid #A2A2A2;
    border-left: 1px solid #A2A2A2;
    border-bottom: 1px solid #A2A2A2;
}
#new_list .panel h2 {
    margin: 0;
    font-family: Arial;
}
#new_list .tr_b { background: #fff9e6; }
#new_list .tr_b:last-child { border: none; }
#new_list .tr_a a, #new_list .tr_b a { color: #000; }
#new_list .server_name { color: #f2662d; }
#new_list .server_name a { color: #f2662d; }
#new_list .more_btn {
    border-radius: 0 0 5px 5px;
    height: 20px;
}
#new_list .more_btn a { color: #000000; }
#new_list .tr_a td, #new_list .tr_b td { height: 33px; }
a.more_new { }
a.more_new img:hover { -webkit-filter: brightness(110%); }
.new_more {
    position: absolute;
    right: 0px;
    top: 20px;
    width: 57px;
    height: 25px;
    background: #ffcd47;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
.new_more a {
    width: 57px;
    height: 25px;
    border-radius: 15px;
    display: block;
    color: #161616;
}
.new_more a:hover { background: #ffbe0e; }
/*new game****************************/
#newgame .tab-body ul li span {
    width: 210px;
    height: 46px;
    display: block;
    margin: 0 auto;
    background: #feec88;
}
/*
#newgame .tab-body ul li span a {
    width: 210px;
    height: 40px;
    display: block;
    text-align:center;
    font-size:17px;    
    line-height:40px;
    background: #bf3939;
    color:#FFFFFF;
    border:1px solid #E46264;
    
}
#newgame .tab-body ul li span a:hover{


    }
*/
#newgame p.game_name a {
    float: left;
    color: #fff;
    font-size: 18px;
    margin: 5px 0 0 5px;
}
#newgame p.game_name a:hover { color: #94e8ff; }
#newgame .game_play {
    float: right;
    width: 70px;
    height: 25px;
    margin: 3px 5px 0 0;
    background: #0888ac;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
#newgame .game_play a {
    width: 70px;
    height: 25px;
    border-radius: 15px;
    display: block;
    color: #fff;
}
#newgame .game_play a:hover { background: #1bb9e6; }
/*allgames_web****************************/
#allgames_web {
    width: 900px;
    margin: 20px auto;
    display: block;
    clear: both;
}
#allgames_web .title { margin: 0 0 20px 0; }
#allgames_web .tab-body ul li span {
    width: 194px;
    height: 37px;
    display: table;
    margin: 0 auto;
    padding: 3px 5px;
    background: #0091b9;
}
#allgames_web p.game_name a {
    float: left;
    color: #fff;
    font-size: 18px;
    margin: 5px 0 0 3px;
}
#allgames_web p.game_name a:hover { color: #94e8ff; }
#allgames_web .game_play a {
    float: right;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
#allgames_web .game_play b.one {
    height: 25px;
    color: #FC0;
    font-size: 20px;
    font-family: Verdana, Geneva, sans-serif;
}
#allgames_web .game_play b.two {
    height: 25px;
    padding: 4px 8px;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    background: #035188;
}
#allgames_web #tab1:checked + label, #allgames_web #tab2:checked + label, #allgames_web #tab3:checked + label, #allgames_web #tab4:checked + label {
    background: #0265aa;
    color: #f2f2f2;
    border-top: 1px solid #09aad7;
    border-left: 1px solid #09aad7;
    border-right: 1px solid #09aad7;
    border-bottom: 1px solid #0265aa;
}
#allgames_web .tab-body-wrapper { border-top: #0265aa 5px solid; }
#allgames_web .tabs-wrapper label {
    transition: background 0.4s ease-in-out, height 0.2s linear;
    display: inline-block;
    cursor: pointer;
    color: #585858;
    width: 10%;
    height: 3em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ffffff;
    text-align: center;
    line-height: 3em;
    border: 1px solid #767676;
}
/*allgames_Mobile****************************/
#allgames_Mobile {
    width: 900px;
    margin: 20px auto;
    display: block;
    clear: both;
}
#allgames_Mobile .title { margin: 0 0 20px 0; }
#allgames_Mobile .tab-body ul li span {
    width: 194px;
    height: 37px;
    display: table;
    margin: 0 auto;
    padding: 3px 5px;
    background: #ff8328;
}
#allgames_Mobile p.game_name a {
    float: left;
    color: #fff;
    font-size: 18px;
    margin: 5px 0 0 3px;
}
#allgames_Mobile p.game_name a:hover { color: #fff59c; }
#allgames_Mobile .game_play a {
    float: right;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
#allgames_Mobile .game_play b.one {
    height: 25px;
    color: #FC0;
    font-size: 20px;
    font-family: Verdana, Geneva, sans-serif;
}
#allgames_Mobile .game_play b.two {
    height: 25px;
    padding: 4px 8px;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    background: #cd362b;
}
#allgames_Mobile #tab1:checked + label, #allgames_Mobile #tab2:checked + label, #allgames_Mobile #tab3:checked + label, #allgames_Mobile #tab4:checked + label {
    background: #e97008;
    color: #f2f2f2;
    border-top: 1px solid #ea9105;
    border-left: 1px solid #ea9105;
    border-right: 1px solid #ea9105;
    border-bottom: 1px solid #e97008;
}
#allgames_Mobile .tab-body-wrapper { border-top: #e97008 5px solid; }
#allgames_Mobile .tabs-wrapper label {
    transition: background 0.4s ease-in-out, height 0.2s linear;
    display: inline-block;
    cursor: pointer;
    color: #585858;
    width: 10%;
    height: 3em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ffffff;
    text-align: center;
    line-height: 3em;
    border: 1px solid #767676;
}
/*gold page****************************/
#gold {
    width: 900px;
    margin: 20px auto;
    display: block;
    clear: both;
}
#gold .title { margin: 0 0 20px 0; }
#gold .tab-body ul li span {
    position: relative;
    width: 194px;
    height: 37px;
    display: table;
    margin: 0 auto;
    padding: 3px 5px;
    background: #9ca931;
}
#gold p.game_name a {
    float: left;
    color: #fff;
    font-size: 18px;
    margin: 5px 0 0 3px;
}
#gold p.game_name a:hover { color: #f8ff3b; }
#gold .game_play a {
    float: right;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
}
#gold .game_play b.one {
    height: 25px;
    padding: 4px 8px;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    background: #708a06;
}
#gold .game_play b.two {
    height: 25px;
    padding: 4px 8px;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    background: #525a37;
}
#gold #tab1:checked + label, #gold #tab2:checked + label, #gold #tab3:checked + label, #gold #tab4:checked + label {
    background: #84b221;
    color: #f2f2f2;
    border-top: 1px solid #537606;
    border-left: 1px solid #537606;
    border-right: 1px solid #537606;
    border-bottom: 1px solid #537606;
}
#gold .tab-body-wrapper { border-top: #537606 5px solid; }
#gold .tabs-wrapper label {
    transition: background 0.1s ease-in-out, height 0.1s linear;
    display: inline-block;
    cursor: pointer;
    color: #585858;
    width: 10%;
    height: 3em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ffffff;
    text-align: center;
    line-height: 3em;
    border: 1px solid #767676;
}
#gold li .gold_qty {
    width: 20px;
    height: 20px;
    font-size: 18px;
    padding: 0px 2px 5px 2px;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background: #eb4615;
    border-radius: 15px;
    z-index: 99;
    margin: -8px -8px 0 0;
}
.gold_detail {
    width: 100%;
    border: 1px solid #7d9e35;
    border-radius: 6px;
}
.gold_detail h4 {
    font-size: 20px;
    color: #fff;
    background: #7d9e35;
    margin: 0;
    padding: 15px;
}
.gold_detail li {
    padding: 0 15px;
    margin:0;
    font-size: 16px;
    border-bottom: 1px solid #767676;
}
.gold_detail li.goldtitle {
    height: 30px;
    font-size: 18px;
    color: #7d9e35;
    font-weight: bold;
    border-bottom: 1px dotted #a7d83b;
    padding: 15px;
}
.gold_detail li.goldinfo { color: #666; padding: 10px; display:block; overflow:hidden;}
.goldinfo b{ font-weight:bold; margin: 0 0 0 8px;}
.goldinfo .txt{ float:right; width:92%; display:block; overflow:hidden;}
li.goldtitle a.gotok {
    color: #fff;
    background: #996;
}
li.goldtitle a.gotok:hover { background: #996; }
.gold_detail li.goldnumber {
    color: #788714;
    height: 30px;
    background: #dee991;
    border-bottom: 1px solid #767676;
    text-align: center;
    padding: 5px 0 0 0;
}
.gold_detail a.btn {
    float: right;
    border-radius: 15px;
    padding: 5px 10px;
    background: #F60;
    color: #000;
}
.gold_detail a.btn:hover { background: #F90; }
/****allgames start game btn effect****/
#allgames_Mobile .game_play b, #allgames_web .game_play b, #gold .game_play b {
    position: absolute;
    width: 85px;
    margin: -3px 0 0 -100px;
    -moz-transition: opacity 0.5s; /* Firefox */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
    transition: opacity 0.5s;
}
#allgames_Mobile .game_play b.one, #allgames_web .game_play b.one, #gold .game_play b.one, #memberinfo_index {
    opacity: 1;
    z-index: 1;
}
#allgames_Mobile .game_play b.one:hover, #allgames_web .game_play b.one:hover, #gold .game_play b.one:hover {
    opacity: 1;
    z-index: 1;
    display: none;
}
#allgames_Mobile .game_play b.two, #allgames_web .game_play b.two, #gold .game_play b.two {
    opacity: 0;
    z-index: 2;
}
#allgames_Mobile .game_play b.two:hover, #allgames_web .game_play b.two:hover, #gold .game_play b.two:hover { opacity: 1; }
/****allgames start game btn effect END****/



/**============================================
footer
==============================================**/
#footer {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 150px;
    display: block;    
    background: #ffeea8;    
    color: #333;
    position:relative;
}

.footer_im{ width:920px; margin:0 auto;}

.f_logo {
 position: absolute;
 margin: 18px 0 0 50px;
}

#footer p {
 position: absolute;
 margin: 55px 0 0 230px;
 border-left: 5px solid #f19c35;
 font-size: 12px;
 padding: 0 0 0 15px;
}
#footer .fb_fans{
    position: absolute;
    margin: 20px 0 0 600px;
    width:240px;
    height:110px;
    background: #FFFFFF;
    display:block;
    }7
#footer .fb_fans span{ height:30px; widows:100%; color:#FFFFFF; background:#1A519B; display:block; padding-left:10px; line-height:30px;}
#footer .fb_fans{
 position: absolute;
 margin: 20px 0 0 600px;
 width:240px;
 height:110px;
 background: #FFFFFF;
 display:block;
 }
#footer .fb_fans span{ 
height:30px; widows:100%; color:#FFFFFF; background:#1A519B; display:block; padding-left:10px; line-height:30px;
}    
#footer p a {
    color: #000;
    font-size: 14px;
    text-align: center;
    margin: 0 5px 0 5px;
}
.fb_box {
    position: absolute;
    right: 0;
    margin: 0 230px 0 0;
}
/************inner page***********************/
#gameWeb{ width:920px; margin:0 auto 20px; background: #E7E7E7; padding:10px 0;}
 #gameser{
     width:900px; height:auto; background:#FFFFFF; display:block; overflow:hidden; margin:0 auto; padding:10px;     
     }
 .tabs-width{ width:94% !important; margin-left:10px;}
 .panel-game{ width:44% !important;}
 .tab_tt_w{ width:94% !important;}

#infogame {
    width: 902px;
    margin: 0 auto 0;
    position: relative;
}
#infogame .txt {
    
    padding: 10px;
    font-size: 14px;
    background: #fdd82c;
}
#infogame .style {
    position: absolute;
    top:0;
    left: 0;
    width: 120px;
    height: 35px;
    line-height:35px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    padding: 0;
    font-size: 18px;
}

.age_level {
    position: absolute;
    top: 185px;
    left: 0;
}
    
    .game-top{ margin-top:20px !important;}
    .Paybtn{
        color:#C80003 !important; font-weight:bold; 
        
        }
    .active_none{ border-bottom: none !important;}



#infogame .fb_like {
    position: absolute;
    top: 365px;
    right: 140px;
}
#startgame_btn {
    width: 902px;
    margin: 20px auto;
}
#startgame_btn .btn01 { margin: 0 26px 0 0; }
#startgame_btn .btn03 { margin: 0 0 0 26px; }
#startgame_btn img:hover { -webkit-filter: brightness(130%); }
#server_intolist {
    width: 880px;
    margin: 20px auto;
    display: block;
    overflow: hidden;
    background: url(../images/server_intolist_title.jpg) no-repeat 0 0;
    padding: 80px 10px 10px 10px;
    border-radius: 7px;
    border: 2px solid #24ba06;
}
#server_intolist a { display: block; }
#server_intolist ul {
    display: block;
    overflow: hidden;
    border-top: none;
    margin: 0;
}
#server_intolist li {
    float: left;
    display: block;
    overflow: hidden;
    width: 270px;
    padding: 8px 10px 8px 0;
    margin: 5px;
    background: #e0ff8c;
}
#server_intolist .name {
    float: left;
    border-left: 8px solid #9be82d;
    padding: 0 0 0 5px;
    font-size: 16px;
}
#server_intolist .new, #server_intolist .fire {
    padding: 0px 6px;
    border-radius: 5px;
    color: #fff;
    margin: 0 6px;
}
#server_intolist .new {
    background: #23b6ec;
    float: right;
}
#server_intolist .fire {
    background: #bd0000;
    float: right;
}
#server_intolist .new:hover { background: #51d0ff; }
#server_intolist .fire:hover { background: #ff3030; }
#gamenews {
    width: 880px;
    margin: 20px auto;
    display: block;
    overflow: hidden;
    background: url(../images/gamenews_title.jpg) no-repeat 0 0;
    padding: 80px 10px 10px 10px;
    border-radius: 7px;
    border: 2px solid #f2672e;
}
#gamenews li {
    display: block;
    overflow: hidden;
    width: 98%;
    padding: 8px 10px 8px 0;
    margin: 5px;
    border-bottom: 1px dotted #666;
    font-size: 14px;
}
#gamenews .news, #gamenews .combo {
    float: left;
    width: 40px;
    display: block;
    padding: 3px 6px;
    border-radius: 5px;
    color: #fff;
    margin: 4px 10px 6px 4px;
    text-align: center;
}
#gamenews .news { background: #ac0000; }
#gamenews .combo { background: #05b031; }
#gamenews .txt {
    margin: 8px 0 0 0;
    float: left;
}
#gamenews .date { float: right; }
#gamenews li.unline { border: 0px solid #fff; }
/****page****/
div.page {
    width: 300px;
    height: 40px;
    margin: 15px 40%;
    padding: 10px 0;
}
.page a {
    width: 30px;
    height: 30px;
    display: block;
    overflow: hidden;
    float: left;
    background: #fa8835;
    color: #000;
    margin: 0 5px;
    text-align: center;
    padding: 5px 0 0 0;
    font-size: 14px;
    border: 1px solid #fa8835;
}
.page a:hover {
    background: #ffbd68;
    color: #000;
}
.page .prve, .page .next {
    border: 1px solid #fa8835;
    background: #fff;
}
/*******************************************

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

/************Login page***********************/
#wrap {
    width: 100%;
    height: auto;
    border-top: 8px solid #0aa4a2;
    background: url(../images/body_login.jpg) repeat-x 0 -93px;
}
.sw { background: url(../images/sw.png) no-repeat 50% 317px; }
#logout {
    width: 400px;
    margin: 5% auto;
    z-index: 99;
}
#logout .login {
    width: 100%;
    height: auto !important;
}
#logout .field { margin: 15px 0 0 15px; }
#logout .field input { width: 78%; }
#logout .remember {
    position: absolute;
    top: 150px;
    left: 13px;
}
#logout .forgot {
    position: absolute;
    top: 150px;
    right: 13px;
}
#logout .code { margin: 10px auto !important; }
#logout .code img { margin: 10px 0 0 0; }
#logout .form input[type=text] { margin-bottom: 0px; }
#logout p { margin: 20px auto; }
#logout .linkicon span {
    width: 100%;
    display: block;
    margin: 0 auto -20px auto;
    text-align: center;
    font-size: 14px;
}
.noline { border-bottom:0px !important;}


/*tab(news/service/gift..)*/
.panel{ border:1px solid #E9BD76; padding: 0 0 30px ; position:relative; width:47.68%; float:left; font-size:15px; border-radius:0 0 5px 5px; margin:0 10px;}

.panel_new{ padding: 0 0 10px ; position:relative; font-size:15px;  margin:0 10px;}

.itable  tbody tr{ border-bottom:1px dotted hsla(0,0%,89%,1.00); border-collapse: collapse; height:40px; padding:0 10px;}
.itable  tbody tr:last-child{ border-bottom:none;}
.itable  tbody  tr:nth-child(even){ /*background: hsla(0,0%,84%,.30);*/}
.itable  tbody  tr:hover{ background: #F9FFC0; transition: all .125s ease-in-out;}
.itable  tbody td a{ color:hsla(348,84%,45%,1.00);}
.itable  tbody th{ background:#fcdd77; text-align:center;}

.ptable { border:1px solid hsla(0,0%,100%,1.00);}
.ptable  tbody tr{ border-bottom:1px dotted hsla(0,0%,89%,1.00); border-collapse: collapse; height:40px; padding:0 10px; background:hsla(0,0%,100%,0.71);}
.ptable tbody th{ background:#2EB8B6; text-align:center;}
.ptable  tbody  tr:hover{background: hsla(50,72%,92%,0.92); transition: all .125s ease-in-out;}


.newDate{ color: rgba(131,131,131,1.00);}

.ttable  tbody tr{ border-bottom:1px dotted hsla(0,0%,89%,1.00); border-collapse: collapse; height:40px; padding:0 10px;}

.more_btn {    
    height: 25px;
    width:16%;
    background:rgba(249, 118, 2, 0.56);
    position:absolute;
    bottom:0; right:42%;
    border-radius: 5px 5px 0 0 ;
    text-align:center;
}
 .more_btn a { color: #000000; }
 
 .googleAd{ width: 920px; margin: 0 auto 25px;  display:block; overflow:hidden; height:230px; padding-top:30px;}
 .googleAd li{ width:200px; height:200px; display:block; overflow:hidden; background: #E7A4A5; margin:0 15px; float:left; }
 .google_title{ position:relative; width:200px; height:200px; display:block;  float:left;margin:0 15px; background: #E7A4A5; }
 .google_title_b{ position:absolute;  height:30px; width:200px;top:-30px;  z-index:999;  font-size:15px; background: #E8E8E8; padding-left:5px; line-height:30px;}
 

#main{ width:920px; height:auto; display:block; overflow:hidden; margin:0 auto;}
#leftMenu{ width:230px; margin:0 15px; background: #fee476; padding:0;  display:block; overflow: hidden; float:left;}
#leftMenu h1{ font-size:21px; display:block;  overflow: hidden; background: url(../images/menuTitle.jpg); padding:0  0  0  10px ; margin:0 0 10px 0; color:#FFFFFF; border-bottom:1px solid #FFFFFF; line-height:55px;  }
#leftMenu h1 i{  width:30px; height:30px;/* border-radius:50%; border:1px solid #FFFFFF;*/ text-align:center; line-height:30px;}
#leftMenu li{ font-size:18px; line-height:45px; border-bottom:1px solid #FFFFFF;}
#leftMenu li:last-child{ border-bottom:none;}
#leftMenu li a{ color: #D4662D; padding-left:20px; height:45px; display:block; overflow:hidden;}
#leftMenu li a i{ display:none;}
#leftMenu li a:hover i { float:right; line-height:45px; margin-right:10px; display:block;}
#leftMenu li a:hover{ background: #F9F8CB;}
#leftMenu li .lm_active i{float:right; line-height:45px; margin-right:10px; display:block;}
#leftMenu li .lm_active {background: #F9F8CB;}

#rightArea{ width:650px; height:auto; /*border:1px solid #A48788;*/ float:left; margin-left:10px; margin-bottom:20px;}
.rm_top{ margin-top:0 !important;}

.paypay{ border-bottom:none !important;}
.paypay i{ margin-right:2px;}
 ul.paypay{ padding:0!important; margin-bottom:8px !important;}
.paypay li{ background: #F8F8E8; /* border:1px solid #9E0002 !important;*/ border-radius:5px 5px 0  0 ; height:40px !important;  margin-right:1px; }
.paypay .active{ background: #D4163A;}
.paypay li  a{ color:#9E0002  !important; padding: 0 20px!important; height:40px; line-height:40px; }
.paypay .active  a { color:#FFFFFF !important;}

.paypay_main{ border-top:3px solid #FEE476; width:650px !important; background: #F3F3F3; padding:15px !important; min-height:300px;}
.paypay_main .ex_txt{ margin:15px 0; font-size:15px;}
.paypay_main .ex_txt input[type='text']{ border: 3px solid #63c0ca; width:50%; height:35px; padding-left:10px; outline:none;}
.paypay_main .ex_txt i{ color:#CB0508; font-size:13px; font-weight:bold; font-style:normal;}
.pay_title{ background:#FEE476; height:38px; border-radius:5px 5px 0 0; line-height:38px;color:#970406; font-size:17px; padding-left:15px;}
.pay_title i{ margin-right:5px;}
.paypay_main h2{ font-size:17px; display:block; overflow:hidden; border-radius:30px; line-height:35px;  border:1px solid   #E9CB4F; background:hsla(0,0%,100%,0.5); color:#970406; }
.paypay_main h2 b{display: block; overflow:hidden; width:100px;  padding:0 5px 0 20px; border-radius:30px  0  0 30px; color: #970406;float:left;  background: #F5EE8D; margin-right:13px; border-right:1px solid  #E9CB4F;}
.payinfo{  font-size:16px;}
.payinfo input[type=radio]{ width:15px; height:15px; margin-left:15px; margin-bottom:20px; }
.pp_style{ display:none; overflow:hidden; clear:both; width:100%;}
.pp_style li{ float:left; width:82px; background:#F5F1BE; line-height:35px; margin:0 10px 10px 10px; border-radius:5px; text-align:center; border:1px solid #F0E599;}
.pp_style li i{ margin-right:5px;}
.pp_style li a{ color:#CD092E; width:82px; height:35px; display:block; overflow:hidden;  border-radius:5px;}
.pp_style li a:hover{ background: #F0E446;}
.pp_style li a:focus{ background: #F0E446;}

.sentBtn{ width:120px; height:35px; display:block; overflow:hidden; margin:10px auto; background: #CD092E; color: #FFFDE0; text-align:center; line-height:35px; border-radius:3px;}
.sentBtn a{ width:120px; height:35px; display:block; overflow:hidden; border-radius:3px; color: #FFFDE0;}
.sentBtn a:hover{ background:#AF0726; color: #FFFDE0;}

.pageBtn{ width:auto; margin:10px auto; display:table; overflow:hidden; }
.pageBtn li {float:left; display:block; overflow:hidden;}
.pageBtn li a{ padding:0 8px; border:1px solid #9F9F9F; display:block; overflow:hidden; margin:0 8px; color:#5E5E5E;  }
.pageBtn li a:hover{ background:#FFC870;  border:1px solid  #FC9708; color:#FFFFFF;}
.pageBtn li a:focus{ background:#FFC870;  border:1px solid  #FC9708; color:#FFFFFF;}

.service_table{ border:1px solid #C7C7C7; border-collapse:collapse; padding:10px; background:hsla(0,0%,100%,0.6);}
.service_table tr, .service_table tr td{border:1px solid #FFFFFF; padding:15px 0 15px 10px; }
.service_table .t_td{ background: #BEDEE8; padding-right:10px; text-align:right;}
.service_table select{ height:35px;}
.r_tt{ color:#C90003;}
.member input[type=radio]{ width:15px; height:15px;}
.member_td{ background: #f7e7c8; padding-right:10px; text-align:right; min-width:100px;}
.service_table h3{ font-size:16px; margin:0; padding:0; text-align:center; }
.service_table .td_h3{border:3px solid #f7e7c8;}
.service_table h3 b{ color:#CC1F22;}

.gamebar_layout{ width:100%; height:50px; background:#fee476; }
.gamebar{ width:1200px; margin:0 auto; }
.gamebar li{ float:left; line-height:50px; font-size:15px;}
.gamebar li a{ color:#9B0002; height:20px;}
.gamebar li .img_link{height:21px; width:60px; margin-top:10px; display:block; float:left; overflow:hidden; background:url(../images/flash.gif);}

.gift_table {
    border: 1px solid #F7E392;
    border-collapse: collapse;
    padding: 10px;
    background: hsla(57,100%,92%,0.80);
    
}
.gift_table tr,.gift_table td{ border: 1px solid #F7E392; padding:8px;}
.gift_table tr:nth-child(even){ background: hsla(44,100%,89%,0.85);}
.gift_btn a{ width:181px; height:50px; display:block; overflow: hidden; background:url(../images/gift.png);}
.gift_btn a:hover{width:181px; height:50px; display:block; background:url(../images/gift_hover.png);}
.gift_btn{width:181px; height:50px; display:block;  background:url(../images/gift_non.png)}
.gift_title{ color: rgba(3,22,134,1.00); font-size:18px; font-weight:bold;}

.fb_inn{ padding:5px 0 0 5px; display:block;}