* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  background: #000;
}

.head,
.content,
.footer {
  width: 100%;
  font-size: 0px;
}

.content {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  background: url("../img/bg_pc.jpg") no-repeat top center;
}

.inner {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  z-index: 1;
}

.head .inner a {
  display: block;
  position: absolute;
  top: 15px;
  left: 826px;
  width: 282px;
  height: 66px;
  cursor: pointer;
}

.inner.main {
  height: 1993px;
}
.floating {
  position: absolute;
  top: 0px;
  width: 131px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 9;
}

.floating a {
  opacity: 0.5;
}
.floating a:hover {
  opacity: 0.75;
}
.floating a.current {
  opacity: 1;
}

.tab {
  position: absolute;
  top: 239px;
  left: 172px;
  list-style: none;
  z-index: 9;
}
.tab li.btn {
  width: 183px;
  height: 183px;
  margin-bottom: 51px;
  cursor: pointer;
}
.tab li.btn.mirai {
  background: url("../img/btn_mirai_off.jpg") no-repeat 0 0;
}
.tab li.btn.mirai:hover,
.tab li.btn.mirai.active {
  background: url("../img/btn_mirai_on.jpg") no-repeat 0 0;
}
.tab li.btn.tina {
  background: url("../img/btn_tina_off.jpg") no-repeat 0 0;
}
.tab li.btn.tina:hover,
.tab li.btn.tina.active {
  background: url("../img/btn_tina_on.jpg") no-repeat 0 0;
}
.tab li.btn.crow {
  background: url("../img/btn_crow_off.jpg") no-repeat 0 0;
}
.tab li.btn.crow:hover,
.tab li.btn.crow.active {
  background: url("../img/btn_crow_on.jpg") no-repeat 0 0;
}
.tab li.btn.harpy {
  background: url("../img/btn_harpy_off.jpg") no-repeat 0 0;
}
.tab li.btn.harpy:hover,
.tab li.btn.harpy.active {
  background: url("../img/btn_harpy_on.jpg") no-repeat 0 0;
}
.tab li.btn.violet {
  background: url("../img/btn_violet_off.jpg") no-repeat 0 0;
}
.tab li.btn.violet:hover,
.tab li.btn.violet.active {
  background: url("../img/btn_violet_on.jpg") no-repeat 0 0;
}

.tab_sub {
  position: absolute;
  top: 261px;
  right: 239px;
  list-style: none;
  z-index: 10;
  cursor: pointer;
}
.tab_sub li.txt {
  width: 107px;
  height: 106px;
  margin-bottom: 15px;
}
.tab_sub li.txt.txt_a {
  background: url("../img/btn_type_a_off.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_a:hover,
.tab_sub li.txt.txt_a.active {
  background: url("../img/btn_type_a_on.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_b {
  background: url("../img/btn_type_b_off.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_b:hover,
.tab_sub li.txt.txt_b.active {
  background: url("../img/btn_type_b_on.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_c {
  background: url("../img/btn_type_c_off.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_c:hover,
.tab_sub li.txt.txt_c.active {
  background: url("../img/btn_type_c_on.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_mix {
  background: url("../img/btn_type_mix_off.jpg") no-repeat 0 0;
}
.tab_sub li.txt.txt_mix:hover,
.tab_sub li.txt.txt_mix.active {
  background: url("../img/btn_type_mix_on.jpg") no-repeat 0 0;
}

.list .inner,
.list .inner .item {
  display: none;
  width: 1920px;
  height: 1993px;
}

.list .inner .item.mirai_a {
  background: url("../img/pic_mirai_type_a.jpg") no-repeat 0 0;
}
.list .inner .item.mirai_b {
  background: url("../img/pic_mirai_type_b.jpg") no-repeat 0 0;
}
.list .inner .item.mirai_c {
  background: url("../img/pic_mirai_type_c.jpg") no-repeat 0 0;
}
.list .inner .item.mirai_mix {
  background: url("../img/pic_mirai_type_mix.jpg") no-repeat 0 0;
}
.list .inner .item.tina_a {
  background: url("../img/pic_tina_type_a.jpg") no-repeat 0 0;
}
.list .inner .item.tina_b {
  background: url("../img/pic_tina_type_b.jpg") no-repeat 0 0;
}
.list .inner .item.tina_c {
  background: url("../img/pic_tina_type_c.jpg") no-repeat 0 0;
}
.list .inner .item.tina_mix {
  background: url("../img/pic_tina_type_mix.jpg") no-repeat 0 0;
}
.list .inner .item.crow_a {
  background: url("../img/pic_crow_type_a.jpg") no-repeat 0 0;
}
.list .inner .item.crow_b {
  background: url("../img/pic_crow_type_b.jpg") no-repeat 0 0;
}
.list .inner .item.crow_c {
  background: url("../img/pic_crow_type_c.jpg") no-repeat 0 0;
}
.list .inner .item.crow_mix {
  background: url("../img/pic_crow_type_mix.jpg") no-repeat 0 0;
}
.list .inner .item.harpy_a {
  background: url("../img/pic_harpy_type_a.jpg") no-repeat 0 0;
}
.list .inner .item.harpy_b {
  background: url("../img/pic_harpy_type_b.jpg") no-repeat 0 0;
}
.list .inner .item.harpy_c {
  background: url("../img/pic_harpy_type_c.jpg") no-repeat 0 0;
}
.list .inner .item.harpy_mix {
  background: url("../img/pic_harpy_type_mix.jpg") no-repeat 0 0;
}
.list .inner .item.violet_a {
  background: url("../img/pic_violet_type_a.jpg") no-repeat 0 0;
}
.list .inner .item.violet_b {
  background: url("../img/pic_violet_type_b.jpg") no-repeat 0 0;
}
.list .inner .item.violet_c {
  background: url("../img/pic_violet_type_c.jpg") no-repeat 0 0;
}
.list .inner .item.violet_mix {
  background: url("../img/pic_violet_type_mix.jpg") no-repeat 0 0;
}
.list .inner.active {
  display: block;
}
.list .inner .item.active {
  display: block;
}
.list .inner .item {
  position: absolute;
  top: 0;
  left: 0;
}

.to_top {
  display: block;
  position: absolute;
  top: 10px;
  right: 60px;
  width: 70px;
  height: 45px;
}

.btn_modal {
  cursor: pointer;
}

.bg_modal {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.bg_modal .img_wrap {
  z-index: 15;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -630px;
  margin-left: -810px;
}

.bg_modal .img_wrap #close_modal {
  display: block;
  position: absolute;
  top: 25px;
  right: 30px;
  width: 80px;
  height: 80px;
  cursor: pointer;
}
.download {
  display: block;
  position: absolute;
  top: 1766px;
  left: 1135px;
  width: 380px;
  height: 70px;
}
.gif_img_01 {
  display: block;
  position: absolute;
  left: 270px;
  top: 2050px;
}