@charset "UTF-8";
/* CSS Document */
/*---公用基础设置---*/
html {
    font-size: 14px;
    font-family: 'Microsoft YaHei', 'SimHei', 'SimSun';
    height: 100%;
}

body {
    height: 100%;
}

/*css-reset*/
html,
body,
div,
ul,
ol,
li,
dl,
dt,
dd,
p,
span,
em,
strong,
b,
i,
h1,
h2,
h3,
h4,
form,
iframe,
table,
thead,
tbody,
input,
button,
video,
textarea,
select,
option,
img,
a,
xmp,
pre,
code,
h1,
h2,
h3,
h4,
canvas {
    margin: 0;
    padding: 0;
    word-break: break-all;
    word-wrap: break-word;
    outline: none;
}

audio,
video,
ul,
ol,
dl,
dt,
dd,
p,
img {
    display: block;
    border: 0;
}

a {
    text-decoration: none;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    /*早期浏览器*/
    user-select: none;
}

a:hover {
    text-decoration: none;
}

li {
    display: block;
    list-style: none;
}

textarea {
    resize: none;
    outline: none;
    font-family: 'Microsoft YaHei', 'SimHei', 'SimSun';
}

input {
    outline: none;
    font-size: 12px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #eee;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
} */
/* ::-webkit-input-placeholder{
	color: #bdbdbd !important;
}
::-moz-placeholder{
	color: #bdbdbd !important;
}
::-ms-input-placeholder{
	color: #bdbdbd !important;
} */
input[disabled] {
    background: rgba(184, 184, 184, 0.5);
    color: #9a9a9a;
}

/*---顶级样式名称---*/
/*清理浮动*/
.clear {
    *height: 1%;
}

.clear:after {
    content: '.';
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

/*隐藏*/
.hide {
    display: none !important;
}

/*显示*/
.show {
    display: block !important;
}

/*隐藏*/
.hidden {
    visibility: hidden !important;
}

/*字体撑开*/
.null {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
}

/*header*/
.top {
    height: 86px;
    position: fixed;
    z-index: 10;
    top: 70px;
    width: 100%;
    background: #232529;
    left: 0;
    min-width: 1344px
}

.topDiv {
    height: 86px;
}

.topMain {
    width: 100%;
    position: absolute;
     display: flex;justify-content: space-between;
    top: 0;
    height: 86px;
}

.logo {
    display: block;
   margin: 10px 0 0 10px ;
}

.topBtn {
    width: 910px;  
    padding-top: 5px;
}

.topBtn a {
    width: 288px; height: 70px;
    overflow: hidden;
    text-indent: -9999px;
}

.topBtn a.a1 {
    background: url(../image/btn1.png) no-repeat 0 0;
    float: left;
}

.topBtn a.a2 {
    background: url(../image/btn2.png) no-repeat 0 0;
    float: left;
    margin-left: 20px;
}

.topBtn a.a3 {
    background: url(../image/btn3.png) no-repeat 0 0;
   float: left;
    margin-left: 20px;
}

.topBtn a:hover,
.topBtn a.on {
    background-position: 0 -112px;
}

.toplink {
    width: 154px;
    height: 70px;
    margin: 10px 10px 0 0;
}

.toplink a {
    display: block;
    width: 70px;
    height: 60px;
    cursor: pointer;
    position: relative;
}

.toplink a span {
    display: block;
    border: 2px solid #564622;
    height: 34px;
    border-radius: 17px;
}

.toplink a strong {
    display: block;
    font-weight: normal;
    font-size: 16px;
    color: #d6b95b;
    text-align: center;
    padding-top: 5px;
}

.toplink a.home {
    float: left;
}

.toplink a.home span {
    background: url(../image/home.png) no-repeat center;
}

.toplink a.down {
    float: right;
}

.toplink a.down span {
    background: url(../image/download.png) no-repeat center;
}

.toplink a:hover span {
    border-color: #9f7924;
}

.toplink a img.downImg {
    width: 120px;
    position: absolute;
    left: -25px;
    top: 60px;
    display: none;
}

.toplink a:hover img.downImg {
    display: block;
}

body {
    background-color: #000;
}

.g-btn {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
}

.g-role-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.comp-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    color: #ffe6ae;
    overflow-y: auto;
    padding: 60px 0 24px;
    /* display: flex;
    align-items: center; */
}
.comp-modal .modal-content {
    position: relative;
    margin: 0 auto;
    width: 533px;
    height: 723px;
    background: url('../image/modal-533.png') no-repeat center;
}
.comp-modal .modal-content.modal2 {
    width: 1015px;
    height: 763px;
    background-image: url('../image/modal-1015.png');
}
.comp-modal .modal-content.modal2 .modal-close {
    top: 71px;
    right: 48px;
}
.comp-modal .modal-content.modal3 {
    width: 1015px;
    height: 1151px;
    background-image: url('../image/modal-1015-2.png');
}
.comp-modal .modal-content.modal3 .modal-close {
    right: -42px;
    top: 23px;
}
.comp-modal .modal-close {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 10;
    background-image: url('../image/sprite.png');
    background-position: 0px -1140px;
    width: 60px;
    height: 60px;
    top: 33px;
    right: 15px;
}

