/*
┌───────── Txwl ─────────────────────┐
│ 网站设计制作:≮天下-网络≯ QQ:895232299  唯一网址：WWW.10jh.COM  │
│        六年网页设计制作经验、高端建站美工团队为你服务            │
└───────────────────────────── .Com ─┘
*/
html,body {height: 100%}
em {font-style:normal}
a:hover {text-decoration: underline;}
body {font-size:14px;line-height:1.5;background-color:#f0f0f0;font-family:\5FAE\8F6F\96C5\9ED1, Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif}

/* 清除浮动 */
.clearfix:after, 
.clearfix:before,
.g-parse:before,
.g-parse:after,
.g-inner:before,
.g-inner:after { content: ''; clear: both; display: table; }

.tc-warn{color:#f30}
.tc-green{color:#390}
.tc-orange{color:#f60}
.tc-blue{color:#0f8ff2}
.tc-sec{color:#666}
.tc-weak{color:#999}
.tl { text-align: left }
.tc { text-align: center }
.tr { text-align: right }
.fl { float: left; }
.fr { float: right; }
.btn { display: inline-block; border: none; text-align: center; white-space: nowrap; cursor: pointer; }
.btn:hover {text-decoration: none;}

.app-icon-qq-full {color:#44bce9}
.app-icon-wechat-full{color:#51c332}
.app-icon-baidu{color:#1960ad}
.app-icon-sina {color:#df4d69}
.app-icon-alipay {color:#12a5e9}
.app-icon-wxpay {color:#51c332}
.app-icon-bankcard {color:#ab6db9}

[type=text],[type=password],[type=button],button { box-sizing: border-box; }
[data-event],[user-submit] { cursor: pointer; }


/* Layui重定义 */
.layui-layer-hui,.layui-layer-tips .layui-layer-content{background:#931a1d!important}
.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT{border-right-color:#931a1d!important}

/* 布局 */
.g-inner { margin: auto; width: 1400px; }
.g-wrapper { position: relative; padding-bottom:150px; min-height: 100%; background: no-repeat 50% 0; box-sizing: border-box; }
.g-header { height: 500px }
.g-parse>.side { float:left; width:320px;}
.g-parse>.main { float:right; width:1070px; }
.g-footer { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 20px; height: 80px; font-size: 13px; text-align:center; z-index: 3 }
.g-footer p { margin-bottom: 5px }

/* 顶栏 */
.g-topbar { position: relative; z-index: 2; height: 40px; background-color: #fff; color:#333; line-height: 40px; }
.g-topbar a, .g-topbar a:hover {color:#333}
.g-topbar .g-inner { width: 1100px; }
.g-topbar + .g-wrapper { margin-top: -40px; padding-top: 40px; background-position: 50% 40px; }
.m-top-logo img { margin:0 25px 0 0;max-height:36px;vertical-align:top;}
.m-top-login { float: left; margin-right: 20px; }
.m-top-games { float: left; }
.m-isolation > *:not(:last-child):after { display: inline-block;margin: 0 .6em;width:1px;height: .8em;background:#ccc;vertical-align: baseline;content:"";transform: skewX(-20deg);opacity: .5;}

/* 公用块 */
.m-block { margin-bottom: 10px; padding: 10px; background: #fff; box-sizing: border-box; }
.m-block-title { margin-bottom: 10px; padding: 0 10px; height: 30px; line-height: 30px; }
.m-block-title em { font-size: 18px; font-style: normal; }
.m-block-title sub {display: none;}
.m-block-title .aside {float: right;}
.m-block-main { padding: 0 10px; }
.side .m-block-title { text-align: center; }

.m-carousel { position: relative; overflow: hidden; }
.m-carousel .carousel { width: 100%; height: 100%; }
.m-carousel .carousel>* { position: absolute; left: 0;top: 0;right: 0; bottom: 0; }

.m-slider .viewport{overflow:hidden}
.m-slider .scrollrow{position:relative}
.m-slider[direction=left] .scrollrow {white-space:nowrap}

/* 导航菜单 */
.m-navigate { position: absolute; right: 0; left: 0; height: 80px; background: rgba(0,0,0,.5); text-align: center }
.m-navigate a { float: left; padding-top: 18px; width: 150px; font-size: 18px; color: #ffd890}
.m-navigate a i {display: block;margin-top: 0.2em;font-size: 10px;font-style: normal;color: #fff;opacity: 0.5;}
.m-navigate a:hover {background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0));color:#fc0;text-decoration: none; }
.m-navigate .game-logo { float: left; width: 300px; min-height: 80px; background: no-repeat 50% 0; }
.m-navigate .game-logo img {/* margin-left: -15px;*/ }
/* 开始游戏 */
.m-txt-adult { display: none; }
.btn-start { position: relative; overflow: hidden;  display: block; height: 150px; line-height: 150px; background: url(../images/sp_start_0.png) no-repeat; text-indent: -9999em; }
.btn-start:hover { background-position: 0 -150px; }
.btn-start:before { position: absolute; left: -110px; top: 0; width: 70px; height: 100%; background: rgba(255,255,255,.15); transform: skewX(-30deg); content: '';  }
.btn-start:hover:before { transform: skewX(-30deg) translateX(480px); transition: 1s ease; }
.btn-start.s1 { background-image: url(../images/sp_start_1.png) }
.btn-start.s2 { background-image: url(../images/sp_start_2.png) }
.btn-start.s3 { background-image: url(../images/sp_start_3.png) }
/* 登录 */
.m-block-side { height: 500px; }
.m-block-user { position: relative; padding:60px 20px 0; height: 140px; border-bottom: 1px solid; font-size: 13px; }
.m-block-user .m-block-title {display: none;}
.m-block-user .body { position: relative; height: 123px; }
.m-block-user .form-input { position: relative; margin-bottom: 5px; padding-left: 26px; width: 180px; height: 28px; box-sizing: border-box; }
.m-block-user .form-input i { position: absolute; left: 0; top: 0; width: 28px; line-height: 28px; font-size: 16px; text-align: center; color: #999  }
.m-block-user .form-input input { width: 100%; padding: 0 5px; height: 28px; border: none; background: none; line-height: 28px; }
.m-block-user .btn-submit { position: absolute; right: 0; top: 0; width: 75px; height: 61px; text-indent: -9999em;}
.m-block-user .form-text { height: 30px; line-height: 30px; }
.m-block-user .form-input+.form-text {margin-top: 10px;}
.m-block-user .third-login>* {float: left;}
.m-block-user .third-login>a { margin-left: 4px; width: 30px; height: 30px; background: url(../images/icon_thirdlogin.png) no-repeat;cursor: pointer; }
.m-block-user .third-login>a.qq:hover {background-position: -30px 0;}
.m-block-user .third-login>a.wx {background-position: 0 -30px;}
.m-block-user .third-login>a.wx:hover {background-position: -30px -30px;}

.m-block-user .logined p { margin-bottom: 4px; }
.m-block-user .logined dl { margin-top: 10px; padding-top: 10px; border-top: 1px dotted #999; }
.m-block-user .logined dd a { display: block; line-height: 30px; }

.m-block-user .btns-bar { position: absolute; top: -10px;left: -10px; right: -10px; font-size: 0; }
.m-block-user .btns-bar a{position:relative;padding-left:70px;width:50%;height:50px;line-height:49px;font-size:16px;border:1px solid;border-top:0;box-sizing:border-box;text-align:left}
.m-block-user .btns-bar a:before {position: absolute;left:25px;top:11px;width:28px;height:28px;background: #000;content: '';}

/* 服务器列表 */
.m-block-server  {padding: 10px 10px 0;}
.m-block-server .m-block-title { margin: 0 -10px 15px; }
.m-block-server .quick{margin-bottom: 10px;padding:0 10px;height:24px;line-height:24px;font-size:13px}
.m-block-server .quick>*{float:left}
.m-block-server .quick input{margin:0 .5em;width:80px;height:24px;line-height:24px;text-align:center;border:none}
.m-block-server .quick button{float:right;width:72px;height:24px;font-size: 12px;}
.m-block-server .list a{position:relative;display:block;height:30px;line-height:30px;border-bottom:1px dotted}
.m-block-server .list a > *{display:inline-block;text-align:center}
.m-block-server .list a em{margin-left:15px;width:100px;font-style:normal}
.m-block-server .list a span,.m-block-server .list a i{width:72px}
.m-block-server .list a:before{position:absolute;top:50%;left:10px;margin-top:-2px;width:4px;height:4px;background:#ccc;content:''}
.m-block-server .list a p{display:none;position:absolute;right:10px;top:50%;padding:6px 10px;background:#000;color:#fff;font-size:12px;line-height:1.5;text-align:left;border-radius:4px;transform:translate(100%,-50%);z-index:10}
.m-block-server .list a p:before{position:absolute;left:-9px;top:50%;margin-top:-5px;border:5px solid transparent;border-right-color:#000;content:''}
.m-block-server .list a:hover p{display:block}
.m-block-server .list a.today span { color: #0f3 }
.m-block-server .btn-more{display:block;margin:15px auto 0;width:200px;height:36px;line-height:36px;text-indent: -9999em;}

/* 轮播图 */
.m-block-kv { padding: 0; height: 320px; }
.m-block-kv img { width: 100%; height: 100%; }
.m-block-kv .carousel a {display: none; -webkit-transition-duration:.3s; transition-duration:.3s; }
.m-block-kv .carousel a.m-this,
.m-block-kv .carousel a.m-out-prev,
.m-block-kv .carousel a.m-out-next{display:block}
.m-block-kv .carousel a.m-this {transform: translateX(0); }
.m-block-kv .carousel a.m-out-prev{transform: translateX(-100%); }
.m-block-kv .carousel a.m-out-next{transform: translateX(100%); }
.m-block-kv .carousel a.m-out-prev.m-out-right,
.m-block-kv .carousel a.m-out-next.m-out-left{transform: translateX(0);}
.m-block-kv .carousel a.m-this.m-out-left{transform: translateX(-100%);}
.m-block-kv .carousel a.m-this.m-out-right{transform: translateX(100%);}

.m-block-kv .spot { position: absolute; right: 15px; bottom: 15px; z-index: 5; }
.m-block-kv .spot li { display: inline-block; margin: 0 3px; width: 14px; height: 14px; background: #fff; border-radius: 50px; cursor: pointer; transition: .3s ease; }
.m-block-kv .spot li.m-this { width: 24px; background-color: #f10; }
/* 新闻 */
.m-art-list li { position:relative; overflow: hidden; padding: .5em 0; border-bottom: 1px dotted #999; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; }
.m-art-list sub { float:right; font-size: 14px;}
.m-art-list .top-pay {color:#f10;font-weight:bold}
.m-art-list .top-pay:hover {color:#f00!important}

.m-block-news { float: left; position: relative; width: 660px; height: 320px; }
.m-block-news .tab-title { border-bottom: 1px solid; font-size: 0; }
.m-block-news .tab-title li { position: relative; display: inline-block; margin: 0 20px -1px; width: 90px; padding-top: 3px; border-bottom: 3px solid transparent; line-height: 44px; font-size: 18px; text-align: center; cursor: pointer;}
.m-block-news .tab-title .m-this { border-bottom-color: #000; font-weight: bold; }
.m-block-news .m-art-list { margin: 0 20px; }
.m-block-news .m-art-list li { padding: 6px 0; }
.m-block-news .a-top { margin: 10px 0; height: 50px; line-height: 50px; font-size: 20px; font-weight: bold; text-align: center; }
.m-block-news .more { position: absolute; right: 30px; top: 26px; width: 18px; height: 18px; line-height: 14px; border: 1px solid #999; color: #999; text-align: center; font-size: 24px; }
.m-block-body .empty,
.m-block-news .empty{padding:30px 0;text-align:center}

/* 功能连接 */
.m-fast { float: right; padding: 0; width: 200px; }
.m-fast a { position: relative; display: block; padding-left: 80px; height: 80px; border-bottom: 1px solid; line-height: 80px; text-align: left; font-size: 16px; box-sizing: border-box; }
.m-fast a:before {position: absolute; left: 25px; top: 20px; width: 40px; height: 40px; content: ''}
.m-fast a:last-child { border-bottom: none }
/* 截图 */
.m-screenshots ul { height: 320px }
.m-screenshots li { position: relative; margin-bottom: 10px; height: 150px; }
.m-screenshots li img { width: 100%; height: 100%; }
.m-screenshots li p { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 10px; line-height: 30px; text-align: center; background: rgba(0,0,0,.4);color:#fff }

/* 职业介绍 */
.m-block-career { padding: 0; height: 380px; overflow: visible; }
.m-block-career .info { position: absolute; left: 30px; top: 32%; width: 340px; font-size: 14px; z-index: 1; }
.m-block-career .info>strong { font-size: 20px; }
.m-block-career .info>p,
.m-block-career .info>div { margin-top: 15px; }
.m-block-career .info>div p {padding-top:6px}
.m-block-career .info>div p>span {float:left;margin-right:5px}
.m-block-career .role { position: absolute; left: 0; bottom: 0;}
.m-block-career .info,
.m-block-career .role {opacity: 0; -webkit-transition-duration:.5s; transition-duration:.5s; transform: translateX(50px); }
.m-block-career .info { transform: translateX(-50px);}
.m-block-career .m-this .info,
.m-block-career .m-this .role { opacity: 1; transform: translateX(0); }
.m-block-career .spot { position: absolute; left: 30px; top: 30px; font-size: 0; }
.m-block-career .spot li { display: inline-block; margin-right: 1px; padding: 10px 25px; line-height: 18px; background: #eee; border-bottom: 2px solid transparent; font-size: 15px; cursor: pointer; }
.m-block-career .spot li.m-this { background: #333; border-color: #ccc; color: #fff; }

/* 客服 */
.m-scree .m-block-main { height: 200px; }
.m-scree .qq,
.m-scree .wechat { position: relative; padding: 15px 20px; background: #eee url(../images/qq.png) no-repeat 10px 50%; background-size: 64px; color:#333; text-align: right; border-radius: 6px; }
.m-scree .qq:before { position: absolute; left: 25px; top: -18px; border: 10px solid transparent; border-bottom-color: #eee; content: ''; }
.m-scree .qq .btn { margin-top: 5px; width: 100px; background: #0084ff; color: #fff; line-height: 26px; border-radius: 50px; }
.m-scree .wechat { margin: 5px 0;padding: 20px; background: #45b725; color: #fff; }
.m-scree .wechat .qrcode { position: absolute; left: 10px; top: 10px; bottom: 10px; text-align: left; }
.m-scree .wechat .qrcode img { height: 100%; }


/* 游戏资料 */
.m-block-datum { position: relative; float: left; padding: 0; width: 540px; height: 260px; overflow: hidden; }
.m-block-datum dl { position: absolute; left: 0; top: 0; width: 380px; height: 100%; overflow: hidden; transition-duration:.3s; }
.m-block-datum dt { width: 80px; height: 100%; text-indent: -999em; }
.m-block-datum dd { position: absolute; top: 0; left: 80px; padding: 20px; width: 220px; height: 100%; font-size: 0; box-sizing: border-box; }
.m-block-datum dd a { display: inline-block; padding: 0 .5em; min-width: 50%; max-width: 100%; height: 36px; line-height: 36px; font-size: 14px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.m-block-datum dl.s2 { left: 80px; }
.m-block-datum dl.s3 { left: 160px; }
.m-block-datum dl.s4 { left: 240px; }
.m-block-datum dl.m-this~* { transform: translateX(220px); }
.m-block-intro { float: right; width: 320px; height: 260px; }
.m-block-intro .m-block-title { text-align: center; }

/* 内页 */
.m-block-breadcrumb { padding: 30px; height: 150px; background: rgba(10,10,10,.75);background:#000\0; color: #fff; box-sizing: border-box; }
.m-block-breadcrumb h2 { display: block; margin-bottom: 30px; font-size: 36px; font-weight: bold; line-height: 40px; }
.m-block-breadcrumb a { color: #ddd }
.m-block-inner { padding: 30px; min-height: 770px; }
.m-block-inner .m-block-news { float: none; width: 100%; height: auto }
.m-block-inner .tab-content { margin-top: 30px; }
.m-block-inner .tab-pages { margin-top: 30px; text-align: center; }