@charset "UTF-8";
/*公共样式*/
html,body{
  font-size:75PX;
}
#page {
  width: 10.00000rem;
  /* height: 13.33333rem; */
  /*padding-top: 0.73333rem;*/
  font-family: "PingFang","Microsoft YaHei";
}
.top-bar {
  display:none;
  position: relative;
  height: 0.98667rem;
  /* padding-top: 0.73333rem; */
  background: url(../images/common/top-bar-bg.jpg) no-repeat 0 -0.73333rem;
  background-size: 10.00000rem 1.72000rem;
}
.black-btn{
  position: absolute;
  display: block;
  left:0.32000rem;
  top:0.10667rem;
  width: 0.72000rem;
  height:0.72000rem;
  background:url(../images/common/black.png) no-repeat 0 0;
  background-size: 0.72000rem 0.72000rem;;
}
.main{
  background-color: #f4f7fc;
}
.page-title{
  padding-top:0.13333rem;
  font-size: 0.42667rem;
  text-align: center;
}
.tab-header li:first-child{
  margin-left: 0!important;
}
.tab-content{
  display: none;
}
.tab-container .actived{
  display: block;
}

/*公共样式*/

.zjlb {
  padding-top: 0.48000rem;
  padding-left: 0.46667rem;
}
/*主角列表*/
.zjlb-list{}
.zjlb-list ul{
  margin-left: -0.56000rem;
}
.zjlb-list ul li {
  position: relative;
  width: 4.26667rem;
  height: 7.22667rem;
  margin-left: 0.56000rem;
  margin-bottom: 0.66667rem;
}
.zjlb-list ul li a{
  position: relative;
  z-index:1;
}
.zjlb-list ul li::after{
  position: absolute;
  display:block;
  content:' ';
  left:-0.13333rem;
  top:-0.16000rem;
  width:4.56000rem;
  height:7.56000rem;
  background: url(../images/zjlb/border.png) no-repeat 0 0;
  background-size:100% 100%;
}
.zjlb-list ul img{}
.zjlb-list .info{
  position: absolute;
  bottom:0.40000rem;
  left: 50%;
  width: 3.58667rem;
  height:1.25333rem;
  margin-left: -1.73333rem;
  padding:0.05333rem;
  padding-left: 0;
  padding-right: 0;
  border:2PX solid #396e95;
  border-left:none;
  border-right: none;
  color: #396e95;
}
.zjlb-list .info-name{
  position: relative;
  margin-top:0.13333rem;
  text-align: center;
  font-size: 0.42667rem;
  line-height: 0.40000rem;
}
.zjlb-list .info-name::after{
  position: relative;
  display: inline-block;
  content:' ';
  left:0.33333rem;
  width:0.29333rem;
  height:0.34667rem;
  background: url(../images/zjlb/more.png) no-repeat 0 0;
  background-size: 0.29333rem 0.34667rem;;
}
.zjlb-list .info-dsp{
  display: block;
  margin-top:0.10667rem;
  font-size: 0.30667rem;
  text-align: center;
}
.zjlb-list .info .border-wrapper{
  height:1.24000rem;
  border:1PX solid #396e95;
  border-left:none;
  border-right: none;
}
/*主角列表*/

/*主角详情*/
.zjxq{}
/*头部*/
.main-info{
  position: relative;
  height:7.54667rem;
  background: url(../images/zjxq/info-bg.jpg) no-repeat 0 0;
  background-size: 10.00000rem 7.54667rem;
  /* padding-bottom: 0.44000rem; */

}
.main-info .subject-info{
  padding-top:0.48000rem;
}
.main-info .cv{
  margin-left:0.98667rem;
  color: #4f6d9b;
  font-size: 0.32000rem;
  line-height: 0.32000rem;
}
.main-info .subject-name{
  margin-left:0.98667rem;
  margin-top:0.18667rem;
  color: #fff;
  font-size: 0.56000rem;
  line-height: 0.56000rem;
  font-weight:bold;
}
.main-info .subject-type{
  position: relative;
  display: block;
  width:1.86667rem;
  height:0.34667rem;
  line-height: 0.34667rem;
  margin-left: 1.60000rem;
  margin-top:0.38667rem;
  border-bottom:1PX solid #fff;
  color: #fff;
  font-size: 0.29333rem;
  text-align:center;
  line-height: 0.18667rem;
}
.main-info .subject-type::before{
  position: absolute;
  display: block;
  content:' ';
  left:-0.66667rem;
  top:-0.18667rem;
  width:0.66667rem;
  height: 0.66667rem;
  background: url(../images/zjxq/subject-type-icon.png) no-repeat 0 0;
  background-size:0.66667rem 0.66667rem;
}
.main-info .subject-prop{
  position: relative;
  padding-left: 0.93333rem;
  padding-top: 0.62667rem;
  color:#fff;
  z-index:1
}
.main-info .subject-prop li{
  position: relative;
  display: block;
  width:3.86667rem;
  height:0.37333rem;
  margin-bottom: 0.29333rem;
  -moz-border-radius: 0.08000rem;
  -webkit-border-radius: 0.08000rem;
  border-radius: 0.08000rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #4f6d9b;
  overflow: hidden;
}
.main-info .subject-prop i{
  float: left;
  display: block;
  width:1.20000rem;
  height:100%;
  background:#75a4d0;
  vertical-align:middle;
  font-style:normal;
}
.main-info .subject-prop i span{
  display: block;
  height:100%;
  padding-right:0.10667rem;
  line-height:0.37333rem;
  text-align:right;
}
.main-info .subject-prop .prop1::before,
.main-info .subject-prop .prop2::before,
.main-info .subject-prop .prop3::before,
.main-info .subject-prop .prop4::before,
.main-info .subject-prop .prop5::before{
  display:block;
  float: left;
  content: ' ';
  margin-left: 0.13333rem;
  margin-top: 0.04667rem;
  background-image:url(../images/common/main-info-icon.png);
  background-size:0.86667rem 0.61333rem;
  background-repeat:no-repeat;
}
.main-info .subject-prop .prop1::before{
  width:0.33333rem;
  height:0.28000rem;
  background-position:0rem -0.34000rem;
}
.main-info .subject-prop .prop2::before{
  width:0.29333rem;
  height:0.33333rem;
  background-position:0rem 0rem;
}
.main-info .subject-prop .prop3::before{
  width:0.32000rem;
  height:0.29333rem;
  background-position:-0.29333rem 0rem;
}
.main-info .subject-prop .prop4::before{
  width:0.25333rem;
  height:0.32000rem;
  background-position:-0.64000rem 0rem;
}
.main-info .subject-prop .prop5::before{
  width:0.20000rem;
  height:0.29333rem;
  background-position:-0.61333rem -0.34000rem;
}

