@charset "utf-8";

body {
  font-family: 'Segoe UI', SegoeUI, 'Microsoft YaHei', 微软雅黑, arial, sans-serif;
}

/* .content.kv */
.content.kv {
  background: url(/vividknight/img/sp/bg_kv_en.jpg) no-repeat top center;
  background-size: 100% auto;
}

/* .content.story */
.content.story {
  background: url(/vividknight/img/title_bar_story_cn.png) no-repeat top center,
              url(/vividknight/img/sp/bg_story.jpg) no-repeat bottom center;
  background-size: 200% auto, 100% auto;
}

/* .content.system */
.content.system {
  background: url(/vividknight/img/sp/bg_system_chara.png) repeat-y top center,
              url(/vividknight/img/sp/bg_system.jpg) repeat-y top center;
  background-size: 100% auto, 100% auto;
}

.content.system > h2 {
  background: url(/vividknight/img/title_bar_system_cn.png) no-repeat top center;
  background-size: 200% auto;
}

.content.system .img7 {
  background: url(/vividknight/img/sp/upgrade_board_sp.png) no-repeat top center;
  background-size: 100% auto;
}

.content.system .img7 > .title img {
  width: 150px;
}

/* .content.chara */
.content.chara > h2 {
  background: url(/vividknight/img/title_bar_chara_cn.png) no-repeat top center;
  background-size: 200% auto;
}

/* .content.unimon */
.content.unimon > h2 {
  background: url(/vividknight/img/title_bar_unimon_cn.png) no-repeat top center;
  background-size: 200% auto;
}

@media screen and (min-width: 737px) {

  .content.kv {
    background: url(/vividknight/img/pc/bg_kv.jpg) no-repeat top center;
    background-size: 100% auto;
  }

  /* .content.story */
  .content.story {
    background: url(/vividknight/img/title_bar_story_cn.png) no-repeat top center,
                url(/vividknight/img/pc/bg_story.jpg) no-repeat bottom center;
    background-size: auto, auto;
  }

  /* .content.system */
  .content.system {
    background: url(/vividknight/img/pc/bg_system_chara.png) repeat-y top center,
                url(/vividknight/img/pc/bg_system.jpg) repeat-y top center;
    background-size: 1920px auto, 1920px auto;
  }

  .content.system > h2 {
    background: url(/vividknight/img/title_bar_system_cn.png) no-repeat top center;
    background-size: auto;
  }

  .content.system .img7 {
    background: url(/vividknight/img/pc/upgrade_board.png) no-repeat top center;
    background-size: 100% auto;
  }

  .content.system .img7 > .title img {
    width: auto;
  }

  .content.system .img7 .main:nth-child(1) {
    padding: 0 4rem;
  }


  /* .content.chara */
  .content.chara {
    background: url(/vividknight/img/pc/bg_chara.jpg) repeat-y top center;
    background-size: 100% auto;
  }

  .content.chara > h2 {
    background: url(/vividknight/img/title_bar_chara_cn.png) no-repeat top center;
    background-size: auto;
  }

  /* .content.unimon */
  .content.unimon {
    background: url(/vividknight/img/pc/bg_unimon.jpg) repeat-y top center;
    background-size: 100% auto;
  }

  .content.unimon > h2 {
    background: url(/vividknight/img/title_bar_unimon_cn.png) no-repeat top center;
    background-size: auto;
  }

  /* for cn */
  .content.system .img7 .main-outer .main {
    margin-top: 4%;
  }
}

@media screen and (min-width: 1600px) {
  /* for cn */
}