.container {
    max-width: 1920px;
    min-width: 1334px;
    margin: 0 auto;
}

.section2 {
    height: 980px;
    background: url('../image/page1.jpg') no-repeat center top;
    position: relative;
}

.section3 {
    height: 1240px;
    background: url('../image/page2.jpg') no-repeat center top;
    position: relative;
}

.section4 {
    height: 1511px;
    background: url('../image/page3.jpg') no-repeat center top;
    position: relative;
}

.section2 .login,
.section2 .logout {
    font-size: 20px;
    line-height: 1;
    position: absolute;
    right: 16px;
    top: 16px;
    color: #fff;
}

.server-info {
    text-align: center;
    color: #62492d;
    padding-top:374px;
}
.server-info .server-name {
    font-size: 38px;
    font-weight: bold;
    line-height: 64px;
    color: #6e573e;
    letter-spacing: 10px;
}
.server-info .server-name > span {
    color: #d64d33;
    opacity: 0;
}
.server-info .server-time {
    padding-top: 10px;
    font-size: 20px;
    line-height: 36px;
    color: #f6cdb6;
    font-weight: normal;
    letter-spacing: 6px;
}
.server-info .server-time > span {
    font-weight: bold;
    letter-spacing: 8px;
    opacity: 0;
}

.appointment {
    padding-top: 247px;
    text-align: center;
}
.appointment .btn-appoint {
    background-image: url('../image/sprite.png');
    background-position: 0px -1342px;
    width: 210px;
    height: 62px;
    margin-right: 264px;
}
.appointment .btn-appoint.on,
.appointment .btn-appoint:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -1240px;
  
}
.appointment .btn-role {
    background-image: url('../image/sprite.png');
    background-position: 0px -2362px;
    width: 272px;
    height: 62px;
    margin: 0 0 0 50px;
}
.appointment .btn-role.on,
.appointment .btn-role:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -2260px;
   
}

.btn-rule {
    background-image: url('../image/sprite.png');
    background-position: 0px -711px;
    width: 167px;
    height: 41px;
    position: absolute;
    left: 50%;
    margin-left: 272px;
    top: 961px;
}