.main-info .subject-prop-name{
  font-size: 0.29333rem;
  line-height: 0.29333rem;
}
.main-info .value-wrapper{
  display: block;
  font-size:0.26667rem;
  padding-left:1.41333rem;
  letter-spacing: normal;
  line-height: 0.40000rem;
}
.main-info .value1,
.main-info .value2{
  width:0.80000rem;
}
.main-info .value1{
  text-align:right;
}
.main-info .value2{
  text-align:left;
}
.main-info .value-wrapper em,
.main-info .value2{
  color: #fe7270;
  font-style: normal;
}
.main-info .value-wrapper em{
  margin-left:0.13333rem;
  margin-right:0.13333rem;
}
.main-info .subject-image{
  position: absolute;
  display: block;
  top:0.13333rem;
  left:4.72000rem;
  width:4.86667rem;
  height:5.50667rem;
}
.main-info .subject-dsp{
  width:7.89333rem;
  /* height:1.20000rem; */
  margin: 0 auto;
  margin-top: 0.61333rem;
  background: url(../images/zjxq/subject-dsp-bg.png) no-repeat 0.21333rem 0.13333rem;
  background-size:2.81333rem 0.98667rem;
  -moz-border-radius: 0.12000rem;
  -webkit-border-radius: 0.12000rem;
  border-radius: 0.12000rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgba(172,204,220,.49);

}
.main-info .subject-dsp p{
  margin-left: 1.33333rem;
  padding-top: 0.16000rem;
  padding-bottom: 0.16000rem;
  font-size: 0.26667rem;
  color:#fff;
}
/*头部*/
/*技能列表*/
.skill-list{
  margin-top:0.50667rem;
  padding-bottom: 0.60000rem;
}
.skill-item{
  position: relative;
  width:9.34667rem;
  /* height:4.66667rem; */
  margin:0 auto;
  background: url(../images/zjxq/skill-item-bg.jpg) repeat-y 0 0;
  background-size: 9.34667rem 4.68000rem;
}
.block-title{
  width:9.34667rem;
  height:0.37333rem;
  margin: 0 auto;
  padding-bottom: 0.10667rem;
  line-height: 0.37333rem;
  background: url(../images/zjxq/block-title-bg.png) no-repeat 0 0;
  background-size: 9.34667rem 0.37333rem;
  border-bottom: 0.02667rem solid #2e2f30;
}
.block-title::after{
  display: block;
  content: '';
  margin-top: 0.17333rem;
  border-top: 0.01333rem solid #2e2f30;
}
.block-title h3{
  padding-left: 0.05333rem;
  font-size: 0.34667rem;
  font-weight: bold;
}
.block-title span:first-child{
  margin-top:-0.13333rem;
}
.skill-item-body{
  padding-bottom:0.21333rem;
}
.skill-name{
  margin-left: 0.24000rem;
  margin-top: 0.29333rem;
}
.skill-name img{
  float: left;
  width:0.92000rem;
  height:0.92000rem;
  margin-top: 0.24000rem;
  margin-right: 0.26667rem;
  -webkit-border-radius:0.46667rem;
  -moz-border-radius:0.46667rem;
  -o-border-radius:0.46667rem;
  -ms-border-radius:0.46667rem;
  border-radius:0.46667rem;
  border:1PX solid #d3ab52;
  background-color:#d3ab52;
}
.skill-name h3{
  position: relative;
  margin-top: 0.40000rem;
  font-size: 0.37333rem;
}
.skill-type{
  position: absolute;
  right:0.36000rem;
  /* top:0.53333rem; */
  bottom:0.21333rem;
  width:0.90667rem;
  height: 0.45333rem;
  line-height: 0.50667rem;
  font-size: 0.32000rem;
  text-align: center;
  color:#fff;
  background: #efc000;
}
.skill-type::after{
  display: block;
  content: ' ';
  position: absolute;
  top:0.06667rem;
  left: 0.05333rem;
  width:0.89333rem;
  height: 0.44000rem;
  border:1PX solid #efc000;
}
.skill-dsp{
  position: relative;
  display:block;
  margin-top: 0.16000rem;
  margin-left: 0.32000rem;
  width:9.02667rem;
  font-size: 0.32000rem;
  color: rgba(0,0,0,.71);
}
.level{
  margin-top: 0.40000rem;
  margin-left: 0.32000rem;
}
.level li{
  font-size: 0.29333rem;
}
.level li i{
  color:#74c9ec;
  margin-right: 0.24000rem;
}
.level li span{
  width:8.13333rem;
  opacity: .66;
  color: #656565;
  font-size: 0.29333rem;

}
/*技能列表*/

