@charset "UTF-8";
/* reset */
body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form {
  margin: 0;
  padding: 0;
}

body {
  font: 12px/1.5 tahoma, "u65b9u6b63u5170u4eadu9ed1", sans-serif;
  background: #000;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

em, b {
  font-style: normal;
}

a {
  text-decoration: none;
  filter: brightness(100%);
}

a:hover {
  text-decoration: none;
  filter: brightness(110%);
}

img {
  border: 0;
}

button, input, select, textarea {
  font-size: 100%;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th, ul, ol {
  padding: 0;
  list-style-type: none;
}

@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") format("embedded-opentype"), url("../fonts/gd17.woff") format("woff"), url("../fonts/gd17.ttf") format("truetype"), url("../fonts/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") format("embedded-opentype"), url("../fonts/ytjw.woff") format("woff"), url("../fonts/ytjw.ttf") format("truetype"), url("../fonts/ytjw.svg") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
html, body {
  height: 100%;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滑动轨道*/
::-webkit-scrollbar-track {
  border-radius: 0px;
  background: #101110;
}

/*滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #c8c8c8;
  cursor: pointer;
}

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

.hidden {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

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

.bg_box {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.video {
  width: 1920px;
  height: auto;
}

.video_botmsk {
  width: 100%;
  height: 94px;
  position: absolute;
  left: 0;
  bottom: 4px;
  background: url(../images/video_bgline.jpg) no-repeat top center;
  z-index: 20;
}

/*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: 1000px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -300px 0 0 -500px;
}
.dav_in video, .dav_in .video_in {
  display: block;
  width: 100%;
  height: 100%;
}

.dav_close {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  right: -60px;
  top: -10px;
  transform-origin: 50% 50%;
  background: url(../images/close.png) no-repeat;
  text-indent: -9999px;
}

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

.nikke_float {
  width: 100%;
  height: 181px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 300;
  background: url(../images/float_bot.png) no-repeat top center;
  text-align: center;
}
.nikke_float a {
  display: block;
  width: 278px;
  height: 84px;
  float: left;
  margin: 56px 36px 0 0;
}
.nikke_float a.float_lik1 {
  background: url(../images/geo_pay.png) no-repeat;
}
.nikke_float a.float_lik2 {
  background: url(../images/apsticon.png) no-repeat;
}

.nikke_float_in {
  width: 1300px;
  height: 181px;
  margin: 0 auto;
  position: relative;
  padding-top: 1px;
}

.nikke_t {
  display: block;
  width: 504px;
  height: 108px;
  background: url(../images/float_t.png) no-repeat;
  margin: 20px 58px 0 64px;
  text-indent: -9999px;
  float: left;
}

@keyframes ani-close {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.nikke_head {
  height: 1000px;
  background: url(../images/nikke_hkv.jpg) no-repeat bottom right;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.nikke_head_inner {
  position: relative;
  z-index: 30;
  height: 100%;
  margin: 0 auto;
}

.video_bgbox {
  width: 100%;
  height: auto;
  min-width: 1920px;
  min-height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
}

.video_bgbox_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  background: url(../images/h_mask.png) no-repeat;
  background-size: cover;
}

.nikke_tnv {
  height: 80px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 300;
  /*background: rgba(0,0,0,0.4);*/
  font-family: "Industry";
  /*transition: all 0.5s;*/
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.nikke_logo {
  display: block;
  width: 127px;
  height: 29px;
  background: url(../images/shift_up.png) no-repeat;
  float: left;
  margin: 20px 0 0 78px;
  z-index: 20;
}

.nikke_nvlist {
  width: 488px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -244px;
  white-space: nowrap;
  font-size: 0;
  text-align: center;
}
.nikke_nvlist a {
  display: inline-block;
  vertical-align: top;
  width: 82px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 16px;
  color: #fff;
  margin-right: 19px;
  transition: 0.8s;
}
.nikke_nvlist a:first-child {
  width: 54px;
}
.nikke_nvlist a.last {
  width: 72px;
}
.nikke_nvlist a.cur {
  color: #fff;
  font-weight: bold;
}
.nikke_nvlist a.last {
  margin-right: 0;
}

.nikke_nvline {
  width: 22px;
  height: 2px;
  background: #ffffff;
  position: absolute;
  left: 28px;
  top: 64px;
  transition: all 0.5s;
}

.nikke_nvlist.cn1 .nikke_nvline {
  width: 22px;
  left: 35px;
}

.nikke_nvlist.cn2 .nikke_nvline {
  width: 38px;
  left: 116px;
}

.nikke_nvlist.cn3 .nikke_nvline {
  width: 56px;
  left: 206px;
}

.nikke_nvlist.cn4 .nikke_nvline {
  width: 44px;
  left: 312px;
}

.nikke_nvlist.cn5 .nikke_nvline {
  width: 36px;
  left: 414px;
}

.nikke_rlink {
  width: 404px;
  height: 90px;
  float: right;
  padding-right: 60px;
  padding-top: 24px;
  box-sizing: border-box;
}
.nikke_rlink a {
  display: block;
  width: 43px;
  height: 43px;
  float: right;
  margin-left: 20px;
  text-indent: -9999px;
}
.nikke_rlink a.fce {
  background: url(../images/facebook_icon.png) no-repeat;
}
.nikke_rlink a.sha {
  background: url(../images/share_icon.png) no-repeat;
}
.nikke_rlink a.twer {
  background: url(../images/twitter_icon.png) no-repeat;
}

.nikke_hvideo_btn {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -129px;
  display: block;
  width: 258px;
  height: 258px;
  font-size: 0;
  background: url(../images/emved_arr.png) no-repeat 93px 50%;
}

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

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

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

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

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

@keyframes emved1 {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
@keyframes emved2 {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(-720deg);
  }
}
@keyframes emved3 {
  from {
    transform: rotate(90deg) scale(1.05);
  }
  to {
    transform: rotate(-720deg) scale(1);
  }
}
.nikke_hvideo_box {
  width: 134px;
  height: 134px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 41px 0 0 -68px;
  background: url(../images/hv_play_bg.png) no-repeat;
  z-index: 40;
  animation: ani-hvideo-icon 2s linear infinite;
}
.nikke_hvideo_box::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/hv_play_border.png) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  animation: ani-hvideo-border 1s ease-in-out infinite;
}

@keyframes ani-hvideo-border {
  100% {
    transform: rotate(360deg);
  }
}
.nikke_hvideo {
  display: block;
  width: 134px;
  height: 134px;
  background: url(../images/hv_play.png) no-repeat center/100%;
  text-indent: -9999px;
}
.nikke_hvideo::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/hv_play_light.png) no-repeat center/100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 5;
}
.nikke_hvideo:hover::after {
  animation: ani-hvideo 1s ease-in-out alternate infinite;
}

