/* @font-face {
  font-family: nsBlack;
  src:url('../font/NotoSerifCJKsc-Black.otf')
}
@font-face {
  font-family: nsBold;
  src:url('../font/NotoSerifCJKsc-Bold.otf')
} */
/* @font-face {
  font-family: nsExtraLight;
  src:url('../font/NotoSerifCJKsc-ExtraLight.otf')
} */
@font-face {
  font-family: nsLight;
  src:url('/r/cms/mobile/default/fonts/NotoSerifCJKsc-Light.otf')
}
/* @font-face {
  font-family: nsMedium;
  src:url('../font/NotoSerifCJKsc-Medium.otf')
}
@font-face {
  font-family: nsRegular;
  src:url('../font/NotoSerifCJKsc-Regular.otf')
}
@font-face {
  font-family: nsSemiBold;
  src:url('../font/NotoSerifCJKsc-SemiBold.otf')
} */




@media all
and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
    (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
    (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
    :root {
        font-size: 14px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
    (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
    (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
    :root {
        font-size: 13px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
    (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
    (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
    :root {
        font-size: 12px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
    (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
    (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
    :root {
        font-size: 10px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
    (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
    (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
    :root {
        font-size: 9px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
    (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
    (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
    :root {
        font-size: 8px;
    }
}
*{
  margin: 0;
  padding: 0;
}
body{
  font-family: Arial, Helvetica, sans-serif;
}
#canvas{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
}
/* header */
#header{
	position: absolute;
	right: 0;
	top: 0;
	height: auto;
	width: 30%;
	z-index: 999;
}
#header_h{
  height: 15.5vw;position: relative;
  background-color: #3f220e;z-index: 99;
  overflow: hidden;
}
.logo{
  left: 4.5vw;
  height: 6.5vw;
  top: 4.5vw;
  position: absolute;
  z-index: 100;
}


.mask{
  position: fixed;
  z-index: 9999;
  width:100%;
  top:0px;
  left:0px;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.25);
  display: none;
}
.spinner {
  margin: 80% auto 0;
  width: 100%;
  text-align: center;
}
.spinner > div {
  width: 15px;
  height: 15px;
  background-color: #C89F63;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}



.anim02{
  animation-name: anim02;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode:forwards;
}
@keyframes anim02{
  0%   {opacity:0;}
  100% {opacity:1;}
}
@-webkit-keyframes anim02 /* Safari and Chrome */
{
  0%   {opacity:0;}
  100% {opacity:1;}
}