/*常用组合*/
.combo-box{
  position: relative;
  width:9.34667rem;
  /* height:7.06667rem; */
  margin: 0 auto;
  margin-top:0.33333rem;
  margin-bottom: 0.53333rem;
  padding-right:0.13333rem;
  padding-bottom:0.13333rem;
  overflow: hidden;
  /* background: #d7e9f4; */
}
/* .combo-box::before{
  display: block;
  content:' ';
  position: absolute;
  left:0.10667rem;
  top:0.16000rem;
  width:9.34667rem;
  height:6.98667rem;
  background: #d7e9f4;
  z-index: 0;
} */
.combo-box .box-body{
  position: relative;
  /* height:6.58667rem; */
  /* margin-top: 0.33333rem; */
  padding-top:0.66667rem;
  padding-bottom:0.33333rem; 
  background:url(../images/common/box-bg.jpg) no-repeat 0 0;
  /* background-size: 9.33333rem 6.58667rem; */
  background-size:9.33333rem 100%;
  -webkit-box-shadow:0.26667rem 0.26667rem 0rem 0.13333rem #d7e9f4;
  -moz-box-shadow:0.26667rem 0.26667rem 0rem 0.13333rem #d7e9f4;
  -o-box-shadow:0.26667rem 0.26667rem 0rem 0.13333rem #d7e9f4;
  -ms-box-shadow:0.26667rem 0.26667rem 0rem 0.13333rem #d7e9f4;
  box-shadow:0.26667rem 0.26667rem 0rem 0.13333rem #d7e9f4;
  z-index: 1;
}
.combo-box .box-title-icon{
  width:1.69333rem;
  height:0.62667rem;
  margin-top: 0.20000rem;
  margin-left: 0.37333rem;
  margin-right: 0.46667rem;
  background:url(../images/zjxq/box-title-icon.png) no-repeat 0 0;
  background-size: 1.69333rem 0.62667rem;
  text-indent:0.80000rem;
  line-height:0.62667rem;
  font-size:0.34667rem;
}
.combo-box .row{
  font-size: 0.32000rem;
}
.combo-box .row2{
  margin-top: 0.21333rem;
  padding-left: 0.50667rem;
  margin-bottom: 0.53333rem;
}
.combo-box .row2 span{
  float: left;
}
.combo-box .row2 p{
  float: left;
  width: 6.73333rem;
  color:#666;
}
.combo-box-skill-item{}
.combo-box-skill-item img{
  float: left;
  margin-right: 0.18667rem;
  width:0.93333rem;
  height:0.93333rem;
  -webkit-border-radius:0.46667rem;
  -moz-border-radius:0.46667rem;
  -o-border-radius:0.46667rem;
  -ms-border-radius:0.46667rem;
  border-radius:0.46667rem;
  border:1PX solid #d3ab52;
  background-color:#d3ab52;
}
.combo-box-skill-name{
  float: left;
  line-height: 1.00000rem;
}
.combo-box .plus{
  position: relative;
  width:0.40000rem;
  height:0.40000rem;
  margin-top: 0.29333rem;
  margin-left: 0.16000rem;
  margin-right: 0.32000rem;
  overflow: hidden;
  background:url(../images/zjxq/plus.gif) no-repeat 0 0;
  background-size:0.38667rem 0.38667rem;
}
/* .combo-box .plus::before,
.combo-box .plus::after{
  position: absolute;
  display: block;
  content: ' ';
  background:#efc000;
}

.combo-box .plus::before{
  top: 50%;
  width: 100%;
  height: 0.02667rem;
}
.combo-box .plus::after{
  left:50%;
  width:0.02667rem;
  height: 100%;
} */
/*常用组合*/

/*人物传记*/
.biography{
  margin-top: 0.33333rem;
  background: url(../images/zjxq/bottom-bg.jpg) no-repeat 0 0;
  background-size:10.00000rem 8.90667rem;
}
.biography .tab{
  padding-top: 0.74667rem;
}
.biography .tab-header{
  height: 1.13333rem;
  padding-left: 0.32000rem;
  padding-top: 0.10667rem;
}
.biography .tab-header li{
  position: relative;
  width:1.40000rem;
  height: 0.53333rem;
  margin-left: 0.57333rem;
  text-align: center;
  /*line-height: 0.53333rem;*/
  font-size: 0.32000rem;
  color: #fff;
  background-color: #6982aa;
  cursor: pointer;
  z-index: 1;
}
.biography .tab-header li::after{
  display: block;
  content: ' ';
  position: absolute;
  left: 0.08000rem;
  top:0.06667rem;
  width: 1.37333rem;
  height:0.50667rem;
  border:1PX solid #6982aa;
}
.biography .tab-header li span{
  position: relative;
  z-index:1;
}
.biography .tab-header .actived{
  background-color: #efbf00;
}