@keyframes ani-hvideo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ani-hvideo-icon {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.side_bar {
  width: 144px !important;
  height: 330px;
  position: fixed;
  right: 18px;
  top: 50%;
  margin: -168px 0 0 0;
  z-index: 300;
  font-family: "Industry";
  overflow: hidden;
  transition: all 0.5s;
}
.side_bar .side_barbg {
  display: block;
  width: 144px;
  height: 330px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  background: url(../images/side_line.png) no-repeat right center;
}
.side_bar ul {
  width: 100%;
  position: relative;
  z-index: 30;
}
.side_bar ul li {
  width: 100%;
  cursor: pointer;
  text-align: right;
  font-size: 14px;
  color: #a0a0a0;
  line-height: 66px;
  position: relative;
  box-sizing: border-box;
  padding-right: 34px;
}
.side_bar ul li p {
  opacity: 0;
  transition: all 0.3s;
}
.side_bar ul li .bar_cir {
  display: block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: #f6f6f6 solid 2px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 50%;
  margin: -5px 0 0 0;
}
.side_bar ul li.swiper-slide-active {
  font-size: 16px;
  color: #ffffff;
  opacity: 1;
}
.side_bar ul li.swiper-slide-active .bar_cir {
  opacity: 1;
}
.side_bar:hover ul li p {
  opacity: 1;
}
.side_bar.hide {
  right: -144px;
}

.nikkle_shift {
  display: block;
  width: 287px;
  height: 154px;
  background: url(../images/nikke_logo.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -156px 0 0 -143px;
  margin-top: 100px;
  z-index: 40;
}

.nikke_rpg {
  pointer-events: none;
  position: absolute;
  /*right: 70px;*/
  bottom: 30px;
  z-index: 50;
  font-family: "Industry";
  font-size: 16px;
  color: #ffffff;
  line-height: 24px;
  text-align: right;
  padding-right: 70px;
  box-sizing: border-box;
}

.nikke_spac {
  display: inline-block;
  vertical-align: top;
  margin: 0 16px;
}

.nikke_scroll {
  display: block;
  width: 13px;
  height: 61px;
  background: url(../images/nikkle_scroll.png) no-repeat;
  position: absolute;
  right: 410px;
  bottom: 230px;
  z-index: 30;
}
.nikke_scroll span {
  display: block;
  width: 8px;
  height: 133px;
  background: url(../images/nikke_scroll_jt.png) no-repeat;
  position: absolute;
  right: 0;
  top: 80px;
  z-index: 20;
  animation: ani-scroll 1.5s ease-in-out infinite;
}

@keyframes ani-scroll {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 30px);
  }
}
.nikke_cont {
  height: 1000px;
  position: relative;
}
.nikke_cont.cbg1 {
  background: url(../images/bg_02.jpg) no-repeat top center;
  background-size: cover;
}
.nikke_cont.cbg2 {
  background: url(../images/bg_03.jpg) no-repeat top center;
  background-size: cover;
}
.nikke_cont.cbg3 {
  background: #151515;
}
.nikke_cont.cbg4 {
  background: url(../images/bg_05.jpg) no-repeat top center;
  background-size: cover;
}

.nikke_cont_cbg2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bg_03.jpg) no-repeat top center;
  background-size: cover;
  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%;
  transform-origin: 50% 50%;
  opacity: 0;
  position: relative;
}
.nikke_visition li .nke_en {
  font-size: 26px;
  font-family: "ytjw";
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
  opacity: 0;
  position: absolute;
  bottom: 350px;
  left: 50%;
  z-index: 20;
}
.nikke_visition li .nke_p1, .nikke_visition li .nke_p2 {
  font-size: 34px;
  color: #ffffff;
  line-height: 38px;
  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;
  opacity: 0;
  width: 100%;
  text-align: center;
  left: 0;
  z-index: 20;
}
.nikke_visition li .nke_p1 i, .nikke_visition li .nke_p2 i {
  font-style: normal;
  font-size: 45px;
}
.nikke_visition li .nke_p1 em, .nikke_visition li .nke_p2 em {
  font-style: normal;
  font-size: 55px;
}
.nikke_visition li .nke_p1 b, .nikke_visition li .nke_p2 b {
  font-style: normal;
  font-size: 68px;
}
.nikke_visition li .nke_p1.sm, .nikke_visition li .nke_p2.sm {
  font-size: 26px;
}
.nikke_visition li .nke_p1.sm i, .nikke_visition li .nke_p2.sm i {
  font-size: 38px;
}
.nikke_visition li .nke_p1 {
  bottom: 276px;
}
.nikke_visition li .nke_p2 {
  bottom: 220px;
}
.nikke_visition li.nke_vision_item1 .nke_p1 {
  text-indent: -100px;
}
.nikke_visition li.nke_vision_item1 .nke_p2 {
  text-indent: 100px;
}
.nikke_visition li.nke_vision_item1 .nke_en {
  left: 50%;
  margin-left: -600px;
}
.nikke_visition li.nke_vision_item2 .nke_en {
  left: 50%;
  margin-left: -250px;
}
.nikke_visition li.nke_vision_item4 .nke_en {
  left: 50%;
  margin-left: -390px;
}
.nikke_visition li.nke_vision_item6 .nke_p1 {
  text-indent: -200px;
}
.nikke_visition li.nke_vision_item6 .nke_p2 {
  text-indent: 100px;
}
.nikke_visition li.nke_vision_item6 .nke_en {
  left: 50%;
  margin-left: -170px;
}
.nikke_visition li.nke_vision_item7 .nke_p1 {
  bottom: 230px;
}
.nikke_visition li.nke_vision_item7 .nke_en {
  left: 50%;
  bottom: 290px;
  margin-left: -80px;
}
.nikke_visition li.showAni span {
  transform-origin: 30% 30%;
  animation: ani-vishow 4s ease-in-out 1 both;
}
.nikke_visition li.showAni .nke_en {
  animation: ani-showen 1s 0.8s both;
}
.nikke_visition li.showAni .nke_p1 {
  animation: ani-showpar 1s 1 both;
}
.nikke_visition li.showAni .nke_p2 {
  animation: ani-showpar 1s 0.5s 1 both;
}
.nikke_visition li.hideAni span {
  transform-origin: 60% 60%;
  animation: ani-vihide 1.5s ease-in-out 1 both;
}
.nikke_visition li.hideAni .nke_en {
  animation: ani-hideen 0.4s 0.1s both;
}
.nikke_visition li.hideAni .nke_p1 {
  animation: ani-hidepar 0.6s 1 both;
}
.nikke_visition li.hideAni .nke_p2 {
  animation: ani-hidepar 0.6s 0.2s 1 both;
}
.nikke_visition .nikke_vis_prg {
  width: 1450px;
  height: 140px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 40;
  border-radius: 0;
  margin-left: -725px;
}
.nikke_visition .nikke_vis_prg span {
  display: block;
  width: 14.285%;
  height: 100%;
  float: left;
  border-radius: 0;
  opacity: 1 !important;
  margin: 0 !important;
  position: relative;
}
.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.swiper-pagination-bullet-active:after {
  display: none;
}
.nikke_visition .nikke_vis_cirprg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 190px;
  text-align: center;
  white-space: nowrap;
  margin: 0 auto;
  z-index: 50;
}
.nikke_visition .nikke_vis_cirprg span {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #ccc;
  margin: 0 14px;
  cursor: pointer;
}
.nikke_visition .nikke_vis_cirprg span.swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  border: #f5f5f5 solid 2px;
  background: none;
}

