@charset "UTF-8";
/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

body {
  background: #101010;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100% !important;
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  -webkit-touch-callout: none;
  line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

em, b {
  font-style: normal;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
}

input, select, form, img {
  vertical-align: middle;
  outline: none;
}

a, button, input, select, textarea, a:focus, button:focus, input:focus, select:focus, textarea:focus, [onclick] {
  outline: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a {
  -webkit-touch-callout: none;
  text-decoration: none;
  color: #333;
  outline: 0;
}

.hidden {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  visibility: hidden;
  text-indent: -9999px;
  display: block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@font-face {
  font-family: "Industry";
  src: url(../fonts/Industry.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gd17";
  src: url("../fonts/gd17.eot");
  /* IE9 */
  src: url("../fonts/gd17.eot?#iefix") format("embedded-opentype"), url("../fonts/gd17.woff") format("woff"), url("../fonts/gd17.ttf") format("truetype"), url("gd17.svg") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "ytjw";
  src: url("../fonts/ytjw.eot");
  /* IE9 */
  src: url("../fonts/ytjw.eot?#iefix") format("embedded-opentype"), url("../fonts/ytjw.woff") format("woff"), url("../fonts/ytjw.ttf") format("truetype"), url("ytjw.svg") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
html, body, .zomc {
  height: 100%;
}

.nikke_wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  font-family: "Noto Sans JP";
}

.nikke_in {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  position: relative;
  z-index: 20;
}
.nikke_in > .swiper-slide {
  height: 100%;
  overflow: hidden;
}

/*dialog*/
.dav_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
}

.dav_in {
  width: 7.5rem;
  height: 4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2rem 0 0 -3.75rem;
}
.dav_in video {
  display: block;
  width: 100%;
  height: 100%;
}

.dav_close {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0.2rem;
  top: -0.6rem;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background: url(../images/close.png) no-repeat center/100%;
  text-indent: -9999px;
}

.dav_close:hover {
  -webkit-animation: ani-close 0.5s linear 1 both;
  animation: ani-close 0.5s linear 1 both;
}

.nikke_head {
  height: 100%;
  background: url(../images/m/nikke_hkv.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

@-webkit-keyframes ani-hvideo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes ani-hvideo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.nikke_tnv {
  height: 0.9rem;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.4);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  font-family: "Industry";
  /*transition: all 0.5s;*/
}
.nikke_tnv.hide {
  display: none;
}

.nikke_logo {
  display: block;
  width: 1.27rem;
  height: 0.29rem;
  background: url(../images/shift_up.png) no-repeat center top/100%;
  position: absolute;
  top: 0.3rem;
  left: 0.36rem;
}

.nikke_menu {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background: url(../images/m/menuicon.png) no-repeat center/0.38rem auto;
  position: absolute;
  top: 0.22rem;
  right: 0.36rem;
}

.nikke_tnv_drawer {
  position: fixed;
  top: 0;
  left: 0;
  background: #040404;
  width: 100%;
  height: 100%;
  z-index: 500;
  display: none;
}
.nikke_tnv_drawer.show {
  display: block;
}
.nikke_tnv_drawer .nikke_menu_close {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  width: 0.5rem;
  height: 0.5rem;
}
.nikke_tnv_drawer .nikke_menu_close:before, .nikke_tnv_drawer .nikke_menu_close:after {
  position: absolute;
  left: 0.25rem;
  top: 0.1rem;
  content: " ";
  height: 0.34rem;
  width: 0.02rem;
  background-color: #fff;
}
.nikke_tnv_drawer .nikke_menu_close:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nikke_tnv_drawer .nikke_menu_close:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nikke_nvlist {
  width: 6.05rem;
  height: 4.8rem;
  margin: 1rem auto 0;
  position: relative;
}
.nikke_nvlist a {
  display: block;
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.24rem;
  color: #848382;
  text-align: center;
  position: relative;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}
.nikke_nvlist a::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(80%, rgba(255, 255, 255, 0.4)), to(transparent));
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.4) 80%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}
.nikke_nvlist a.cur {
  color: #c6c6c6;
}
.nikke_nvlist a.last {
  margin-right: 0;
}

.nikke_nvline {
  width: 1.96rem;
  height: 0.02rem;
  background: #ffffff;
  position: absolute;
  left: 2rem;
  top: 0;
  -webkit-transform: translate(0, -0.02rem);
  transform: translate(0, -0.02rem);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 2;
}

.nikke_nvlist.cn1 .nikke_nvline {
  top: 1rem;
}

.nikke_nvlist.cn2 .nikke_nvline {
  top: 2rem;
}

.nikke_nvlist.cn3 .nikke_nvline {
  top: 3rem;
}

.nikke_nvlist.cn4 .nikke_nvline {
  top: 4rem;
}

.nikke_nvlist.cn5 .nikke_nvline {
  top: 5rem;
}

.nikke_rlink {
  width: 4.92rem;
  height: 1.22rem;
  margin: 0.7rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.nikke_rlink a {
  display: block;
  width: 1.24rem;
  height: 1.22rem;
  text-indent: -9999px;
  background: url(../images/m/rlink.png) no-repeat;
  background-size: 4.92rem 1.22rem;
}
.nikke_rlink a.fce {
  background-position: 0 0;
}
.nikke_rlink a.ytb {
  background-position: -1.85rem 0;
}
.nikke_rlink a.twer {
  background-position: -3.7rem 0;
}

.nikke_hvideo_btn {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1.6rem 0 0 -1.032rem;
  display: block;
  width: 2.064rem;
  height: 2.064rem;
  font-size: 0;
  background: url(../images/emved_arr.png) no-repeat 0.744rem 50%;
  background-size: 0.72rem auto;
}

.nikke_hvideo_btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.064rem;
  height: 2.064rem;
  background: url(../images/emved_cir1.png) no-repeat 50% 50%;
  background-size: 1.888rem auto;
}

.nikke_hvideo_btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.064rem;
  height: 2.064rem;
  background: url(../images/emved_cir2.png) no-repeat 50% 50%;
  background-size: 2.064rem auto;
}