.biography .tab-header .actived::after{
  border:1PX solid #efbf00;
}
.biography .tab-container,
.biography .tab-content{
  height:6.56000rem;
  overflow:auto;
}
.biography .tab-content p{
  line-height: 0.61333rem;
  text-align:center;
  color: #fff;
  font-size: 0.26667rem;
  text-shadow: 0 0.05333rem 0.12000rem rgba(62,144,187,.67);
}
/*人物传记*/

/*主角详情*/

/*式神详情*/
.ssxq .subject-image{
  left:4.96000rem;
  top:0.13333rem;
}

.ssxq .main-info{
  padding-bottom: 0rem;
}
.ss-subject-info .subject-type{
  width:2.66667rem;
  font-size:0.26667rem;
  border-bottom-style: dashed;
}
.subject-class{
  width: 0.85333rem;
  height:0.77333rem;
  margin-top: -0.10667rem;
  margin-left: 0.62667rem;
  background: url(../images/ssxq/subject-class-icon-bg.png) no-repeat 0 0;
  background-size:0.85333rem 0.77333rem;
  text-align:center;
}

.subject-class-n::before,
.subject-class-r::before,
.subject-class-sr::before,
.subject-class-ssr::before,
.subject-class-sp::before{
  display:inline-block;
  content:' ';
  margin-top:0.16000rem;
  background-image:url(../images/sslb/icon.png);
  background-repeat:no-repeat;
  background-size: 1.48000rem 0.81333rem;
}

.subject-class-n::before{
    width:0.40000rem;
    height:0.45333rem;
    background-position:-0.70667rem 0rem;
}
.subject-class-r::before{
    width:0.37333rem;
    height:0.45333rem;
    background-position:-1.10667rem 0rem;
}
.subject-class-sr::before{
    width:0.58667rem;
    height:0.42667rem;
    background-position:0rem -0.38667rem;
}
.subject-class-ssr::before{
    width:0.70667rem;
    height:0.38667rem;
    background-position:0rem 0rem;
}
.subject-class-sp::before{
    margin-top: .2rem;
    margin-left: .04rem;
    width: 0.58667rem;
    height: 0.38667rem;
    background-position:-0.58667rem -0.43667rem;
}

.ss-subject-info .subject-type{
  margin-top: 0.26667rem;
}
.main-info .ss-subject-prop{
  padding-top: 0.40000rem;
}
.main-info .ss-subject-prop li{
  margin-bottom: 0.24000rem;
}
.main-info .ss-subject-prop .value2{
  color: #fff;
}
.main-info .ss-subject-prop .value-wrapper em{
  margin-top: 0.10667rem;
  width:0.22667rem;
  height:0.18667rem;
  color: #fff;
  background: url(../images/ssxq/arrow.png) no-repeat 0 0;
  background-size: 0.22667rem 0.18667rem;
}

