html, body, .wrap_main {font-family: "Microsoft JhengHei";}
body{background: #fff url(../images/page_bg.jpg) center -10px no-repeat; width: 100%;background-attachment: fixed;}

.chu_tit, .logo,.link_FB,.link_Google,.nav_main a{height:0;overflow:hidden;text-indent:100%;white-space:nowrap;display:block}
.lg_b input,.chu_tit,.login_bg .logo,.pre_ico,.nav_main a{background-image:url(../images/icon.png);background-repeat:no-repeat}
.f_l{float: left;}
.f_r{float: right;}
.clear{clear: both;}
input{outline: none}

/*
index
*/
.wrap_main,.pay_main{width: 960px;margin: 0 auto;min-height: 382px;}
.login{background: #fff url(../images/login_bg.png);}
body.login_bg{background: #fff url(../images/bg.jpg) center 0px no-repeat;background-attachment: fixed;}

.login_bg .header{height: 455px;}
.login_bg .logo{margin-left: 460px;margin-top: 82px;padding-top: 300px;width: 590px;background-position: -10px -570px;}
.login_top,.login_other{width: 620px; margin: 0 auto}
.login_top{padding-bottom: 20px;position: relative;}
.login_ipt{float: left;}
.title_b{font-size: 25px;color: #000;font-weight: normal;height: 70px;line-height: 70px;}
.lg_b{width: 425px;height: 55px;border: 1px solid #adadad;border-radius: 10px;background: #fff;margin-bottom: 13px;position: relative;}
.lg_b input{border:0;height: 40px;line-height: 40px;width: 95%;margin: 7px;font-size: 17px;padding-left: 57px;}
.num_th_ip{background-position: -8px -13px;}
.num_th_pw{background-position: -8px -85px;}
.num_th_yz{background-position: -8px -165px;}
.yzm_b{position: relative;}
.login_submit{float: right;}
.btn_submit{display: block;width: 170px;height: 123px;line-height: 124px;font-size: 26px;text-align: center;border-radius: 10px;background: #caa068;color: #fff;}
.btn_submit:hover{background: #9e743c;}
.yzm_jp{ display: block; position: absolute; right: -197px; top: 0; cursor: pointer; }
.login_tips{float: left;width: 68%;font-size: 16px;margin-top: 0;}
.col_blue{color: #0083bf}
.col_org{color: #f04900}
.login_bottom{background: #394A58;padding: 25px 0 30px;}
.login_other{background: #fff; padding: 10px 20px;}
.login_other ul{overflow: hidden; }
.login_other ul li{float: left;height: 60px;line-height: 60px;}
.login_other ul li span{font-size: 22px; margin: 0 20px; }
.login_other ul li a{margin: 5px 10px;display: block;width: 50px;height: 50px;}
.login_other ul li a:hover{opacity: .9;}
.link_FB{background: url(../images/fb.jpg) center no-repeat;}
.link_Google{background: url(../images/google.jpg) center no-repeat;}

.login_wrong{color: red;/* font-size: 14px; */position: absolute;left: 307px;top: 30px;}

.list-tips{width: 600px;margin: 0 auto;padding-top: 20px;}
.list-tips .list-title{font-size: 14px;color:#3c3c3c;margin: 0 0 5px;}
.point-list{}
.point-list ul{}
.point-list ul li{height: 35px;line-height: 35px;background: #f7f7f7;margin-bottom: 10px;padding: 0 10px;border-bottom: 2px solid #d4d4d4;}


/*
nav
*/
.nav{  display: block;}
.nav .nav_main{ width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden;margin-top: 3px;}
.nav .nav_main ul{overflow: hidden; float: right; overflow: hidden;}
.nav .nav_main ul li{float: left; padding-right: 18px; }
.nav .nav_main ul li a{  padding-top: 60px; width: 174px;}
.nav .nav_main ul li a.game_inf{background-position: -24px -860px;}
.nav .nav_main ul li a.game_of{background-position: -205px -860px;width: 306px;}
.nav .nav_main ul li a.game_down{display: none;background-position: -406px -860px;}
.nav .nav_main ul li a.game_fb{background-position: -599px -860px;}
.nav .nav_main ul li a.game_inf:hover{background-position: -24px -928px;}
.nav .nav_main ul li a.game_of:hover{background-position: -205px -928px;}
.nav .nav_main ul li a.game_down:hover{background-position: -406px -928px;}
.nav .nav_main ul li a.game_fb:hover{background-position: -599px -928px;}
.nav .nav_main ul li:last-child{background: none}

/*
儲值
*/
.header{width: 100%;max-width: 960px;height: 350px;margin: 0 auto;overflow: hidden;position: relative;}
.logo{padding-top: 300px;width: 480px;margin-left: 480px;margin-top: 20px;background: url(../images/logo.png) no-repeat center;overflow: hidden;}
.top_inf{position: absolute;left: 0px;padding: 7px 10px;bottom: 5px;color: #2CA2E6;background-color: rgb(255, 255, 255);}
.top_inf b{margin-left: 10px;}
.top_inf a{margin: 0 10px; color: red;}
.top_inf a:hover{ color: #712808;}
.query_a{position: absolute;right: 0px;bottom: 10px;padding: 7px 10px;text-align: center;color: #1e1e1e;background: #fff;border: 1px solid #ababab;border-radius: 4px;font-weight: bold;}
.query_a:hover{background: #60C4FD;color: #fff; border-color: #40B0F1;}

.main_tent{padding: 20px;background: #fff;min-height: 440px;}
.chu_tit{padding-top: 70px;background-position: -12px -256px;}

.chu_box{background: #f7f7f7;min-height: 100px;margin-top: 20px;}
.line_title{background: #d2d2d2;height: 49px;line-height: 48px;color: #fff;font-size: 20px;}
.line_title span{padding: 0 78px 0 40px;display: block;background:#000 url(../images/san.jpg) right top no-repeat;float: left;font-weight: bold;}
.choice_box,.buy_inf{overflow: hidden;padding: 20px 0 20px;/* min-height: 260px; */}
.choice_box a{float: left;display: block;margin: 0 2% 15px;height: 45px;line-height: 45px;width: 46%;color: #817f7f;background: #fff;border-radius: 4px;font-size: 14px;text-align: center;border: 1px solid #c6c6c6;font-weight: bold;}
.choice_box a:hover{border-color: #58B8F0; background: #78CDFF; color: #fff;}
.choice_box a.selected{border-color: #3693CA; background: #58b8f0; color: #fff;}
.mem_inf{font-size: 16px;color: #717171;padding: 0px 30px 20px;}
.mem_inf b{margin: 0 8px; color: #fc4444}
.inf_sec{margin-top: 45px;padding-bottom: 0px;}

.pay_main{margin-top:15px; background: #dbdbdb; padding: 30px;}
.mem_inf_main{font-size: 24px;}
.mem_inf_main b{}
.pay_btn{text-align: center;padding: 20px 10px 0px;}
.pay_btn_a{display: inline-block;text-align: center;border-radius: 7px;color: #fff;margin: 0 15px;padding: 0 15px;font-weight: bold;min-width: 130px;height: 45px;line-height: 45px;font-size: 17px;}
.submit_a{background: #ff8a00;}
.submit_a:hover{background: #F57221 }
.pre_a{background: #d3d3d3;}
.pre_a:hover,.cancel_a:hover{background: #838383 }
.pre_ico{display: inline-block;width: 13px;height: 28px;margin-right: 5px;background-position: right -597px;vertical-align: -8px;}
.cancel_a{background: #d3d3d3; width: 150px;}
.record_a{background: #85bf6e;}
.record_a:hover{background: #66a94c;}

.mg_0{margin-top: 0;}
.box_s a{width: 410px;}

.buy_inf{font-size: 16px;}
.buy_inf ul{overflow: hidden;}
.buy_inf ul li{padding: 5px 30px; *padding: 12px 0;}
.buy_inf b{display: inline-block;width: 36%;color: #6B6B6B;font-weight: normal;text-align: right;padding-right: 13px;}
.buy_inf span{display: inline-block;height: 45px;line-height: 45px;min-width: 40%;padding: 0 10px;color: #2BA5EA;background: #fff;border-radius: 4px;text-align: center;border: 1px solid #5bb5e8;}

#input_ecard_pwd{margin-top: 10px}
.help_box a{color: #4892d4;}

.value_result{width: 100%;height: 115px;background: #fff;text-align: center;font-size: 24px;color: #444;}
.value_result span{margin-left: 20px; }
.icon_suc{display: inline-block;width: 113px;height: 115px;vertical-align: -40px;background: url(../images/suc.jpg) center no-repeat;}
.icon_fal{display: inline-block; width: 113px; height: 115px; vertical-align: -35px; background: url(../images/fail.jpg) center no-repeat;}
.value_result_tips{background: #fff;text-align: center;font-size: 19px;line-height: 30px;padding-bottom: 17px;color: #6b6b6b;}
.help_box{font-size: 17px;padding: 20px;line-height: 30px;}
.help_box span{margin-right:40px;}

.choiced{padding-top: 15px;}

.password_f{margin: 0 auto;width: 600px;padding: 20px 0;}
.password_f_xx{font-size: 18px;color:#3c3c3c;font-weight: bold;margin: 0 0 5px;}
.password_f_ts{color:#ff0000;font-size: 14px;font-weight: bold;padding-top: 10px;}
.input_username,.input_pwd{width:600px;height: 50px;border: 1px solid #ccc;text-align:center;color: #000000;background: #ffffff;border-radius: 5px;font-size: 20px;}
.input_pwd{margin-top: 10px}
.login_bg .login{width: 920px;}

/*
購買記錄
*/
.component{margin-top:10px}
.component .filler{color:#d3d3d3;font-family:Blokk,Arial,sans-serif}
table{margin-bottom:3em;width:100%;border-collapse:collapse;background:#fff;font-size: 14px;}
td,th{text-align:center}
td{padding: 10px 5px;color:#797878;}
th{padding:10px 5px;border-right:1px solid #fff;background-color:#2995d3;color:#fff;white-space:nowrap;font-weight:700}
tbody th{background-color:#2ea879}
tbody tr:nth-child(2n-1){background-color:#f5f5f5;transition:all .125s ease-in-out}
tbody tr:hover{background-color:rgba(156,213,247,.3)}
tbody tr:hover td{color:#444}
.sticky-wrap{position:relative;overflow-x:auto;overflow-y:hidden;margin:5px 0;width:100%}
.sticky-wrap .sticky-col,.sticky-wrap .sticky-intersect,.sticky-wrap .sticky-thead{position:absolute;top:0;left:0;z-index:50;width:auto;opacity:0;transition:all .125s ease-in-out}
.sticky-wrap .sticky-thead{z-index:100;width:100%;box-shadow:0 .25em .1em -.1em rgba(0,0,0,.125)}
.sticky-wrap .sticky-intersect{z-index:150;opacity:1}
.sticky-wrap .sticky-intersect th{background-color:#666;color:#eee}
.sticky-wrap td,.sticky-wrap th{box-sizing:border-box}
td.user-name{text-transform:capitalize}
.sticky-wrap.overflow-y{overflow-y:auto;}

.more_box{padding: 50px; text-align: center;}
.more_a,.next_a{background: #8e8e8e; }
.more_a .pre_ico,.next_a .pre_ico{margin-right: 0;margin-left: 10px;background-position: right -676px;transition:transform .5s;}
.more_a:hover,.next_a:hover{background: #636363;}
.more_a:hover .pre_ico{transform: rotate(90deg);
-ms-transform: rotate(90deg);   /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg);    /* Opera */
-moz-transform: rotate(90deg);}

a{transition:background-color .5s, color .5s, border-color .5s;}

.buy_num{border-bottom: 1px solid #ccc;margin: 0px 34px;padding-bottom: 45px; font-size: 24px; overflow: hidden;padding-left: 265px;}
.buy_num_r span{float: left;border: 1px solid #A9A9A9; background: #fff; color: #8C8C8C; border-radius: 10px;width: 45px;height: 45px;text-align: center;line-height: 40px;font-size: 30px; cursor: pointer;}
.buy_num_r span:hover{border-color: #44ABE5; background: #2995D3; color: #fff;}
.buy_num_r input.num_input{float: left; border: 1px solid #A9A9A9; background: #fff; width: 70px;height: 45px;line-height: 40px; text-align: center;margin: 0 13px;}


.footer{background: #100f0e;margin-top: 30px;}
.footer_main{width:100%;max-width: 920px;line-height: 101px;margin:0 auto;overflow: hidden;}
.f_l{float:left;display:inline-block}
.comp_logo{height: 70px;background: url(../images/x_logo.png) no-repeat center;width: 480px;}
.rank{height: 78px;width: 213px;background: url(../images/rank.png) center no-repeat;}
.f_r{float:right;display:inline-block}

@media screen and (max-width: 1600px){
  body.login_bg,body{background-size: cover}
  .login_bg .header{height: 290px;}
  .login_bg .logo{margin-top: 48px;background-size: 801px;background-position: 60px -457px;width: 485px;padding-top: 215px;}
  .logo{width: 410px;background-size: 100%;}
  .header{height: 300px}
}

@media screen and (max-width:1000px){
  body{background-image: none;}
  body.login_bg{background: #fff url(../images/mob_bg.jpg) center top no-repeat; }
  .login_bg .logo{margin-left: 85px;margin-top: 219px;padding-top: 500px;width: 569px;background: url(../images/logo.png) no-repeat center top;background-size: 100%;}
  .logo{padding-top: 300px;width: 440px;margin-top: 83px;background: url(../images/logo.png) no-repeat center top;margin-left: 301px;background-size: 100%;}
  .wrap_main,.login_bg .login{width: auto;}
  .login{margin-top: 0px;}
  .header{height:425px; background: url(../images/banner.jpg) center top no-repeat;}
  .login_bg .header{background: none;height: 580px;}
  .main_tent{padding: 20px 10px;min-height: 615px;}
  .mem_inf,.top_inf{font-size: 20px;}
  .chu_tit{ padding-top: 71px; background-position: -9px -431px; background-size: 919px;}
  .box_s a{width: 310px;}
  .choice_box a{height: 65px;line-height: 65px;font-size: 22px;width: 46%;}
  .mem_inf span{display: block;}
  .line_title{height: 69px;line-height: 70px;font-size: 27px;overflow: hidden;}
  .line_title span{padding: 0 90px 0 40px;background: #000;position: relative;}
  .top_inf a{background: #fff; border-radius: 10px}
  .pay_btn_a,.buy_inf span,.buy_inf b{height: 70px;line-height: 70px;font-size: 22px;min-width: 220px;}
  .buy_inf ul li{float: none; }
  .buy_inf b{width: 200px;}
  .buy_inf span{width: 420px;}
  .value_result,.login_wrong{font-size: 25px;}
  .record_a,.help_box,.query_a,.login_tips,.login_other ul li span{font-size: 20px;}
  .value_result_tips{font-size: 28px; line-height: 35px;}
  .help_box span{display: inline-block;}
  table{font-size: 27px;}
  .query_a{padding: 10px;}
  .footer_main .f_r{margin-right: 10px;}
  .login_ipt,.login_submit,.login_tips{float: none;}
  .lg_b{width: 620px; height: 80px; border-radius: 13px;}
  .lg_b input{height: 50px;line-height: 50px;margin: 16px;font-size: 24px;}
  .yzm_jp{right: 16px;top: 13px;}
  .num_th_ip{background-position: -8px -6px;}
  .num_th_pw{background-position: -8px -80px;}
  .num_th_yz{background-position: -8px -160px;}
  .btn_submit{width: 620px; height: 80px; line-height: 80px; border-radius: 13px;}
  .login_tips{margin-top: 15px; width: 100%;}
  .login_wrong{top: 24px;left: auto;right: 0;}
  .title_b{font-size: 30px;}
  .password_f{margin-left: 65px;}
  .password_f_xx{font-size: 26px;}
  .input_username{height: 75px;line-height: 75px;font-size: 26px;}
  .box_ss a{width: 200px; margin:0 15px 25px;}
  .buy_num{padding-left: 135px; font-size: 30px}
  .buy_num_r input.num_input{width: 100px; height: 50px; line-height: 50px;}
  .buy_num_r span{width: 50px;height: 50px;line-height: 50px;}
  .nav .nav_main ul li{padding-right: 2px;}
  .line_title span:after{content: " ";position: absolute;width: 0;height: 0;border-bottom: 74px solid #d2d2d2;border-left: 70px solid transparent;right: -4px;top: -4px;}
  .password_f_ts,.list-tips .list-title{font-size: 20px}
  .point-list ul li{height: 45px;line-height: 45px;font-size: 18px;}
  .pay_btn{padding-top: 30px}
}