.team {
    padding-top: 228px;
    text-align: center;
}
.team .btn-team,
.team .btn-view,
.team .team-list .btn-apply,
.team-list .team .btn-apply,
.team .team-list .btn-applyed,
.team-list .team .btn-applyed,
.team .btn-join,
.team .team-content .team-btn-group .btn-list,
.team-content .team-btn-group .team .btn-list,
.team .team-content .team-btn-group .btn-invite,
.team-content .team-btn-group .team .btn-invite,
.team .team-content .team-btn-group .btn-dismiss,
.team-content .team-btn-group .team .btn-dismiss {
    background-image: url('../image/sprite.png');
    background-position: 0px -2566px;
    width: 306px;
    height: 93px;
    position: relative;
    margin-right: 24px;
    text-align: center;
}
.team .btn-team.on,
.team .on.btn-view,
.team .team-list .on.btn-apply,
.team-list .team .on.btn-apply,
.team .team-list .on.btn-applyed,
.team-list .team .on.btn-applyed,
.team .on.btn-join,
.team .team-content .team-btn-group .on.btn-list,
.team-content .team-btn-group .team .on.btn-list,
.team .team-content .team-btn-group .on.btn-invite,
.team-content .team-btn-group .team .on.btn-invite,
.team .team-content .team-btn-group .on.btn-dismiss,
.team-content .team-btn-group .team .on.btn-dismiss,
.team .btn-team:hover,
.team .btn-view:hover,
.team .team-list .btn-apply:hover,
.team-list .team .btn-apply:hover,
.team .team-list .btn-applyed:hover,
.team-list .team .btn-applyed:hover,
.team .btn-join:hover,
.team .team-content .team-btn-group .btn-list:hover,
.team-content .team-btn-group .team .btn-list:hover,
.team .team-content .team-btn-group .btn-invite:hover,
.team-content .team-btn-group .team .btn-invite:hover,
.team .team-content .team-btn-group .btn-dismiss:hover,
.team-content .team-btn-group .team .btn-dismiss:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -2464px;
   
}
.team .btn-team::after,
.team .btn-view::after,
.team .team-list .btn-apply::after,
.team-list .team .btn-apply::after,
.team .team-list .btn-applyed::after,
.team-list .team .btn-applyed::after,
.team .btn-join::after,
.team .team-content .team-btn-group .btn-list::after,
.team-content .team-btn-group .team .btn-list::after,
.team .team-content .team-btn-group .btn-invite::after,
.team-content .team-btn-group .team .btn-invite::after,
.team .team-content .team-btn-group .btn-dismiss::after,
.team-content .team-btn-group .team .btn-dismiss::after {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    text-align: center;
    /* content: '发起队伍招募'; */
    color: #b08d3f;
    font-size: 16px;
    line-height: 20px;
}
.team .btn-team:last-child,
.team .btn-view:last-child,
.team .team-list .btn-apply:last-child,
.team-list .team .btn-apply:last-child,
.team .team-list .btn-applyed:last-child,
.team-list .team .btn-applyed:last-child,
.team .btn-join:last-child,
.team .team-content .team-btn-group .btn-list:last-child,
.team-content .team-btn-group .team .btn-list:last-child,
.team .team-content .team-btn-group .btn-invite:last-child,
.team-content .team-btn-group .team .btn-invite:last-child,
.team .team-content .team-btn-group .btn-dismiss:last-child,
.team-content .team-btn-group .team .btn-dismiss:last-child {
    margin-right: 0;
}
.team .btn-view,
.team .team-list .btn-apply,
.team-list .team .btn-apply,
.team .team-list .btn-applyed,
.team-list .team .btn-applyed {
    background-image: url('../image/sprite.png');
    background-position: 0px -2770px;
    width: 306px;
    height: 93px;
}
.team .btn-view.on,
.team .team-list .on.btn-apply,
.team-list .team .on.btn-apply,
.team .team-list .on.btn-applyed,
.team-list .team .on.btn-applyed,
.team .btn-view:hover,
.team .team-list .btn-apply:hover,
.team-list .team .btn-apply:hover,
.team .team-list .btn-applyed:hover,
.team-list .team .btn-applyed:hover {
   
}
.team .btn-view::after,
.team .team-list .btn-apply::after,
.team-list .team .btn-apply::after,
.team .team-list .btn-applyed::after,
.team-list .team .btn-applyed::after {
    content: '来自好友邀请';
}
.team .btn-join,
.team .team-content .team-btn-group .btn-list,
.team-content .team-btn-group .team .btn-list,
.team .team-content .team-btn-group .btn-invite,
.team-content .team-btn-group .team .btn-invite,
.team .team-content .team-btn-group .btn-dismiss,
.team-content .team-btn-group .team .btn-dismiss {
    background-image: url('../image/sprite.png');
    background-position: 0px -1954px;
    width:306px;
    height: 93px;
}
.team .btn-join.on,
.team .team-content .team-btn-group .on.btn-list,
.team-content .team-btn-group .team .on.btn-list,
.team .team-content .team-btn-group .on.btn-invite,
.team-content .team-btn-group .team .on.btn-invite,
.team .team-content .team-btn-group .on.btn-dismiss,
.team-content .team-btn-group .team .on.btn-dismiss,
.team .btn-join:hover,
.team .team-content .team-btn-group .btn-list:hover,
.team-content .team-btn-group .team .btn-list:hover,
.team .team-content .team-btn-group .btn-invite:hover,
.team-content .team-btn-group .team .btn-invite:hover,
.team .team-content .team-btn-group .btn-dismiss:hover,
.team-content .team-btn-group .team .btn-dismiss:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -1852px;
    width:306px;
    height: 93px;
}
.team .btn-join::after,
.team .team-content .team-btn-group .btn-list::after,
.team-content .team-btn-group .team .btn-list::after,
.team .team-content .team-btn-group .btn-invite::after,
.team-content .team-btn-group .team .btn-invite::after,
.team .team-content .team-btn-group .btn-dismiss::after,
.team-content .team-btn-group .team .btn-dismiss::after {
    /* content: '寻找心仪道友'; */
}

.section4 .arrow-left {
    cursor: pointer;
    background-image: url('../image/sprite.png');
    background-position: 0px -3952px;
    width: 74px;
    height: 70px;
    position: absolute;
    right: 50%;
    margin-right: 489px;
    margin-top: 302px;
}

.section4 .arrow-right {
    cursor: pointer;
    background-image: url('../image/sprite.png');
    background-position: 0px -4062px;
    width: 74px;
    height: 70px;
    position: absolute;
    left: 50%;
    margin-left: 489px;
    margin-top: 302px;
}

.section4 .status-content {
    position: relative;
    padding-top: 522px;
}
.section4 .status-content .reward-status {
    background-image: url('../image/sprite.png');
    background-position: 0px -873px;
    width: 167px;
    height: 41px;
}
.section4 .status-content .reward-status.on {
    background-image: url('../image/sprite.png');
    background-position: 0px -792px;
    width: 167px;
    height: 41px;
}
.section4 .status-content .status-leader {
    position: absolute;
    right: 50%;
    margin-right: 138px;
}
.section4 .status-content .status-member {
    position: absolute;
    left: 50%;
    margin-left: 85px;
}

