@font-face {
  font-family: "华文中宋";
  src: url("../../font/华文中宋.TTF");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "tttgbnumber";
  src: url("../../font/tttgbnumber.ttf");
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
body {
  font-size: 16px;
  color: #fff;
  font-family: "tttgbnumber";
  transform: scale(1.6);
  transform-origin: 0 0;
}
.container {
  width: 480px;
  height: 300px;
  position: relative;
  background-color: #1234;
}
.drag {
  position: absolute;
  top: 55px;
  left: 0px;
  width: 300px;
  height: 50px;
  background: inherit;
  filter: blur(15px);
  border-radius: 5px;
}
.role_box {
  width: 480px;
  padding: 5px 10px;
  height: 300px;
  background-repeat: no-repeat;
  position: relative;
}
.title_box {
  display: flex;
  align-items: flex-end;
  margin-left: 10px;
  position: relative;
}
.title {
  font-size: 36px;
  display: flex;
  align-items: flex-end;
}
.role_name {
  font-family: "华文中宋";
}
.lv {
  font-size: 16px;
  margin-left: 5px;
  margin-bottom: 2px;
}
.uid {
  margin-left: 3px;
}
.title_right {
  display: flex;
}
.title_right .item {
  margin-bottom: 2px;
  margin-left: 15px;
}
.text_box {
  position: relative;
}
.detail {
  margin-left: 5px;
  width: 300px;
  margin-top: 3px;
  padding: 5px 0;
  display: flex;
  position: relative;
}

.skill {
  margin-left: 5px;
  width: 300px;
  padding-bottom: 6px;
  display: flex;
  position: relative;
}
.text_box::before {
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(255, 255, 255, 0.5) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 0%;
  height: 1px;
  top: 0;
  left: -15px;
  width: 300px;
  opacity: 1;
  transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.text_box::after {
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(255, 255, 255, 0.5) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 0%;
  height: 1px;
  bottom: 0;
  left: -15px;
  width: 300px;
  opacity: 1;
  transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.detail p,
.skill p {
  margin-right: 4px;
  line-height: 16px;
  width: 90px;
  white-space: nowrap;
}
.no_skill {
  padding: 10px 0;
}
.star {
  width: 16px;
  vertical-align: -2px;
  margin-right: 1px;
}
.equiv {
  margin-top: 12px;
  min-height: 120px;
}
.row {
  width: 240px;
  display: flex;
  flex-wrap: wrap;
  /*margin-bottom: 5px;*/
}
.row .item {
  margin: 0 10px 8px 10px;
  text-align: center;
  font-size: 20px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  height: 52px;
  width: 52px;
  position: relative;
}
.row .item .num {
  position: absolute;
  top: -4px;
  right: -7px;
  font-size: 12px;
  /*background: rgba(0,0,0,.6);*/
  border-radius: 5px;
  padding: 1px 5px;
  background-color: rgba(0, 0, 0, var(--bg-opacity));
  --bg-opacity: 0.75;
  border-radius: 9999px;
}
.weapon_num {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px;
  /*background: #ff4d4d;
    background: rgba(0,0,0,.6);*/
  border-radius: 5px;
  padding: 1px 3px;
  background-color: rgba(0, 0, 0, var(--bg-opacity));
  --bg-opacity: 0.75;
}
.row .item .img_box {
  width: 46px;
  height: 46px;
  border: 1px solid #d3bc8d;
  border-radius: 5px;
  overflow: hidden;
}
.row .item img {
  width: 100%;
  transform: scale(1.2, 1.2);
}
.equiv_info {
  max-width: 410px;
  display: inline-block;
  font-size: 15px;
  padding: 5px 5px 1px 7px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(114, 102, 104, 0.3);
  margin-left: 5px;
}
.equiv_info .text {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.温迪_bg1 {
  background: url(../../../../../data/roleDetail/温迪1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.温迪_drag {
  background-position: -150px -55px;
}
.温迪_bg2 {
  background-image: url(../../../../../data/roleDetail/温迪2.png);
  background-size: 100%;
  background-position: 133px 0px;
}
.阿贝多_bg1 {
  background: url(../../../../../data/roleDetail/阿贝多1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.阿贝多_drag {
  background-position: -150px -55px;
}
.阿贝多_bg2 {
  background-image: url(../../../../../data/roleDetail/阿贝多2.png);
  background-size: 100%;
  background-position: -15px 0px;
}
.安柏_bg1 {
  background: url(../../../../../data/roleDetail/安柏1.png) no-repeat;
  background-size: auto 300px;
  /* background-position: 100% 0%; */
}
.安柏_drag {
  background-position: 0px -55px;
}
.安柏_bg2 {
  background-image: url(../../../../../data/roleDetail/安柏2.png);
  background-size: 100%;
  background-position: 140px 0px;
}
.芭芭拉_bg1 {
  background: url(../../../../../data/roleDetail/芭芭拉1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.芭芭拉_drag {
  background-position: 0px -55px;
}
.芭芭拉_bg2 {
  background-image: url(../../../../../data/roleDetail/芭芭拉2.png);
  background-size: 100%;
  background-position: 50px 27px;
}
.芭芭拉_bg3 {
  background-image: url(../../../../../data/roleDetail/芭芭拉3.png);
  background-size: 100%;
  background-position: 65px 10px;
}
.班尼特_bg1 {
  background: url(../../../../../data/roleDetail/班尼特1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.班尼特_drag {
  background-position: -150px -55px;
}
.班尼特_bg2 {
  background-image: url(../../../../../data/roleDetail/班尼特2.png);
  background-size: 100%;
  background-position: -5px 0px;
}
.迪奥娜_bg1 {
  background: url(../../../../../data/roleDetail/迪奥娜1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.迪奥娜_drag {
  background-position: -150px -55px;
}
.迪奥娜_bg2 {
  background-image: url(../../../../../data/roleDetail/迪奥娜2.png);
  background-size: 100%;
  background-position: 40px 10px;
}
.迪卢克_bg1 {
  background: url(../../../../../data/roleDetail/迪卢克1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.迪卢克_drag {
  background-position: -150px -55px;
}
.迪卢克_bg2 {
  background-image: url(../../../../../data/roleDetail/迪卢克2.png);
  background-size: 100%;
  background-position: 40px 10px;
}
.菲谢尔_bg1 {
  background: url(../../../../../data/roleDetail/菲谢尔1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.菲谢尔_drag {
  background-position: 0px -55px;
}
.菲谢尔_bg2 {
  background-image: url(../../../../../data/roleDetail/菲谢尔2.png);
  background-size: 100%;
  background-position: 90px 0px;
}
.凯亚_bg1 {
  background: url(../../../../../data/roleDetail/凯亚1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.凯亚_drag {
  background-position: 0px -55px;
}
.凯亚_bg2 {
  background-image: url(../../../../../data/roleDetail/凯亚2.png);
  background-size: 100%;
  background-position: 90px 5px;
}
.可莉_bg1 {
  background: url(../../../../../data/roleDetail/可莉1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.可莉_drag {
  background-position: 0px -55px;
}
.可莉_bg2 {
  background-image: url(../../../../../data/roleDetail/可莉2.png);
  background-size: 100%;
  background-position: 10px 0px;
}
.雷泽_bg1 {
  background: url(../../../../../data/roleDetail/雷泽1.png) no-repeat;
  background-size: auto 300px;
  background-position: 37% 0%;
}
.雷泽_drag {
  background-position: -55px -55px;
}
.雷泽_bg2 {
  background-image: url(../../../../../data/roleDetail/雷泽2.png);
  background-size: 100%;
  background-position: 120px 0px;
}
.丽莎_bg1 {
  background: url(../../../../../data/roleDetail/丽莎1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.丽莎_drag {
  background-position: 0px -55px;
}
.丽莎_bg2 {
  background-image: url(../../../../../data/roleDetail/丽莎2.png);
  background-size: 100%;
  background-position: 10px 0px;
}
.莫娜_bg1 {
  background: url(../../../../../data/roleDetail/莫娜1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.莫娜_drag {
  background-position: 0px -55px;
}
.莫娜_bg2 {
  background-image: url(../../../../../data/roleDetail/莫娜2.png);
  background-size: 100%;
  background-position: 55px 0px;
}
.诺艾尔_bg1 {
  background: url(../../../../../data/roleDetail/诺艾尔1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.诺艾尔_drag {
  background-position: 0px -55px;
}
.诺艾尔_bg2 {
  background-image: url(../../../../../data/roleDetail/诺艾尔2.png);
  background-size: 100%;
  background-position: 15px 0px;
}
.琴_bg1 {
  background: url(../../../../../data/roleDetail/琴1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 100% 0%;*/
}
.琴_drag {
  background-position: 0px -55px;
}
.琴_bg2 {
  background-image: url(../../../../../data/roleDetail/琴2.png);
  background-size: 100%;
  background-position: 50px 0px;
}
.琴_bg3 {
  background-image: url(../../../../../data/roleDetail/琴3.png);
  background-size: 110%;
  background-position: 80px 0px;
}
.砂糖_bg1 {
  background: url(../../../../../data/roleDetail/砂糖1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.砂糖_drag {
  background-position: -150px -55px;
}
.砂糖_bg2 {
  background-image: url(../../../../../data/roleDetail/砂糖2.png);
  background-size: 100%;
  background-position: -10px 0px;
}
.北斗_bg1 {
  background: url(../../../../../data/roleDetail/北斗1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.北斗_drag {
  background-position: -150px -55px;
}
.北斗_bg2 {
  background-image: url(../../../../../data/roleDetail/北斗2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.达达利亚_bg1 {
  background: url(../../../../../data/roleDetail/达达利亚1.png) no-repeat;
  background-size: auto 300px;
  background-position: 90% 0%;
}
.达达利亚_drag {
  background-position: -60px -55px;
}
.达达利亚_bg2 {
  background-image: url(../../../../../data/roleDetail/达达利亚2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.甘雨_bg1 {
  background: url(../../../../../data/roleDetail/甘雨1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.甘雨_drag {
  background-position: -150px -55px;
}
.甘雨_bg2 {
  background-image: url(../../../../../data/roleDetail/甘雨2.png);
  background-size: 100%;
  background-position: 90px 0px;
}
.甘雨_bg3 {
  background-image: url(../../../../../data/roleDetail/甘雨3.png);
  background-size: 100%;
  background-position: 20px 0px;
}
.行秋_bg1 {
  background: url(../../../../../data/roleDetail/行秋1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.行秋_drag {
  background-position: -150px -55px;
}
.行秋_bg2 {
  background-image: url(../../../../../data/roleDetail/行秋2.png);
  background-size: 100%;
  background-position: 0px 0px;
}
.胡桃_bg1 {
  background: url(../../../../../data/roleDetail/胡桃1.png) no-repeat;
  background-size: auto 300px;
  background-position: 34% 0%;
}
.胡桃_drag {
  background-position: -51px -55px;
}
.胡桃_bg2 {
  background-image: url(../../../../../data/roleDetail/胡桃2.png);
  background-size: 100%;
  background-position: 95px 0px;
}
.刻晴_bg1 {
  background: url(../../../../../data/roleDetail/刻晴1.png) no-repeat;
  background-size: auto 300px;
}
.刻晴_drag {
  background-position: 0px -55px;
}
.刻晴_bg2 {
  background-image: url(../../../../../data/roleDetail/刻晴2.png);
  background-size: 105%;
  background-position: 87px -15px;
}
.刻晴_bg3 {
  background-image: url(../../../../../data/roleDetail/刻晴3.png);
  background-size: 105%;
  background-position: 87px 0px;
}
.凝光_bg1 {
  background: url(../../../../../data/roleDetail/凝光1.png) no-repeat;
  background-size: auto 300px;
  /*background-position: 34% 0%;*/
}
.凝光_drag {
  background-position: 0px -55px;
}
.凝光_bg2 {
  background-image: url(../../../../../data/roleDetail/凝光2.png);
  background-size: 100%;
  background-position: 140px 0px;
}
.凝光_bg3 {
  background-image: url(../../../../../data/roleDetail/凝光3.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.七七_bg1 {
  background: url(../../../../../data/roleDetail/七七1.png) no-repeat;
  background-size: auto 300px;
}
.七七_drag {
  background-position: 0px -55px;
}
.七七_bg2 {
  background-image: url(../../../../../data/roleDetail/七七2.png);
  background-size: 100%;
  background-position: 25px 0px;
}
.香菱_bg1 {
  background: url(../../../../../data/roleDetail/香菱1.png) no-repeat;
  background-size: auto 300px;
  background-position: 34% 0%;
}
.香菱_drag {
  background-position: -51px -55px;
}
.香菱_bg2 {
  background-image: url(../../../../../data/roleDetail/香菱2.png);
  background-size: 100%;
  background-position: 5px 0px;
}
.魈_bg1 {
  background: url(../../../../../data/roleDetail/魈1.png) no-repeat;
  background-size: auto 300px;
  background-position: 65% 0%;
}
.魈_drag {
  background-position: -97px -55px;
}
.魈_bg2 {
  background-image: url(../../../../../data/roleDetail/魈2.png);
  background-size: 100%;
  background-position: 30px 0px;
}
.魈_bg3 {
  background-image: url(../../../../../data/roleDetail/魈3.png);
  background-size: 100%;
  background-position: 40px 0px;
}
.辛焱_bg1 {
  background: url(../../../../../data/roleDetail/辛焱1.png) no-repeat;
  background-size: auto 300px;
  background-position: 42% 0%;
}
.辛焱_drag {
  background-position: -63px -55px;
}
.辛焱_bg2 {
  background-image: url(../../../../../data/roleDetail/辛焱2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.钟离_bg1 {
  background: url(../../../../../data/roleDetail/钟离1.png) no-repeat;
  background-size: auto 300px;
  background-position: 95% 0%;
}
.钟离_drag {
  background-position: -143px -55px;
}
.钟离_bg2 {
  background-image: url(../../../../../data/roleDetail/钟离2.png);
  background-size: 100%;
  background-position: -35px 0px;
}
.重云_bg1 {
  background: url(../../../../../data/roleDetail/重云1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.重云_drag {
  background-position: -150px -55px;
}
.重云_bg2 {
  background-image: url(../../../../../data/roleDetail/重云2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.罗莎莉亚_bg1 {
  background: url(../../../../../data/roleDetail/罗莎莉亚1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.罗莎莉亚_drag {
  background-position: -150px -55px;
}
.罗莎莉亚_bg2 {
  background-image: url(../../../../../data/roleDetail/罗莎莉亚2.png);
  background-size: 100%;
  background-position: 120px 0px;
}
.空_bg1 {
  background: url(../../../../../data/roleDetail/空1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.空_drag {
  background-position: -150px -55px;
}
.空_bg2 {
  background-image: url(../../../../../data/roleDetail/空2.png);
  background-size: 100%;
  background-position: 40px 0px;
}
.荧_bg1 {
  background: url(../../../../../data/roleDetail/荧1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.荧_drag {
  background-position: -150px -55px;
}
.荧_bg2 {
  background-image: url(../../../../../data/roleDetail/荧2.png);
  background-size: 100%;
  background-position: 30px 15px;
}
.烟绯_bg1 {
  background: url(../../../../../data/roleDetail/烟绯1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.烟绯_drag {
  background-position: -150px -55px;
}
.烟绯_bg2 {
  background-image: url(../../../../../data/roleDetail/烟绯2.png);
  background-size: 100%;
  background-position: 140px 0px;
}
.优菈_bg1 {
  background: url(../../../../../data/roleDetail/优菈1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.优菈_drag {
  background-position: 0px -55px;
}
.优菈_bg2 {
  background-image: url(../../../../../data/roleDetail/优菈2.png);
  background-size: 100%;
  background-position: 80px 0px;
}
.枫原万叶_bg1 {
  background: url(../../../../../data/roleDetail/枫原万叶1.png) no-repeat;
  background-size: auto 300px;
  background-position: 10% 0%;
}
.枫原万叶_drag {
  background-position: -15px -55px;
}
.枫原万叶_bg2 {
  background-image: url(../../../../../data/roleDetail/枫原万叶2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.神里绫华_bg1 {
  background: url(../../../../../data/roleDetail/神里绫华1.png) no-repeat;
  background-size: auto 300px;
  background-position: 85% 0%;
}
.神里绫华_drag {
  background-position: -127px -55px;
}
.神里绫华_bg2 {
  background-image: url(../../../../../data/roleDetail/神里绫华2.png);
  background-size: 100%;
  background-position: 0px 0px;
}
.宵宫_bg1 {
  background: url(../../../../../data/roleDetail/宵宫1.png) no-repeat;
  background-size: auto 300px;
  background-position: 34% 0%;
}
.宵宫_drag {
  background-position: -51px -55px;
}
.宵宫_bg2 {
  background-image: url(../../../../../data/roleDetail/宵宫2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.早柚_bg1 {
  background: url(../../../../../data/roleDetail/早柚1.png) no-repeat;
  background-size: auto 300px;
  background-position: 8% 0%;
}
.早柚_drag {
  background-position: -12px -55px;
}
.早柚_bg2 {
  background-image: url(../../../../../data/roleDetail/早柚2.png);
  background-size: 100%;
  background-position: 110px 0px;
}
.雷电将军_bg1 {
  background: url(../../../../../data/roleDetail/雷电将军1.png) no-repeat;
  background-size: auto 300px;
  background-position: 15% 0%;
}
.雷电将军_drag {
  background-position: -22px -55px;
}
.雷电将军_bg2 {
  background-image: url(../../../../../data/roleDetail/雷电将军2.png);
  background-size: 100%;
  background-position: 110px 0px;
}
.九条裟罗_bg1 {
  background: url(../../../../../data/roleDetail/九条裟罗1.png) no-repeat;
  background-size: auto 300px;
  background-position: 44% 0%;
}
.九条裟罗_drag {
  background-position: -66px -55px;
}
.九条裟罗_bg2 {
  background-image: url(../../../../../data/roleDetail/九条裟罗2.png);
  background-size: 100%;
  background-position: 0px 0px;
}
.埃洛伊_bg1 {
  background: url(../../../../../data/roleDetail/埃洛伊1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.埃洛伊_drag {
  background-position: 0px -55px;
}
.埃洛伊_bg2 {
  background-image: url(../../../../../data/roleDetail/埃洛伊2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.珊瑚宫心海_bg1 {
  background: url(../../../../../data/roleDetail/珊瑚宫心海1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.珊瑚宫心海_drag {
  background-position: -150px -55px;
}
.珊瑚宫心海_bg2 {
  background-image: url(../../../../../data/roleDetail/珊瑚宫心海2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.托马_bg1 {
  background: url(../../../../../data/roleDetail/托马1.png) no-repeat;
  background-size: auto 300px;
  background-position: 34% 0%;
}
.托马_drag {
  background-position: -51px -55px;
}
.托马_bg2 {
  background-image: url(../../../../../data/roleDetail/托马2.png);
  background-size: 100%;
  background-position: 110px 0px;
}
.荒泷一斗_bg1 {
  background: url(../../../../../data/roleDetail/荒泷一斗1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.荒泷一斗_drag {
  background-position: 0px -55px;
}
.荒泷一斗_bg2 {
  background-image: url(../../../../../data/roleDetail/荒泷一斗2.png);
  background-size: 100%;
  background-position: 150px 0px;
}
.五郎_bg1 {
  background: url(../../../../../data/roleDetail/五郎1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.五郎_drag {
  background-position: -150px -55px;
}
.五郎_bg2 {
  background-image: url(../../../../../data/roleDetail/五郎2.png);
  background-size: 100%;
  background-position: 110px 0px;
}
.申鹤_bg1 {
  background: url(../../../../../data/roleDetail/申鹤1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.申鹤_drag {
  background-position: 0px -55px;
}
.申鹤_bg2 {
  background-image: url(../../../../../data/roleDetail/申鹤2.png);
  background-size: 100%;
  background-position: 40px 0px;
}
.云堇_bg1 {
  background: url(../../../../../data/roleDetail/云堇1.png) no-repeat;
  background-size: auto 300px;
  background-position: 40% 0%;
}
.云堇_drag {
  background-position: -60px -55px;
}
.云堇_bg2 {
  background-image: url(../../../../../data/roleDetail/云堇2.png);
  background-size: 100%;
  background-position: 50px 0px;
}
.八重神子_bg1 {
  background: url(../../../../../data/roleDetail/八重神子1.png) no-repeat;
  background-size: auto 300px;
  background-position: 10% 0%;
}
.八重神子_drag {
  background-position: -15px -55px;
}
.八重神子_bg2 {
  background-image: url(../../../../../data/roleDetail/八重神子2.png);
  background-size: 100%;
  background-position: 35px 0px;
}
.神里绫人_bg1 {
  background: url(../../../../../data/roleDetail/神里绫人1.png) no-repeat;
  background-size: auto 300px;
  background-position: 40% 0%;
}
.神里绫人_drag {
  background-position: -60px -55px;
}
.神里绫人_bg2 {
  background-image: url(../../../../../data/roleDetail/神里绫人2.png);
  background-size: 100%;
  background-position: 110px 0px;
}
.夜兰_bg1 {
  background: url(../../../../../data/roleDetail/夜兰1.png) no-repeat;
  background-size: auto 300px;
  background-position: 40% 0%;
}
.夜兰_drag {
  background-position: -60px -55px;
}
.夜兰_bg2 {
  background-image: url(../../../../../data/roleDetail/夜兰2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.久岐忍_bg1 {
  background: url(../../../../../data/roleDetail/久岐忍1.png) no-repeat;
  background-size: auto 300px;
  background-position: 46% 0%;
}
.久岐忍_drag {
  background-position: -69px -55px;
}
.久岐忍_bg2 {
  background-image: url(../../../../../data/roleDetail/久岐忍2.png);
  background-size: 100%;
  background-position: 20px 0px;
}
.鹿野院平藏_bg1 {
  background: url(../../../../../data/roleDetail/鹿野院平藏1.png) no-repeat;
  background-size: auto 300px;
  background-position: 73% 0%;
}
.鹿野院平藏_drag {
  background-position: -110px -55px;
}
.鹿野院平藏_bg2 {
  background-image: url(../../../../../data/roleDetail/鹿野院平藏2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.提纳里_bg1 {
  background: url(../../../../../data/roleDetail/提纳里1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.提纳里_drag {
  background-position: -110px -55px;
}
.提纳里_bg2 {
  background-image: url(../../../../../data/roleDetail/提纳里2.png);
  background-size: 100%;
  background-position: 70px 0px;
}
.柯莱_bg1 {
  background: url(../../../../../data/roleDetail/柯莱1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.柯莱_drag {
  background-position: -110px -55px;
}
.柯莱_bg2 {
  background-image: url(../../../../../data/roleDetail/柯莱2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.多莉_bg1 {
  background: url(../../../../../data/roleDetail/多莉1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.多莉_drag {
  background-position: -150px -55px;
}
.多莉_bg2 {
  background-image: url(../../../../../data/roleDetail/多莉2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.赛诺_bg1 {
  background: url(../../../../../data/roleDetail/赛诺1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.赛诺_drag {
  background-position: 0px -55px;
}
.赛诺_bg2 {
  background-image: url(../../../../../data/roleDetail/赛诺2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.坎蒂丝_bg1 {
  background: url(../../../../../data/roleDetail/坎蒂丝1.png) no-repeat;
  background-size: auto 300px;
  background-position: 50% 0%;
}
.坎蒂丝_drag {
  background-position: -75px -55px;
}
.坎蒂丝_bg2 {
  background-image: url(../../../../../data/roleDetail/坎蒂丝2.png);
  background-size: 100%;
  background-position: 120px 0px;
}
.妮露_bg1 {
  background: url(../../../../../data/roleDetail/妮露1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.妮露_drag {
  background-position: -110px -55px;
}
.妮露_bg2 {
  background-image: url(../../../../../data/roleDetail/妮露2.png);
  background-size: 100%;
  background-position: 40px 0px;
}
.纳西妲_bg1 {
  background: url(../../../../../data/roleDetail/纳西妲1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.纳西妲_drag {
  background-position: -150px -55px;
}
.纳西妲_bg2 {
  background-image: url(../../../../../data/roleDetail/纳西妲2.png);
  background-size: 100%;
  background-position: 60px 0px;
}
.莱依拉_bg1 {
  background: url(../../../../../data/roleDetail/莱依拉1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.莱依拉_drag {
  background-position: -150px -55px;
}
.莱依拉_bg2 {
  background-image: url(../../../../../data/roleDetail/莱依拉2.png);
  background-size: 100%;
  background-position: 90px 0px;
}
.流浪者_bg1 {
  background: url(../../../../../data/roleDetail/流浪者1.png) no-repeat;
  background-size: auto 300px;
  background-position: 100% 0%;
}
.流浪者_drag {
  background-position: -150px -55px;
}
.流浪者_bg2 {
  background-image: url(../../../../../data/roleDetail/流浪者2.png);
  background-size: 100%;
  background-position: 100px 0px;
}
.珐露珊_bg1 {
  background: url(../../../../../data/roleDetail/珐露珊1.png) no-repeat;
  background-size: auto 300px;
  background-position: 0% 0%;
}
.珐露珊_drag {
  background-position: 0px -55px;
}
.珐露珊_bg2 {
  background-image: url(../../../../../data/roleDetail/珐露珊2.png);
  background-size: 100%;
  background-position: 105px 0px;
}