.nikke_hvideo_btn:after {
  -webkit-animation-name: emved1;
  animation-name: emved1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.nikke_hvideo_btn:before {
  -webkit-animation: emved2;
  animation: emved2;
  -webkit-animation-duration: 25s;
  animation-duration: 25s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.nikke_hvideo_btn:hover:before {
  -webkit-animation: emved3;
  animation: emved3;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes emved1 {
  from {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes emved1 {
  from {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes emved2 {
  from {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}
@keyframes emved2 {
  from {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}
@-webkit-keyframes emved3 {
  from {
    -webkit-transform: rotate(90deg) scale(1.05);
    transform: rotate(90deg) scale(1.05);
  }
  to {
    -webkit-transform: rotate(-720deg) scale(1);
    transform: rotate(-720deg) scale(1);
  }
}
@keyframes emved3 {
  from {
    -webkit-transform: rotate(90deg) scale(1.05);
    transform: rotate(90deg) scale(1.05);
  }
  to {
    -webkit-transform: rotate(-720deg) scale(1);
    transform: rotate(-720deg) scale(1);
  }
}
.nikke_hvideo {
  display: block;
  width: 0.85rem;
  height: 0.93rem;
  background: url(../images/hv_play.png) no-repeat center/100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0.9rem 0 0 -0.42rem;
  text-indent: -9999rem;
  z-index: 20;
  -webkit-animation: ani-hvideo 1s ease-out alternate infinite;
  animation: ani-hvideo 1s ease-out alternate infinite;
}

.nikkle_shift {
  display: block;
  width: 2.18rem;
  height: 1.15rem;
  background: url(../images/nikke_logo.png) no-repeat center/100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 1rem 0 0 -1.09rem;
  z-index: 30;
}
.nikke_head.has-cbt .nikke_hvideo_btn {
  margin-top: -2.1rem;
}
.nikke_head.has-cbt .nikkle_shift {
  margin-top: 0.5rem;
}

.nikke_scroll {
  display: block;
  width: 0.13rem;
  height: 0.61rem;
  background: url(../images/nikkle_scroll.png) no-repeat center/100%;
  position: absolute;
  right: 0.5rem;
  bottom: 3rem;
  z-index: 30;
}
.nikke_scroll span {
  display: block;
  width: 0.08rem;
  height: 1.33rem;
  background: url(../images/nikke_scroll_jt.png) no-repeat center/100%;
  position: absolute;
  right: 0;
  top: 0.8rem;
  z-index: 20;
  -webkit-animation: ani-scroll 1.5s infinite;
  animation: ani-scroll 1.5s infinite;
}

@-webkit-keyframes ani-scroll {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 0.3rem);
    transform: translate(0, 0.3rem);
  }
}
@keyframes ani-scroll {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 0.3rem);
    transform: translate(0, 0.3rem);
  }
}
.nikke_cont {
  height: 100%;
  position: relative;
  background-color: #101010;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nikke_cont.cbg1 {
  background-image: url(../images/m/bg_02.jpg);
}
.nikke_cont.cbg2 {
  background-image: url(../images/m/bg_03.jpg);
}
.nikke_cont.cbg3 {
  background-image: url(../images/m/bg_04.jpg);
}
.nikke_cont.cbg4 {
  background-image: url(../images/m/bg_05.jpg);
}

.nikke_cont_cbg2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/m/bg_03.jpg) no-repeat top center;
  background-size: cover;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.nikke_visition {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.nikke_visition ul, .nikke_visition li {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}
.nikke_visition li span {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}
.nikke_visition li .nke_en {
  font-size: 0.208rem;
  font-family: "ytjw";
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
  opacity: 0;
  position: absolute;
  bottom: 3.6rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 20;
}
.nikke_visition li .nke_p1, .nikke_visition li .nke_p2 {
  font-size: 0.222rem;
  color: #ffffff;
  line-height: 0.32rem;
  position: absolute;
  z-index: 30;
  /*font-family: "gd17";*/
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 6px, rgba(0, 0, 0, 0.5) 0 0 6px;
  width: 100%;
  text-align: center;
  opacity: 0;
}
.nikke_visition li .nke_p1 i, .nikke_visition li .nke_p2 i {
  font-style: normal;
  font-size: 0.36rem;
}
.nikke_visition li .nke_p1 em, .nikke_visition li .nke_p2 em {
  font-style: normal;
  font-size: 0.44rem;
}
.nikke_visition li .nke_p1 b, .nikke_visition li .nke_p2 b {
  font-style: normal;
  font-size: 0.544rem;
}
.nikke_visition li .nke_p1.sm, .nikke_visition li .nke_p2.sm {
  font-size: 0.208rem;
}
.nikke_visition li .nke_p1.sm i, .nikke_visition li .nke_p2.sm i {
  font-size: 0.304rem;
}
.nikke_visition li .nke_p1 {
  bottom: 2.9rem;
}
.nikke_visition li .nke_p2 {
  bottom: 2.4rem;
}
.nikke_visition li.nke_vision_item1 .nke_p1 {
  white-space: nowrap;
}
.nikke_visition li.nke_vision_item1 .nke_p2 {
  white-space: nowrap;
}
.nikke_visition li.nke_vision_item2 .nke_p1 {
  bottom: 3.1rem;
}
.nikke_visition li.nke_vision_item2 .nke_en {
  bottom: 3.8rem;
}
.nikke_visition li.nke_vision_item4 .nke_p1 {
  line-height: 0.44rem;
}
.nikke_visition li.nke_vision_item4 .nke_en {
  bottom: 4.2rem;
}
.nikke_visition li.nke_vision_item7 .nke_p1 {
  bottom: 2.8rem;
}
.nikke_visition li.nke_vision_item7 .nke_en {
  bottom: 3.5rem;
}
.nikke_visition li.showAni span {
  -webkit-transform-origin: 30% 30%;
  transform-origin: 30% 30%;
  -webkit-animation: ani-vishow 1.5s linear 1 both;
  animation: ani-vishow 1.5s linear 1 both;
}
.nikke_visition li.showAni .nke_en {
  -webkit-animation: ani-showen 1s 0.8s 1 both;
  animation: ani-showen 1s 0.8s 1 both;
}
.nikke_visition li.showAni .nke_p1 {
  -webkit-animation: ani-showpar 1s 1 both;
  animation: ani-showpar 1s 1 both;
}
.nikke_visition li.showAni .nke_p2 {
  -webkit-animation: ani-showpar 1s 0.5s 1 both;
  animation: ani-showpar 1s 0.5s 1 both;
}
.nikke_visition li.hideAni span {
  -webkit-transform-origin: 60% 60%;
  transform-origin: 60% 60%;
  -webkit-animation: ani-vihide 1.5s linear 1 both;
  animation: ani-vihide 1.5s linear 1 both;
}
.nikke_visition li.hideAni .nke_en {
  -webkit-animation: ani-hideen 0.4s 0.1s both;
  animation: ani-hideen 0.4s 0.1s both;
}
.nikke_visition li.hideAni .nke_p1 {
  -webkit-animation: ani-hidepar 0.6s 1 both;
  animation: ani-hidepar 0.6s 1 both;
}
.nikke_visition li.hideAni .nke_p2 {
  -webkit-animation: ani-hidepar 0.6s 0.2s 1 both;
  animation: ani-hidepar 0.6s 0.2s 1 both;
}
.nikke_visition .nikke_vis_prg {
  width: 6.72rem;
  height: 1.08rem;
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  z-index: 40;
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-left: -3.36rem;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.nikke_visition .nikke_vis_prg span {
  display: block;
  width: 0.96rem;
  height: 0.96rem;
  border-radius: 0;
  opacity: 1 !important;
  margin: 0 !important;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  outline: none;
}
.nikke_visition .nikke_vis_prg span:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.6);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv1 {
  background-image: url(../images/m/nikke_p2_kv_thumb1.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv2 {
  background-image: url(../images/m/nikke_p2_kv_thumb2.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv3 {
  background-image: url(../images/m/nikke_p2_kv_thumb3.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv4 {
  background-image: url(../images/m/nikke_p2_kv_thumb4.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv5 {
  background-image: url(../images/m/nikke_p2_kv_thumb5.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv6 {
  background-image: url(../images/m/nikke_p2_kv_thumb6.jpg);
}
.nikke_visition .nikke_vis_prg span.nikke_p2_kv7 {
  background-image: url(../images/m/nikke_p2_kv_thumb7.jpg);
}
.nikke_visition .nikke_vis_prg span.swiper-pagination-bullet-active:after {
  display: none;
}
.nikke_visition .nikke_vis_cirprg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 1.9rem;
  text-align: center;
  white-space: nowrap;
  margin: 0 auto;
  z-index: 50;
  font-size: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.nikke_visition .nikke_vis_cirprg span {
  display: inline-block;
  vertical-align: middle;
  width: 0.14rem;
  height: 0.14rem;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #ccc;
  margin: 0 14px;
  cursor: pointer;
}
.nikke_visition .nikke_vis_cirprg span.swiper-pagination-bullet-active {
  width: 0.2rem;
  height: 0.2rem;
  border: #f5f5f5 solid 2px;
  background: none;
}

.nikke-p2-kv {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.nikke-p2-kv::after {
  display: block;
  content: "";
  width: 100%;
  height: 5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, #000));
  background: linear-gradient(to bottom, transparent 0%, #000 60%);
}
.nikke-p2-kv.nikke_p2_kv1 {
  background-image: url(../images/m/nikke_p2_kv1.jpg);
}
.nikke-p2-kv.nikke_p2_kv2 {
  background-image: url(../images/m/nikke_p2_kv2.jpg);
}
.nikke-p2-kv.nikke_p2_kv3 {
  background-image: url(../images/m/nikke_p2_kv3.jpg);
}
.nikke-p2-kv.nikke_p2_kv4 {
  background-image: url(../images/m/nikke_p2_kv4.jpg);
}
.nikke-p2-kv.nikke_p2_kv5 {
  background-image: url(../images/m/nikke_p2_kv5.jpg);
}
.nikke-p2-kv.nikke_p2_kv6 {
  background-image: url(../images/m/nikke_p2_kv6.jpg);
}
.nikke-p2-kv.nikke_p2_kv7 {
  background-image: url(../images/m/nikke_p2_kv7.jpg);
}

@-webkit-keyframes ani-vishow {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
  5% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ani-vishow {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
  5% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes ani-vihide {
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ani-vihide {
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes ani-showen {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes ani-showen {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@-webkit-keyframes ani-hideen {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ani-hideen {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ani-showpar {
  0% {
    -webkit-transform: translate(200px, 0);
    transform: translate(200px, 0);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ani-showpar {
  0% {
    -webkit-transform: translate(200px, 0);
    transform: translate(200px, 0);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ani-hidepar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ani-hidepar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.nikke_char_side {
  width: 100%;
  height: 2.37rem;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 60;
}
.nikke_char_side a {
  display: block;
  height: 100%;
  width: 25%;
  margin-bottom: 1px;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
}
.nikke_char_side a.cur, .nikke_char_side a:hover {
  background: url(../images/m/nikke_character_side.png) no-repeat center top/100%;
  background-size: cover;
}
.nikke_char_side a.cur span, .nikke_char_side a:hover span {
  opacity: 1;
}
.nikke_char_side a.cur span:after, .nikke_char_side a:hover span:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #d1d1d1;
  position: absolute;
  left: 0;
  top: 0;
}
.nikke_char_side span {
  display: block;
  width: 3rem;
  height: 1.9rem;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -0.7rem 0 0 -0.2rem;
  opacity: 0.15;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nikke_char_side span.nikke_char_logo1 {
  background: url(../images/nikke_character_sidelogo1.png) no-repeat center/100%;
}
.nikke_char_side span.nikke_char_logo2 {
  background: url(../images/nikke_character_sidelogo2.png) no-repeat center/100%;
}
.nikke_char_side span.nikke_char_logo3 {
  background: url(../images/nikke_character_sidelogo3.png) no-repeat center/100%;
}
.nikke_char_side span.nikke_char_logo4 {
  background: url(../images/nikke_character_sidelogo4.png) no-repeat center/100%;
}

.nikke_char_woman {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.nikke_char_woman .nikke-char {
  display: block;
  width: 7.5rem;
  height: 9.8rem;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: 7.5rem auto;
}
.nikke_char_woman .nikke-char.cur, .nikke_char_woman .nikke-char:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}
.nikke_char_woman .nikke-char.cur span, .nikke_char_woman .nikke-char:hover span {
  opacity: 1;
}
.nikke_char_woman .swiper-slide {
  height: 100%;
}

.nikke_char_ct {
  width: 100%;
  height: 100%;
  display: none;
}
.nikke_char_ct.show {
  display: block;
}

.nikke_char_ct1 .nikke_woman1 {
  background-image: url(../images/m/nikke_char_rapi.png);
}
.nikke_char_ct1 .nikke_woman2 {
  background-image: url(../images/m/nikke_char_neon.png);
}
.nikke_char_ct1 .nikke_woman3 {
  background-image: url(../images/m/nikke_char_marian.png);
}

.nikke_char_ct2 .nikke_woman1 {
  background-image: url(../images/m/nikke_char_maxwell.png);
}
.nikke_char_ct2 .nikke_woman2 {
  background-image: url(../images/m/nikke_char_drake.png);
}
.nikke_char_ct2 .nikke_woman3 {
  background-image: url(../images/m/nikke_char_epinel.png);
}

.nikke_char_ct3 .nikke_woman1 {
  background-image: url(../images/m/nikke_char_alice.png);
}
.nikke_char_ct3 .nikke_woman2 {
  background-image: url(../images/m/nikke_char_exia.png);
}
.nikke_char_ct3 .nikke_woman3 {
  background-image: url(../images/m/nikke_char_anis.png);
}

.nikke_char_ct4 .nikke_woman1 {
  background-image: url(../images/m/nikke_char_snowwhite.png);
}
.nikke_char_ct4 .nikke_woman2 {
  background-image: url(../images/m/nikke_char_hongryeor.png);
}

.rolechange {
  position: absolute;
  left: 0;
  bottom: 2.3rem;
  width: 100%;
  z-index: 80;
}
.rolechange.hide {
  -webkit-animation: ani-rolehide 0.5s 1 both;
  animation: ani-rolehide 0.5s 1 both;
}
.rolechange.show {
  z-index: 50;
  -webkit-animation: ani-roleshow 1s 1 both;
  animation: ani-roleshow 1s 1 both;
}
.rolechange.show .nikke_rolename {
  -webkit-animation: ani-roleshow-in 1s 0.3s 1 both;
  animation: ani-roleshow-in 1s 0.3s 1 both;
}
.rolechange.show .nikke_counters {
  -webkit-animation: ani-roleshow-in 1s 0.6s 1 both;
  animation: ani-roleshow-in 1s 0.6s 1 both;
}
.rolechange.show .nikke_rolems {
  -webkit-animation: ani-roleshow-in 1s 0.9s 1 both;
  animation: ani-roleshow-in 1s 0.9s 1 both;
}

@-webkit-keyframes ani-rolehide {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 50;
  }
  30% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1.2);
    transform: translate(0, 0) scale(1.2);
    z-index: 50;
  }
  99% {
    opacity: 0;
    -webkit-transform: translate(-200px, 0) scale(1.2);
    transform: translate(-200px, 0) scale(1.2);
    z-index: 50;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-200px, 0) scale(1.2);
    transform: translate(-200px, 0) scale(1.2);
    z-index: -200;
  }
}
@keyframes ani-rolehide {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 50;
  }
  30% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1.2);
    transform: translate(0, 0) scale(1.2);
    z-index: 50;
  }
  99% {
    opacity: 0;
    -webkit-transform: translate(-200px, 0) scale(1.2);
    transform: translate(-200px, 0) scale(1.2);
    z-index: 50;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-200px, 0) scale(1.2);
    transform: translate(-200px, 0) scale(1.2);
    z-index: -200;
  }
}
@-webkit-keyframes ani-roleshow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(1.2);
    transform: translate(0, 0) scale(1.2);
    z-index: 45;
  }
  99% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 45;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 50;
  }
}
@keyframes ani-roleshow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0) scale(1.2);
    transform: translate(0, 0) scale(1.2);
    z-index: 45;
  }
  99% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 45;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    z-index: 50;
  }
}
@-webkit-keyframes ani-roleshow-in {
  0% {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-roleshow-in {
  0% {
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
.nikke_role_hline {
  display: block;
  width: 6.52rem;
  height: 0.02rem;
  background: url(../images/m/nikke_det_hline.png) no-repeat center/100%;
  position: absolute;
  top: 1.5rem;
  left: 0.2rem;
}

.nikke_role_sline {
  display: block;
  width: 0.02rem;
  height: 3.94rem;
  background: url(../images/m/nikke_det_sline.png) no-repeat center/auto 100%;
  position: absolute;
  top: 0;
  left: 0.48rem;
}

.nikke_rolename {
  display: block;
  width: 5.5rem;
  height: 0.96rem;
  margin-left: 0.87rem;
  margin-top: -0.1rem;
  white-space: nowrap;
}

.nikke_rolenamep {
  display: inline-block;
  vertical-align: top;
  height: 0.96rem;
  line-height: 0.96rem;
  font-size: 0.64rem;
  color: #fff;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
}

.nikke_rolecv {
  display: inline-block;
  vertical-align: top;
  height: 0.39rem;
  padding: 0 0.24rem;
  line-height: 0.44rem;
  border-radius: 0.26rem;
  color: #fff;
  border: #fff solid 1px;
  margin: 0.29rem 0 0 0.06rem;
  cursor: pointer;
}
.nikke_rolecv .arial {
  font-family: "Arial";
  font-size: 0.18rem;
}

.nikke_counters {
  display: block;
  width: 2.75rem;
  height: 0.38rem;
  background: url(../images/m/nikke_counters.png) no-repeat center/100%;
  text-align: center;
  line-height: 0.38rem;
  font-family: "Industry";
  font-size: 0.24rem;
  color: #000;
  margin: 0 0 0 0.87rem;
}

.nikke_rolecv_icon {
  display: inline-block;
  vertical-align: top;
  width: 0.36rem;
  height: 0.36rem;
  background: url(../images/m/source_icon.png) no-repeat center/100%;
  margin: 0.02rem 0 0 0.06rem;
  position: relative;
}
.nikke_rolecv_icon::before, .nikke_rolecv_icon::after {
  display: block;
  content: "";
  position: absolute;
  width: 0.14rem;
  height: 0.23rem;
  left: 0.2rem;
  top: 0.06rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.nikke_rolecv_icon::before {
  background-image: url(../images/m/source_icon_l1.png);
}
.nikke_rolecv_icon::after {
  background-image: url(../images/m/source_icon_l2.png);
}

.nikke_rolecv.on .nikke_rolecv_icon::before {
  -webkit-animation: ani-cv-on1 1s linear infinite;
  animation: ani-cv-on1 1s linear infinite;
}
.nikke_rolecv.on .nikke_rolecv_icon::after {
  -webkit-animation: ani-cv-on2 1s linear infinite;
  animation: ani-cv-on2 1s linear infinite;
}
@-webkit-keyframes ani-cv-on1 {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
@keyframes ani-cv-on1 {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
@-webkit-keyframes ani-cv-on2 {
  0%, 25%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes ani-cv-on2 {
  0%, 25%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

.nikke_rolems {
  width: 6rem;
  margin: 0.4rem 0 0 0.87rem;
  font-size: 0.2rem;
  color: #ddd;
  line-height: 0.36rem;
  position: relative;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px, rgba(0, 0, 0, 0.5) 0 0 2px, rgba(0, 0, 0, 0.5) 0 0 2px;
}
.nikke_rolems:after {
  content: "";
  width: 0.38rem;
  height: 0.1rem;
  background: url(../images/m/role_msicon.png) no-repeat center/100%;
  position: absolute;
  bottom: -0.46rem;
  right: 0;
}

.nikke_rolechange {
  width: 0.92rem;
  height: 2.86rem;
  position: absolute;
  top: 0.7rem;
  right: 0.38rem;
  overflow: hidden;
  z-index: 50;
}
.nikke_rolechange ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.nikke_rolechange li {
  width: 0.86rem;
  height: 0.86rem !important;
  position: relative;
  cursor: pointer;
  margin-top: 0.08rem;
}
.nikke_rolechange li .nikke_rolehd {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: #a4a4a4 solid 1px;
  border-radius: 0.02rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.nikke_rolechange li .nikke_rolehd img {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 0;
}
.nikke_rolechange li.swiper-slide-active .nikke_rolehd {
  border: #00b8ef solid 1px;
  -webkit-filter: drop-shadow(#00b8ef 0 0 0.04rem);
  filter: drop-shadow(#00b8ef 0 0 0.04rem);
}

.nikke_role_prev, .nikke_role_next {
  display: block;
  width: 0.36rem;
  height: 0.43rem;
  position: absolute;
  top: 50%;
  margin: -0.21rem 0 0 0;
  z-index: 60;
}

.nikke_role_prev {
  left: 0.36rem;
  background: url(../images/m/det_leftbtn.png) no-repeat center/100%;
}

.nikke_role_next {
  right: 0.36rem;
  background: url(../images/m/det_rightbtn.png) no-repeat center/100%;
}

.nikke_bos {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.9rem 0 0.5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nikke_bos li {
  width: 100%;
  height: 1.92rem;
  max-height: 1.92rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}
.nikke_bos li.nbs1 {
  background: url(../images/m/nikke_bos_01.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs2 {
  background: url(../images/m/nikke_bos_02.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs3 {
  background: url(../images/m/nikke_bos_03.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs4 {
  background: url(../images/m/nikke_bos_04.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs5 {
  background: url(../images/m/nikke_bos_05.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs6 {
  background: url(../images/m/nikke_bos_06.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li .nbsbox_light {
  display: none;
}
.nikke_bos li .nbs_mask {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  z-index: 30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
}
.nikke_bos li .nikke_bos_name {
  display: block;
  width: 100%;
  height: 0.6rem;
  font-family: "Industry";
  font-size: 0.7rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.nikke_bos li .nikke_box_namepara {
  width: 1.59rem;
  height: 0.56rem;
  text-align: center;
  margin-top: 0.2rem;
  background: url(../images/view_btn.png) no-repeat center/100%;
  text-indent: -9999rem;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  cursor: pointer;
}
.nikke_bos li:hover .nbs_mask {
  background: rgba(0, 0, 0, 0.66);
}
.nikke_bos li:hover .nikke_bos_name {
  opacity: 1;
}
.nikke_bos li:hover .nikke_box_namepara {
  opacity: 1;
}

@-webkit-keyframes ani-transin-top {
  0% {
    -webkit-transform: translate(-7.6rem, 0);
    transform: translate(-7.6rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transin-top {
  0% {
    -webkit-transform: translate(-7.6rem, 0);
    transform: translate(-7.6rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transin-bot {
  0% {
    -webkit-transform: translate(7.6rem, 0);
    transform: translate(7.6rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transin-bot {
  0% {
    -webkit-transform: translate(7.6rem, 0);
    transform: translate(7.6rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transout-top {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-7.6rem, 0);
    transform: translate(-7.6rem, 0);
    opacity: 0;
  }
}
@keyframes ani-transout-top {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-7.6rem, 0);
    transform: translate(-7.6rem, 0);
    opacity: 0;
  }
}
@-webkit-keyframes ani-transout-bot {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(7.6rem, 0);
    transform: translate(7.6rem, 0);
    opacity: 0;
  }
}
@keyframes ani-transout-bot {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(7.6rem, 0);
    transform: translate(7.6rem, 0);
    opacity: 0;
  }
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs1 {
  -webkit-animation: ani-transin-top 1s 1 both;
  animation: ani-transin-top 1s 1 both;
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs2 {
  -webkit-animation: ani-transin-bot 1s 0.2s 1 both;
  animation: ani-transin-bot 1s 0.2s 1 both;
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs3 {
  -webkit-animation: ani-transin-top 1s 0.4s 1 both;
  animation: ani-transin-top 1s 0.4s 1 both;
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs4 {
  -webkit-animation: ani-transin-bot 1s 0.6s 1 both;
  animation: ani-transin-bot 1s 0.6s 1 both;
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs5 {
  -webkit-animation: ani-transin-top 1s 0.8s 1 both;
  animation: ani-transin-top 1s 0.8s 1 both;
}
.nikke_cont.swiper-slide-active .nikke_bos li.nbs6 {
  -webkit-animation: ani-transin-bot 1s 1s 1 both;
  animation: ani-transin-bot 1s 1s 1 both;
}

.nikke_detail_zindex {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
}

.nikke_detail_box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  z-index: -100;
  visibility: hidden;
}

.nikke_det_bgbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /*background-size: cover;*/
}

.nikke_det_left {
  display: none;
}

.nikke_bot_ct {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/m/bos_ct.jpg) no-repeat center center;
  background-size: cover;
}

.nikke_det_right {
  display: none;
}

.nikke_detail_box.show {
  z-index: 100;
  visibility: visible;
  -webkit-animation: ani-mask 0.5s 1 ease both;
  animation: ani-mask 0.5s 1 ease both;
}

.nikke_detail_box.hide {
  z-index: 100;
  visibility: visible;
  -webkit-animation: ani-mask-hide 0.5s 1 ease both;
  animation: ani-mask-hide 0.5s 1 ease both;
}

@-webkit-keyframes ani-mask {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ani-mask {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ani-mask-hide {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}
@keyframes ani-mask-hide {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}
.nikke_detail_bos {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 30;
}
.nikke_detail_bos .swiper-slide {
  width: 100%;
  height: 100%;
}
.nikke_detail_bos .nikke_bos_img {
  display: block;
  width: 7.5rem;
  height: 5.9rem;
  position: absolute;
  left: 50%;
  margin-left: -3.75rem;
  top: 1.05rem;
  -o-object-fit: contain;
  object-fit: contain;
}

@-webkit-keyframes ani-vershow {
  0% {
    -webkit-transform: translate(5rem, 0);
    transform: translate(5rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-vershow {
  0% {
    -webkit-transform: translate(5rem, 0);
    transform: translate(5rem, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transhow {
  0% {
    -webkit-transform: translate(0, 5rem);
    transform: translate(0, 5rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow {
  0% {
    -webkit-transform: translate(0, 5rem);
    transform: translate(0, 5rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transhow2 {
  0% {
    -webkit-transform: translate(0, 0.6rem);
    transform: translate(0, 0.6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow2 {
  0% {
    -webkit-transform: translate(0, 0.6rem);
    transform: translate(0, 0.6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transhow3 {
  0% {
    -webkit-transform: translate(0, -0.6rem);
    transform: translate(0, -0.6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow3 {
  0% {
    -webkit-transform: translate(0, -0.6rem);
    transform: translate(0, -0.6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ani-transhow4 {
  0% {
    -webkit-transform: translate(0, 0.3rem);
    transform: translate(0, 0.3rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow4 {
  0% {
    -webkit-transform: translate(0, 0.3rem);
    transform: translate(0, 0.3rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}
.nikke_bos_prev, .nikke_bos_next {
  width: 0.5rem;
  height: 0.5rem;
  background: url(../images/m/detail_change_btn.png) no-repeat;
  background-size: 0.4rem auto;
  position: absolute;
  top: 3.66rem;
  margin: -0.25rem 0 0 0;
  z-index: 50;
}

.nikke_bos_prev {
  left: 0.45rem;
}

.nikke_bos_next {
  right: 0.45rem;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.nikke_bos_back {
  display: block;
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: #ffffff solid 0.01rem;
  text-align: center;
  font-size: 0.18rem;
  color: #ffffff;
  line-height: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 50;
}

.nikke_role_back {
  display: block;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 50px;
  z-index: 50;
  position: absolute;
  top: 60px;
  right: 94px;
  border: #363333 solid 2px;
  color: #363333;
}
.nikke_role_back .nikke_bck_icon2 {
  background: url(../images/nikke_bck_icon2.png) no-repeat;
}

.nikke_det_pbox {
  width: 100%;
  height: 6rem;
  position: absolute;
  top: 7.1rem;
  left: 0;
  z-index: 40;
}

.nikke_vert_line {
  display: block;
  width: 1px;
  height: 4.57rem;
  background: url(../images/vert_line.png) no-repeat center/100% 100%;
  position: absolute;
  left: 0.92rem;
  top: -0.03rem;
}

.nikke_trans_line {
  display: block;
  width: 5.07rem;
  height: 1px;
  background: url(../images/trans_line.png) no-repeat center/100% 100%;
  position: absolute;
  left: 0.36rem;
  top: 1rem;
}

.nikke_det_para {
  width: 5.77rem;
  height: 4.7rem;
  overflow: auto;
  margin: 1.2rem 0 0 1.3rem;
  padding-right: 0.1rem;
  text-align: justify;
  /*font-family: "gd17";*/
  font-size: 0.2rem;
  color: #cccccc;
  line-height: 0.36rem;
}

.nikke_det_para span {
  display: inline-block;
  width: 0.1rem;
}

.nikke_det_para::-webkit-scrollbar {
  width: 0.02rem;
}

.nikke_det_para::-webkit-scrollbar-track {
  width: 0.02rem;
}

.nikke_det_para::-webkit-scrollbar-thumb {
  width: 0.02rem;
  background-color: #fff;
}

.nikke_det_bosname {
  display: block;
  height: 0.96rem;
  width: 6rem;
  position: absolute;
  left: 1.3rem;
  top: 0;
  line-height: 0.96rem;
  font-size: 0.56rem;
  color: #ffffff;
  font-weight: bold;
  font-family: "Industry";
}

.nikke_bck_icon {
  display: inline-block;
  width: 0.2rem;
  height: 0.1rem;
  background: url(../images/nikke_bck_jt.png) no-repeat center/100%;
  vertical-align: top;
  margin: 0.2rem 0 0 0.02rem;
}

.nikke_media {
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nikke_media_prg {
  display: block;
  width: 100%;
  margin: 0.2rem auto 0;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  display: none;
}
.nikke_media_prg li {
  display: inline-block;
  vertical-align: middle;
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #484747;
  margin: 0 0.14rem;
  cursor: pointer;
}
.nikke_media_prg li.cur {
  width: 0.12rem;
  height: 0.12rem;
  border: #f5f5f5 solid 0.02rem;
  background: none;
}

.media_conner {
  display: none;
}

.nikke_media_list {
  width: 6.78rem;
  height: 9.7rem;
  position: relative;
  z-index: 30;
  margin: 0.5rem auto 0;
}
.nikke_media_list li {
  width: 2.25rem;
  height: 5.19rem;
  float: left;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.nikke_media_list li:first-child {
  width: 6.75rem;
  height: 4.15rem;
}
.nikke_media_list li .media_bg {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  left: 0;
  top: 0;
}
.nikke_media_list li.medimg1 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat center center;
  background-size: 100% 100%;
  background-position: 50% 50%;
}
.nikke_media_list li.medimg2 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat center center;
  background-size: auto 100%;
  background-position: 50% 50%;
}
.nikke_media_list li.medimg3 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat center center;
  background-size: auto 100%;
}
.nikke_media_list li.medimg4 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat #000 center center;
  background-size: auto 100%;
  background-position: 50% 50%;
}
.nikke_media_list li .media_mask {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
}
.nikke_media_list li .media_play {
  display: block;
  width: 1.16rem;
  height: 1.16rem;
  background: url(../images/media_play_light.png) no-repeat center/100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.58rem 0 0 -0.58rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 10;
}

.dia {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
}

.dia_in {
  display: block;
  width: 5.8rem;
  height: 2.88rem;
  background: url(../images/com_diabg.png) no-repeat center/100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1.44rem 0 0 -2.9rem;
  z-index: 30;
  padding-top: 1px;
}
.dia_in .dia_close {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
  background: url(../images/com_close.png) no-repeat center/100%;
  position: absolute;
  right: 0.18rem;
  top: 0.18rem;
  z-index: 30;
}

.dia_para {
  width: 5rem;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  font-family: "Noto Sans KR";
  margin: 0.58rem auto 0;
}
.dia_para .dia_para_ct {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.24rem;
  color: #adadad;
  line-height: 0.32rem;
}

.footer {
  height: auto !important;
  width: 100%;
  padding: 0.34rem 0;
  background: #000;
}

.footer_in {
  font-size: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer_logo {
  display: inline-block;
  vertical-align: top;
  width: 1.43rem;
  height: 1.02rem;
  background: url(../images/footer_logo.png) no-repeat;
  background-size: 1.43rem auto;
  margin: 0 0.20rem;
}

.footer_logo2{
  width: 1.02rem;
  height: 0.57rem;
  background: url(../images/footer_logo2.png) no-repeat;
  background-size: 1.02rem 0.57rem;
  margin-top: 0.20rem;
}

.footer_para {
  display: inline-block;
  width: 100%;
  font-size: 0.18rem;
  color: #9c9c9c;
  margin: 0.20rem 0 0 0;
  line-height: 0.32rem;
  box-sizing: border-box;
  padding: 0 0.20rem;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Helvetica Neue", sans-serif;
}
.footer_para a{
  color: #9c9c9c;
}


.nikke_cbt_btn{
  width: 4.2rem;
  height: 0.72rem;
  text-align: center;
  position: absolute;
  line-height: 0.64rem;
  left: 50%;
  top: 40%;
  margin-top: 3.8rem;
  margin-left: -2.1rem;
  font-family: 'Industry';
  animation: cbt-breath 2s linear infinite;
}
.cbt_box{
  width: 100%;
  height: 100%;
  /*background: url(../images/mgcbt_btn.png) no-repeat;*/
  background: rgba(0,0,0,0.6);
  border: rgba(255,255,255,0.14) solid 0.02rem;
  border-radius: 0.46rem;
  line-height: 0.64rem;
  animation: cbt-gre 2s linear infinite;
  font-style: italic;
  font-size: 0;
}
.cbt_tx1{
  font-size: 0.4rem;
  color: #e6e7e8;
  font-weight: bold;
  vertical-align: top;
  padding:0 0.08rem;
}
.cbt_tx2{
  display: inline-block;
  vertical-align: top;
  font-size: 0.34rem;
  line-height: 0.40rem;
  color: #b3adac;
  margin-top: 0.14rem;
  font-family:"Noto Sans JP";
  vertical-align: top;
} 
.cbt_jt{
  display: inline-block;
  vertical-align: top;
  width: 0.11rem;
  height: 0.19rem;
  background: url(../images/cbtjt_icon.png) no-repeat center / 100%;
  margin: 0.28rem 0 0 0.12rem;
  animation: cbt-jticon 2s linear infinite;
}


/*@keyframes cbt-gre{
  0%{
    filter: drop-shadow(#fff 0 0 2px);
  }
  50%{
    filter: drop-shadow(#fff 0 0 0);
  }
  100%{
    filter: drop-shadow(#fff 0 0 2px);
  }
}*/
@keyframes cbt-gre{
  0%{
    border: rgba(255,255,255,0.2) solid 0.02rem;
  }
  50%{
    border: rgba(255,255,255,0.6) solid 0.02rem;
  }
  100%{
    border: rgba(255,255,255,0.2) solid 0.02rem;
  }
}
@keyframes cbt-breath{
  0%{
    transform: scale(0.8);
  }
  50%{
    transform: scale(0.83);
  }
  100%{
    transform: scale(0.8);
  }
}
@keyframes cbt-jticon{
  0%{
    transform: translate(0,0);
  }
  50%{
    transform: translate(6px,0);
  }
  100%{
    transform: translate(0,0);
  }
}

@media screen and (min-aspect-ratio: 375/660) {
  .nikke_detail_bos .nikke_bos_img {
    top: 0.3rem;
  }

  .nikke_det_pbox {
    top: 6rem;
  }
}
@media screen and (min-aspect-ratio: 375/600) {
  .nikke_char_woman .nikke-char::after {
    display: block;
    content: "";
    width: 100%;
    height: 6rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, #000));
    background: linear-gradient(to bottom, transparent 0%, #000 60%);
  }

  .nikke_char_side span {
    opacity: 0.2;
  }

  .nikke_detail_bos .nikke_bos_img {
    top: 0rem;
    width: 6.75rem;
    height: 5.31rem;
    margin-left: -3.375rem;
  }

  .nikke_det_para {
    height: 3.6rem;
  }

  .nikke_det_pbox {
    height: 5rem;
    top: 5rem;
  }
}
@media screen and (min-aspect-ratio: 375/560) {
  .rolechange {
    bottom: 2rem;
  }

  .nikke_rolename {
    height: 0.72rem;
    margin-left: 0.6rem;
  }

  .nikke_rolenamep {
    font-size: 0.5rem;
    height: 0.72rem;
    line-height: 0.72rem;
  }

  .nikke_rolecv {
    height: 0.312rem;
    padding: 0 0.192rem;
    line-height: 0.352rem;
    border-radius: 0.208rem;
    margin: 0.232rem 0 0 0.048rem;
  }

  .nikke_rolecv_icon {
    width: 0.288rem;
    height: 0.288rem;
    margin: 0.016rem 0 0 0.048rem;
  }
  .nikke_rolecv_icon::before, .nikke_rolecv_icon::after {
    width: 0.112rem;
    height: 0.184rem;
    left: 0.16rem;
    top: 0.048rem;
  }

  .nikke_role_sline {
    left: 0.4rem;
  }

  .nikke_role_hline {
    top: 1.1rem;
  }

  .nikke_counters {
    width: 2.2rem;
    height: 0.304rem;
    line-height: 0.304rem;
    font-size: 0.192rem;
    margin-left: 0.6rem;
  }

  .nikke_rolems {
    width: 6.3rem;
    margin-top: 0.3rem;
    margin-left: 0.6rem;
    font-size: 0.19rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nikke_rolems:after {
    display: none;
  }

  .nikke_rolechange {
    width: 0.736rem;
    height: 2.288rem;
  }
  .nikke_rolechange li {
    width: 0.688rem;
    height: 0.688rem !important;
    margin-top: 0.04rem;
  }
  .nikke_rolechange li .nikke_rolehd {
    width: 0.688rem;
    height: 0.688rem;
  }

  .nikke_role_prev, .nikke_role_next {
    width: 0.288rem;
    height: 0.344rem;
    margin-top: -0.4rem;
  }

  .nikke_role_prev {
    left: 0.1rem;
  }

  .nikke_role_next {
    right: 0.1rem;
  }
}
@media screen and (min-aspect-ratio: 375/540) {
  .nikke_media_list {
    width: 5.424rem;
    height: 7.76rem;
  }

  .nikke_media_list li {
    width: 1.8rem;
    height: 4.152rem;
  }
  .nikke_media_list li:first-child {
    width: 5.4rem;
    height: 3.32rem;
  }
}
@media screen and (min-aspect-ratio: 375/500) {
  .nikke_detail_bos .nikke_bos_img {
    top: 0;
    width: 6rem;
    height: 4.72rem;
    margin-left: -3rem;
  }

  .nikke_vert_line {
    height: 3.2rem;
  }

  .nikke_trans_line {
    width: 3.8rem;
    top: 0.9rem;
  }

  .nikke_det_para {
    height: 3rem;
  }

  .nikke_det_pbox {
    height: 4.4rem;
    top: 4.5rem;
  }

  .nikke_bos li .nikke_bos_name {
    font-size: 0.4rem;
    height: 0.4rem;
  }

  .nikke_bos li .nikke_box_namepara {
    width: 1.4rem;
    height: 0.42rem;
    line-height: 0.4rem;
  }

  .nikke_det_bosname {
    font-size: 0.4rem;
    height: 0.76rem;
    line-height: 0.76rem;
  }

  .nikke_det_para {
    font-size: 0.18rem;
    margin-top: 1.1rem;
  }
}
@media screen and (min-aspect-ratio: 375/460) {
  .rolechange {
    bottom: 2rem;
  }

  .nikke_rolename {
    height: 0.56rem;
    margin-left: 0.4rem;
  }

  .nikke_rolenamep {
    font-size: 0.4rem;
    height: 0.56rem;
    line-height: 0.56rem;
  }

  .nikke_rolecv {
    height: 0.234rem;
    padding: 0 0.144rem;
    line-height: 0.264rem;
    border-radius: 0.156rem;
    margin: 0.174rem 0 0 0.036rem;
  }

  .nikke_rolecv_icon {
    width: 0.216rem;
    height: 0.216rem;
    margin: 0.012rem 0 0 0.036rem;
  }
  .nikke_rolecv_icon::before, .nikke_rolecv_icon::after {
    width: 0.084rem;
    height: 0.138rem;
    left: 0.12rem;
    top: 0.036rem;
  }

  .nikke_role_sline {
    left: 0.3rem;
  }

  .nikke_role_hline {
    top: 0.8rem;
  }

  .nikke_counters {
    width: 1.65rem;
    height: 0.228rem;
    line-height: 0.228rem;
    font-size: 0.144rem;
    margin-left: 0.4rem;
  }

  .nikke_rolems {
    width: 6.6rem;
    margin-top: 0.2rem;
    margin-left: 0.4rem;
    font-size: 0.18rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nikke_rolechange {
    width: 0.552rem;
    height: 1.716rem;
  }
  .nikke_rolechange li {
    width: 0.516rem;
    height: 0.516rem !important;
    margin-top: 0.04rem;
  }
  .nikke_rolechange li .nikke_rolehd {
    width: 0.516rem;
    height: 0.516rem;
  }

  .nikke_role_prev, .nikke_role_next {
    width: 0.216rem;
    height: 0.258rem;
    margin-top: -0.4rem;
  }

  .nikke_role_prev {
    left: 0.1rem;
  }

  .nikke_role_next {
    right: 0.1rem;
  }
}


.focus_c2 { height: 6.8rem; position: absolute; padding-top: 1px; width: 100%; top: 50%; margin-top: -3.4rem; }

.focus_swip { width: 100%; height: 6.41rem; position: relative; margin: 0 auto; }

.focus_swip li { width: 4.06rem; height: 5.64rem; z-index: 5; }

.focus_img { width: 3.30rem; height: 5.64rem; position: absolute; left: 50%; top: 50%; margin: -2.82rem 0 0 -1.65rem; -webkit-transition: all 0.5s; transition: all 0.5s; }

.focus_img img { display: block; width: 100%; height: 100%; }

.focus_mask { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20; background: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.5s; transition: all 0.5s; }

.focus_swip li.swiper-slide-active .focus_mask { background: rgba(0, 0, 0, 0); }

.prev_btn, .next_btn { display: block; width: 0.45rem; height: 0.52rem; position: absolute; top: 2.48rem; z-index: 80; }

.prev_btn { background: url(../images/m/prev_btn.png) no-repeat center / 100%; left: 0.42rem; }

.next_btn { background: url(../images/m/next_btn.png) no-repeat center / 100%; right: 0.42rem; }

.focus_prg { width: 100%; height: 0.12rem; position: absolute; left: 0; top: 5.96rem; z-index: 80; text-align: center; }

.focus_prg span { width: 0.12rem; height: 0.12rem; background: none; border: none; outline: none; opacity: 1 !important; background: url(../images/prg_icon.png) no-repeat center center / 100%; border-radius: 0; margin: 0 0.14rem !important; }

.focus_prg span.swiper-pagination-bullet-active { background: url(../images/prg_cur.png) no-repeat center center / 100%; }