.subject-weak-up{
  position: relative;
  height: 1.80000rem;
}
.subject-weak-up .info-bottom-icon{
  position: absolute;
  left:0.50667rem;
  top:0.29333rem;
  width:3.33333rem;
  height:1.06667rem;
}
.subject-weak-up-prop {
  position: absolute;
  right:0.80000rem;
  width:4.53333rem;
  line-height:0.48000rem;
}
.subject-weak-up-prop li{
  width:2.24000rem;
  height:0.48000rem;
  line-height:0.48000rem;
  font-size: 0.32000rem;
}
.subject-weak-up-prop li span{
  margin-right: 0.20000rem;
  color:#fff;
}
.subject-weak-up-prop li i{}
.subject-weak-up-a,
.subject-weak-up-arrow,
.subject-weak-up-b,
.subject-weak-up-c,
.subject-weak-up-d,
.subject-weak-up-s{
  /* margin-top: 0.06667rem; */
  width:0.32000rem;
  height:0.48000rem;
  background-image:url(../images/ssxq/weak-up-icon.png);
  background-size:1.97333rem 0.37333rem;
  background-repeat:no-repeat;
}
.subject-weak-up-a{
  background-position:0rem center;
}
.subject-weak-up-arrow{
  margin-left: 0.05333rem;
  margin-right: 0.05333rem;
  width:0.37333rem;
  /* height:0.29333rem; */
  background-position:-1.60000rem center;
}
.subject-weak-up-b{
  background-position:-0.32000rem center;
}
.subject-weak-up-c{
  background-position:-0.64000rem center;
}
.subject-weak-up-d{
  background-position:-0.96000rem center;
}
.subject-weak-up-s{
  background-position:-1.28000rem center;
}
/*技能列表*/
.skill-item .cost{
  position: absolute;
  display:block;
  left: 3.53333rem;
  top:0rem;
  height:0.48000rem;
  line-height:0.56000rem;
  font-size: 0.37333rem;
}
.skill-item .cost span{

}
.skill-item .cost em{
  color: #45cddb;
  font-style: normal;
}
.skill-item .cost-icon{
  width:0.33333rem;
  height:0.56000rem;
  margin-top:-0.05333rem;
  margin-left: -0.06667rem;
  background: url(../images/ssxq/cost-icon.png) no-repeat 0 0;
  background-size:0.33333rem 0.56000rem;
}
/*技能列表*/
/*觉醒效果*/
.weak-up-box{
  /* height:6.90667rem; */
  /* margin-bottom: 0rem; */
}
.weak-up-box::before{
  height:6.22667rem;
}
.weak-up-box .box-body{
  height:5.25333rem;
}
.weak-up-box .img-left,
.weak-up-box .img-right{
  float: left;
}
.weak-up-box .img-wrapper,
.weak-up-box .img-left img,
.weak-up-box .img-right img{
  width:1.68000rem;
  height:1.68000rem;
}
.weak-up-box .img-wrapper{
  display: inline-block;
  position: relative;
  overflow: hidden;
  border:6PX solid;
  border-image-source:url(../images/ssxq/border-fill.png);
  border-image-slice: 11;
  border-image-repeat:stretch;
  /* background-color:#5d462d; */
  background-clip:context-box;
}
.weak-up-box .img-left .lt,
.weak-up-box .img-left .rt,
.weak-up-box .img-left .lb,
.weak-up-box .img-left .rb,
.weak-up-box .img-right .lt,
.weak-up-box .img-right .rt,
.weak-up-box .img-right .lb,
.weak-up-box .img-right .rb{
  position: absolute;
  display:none;
  width:0.32000rem;
  height:0.32000rem;
  -webkit-border-radius:0.16000rem;
  -moz-border-radius:0.16000rem;
  -o-border-radius:0.16000rem;
  -ms-border-radius:0.16000rem;
  border-radius:0.16000rem;
  background:#fff;
}
.weak-up-box .img-left .lt,
.weak-up-box .img-right .lt{
  left:-0.16000rem;
  top:-0.16000rem;
}
.weak-up-box .img-left .rt,
.weak-up-box .img-right .rt{
  right:-0.16000rem;
  top:-0.16000rem;
}
.weak-up-box .img-left .lb,
.weak-up-box .img-right .lb{
  left:-0.16000rem;
  bottom:-0.16000rem;
}
.weak-up-box .img-left .rb,
.weak-up-box .img-right .rb{
  right:-0.16000rem;
  bottom:-0.16000rem;
}
.weak-up-box .img-left{
  margin-left: 0.74667rem;
  margin-top:0.12000rem;
}
.weak-up-box .img-right{
  margin-left: 0.45333rem;
  margin-top:0.12000rem;
}
.weak-up-box .info{
  position: relative;
  float: left;
  width: 3.12000rem;
  margin-left: 0.45333rem;
  text-align:center;
}
.weak-up-box .info img{
  position: absolute;
  display:block;
  width: 3.12000rem;
  height:0.41333rem;
  top:0.64000rem;
  left:50%;
  margin-left:-1.56000rem;
}
.weak-up-box .info-name{
  position: relative;
  display: block;
  width:2.13333rem;
  height:0.56000rem;
  line-height:0.56000rem;
  /* margin-left: 0.42667rem; */
  margin:0 auto;
  margin-top: 0.30667rem;
  text-align: center;
  text-indent: 0.26667rem;
  color:#fff;
  background: #cc5841;
}
.weak-up-box .info-name .attack-icon{
  position: absolute;
  display:block;
  left:0.10667rem;
  top:0rem;
  width:0.41333rem;
  height:0.49333rem;
  /* height:0.56000rem; */
  background: url(../images/ssxq/attack-icon.png) no-repeat 0 center;
  background-size: 0.41333rem 0.49333rem;
}
.weak-up-box .info-dsp{
  position: relative;
  display: block;
  margin-top: 0.32000rem;
  height:0.48000rem;
  line-height:0.48000rem;
  color: #ffbf00;
}
.weak-up-box .info-dsp .up-arrow{
  width:0.37333rem;
  /* height:0.29333rem; */
  height:0.48000rem;
  /* margin-top: 0.08000rem; */
  background: url(../images/ssxq/up-arrow.png) no-repeat 0 center;
  background-size: 0.37333rem 0.29333rem;
}
.weak-up-box .info-dsp span{
  line-height:0.56000rem;
}

.fzf{
  padding-left: 0.24000rem;
  padding-top: 0.24000rem;
}
.fzf li{
  margin-left: 0.74667rem;
}
.fzf li:first-child{
  margin-left: 0;
}
.fzf li img{
  display: block;
  width:1.37333rem;
  height:1.37333rem;
  margin-bottom: 0.06667rem;
  -webkit-border-radius:0.13333rem;
  -moz-border-radius:0.13333rem;
  -o-border-radius:0.13333rem;
  -ms-border-radius:0.13333rem;
  border-radius:0.13333rem;
  border:2PX solid #d3ab52;
  background-color:#5d462d;
}

.fzf li .fzf-name,
.fzf li .fzf-count{
  float: none;
  display: block;
  text-align: center;
}
.fzf li .fzf-count{
  margin-top: -0.10667rem;
  color:#b2b2b2;
}

/*觉醒效果*/


