.content {
    width: 100%;
    margin: auto;
}

.wrap-content,
.skill-list {
    width: 1200px;
    margin:0 auto;
    overflow: hidden;
}
.wrap-content .wrap-tit{
    position:relative;
}

/*新皮�?*/
.head-title{
    top:0;
    margin-top:-300px;
}
.head-title .head-name{margin-bottom:25px;display: flex;
    justify-content: center;
    align-items: center;}
.head-title .head-name .head-hero-name{display: flex;justify-content: center; align-items: center; position: relative;}
.head-title .head-name .head-hero-name img{
    margin:0 20px;
}
.head-title .head-grade{display: block;margin:38px auto 0;}
.head-title .head-desc{
    margin-top:0;
    white-space: pre;
}
.wrap.newSkin {
    overflow: hidden;
    width: 100%;
    background: #000 url(//game.gtimg.cn/images/yxzj/web201706/images/coming/v2/pages/skinBg.png) top center no-repeat;
    background-size: 100%;
    padding-bottom: 120px;
}

.relation-cont {
    width: 1200px;
    /*height: 370px;*/
    /*background-color: #212122;*/
    margin-top: 49px;
}
.relation-cont img{display: block;margin:0 auto;}

/*.wrap.newSkin .sub-list {
    float: none;
    margin-left: 0;
}*/


/*.wrap.newSkin .sub-list ul{
    width: 520px;
    overflow: hidden;
    margin: auto;
}*/

.skin-mystery {
    width: 1200px;
    margin:110px auto 0;
    position: relative;
}

.mystery-tit {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #c39b5e;
}

.skin-mystery .mystery-contL {
    float: left;
    width: auto;
    height: auto;
    background: none;
    margin-top: 95px;
}

.skin-mystery .mystery-contR {
    margin-top: 95px;
}

.skin-mystery .mystery-img {
    width: 520px;
    height: 450px;
    background-color: #212122;
}

.skin-head {
    height: 350px;
    padding-bottom: 40px;
}

