.module-card-item {
  padding: 16px 20px;
  background-color: #fff;
}

.module-card-item .card-info {
  position: relative;
  height: 40px;
  margin-bottom: 12px;
}

.module-card-item .card-info .card-thums {
  align-items: center;
}

.module-card-item .card-info .card-thums .card-img {
  overflow: hidden;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.module-card-item .card-info .card-thums .card-title {
  padding: 0 85px 0 50px;
}

.module-card-item .card-info .card-thums .card-title > span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-card-item .card-info .card-thums .card-tit {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 17px;
}

.module-card-item .card-info .card-thums .card-sub-tit {
  font-size: 12px;
  color: #999;
}

.card-box {
  position: absolute;
  top: 0;
  right: 0;
}

.card-box:after {
  content: '';
  display: block;
  clear: both;
}

.card-box a span {
  font-size: 12px;
  line-height: 12px;
}

.card-box a {
  background-color: #fff;
}

.card-box a:focus {
  background-color: #e6e6e6;
}

.card-box .card-btn {
  position: relative;
  float: left;
  display: block;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #efefef;
  cursor: pointer;
}

.card-box .card-btn.card-right-btn {
  margin-left: 8px;
}

.card-box .card-btn .element-circle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-box .card-btn > img {
  display: block;
  width: 20px;
  height: 20px;
}

.module-card-item .card-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
}

.module-card-item .card-image .card-mask img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.module-card-item .card-image .card-mask {
  position: relative;
  padding-bottom: 56.25%;
}

.module-card-item .card-image .card-mask .card-thums-box {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 80px;
  padding: 30px 16px 10px 16px;
  background-image: linear-gradient(to bottom, rgba(28, 28, 28, 0), #1c1c1c);
}

.module-card-item .card-image .card-mask .card-thums-box > * {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-card-item .card-image .card-mask .card-thums-box > h2 {
  padding-right: 42px;
  font-size: 16px;
  line-height: 19px;
}

.module-card-item .card-image .card-mask .card-thums-box > p {
  padding-right: 42px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 100;
  line-height: 13px;
}

.module-card-item .card-image .card-mask .card-thums-box .card-play-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
  width: 36px;
  height: 36px;
  margin-top: 10px;
  border-radius: 50%;
  text-indent: -9999px;
  font-size: 0;
  background-color: rgba(153, 153, 153, 0.6);
  cursor: pointer;
  z-index: 5;
}

.module-card-item .card-image .card-mask .card-thums-box .card-play-btn > i {
  display: block;
}

.module-character-wrap {
  display: flex;
  padding: 8px 20px;
  background-color: #fff;
}

.module-character-wrap .character-item {
  position: relative;
  width: 50%;
  align-items: center;
}

.module-character-wrap .character-left {
  justify-content: flex-start;
}

.module-character-wrap .character-left:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 24px;
  margin-top: -12px;
  background-color: #ddd;
}

.module-character-wrap .character-right {
  justify-content: flex-end;
}

.module-character-wrap .character-item .character-thums {
  overflow: hidden;
  position: absolute;
  top: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.module-character-wrap .character-left .character-thums {
  left: 0;
}

.module-character-wrap .character-right .character-thums {
  right: 0;
}

.module-character-wrap .character-content {
  display: flex;
  flex-direction: column;
}

.module-character-wrap .character-left .character-content {
  padding-left: 40px;
  text-align: left;
}

.module-character-wrap .character-right .character-content {
  padding-right: 40px;
  text-align: right;
}

.module-character-wrap .character-content .character-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
}

.module-character-wrap .character-left .character-name {
  padding-right: 4px;
}

.module-character-wrap .character-right .character-name {
  padding-left: 4px;
}

.module-character-wrap .character-content .character-job {
  font-size: 11px;
  color: #888;
}

.module-character-skill-wrap {
  padding: 24px 20px;
  background-color: #fff;
}

.module-character-skill-wrap .character-skill-tit {
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: 900;
  color: #222;
}

.character-skill-info .character-skill-item {
  padding-top: 14px;
}

.character-skill-info .character-skill-item:first-child {
  padding: 0;
}

.character-skill-info .character-skill-item .character-skill-title {
  line-height: 1.29;
  font-size: 14px;
  font-weight: bold;
  color: #3c376f;
}

