@charset "UTF-8";
/**
 * skin.css
 * @date    2015-08-25 10:47:18
 * @version 0.0.1
 * @desc    第二套页游游戏模板 某款游戏皮肤样式
 * @update-log:
 *
 */
html { background-color: #17120e; overflow-y: scroll; }
body { background: #17120e url("../images/bg.jpg") center top repeat-x; background-attachment: fixed; }
#nav-1 a{ background-position: 0 0; }
.game-page { position: relative; z-index: 2; overflow: hidden; }
.game-page-hide { height: 0px; overflow: hidden; }
.game-page-hide .game-hd {
    -webkit-transform: translate3d(0,-140px,0);
       -moz-transform: translate3d(0,-140px,0);
        -ms-transform: translate3d(0,-140px,0);
         -o-transform: translate3d(0,-140px,0);
            transform: translate3d(0,-140px,0);
    }
.game-page-hide .game-title { opacity: 0; filter: alpha(opacity=0); }
.game-bd { position: relative; padding-bottom: 10px; }
.game-wrap { width: 1180px; margin-left: auto; margin-right: auto; }
.g-side { width: 300px; margin-right: 20px; }
.g-main { position: relative; z-index: 2; width: 860px; min-height: 1133px; }
.g-main .main-hd { position: relative; z-index: 1; height: 90px; padding-left: 30px; padding-right: 30px; overflow: hidden; }
.g-main .main-title { color: #878db2; font-size: 30px; line-height: 90px; }
.g-main .main-title strong {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: -4px;
    margin-left: 3px;
    font-size: 20px;
    line-height: 24px;
    color: #636785;
    }
.g-main .main-bd { position: relative; z-index: 2; overflow: hidden; }
.g-main .shade {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #272a39;
    opacity: .9;
    }
.g-main-tab { height: 50px; background-color: #1c1e2a; }
.g-main-tab li { float: left; width: 80px; height: 50px; line-height: 50px; text-align: center; }
.g-main-tab li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #878db2;
    font-size: 14px;
    -webkit-transition: background-color .3s, color .3s;
       -moz-transition: background-color .3s, color .3s;
        -ms-transition: background-color .3s, color .3s;
         -o-transition: background-color .3s, color .3s;
            transition: background-color .3s, color .3s;
    }
.g-main-tab li a:active,
.g-main-tab li a:hover,
.g-main-tab .current a { background-color: #404565; color: #b3b8d9; }
.g-area { margin-bottom: 40px; }
.g-area-1 { height: 420px; }
.g-area-2 { height: 373px; overflow: hidden; }
.g-area-3 { height: 260px; overflow: hidden; }
.g-mod { background-color: #292c3d; }
.g-mod .mod-hd { position: relative; height: 24px; padding-top: 18px; padding-bottom: 9px; margin: 0 20px 20px; border-bottom: 2px solid #3e435f; }
.g-mod .mod-title { position: relative; margin-top: -1px; color: #878db2; font-weight: 400; font-size: 18px; line-height: 24px; }
.g-mod .mod-more { position: absolute; top: 18px; right: 0; padding-left: 12px; color: #646881; line-height: 24px; background: url("../images/more-2.png") left center no-repeat; }
.g-mod .mod-more:hover { text-decoration: underline; }
.g-mod .mod-bd { position: relative; margin-left: 20px; margin-right: 20px; overflow: hidden; }

/* 面包屑 */
.game-crumb {
    position: absolute;
    bottom: 23px;
    right: 30px;
    height: 24px;
    color: #878db2;
    line-height: 24px;
    }
.game-crumb a { color: #878db2; }
.game-crumb a:hover { text-decoration: underline; }
.game-crumb strong { font-weight: 400; }
/*----------------------------------------------------------------------------*/

.header-banner-top {
    background: rgba(18, 9, 10, 0.5);
    padding: 5px;
	width: 310px;
	margin-left:300px;
	margin-top:470px;
	position:absolute; 
}
.header-banner-right {
	border: 1px solid #643103;
	width: 298px;
	height: 220px;
	padding: 5px 5px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   游戏首屏
   -------------------------------------------------------------------------- */
.game-screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 946px;
    background-color: #17120e;
    overflow: hidden;
    }
.game-screen .screen-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #17120e url("../images/screen.jpg") center top no-repeat;
    text-indent: -999em;
    }
.game-screen .line {
    position: absolute;
    top: 800px;
    z-index: 8;
    height: 0;
    border-bottom: 1px dotted #424a75;
    }
.game-screen .line-1 { right: 50%; width: 50%; margin-right: 582px; }
.game-screen .line-2 { left: 50%; width: 50%; margin-left: 582px; }
.game-screen .line-3 { left: 50%; width: 126px; margin-left: -458px; }
.game-screen .line-4 { left: 50%; width: 416px; margin-left: -208px; }
.game-screen .line-5 { right: 50%; width: 126px; margin-right: -458px;; }
.game-screen .game-logo {
    top: 5px;
    left: 50%;
    margin-left: -535px;
    }
.game-screen-nav {
    position: absolute;
    top: 741px;
    left: 50%;
    z-index: 9;
    width: 1160px;
    height: 120px;
    margin-left: -580px;
    }
.game-screen-nav li { float: left; width: 120px; height: 120px; margin-right: 130px; }
.game-screen-nav li a { display: block; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); text-indent: -999em; }
.game-screen-nav li,
.game-screen-nav li a { background: url("../images/game-sprite-1.png") 0 0 no-repeat; }
.game-screen-nav li a:active,
.game-screen-nav li a:hover {
    -webkit-animation: scaleUp2 .75s ease;
       -moz-animation: scaleUp2 .75s ease;
        -ms-animation: scaleUp2 .75s ease;
         -o-animation: scaleUp2 .75s ease;
            animation: scaleUp2 .75s ease;
    }
.game-screen-nav .nav-1,
.game-screen-nav .nav-1 a { background-position: 0 0; }
.game-screen-nav .nav-2,
.game-screen-nav .nav-2 a { background-position: -130px 0; }
.game-screen-nav .nav-2 { margin-right: 420px; }
.game-screen-nav .nav-3,
.game-screen-nav .nav-3 a { background-position: -260px 0; }
.game-screen-nav .nav-4,
.game-screen-nav .nav-4 a { background-position: -390px 0; }
.game-screen-nav .nav-4 { margin-right: 0; }

/* 开始游戏按钮 */
.game-screen-begin {
    position: absolute;
    top: 677px;
    left: 50%;
    z-index: 10;
    width: 204px;
    height: 226px;
    margin-left: -102px;
    background: url("../images/game-sprite-1.png") 0 -130px no-repeat;
    cursor: pointer;
    }
.game-screen-begin i {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: url("../images/game-sprite-1.png") -214px -130px no-repeat;
    -webkit-transform-origin: 107px 124px;
       -moz-transform-origin: 107px 124px;
        -ms-transform-origin: 107px 124px;
         -o-transform-origin: 107px 124px;
            transform-origin: 107px 124px;
    }
.game-screen-begin strong {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/game-sprite-1.png") -428px -130px no-repeat;
    text-indent: -999em;
    }
.game-screen-begin strong:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/game-sprite-1.png") -428px -130px no-repeat;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-animation: scaleUp3 1.5s .5s infinite;
       -moz-animation: scaleUp3 1.5s .5s infinite;
        -ms-animation: scaleUp3 1.5s .5s infinite;
         -o-animation: scaleUp3 1.5s .5s infinite;
            animation: scaleUp3 1.5s .5s infinite;
    }
.game-screen-begin:active i,
.game-screen-begin:hover i {
    -webkit-transition: -webkit-transform .5s;
       -moz-transition: -moz-transform .5s;
        -ms-transition: -ms-transform .5s;
         -o-transition: -o-transform .5s;
            transition: transform .5s;
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
    }


/* --------------------------------------------------------------------------
   头部
   -------------------------------------------------------------------------- */
.game-hd {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100px;
    padding-bottom: 270px;
    -webkit-transition: -webkit-transform .3s .75s;
       -moz-transition: -moz-transform .3s .75s;
        -ms-transition: -ms-transform .3s .75s;
         -o-transition: -o-transform .3s .75s;
            transition: transform .3s .75s;
    }
.game-hd .shade { position: absolute; top: 0; left: 0; z-index: 8; width: 100%; height: 100px; background-color: #000; opacity: .8; filter: alpha(opacity=80); }
.game-hd .hd-wrap { position: relative; z-index: 9; }
.game-title {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 1206px;
    height: 363px;
    margin-left: -360px;
    background: url("../images/game-title.png") 0 0 no-repeat;
    text-indent: -999em;
    -webkit-transition: opacity .5s .75s;
       -moz-transition: opacity .5s .75s;
        -ms-transition: opacity .5s .75s;
         -o-transition: opacity .5s .75s;
            transition: opacity .5s .75s;
    }

/* 游戏LOGO */
.game-logo {
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 9;
    width: 238px;
    height: 138px;
    margin-left: -101px;
    background: url("../images/logo.png") center 10px no-repeat;
    }
.game-logo a { position: relative; z-index: 9; display: block; width: 100%; height: 100%; text-indent: -999em; }
.game-logo:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: url("../images/logo.png");
    -webkit-animation: scaleUp3 2.5s .5s infinite;
       -moz-animation: scaleUp3 2.5s .5s infinite;
        -ms-animation: scaleUp3 2.5s .5s infinite;
         -o-animation: scaleUp3 2.5s .5s infinite;
            animation: scaleUp3 2.5s .5s infinite;
    }
/* 游戏导航 */
.game-nav { height: 100px; padding-left: 25px; overflow: hidden; }
.game-nav li { float: left; width: 130px; height: 100px; margin-right: 20px; }
.game-nav li a { display: block; width: 100%; height: 100%; text-indent: -999em; background: url("../images/game-sprite-2.png") 0 0 no-repeat; }
.game-nav .nav-1 a { background-position: 0 -100px; }
.game-nav .nav-1 a:active,
.game-nav .nav-1 a:hover,
.game-nav .nav-1.current a { background-position: 0 0; }
.game-nav .nav-2 a { background-position: -140px -100px; }
.game-nav .nav-2 a:active,
.game-nav .nav-2 a:hover,
.game-nav .nav-2.current a { background-position: -140px 0; }
.game-nav .nav-3 { margin-right: 270px; }
.game-nav .nav-3 a { background-position: -280px -100px; }
.game-nav .nav-3 a:active,
.game-nav .nav-3 a:hover,
.game-nav .nav-3.current a { background-position: -280px 0; }
.game-nav .nav-4 a { background-position: -420px -100px; }
.game-nav .nav-4 a:active,
.game-nav .nav-4 a:hover,
.game-nav .nav-4.current a { background-position: -420px 0; }
.game-nav .nav-5 a { background-position: -560px -100px; }
.game-nav .nav-5 a:active,
.game-nav .nav-5 a:hover,
.game-nav .nav-5.current a { background-position: -560px 0; }
.game-nav .nav-6 a { background-position: -700px -100px; }
.game-nav .nav-6 a:active,
.game-nav .nav-6 a:hover,
.game-nav .nav-6.current a { background-position: -700px 0; }
.game-nav li a {
    -webkit-transition: background-position .3s;
       -moz-transition: background-position .3s;
        -ms-transition: background-position .3s;
         -o-transition: background-position .3s;
            transition: background-position .3s;
    }


/* --------------------------------------------------------------------------
   开始游戏 && 游戏菜单 && 用户信息 || 登录表单
   -------------------------------------------------------------------------- */
.g-box-1 { position: relative; height: 270px; padding-top: 150px; background-color: #3e2121; }

/* 开始游戏按钮 */
.game-btn { position: absolute; top: -9px; left: 0; width: 100%; height: 159px; width: 100%; padding-right: 32px; background: url("../images/game-sprite-2.png") 0 -215px no-repeat; overflow: hidden; text-indent: -999em; cursor: pointer; }
.game-btn i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/game-sprite-2.png") 0 -374px no-repeat;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .5s;
       -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
         -o-transition: opacity .5s;
            transition: opacity .5s;
    }
.game-btn strong { position: relative; z-index: 9; display: block; width: 100%; height: 150px; margin-top: 9px; background: url("../images/game-sprite-2.png") 0 -548px no-repeat; }
.game-btn:active i,
.game-btn:hover i { opacity: 1; filter: alpha(opacity=100); }
.game-btn:active strong,
.game-btn:hover strong {
    -webkit-animation: scaleDown .75s;
       -moz-animation: scaleDown .75s;
        -ms-animation: scaleDown .75s;
         -o-animation: scaleDown .75s;
            animation: scaleDown .75s;
    }

/* 游戏菜单 */
.game-menu { height: 50px; overflow: hidden; background: #390100 url("../images/game-sprite-2.png") -350px -215px no-repeat; }
.game-menu a { float: left; width: 50%; height: 100%; cursor: pointer; font-size: 0; text-align: center; }
.game-menu .menu-icon { display: inline-block; *display: inline; *zoom: 1; vertical-align: -3px; width: 18px; height: 18px; margin-right: 10px; background: url("../images/game-sprite-2.png") -665px -215px no-repeat; }
.game-menu .menu-icon-1 { background-position: -665px -215px; }
.game-menu .menu-icon-2 { background-position: -693px -215px; }
.game-menu a:active .menu-icon,
.game-menu a:hover .menu-icon {
   -webkit-animation: rubberBand .75s;
      -moz-animation: rubberBand .75s;
       -ms-animation: rubberBand .75s;
        -o-animation: rubberBand .75s;
           animation: rubberBand .75s;
    }
.game-menu a strong { color: #6f7595; font-weight: 600; font-size: 14px; line-height: 50px; }

/* 用户信息 && 登录表单 */
.game-user { height: 180px; padding: 20px; overflow: hidden; background-color: #292c3d; }
.game-login .login-item { position: relative; height: 26px; padding: 5px 10px; margin-bottom: 10px; background-color: #1c1e2a; }
.game-login .login-item input { display: block; width: 100%; height: 26px; border: none; font-size: 14px; line-height: normal; *line-height: 25px; background: none; color: #878db2; }
.game-login .login-item input::-webkit-input-placeholder { color: #878db2; }
.game-login .login-item input::-moz-input-placeholder { color: #878db2; }
.game-login .login-item input::-ms-input-placeholder { color: #878db2; }
.game-login .login-item input::-o-input-placeholder { color: #878db2; }
.game-login .login-item input::input-placeholder { color: #878db2; }
.game-login .login-item label { position: absolute; top: 5px; left: 10px; width: 240px; height: 26px; font-size: 14px; line-height: 27px; color: #878db2; }
.game-login .login-control { height: 16px; margin-bottom: 15px; line-height: 16px; overflow: hidden; }
.game-login .login-control a:hover { text-decoration: underline; }
.game-login .login-check { margin-right: 40px; font-size: 0; }
.game-login .login-check input { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; *vertical-align: 0; }
.game-login .login-check label { color: #878db2; font-size: 12px; }
.game-login .login-forget { color: #d5ab5f; }
.game-login .login-2-reg { color: #878db2; }
.game-login .login-btn { display: block; width: 100%; height: 60px; border: none; background: #7f0903 url("../images/game-sprite-2.png") -350px -280px no-repeat; text-indent: -999em; margin-bottom: 20px; }
.game-user-meta { height: 43px; margin-bottom: 20px; overflow: hidden; }
.game-user-meta .user-avatar { float: left; width: 43px; height: 43px; margin-right: 20px; }
.game-user-meta .user-info { width: 197px;  }
.game-user-meta .user-info p { margin-bottom: 8px; line-height: 20px; color: #7d8093; }
.game-user-meta .user-info a { margin-left: 18px; }
.game-user-meta .user-info b { font-weight: 400; color: #d5ab5f; }
.game-user-meta .user-info a { color: #caa35d; }
.game-user-meta .user-info a:hover { text-decoration: underline; }
.game-user-btn { width: 110%; height: 30px; margin-bottom: 15px; overflow: hidden; }
.game-user-btn a {
    float: left;
    width: 80px;
    height: 30px;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    color: #868ba0;
    background-color: #1f222f;
    -webkit-transition: background-color .3s;
       -moz-transition: background-color .3s;
        -ms-transition: background-color .3s;
         -o-transition: background-color .3s;
            transition: background-color .3s;
    }
.game-user-btn a:active,
.game-user-btn a:hover { background-color: #404565; }
.game-user-server { position: relative; margin-top: -4px; overflow: hidden; }
.game-user-server b { display: block; color: #7d8093; line-height: 20px; }
.game-user-server .server-list { width: 110%; overflow: hidden; }
.game-user-server .server-list li { float: left; width: 120px; margin-right: 20px; height: 32px; line-height: 32px; overflow: hidden; }
.game-user-server .server-list a { color: #8c92b6; }
.game-user-server .server-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   游戏幻灯片轮播
   -------------------------------------------------------------------------- */
.game-slide { position: relative; z-index: 9; width: 420px; height: 420px; background-color: #1e0606; }
.game-slide-list { position: relative; width: 420px; height: 420px; overflow: hidden; }
.game-slide-list a { float: left; width: 420px; height: 420px; }
.game-slide-list a img { display: block; width: 100%; height: 100%; }
.game-slide-pos { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 99; height: 16px; text-align: right; font-size: 0; }
.game-slide-pos li { display: inline-block; *display: inline; *zoom: 1; width: 16px; height: 16px; margin-left: 10px; }
.game-slide-pos li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
    -webkit-transition: background-color .3s;
       -moz-transition: background-color .3s;
        -ms-transition: background-color .3s;
         -o-transition: background-color .3s;
            transition: background-color .3s;
    }
.game-slide-pos li a:active,
.game-slide-pos li a:hover,
.game-slide-pos .current a { background-color: #f78e5e; }

/* --------------------------------------------------------------------------
   新闻资讯
   -------------------------------------------------------------------------- */
.game-news { width: 440px; height: 420px; overflow: hidden; background-color: #292c3d; }
.game-news .news-hd { height: 50px; background-color: #1d1f2b; }
.game-news .news-bd { padding: 20px; overflow: hidden; }
.game-news-tab { width: 320px; height: 50px; overflow: hidden; }
.game-news-tab li {
    float: left;
    width: 80px;
    height: 100%;
    text-align: center;
    -webkit-transition: background-color .3s;
       -moz-transition: background-color .3s;
        -ms-transition: background-color .3s;
         -o-transition: background-color .3s;
            transition: background-color .3s;
    }
.game-news-tab li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 50px;
    color: #a0a0a0;
    }
.game-news-tab .current { background-color: #292c3d; }
.game-news-more { display: block; width: 120px; height: 50px; font-size: 14px; line-height: 50px; text-align: center; color: #fff; background-color: #161822; }
.game-news-more i { display: inline-block; *display: inline; *zoom: 1; width: 10px; height: 10px; margin-left: 5px; background: url("../images/more-1.png") 0 0 no-repeat; text-indent: -999em; vertical-align: -20px; *vertical-align: 10px; }

/* 焦点新闻 */
.game-news-focus { height: 50px; padding-left: 10px; padding-right: 10px; margin-bottom: 15px; font-size: 18px; line-height: 50px; text-align: center; color: #d5ab5f; font-weight: 400; background-color: #1d1f2b; }
.game-news-focus a { color: #d5ab5f; }
/* 新闻列表 */
.game-news-list li { height: 38px; overflow: hidden; font-size: 14px; line-height: 38px; }
.game-news-list a:hover { text-decoration: underline; }
.game-news-list .news-tag { float: left; margin-right: 10px; color: #7d8093; }
.game-news-list .news-title { float: left; width: 275px; font-size: 14px; font-weight: 400; }
.game-news-list .news-title a { color: #7d8093; }
.game-news-list .news-date { float: right; color: #5e6070; }
.game-news-list2 .news-title { width: 600px; }
/* --------------------------------------------------------------------------
   微端下载 && 推荐服务器
   -------------------------------------------------------------------------- */
.g-box-4 { height: 373px; overflow: hidden; }
/* 微端下载 */
.game-exe-down { position: relative; display: block; height: 80px; background: #790601 url("../images/game-sprite-2.png") -350px -355px no-repeat; text-align: center; font-size: 0; cursor: pointer; }
.game-exe-down:after,
.game-exe-down strong { display: block; width: 100%; height: 100%; background: url("../images/game-sprite-2.png") -350px -450px no-repeat; }
.game-exe-down:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    }
.game-exe-down:before {
    content: "";
    position: absolute;
    top: 0;
    left: -125%;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    background: -moz-linear-gradient(left,rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -ms-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    -webkit-transform: skewX(-25deg);
       -moz-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
         -o-transform: skewX(-25deg);
            transform: skewX(-25deg);
    }
.game-exe-down:active:before,
.game-exe-down:hover:before {
    -webkit-transition: left 1.25s;
       -moz-transition: left 1.25s;
        -ms-transition: left 1.25s;
         -o-transition: left 1.25s;
            transition: left 1.25s;
    left: 125%;
    }
.game-exe-down:after {
    opacity: 0;
    filter: alpha(opacity=0);
    }
.game-exe-down:active:after,
.game-exe-down:hover:after {
    -webkit-animation: scaleUp .5s ease-out .4s;
       -moz-animation: scaleUp .5s ease-out .4s;
        -ms-animation: scaleUp .5s ease-out .4s;
         -o-animation: scaleUp .5s ease-out .4s;
            animation: scaleUp .5s ease-out .4s;
    }

/* 推荐服务器 */
.g-mod-1 { height: 273px; margin-top: 20px; }
.game-rec-server-form { height: 30px; overflow: hidden; line-height: 30px; color: #8b90ae; }
.game-rec-server-form * { float: left; }
.game-rec-server-form input { width: 64px; height: 20px; padding: 5px 8px; border: none; background-color: #1c1e2a; color: #8b90ae; line-height: normal; line-height: 20px\9; }
.game-rec-server-form span { margin-left: 5px; }
.game-rec-server-form .form-btn {
    float: right;
    width: 80px;
    height: 30px;
    border: none;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #bbc0e1;
    background-color: #404565;
    -webkit-transition: background-color .3s;
       -moz-transition: background-color .3s;
        -ms-transition: background-color .3s;
         -o-transition: background-color .3s;
            transition: background-color .3s;
    }
.game-rec-server-form .form-btn:active,
.game-rec-server-form .form-btn:hover { background-color: #1c1e2a; }
.game-rec-server-list { margin-top: 9px; }
.game-rec-server-list li { height: 38px; padding-left: 14px; line-height: 38px; overflow: hidden; background: url("../images/dot.png") left center no-repeat; }
.game-rec-server-list .server-title { float: left; width: 180px; font-size: 12px; color: #8b90ae; font-weight: 400; }
.game-rec-server-list .server-title a { color: #8b90ae; }
.game-rec-server-list .server-title a:hover { text-decoration: underline; }
.game-rec-server-list .server-statu { float: right; color: #d5ab5f; }

/* --------------------------------------------------------------------------
   新手引导 && 特色玩法 && 高手进阶
   -------------------------------------------------------------------------- */
.game-help { width: 420px; height: 373px; margin-right: 20px; overflow: hidden; }
.game-help-item { position: relative; height: 111px; margin-bottom: 20px; overflow: hidden; background-color: #292c3d; }
.game-help-item .help-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .3s;
       -moz-transition: -moz-transform .3s;
        -ms-transition: -ms-transform .3s;
         -o-transition: -o-transform .3s;
            transition: transform .3s;
    }
.game-help-item .help-con {
    padding: 13px 15px;
    -webkit-transform: translate3d(0,111px,0);
       -moz-transform: translate3d(0,111px,0);
        -ms-transform: translate3d(0,111px,0);
         -o-transform: translate3d(0,111px,0);
            transform: translate3d(0,111px,0);
    -webkit-transition: -webkit-transform .3s;
       -moz-transition: -moz-transform .3s;
        -ms-transition: -ms-transform .3s;
         -o-transition: -o-transform .3s;
            transition: transform .3s;
    }
.game-help-item .help-icon { float: left; width: 85px; height: 85px; margin-right: 4px; background: url("../images/game-sprite-2.png") -350px -540px no-repeat; text-indent: -999em; }
.game-help-item .help-icon-1 { background-position: -350px -540px; }
.game-help-item .help-icon-2 { background-position: -445px -540px; }
.game-help-item .help-icon-3 { background-position: -540px -540px; }
.game-help-item .help-icon:active,
.game-help-item .help-icon:hover {
    -webkit-transition: -webkit-transform .5s;
       -moz-transition: -moz-transform .5s;
        -ms-transition: -ms-transform .5s;
         -o-transition: -o-transform .5s;
            transition: transform .5s;
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
    }
.game-help-list { float: left; width: 300px; padding-top: 5px; padding-bottom: 5px; overflow: hidden; }
.game-help-list li { float: left; width: 51px; height: 25px; margin-left: 24px; line-height: 25px; overflow: hidden; }
.game-help-list a { color: #8b90ae; }
.game-help-list a:hover { text-decoration: underline; }
.game-help-item.active .help-banner {
    top: -100%\9;
    -webkit-transform: translate3d(0,-111px,0);
       -moz-transform: translate3d(0,-111px,0);
        -ms-transform: translate3d(0,-111px,0);
         -o-transform: translate3d(0,-111px,0);
            transform: translate3d(0,-111px,0);
    }
.game-help-item.active .help-con {
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
    }

/* --------------------------------------------------------------------------
   游戏攻略
   -------------------------------------------------------------------------- */
.game-gl { position: relative; width: 420px; height: 373px; overflow: hidden; background-color: #3e2121; }
.game-gl .gl-banner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .3s;
       -moz-transition: -moz-transform .3s;
        -ms-transition: -ms-transform .3s;
         -o-transition: -o-transform .3s;
            transition: transform .3s;
    }
.g-mod-2 { height: 100%; }
.game-gl.active .gl-banner {
    right: -100%\9;
    -webkit-transform: translate3d(420px,0,0);
       -moz-transform: translate3d(420px,0,0);
        -ms-transform: translate3d(420px,0,0);
         -o-transform: translate3d(420px,0,0);
            transform: translate3d(420px,0,0);
    }
.game-gl-list { position: relative; margin-top: -13px; }
.game-gl-list li { height: 38px; line-height: 38px; overflow: hidden; }
.game-gl-list .gl-title { float: left; width: 300px; font-size: 12px; color: #878db2; font-weight: 400; }
.game-gl-list .gl-title a { color: #7d8093; }
.game-gl-list .gl-title a:hover { text-decoration: underline; }
.game-gl-list .gl-date { float: right;  color: #5e6070; }

/* --------------------------------------------------------------------------
   客服中心
   -------------------------------------------------------------------------- */
.g-mod-3 { height: 260px; overflow: hidden; }
.g-mod-3 .mod-hd { margin-bottom: 15px; }
.game-service { padding-left: 10px; padding-right: 10px; color: #8b90ae; line-height: 23px; }
.game-service dt { position: relative; float: left; height: 23px; padding-left: 43px; margin-bottom: 15px; }
.game-service dt .icon { position: absolute; top: 0; left: 0; width: 23px; height: 23px; background: url("../images/game-sprite-2.png") -665px -243px no-repeat; }
.game-service dt .icon-1 { background-position: -665px -243px; }
.game-service dt .icon-2 { background-position: -698px -243px; }
.game-service dt .icon-3 { background-position: -731px -243px; }
.game-service dt .icon-4 { background-position: -764px -243px; }
.game-service dt:active .icon,
.game-service dt:hover .icon {
    -webkit-animation: rubberBand .75s;
       -moz-animation: rubberBand .75s;
        -ms-animation: rubberBand .75s;
         -o-animation: rubberBand .75s;
            animation: rubberBand .75s;
    }
.game-service dd { height: 23px; margin-bottom: 15px; overflow: hidden; }
.game-service .service-online { display: block; width: 81px; height: 23px; background: url("../images/service-online.png") 0 0 no-repeat; text-indent: -999em; overflow: hidden; }

/* --------------------------------------------------------------------------
   社区热点
   -------------------------------------------------------------------------- */
.g-mod-4 { width: 860px; height: 260px; overflow: hidden; }
.game-bbs-link {
    position: absolute;
    top: 14px;
    right: 100px;
    width: 80px;
    height: 28px;
    color: #bbc0e1;
    line-height: 28px;
    text-align: center;
    background-color: #404565;
    -webkit-transition: background-color .3s;
       -moz-transition: background-color .3s;
        -ms-transition: background-color .3s;
         -o-transition: background-color .3s;
            transition: background-color .3s;
    }
.game-bbs-link:active,
.game-bbs-link:hover { background-color: #1c1e2a; }
.game-bbs-banner { float: left; width: 180px; height: 170px; margin-right: 30px; }
.game-bbs-banner img { display: block; width: 100%; height: 100%; }
.game-bbs-list { position: relative; float: left; margin-top: -9px; width: 610px; }
.game-bbs-list li { height: 31px; line-height: 31px; overflow: hidden; }
.game-bbs-list .bbs-title { float: left; width: 400px; margin-right: 20px; font-weight: 400; font-size: 12px; color: #cab3b3; }
.game-bbs-list .bbs-title a { color: #8b90ae; }
.game-bbs-list .bbs-title a:hover { text-decoration: underline; }
.game-bbs-list .bbs-author { float: left; width: 100px; color: #5e6070; font-weight: 400; }
.game-bbs-list .bbs-date { float: right; color: #5e6070; }

/* --------------------------------------------------------------------------
   资讯列表页
   -------------------------------------------------------------------------- */
.game-news-list2 { padding: 15px 30px 30px; overflow: hidden; }
.game-news-list2 li { position: relative; height: 45px; margin-left: 28px; border-bottom: 1px dashed #3e435f; line-height: 45px; overflow: visible; }
.game-news-list2 li .dot {
    position: absolute;
    top: 0;
    left: -28px;
    width: 7px;
    height: 100%;
    background: url("../images/dot.png") left center no-repeat;
    }
/* 资讯分页 */
.game-news-page { padding: 20px 30px 30px; text-align: center; font-size: 0; }
.game-news-page li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 24px;
    margin-left: 5px;
    margin-right: 5px;
    color: #cab3b3;
    font-size: 12px;
    line-height: 24px;
    }
.game-news-page li a {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    padding-left: 6px;
    padding-right: 6px;
    color: #acafc3;
    -webkit-transition: background-color .3s, color .3s;
       -moz-transition: background-color .3s, color .3s;
        -ms-transition: background-color .3s, color .3s;
         -o-transition: background-color .3s, color .3s;
            transition: background-color .3s, color .3s;
    }
.game-news-page li a:active,
.game-news-page li a:hover,
.game-news-page .current a {
    background-color: #404565;
    color: #fffadb;
    }

/* --------------------------------------------------------------------------
   资讯详情页
   -------------------------------------------------------------------------- */
.game-news-detail { padding: 22px 50px 50px; }
.game-news-detail .news-title { color: #878db2; font-size: 28px; line-height: 1.5; text-align: center; }
.game-news-detail .news-meta { padding-top: 18px; padding-bottom: 25px; margin-bottom: 15px; border-bottom: 1px dashed #3e435f; color: #5b6080; line-height: 22px; text-align: center; }
.game-news-content { color: #7b80a3; font-size: 14px; line-height: 2.2; word-wrap: break-word; word-break: break-all; }
.game-news-content a { color: #7b80a3; }
.game-news-content a[href]:hover { text-decoration: underline; }
.game-news-content * { max-width: 100%; }
.game-news-content p { margin-bottom: 20px; text-indent: 2em; }
.game-news-content img { height: auto; }
.game-news-content p img { margin-left: -2em; }

/* --------------------------------------------------------------------------
   服务器列表页面
   -------------------------------------------------------------------------- */
.game-server { position: relative; padding: 0 50px 40px; border-top: 50px solid #1c1e2a; }
.game-server-item { margin-top: 40px; }
.game-server-item .item-hd { position: relative; height: 32px; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px dashed #3e435f; overflow: hidden; color: #7b80a3; line-height: 32px; }
.game-server-item .item-title { color: #727898; font-size: 20px; }
.game-server-item .item-desc { position: absolute; top: 0; right: 0; height: 100%; line-height: 40px; }
.game-server-item .item-bd { position: relative; }
/* 服务器列表 */
.game-server-list { position: relative; width: 110%; margin-top: -20px; color: #fff;}
.game-server-list a:hover{color: #fff;}
.game-server-list li { float: left; width: 240px; height: 46px; margin-top: 20px; margin-right: 20px; }
.game-server-btn { position: relative; display: block; height: 100%; padding-left: 20px; padding-right: 20px; color: #fff; font-size: 14px; line-height: 46px; background: #ae1b0b url("../images/game-sprite-2.png") -332px -635px no-repeat; cursor: pointer; }
.game-server-btn:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: #ae1b0b url("../images/game-sprite-2.png") -332px -635px no-repeat;
    opacity: 0;
    filter: alpha(opacity=0);
    }
.game-server-btn:active:before,
.game-server-btn:hover:before {
    -webkit-animation: scaleUp2 .75s;
       -moz-animation: scaleUp2 .75s;
        -ms-animation: scaleUp2 .75s;
         -o-animation: scaleUp2 .75s;
            animation: scaleUp2 .75s;
    }
.game-server-btn.btn-1,
.game-server-btn.btn-1:before { background-color: #ae1b0b; background-position: -332px -635px; }
.game-server-btn.btn-2,
.game-server-btn.btn-2:before { background-color: #985d00; background-position: -582px -635px; }
.game-server-btn strong { position: relative; z-index: 2; float: left; font-weight: 400; }
.game-server-btn span { position: relative; z-index: 2; float: right; width:30px; }
/* 服务器Tab */
.game-server-tab { position: relative; margin-top: -4px; margin-bottom: 24px; width: 110%; overflow: hidden; }
.game-server-tab li { float: left; width: 100px; height: 30px; margin-right: 10px; margin-top: 10px; text-align: center; color: #727898; }
.game-server-tab li a {
    display: block;
    border: 2px solid #404565;
    height: 26px;
    color: #727898;
    line-height: 26px;
    -webkit-transition: border-color .3s, background-color .3s, color .3s;
       -moz-transition: border-color .3s, background-color .3s, color .3s;
        -ms-transition: border-color .3s, background-color .3s, color .3s;
         -o-transition: border-color .3s, background-color .3s, color .3s;
            transition: border-color .3s, background-color .3s, color .3s;

    }
.game-server-tab li a:active,
.game-server-tab li a:hover,
.game-server-tab .current a { border-color: #404565; background-color: #404565; color: #b3b8d9; }

/* --------------------------------------------------------------------------
   新手礼包弹窗
   -------------------------------------------------------------------------- */
.game-dialog { display: none; position: fixed; top: 50%; left: 50%; z-index: 999; width: 378px; margin-left: -189px; background-color: #3e2121; }
.game-dialog .dialog-hd { position: relative; height: 50px; padding-left: 10px; padding-right: 10px; border-bottom: 2px solid #500201; background: #360100 url("../images/dialog-sprite.png") 0 0 repeat-x; overflow: hidden; }
.game-dialog .dialog-title { color: #a5706e; font-weight: 400; font-size: 16px; line-height: 50px; }
.game-dialog .dialog-bd { padding: 30px 20px; background-color: #3e2121; }
.game-dialog .dialog-close { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url("../images/dialog-sprite.png") 0 -60px no-repeat; text-indent: -999em; }
.game-dialog-shade { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: #000; opacity: .85; filter: alpha(opacity=85); }
.game-pack-form { margin-left: 15px; margin-right: 15px; }
.game-pack-form .form-item { height: 36px; margin-bottom: 20px; }
.game-pack-form .form-item label { float: left; width: 75px; margin-right: 10px; color: #cab3b3; font-size: 14px; line-height: 36px; text-align: right; }
.game-pack-form .form-btn { width: 90px; height: 36px; margin-left: 85px; border: none; color: #fffadb; font-size: 14px; line-height: 36px; text-align: center; background-color: #a71408; }
.game-sever-select {
    float: left;
    position: relative;
    width: 218px;
    height: 36px;
    overflow: hidden;
    }
.game-sever-select select {
    width: 100%;
    height: 36px;
    height: auto\9;
    margin-top: 8px\9;
    *margin-top: 7px;
    line-height: 36px;
    }
.game-sever-select .select-arrow {
    display: none;
    position: absolute;
    top: 15px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #653c3c;
    -webkit-transition: transform .3s;
       -moz-transition: transform .3s;
        -ms-transition: transform .3s;
         -o-transition: transform .3s;
            transition: transform .3s;
    }
.game-sever-select select:focus ~ .select-arrow {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
    }
/* .game-sever-select .select-txt { padding-left: 15px; padding-right: 15px; border: 1px solid #4e2c2c; line-height: 34px; }
.game-sever-select .select-arrow { position: absolute; top: 15px; right: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #653c3c; }
.game-sever-select .select-list { position: absolute; top: 0; right: 0; left: 0; max-height: 288px; overflow-y: scroll; background-color: #2c1616; }
.game-sever-select .select-list li { padding-left: 15px; padding-right: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } */
/* 新手礼包领取结果 */
.game-pack-res { height: 36px; padding: 7px 20px; margin-top: 15px; font-size: 14px; background-color: #572f2f; overflow: hidden; }
.game-pack-res label { float: left; margin-right: 10px; color: #cab3b3; line-height: 36px; }
.game-pack-res .res-input { float: left; width: 172px; height: 24px; padding: 5px 8px; margin-right: 10px; border: 1px solid #693838; background-color: #391f1f; }
.game-pack-res .res-input input { display: block; width: 100%; height: 24px; border: none; color: #cab3b3; line-height: normal; background-color: #391f1f; }
.game-pack-res .res-copy {
    float: left;
    width: 46px;
    height: 34px;
    margin-top: 1px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
    color: #cab3b3;
    line-height: 34px;
    text-align: center;
    background-color: #724c4c;
    }
.game-pack-tip { margin-top: 7px; color: #8b6e6e; line-height: 18px; }

/* --------------------------------------------------------------------------
   底部
   -------------------------------------------------------------------------- */
.game-ft { padding-top: 75px; padding-bottom: 25px; /* background: url(../images/ft.png) center top no-repeat; */ color: #5c6166; line-height: 24px; text-align: center; }
.game-ft a { color: #5c6166; }
.game-ft a:hover { text-decoration: underline; }
.game-ft p span { margin-left: 10px; margin-right: 10px; }