/*常用御魂*/
.yh-box{

}
.yh-box .box-body{
  width:9.34667rem;
  /* height:6.58667rem; */
  margin:0 auto;
  margin-top:0.33333rem;
  /* background-size: 9.33333rem 6.58667rem; */
}
.yh-box-item .yh-title{
  position: relative;
  top:0.10667rem;
  left:-0.50667rem;
  width:1.36000rem;
  height:0.62667rem;
  font-size: 0.32000rem;
  background: url(../images/ssxq/yh-title-bg.png) no-repeat 0 0;
  background-size:1.36000rem 0.62667rem;
  color:#fff;
  text-indent: 0.18667rem;
}
.yh-box-item{
  position: relative;
  font-size: 0.37333rem;
  padding-left: 0.42667rem;
  padding-bottom:0.69333rem;
  margin-bottom: 0.24000rem;
  background: url(../images/ssxq/yh-bg.jpg) repeat-y 0.34667rem 0;
  background-size:9.34667rem 100%;
}
.yh-author{
  display:block;
  position: absolute;
  right:0.28000rem;
  top:0.12000rem;
  color:#8c8c8c;
  font-size: 0.32000rem;
  border-bottom:1PX solid #8c8c8c;
  /* background:url(../images/ssxq/author-underline.gif) repeat-x left bottom;
  background-size: 0.12000rem 0.02667rem; */
}
.yh-author::after{
  position: absolute;
  display:block;
  bottom:-0.09333rem;
  left:47%;
  content: ' ';
  width:0.12000rem;
  height:0.08000rem;
  background:url(../images/ssxq/author-tri-icon.png) no-repeat 0 0;
  background-size: 0.12000rem 0.08000rem;
  opacity:.75;
}
.yh-box-item .row1{
  padding-top: 0.13333rem;
}
.yh-box-item .row1 .col{
  margin-left: 0.42667rem;
  line-height:1.04000rem;
}
.yh-box-item .row1 .col span{
  /* margin-top: 0.21333rem; */
  margin-left: 0.13333rem;
}
.yh-box-item .row1 .col:first-child{
  margin-left:0;
}
.yh-box-item .yh-icon{
  width:1.04000rem;
  height:1.04000rem;
  -webkit-border-radius: 0.52000rem;
  border-radius: 0.52000rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #2d2321;
  border:1PX solid #d3ab52;

}
.yh-box-item .row2{
  padding-top: 0.13333rem;
}
.yh-box-item .row2 .col{
  float: left;
  /*margin-left: 0.61333rem;*/
}
.yh-box-item .main-prop{
  float: left;
}
.yh-box-item .main-prop li{
  margin-left: 0.33333rem;
}
.yh-box-item .main-prop li span{
  display:inline-block;
  color: #656565;
  font-size: 0.34667rem;
  height:0.57333rem;
  line-height:0.57333rem;
}
.yh-box-item .main-prop li:first-child{
  margin-left: 0rem;
}
.yh-box-item .square{
  display: inline-block;
  width:0.57333rem;
  height:0.57333rem;
  line-height: 0.57333rem;
  margin-right: 0.13333rem;
  font-style: normal;
  color: #ffd11b;
  text-align: center;
  text-indent:-133.32000rem;
  background: url(../images/ssxq/squares.png) no-repeat 0 0;
  background-size: 1.72000rem 0.57333rem;
}
.yh-box-item .square-2{
  background-position: 0rem center;
}
.yh-box-item .square-4{
  background-position: -0.57333rem center;
}
.yh-box-item .square-6{
  background-position: -1.14667rem center;
}
.yh-box-item .row3{
  padding-top:0.20000rem;
}
.yh-box-item .row3 span{
  float: left;
}
.yh-box-item .row3 p{
  float: left;
  width: 6.73333rem;
  color:#666;
}
/*常用御魂*/

/*式神详情*/
/*式神列表*/
.sslb{

}
.filter-bar{
  padding-top: 0.24000rem;
  padding-bottom:0.18667rem;
  line-height: 0.42667rem;
  background:#fff;
}
.filter-bar li{
  width:2.00000rem;
  height:0.42667rem;
  line-height: 0.42667rem;
  font-size: 0.37333rem;
  color: #7ba1c0;
  text-align: center;
}
.filter-bar .actived{
  margin-top: -0.09333rem;
  height:0.54667rem;
  line-height:0.54667rem;
  color: #fff;
  background: url(../images/sslb/actived-bg.png) no-repeat center top;
  background-size:1.40000rem 0.54667rem;
}

.ss-list{}
.ss-list .ss-list-item{
  display:block;
  position: relative;
  height:2.38667rem;
  /* border-bottom: 1PX solid #cfdfe9; */
  background: #f2f5fb url(../images/sslb/item-bottom-border.png) no-repeat 0 bottom;
  background-size:9.85333rem 0.14667rem;
  color:#000;
}
.ss-list .ss-list-item:last-child{
  border-bottom: none;
}
.ss-list .ss-list-item .more-icon{
  position: absolute;
  display: block;
  right: 0.37333rem;
  top:1.00000rem;
  width:0.24000rem;
  height:0.40000rem;
  margin: 0;
  background: url(../images/sslb/more.png) no-repeat 0 0;
  background-size: 0.24000rem 0.40000rem;
}
.ss-list .left{
  height:2.38667rem;
  line-height:2.38667rem;
}
.ss-list .left img{
  width:1.33333rem;
  height:1.33333rem;
  /* margin-top: 0.62667rem; */
  margin-left: 0.24000rem;
  -moz-border-radius: 0.66667rem;
  -webkit-border-radius: 0.66667rem;
  border-radius: 0.66667rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #5d452d;
  -moz-box-shadow: inset 0 0 0.08000rem #1a140c;
  -webkit-box-shadow: inset 0 0 0.08000rem #1a140c;
  box-shadow: inset 0 0 0.08000rem #1a140c;
  border:1PX solid #d3ab52;
}
.ss-list .right{
  /*float: left;*/
  width:8.06667rem;
  height:1.64000rem;
  padding-top: 0.74667rem;
  padding-left: 0.29333rem;
  font-size: 0.37333rem;
}