.character-skill-info .character-skill-item .character-skill-subtxt {
  padding-top: 2px;
  line-height: 1.38;
  font-size: 13px;
  color: #888;
}

.character-skill-info .character-skill-empty {
  font-size: 13px;
  color: #888;
}

.module-equipment-wrap {
  padding: 24px 0;
  background-color: #fff;
}

.module-equipment {
  padding: 6px 20px;
}

.module-equipment.is-active {
  background-color: #f4f4f7;
}

.module-equipment.is-active .search-circle-icon {
  background-color: #e2e2e6;
}

.equipment-inner {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.equipment-inner .equipment-img {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 2px;
}

.equipment-inner.normal .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #575757, #232323 65% 18%);
}

.equipment-inner.luxury .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #304911, #18220b 65% 18%);
}

.equipment-inner.rare .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #113d5d, #111f2c 65% 18%);
}

.equipment-inner.hero .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #480d5d, #261331 65% 18%);
}

.equipment-inner.legend .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #9e5f04, #362003 65% 18%);
}

.equipment-inner.antique .equipment-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(315deg, #a24006, #341a09 65% 18%);
}

.equipment-inner .equipment-grade-num {
  display: inline-block;
  min-width: 26px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 15px;
  color: #fff;
}

.equipment-inner.normal .equipment-grade-num {
  background-color: #d8d8d8;
}

.equipment-inner.luxury .equipment-grade-num {
  background-color: #50840f;
}

.equipment-inner.rare .equipment-grade-num {
  background-color: #1b6bab;
}

.equipment-inner.hero .equipment-grade-num {
  background-color: #8125a1;
}

.equipment-inner.legend .equipment-grade-num {
  background-color: #ffa300;
}

.equipment-inner.antique .equipment-grade-num {
  background-color: #ef7d39;
}

.equipment-inner .equipment-img > img {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
}

.equipment-inner .equipment-grade-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.equipment-info dt {
  font-size: 12px;
  font-weight: normal;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.equipment-inner .equipment-info {
  position: absolute;
  top: 50%;
  left: 50px;
  right: 0;
  transform: translate(0, -50%);
  padding-right: 56px;
}

.equipment-inner .search-circle-icon {
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  border: 1px solid #efefef;
  cursor: pointer;
}

.search-circle-icon.is-active {
  background-color: #e2e2e6;
}

.equipment-info dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-top: 3px;
}

.equipment-info .progressbar {
  width: 100%;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background-color: #e2e2e8;
}

.equipment-info .progressbar span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 2px;
  background-image: linear-gradient(to left, #a8a1ff 0%, #755bff 100%);
  overflow: hidden;
}

.module-equipment-wrap.equipment-detail {
  padding: 0;
}

.module-equipment-wrap.equipment-detail .module-equipment {
  padding: 19px 20px;
}

.module-equipment-wrap.equipment-detail .module-equipment.normal {
  background-color: #f4f4f7;
}

.module-equipment-wrap.equipment-detail .module-equipment.luxury {
  background-color: #fbfff7;
}

.module-equipment-wrap.equipment-detail .module-equipment.rare {
  background-color: #ebf9ff;
}

.module-equipment-wrap.equipment-detail .module-equipment.hero {
  background-color: #fdf7ff;
}

.module-equipment-wrap.equipment-detail .module-equipment.legend {
  background-color: #fffbf3;
}

.module-equipment-wrap.equipment-detail .module-equipment.antique {
  background-color: #fff8f3;
}

.module-equipment-wrap.equipment-detail .equipment-info {
  padding: 0;
}

.module-equipment-wrap.equipment-detail .equipment-info dt {
  font-weight: bold;
}

.module-equipment-wrap.equipment-detail .module-equipment.normal .equipment-info dt {
  color: #333;
}

.module-equipment-wrap.equipment-detail .module-equipment.luxury .equipment-info dt {
  color: #50840f;
}

.module-equipment-wrap.equipment-detail .module-equipment.rare .equipment-info dt {
  color: #1b6bab;
}

.module-equipment-wrap.equipment-detail .module-equipment.hero .equipment-info dt {
  color: #8125a1;
}