.team-content {
    color: #6e573e;
    width: 960px;
    margin: 0 auto;
    letter-spacing: 1px;
}
.team-content .team-name,
.team-content .team-list .leader-name,
.team-list .team-content .leader-name,
.team-content .team-list .server-name,
.team-list .team-content .server-name,
.team-content .team-list .team-num,
.team-list .team-content .team-num {
    padding-top: 54px;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    /* color: #ffe6ae; */
    letter-spacing: 6px;
}
.team-content .role-list {
    overflow: hidden;
    position: relative;
    padding: 36px 80px 0;
}
.team-content .role-list .team-leader,
.team-content .role-list .team-num,
.team-detail .team-content .role-list .team-num {
    position: absolute;
    left: 80px;
    top: 36px;
    font-size: 20px;
    line-height: 1;
}
.team-content .role-list .team-num {
    left: 344px;
}
.team-content .role-list .role-item {
    float: left;
    margin-right: 16px;
}
.team-content .role-list .role-item.first {
    margin-right: 32px;
    margin-left: 22px;
}
.team-content .role-list .role-item.first .role-img-box {
    padding: 7px;
    width: 170px;
    height: 170px;
    margin-top: 0;
}
.team-content .role-list .role-img-box {
    width: 126px;
    height: 126px;
    margin-top: 22px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #cebcac;
    padding: 4px;
}
.team-content .role-list .role-name {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    padding-top: 12px;
}
.team-content .team-des-title {
    font-size: 24px;
    line-height: 1;
    padding: 32px 80px 12px;
    color: #62492d;
    font-weight: bold;
}
.team-content .team-des {
    font-size: 20px;
    line-height: 28px;
    padding: 0 80px;
    height: 84px;
}
.team-content .team-btn-group {
    margin: 56px auto 0;
    text-align: center;
}
.team-content .team-btn-group .btn-join,
.team-content .team-btn-group .btn-list,
.team-content .team-btn-group .btn-invite,
.team-content .team-btn-group .btn-dismiss {
    background-image: url('../image/sprite.png');
    background-position: 0px -1954px;
    width: 305px;
    height:96px;
    margin-right: 24px;
}
.team-content .team-btn-group .btn-join.on,
.team-content .team-btn-group .on.btn-list,
.team-content .team-btn-group .on.btn-invite,
.team-content .team-btn-group .on.btn-dismiss,
.team-content .team-btn-group .btn-join:hover,
.team-content .team-btn-group .btn-list:hover,
.team-content .team-btn-group .btn-invite:hover,
.team-content .team-btn-group .btn-dismiss:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -1852px;
    
}
.team-content .team-btn-group .btn-join:last-child,
.team-content .team-btn-group .btn-list:last-child,
.team-content .team-btn-group .btn-invite:last-child,
.team-content .team-btn-group .btn-dismiss:last-child {
    margin-right: 0;
}
.team-content .team-btn-group .btn-join.disabled,
.team-content .team-btn-group .disabled.btn-list,
.team-content .team-btn-group .disabled.btn-invite,
.team-content .team-btn-group .disabled.btn-dismiss {
    opacity: 0;
    pointer-events: none;
}
.team-content .team-btn-group .btn-list {
    background-image: url('../image/sprite.png');
    background-position: 0px -2158px;
    width: 259px;
    height: 62px;
}
.team-content .team-btn-group .btn-list.on,
.team-content .team-btn-group .btn-list:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -2056px;
    width: 259px;
    height: 62px;
}
.team-content .team-btn-group .btn-invite {
    background-image: url('../image/sprite.png');
    background-position: 0px -1750px;
    width: 259px;
    height: 62px;
}
.team-content .team-btn-group .btn-invite.on,
.team-content .team-btn-group .btn-invite:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -1648px;
    width: 259px;
    height: 62px;
}
.team-content .team-btn-group .btn-dismiss {
    background-image: url('../image/sprite.png');
    background-position: 0px -1546px;
    width: 259px;
    height: 62px;
}
.team-content .team-btn-group .btn-dismiss.on,
.team-content .team-btn-group .btn-dismiss:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -1444px;
    width: 259px;
    height: 62px;
}

.apply {
    width: 480px;
    padding-top: 102px;
    margin: 0 auto;
}
.apply .apply-title {
    background-image: url('../image/sprite.png');
    background-position: 0px -255px;
    width: 151px;
    height: 35px;
    margin: 0 auto 14px;
}
.apply .apply-list {
    height: 520px;
    overflow-y: auto;
}
.apply .apply-item {
    position: relative;
    height: 56px;
    line-height: 56px;
    font-size: 24px;
    color: #62492d;
}
.apply .apply-item::after {
    content: '';
    display: block;
    position: absolute;
    background-image: url('../image/sprite.png');
    background-position: 0px 0px;
    width: 473px;
    height: 1px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-repeat: repeat-x;
}
.apply .apply-name {
    display: inline-block;
    width: 138px;
}
.apply .apply-role {
    display: inline-block;
    width: 110px;
}
.apply .apply-btn,
.apply .apply-refuse-btn {
    background-image: url('../image/sprite.png');
    background-position: 0px -105px;
    width: 108px;
    height: 35px;
    position: absolute;
    top: 10.5px;
    right: 118px;
}
.apply .apply-refuse-btn {
    background-image: url('../image/sprite.png');
    background-position: 0px -180px;
    width: 108px;
    height: 35px;
    right: 4px;
}