.pagebox {
    position: relative;
    margin-top:100px;
}
.pagebox .tips{
    font-size:18px;
    color:#8f897f;
    text-align: center;
    margin:30px auto 20px;
}
.page {
    margin: 0 auto;
}
.pagebox .page{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pagebox .page.only-child{
    justify-content: center;
}
.pagebox .page.only-child .video-cont{
    width: 1086px;
    height: 626px;
}
.pagebox .page.only-child .video-img{
    width: 1023px;
    height: 576px;
}


.info-tab {
    margin: 15px 0;
}

.info-tab span,.info-tab a {
    background-color: #0c0f13;
    border-radius: 12px;
    border: solid 1px #c39b5e;
    font-size: 14px;
    color: #b98c52;
    padding: 2px 7.5px;
    margin-right: 10px;
}
.info-tab a{
    color:#1a1b1d;
    background-color: #c39b5e;
    text-decoration: none;
    cursor:pointer;
}
.info-tab a:hover{
    opacity:0.8;
}

.skin-inspir .info-gif{
    width: 560px;
    height: 315px;
    margin: 0 auto;
    position: relative;
}

.video-cont {
    box-sizing: border-box;
    width: 868px;
    border: 1px solid rgba(195,155,94, .2);
    height: 510px;
}

.video-img {
    width: 820px;
    height: 462px;
    margin: 25px auto;
    position:relative;
}

/*.video-img::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 1144px;*/
/*    height: 644px;*/
/*    background: rgba(0, 0, 0, .2);*/
/*    top: 27px;*/
/*    -webkit-transition:1s ease;*/
/*       -moz-transition:1s ease;*/
/*            transition:1s ease;*/
/*}*/

.video-img > img {
    width: 100%;
    height: 100%;
}
.video-img .player-box {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.skin-merit{
    /*width:306px;*/
    height:510px;
}
.skin-merit h6{
    font-size:26px;
    color:#c39b5e;
    text-align: center;
    line-height: 1;
    margin:40px auto 24px;
}
.skin-merit .merit-list{
    max-height:400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.skin-merit .merit-list::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #18191b;
}
    /* Rolling groove */
.skin-merit .merit-list::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* Scrollbar slider */
.skin-merit .merit-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c39b5e;
}

.skin-merit .merit-list::-webkit-scrollbar-thumb:window-inactive {
    background-color: #c39b5e;
}

.skin-merit .merit-list::-webkit-scrollbar-thumb:hover {
    background-color: #c39b5e;
    -webkit-border-radius: 4px;
}
.skin-merit .merit-list li{
    width:306px;
    height:80px;
    background:url("//game.gtimg.cn/images/yxzj/web201706/images/coming/v2/pages/bg-merit.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    margin-bottom:20px;
}
.skin-merit .merit-list li p{
    width:245px;
    font-size:16px;
    color:#8f897f;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position:relative;
    padding-left:16px;
}
.skin-merit .merit-list li:hover p{
    color:#c39b5e;
}
.skin-merit .merit-list li .icon-merit{
    width:10px;
    height:10px;
    background:url("//game.gtimg.cn/images/yxzj/web201706/images/coming/v2/pages/icon-merit.png") no-repeat;
    position:absolute;
    left:0;
    top:8px;
}

.skin-skill {
    position: relative;
    width:1086px;
    margin:110px auto 0;
}

.skin-skill ul.accCont {
    overflow: hidden;
    margin:0 auto;
}

.skin-skill li.accordLi {
    width: 108px;
    float: left;
    margin-bottom: 10px;
    position: relative;
    height: 360px;
    background: #1a1b1d;
    border-right: 3px solid #000;
}

.skin-skill li.accordLi:last-child {
    margin-right: 0;
}

.skin-skill .raider_title {
    width: 112px;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 360px;
    margin-left: 30px;
}

.skin-skill .raider_title:first-child {
    margin-left: 0;
}

.skin-skill .raider-tit {
    border: solid 1px rgba(185, 140, 82, 0.1);
    border-top: none;
    border-bottom: none;
    width: 92px;
    height: 330px;
    margin: 15px 10px;
    cursor: pointer;
}

.skin-skill .raider_title .tit1 {
    display: block;
    font-family: AlbertusMT;
    line-height: 30px;
    letter-spacing: 1px;
    color: #c39b5e;
    width: 35px;
    margin: auto;
    border-bottom: 1px solid rgba(195, 155, 94, 0.5);
    padding: 40px 0 10px 0;
}

.skin-skill .raider_title .tit2 {
    width: 34px;
    display: inline-block;
    line-height: 30px;
    line-height: 36px;
    letter-spacing: 6px;
    color: #c39b5e;
    font-weight: 600;
    /*border-bottom: 5px solid #c39b5e;*/
    padding: 24px 0;
}

.skin-skill li.accordLi:first-child .tit2 {
    border-bottom: none;
    padding: 24px 0;
}

.skin-skill .cont_box {
    width: 638px;
    position: absolute;
    left: 112px;
    height: 360px;
}

.skin-skill .cont_box img {
    width: 100%;
    height: 100%;
}

.skin-inspir {
    position: relative;
    width: 1200px;
    margin:112px auto 0;

}

.skin-dubbing {
    width: 1200px;
    margin:115px auto 0;
    position: relative;
}

.skin-dubbing .wrap-content{
    padding-top:78px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.skin-dubbing .voice-list{
    width:586px;
}
.skin-dubbing .voice-list h6{
    font-size:24px;
    color:#c39b5e;
    text-align: left;
    margin-bottom:40px;
}
.skin-dubbing .voice-list ul{
    height:305px;
    overflow-y: auto;
    background: #0d0d0e;
    padding:10px 0;
}
.skin-dubbing .voice-list li{
    width:565px;
    height:56px;
    position:relative;
    box-sizing: border-box;
    padding-left:50px;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom:5px;
    cursor: pointer;
}
.skin-dubbing .voice-list li.active{
    background:#1a1a1a;
    border-radius: 3px;
}

.skin-dubbing .voice-list li p{
    width:480px;
    line-height: 50px;
    font-size:18px;
    color:#8f897f;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.skin-dubbing .voice-list li.active p{
    color:#c39b5e;
}
.skin-dubbing .voice-list li:hover p{
    color:#c39b5e;
}
.skin-dubbing .voice-list li .icon-voice{
    width:16px;
    height:25px;
    background:url("//game.gtimg.cn/images/yxzj/web201706/images/coming/v2/pages/icon-voice1.png") no-repeat;
    margin-right:18px;
}
.skin-dubbing .voice-list li.active .icon-voice{
    background:url("//game.gtimg.cn/images/yxzj/web201706/images/coming/v2/pages/icon-voice2.png") no-repeat;
    animation: showVoice linear infinite 1s;
}
@keyframes showVoice {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
.skin-dubbing .voice-list ul::-webkit-scrollbar {
    /*������������ʽ*/
    width : 4px;  /*�߿��ֱ��Ӧ�����������ijߴ�*/
    height: 1px;
}
.skin-dubbing .voice-list ul::-webkit-scrollbar-thumb {
    /*��������������*/
    border-radius: 10px;
    background   : #c39b5e;
}
.skin-dubbing .voice-list ul::-webkit-scrollbar-track {
    /*������������*/
    border-radius: 10px;
    background   : #1a1b1d;
}

.design-cont-txt {
    font-size: 16px;
    line-height: 36px;
    letter-spacing: 1px;
    color: #8f897f;
    margin-top: 40px;
}

.design-cont {
    overflow: hidden;
    margin-top: 49px;
}

.design-contL {
    width: 580px;
    height: 320px;
    background-color: #212122;
    float: left;
}

.design-contR {
    width: 580px;
    height: 320px;
    background-color: #212122;
    float: right;
}


/*hero-mystery*/

.hero-mystery {
    position: relative;
    width: 1200px;
    margin: auto;
    margin-top: 110px;
}

.hero-mystery .wrap-content {
    overflow: hidden;
    margin-top: 70px;
}

.mystery-contL {
    float: left;
    width: 520px;
    height: 450px;
    background-color: #212122;
}

.mystery-contR {
    float: right;
    position: relative;
    height: 450px;
}

.mystery-txt {
    width: 600px;
    height: 305px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 36px;
    letter-spacing: 1px;
    color: #8f897f;
    overflow: hidden;
    overflow-y:auto;
    padding-right:20px;
}
.mystery-txt::-webkit-scrollbar {
    width: 4px;
    height: 498px;
    background-color: #18191b;
}
.mystery-txt::-webkit-scrollbar-track {
    border-radius: 10px;
}
.mystery-txt::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #1f2123;
}
.mystery-txt::-webkit-scrollbar-thumb:window-inactive {
    background-color: #1f2123;
}
.mystery-txt::-webkit-scrollbar-thumb:hover {
    background-color: #1f2123;
    -webkit-border-radius: 4px;
}

/*hero-comment*/

.hero-comment {
    position: relative;
    width: 1200px;
    margin: auto;
    margin-top: 80px;
}

.comment-list {
    margin-top: 125px;
}

.comment-list li {
    width: 100%;
    overflow: hidden;
    margin-bottom: 70px;
}

.comment-list li .comment-img {
    overflow: hidden;
    float: left;
    width: 140px;
    height: 140px;
    background-color: #19191a;
    border-radius: 50%;
}

.comment-list li .comment-img img {
    display: block;
    border-radius: 50%;
}

.comment-list li .comment-cont {
    float: left;
    margin-left: 45px;
    width: 1008px;
}

.comment-list li .comment-name {
    font-size: 28px;
    line-height: 28px;
    color: #c39b5e;
    margin-bottom: 20px;
}

.comment-list li .comment-txt {
    font-size: 16px;
    line-height: 36px;
    color: #8f897f;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}



.hero-impression{    
    position: relative;
    width: 1200px;
    margin: auto;
    margin-top: 110px;
}
.hero-impression .wrap-content{margin-top: 70px;padding-bottom:100px;}
.impression-tips{font-size:18px;color: #999;margin-bottom:34px;font-weight: bold;}
.impression-show{overflow: hidden;margin-bottom:50px;}
.impression-list{display: inline;-webkit-transition:0.8s ease;-moz-transition:0.8s ease;transition:0.8s ease;}
.impression-list li,.a-toggle{ position: relative; cursor:pointer;font-size:16px;color:#fff;display: inline-block;height:32px;padding:0 32px;line-height:32px;border-radius:18px;vertical-align: top;margin-bottom:26px;margin-right:8px;
    background-color:rgba(195,155,94, 0.2);opacity:1;
    -webkit-transition:0.8s ease;-moz-transition:0.8s ease;transition:0.8s ease;
}
.impression-list li:nth-child(1),.impression-list li:nth-child(2),.impression-list li:nth-child(3),.impression-list li:nth-child(4),.impression-list li:nth-child(5),.impression-list li:nth-child(6),.impression-list li:nth-child(7),.impression-list li:nth-child(8),.impression-list li:nth-child(9),.impression-list li:nth-child(10)
{background-color:rgba(195,155,94, 1);}
.impression-list li:nth-child(11),.impression-list li:nth-child(12),.impression-list li:nth-child(13),.impression-list li:nth-child(14),.impression-list li:nth-child(15),.impression-list li:nth-child(16),.impression-list li:nth-child(17),.impression-list li:nth-child(18),.impression-list li:nth-child(19),.impression-list li:nth-child(20)
{background-color:rgba(195,155,94, 0.8);}
.impression-list li:nth-child(21),.impression-list li:nth-child(22),.impression-list li:nth-child(23),.impression-list li:nth-child(24),.impression-list li:nth-child(25),.impression-list li:nth-child(26),.impression-list li:nth-child(27),.impression-list li:nth-child(28),.impression-list li:nth-child(29),.impression-list li:nth-child(30)
{background-color:rgba(195,155,94, 0.6);}
.impression-list li:nth-child(31),.impression-list li:nth-child(32),.impression-list li:nth-child(33),.impression-list li:nth-child(34),.impression-list li:nth-child(35),.impression-list li:nth-child(36),.impression-list li:nth-child(37),.impression-list li:nth-child(38),.impression-list li:nth-child(39),.impression-list li:nth-child(40)
{background-color:rgba(195,155,94, 0.4);}
.show-less .impression-list li{opacity:0;display: none;}
.show-less .impression-list li:nth-child(1),.show-less .impression-list li:nth-child(2),.show-less .impression-list li:nth-child(3),.show-less .impression-list li:nth-child(4),.show-less .impression-list li:nth-child(5),.show-less .impression-list li:nth-child(6),.show-less .impression-list li:nth-child(7),.show-less .impression-list li:nth-child(8),.show-less .impression-list li:nth-child(9),.show-less .impression-list li:nth-child(10)
{display: inline-block;opacity:1;}
.show-less .a-toggle-hide{display: none;}
.hero-impression .impression-list li:hover,.impression-post .btn-submit:hover,.hero-impression .impression-list li.voted{background-color:#9e6a2e}

.impression-show .a-toggle{background:none;color:#c39b5e;border:1px solid #c39b5e}
.impression-show .a-toggle:hover{text-decoration: none;background-color: #271f14;}
.impression-show .a-toggle-more{border:none;background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAOCAYAAADjXQYbAAAAYklEQVR4AWI4PDsOUAcdaAAIxlAUbnrQ/CGQCAoUCQoqgaLetTOA3OEbHJhbIEf256fEA1PRVbhgKroGB0xF12KLouuxRNGNmKI4YFahwxo9tKuHapwwNcKtRkh4o/lSNPwHV8S2tlrm4CMAAAAASUVORK5CYII=) no-repeat 75px center;}
.impression-show .a-toggle-hide{background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHCAYAAADTcMcaAAAAPElEQVR4AWM4PDsOG5YH4v1ArIBNHpeGA0DsgEsjdg0IhQrYNOLTwIBLI04N+DRi1UBII4izAEUDYY0LAHshqklrMXDaAAAAAElFTkSuQmCC) no-repeat 70px center;}

.impression-post{position:relative;width:720px;text-align:left;margin:0 auto;font-size:16px;}
.impression-post .input-txt{width:600px;height:32px;line-height:32px;padding:10px 15px;background-color:#fff;border:none;}
.impression-post .btn-submit{position: absolute;right:0;top:0;color:#fff;font-weight:bold;width:90px;height:52px;background-color:#c39b5e;border:none;cursor:pointer;letter-spacing:0.2rem;}

.buy-wrap {
    width: 280px;
    margin: 0 auto;
    line-height: 1;
    color: #f7e0ae;
    font-size: 22px; 
    text-align: center;
}
.price-wrap {
    font-weight: bold;
}
.price-wrap img {
    width: 31px;
    height: 56px;
}
.price-wrap .price {
    font-size: 72px;
}
.buy-btn {
    display: block;
    width: 231px;
    height: 58px;
    margin: 15px auto 10px;
    cursor: pointer;
}
.buy-tip {
    font-size: 18px;
    color: #acaaa7;
}
.buy-tip span {
    color: #c39b5e;
}