.module-equipment-wrap.equipment-detail .module-equipment.legend .equipment-info dt {
  color: #c07100;
}

.module-equipment-wrap.equipment-detail .module-equipment.antique .equipment-info dt {
  color: #c04700;
}

/*skill point*/
.module-skillpoint-wrap {
  padding: 34px 20px;
  background-color: #fff;
}

.module-skillpoint-wrap .skillpoint-info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background-color: #f3f2fe;
}

.skillpoint-text {
  font-size: 14px;
  color: #222;
}

.skillpoint-text.skillpoint-info-rght {
  text-align: right;
}

.module-skillpoint-wrap .skillpoint-info-center {
  display: inline-block;
  min-width: 64px;
  color: #999;
}

.module-skillpoint-wrap .skillpoint-info-center > span {
  font-size: 16px;
  font-weight: bold;
}

.module-skillpoint-wrap .skillpoint-info-center > span:first-child {
  color: #6236ff;
}

.module-skillpoint-wrap .skillpoint-info-center > span:first-child + span {
  color: #17006a;
}

/*스킬*/

.module-skill-wrap {
  width: 100%;
  background-color: #fff;
  padding: 18px 0;
}

.module-skill-wrap .skill-item {
  padding: 6px 20px;
  background-color: #fff;
}

.module-skill-wrap .skill-item.is-active {
  background-color: #f4f4f7;
}

.module-skill.skill-default.master {
  position: relative;
}

.skill-inner,
.equipment-inner {
  cursor: pointer;
  overflow: hidden;
}

.skill-img {
  width: 44px;
  height: 44px;
  margin-right: 8px;
  border-radius: 2px;
  background: #1b1d25;
}

.skill-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.skill-info {
  position: absolute;
  top: 50%;
  left: 52px;
  right: 0;
  transform: translate(0, -50%);
}

.skill-info dt {
  padding-right: 92px;
  font-size: 14px;
  font-weight: normal;
  color: #222;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.skill-info dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.skill-info dd .lev {
  color: #999;
}

.skill-info dd .lev.lev-max {
  color: #30abd6;
}

.skill-info dd .tripod {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  display: flex;
  justify-content: space-between;
  width: 82px;
}

.skill-info dd .tripod.awakening {
  justify-content: flex-end;
}

.skill-info dd .awakening-text {
  color: #45aed7;
  padding-right: 10px;
}

.skill-info b.normal {
  color: #adad0b;
}

.skill-info b.casting {
  color: #c369b7;
}

.skill-info b.holding {
  color: #2ba442;
}

.skill-info b.combo {
  color: #30aab4;
}

.skill-info b.point {
  color: #daa000;
}

.skill-info b.take {
  color: #77ce89;
}

.skill-info b.chain {
  color: #118dc0;
}

.module-skillInfo-wrap {
  padding: 0 20px 24px 20px;
  background-color: #fff;
}

.module-skillInfo-wrap .skillInfo-head {
  border-bottom: 1px solid #eee;
  text-align: center;
}