.nikke_p2_kv1 {
  background: url(../images/nikke_p2_kv1.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv2 {
  background: url(../images/nikke_p2_kv2.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv3 {
  background: url(../images/nikke_p2_kv3.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv4 {
  background: url(../images/nikke_p2_kv4.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv5 {
  background: url(../images/nikke_p2_kv5.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv6 {
  background: url(../images/nikke_p2_kv6.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.nikke_p2_kv7 {
  background: url(../images/nikke_p2_kv7.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

@keyframes ani-vishow {
  0% {
    transform: scale(1.08);
    opacity: 0;
  }
  5% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ani-vihide {
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ani-showen {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes ani-hideen {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ani-showpar {
  0% {
    transform: translate(200px, 0);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ani-hidepar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.nikke_char_side {
  width: 547px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
.nikke_char_side a {
  display: block;
  width: 100%;
  height: 25%;
  margin-bottom: 1px;
  background: url(../images/nikke_character_side.png) no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
}
.nikke_char_side a.cur span, .nikke_char_side a:hover span {
  opacity: 1;
}
.nikke_char_side a.cur:after, .nikke_char_side a:hover:after {
  content: "";
  width: 2px;
  height: 100%;
  background: #d1d1d1;
  position: absolute;
  left: 0;
  top: 0;
}
.nikke_char_side span {
  display: block;
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.15;
  transition: all 0.5s;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
.nikke_char_side span.nikke_char_logo1 {
  background-image: url("../images/elysion_white_sq_63.png");
  transform: translate(86px, -50%);
}
.nikke_char_side span.nikke_char_logo2 {
  background-image: url("../images/missilis_white_sq_76.png");
  transform: translate(86px, -50%);
}
.nikke_char_side span.nikke_char_logo3 {
  background-image: url("../images/pilgrim_white_sq_65.png");
  background-size: auto 134%;
  transform: translate(45px, -50%);
}
.nikke_char_side span.nikke_char_logo4 {
  background-image: url("../images/tetra_white_sq_57.png");
  background-size: auto 105%;
  transform: translate(78px, -50%);
}

.nikke_char_woman {
  width: 1374px;
  height: 1000px;
  position: absolute;
  left: 554px;
  bottom: 0;
  z-index: 60;
}
.nikke_char_woman span {
  display: block;
  width: 159px;
  height: 56px;
  position: absolute;
  left: 506px;
  bottom: 451px;
  z-index: 50;
  background: url(../images/view_btn.png) no-repeat center/100%;
  text-indent: -9999px;
  opacity: 0;
  transition: all 0.7s;
  pointer-events: none;
}
.nikke_char_woman span i {
  display: inline-block;
  width: 10px;
  height: 19px;
  background: url(../images/char_jt.png) no-repeat;
  vertical-align: top;
  margin: 13px 0 0 10px;
  z-index: 30;
}
.nikke_char_woman a {
  display: block;
  width: 400px;
  height: 906px;
  position: absolute;
  left: 0;
  bottom: 0;
  filter: brightness(0.8);
  background-repeat: no-repeat;
}
.nikke_char_woman a img {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.nikke_char_woman a.nikke_woman1 {
  width: 469px;
  height: 924px;
  position: absolute;
  left: 359px;
  bottom: 18px;
  z-index: 30;
}
.nikke_char_woman a.nikke_woman1 span {
  left: 162px;
  top: 532px;
}
.nikke_char_woman a.nikke_woman2 {
  width: 505px;
  height: 906px;
  position: absolute;
  left: -28px;
  bottom: 18px;
  z-index: 10;
}
.nikke_char_woman a.nikke_woman2 span {
  left: -29px;
  top: 481px;
}
.nikke_char_woman a.nikke_woman3 {
  width: 438px;
  height: 860px;
  position: absolute;
  left: 644px;
  bottom: 26px;
  z-index: 10;
}
.nikke_char_woman a.nikke_woman3 span {
  left: 230px;
  top: 481px;
}
.nikke_char_woman a.nikke_woman4 {
  width: 774px;
  height: 871px;
  position: absolute;
  left: -92px;
  bottom: 54px;
  z-index: 10;
}
.nikke_char_woman a.nikke_woman5 {
  width: 603px;
  height: 894px;
  position: absolute;
  left: 683px;
  bottom: 63px;
  z-index: 12;
}
.nikke_char_woman a.nikke_woman6 {
  width: 774px;
  height: 1000px;
  position: absolute;
  left: 197px;
  bottom: 0px;
  z-index: 40;
}
.nikke_char_woman a.nikke_woman8 {
  width: 586px;
  height: 904px;
  position: absolute;
  left: 594px;
  bottom: 20px;
  z-index: 10;
}
.nikke_char_woman a.nikke_woman8 span {
  left: 82px;
  top: 481px;
}
.nikke_char_woman a.nikke_woman7 {
  width: 326px;
  height: 915px;
  position: absolute;
  left: 426px;
  bottom: 24px;
  z-index: 12;
}
.nikke_char_woman a.nikke_woman7 span {
  left: 160px;
  top: 481px;
}
.nikke_char_woman a.nikke_woman9 {
  width: 471px;
  height: 829px;
  position: absolute;
  left: 96px;
  bottom: 50px;
  z-index: 10;
}
.nikke_char_woman a.nikke_woman9 span {
  left: 206px;
  top: 504px;
}
.nikke_char_woman a.nikke_woman10 {
  /*width: 1335px;
     height: 885px;
     background-size: 1335px 885px;
  position: absolute;
  left: -52px;
  top: 8px;*/
  width: 1317px;
  height: 947px;
  left: 58px;
  bottom: 34px;
  z-index: 10;
  /*img{
  	width: 100%;
  	left: 0;
  	top: -328px;
  }*/
}
.nikke_char_woman a.nikke_woman10 span {
  left: 440px;
  top: 521px;
}
.nikke_char_woman a.cur, .nikke_char_woman a:hover {
  filter: brightness(1);
  -webkit-filter: brightness(1);
}
.nikke_char_woman a.cur span, .nikke_char_woman a:hover span {
  opacity: 1;
}
.nikke_char_woman:hover span {
  opacity: 1;
}
.nikke_char_woman2 span {
  left: 566px;
}
.nikke_char_woman3 span {
  left: 576px;
}

.nikke_role_det {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  transition: all 0.5s;
  z-index: 100;
}

.nikke_role_mhimgbox {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  transition: all 0.5s;
}

.nikke_role_mhimg {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: all 0.5s;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}
.nikke_role_mhimg.mn1 {
  background-image: url(../images/bot_mh_img1.jpg);
}
.nikke_role_mhimg.mn2 {
  background-image: url(../images/bot_mh_img2.jpg);
}
.nikke_role_mhimg.mn3 {
  background-image: url(../images/bot_mh_img3.jpg);
}
.nikke_role_mhimg.mn4 {
  background-image: url(../images/bot_mh_img4.jpg);
}
.nikke_role_mhimg.mn5 {
  background-image: url(../images/bot_mh_img5.jpg);
}
.nikke_role_mhimg.mn6 {
  background-image: url(../images/bot_mh_img6.jpg);
}
.nikke_role_mhimg.mn7 {
  background-image: url(../images/bot_mh_img7.jpg);
}
.nikke_role_mhimg.mn8 {
  background-image: url(../images/bot_mh_img8.jpg);
}
.nikke_role_mhimg.mn9 {
  background-image: url(../images/bot_mh_img9.jpg);
}
.nikke_role_mhimg.mn10 {
  background-image: url(../images/bot_mh_img10.jpg);
}
.nikke_role_mhimg.show {
  opacity: 1;
  animation: ani-rolefadeout 0.5s 1 both;
}

@media screen and (max-width: 1400px) {
  .nikke_role_mhimg {
    right: -250px;
  }
}
.nikke_roleimg_box {
  height: 100%;
  width: 1284px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
  transition: all 0.5s;
}

.nikke_rolemask {
  width: 1220px;
  height: 796px;
  background: url(../images/ps_mask.png) no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 12;
  pointer-events: none;
}

.nikke_role_img {
  height: 100%;
  width: 1284px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 6;
  opacity: 0;
  background-repeat: no-repeat;
}
.nikke_role_img.mn1 {
  background-image: url("../images/woman1_dbg1.png");
}
.nikke_role_img.mn2 {
  background-image: url("../images/woman2_dbg1.png");
}
.nikke_role_img.mn3 {
  background-image: url("../images/woman3_dbg1.png");
}
.nikke_role_img.mn4 {
  background-image: url("../images/woman4_dbg1.png");
}
.nikke_role_img.mn5 {
  background-image: url("../images/woman5_dbg1.png");
}
.nikke_role_img.mn6 {
  background-image: url("../images/woman6_dbg1.png");
}
.nikke_role_img.mn7 {
  background-image: url("../images/woman7_dbg1.png");
}
.nikke_role_img.mn8 {
  background-image: url("../images/woman8_dbg1.png");
}
.nikke_role_img.mn9 {
  background-image: url("../images/woman9_dbg1.png");
}
.nikke_role_img.mn10 {
  background-image: url("../images/woman10_dbg1.png");
}
.nikke_role_img.show {
  opacity: 1;
  animation: ani-rolefadeout 0.5s 1 both;
}

@keyframes ani-rolefadeout {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.nikke_pink_mask {
  width: 749px;
  height: 924px;
  background: url(../images/pink_mask.png) no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
}

.nikke_role_tips {
  display: block;
  width: 135px;
  height: 33px;
  background: url(../images/role_tips.png) no-repeat;
  position: absolute;
  left: 80px;
  top: 60px;
  z-index: 8;
}

.nikke_role_engtips {
  display: block;
  width: 574px;
  height: 100%;
  background: url(../images/role_left_eng.png) no-repeat left center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
}

.nikke_rolecont {
  width: 679px;
  height: 1000px;
  position: absolute;
  left: 224px;
  top: 50%;
  margin: -500px 0 0 0;
  z-index: 50;
  padding-top: 1px;
}

.nikke_elysion {
  display: block;
  width: 231px;
  height: 180px;
  background: url(../images/nikke_elysion.png) no-repeat;
  margin: 120px 0 0 150px;
}
.nikke_elysion.nikke_elysion2 {
  width: 273px;
  height: 140px;
  background: url(../images/nikke_elysion2.png) no-repeat;
  margin: 130px 0 0 173px;
}
.nikke_elysion.nikke_elysion3 {
  width: 335px;
  height: 88px;
  background: url(../images/nikke_elysion3.png) no-repeat;
  margin: 184px 0 0 110px;
}
.nikke_elysion.nikke_elysion4 {
  width: 154px;
  height: 180px;
  background: url(../images/nikke_elysion4.png) no-repeat;
  margin: 116px 0 0 190px;
}

.rolechange_box {
  z-index: 50;
  position: absolute;
  left: 0;
  top: 0;
}

.rolechange {
  opacity: 0;
  z-index: -200;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 300px;
}
.rolechange.hide {
  animation: ani-rolehide 0.5s 1 both;
}
.rolechange.show {
  z-index: 50;
  animation: ani-roleshow 1s 1 both;
}
.rolechange.show .nikke_rolename {
  animation: ani-roleshow-in 1s 0.3s 1 both;
}
.rolechange.show .nikke_counters {
  animation: ani-roleshow-in 1s 0.6s 1 both;
}
.rolechange.show .nikke_rolems {
  animation: ani-roleshow-in 1s 0.9s 1 both;
}

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

.nikke_role_sline {
  display: block;
  width: 1px;
  height: 482px;
  background: url(../images/nikke_det_sline.png) no-repeat;
  position: absolute;
  left: -1px;
  top: 269px;
}

.nikke_rolename {
  display: block;
  width: 550px;
  height: 96px;
  margin: 76px 0 0 32px;
}

.nikke_rolenamep {
  display: inline-block;
  vertical-align: top;
  height: 96px;
  line-height: 96px;
  font-size: 64px;
  color: #000000;
  font-weight: normal;
}

.nikke_rolecv {
  display: inline-block;
  vertical-align: top;
  margin: 25px 0 0 6px;
  width: 86px;
  height: 47px;
  background: url(../images/cv_icon1.png) no-repeat;
  cursor: pointer;
  position: relative;
  text-indent: -9999px;
}
.nikke_rolecv::before, .nikke_rolecv::after {
  display: block;
  content: "";
  position: absolute;
  width: 16px;
  height: 23px;
  left: 45px;
  top: 12px;
  background-repeat: no-repeat;
}
.nikke_rolecv::before {
  background-image: url(../images/cv_icon_l1.png);
}
.nikke_rolecv::after {
  background-image: url(../images/cv_icon_l2.png);
}
.nikke_rolecv.on::before {
  animation: ani-cv-on1 1s linear infinite;
}
.nikke_rolecv.on::after {
  animation: ani-cv-on2 1s linear infinite;
}
@keyframes ani-cv-on1 {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
@keyframes ani-cv-on2 {
  0%, 25%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

.nikke_counters {
  display: block;
  width: 275px;
  height: 38px;
  background: url(../images/nikke_counters.png) no-repeat;
  text-align: center;
  line-height: 38px;
  font-family: "Industry";
  font-size: 24px;
  color: #ffffff;
  margin: 0 0 0 32px;
}

.nikke_rolecv_icon {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 14px;
  background: url(../images/source_icon.png) no-repeat;
  margin: 17px 0 0 6px;
}

.nikke_rolems {
  width: 738px;
  margin: 70px 0 0 32px;
  font-size: 16px;
  color: #4c4c4c;
  line-height: 24px;
  position: relative;
}
.nikke_rolems:after {
  content: "";
  width: 45px;
  height: 12px;
  background: url(../images/role_msicon.png) no-repeat;
  position: absolute;
  bottom: -46px;
  right: 90px;
}

.nikke_rolechange_wp {
  width: 490px;
  position: absolute;
  left: 50%;
  bottom: 64px;
  margin: 0 0 0 -245px;
  z-index: 50;
}

.nikke_rolechange {
  width: 490px;
  position: relative;
  overflow: hidden;
}
.nikke_rolechange li {
  width: 154px;
  height: 150px !important;
  float: left;
  position: relative;
  cursor: pointer;
}
.nikke_rolechange li .nikke_rolehd {
  width: 116px;
  height: 108px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -54px 0 0 -58px;
  box-sizing: border-box;
  border: #a4a4a4 solid 2px;
  border-radius: 2px;
  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 {
  transform: scale(1.3);
  border: #00b8ef solid 2px;
  filter: drop-shadow(#00b8ef 0 0 2px);
}
.nikke_rolechange li.spe {
  float: none;
  margin: 0 auto;
}

.nikke_role_prev, .nikke_role_next {
  display: block;
  width: 36px;
  height: 43px;
  position: absolute;
  top: 50%;
  margin: -21px 0 0 0;
}

.nikke_role_prev {
  left: -84px;
  background: url(../images/det_leftbtn.png) no-repeat;
}

.nikke_role_next {
  right: -84px;
  background: url(../images/det_rightbtn.png) no-repeat;
}

.nikke_bos {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.nikke_bos li {
  width: 16.6%;
  height: 100%;
  float: left;
  position: relative;
}
.nikke_bos li.nbs1 {
  background: url(../images/nikke_bos_01.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs1 .nbsbox_light {
  background: url(../images/nikke_bos_light_01.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs1 .nikke_bos_name {
  background: url(../images/nikke_bos_name_01.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li.nbs2 {
  background: url(../images/nikke_bos_02.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs2 .nbsbox_light {
  background: url(../images/nikke_bos_light_02.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs2 .nikke_bos_name {
  background: url(../images/nikke_bos_name_02.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li.nbs3 {
  background: url(../images/nikke_bos_03.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs3 .nbsbox_light {
  background: url(../images/nikke_bos_light_03.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs3 .nikke_bos_name {
  background: url(../images/nikke_bos_name_03.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li.nbs4 {
  background: url(../images/nikke_bos_04.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs4 .nbsbox_light {
  background: url(../images/nikke_bos_light_04.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs4 .nikke_bos_name {
  background: url(../images/nikke_bos_name_04.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li.nbs5 {
  background: url(../images/nikke_bos_05.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs5 .nbsbox_light {
  background: url(../images/nikke_bos_light_05.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs5 .nikke_bos_name {
  background: url(../images/nikke_bos_name_05.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li.nbs6 {
  background: url(../images/nikke_bos_06.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs6 .nbsbox_light {
  background: url(../images/nikke_bos_light_06.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_bos li.nbs6 .nikke_bos_name {
  background: url(../images/nikke_bos_name_06.png) no-repeat center center;
  background-size: contain;
}
.nikke_bos li .nbsbox_light {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  animation: ani-bos-light 2s linear infinite;
}
.nikke_bos li .nbs_mask {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s;
  z-index: 30;
}
.nikke_bos li .nikke_bos_name {
  display: block;
  width: 100%;
  height: 145px;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -148px 0 0 0;
  opacity: 0;
  transition: all 1s;
}
.nikke_bos li .nikke_box_namepara {
  width: 159px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 60px 0 0 -80px;
  background: url(../images/view_btn.png) no-repeat center/100%;
  text-indent: -9999px;
  opacity: 0;
  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;
}

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

.nikke_detail_zindex {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 30;
  transform: translate(-50%, 0);
}

.nikke_detail_box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 100;
  transition: all 1s;
}

.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: block;
  width: 16%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/bos_left.jpg) no-repeat center center;
  background-size: cover;
  transition: all 1s;
}
.nikke_det_left.ndg1 {
  background: url(../images/bos_big_01.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_left.ndg2 {
  background: url(../images/bos_big_02.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_left.ndg3 {
  background: url(../images/bos_big_03.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_left.ndg4 {
  background: url(../images/bos_big_04.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_left.ndg5 {
  background: url(../images/bos_big_05.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_left.ndg6 {
  background: url(../images/bos_big_06.jpg) no-repeat center center;
  background-size: cover;
}

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

.nikke_det_right {
  display: block;
  width: 16%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/bos_right.jpg) no-repeat center center;
  background-size: cover;
  transition: all 1s;
}
.nikke_det_right.ndg1 {
  background: url(../images/bos_big_03.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_right.ndg2 {
  background: url(../images/bos_big_04.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_right.ndg3 {
  background: url(../images/bos_big_05.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_right.ndg4 {
  background: url(../images/bos_big_06.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_right.ndg5 {
  background: url(../images/bos_big_01.jpg) no-repeat center center;
  background-size: cover;
}
.nikke_det_right.ndg6 {
  background: url(../images/bos_big_02.jpg) no-repeat center center;
  background-size: cover;
}

@keyframes ani-mask {
  0% {
    -webkit-mask-size: 0 0;
  }
  100% {
    -webkit-mask-size: 8000px 3568px;
  }
}
@keyframes ani-mask-hide {
  0% {
    -webkit-mask-size: 8000px 3568px;
    z-index: 100;
  }
  99% {
    -webkit-mask-size: 0 0;
    z-index: 100;
  }
  100% {
    -webkit-mask-size: 0 0;
    z-index: -100;
  }
}
.nikke_detail_bos {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 30;
}
.nikke_detail_bos .swiper-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.nikke_detail_bos .swiper-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -200;
  opacity: 0 !important;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active {
  z-index: 200;
  opacity: 1 !important;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active .nikke_vert_line {
  animation: ani-transhow 1s 0.5s 1 both;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active .nikke_trans_line {
  animation: ani-vershow 1s 1 both;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active .nikke_det_para {
  animation: ani-transhow2 1s 0.8s 1 both;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active .nikke_det_bosname {
  animation: ani-transhow3 1s 1s 1 both;
}
.nikke_detail_bos .swiper-slide.swiper-slide-active .nikke_bos_img {
  animation: ani-transhow4 1s 0.3s 1 both;
}
.nikke_detail_bos .swiper-slide[data-swiper-slide-index="1"] .nikke_det_bosname, .nikke_detail_bos .swiper-slide[data-swiper-slide-index="2"] .nikke_det_bosname {
  font-size: 54px;
}
.nikke_detail_bos .nikke_bos_img {
  display: block;
  width: 990px;
  height: 586px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -292px 0 0 -688px;
  background-repeat: no-repeat;
}
.nikke_detail_bos .nikke_bos_img i {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  animation: ani-bos-light 2s linear infinite;
}
.nikke_detail_bos .nikke_bos_img.bs1 {
  background-image: url(../images/d_bos1.png);
}
.nikke_detail_bos .nikke_bos_img.bs1 i {
  background-image: url(../images/d_bos1_light.png);
}
.nikke_detail_bos .nikke_bos_img.bs2 {
  background-image: url(../images/d_bos2.png);
}
.nikke_detail_bos .nikke_bos_img.bs2 i {
  background-image: url(../images/d_bos2_light.png);
}
.nikke_detail_bos .nikke_bos_img.bs3 {
  background-image: url(../images/d_bos3.png);
}
.nikke_detail_bos .nikke_bos_img.bs3 i {
  background-image: url(../images/d_bos3_light.png);
}
.nikke_detail_bos .nikke_bos_img.bs4 {
  background-image: url(../images/d_bos4.png);
}
.nikke_detail_bos .nikke_bos_img.bs4 i {
  background-image: url(../images/d_bos4_light.png);
}
.nikke_detail_bos .nikke_bos_img.bs5 {
  background-image: url(../images/d_bos5.png);
  height: 646px;
  margin: -323px 0 0 -688px;
}
.nikke_detail_bos .nikke_bos_img.bs5 i {
  background-image: url(../images/d_bos5_light.png);
}
.nikke_detail_bos .nikke_bos_img.bs6 {
  background-image: url(../images/d_bos6.png);
  height: 600px;
  margin: -300px 0 0 -688px;
}
.nikke_detail_bos .nikke_bos_img.bs6 i {
  background-image: url(../images/d_bos6_light.png);
}
.nikke_detail_bos .nikke_bos_dbtn {
  display: block;
  width: 128px;
  height: 47px;
  background: url(../images/mo_det.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 292px 0 0 -286px;
  text-indent: -9999px;
  z-index: 200;
}

@keyframes ani-vershow {
  0% {
    transform: translate(500px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow {
  0% {
    transform: translate(0, 500px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow2 {
  0% {
    transform: translate(0, 200px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow3 {
  0% {
    transform: translate(0, -200px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes ani-transhow4 {
  0% {
    transform: translate(0, 30px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.nikke_bos_prev, .nikke_bos_next {
  width: 16%;
  height: 100%;
  background: url(../images/detail_change_btn.png) no-repeat center center;
  position: absolute;
  top: 0;
  z-index: 50;
}

.nikke_bos_prev {
  left: 0;
}

.nikke_bos_next {
  right: 0;
  transform: rotate(180deg);
}

.nikke_bos_back {
  display: block;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  box-sizing: border-box;
  border: #ffffff solid 2px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  line-height: 46px;
  position: absolute;
  left: 50%;
  top: 63px;
  margin: 0 0 0 440px;
  z-index: 50;
}

.nikke_role_back {
  display: block;
  width: 150px;
  height: 50px;
  border-radius: 25px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 46px;
  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;
}

@media screen and (max-width: 1400px) {
  .nikke_role_back {
    right: 500px;
  }
}
.nikke_det_pbox {
  width: 420px;
  height: 475px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -181px 0 0 194px;
  z-index: 40;
  padding-top: 1px;
}

.nikke_vert_line {
  display: block;
  width: 1px;
  height: 457px;
  background: url(../images/vert_line.png) no-repeat;
  position: absolute;
  left: -1px;
  top: -64px;
}

.nikke_trans_line {
  display: block;
  width: 507px;
  height: 1px;
  background: url(../images/trans_line.png) no-repeat;
  position: absolute;
  left: -66px;
  top: -1px;
}

.nikke_det_para {
  width: 380px;
  margin: 28px 0 0 25px;
  text-align: justify;
  font-family: "gd17";
  font-size: 16px;
  color: #cccccc;
  line-height: 32px;
}
.nikke_det_para .space {
  display: inline-block;
  width: 8px;
  vertical-align: top;
}

.nikke_det_bosname {
  display: block;
  height: 96px;
  width: 510px;
  position: absolute;
  left: 26px;
  top: -96px;
  line-height: 96px;
  font-size: 56px;
  color: #ffffff;
  font-weight: bold;
  font-family: "Industry";
}

.nikke_bck_icon {
  display: inline-block;
  width: 20px;
  height: 10px;
  background: url(../images/nikke_bck_jt.png) no-repeat;
  vertical-align: top;
  margin: 18px 0 0 10px;
}

.nikke_media {
  width: 1356px;
  height: 526px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -263px 0 0 -678px;
  z-index: 50;
}

.nikke_media_prg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -66px;
  text-align: center;
  white-space: nowrap;
}
.nikke_media_prg li {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #484747;
  margin: 0 14px;
  cursor: pointer;
}
.nikke_media_prg li.cur {
  width: 12px;
  height: 12px;
  border: #f5f5f5 solid 2px;
  background: none;
}

.media_conner {
  display: block;
  width: 402px;
  height: 253px;
  background: url(../images/media_conner.png) no-repeat;
  position: absolute;
  left: -28px;
  bottom: -24px;
  z-index: 10;
}

.nikke_media_list {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 30;
}
.nikke_media_list li {
  width: 187px;
  height: 100%;
  float: left;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.nikke_media_list li .media_bg {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  position: absolute;
  left: 0;
  top: 0;
}
.nikke_media_list li.medimg1 .media_bg {
  background: url(../images/nikke_media_img1.jpg) no-repeat;
  background-size: auto 100%;
  background-position: 30% 50%;
}
.nikke_media_list li.medimg2 .media_bg {
  background: url(../images/nikke_media_img2.jpg) no-repeat center center;
  background-size: auto 100%;
}
.nikke_media_list li.medimg3 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat center center #000;
  background-size: auto 80%;
  background-position: 50% 50%;
}
.nikke_media_list li.medimg4 .media_bg {
  background: url(../images/qd_art.jpg) no-repeat #000;
  background-size: auto 80%;
  background-position: 50% 50%;
}
.nikke_media_list li .media_mask {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.5s;
  z-index: 30;
}
.nikke_media_list li .media_play {
  display: block;
  width: 76px;
  height: 77px;
  background: url(../images/media_play_icon.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -38px 0 0 -38px;
  transition: all 0.5s;
}
.nikke_media_list li.cur {
  width: 787px;
}
.nikke_media_list li.cur .media_bg {
  background-size: cover;
  background-position: 50% 50%;
}
.nikke_media_list li.cur .media_mask {
  background: none;
}
.nikke_media_list li.cur .media_play {
  width: 116px;
  height: 117px;
  background: url(../images/media_play_light.png) no-repeat;
  margin: -58px 0 0 -58px;
}
.nikke_media_list li.cur:hover .media_bg {
  transform: scale(1.2);
}

.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: 580px;
  height: 288px;
  background: url(../images/com_diabg.png) no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -144px 0 0 -290px;
  z-index: 30;
  padding-top: 1px;
}
.dia_in .dia_close {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/com_close.png) no-repeat;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 30;
}
.dia_in2 {
  width: 100%;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
}
.dia_in2 img {
  display: block;
  width: 100%;
  height: auto;
}
.dia_in2 .dia_close {
  right: 40px;
  top: 40px;
}

.dia_para {
  width: 500px;
  height: 160px;
  line-height: 160px;
  text-align: center;
  font-family: "Noto Sans KR";
  margin: 58px auto 0;
}
.dia_para .dia_para_ct {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  color: #adadad;
  line-height: 32px;
}

.footer {
  height: auto !important;
  width: 100%;
  min-width: 1400px;
  padding: 34px 0;
  background: #141313;
}

.footer_in {
  width: 1200px;
  margin: 0 auto;
}

.footer_logo {
  display: inline-block;
  vertical-align: top;
  width: 118px;
  height: 84px;
  background: url(../images/footer_logo.png) no-repeat;
  margin: 0 0 0 90px;
}

.footer_para {
  display: inline-block;
  width: 940px;
  font-size: 16px;
  color: #9c9c9c;
  margin: 14px 0 0 30px;
  line-height: 32px;
}

.nikke_char_side a.cur span.nikke_char_logo1.canshow {
  background-repeat: no-repeat;
  animation-name: keyframes-Elysion_white_sq_256;
  animation-duration: 3.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-Elysion_white_sq_256 {
  0% {
    background-image: url("../images/elysion_white_sq_00.png");
  }
  1.11% {
    background-image: url("../images/elysion_white_sq_01.png");
  }
  2.22% {
    background-image: url("../images/elysion_white_sq_02.png");
  }
  3.33% {
    background-image: url("../images/elysion_white_sq_03.png");
  }
  4.44% {
    background-image: url("../images/elysion_white_sq_04.png");
  }
  5.56% {
    background-image: url("../images/elysion_white_sq_05.png");
  }
  6.67% {
    background-image: url("../images/elysion_white_sq_06.png");
  }
  7.78% {
    background-image: url("../images/elysion_white_sq_07.png");
  }
  8.89% {
    background-image: url("../images/elysion_white_sq_08.png");
  }
  10.00% {
    background-image: url("../images/elysion_white_sq_09.png");
  }
  11.11% {
    background-image: url("../images/elysion_white_sq_10.png");
  }
  12.22% {
    background-image: url("../images/elysion_white_sq_11.png");
  }
  13.33% {
    background-image: url("../images/elysion_white_sq_12.png");
  }
  14.44% {
    background-image: url("../images/elysion_white_sq_13.png");
  }
  15.56% {
    background-image: url("../images/elysion_white_sq_14.png");
  }
  16.67% {
    background-image: url("../images/elysion_white_sq_15.png");
  }
  17.78% {
    background-image: url("../images/elysion_white_sq_16.png");
  }
  18.89% {
    background-image: url("../images/elysion_white_sq_17.png");
  }
  20.00% {
    background-image: url("../images/elysion_white_sq_18.png");
  }
  21.11% {
    background-image: url("../images/elysion_white_sq_19.png");
  }
  22.22% {
    background-image: url("../images/elysion_white_sq_20.png");
  }
  23.33% {
    background-image: url("../images/elysion_white_sq_21.png");
  }
  24.44% {
    background-image: url("../images/elysion_white_sq_22.png");
  }
  25.56% {
    background-image: url("../images/elysion_white_sq_23.png");
  }
  26.67% {
    background-image: url("../images/elysion_white_sq_24.png");
  }
  27.78% {
    background-image: url("../images/elysion_white_sq_25.png");
  }
  28.89% {
    background-image: url("../images/elysion_white_sq_26.png");
  }
  30.00% {
    background-image: url("../images/elysion_white_sq_27.png");
  }
  31.11% {
    background-image: url("../images/elysion_white_sq_28.png");
  }
  32.22% {
    background-image: url("../images/elysion_white_sq_29.png");
  }
  33.33% {
    background-image: url("../images/elysion_white_sq_30.png");
  }
  34.44% {
    background-image: url("../images/elysion_white_sq_31.png");
  }
  35.56% {
    background-image: url("../images/elysion_white_sq_32.png");
  }
  36.67% {
    background-image: url("../images/elysion_white_sq_33.png");
  }
  37.78% {
    background-image: url("../images/elysion_white_sq_34.png");
  }
  38.89% {
    background-image: url("../images/elysion_white_sq_35.png");
  }
  40.00% {
    background-image: url("../images/elysion_white_sq_36.png");
  }
  41.11% {
    background-image: url("../images/elysion_white_sq_37.png");
  }
  42.22% {
    background-image: url("../images/elysion_white_sq_38.png");
  }
  43.33% {
    background-image: url("../images/elysion_white_sq_39.png");
  }
  44.44% {
    background-image: url("../images/elysion_white_sq_40.png");
  }
  45.56% {
    background-image: url("../images/elysion_white_sq_41.png");
  }
  46.67% {
    background-image: url("../images/elysion_white_sq_42.png");
  }
  47.78% {
    background-image: url("../images/elysion_white_sq_43.png");
  }
  48.89% {
    background-image: url("../images/elysion_white_sq_44.png");
  }
  50.00% {
    background-image: url("../images/elysion_white_sq_45.png");
  }
  51.11% {
    background-image: url("../images/elysion_white_sq_46.png");
  }
  52.22% {
    background-image: url("../images/elysion_white_sq_47.png");
  }
  53.33% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  54.44% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  55.56% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  56.67% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  57.78% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  58.89% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  60.00% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  61.11% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  62.22% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  63.33% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  64.44% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  65.56% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  66.67% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  67.78% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  68.89% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  70.00% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  71.11% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  72.22% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  73.33% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  74.44% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  75.56% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  76.67% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  77.78% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  78.89% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  80.00% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  81.11% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  82.22% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  83.33% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  84.44% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  85.56% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  86.67% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  87.78% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  88.89% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  90.00% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  91.11% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  92.22% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  93.33% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  94.44% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  95.56% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  96.67% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  97.78% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
  98.89%, 100% {
    background-image: url("../images/elysion_white_sq_48.png");
  }
}
.nikke_char_side a.cur span.nikke_char_logo2.canshow {
  background-repeat: no-repeat;
  animation-name: keyframes-Missilis_white_sq_256;
  animation-duration: 3.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-Missilis_white_sq_256 {
  0% {
    background-image: url("../images/missilis_white_sq_00.png");
  }
  1.11% {
    background-image: url("../images/missilis_white_sq_01.png");
  }
  2.22% {
    background-image: url("../images/missilis_white_sq_02.png");
  }
  3.33% {
    background-image: url("../images/missilis_white_sq_03.png");
  }
  4.44% {
    background-image: url("../images/missilis_white_sq_04.png");
  }
  5.56% {
    background-image: url("../images/missilis_white_sq_05.png");
  }
  6.67% {
    background-image: url("../images/missilis_white_sq_06.png");
  }
  7.78% {
    background-image: url("../images/missilis_white_sq_07.png");
  }
  8.89% {
    background-image: url("../images/missilis_white_sq_08.png");
  }
  10.00% {
    background-image: url("../images/missilis_white_sq_09.png");
  }
  11.11% {
    background-image: url("../images/missilis_white_sq_10.png");
  }
  12.22% {
    background-image: url("../images/missilis_white_sq_11.png");
  }
  13.33% {
    background-image: url("../images/missilis_white_sq_12.png");
  }
  14.44% {
    background-image: url("../images/missilis_white_sq_13.png");
  }
  15.56% {
    background-image: url("../images/missilis_white_sq_14.png");
  }
  16.67% {
    background-image: url("../images/missilis_white_sq_15.png");
  }
  17.78% {
    background-image: url("../images/missilis_white_sq_16.png");
  }
  18.89% {
    background-image: url("../images/missilis_white_sq_17.png");
  }
  20.00% {
    background-image: url("../images/missilis_white_sq_18.png");
  }
  21.11% {
    background-image: url("../images/missilis_white_sq_19.png");
  }
  22.22% {
    background-image: url("../images/missilis_white_sq_20.png");
  }
  23.33% {
    background-image: url("../images/missilis_white_sq_21.png");
  }
  24.44% {
    background-image: url("../images/missilis_white_sq_22.png");
  }
  25.56% {
    background-image: url("../images/missilis_white_sq_23.png");
  }
  26.67% {
    background-image: url("../images/missilis_white_sq_24.png");
  }
  27.78% {
    background-image: url("../images/missilis_white_sq_25.png");
  }
  28.89% {
    background-image: url("../images/missilis_white_sq_26.png");
  }
  30.00% {
    background-image: url("../images/missilis_white_sq_27.png");
  }
  31.11% {
    background-image: url("../images/missilis_white_sq_28.png");
  }
  32.22% {
    background-image: url("../images/missilis_white_sq_29.png");
  }
  33.33% {
    background-image: url("../images/missilis_white_sq_30.png");
  }
  34.44% {
    background-image: url("../images/missilis_white_sq_31.png");
  }
  35.56% {
    background-image: url("../images/missilis_white_sq_32.png");
  }
  36.67% {
    background-image: url("../images/missilis_white_sq_33.png");
  }
  37.78% {
    background-image: url("../images/missilis_white_sq_34.png");
  }
  38.89% {
    background-image: url("../images/missilis_white_sq_35.png");
  }
  40.00% {
    background-image: url("../images/missilis_white_sq_36.png");
  }
  41.11% {
    background-image: url("../images/missilis_white_sq_37.png");
  }
  42.22% {
    background-image: url("../images/missilis_white_sq_38.png");
  }
  43.33% {
    background-image: url("../images/missilis_white_sq_39.png");
  }
  44.44% {
    background-image: url("../images/missilis_white_sq_40.png");
  }
  45.56% {
    background-image: url("../images/missilis_white_sq_41.png");
  }
  46.67% {
    background-image: url("../images/missilis_white_sq_42.png");
  }
  47.78% {
    background-image: url("../images/missilis_white_sq_43.png");
  }
  48.89% {
    background-image: url("../images/missilis_white_sq_44.png");
  }
  50.00% {
    background-image: url("../images/missilis_white_sq_45.png");
  }
  51.11% {
    background-image: url("../images/missilis_white_sq_46.png");
  }
  52.22% {
    background-image: url("../images/missilis_white_sq_47.png");
  }
  53.33% {
    background-image: url("../images/missilis_white_sq_48.png");
  }
  54.44% {
    background-image: url("../images/missilis_white_sq_49.png");
  }
  55.56% {
    background-image: url("../images/missilis_white_sq_50.png");
  }
  56.67% {
    background-image: url("../images/missilis_white_sq_51.png");
  }
  57.78% {
    background-image: url("../images/missilis_white_sq_52.png");
  }
  58.89% {
    background-image: url("../images/missilis_white_sq_53.png");
  }
  60.00% {
    background-image: url("../images/missilis_white_sq_54.png");
  }
  61.11% {
    background-image: url("../images/missilis_white_sq_55.png");
  }
  62.22% {
    background-image: url("../images/missilis_white_sq_56.png");
  }
  63.33% {
    background-image: url("../images/missilis_white_sq_57.png");
  }
  64.44% {
    background-image: url("../images/missilis_white_sq_58.png");
  }
  65.56% {
    background-image: url("../images/missilis_white_sq_59.png");
  }
  66.67% {
    background-image: url("../images/missilis_white_sq_60.png");
  }
  67.78% {
    background-image: url("../images/missilis_white_sq_61.png");
  }
  68.89% {
    background-image: url("../images/missilis_white_sq_62.png");
  }
  70.00% {
    background-image: url("../images/missilis_white_sq_63.png");
  }
  71.11% {
    background-image: url("../images/missilis_white_sq_64.png");
  }
  72.22% {
    background-image: url("../images/missilis_white_sq_65.png");
  }
  73.33% {
    background-image: url("../images/missilis_white_sq_66.png");
  }
  74.44% {
    background-image: url("../images/missilis_white_sq_67.png");
  }
  75.56% {
    background-image: url("../images/missilis_white_sq_68.png");
  }
  76.67% {
    background-image: url("../images/missilis_white_sq_69.png");
  }
  77.78% {
    background-image: url("../images/missilis_white_sq_70.png");
  }
  78.89% {
    background-image: url("../images/missilis_white_sq_71.png");
  }
  80.00% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  81.11% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  82.22% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  83.33% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  84.44% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  85.56% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  86.67% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  87.78% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  88.89% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  90.00% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  91.11% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  92.22% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  93.33% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  94.44% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  95.56% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  96.67% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  97.78% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
  98.89%, 100% {
    background-image: url("../images/missilis_white_sq_72.png");
  }
}
.nikke_char_side a.cur span.nikke_char_logo3.canshow {
  background-repeat: no-repeat;
  animation-name: keyframes-Pilgrim_white_sq_256;
  animation-duration: 3.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-Pilgrim_white_sq_256 {
  0% {
    background-image: url("../images/pilgrim_white_sq_00.png");
  }
  1.11% {
    background-image: url("../images/pilgrim_white_sq_01.png");
  }
  2.22% {
    background-image: url("../images/pilgrim_white_sq_02.png");
  }
  3.33% {
    background-image: url("../images/pilgrim_white_sq_03.png");
  }
  4.44% {
    background-image: url("../images/pilgrim_white_sq_04.png");
  }
  5.56% {
    background-image: url("../images/pilgrim_white_sq_05.png");
  }
  6.67% {
    background-image: url("../images/pilgrim_white_sq_06.png");
  }
  7.78% {
    background-image: url("../images/pilgrim_white_sq_07.png");
  }
  8.89% {
    background-image: url("../images/pilgrim_white_sq_08.png");
  }
  10.00% {
    background-image: url("../images/pilgrim_white_sq_09.png");
  }
  11.11% {
    background-image: url("../images/pilgrim_white_sq_10.png");
  }
  12.22% {
    background-image: url("../images/pilgrim_white_sq_11.png");
  }
  13.33% {
    background-image: url("../images/pilgrim_white_sq_12.png");
  }
  14.44% {
    background-image: url("../images/pilgrim_white_sq_13.png");
  }
  15.56% {
    background-image: url("../images/pilgrim_white_sq_14.png");
  }
  16.67% {
    background-image: url("../images/pilgrim_white_sq_15.png");
  }
  17.78% {
    background-image: url("../images/pilgrim_white_sq_16.png");
  }
  18.89% {
    background-image: url("../images/pilgrim_white_sq_17.png");
  }
  20.00% {
    background-image: url("../images/pilgrim_white_sq_18.png");
  }
  21.11% {
    background-image: url("../images/pilgrim_white_sq_19.png");
  }
  22.22% {
    background-image: url("../images/pilgrim_white_sq_20.png");
  }
  23.33% {
    background-image: url("../images/pilgrim_white_sq_21.png");
  }
  24.44% {
    background-image: url("../images/pilgrim_white_sq_22.png");
  }
  25.56% {
    background-image: url("../images/pilgrim_white_sq_23.png");
  }
  26.67% {
    background-image: url("../images/pilgrim_white_sq_24.png");
  }
  27.78% {
    background-image: url("../images/pilgrim_white_sq_25.png");
  }
  28.89% {
    background-image: url("../images/pilgrim_white_sq_26.png");
  }
  30.00% {
    background-image: url("../images/pilgrim_white_sq_27.png");
  }
  31.11% {
    background-image: url("../images/pilgrim_white_sq_28.png");
  }
  32.22% {
    background-image: url("../images/pilgrim_white_sq_29.png");
  }
  33.33% {
    background-image: url("../images/pilgrim_white_sq_30.png");
  }
  34.44% {
    background-image: url("../images/pilgrim_white_sq_31.png");
  }
  35.56% {
    background-image: url("../images/pilgrim_white_sq_32.png");
  }
  36.67% {
    background-image: url("../images/pilgrim_white_sq_33.png");
  }
  37.78% {
    background-image: url("../images/pilgrim_white_sq_34.png");
  }
  38.89% {
    background-image: url("../images/pilgrim_white_sq_35.png");
  }
  40.00% {
    background-image: url("../images/pilgrim_white_sq_36.png");
  }
  41.11% {
    background-image: url("../images/pilgrim_white_sq_37.png");
  }
  42.22% {
    background-image: url("../images/pilgrim_white_sq_38.png");
  }
  43.33% {
    background-image: url("../images/pilgrim_white_sq_39.png");
  }
  44.44% {
    background-image: url("../images/pilgrim_white_sq_40.png");
  }
  45.56% {
    background-image: url("../images/pilgrim_white_sq_41.png");
  }
  46.67% {
    background-image: url("../images/pilgrim_white_sq_42.png");
  }
  47.78% {
    background-image: url("../images/pilgrim_white_sq_43.png");
  }
  48.89% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  50.00% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  51.11% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  52.22% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  53.33% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  54.44% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  55.56% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  56.67% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  57.78% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  58.89% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  60.00% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  61.11% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  62.22% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  63.33% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  64.44% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  65.56% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  66.67% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  67.78% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  68.89% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  70.00% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  71.11% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  72.22% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  73.33% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  74.44% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  75.56% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  76.67% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  77.78% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  78.89% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  80.00% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  81.11% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  82.22% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  83.33% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  84.44% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  85.56% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  86.67% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  87.78% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  88.89% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  90.00% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  91.11% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  92.22% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  93.33% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  94.44% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  95.56% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  96.67% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  97.78% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
  98.89%, 100% {
    background-image: url("../images/pilgrim_white_sq_44.png");
  }
}
.nikke_char_side a.cur span.nikke_char_logo4.canshow {
  background-repeat: no-repeat;
  animation-name: keyframes-Tetra_white_sq_256;
  animation-duration: 3.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-Tetra_white_sq_256 {
  0% {
    background-image: url("../images/tetra_white_sq_00.png");
  }
  1.11% {
    background-image: url("../images/tetra_white_sq_01.png");
  }
  2.22% {
    background-image: url("../images/tetra_white_sq_02.png");
  }
  3.33% {
    background-image: url("../images/tetra_white_sq_03.png");
  }
  4.44% {
    background-image: url("../images/tetra_white_sq_04.png");
  }
  5.56% {
    background-image: url("../images/tetra_white_sq_05.png");
  }
  6.67% {
    background-image: url("../images/tetra_white_sq_06.png");
  }
  7.78% {
    background-image: url("../images/tetra_white_sq_07.png");
  }
  8.89% {
    background-image: url("../images/tetra_white_sq_08.png");
  }
  10.00% {
    background-image: url("../images/tetra_white_sq_09.png");
  }
  11.11% {
    background-image: url("../images/tetra_white_sq_10.png");
  }
  12.22% {
    background-image: url("../images/tetra_white_sq_11.png");
  }
  13.33% {
    background-image: url("../images/tetra_white_sq_12.png");
  }
  14.44% {
    background-image: url("../images/tetra_white_sq_13.png");
  }
  15.56% {
    background-image: url("../images/tetra_white_sq_14.png");
  }
  16.67% {
    background-image: url("../images/tetra_white_sq_15.png");
  }
  17.78% {
    background-image: url("../images/tetra_white_sq_16.png");
  }
  18.89% {
    background-image: url("../images/tetra_white_sq_17.png");
  }
  20.00% {
    background-image: url("../images/tetra_white_sq_18.png");
  }
  21.11% {
    background-image: url("../images/tetra_white_sq_19.png");
  }
  22.22% {
    background-image: url("../images/tetra_white_sq_20.png");
  }
  23.33% {
    background-image: url("../images/tetra_white_sq_21.png");
  }
  24.44% {
    background-image: url("../images/tetra_white_sq_22.png");
  }
  25.56% {
    background-image: url("../images/tetra_white_sq_23.png");
  }
  26.67% {
    background-image: url("../images/tetra_white_sq_24.png");
  }
  27.78% {
    background-image: url("../images/tetra_white_sq_25.png");
  }
  28.89% {
    background-image: url("../images/tetra_white_sq_26.png");
  }
  30.00% {
    background-image: url("../images/tetra_white_sq_27.png");
  }
  31.11% {
    background-image: url("../images/tetra_white_sq_28.png");
  }
  32.22% {
    background-image: url("../images/tetra_white_sq_29.png");
  }
  33.33% {
    background-image: url("../images/tetra_white_sq_30.png");
  }
  34.44% {
    background-image: url("../images/tetra_white_sq_31.png");
  }
  35.56% {
    background-image: url("../images/tetra_white_sq_32.png");
  }
  36.67% {
    background-image: url("../images/tetra_white_sq_33.png");
  }
  37.78% {
    background-image: url("../images/tetra_white_sq_34.png");
  }
  38.89% {
    background-image: url("../images/tetra_white_sq_35.png");
  }
  40.00% {
    background-image: url("../images/tetra_white_sq_36.png");
  }
  41.11% {
    background-image: url("../images/tetra_white_sq_37.png");
  }
  42.22% {
    background-image: url("../images/tetra_white_sq_38.png");
  }
  43.33% {
    background-image: url("../images/tetra_white_sq_39.png");
  }
  44.44% {
    background-image: url("../images/tetra_white_sq_40.png");
  }
  45.56% {
    background-image: url("../images/tetra_white_sq_41.png");
  }
  46.67% {
    background-image: url("../images/tetra_white_sq_42.png");
  }
  47.78% {
    background-image: url("../images/tetra_white_sq_43.png");
  }
  48.89% {
    background-image: url("../images/tetra_white_sq_44.png");
  }
  50.00% {
    background-image: url("../images/tetra_white_sq_45.png");
  }
  51.11% {
    background-image: url("../images/tetra_white_sq_46.png");
  }
  52.22% {
    background-image: url("../images/tetra_white_sq_47.png");
  }
  53.33% {
    background-image: url("../images/tetra_white_sq_48.png");
  }
  54.44% {
    background-image: url("../images/tetra_white_sq_49.png");
  }
  55.56% {
    background-image: url("../images/tetra_white_sq_50.png");
  }
  56.67% {
    background-image: url("../images/tetra_white_sq_51.png");
  }
  57.78% {
    background-image: url("../images/tetra_white_sq_52.png");
  }
  58.89% {
    background-image: url("../images/tetra_white_sq_53.png");
  }
  60.00% {
    background-image: url("../images/tetra_white_sq_54.png");
  }
  61.11% {
    background-image: url("../images/tetra_white_sq_55.png");
  }
  62.22% {
    background-image: url("../images/tetra_white_sq_56.png");
  }
  63.33% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  64.44% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  65.56% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  66.67% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  67.78% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  68.89% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  70.00% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  71.11% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  72.22% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  73.33% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  74.44% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  75.56% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  76.67% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  77.78% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  78.89% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  80.00% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  81.11% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  82.22% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  83.33% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  84.44% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  85.56% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  86.67% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  87.78% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  88.89% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  90.00% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  91.11% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  92.22% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  93.33% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  94.44% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  95.56% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  96.67% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  97.78% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
  98.89%, 100% {
    background-image: url("../images/tetra_white_sq_57.png");
  }
}