@charset "UTF-8";
/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-image: url("../img/bg.png");
  background-position: center center;
  background-repeat: repeat;
  width: 100%;
  min-width: 1024px;
  overflow-y: scroll; }

a img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }

#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-image: url("../img/loadingbg.jpg");
  background-size: cover;
  background-position: center center;
  background-color: #FFF;
  overflow: hidden; }
  #loading .loadinglogo {
    width: 39.4%;
    position: absolute;
    top: 34%;
    left: 31.92%; }
    #loading .loadinglogo img {
      width: 100%; }
  #loading .loadingon {
    display: none;
    position: absolute;
    left: 38.9%;
    top: 46%;
    width: 9.7%; }
    #loading .loadingon img {
      width: 100%; }
  #loading .loadingoff {
    display: none;
    position: absolute;
    width: 9.7%;
    left: 50.5%;
    top: 46%; }
    #loading .loadingoff img {
      width: 100%; }

#kloading {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #FFF;
  overflow: hidden; }

#wrapper {
  width: 100%;
  height: auto;
  margin: 0px auto;
  background-color: #FFF;
  overflow: hidden;
  /*TOP*/
  /*特徴ページ*/
  /*キャラクターページ*/
  /*リゼロ紹介*/
  /*機種情報ページ*/
  /*通常時ページ*/
  /*ゲームフローページ*/
  /*白鯨ページ*/
  /*ゼロからっしゅページ*/
  /*ゼロからっしゅページ*/
  /*禁書庫ページ*/
  /*全ページ共通*/ }
  #wrapper header {
    position: relative;
    z-index: 3; }
    #wrapper header .headertop {
      background-image: url("../img/headerbg.png");
      background-position: center center;
      background-repeat: repeat;
      border-bottom: solid #FFF 4px;
      padding: 5px 0px;
      overflow: hidden; }
      #wrapper header .headertop h1 {
        width: 14%;
        float: left;
        margin-left: 4%; }
        #wrapper header .headertop h1 img {
          width: 100%; }
      #wrapper header .headertop nav {
        width: 56%;
        float: left;
        margin-top: 1.5%;
        margin-left: 4%; }
        #wrapper header .headertop nav ul li {
          float: left;
          margin-left: 3%;
          line-height: 1;
          margin-bottom: 1.5%;
          position: relative; }
          #wrapper header .headertop nav ul li .menucoming {
            position: absolute;
            left: 0;
            top: 2%;
            width: 110%; }
          #wrapper header .headertop nav ul li.menu0 {
            width: 7.8%;
            margin-right: 0.8%; }
          #wrapper header .headertop nav ul li.menu1 {
            width: 6.6%;
            margin-right: 0.8%; }
          #wrapper header .headertop nav ul li.menu2 {
            width: 11.3%;
            margin-right: 0.8%; }
            #wrapper header .headertop nav ul li.menu2 .menucoming {
              width: 140%; }
          #wrapper header .headertop nav ul li.menu3 {
            width: 9%;
            margin-right: 0.8%; }
            #wrapper header .headertop nav ul li.menu3 .menucoming {
              width: 140%; }
          #wrapper header .headertop nav ul li.menu4 {
            width: 13.68%;
            margin-right: 0.8%; }
          #wrapper header .headertop nav ul li.menu5 {
            width: 18.92%; }
          #wrapper header .headertop nav ul li.menu6 {
            width: 22.26%; }
          #wrapper header .headertop nav ul li.menu7 {
            width: 30.1%; }
          #wrapper header .headertop nav ul li.menu8 {
            width: 16%; }
          #wrapper header .headertop nav ul li.menu9 {
            width: 9%; }
            #wrapper header .headertop nav ul li.menu9 .menucoming {
              width: 140%; }
          #wrapper header .headertop nav ul li img {
            width: 100%; }
      #wrapper header .headertop .sound {
        width: 2.6%;
        float: left;
        margin-left: 2.6%;
        margin-top: 1.7%; }
        #wrapper header .headertop .sound img {
          width: 100%; }
      #wrapper header .headertop .sns {
        width: 7%;
        margin-top: 2%;
        margin-left: 1%;
        float: left;
        overflow: hidden; }
        #wrapper header .headertop .sns li {
          width: 31%;
          margin: 0px 1%;
          float: left; }
          #wrapper header .headertop .sns li img {
            width: 100%; }
      #wrapper header .headertop .klogo {
        width: 6%;
        margin-top: 2%;
        margin-left: 0.88%;
        float: left; }
        #wrapper header .headertop .klogo img {
          width: 100%; }
    #wrapper header .headerbottom {
      background-image: url("../img/headerbottombg.png");
      background-repeat: repeat-x;
      background-position: top center;
      height: 36px; }
  #wrapper .contents {
    margin-top: -36px;
    position: relative; }
  #wrapper .top {
    background-image: url("../img/topbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
    #wrapper .top .topchara {
      width: 62%;
      margin-left: 8.5%; }
      #wrapper .top .topchara img {
        width: 100%; }
    #wrapper .top .catch1 {
      width: 5.4%;
      position: absolute;
      top: 8%;
      left: 65%; }
      #wrapper .top .catch1 img {
        width: 100%; }
    #wrapper .top .catch2 {
      width: 5.4%;
      position: absolute;
      top: 48%;
      left: 9.5%; }
      #wrapper .top .catch2 img {
        width: 100%; }
    #wrapper .top .topupdatebg {
      width: 27.8%;
      position: absolute;
      top: 13.5%;
      right: 1.5%; }
      #wrapper .top .topupdatebg img {
        width: 100%; }
      #wrapper .top .topupdatebg table {
        position: absolute;
        left: 6%;
        top: 26%;
        line-height: 1.4;
        font-size: 0.8vw; }
      #wrapper .top .topupdatebg .updatedate {
        color: #FFF;
        vertical-align: middle; }
      #wrapper .top .topupdatebg .updatetext {
        color: #FFF;
        vertical-align: middle; }
    #wrapper .top .topsyoukai {
      width: 27.8%;
      position: absolute;
      top: 27%;
      right: 1.5%; }
      #wrapper .top .topsyoukai img {
        width: 100%; }
    #wrapper .top .toppv {
      width: 27.8%;
      position: absolute;
      top: 50%;
      right: 1.5%; }
      #wrapper .top .toppv img {
        width: 100%; }
    #wrapper .top .topkaisetupv {
      width: 27.8%;
      position: absolute;
      top: 70%;
      right: 1.5%; }
      #wrapper .top .topkaisetupv img {
        width: 100%; }
      #wrapper .top .topkaisetupv .topkaisetupvnaka {
        position: absolute;
        left: 5%;
        top: 13%;
        width: 90%; }
        #wrapper .top .topkaisetupv .topkaisetupvnaka li {
          float: left;
          width: 48%;
          margin: 0px 1%; }
  #wrapper .tokucho {
    background-image: url("../img/tokuchobg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .tokucho .tokuchocatch {
      width: 68.9%;
      position: absolute;
      left: 15.8%;
      top: 10.9%;
      z-index: 10; }
      #wrapper .tokucho .tokuchocatch img {
        width: 100%; }
    #wrapper .tokucho .tokucho1 {
      width: 46%;
      float: left;
      margin-left: 12.3%;
      margin-top: 5.8%; }
      #wrapper .tokucho .tokucho1 img {
        width: 100%; }
    #wrapper .tokucho .tokucho2 {
      width: 30.8%;
      float: right;
      margin-right: 10.5%;
      margin-top: 5.8%; }
      #wrapper .tokucho .tokucho2 img {
        width: 100%;
        display: block;
        margin-left: -10%; }
  #wrapper .character {
    background-image: url("../img/characterbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; }
    #wrapper .character .story {
      width: 47.9%;
      margin: 1.5% auto; }
      #wrapper .character .story img {
        width: 100%; }
    #wrapper .character .charalist {
      width: 74%;
      margin: 1.5% auto;
      margin-bottom: 0;
      padding-bottom: 2%;
      overflow: hidden; }
      #wrapper .character .charalist li {
        width: 8.3%;
        float: left; }
        #wrapper .character .charalist li:nth-child(even) {
          padding-top: 3%; }
        #wrapper .character .charalist li img {
          width: 100%; }
    #wrapper .character .ck {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      background-color: rgba(0, 0, 0, 0.8);
      left: 0;
      top: 0;
      display: none; }
      #wrapper .character .ck .cb {
        width: 49.1%;
        margin: 1% auto;
        position: absolute;
        left: 25%;
        top: 13%; }
        #wrapper .character .ck .cb img {
          width: 100%; }
      #wrapper .character .ck .cbclose {
        width: 5%;
        position: absolute;
        right: 27%;
        top: 16.4%; }
        #wrapper .character .ck .cbclose img {
          width: 100%; }
  #wrapper .rezero {
    background-image: url("../img/rezerobg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden; }
    #wrapper .rezero .leftcol {
      width: 35%;
      float: left;
      margin-left: 16.7%;
      margin-top: 1%; }
      #wrapper .rezero .leftcol .rezerostory {
        width: 100%; }
        #wrapper .rezero .leftcol .rezerostory img {
          width: 100%; }
      #wrapper .rezero .leftcol ul {
        width: 69.3%;
        overflow: hidden;
        margin-top: 3%;
        padding-bottom: 8%; }
        #wrapper .rezero .leftcol ul li {
          width: 49%;
          margin: 0 0.5%;
          float: left; }
          #wrapper .rezero .leftcol ul li img {
            width: 100%; }
    #wrapper .rezero .rezeroch {
      width: 35%;
      margin-right: 13.3%;
      float: right;
      margin-top: -3%; }
      #wrapper .rezero .rezeroch img {
        width: 100%; }
  #wrapper .basis {
    background-image: url("../img/basisbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .basis .basis1 {
      width: 19.1%;
      float: left;
      margin-left: 11.8%; }
      #wrapper .basis .basis1 img {
        width: 100%; }
    #wrapper .basis .basis2 {
      width: 12.3%;
      float: left;
      margin-left: 0.5%; }
      #wrapper .basis .basis2 img {
        width: 100%; }
    #wrapper .basis .rightcol {
      width: 44.7%;
      float: left; }
      #wrapper .basis .rightcol .basis3 {
        width: 100%;
        margin-left: 0.5%; }
        #wrapper .basis .rightcol .basis3 img {
          width: 100%; }
      #wrapper .basis .rightcol .basis4 {
        width: 72%;
        float: left;
        margin-left: 0.5%; }
        #wrapper .basis .rightcol .basis4 img {
          width: 100%; }
      #wrapper .basis .rightcol .basis5 {
        width: 27%;
        float: left;
        margin-left: 0.5%;
        margin-top: 1%; }
        #wrapper .basis .rightcol .basis5 img {
          width: 100%; }
      #wrapper .basis .rightcol .basis6 {
        width: 17.7%;
        float: left;
        margin-left: 8%;
        margin-top: -1%; }
        #wrapper .basis .rightcol .basis6 img {
          width: 100%; }
  #wrapper .tuujou {
    background-image: url("../img/tuujoubg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .tuujou .leftcol {
      width: 45.5%;
      float: left;
      margin-left: 10.9%;
      padding-bottom: 1.8%; }
      #wrapper .tuujou .leftcol .tuujou1 {
        width: 100%;
        position: relative; }
        #wrapper .tuujou .leftcol .tuujou1 img {
          width: 100%; }
        #wrapper .tuujou .leftcol .tuujou1 .tuujoucon1 {
          position: absolute;
          left: 3%;
          top: 18%;
          width: 94%; }
      #wrapper .tuujou .leftcol .tuujou2 {
        width: 100%;
        margin-top: 1.8%;
        position: relative; }
        #wrapper .tuujou .leftcol .tuujou2 img {
          width: 100%; }
        #wrapper .tuujou .leftcol .tuujou2 .tuujoucon2 {
          position: absolute;
          left: 3%;
          top: 0;
          width: 94%; }
      #wrapper .tuujou .leftcol .tuujou3 {
        width: 100%;
        margin-top: 1.8%;
        position: relative; }
        #wrapper .tuujou .leftcol .tuujou3 img {
          width: 100%; }
        #wrapper .tuujou .leftcol .tuujou3 .tuujoucon3 {
          position: absolute;
          left: 3%;
          top: 25%;
          width: 94%; }
    #wrapper .tuujou .tuujou4 {
      width: 32.2%;
      float: right;
      margin-right: 10.9%;
      padding-bottom: 1.8%;
      position: relative; }
      #wrapper .tuujou .tuujou4 img {
        width: 100%; }
      #wrapper .tuujou .tuujou4 .tuujoucon4 {
        position: absolute;
        left: 4%;
        top: 7%;
        width: 92%; }
  #wrapper .flow {
    background-image: url("../img/flowbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .flow .flow1 {
      position: relative;
      width: 21.9%;
      float: left;
      margin-left: 10.9%;
      padding-bottom: 2%; }
      #wrapper .flow .flow1 img {
        width: 100%;
        position: relative;
        z-index: 1; }
      #wrapper .flow .flow1 .flowcon1 {
        position: absolute;
        width: 87.1%;
        left: 6.5%;
        top: 6.5%;
        z-index: 1; }
      #wrapper .flow .flow1 .flowcon2 {
        position: absolute;
        width: 87.1%;
        left: 6.5%;
        top: 32%;
        z-index: 1; }
      #wrapper .flow .flow1 .flowcon3 {
        position: absolute;
        width: 87.1%;
        left: 6.5%;
        top: 72%;
        z-index: 1; }
      #wrapper .flow .flow1 .flowra {
        width: 14.7%;
        position: absolute;
        z-index: 0;
        right: -11%;
        top: 12%; }
    #wrapper .flow .rightcol {
      position: relative;
      width: 54.5%;
      float: right;
      margin-right: 10.9%;
      padding-bottom: 2%; }
      #wrapper .flow .rightcol img {
        width: 100%; }
      #wrapper .flow .rightcol .flow2 {
        position: relative;
        width: 45.4%;
        float: left; }
        #wrapper .flow .rightcol .flow2 img {
          width: 100%;
          position: relative;
          z-index: 1; }
        #wrapper .flow .rightcol .flow2 .flowcon4 {
          position: absolute;
          width: 87.1%;
          left: 6.5%;
          top: 15.5%;
          z-index: 1; }
        #wrapper .flow .rightcol .flow2 .flowra {
          width: 13.1%;
          position: absolute;
          z-index: 0;
          right: -9%;
          top: 33.5%; }
        #wrapper .flow .rightcol .flow2 .flowrd {
          width: 14.1%;
          position: absolute;
          z-index: 0;
          left: 42%;
          bottom: -18%; }
      #wrapper .flow .rightcol .flow3 {
        position: relative;
        width: 51.5%;
        float: right; }
        #wrapper .flow .rightcol .flow3 img {
          width: 100%;
          position: relative;
          z-index: 1; }
        #wrapper .flow .rightcol .flow3 .flowcon5 {
          position: absolute;
          width: 96.1%;
          left: 4.5%;
          top: -2.5%; }
        #wrapper .flow .rightcol .flow3 .flowrd {
          width: 12.5%;
          position: absolute;
          z-index: 0;
          left: 43%;
          bottom: -18.5%; }
      #wrapper .flow .rightcol .flow4 {
        position: relative;
        width: 100%;
        clear: both;
        padding-top: 2%; }
        #wrapper .flow .rightcol .flow4 img {
          width: 100%; }
        #wrapper .flow .rightcol .flow4 .flowcon6 {
          position: absolute;
          width: 95.1%;
          left: 2.2%;
          top: 14.5%; }
  #wrapper .hakugei {
    background-image: url("../img/hakugeibg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .hakugei .hakugeiwrapper {
      overflow: hidden; }
    #wrapper .hakugei .hakugeicatch {
      width: 14.6%;
      float: left;
      margin-left: 10.9%;
      margin-top: 1.5%; }
      #wrapper .hakugei .hakugeicatch img {
        width: 100%; }
    #wrapper .hakugei .hakugei1 {
      width: 63.1%;
      float: right;
      position: relative;
      margin-right: 10.9%; }
      #wrapper .hakugei .hakugei1 img {
        width: 100%; }
      #wrapper .hakugei .hakugei1 .hakugeicon1 {
        width: 34%;
        position: absolute;
        left: 2%;
        top: 14%;
        z-index: 3; }
        #wrapper .hakugei .hakugei1 .hakugeicon1 img {
          width: 100%; }
      #wrapper .hakugei .hakugei1 .hakugeicon2 {
        width: 34%;
        position: absolute;
        left: 34.5%;
        top: 14%;
        z-index: 2; }
        #wrapper .hakugei .hakugei1 .hakugeicon2 img {
          width: 100%; }
      #wrapper .hakugei .hakugei1 .hakugeicon3 {
        width: 31.3%;
        position: absolute;
        left: 67%;
        top: 9%;
        z-index: 1; }
        #wrapper .hakugei .hakugei1 .hakugeicon3 img {
          width: 100%; }
    #wrapper .hakugei .hakugei2 {
      width: 78.8%;
      margin: 0px auto;
      position: relative;
      padding-bottom: 2.5%;
      margin-top: -2%;
      z-index: 2; }
      #wrapper .hakugei .hakugei2 img {
        width: 100%; }
      #wrapper .hakugei .hakugei2 .hakugeicon4 {
        width: 96.6%;
        position: absolute;
        left: 2.5%;
        top: 21%; }
        #wrapper .hakugei .hakugei2 .hakugeicon4 img {
          width: 100%; }
      #wrapper .hakugei .hakugei2 .hakugeicon5 {
        width: 18.9%;
        position: absolute;
        left: 2.2%;
        top: 51%; }
        #wrapper .hakugei .hakugei2 .hakugeicon5 img {
          width: 100%; }
      #wrapper .hakugei .hakugei2 .hakugeicon6 {
        width: 52.4%;
        position: absolute;
        left: 21.3%;
        top: 36%; }
        #wrapper .hakugei .hakugei2 .hakugeicon6 img {
          width: 100%; }
      #wrapper .hakugei .hakugei2 .hakugeicon7 {
        width: 24.1%;
        position: absolute;
        left: 74%;
        top: 51%; }
        #wrapper .hakugei .hakugei2 .hakugeicon7 img {
          width: 100%; }
  #wrapper .rush {
    background-image: url("../img/rushbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .rush .rush1 {
      position: relative;
      width: 39%;
      float: left;
      margin-left: 10.9%; }
      #wrapper .rush .rush1 img {
        width: 100%; }
      #wrapper .rush .rush1 .rushcon1 {
        width: 96%;
        position: absolute;
        left: 4%;
        top: 5%; }
    #wrapper .rush .rush2 {
      position: relative;
      width: 39%;
      float: right;
      margin-right: 10.9%; }
      #wrapper .rush .rush2 img {
        width: 100%; }
      #wrapper .rush .rush2 .rushcon2 {
        width: 96%;
        position: absolute;
        left: 4%;
        top: 4%; }
    #wrapper .rush .rush3 {
      position: relative;
      width: 13.1%;
      float: left;
      margin-left: 10.9%; }
      #wrapper .rush .rush3 img {
        width: 100%; }
      #wrapper .rush .rush3 .rushcon3 {
        width: 88%;
        position: absolute;
        left: 6%;
        top: 20%; }
    #wrapper .rush .rush4 {
      position: relative;
      width: 35.1%;
      float: left; }
      #wrapper .rush .rush4 img {
        width: 100%; }
      #wrapper .rush .rush4 .rushcon4 {
        width: 96%;
        position: absolute;
        left: 4.5%;
        top: 0; }
    #wrapper .rush .rush5 {
      position: relative;
      width: 30%;
      float: right;
      margin-right: 10.9%;
      padding-bottom: 2.2%; }
      #wrapper .rush .rush5 img {
        width: 100%; }
      #wrapper .rush .rush5 .rushcon5 {
        width: 94%;
        position: absolute;
        left: 2.5%;
        top: 14%; }
  #wrapper .custom {
    background-image: url("../img/custombg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .custom .custom1 {
      position: relative;
      width: 78.8%;
      margin: 0px auto;
      padding-bottom: 3.2%; }
      #wrapper .custom .custom1 img {
        width: 100%; }
      #wrapper .custom .custom1 .customcon1 {
        width: 48.8%;
        position: absolute;
        left: 2%;
        top: 5%; }
      #wrapper .custom .custom1 .customcon2 {
        width: 47.9%;
        position: absolute;
        left: 2%;
        top: 54.3%; }
      #wrapper .custom .custom1 .customcon3 {
        width: 24%;
        position: absolute;
        left: 51%;
        top: 7.5%; }
      #wrapper .custom .custom1 .customcon4 {
        width: 23.6%;
        position: absolute;
        left: 75%;
        top: 7.5%; }
      #wrapper .custom .custom1 .customcon5 {
        width: 24%;
        position: absolute;
        left: 51%;
        top: 50%; }
      #wrapper .custom .custom1 .customcon6 {
        width: 23.6%;
        position: absolute;
        left: 75%;
        top: 44%; }
      #wrapper .custom .custom1 .customcon7 {
        width: 25%;
        position: absolute;
        left: 75%;
        top: 64.2%; }
  #wrapper .special {
    background-image: url("../img/specialbg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative; }
    #wrapper .special .special1 {
      position: relative;
      width: 39%;
      margin: 0px auto;
      margin-top: 2%; }
      #wrapper .special .special1 img {
        width: 100%; }
      #wrapper .special .special1 .spbtn1 {
        width: 8.4%;
        height: 23%;
        position: absolute;
        left: 15.2%;
        top: 5%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn2 {
        width: 8.4%;
        height: 23%;
        position: absolute;
        left: 40.2%;
        top: 5%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn3 {
        width: 8.4%;
        height: 23%;
        position: absolute;
        left: 76%;
        top: 5%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn4 {
        width: 8.4%;
        height: 23%;
        position: absolute;
        left: 29%;
        top: 31%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn5 {
        width: 8.4%;
        height: 23%;
        position: absolute;
        left: 62.2%;
        top: 31%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn6 {
        width: 8.4%;
        height: 25%;
        position: absolute;
        left: 12.5%;
        top: 55.5%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
      #wrapper .special .special1 .spbtn7 {
        width: 8.4%;
        height: 25%;
        position: absolute;
        left: 51.2%;
        top: 55.5%;
        background-color: #FFF;
        cursor: pointer;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0; }
    #wrapper .special .special2 {
      width: 15.7%;
      position: absolute;
      bottom: 0;
      left: 20%; }
      #wrapper .special .special2 img {
        width: 100%; }
    #wrapper .special .special3 {
      width: 12.4%;
      position: absolute;
      bottom: 0;
      right: 21%; }
      #wrapper .special .special3 img {
        width: 100%; }
    #wrapper .special .ck {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      background-color: rgba(0, 0, 0, 0.8);
      left: 0;
      top: 0;
      display: none; }
      #wrapper .special .ck .sk {
        width: 24.4%;
        margin: 1% auto;
        position: absolute;
        left: 37.8%;
        top: 27%; }
        #wrapper .special .ck .sk img {
          width: 100%; }
      #wrapper .special .ck .sk4 {
        width: 30%;
        margin: 1% auto;
        position: absolute;
        left: 35%;
        top: 27%; }
      #wrapper .special .ck .sk5 {
        width: 30%;
        margin: 1% auto;
        position: absolute;
        left: 35%;
        top: 27%; }
      #wrapper .special .ck .skclose {
        width: 2%;
        position: absolute;
        right: 34%;
        top: 21.4%; }
        #wrapper .special .ck .skclose img {
          width: 100%; }
  #wrapper .title {
    width: 26%;
    margin: 0 auto;
    padding-top: 2.5%; }
    #wrapper .title img {
      width: 100%; }