.skillInfo-item-box .skillInfo-item {
  overflow: hidden;
  position: relative;
  padding: 7px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.skillInfo-item-box .skillInfo-item:not(.is-select) {
  opacity: 0.4;
}

.skillInfo-item-box .skillInfo-item.port-1-on .is-select {
  color: #4392cb;
}

.skillInfo-item-box .skillInfo-item.port-2-on .is-select {
  color: #52ab31;
}

.skillInfo-item-box .skillInfo-item.port-3-on .is-select {
  color: #dfac22;
}

.skillInfo-item-box .skillInfo-item.port-1-off .is-select,
.skillInfo-item-box .skillInfo-item.port-2-off .is-select,
.skillInfo-item-box .skillInfo-item.port-3-off .is-select {
  color: #aaa;
}

.skillInfo-item-box .skillInfo-item .skillInfo-img {
  overflow: hidden;
  width: 44px;
  height: 44px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1b1d25;
}

.skillInfo-item-box .skillInfo-item .skillInfo-img > img {
  display: block;
  widows: 100%;
  height: 100%;
}

.skillInfo-item-box .skillInfo-item .skill-info {
  position: absolute;
  top: 50%;
  left: 72px;
  right: 0;
  transform: translate(0, -50%);
}

.skillInfo-item-box .skillInfo-item .skill-info .skill-info-tit {
  overflow: hidden;
  display: block;
  padding: 0;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skillInfo-item-box .skillInfo-item .skill-info .skill-info-subtxt {
  overflow: hidden;
  display: block;
  font-size: 13px;
  line-height: 1.54;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-character-compare-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(55, 60, 105, 0.3);
  background-color: #222222;
}

.character-compare-thums-box {
  position: relative;
  height: 184px;
}

.character-compare-thums-box:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 104px;
  background-image: linear-gradient(to bottom, rgba(28, 28, 28, 0), rgba(23, 22, 40, 0.84) 72%, #16152a);
}

.character-compare-thums-box:after {
  content: '';
  display: block;
  clear: both;
}

.character-compare-thums-box .character-compare-thums-item {
  position: relative;
  float: left;
  width: 50%;
}

.character-compare-thums-item.character-compare-thums-box-lft {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, #3c64ff 70%), linear-gradient(to bottom, #4e537d, #4e537d);
}

.character-compare-thums-item.character-compare-thums-box-rght {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #c01f77 71%), linear-gradient(to bottom, #4e537d, #4e537d);
}

.character-compare-thums-top {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  padding: 10px 14px 8px 14px;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.character-compare-thums-box > img {
  display: block;
  width: auto;
  height: 100%;
}

.character-compare-statusInfo-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 9px 8px 9px;
  line-height: 1.5;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  color: #ccc;
}

.character-compare-statusInfo-box > li:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-compare-statusInfo-box .character-compare-lv {
  position: relative;
  padding-right: 8px;
}

.character-compare-statusInfo-box .character-compare-lv:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #ccc;
}

.character-compare-status-text-box {
  padding: 14px 16px;
  background-color: #444072;
}

.character-compare-status-text-box .charater-compare-menu .charater-compare-item {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
}

.charater-compare-item > span {
  position: relative;
  flex: 1 0 102px;
  font-weight: bold;
  text-align: center;
}

.charater-compare-item .compare-title {
  flex: 0 0 64px;
  line-height: 20px;
  font-size: 12px;
  opacity: 0.7;
}

.charater-compare-menu.lft-active .compare-lft-num:after,
.charater-compare-menu.lft-active .compare-title:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  max-width: 102px;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-color: rgba(255, 85, 0, 0.4);
}

.charater-compare-menu.rght-active .compare-rght-num:after,
.charater-compare-menu.rght-active .compare-title:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  max-width: 102px;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  background-color: rgba(255, 85, 0, 0.4);
}

.module-thumnail-box {
  display: block;
}

.module-thumnail-box .thumnail-img-box {
  overflow: hidden;
  position: relative;
  padding-bottom: 145%;
  border-radius: 4px;
}

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

.module-thumnail-box .thumnail-img-box .element-badge-item {
  position: absolute;
  top: 8px;
  left: 8px;
}

.module-thumnail-box .thumnail-img-box .element-icon-item {
  position: absolute;
  top: 8px;
  right: 8px;
}

.module-thumnail-box .thumnail-txt-box {
  padding-top: 9px;
}

.module-thumnail-box .thumnail-txt-box > dt {
  overflow: hidden;
  max-width: 100%;
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.module-thumnail-box .thumnail-txt-box > dd {
  line-height: 16px;
  font-size: 12px;
  color: #999;
}

.module-character-status-wrap {
  padding: 24px 20px;
  background-color: #fff;
}

.characterStatus-tit {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 16px;
}

.characterStatus-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.characterStatus-menu .characterStatus-item {
  overflow: hidden;
  flex: 0 0 33%;
  padding: 9px 12px;
  font-size: 14px;
  box-shadow: 1px 0 0 0 #ddd, 0 1px 0 0 #ddd, 1px 1px 0 0 #ddd, 1px 0 0 0 #ddd inset, 0 1px 0 0 #ddd inset;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characterStatus-menu .characterStatus-item .characterStatus-status-text {
  padding-right: 6px;
}

.characterStatus-menu .characterStatus-item .characterStatus-status-num {
  font-weight: 900;
  color: #6047c8;
}