.create-team {
    width: 390px;
    padding-top: 102px;
    margin: 0 auto;
    position: relative;
}
.create-team .team-title {
    background-image: url('../image/sprite.png');
    background-position: 0px -4884px;
    width: 278px;
    height: 226px;
    pointer-events: none;
}
.create-team .team-name,
.create-team .team-list .leader-name,
.team-list .create-team .leader-name,
.create-team .team-list .server-name,
.team-list .create-team .server-name,
.create-team .team-list .team-num,
.team-list .create-team .team-num {
    position: absolute;
    top: 207px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    padding: 0 16px;
    font-size: 24px;
}
.create-team .team-name::-webkit-input-placeholder,
.create-team .team-list .leader-name::-webkit-input-placeholder,
.team-list .create-team .leader-name::-webkit-input-placeholder,
.create-team .team-list .server-name::-webkit-input-placeholder,
.team-list .create-team .server-name::-webkit-input-placeholder,
.create-team .team-list .team-num::-webkit-input-placeholder,
.team-list .create-team .team-num::-webkit-input-placeholder {
    color: #6e6e6e;
}
.create-team .team-name::-moz-placeholder,
.create-team .team-list .leader-name::-moz-placeholder,
.team-list .create-team .leader-name::-moz-placeholder,
.create-team .team-list .server-name::-moz-placeholder,
.team-list .create-team .server-name::-moz-placeholder,
.create-team .team-list .team-num::-moz-placeholder,
.team-list .create-team .team-num::-moz-placeholder {
    color: #6e6e6e;
}
.create-team .team-name:-ms-input-placeholder,
.create-team .team-list .leader-name:-ms-input-placeholder,
.team-list .create-team .leader-name:-ms-input-placeholder,
.create-team .team-list .server-name:-ms-input-placeholder,
.team-list .create-team .server-name:-ms-input-placeholder,
.create-team .team-list .team-num:-ms-input-placeholder,
.team-list .create-team .team-num:-ms-input-placeholder {
    color: #6e6e6e;
}
.create-team .team-name::placeholder,
.create-team .team-list .leader-name::placeholder,
.team-list .create-team .leader-name::placeholder,
.create-team .team-list .server-name::placeholder,
.team-list .create-team .server-name::placeholder,
.create-team .team-list .team-num::placeholder,
.team-list .create-team .team-num::placeholder {
    color: #6e6e6e;
}
.create-team .team-desc {
    position: absolute;
    top: 342px;
    left: 0;
    box-sizing: border-box;
    resize: none;
    width: 100%;
    height: 215px;
    padding: 16px;
    font-size: 24px;
    line-height: 1.5;
}
.create-team .team-desc::-webkit-input-placeholder {
    color: #6e6e6e;
}
.create-team .team-desc::-moz-placeholder {
    color: #6e6e6e;
}
.create-team .team-desc:-ms-input-placeholder {
    color: #6e6e6e;
}
.create-team .team-desc::placeholder {
    color: #6e6e6e;
}
.create-team .team-btn {
    background-image: url('../image/sprite.png');
    background-position: 0px -3844px;
    width: 367px;
    height: 68px;
    position: absolute;
    top: 582px;
    left: 14px;
}
.create-team .team-btn:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -3736px;
    width: 367px;
    height: 68px;
}

.appoint-reward {
    width: 442x;
    height: 458px;
    margin: 0 auto;
    background: url('../image/appoint-reward.png?v=1') no-repeat center bottom;
}

.invite-friend {
    padding-top: 90px;
    padding-left: 80px;
    position: relative;
}
.invite-friend .invite-title {
    position: absolute;
    pointer-events: none;
    width: 631px;
    height: 629px;
    background: url('../image/invite.png') no-repeat center;
}
.invite-friend .invite-link {
    position: absolute;
    top: 200px;
    left: 80px;
    box-sizing: border-box;
    padding: 0 1em;
    width: 633px;
    height: 55px;
    font-size: 22px;
}
.invite-friend .invite-copy {
    position: absolute;
    top: 200px;
    left: 725px;
    background-image: url('../image/sprite.png');
    background-position: 0px -1045px;
    width: 178px;
    height: 55px;
}
.invite-friend .invite-img {
    position: absolute;
    top: 370px;
    left: 98px;
    display: block;
    width: 602px;
    height: 339px;
    background-color: #848484;
}