footer {
  position: relative;
  z-index: 3;
  margin-top: -30px; }
  footer .footertop {
    background-image: url("../img/footerbottombg.png");
    background-repeat: repeat-x;
    background-position: top center;
    height: 30px; }
  footer .footerbottom {
    border-top: solid #FFF 4px;
    overflow: hidden;
    padding: 10px 0; }
    footer .footerbottom .copyright {
      padding-top: 1.1%;
      width: 24.1%;
      float: left;
      margin-left: 1.9%; }
      footer .footerbottom .copyright img {
        width: 100%; }
    footer .footerbottom .search {
      position: relative;
      float: left;
      margin-left: 10%;
      width: 13.3%;
      margin-top: -0.2%; }
      footer .footerbottom .search img {
        width: 100%; }
      footer .footerbottom .search form {
        width: 85%;
        position: absolute;
        left: 7%;
        top: 46%;
        line-height: 1; }
        footer .footerbottom .search form select {
          width: 55%;
          font-size: 0.7vw;
          margin: 0;
          padding: 0;
          background: #FFF;
          border: 1px solid #7e7e7e;
          border-radius: 0;
          outline: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          position: absolute;
          top: 7%;
          left: 1%;
          padding: 1px 1px;
          background-image: url("../img/searcharrow.png");
          background-repeat: no-repeat;
          background-position: right center;
          background-size: 10px auto; }
        footer .footerbottom .search form .searchbtn {
          margin: 0;
          padding: 0;
          background: none;
          border: none;
          border-radius: 0;
          outline: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 42%;
          text-indent: -99999px;
          background-image: url("../img/searchbtn.png");
          background-repeat: no-repeat;
          background-size: 100% auto;
          overflow: hidden;
          position: absolute;
          top: 8%;
          right: 1%;
          display: block;
          height: 2vw;
          cursor: pointer; }
    footer .footerbottom .bannerlist {
      width: 50%;
      float: left;
      overflow: hidden; }
      footer .footerbottom .bannerlist li {
        width: 32%;
        margin: 0px 0.5%;
        float: left; }
        footer .footerbottom .bannerlist li img {
          width: 100%; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important; }

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */ }

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit; }

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }

  pre {
    white-space: pre-wrap !important; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }

/*# sourceMappingURL=main.css.map */