.ss-list .name::after{
  content: '|';
  margin-left: 0.24000rem;
  margin-right: 0.24000rem;
}
.ss-list .ss-list-item i{
  margin-left: 0.66667rem;
  margin-top: 0.08000rem;
}
.ss-list .cv{
  color:#666;
}
.ss-list p{
  margin-top: 0.13333rem;
  font-size: 0.32000rem;
  color: #656565;
  opacity: .79;
}
.n-icon,
.r-icon,
.sr-icon,
.ssr-icon,
.sp-icon{
    background-image:url(../images/sslb/icon.png);
    background-repeat:no-repeat;
    background-size: 1.48000rem 0.81333rem;
}
.n-icon{
    width:0.40000rem;
    height:0.45333rem;
    background-position:-0.70667rem 0rem;
}
.r-icon{
    width:0.37333rem;
    height:0.45333rem;
    background-position:-1.10667rem 0rem;
}
.sr-icon{
    width:0.58667rem;
    height:0.42667rem;
    background-position:0rem -0.38667rem;
}
.ssr-icon{
    width:0.70667rem;
    height:0.38667rem;
    background-position:0rem 0rem;
}
.sp-icon{
    width:0.58667rem;
    height:0.38667rem;
    background-position:-0.58667rem -0.43667rem;
}

/*式神列表*/

/*御魂图鉴*/
.yhtj{
  background-color:#f4f9fd;
}
.yhtj-head-list{
  padding-bottom: 0.21333rem;
   /* border-bottom: 1PX solid #6f87b1; */ 
   border-bottom: 1PX solid #dbdee0; 
  margin-bottom: 0.28000rem;
  background-color:#fff;
  -moz-box-shadow: inset 0 0 0 0.01333rem rgba(68,83,94,.38);
  -webkit-box-shadow: inset 0 0 0 0.01333rem rgba(68,83,94,.38);
  box-shadow: inset 0 0 0 0.01333rem rgba(68,83,94,.38);

}
.yhtj-head-list li{
  padding-left: 0.33333rem;
  height:1.17333rem;
  overflow: hidden;
  line-height: 1.17333rem;
  border-bottom: 1PX dashed #c3d1d9;
}
.yhtj-head-list li:last-child{
  border-bottom: none;
}
.yhtj-head-list i{
  margin-top: 0.34667rem;
}
.yhtj-head-list span{
  /*width: 9.20000rem;*/
  height: 100%;
  overflow: hidden;
  font-size: 0.32000rem;

}

.yhtj-head-list .sp{
  margin-left:-0.04000rem;
  margin-right:0.04000rem;
}
.five-icon,
.four-icon,
.one-icon,
.six-icon,
.three-icon,
.two-icon{
  width:0.46667rem;
  height:0.48000rem;
}
.five-icon::before,
.four-icon::before,
.one-icon::before,
.six-icon::before,
.three-icon::before,
.two-icon::before{
  display:block;
  content:' ';
  width:0.56000rem;
  height:0.48000rem;
  background-image:url(../images/yhtj/icon.png);
  background-repeat:no-repeat;
  background-size: 3.36000rem 0.48000rem;
}
.five-icon::before{
  background-position:-2.24000rem 0;
}
.four-icon::before{
  background-position:-1.68000rem 0;
}
.one-icon::before{
  background-position:0rem 0;
}
.six-icon::before{
  background-position:-2.80000rem 0;
}
.three-icon::before{
  background-position:-1.12000rem 0;
}
.two-icon::before{
  background-position:-0.56000rem 0;
}
.yhtj .tab-header{
  padding-top: 0.26667rem;
  padding-left: 0.34667rem;
  height:0.64000rem;
  background: #8eb7cd;
}
.yhtj .tab-header li{
  padding-left: 0.02667rem;
  padding-right: 0.02667rem;
  margin-left: 0.86667rem;
  font-size: 0.37333rem;
  line-height: 0.37333rem;
  text-align: center;
  color: #fff;
}
.yhtj .tab-header li:first-child{
  margin-left: 0;
}
.yhtj .tab-header .actived{
  position: relative;
  /* padding-bottom: 0.22667rem; */
}
.yhtj .tab-header .actived::after{
  display:block;
  content: ' ';
  position: absolute;
  bottom:-0.28000rem;
  width:100%;
  height:0.05333rem;
  background-color:#fff;
}
.yhtj-list{
  background-color:#fff;
}
.yhtj-list-item{
  position: relative;
  /* height: 2.82667rem; */
  /*border-bottom: 0.01333rem solid #f1f5fb;*/
  overflow: hidden;
}
.yhtj-list-item::after{
  position: absolute;
  left:0.13333rem;
  bottom:0rem;
  display: block;
  content: ' ';
  width:9.85333rem;
  height: 0.14667rem;
  background:url(../images/yhtj/item-bottom-border.png) no-repeat 0 0;
  background-size: 100% 100%;
  z-index:1;
}
.yhtj-list-item .left{
   width:1.77333rem;
  height:2.61333rem; 

}
.yhtj-list-item .left img{
  display: block;
  width:1.46667rem;
  height:1.46667rem;
  margin-left: 0.30667rem;
  margin-top: 0.42667rem;
  margin-bottom: 0.08000rem;
  -moz-border-radius: 0.73333rem;
  -webkit-border-radius: 0.73333rem;
  border-radius: 0.73333rem;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #5d452d;
  -moz-box-shadow: inset 0 0 0.08000rem #1a140c;
  -webkit-box-shadow: inset 0 0 0.08000rem #1a140c;
  box-shadow: inset 0 0 0.08000rem #1a140c;
  border:1PX solid #d3ab52;
  background-color:#d3ab52;
}
.yhtj-list-item .left span{
  display: block;
  font-size:0.37333rem;
  text-align: center;
  text-indent: 0.26667rem;
}
.yhtj-list-item .right{
  width:7.82667rem;
  padding-top: 0.42667rem;
  padding-left: 0.40000rem;
  padding-bottom: 0.42667rem;
}
.yhtj-list-item .right .rl{
  margin-bottom: 0.26667rem;
  font-size: 0.32000rem;
}
.yhtj-list-item .right .rl:last-child{
  margin-bottom:0;
}
.yhtj-list-item .right i{
  width:1.45333rem;
  height:0.48000rem;
  margin-right: 0.26667rem;
  text-align: center;
  color: #fff;
  background-color: #efbf00;
}
.yhtj-list-item .right span{
  width: 5.84000rem;
}