.recieve-invite {
    padding-top: 147px;
    padding-left: 54px;
    position: relative;
}
.recieve-invite .invite-title {
    position: absolute;
    pointer-events: none;
    width: 404px;
    height: 547px;
    background: url('../image/receive-invite.png') no-repeat center;
}
.recieve-invite .invite-name {
    position: absolute;
    left: 134px;
    top: 261px;
    color: #62492d;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 1px;
}
.recieve-invite .server-name {
    position: absolute;
    top: 324px;
    left: 78px;
    font-size: 22px;
    text-align: center;
    letter-spacing: 3px;
    color: #62492d;
}
.recieve-invite .invite-tip {
    background-image: url('../image/sprite.png');
    background-position: 0px -41px;
    width: 430px;
    height: 24px;
    position: absolute;
    left: 54px;
    top: 409px;
}
.recieve-invite .invite-btn,
.recieve-invite .accept-btn {
    position: absolute;
    left: 84px;
    top: 487px;
    background-image: url('../image/sprite.png');
    background-position: 0px -3412px;
    width: 340px;
    height: 80px;
}
.recieve-invite .invite-btn:hover,
.recieve-invite .accept-btn:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -3304px;
    width: 340px;
    height: 80px;
}
.recieve-invite .accept-btn {
    background-image: url('../image/sprite.png');
    background-position: 0px -3196px;
    width: 340px;
    height: 80px;
}
.recieve-invite .accept-btn:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -3088px;
    width: 340px;
    height: 80px;
}

.dismiss-team {
    padding-top: 147px;
    padding-left: 70px;
    position: relative;
}
.dismiss-team .dissmiss-title {
    position: absolute;
    pointer-events: none;
    left: 138px;
    background-image: url('../image/sprite.png');
    background-position: 0px -4430px;
    width: 246px;
    height: 151px;
}
.dismiss-team .dissmiss-btn {
    position: absolute;
    left: 84px;
    top: 408px;
    background-image: url('../image/sprite.png');
    background-position: 0px -2980px;
    width: 340px;
    height: 80px;
}
.dismiss-team .dissmiss-btn:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -2872px;
    width: 340px;
    height: 80px;
}

.join-success {
    position: relative;
    padding-top: 247px;
}
.join-success .join-title {
    position: absolute;
    pointer-events: none;
    left: 44px;
    background-image: url('../image/sprite.png');
    background-position: 0px -4621px;
    width: 429px;
    height: 223px;
}
.join-success .team-name,
.join-success .team-list .leader-name,
.team-list .join-success .leader-name,
.join-success .team-list .server-name,
.team-list .join-success .server-name,
.join-success .team-list .team-num,
.team-list .join-success .team-num {
    position: absolute;
    left: 44px;
    width: 429px;
    text-align: center;
    top: 342px;
    color: #62492d;
    font-size: 22px;
    line-height: 28px;
}

.team-detail {
    position: relative;
    padding-top: 46px;
}
.team-detail .team-content {
    /* color: #dbcbba; */
    width: 804px;
    margin: 0 auto;
    letter-spacing: 1px;
}
.team-detail .team-content .team-name,
.team-detail .team-content .team-list .leader-name,
.team-list .team-detail .team-content .leader-name,
.team-detail .team-content .team-list .server-name,
.team-list .team-detail .team-content .server-name,
.team-detail .team-content .team-list .team-num,
.team-list .team-detail .team-content .team-num {
    font-size: 26px;
    letter-spacing: 3px;
}
.team-detail .team-content .role-list {
    overflow: hidden;
    position: relative;
    padding: 30px 0 0;
}
.team-detail .team-content .role-list .team-leader,
.team-detail .team-content .role-list .team-num {
    position: absolute;
    left: 0px;
    top: 28px;
    font-size: 20px;
    line-height: 1;
}
.team-detail .team-content .role-list .team-num {
    left: 260px;
}
.team-detail .team-content .team-des-title {
    padding: 24px 12px 0;
}
.team-detail .team-content .team-des {
    padding: 4px 12px 0;
}
.team-detail .team-content .team-btn-group {
    margin: 144px auto 0;
    text-align: center;
}
.team-detail .team-content .team-btn-group .btn-join,
.team-detail .team-content .team-btn-group .btn-list,
.team-detail .team-content .team-btn-group .btn-invite,
.team-detail .team-content .team-btn-group .btn-dismiss {
    background-image: url('../image/sprite.png');
    background-position: 0px -3628px;
    width: 340px;
    height: 80px;
}
.team-detail .team-content .team-btn-group .btn-join:hover,
.team-detail .team-content .team-btn-group .btn-list:hover,
.team-detail .team-content .team-btn-group .btn-invite:hover,
.team-detail .team-content .team-btn-group .btn-dismiss:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -3520px;
    
}
.team-detail .team-content .team-btn-group .btn-join.disabled,
.team-detail .team-content .team-btn-group .disabled.btn-list,
.team-detail .team-content .team-btn-group .disabled.btn-invite,
.team-detail .team-content .team-btn-group .disabled.btn-dismiss {
    opacity: 0.3;
    pointer-events: none;
}

