/* Scss Document */
@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-ms-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* line 51, ../../scss/pc/key.scss */
#m20th {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  height: -webkit-calc(100vh - 100px);
  height: calc(100vh - 100px);
  margin: 100px 0 0 0;
  padding: 0; }
  /* line 60, ../../scss/pc/key.scss */
  #m20th:before {
    content: "";
    margin: -0px 0 0 -16px;
    width: 20px;
    height: 20px;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -10px;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }

/* line 76, ../../scss/pc/key.scss */
#m20bg {
  width: 100vw;
  height: 100%;
  background-image: url(../../images/index/m20th/key_bg.jpg);
  background-position: center center;
  background-size: cover;
  -webkit-animation: fadein 1s ease-in-out 2s 1;
  -moz-animation: fadein 1s ease-in-out 2s 1;
  -ms-animation: fadein 1s ease-in-out 2s 1;
  -o-animation: fadein 1s ease-in-out 2s 1;
  animation: fadein 1s ease-in-out 2s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0; }

/* line 94, ../../scss/pc/key.scss */
#m20Title {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 0px;
  height: 36vh;
  width: 8vh;
  margin: 10vh 0 0 -4vh;
  -webkit-animation: fadein 1s linear 0.5s 1;
  -moz-animation: fadein 1s linear 0.5s 1;
  -ms-animation: fadein 1s linear 0.5s 1;
  -o-animation: fadein 1s linear 0.5s 1;
  animation: fadein 1s linear 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0; }

/* line 114, ../../scss/pc/key.scss */
#m20btn {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 67%;
  height: auto;
  width: 50vw;
  margin: 0 0 0 -25vw;
  -webkit-animation: fadein 1s linear 0.5s 1;
  -moz-animation: fadein 1s linear 0.5s 1;
  -ms-animation: fadein 1s linear 0.5s 1;
  -o-animation: fadein 1s linear 0.5s 1;
  animation: fadein 1s linear 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  opacity: 0; }
  /* line 133, ../../scss/pc/key.scss */
  #m20btn .detail {
    margin-top: 0vw; }

@media only screen and (max-width: 959px) {
  /* line 138, ../../scss/pc/key.scss */
  #m20btn {
    position: absolute;
    z-index: 10;
    left: 5%;
    top: 67%;
    width: 90vw;
    opacity: 0;
    margin: 0; } }

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