/*御魂图鉴*/

/*推荐阵容*/
  /*panel*/
  .panel{
    position: relative;
    width:9.34667rem;
  }
  .panel-header{
    position: relative;
    height: 0.80000rem;
    background: #fff;
    border-bottom: 1PX solid #ebebeb;
  }
  .panel-header h3{
    display: block;
    float: left;
    margin-top: 0.26667rem;
    margin-left: 0.26667rem;
    color: #333; /* text color */
    font-family: "PingFang";
    font-size: 0.32000rem;
  }
  .panel-header .right{
    position: absolute;
    right: 0.26667rem;
    top: 0.20000rem;
    color: #999; /* text color */
    font-family: "PingFang";
    font-size: 0.32000rem;
  }
  .panel-header .right span{
    color: #999; /* text color */
    font-family: "PingFang";
    font-size: 0.32000rem;
  }
  .panel-body{
    background:#fff;
  }

/*panel*/
.djzr-role-list{
  padding-top: 0.40000rem;
  padding-left: 0.26667rem;
  height: 1.89333rem;
  border-bottom:1PX solid #ebebeb;
}
.djzr-role-list li{
  float:left;
  margin-left: 0.40000rem;
}
.djzr-role-list li:first-child{
  margin-left:0;
}
.djzr-role-list li a{
  display: block;
}
.djzr-role-list li img{
  display:block;
  width:1.06667rem;
  height:1.06667rem;
  -moz-border-radius: 0.53333rem;
  -webkit-border-radius: 0.53333rem;
  border-radius: 0.53333rem; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #d1d1d1; /* layer fill content */
}
.djzr-role-list li .name{
  display: block;
  text-align: center;
  color: #333; /* text color */
  font-family: "PingFang";
  font-size: 0.32000rem;

}
.djzr-role-info{
  padding-left: 0.26667rem;
  padding-top: 0.26667rem;
  padding-bottom: 0.40000rem;
  color:#333;
  font-size:0.37333rem;
}
.djzr-role-info span{
  color:#ea413c;
}
.tjzr-box .box-body{
  width:9.34667rem;
  margin:0 auto;
  margin-top:0.28000rem;
}
.tjzr-wrapper{
  margin-bottom: 0.40000rem;
}
/*推荐阵容*/
/*攻略*/
.gonglve-box .box-body{
  width:9.34667rem;
  margin:0 auto;
  margin-top:0.28000rem;
  background: #fff;
}
.gonglve-wrapper{
  padding-bottom: 0.48000rem;
}
.gonglve-list{
  font-size: 0.37333rem;
}
.gonglve-list li{
  height: 2.12000rem;
  border-bottom:1PX solid #ebebeb;
}
.gonglve-list li:last-child{
  border-bottom:none;
}
.gonglve-list li .left{
  float: left;
  width: 6.61333rem;
  padding-left: 0.24000rem;
}
.gonglve-list li .right{
  float: right;
  width:2.34667rem;
}
.gonglve-list li .left h3{
  padding-top: 0.21333rem;
  height: 1.22667rem;
  color: #333; /* text color */
  font-family: "PingFang";
  font-size: 0.37333rem;
  overflow: hidden;
}
.gonglve-list li .left span{
  color: #999; /* text color */
  font-family: "PingFang";
  font-size: 0.32000rem;
}
.gonglve-list li img{
  display: block;
  width:2.13333rem;
  height:1.60000rem;
  margin-top: 0.26667rem;
  background-color: #9d7543; /* layer fill content */
}
/*攻略*/