.team-list {
    position: relative;
    padding-top: 90px;
}
.team-list .list-title {
    position: absolute;
    pointer-events: none;
    margin-left: 64px;
    background-image: url('../image/sprite.png');
    background-position: 0px -4285px;
    width: 550px;
    height: 105px;
}
.team-list .team-table {
    margin: 121px auto 0;
    box-sizing: content-box;
    width: 997px;
    height: 416px;
    overflow-y: auto;
}
.team-list .team-item {
    height: 52px;
    line-height: 52px;
    color: #62492d;
    font-size: 22px;
    position: relative;
}
.team-list .team-item.odd {
    background-image: url('../image/sprite.png');
    background-position: 0px -954px;
}
.team-list .team-name,
.team-list .leader-name,
.team-list .server-name,
.team-list .team-num {
    display: inline-block;
    box-sizing: content-box;
    width: 180px;
    padding-left: 53px;
}
.team-list .leader-name,
.team-list .server-name,
.team-list .team-num {
    padding-left: 0;
    width: 175px;
}
.team-list .server-name {
    width: 152px;
}
.team-list .team-num {
    width: 75px;
}
.team-list .btn-view,
.team-list .btn-apply,
.team-list .btn-applyed {
    background-image: url('../image/sprite.png');
    background-position: 0px -634px;
    width: 111px;
    height: 37px;
    position: absolute;
    right: 202px;
    top: 7px;
}
.team-list .btn-apply,
.team-list .btn-applyed {
    right: 81px;
    background-image: url('../image/sprite.png');
    background-position: 0px -480px;
    width: 111px;
    height: 37px;
}
.team-list .btn-applyed {
    background-image: url('../image/sprite.png');
    background-position: 0px -557px;
    width: 111px;
    height: 37px;
    cursor: not-allowed;
}
.team-list .team-btn-group {
    margin-top: 33px;
    width: 100%;
    text-align: center;
}
.team-list .btn-prev,
.team-list .btn-next {
    background-image: url('../image/sprite.png');
    background-position: 0px -405px;
    width: 138px;
    height: 35px;
    margin-right: 24px;
}
.team-list .btn-prev.disabled,
.team-list .disabled.btn-next {
    opacity: 0.3;
    pointer-events: none;
}
.team-list .btn-next {
    background-image: url('../image/sprite.png');
    background-position: 0px -330px;
    width: 138px;
    height: 35px;
    margin-right: 0;
}

.role-select {
    position: relative;
    padding-top: 220px;
}
.role-select .role-img {
    position: absolute;
    top: 220px;
    left: 348px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
}
.role-select .role-btn-group {
    box-sizing: border-box;
    position: absolute;
    top: 603px;
    left: 0;
    width: 100%;
    padding-right: 34px;
    text-align: center;
}
.role-select .btn-qy,
.role-select .btn-fx,
.role-select .btn-gw,
.role-select .btn-wd,
.role-select .btn-ty,
.role-select .btn-nj,
.role-select .btn-hh,
.role-select .btn-cs,
.role-select .btn-gd {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1900px;
    width: 60px;
    height: 60px;
    margin-right: 12px;
}
.role-select .btn-qy:last-child,
.role-select .btn-fx:last-child,
.role-select .btn-gw:last-child,
.role-select .btn-wd:last-child,
.role-select .btn-ty:last-child,
.role-select .btn-nj:last-child,
.role-select .btn-hh:last-child,
.role-select .btn-cs:last-child,
.role-select .btn-gd:last-child {
    margin-right: 0;
}
.role-select .btn-qy:hover,
.role-select .btn-fx:hover,
.role-select .btn-gw:hover,
.role-select .btn-wd:hover,
.role-select .btn-ty:hover,
.role-select .btn-nj:hover,
.role-select .btn-hh:hover,
.role-select .btn-cs:hover,
.role-select .btn-gd:hover,
.role-select .btn-qy.on,
.role-select .on.btn-fx,
.role-select .on.btn-gw,
.role-select .on.btn-wd,
.role-select .on.btn-ty,
.role-select .on.btn-nj,
.role-select .on.btn-hh,
.role-select .on.btn-cs,
.role-select .on.btn-gd {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1800px;
    width: 60px;
    height: 60px;
}
.role-select .btn-fx {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -900px;
    width: 60px;
    height: 60px;
}
.role-select .btn-fx:hover,
.role-select .btn-fx.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -800px;
    width: 60px;
    height: 60px;
}
.role-select .btn-gw {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1300px;
    width: 60px;
    height: 60px;
}
.role-select .btn-gw:hover,
.role-select .btn-gw.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1200px;
    width: 60px;
    height: 60px;
}
.role-select .btn-wd {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -2300px;
    width: 60px;
    height: 60px;
}
.role-select .btn-wd:hover,
.role-select .btn-wd.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -2200px;
    width: 60px;
    height: 60px;
}
.role-select .btn-ty {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -2100px;
    width: 60px;
    height: 60px;
}
.role-select .btn-ty:hover,
.role-select .btn-ty.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -2000px;
    width: 60px;
    height: 60px;
}
.role-select .btn-nj {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1700px;
    width: 60px;
    height: 60px;
}
.role-select .btn-nj:hover,
.role-select .btn-nj.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1600px;
    width: 60px;
    height: 60px;
}
.role-select .btn-hh {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1500px;
    width: 60px;
    height: 60px;
}
.role-select .btn-hh:hover,
.role-select .btn-hh.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1400px;
    width: 60px;
    height: 60px;
}
.role-select .btn-cs {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -700px;
    width: 60px;
    height: 60px;
}
.role-select .btn-cs:hover,
.role-select .btn-cs.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -600px;
    width: 60px;
    height: 60px;
}
.role-select .btn-gd {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1100px;
    width: 60px;
    height: 60px;
}
.role-select .btn-gd:hover,
.role-select .btn-gd.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -1000px;
    width: 60px;
    height: 60px;
}
.role-select .body-type-group {
    box-sizing: border-box;
    position: absolute;
    top: 731px;
    left: 0;
    width: 100%;
    padding-right: 34px;
    text-align: center;
}
.role-select .body-type-group .btn-snan,
.role-select .body-type-group .btn-snv,
.role-select .body-type-group .btn-nv,
.role-select .body-type-group .btn-nan {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -375px;
    width: 138px;
    height: 35px;
    margin-right: 24px;
}
.role-select .body-type-group .btn-snan:last-child,
.role-select .body-type-group .btn-snv:last-child,
.role-select .body-type-group .btn-nv:last-child,
.role-select .body-type-group .btn-nan:last-child {
    margin-right: 0;
}
.role-select .body-type-group .btn-snan:hover,
.role-select .body-type-group .btn-snv:hover,
.role-select .body-type-group .btn-nv:hover,
.role-select .body-type-group .btn-nan:hover,
.role-select .body-type-group .btn-snan.on,
.role-select .body-type-group .on.btn-snv,
.role-select .body-type-group .on.btn-nv,
.role-select .body-type-group .on.btn-nan {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -300px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-snv {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -525px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-snv:hover,
.role-select .body-type-group .btn-snv.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -450px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-nv {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -225px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-nv:hover,
.role-select .body-type-group .btn-nv.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -150px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-nan {
    background-image: url('../image/sprite-role.png');
    background-position: 0px -75px;
    width: 138px;
    height: 35px;
}
.role-select .body-type-group .btn-nan:hover,
.role-select .body-type-group .btn-nan.on {
    background-image: url('../image/sprite-role.png');
    background-position: 0px 0px;
    width: 138px;
    height: 35px;
}
.role-select .server-select {
    background-image: url('../image/sprite.png');
    background-position: 0px -4172px;
    width: 390px;
    height: 73px;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    top: 803px;
    left: 301px;
}
.role-select .server-select .select-name {
    position: absolute;
    color: #6e6e6e;
    font-size: 22px;
    line-height: 73px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 0;
    left: 40px;
}
.role-select .server-select .select-list {
    position: absolute;
    left: 0;
    width: 100%;
    top: 73px;
    background-color: #62492d;
    max-height: 292px;
    overflow-y: auto;
}
.role-select .server-select .select-item {
    cursor: pointer;
    color: #6e6e6e;
    font-size: 22px;
    line-height: 72px;
    border-bottom: 1px solid #848484;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 40px;
}
.role-select .server-select .select-item.on {
    color: #ffab42;
}
.role-select .role-name {
    box-sizing: border-box;
    position: absolute;
    left: 301px;
    width: 390px;
    height: 73px;
    background-color: #62492d;
    top: 899px;
    padding: 0 40px;
    font-size: 24px;
    color: #6e6e6e;
}
.role-select .role-name::-webkit-input-placeholder {
    color: #6e6e6e;
}
.role-select .role-name::-moz-placeholder {
    color: #6e6e6e;
}
.role-select .role-name:-ms-input-placeholder {
    color: #6e6e6e;
}
.role-select .role-name::placeholder {
    color: #6e6e6e;
}
.role-select .save-btn {
    position: absolute;
    display: block;
    top: 1014px;
    left: 310px;
    background-image: url('../image/sprite.png');
    background-position: 0px -3844px;
    width: 367px;
    height: 68px;
}
.role-select .save-btn:hover {
    background-image: url('../image/sprite.png');
    background-position: 0px -3736px;
    width: 367px;
    height: 68px;
}

.rule-content {
    padding-top: 80px;
    padding-left: 24px;
    padding-right: 24px;
}
.rule-content table {
    border: 1px solid #ccc;
    border-spacing: 0;
}
.rule-content table tr td {
    border: 0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 2px;
}
.rule-content .rule-title {
    background: url('../image/rule_tit.png') no-repeat center;
    width: 426px;
    height: 48px;
    margin: 0 auto;
}
.rule-content .rule-box {
    font-size: 16px;
    color: #6e573e;
    line-height: 34px;
    width: 100%;
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}
.rule-content .rule-box a {
    color: #ff0200;
}
.rule-content .rule-box::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0);
}
.rule-content .rule-box::-webkit-scrollbar-track {
    background-color: transparent;
}
.rule-content .rule-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #6a6a70;
}
.rule-content .rule-box::-webkit-scrollbar-thumb:hover {
    background-color: #8f8f94;
}
.rule-content .rule-box::-webkit-scrollbar-thumb:active {
    background-color: #6a6a70;
}
.rule-content .rule-box::-webkit-scrollbar-track-piece {
    margin: 0;
}
#btn-view{}