@charset "UTF-8";

*{
	box-sizing:border-box;
}
body{
	margin:0;
	font-family:YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#111830;
}
img{
	border:none;
	vertical-align:top;
}

a{
	color:#111830;
}
/*.switch {
    visibility: hidden;
}*/
#sec-1-cover, #sec-2-cover, #sec-3-cover {
    position: absolute;
    z-index: 10;
    transition: opacity 1s ease;
    pointer-events: none;
}
.full {
    width: 100%;
    /* height: 100%; */
}
#video-1, #video-2, #video-3 {
    z-index: -1;
}
.full video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
}

.logo_out {
  opacity: 1;
}
.logo_out01 {
  position: relative;
  z-index: 100;
  display: none !important;
}
.logo_in {
  opacity: 0;
} 
.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}



.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #b2b0a9;
}

.link--kukuri:hover {
  color: #b2b0a9;
}

.link--kukuri::after {
  content: '';
  position: absolute;gi
  height: 16px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #F9F9F9;
  transform: translate3d(-100%,0,0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
  transform: translate3d(100%,0,0);
}

.link--kukuri::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
  width: 100%;
}    

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

html{
overflow:auto;
}
body{
	min-width:1200px;
	overflow: hidden;
}
.non03_list{
  display:none;
}
#message2{
  width:1000px;
  margin:auto;
  position:relative;
  height:100px;
}
#message .bg_english{
    left: 30px;
    top: 45px;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    z-index: 1;
    position: absolute;
}
#message2 .bg_english{
    left: 30px;
    top: 45px;
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    z-index: 1;
    position: absolute;
}
.non03_list_content{
  width:100%;
  height:100%;
  cursor: pointer;
  text-decoration: none;
    
    border-bottom: none;
}
#message2 .bg_frame_title{
  position:absolute;
    top: -200px;
    left: 400px;
    z-index: 100;
}
#message .bg_frame_title02 {
    position: relative;
    top: -130px;
    left: -50px;
    z-index: 100;
}
.message05{
	position: relative;
    margin-bottom: 10px;
}
.non03_list_content strong{
  color: #af9a60;
}
.non03_list_content:hover{
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    color: #989898 !important;;
    border-bottom: none;
}
.bottom_banner {
    display: block;
    width: 100%;
    bottom: 0;
    position: fixed;
    z-index: 7000;
}
.b_banner {
    margin: 0px auto;
    max-width: 100%;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
    background-color: #af9a60;
}
.b_content{
  text-align: center; 
  color: white;
  font-family:'Microsoft JhengHei',Arial,sans-serif !important;
  font-weight: bold;
  margin: 0px auto;
  position: relative;
  font-size: 0.8em;
}

#video-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../images/jjw-hotel-video.jpg) #000;
    background-size: cover;
    cursor: pointer;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 99;
    display: block;
}
#video-cover02 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../images/brown-sugar-video.jpg) #000;
    background-size: cover;
    cursor: pointer;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 99;
    display: block;
}
.video-try{
    /* height: -webkit-fill-available !important; */
    width: 100%;
    /* height: 100%; */
    height: 600px;
}

.oh01{

}
.oh011{

}
.oh022{

}
.oh02{
  position: relative;
}
/*
Magic - Ver 1.3.0 - https://minimamente.com
Licensed under the MIT license
Copyright (c) 2018 Christian Pucci
*/
.one_item img{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.one_item:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



.magictime {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.puffIn {
  width: 40%;
  -webkit-animation-name: puffIn;
          animation-name: puffIn;
}
@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.puffOut {
  -webkit-animation-name: puffOut;
          animation-name: puffOut;
}
@-webkit-keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}
@keyframes puffOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2,2);
            transform: scale(2,2);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}
.vanishIn {
  -webkit-animation-name: vanishIn;
          animation-name: vanishIn;
}
@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(90px);
            filter: blur(90px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(90px);
            filter: blur(90px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
.vanishOut {
  -webkit-animation-name: vanishOut;
          animation-name: vanishOut;
}
@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.boingInUp {
  -webkit-animation-name: boingInUp;
          animation-name: boingInUp;
}
@-webkit-keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
            transform: perspective(800px) rotateX(-90deg);
  }
  
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
            transform: perspective(800px) rotateX(50deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes boingInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-90deg);
            transform: perspective(800px) rotateX(-90deg);
  }
  
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(50deg);
            transform: perspective(800px) rotateX(50deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.boingOutDown {
  -webkit-animation-name: boingOutDown;
          animation-name: boingOutDown;
}
@-webkit-keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
            transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  
  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
            transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
            transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
@keyframes boingOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  20% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
            transform: perspective(800px) rotateX(0deg) rotateY(10deg);
  }
  
  30% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
  }
  
  40% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
            transform: perspective(800px) rotateX(10deg) rotateY(10deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
            transform: perspective(800px) rotateX(90deg) rotateY(0deg);
  }
}
.foolishIn {
  -webkit-animation-name: foolishIn;
          animation-name: foolishIn;
}
@-webkit-keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
            transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes foolishIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(360deg);
            transform: scale(0, 0) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }
}
.foolishOut {
  -webkit-animation-name: foolishOut;
          animation-name: foolishOut;
}
@-webkit-keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
            transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
            transform: scale(0, 0) rotate(0deg);
  }
}
@keyframes foolishOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotate(360deg);
            transform: scale(1, 1) rotate(360deg);
  }

  20% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  40% {
    opacity: 1;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  60% {
    opacity: 1;
    -webkit-transform-origin: 0%;
            transform-origin: 0%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
            transform: scale(0.5, 0.5) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotate(0deg);
            transform: scale(0, 0) rotate(0deg);
  }
}
.holeOut {
  -webkit-animation-name: holeOut;
          animation-name: holeOut;
}
@-webkit-keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
            transform: scale(0, 0) rotateY(180deg);
  }
}
@keyframes holeOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
            transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(180deg);
            transform: scale(0, 0) rotateY(180deg);
  }
}
.swashIn {
  -webkit-animation-name: swashIn;
          animation-name: swashIn;
}
@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.swashOut {
  -webkit-animation-name: swashOut;
          animation-name: swashOut;
}
@-webkit-keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
@keyframes swashOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }

  80% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
            transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
}
.bombLeftOut {
  -webkit-animation-name: bombLeftOut;
          animation-name: bombLeftOut;
}
@-webkit-keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes bombLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    -webkit-transform: rotate(-160deg);
            transform: rotate(-160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.bombRightOut {
  -webkit-animation-name: bombRightOut;
          animation-name: bombRightOut;
}
@-webkit-keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
@keyframes bombRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 50%;
            transform-origin: 200% 50%;
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    -webkit-filter: blur(20px);
            filter: blur(20px);
  }
}
.magic {
  -webkit-animation-name: magic;
          animation-name: magic;
}
@-webkit-keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
            transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
            transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
            transform: scale(0, 0) rotate(270deg);
  }
}
@keyframes magic {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 200%;
            transform-origin: 100% 200%;
    -webkit-transform: scale(1, 1) rotate(0deg);
            transform: scale(1, 1) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 200% 500%;
            transform-origin: 200% 500%;
    -webkit-transform: scale(0, 0) rotate(270deg);
            transform: scale(0, 0) rotate(270deg);
  }
}
.swap {
  -webkit-animation-name: swap;
          animation-name: swap;
}
@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}
.twisterInDown {
  -webkit-animation-name: twisterInDown;
          animation-name: twisterInDown;
}
@-webkit-keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
            transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
@keyframes twisterInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  30% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
            transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
            transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}
.twisterInUp {
  -webkit-animation-name: twisterInUp;
          animation-name: twisterInUp;
}
@-webkit-keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
            transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
@keyframes twisterInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  30% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
            transform: scale(0, 0) rotate(360deg) translateY(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
            transform: scale(1, 1) rotate(0deg) translateY(0);
  }
}
.spaceInDown {
  -webkit-animation-name: spaceInDown;
          animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInLeft {
  -webkit-animation-name: spaceInLeft;
          animation-name: spaceInLeft;
}
@-webkit-keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInRight {
  -webkit-animation-name: spaceInRight;
          animation-name: spaceInRight;
}
@-webkit-keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInRight {
  0% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceInUp {
  -webkit-animation-name: spaceInUp;
          animation-name: spaceInUp;
}
@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
@keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }
}
.spaceOutDown {
  -webkit-animation-name: spaceOutDown;
          animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }
}
@keyframes spaceOutDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scale(.2) translate(0%, 200%);
            transform: scale(.2) translate(0%, 200%);
  }
}
.spaceOutLeft {
  -webkit-animation-name: spaceOutLeft;
          animation-name: spaceOutLeft;
}
@-webkit-keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }
}
@keyframes spaceOutLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-transform: scale(.2) translate(-200%, 0%);
            transform: scale(.2) translate(-200%, 0%);
  }
}
.spaceOutRight {
  -webkit-animation-name: spaceOutRight;
          animation-name: spaceOutRight;
}
@-webkit-keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }
}
@keyframes spaceOutRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.2) translate(200%, 0%);
            transform: scale(.2) translate(200%, 0%);
  }
}
.spaceOutUp {
  -webkit-animation-name: spaceOutUp;
          animation-name: spaceOutUp;
}
@-webkit-keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }
}
@keyframes spaceOutUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(.2) translate(0%, -200%);
            transform: scale(.2) translate(0%, -200%);
  }
}
.perspectiveDown {
  -webkit-animation-name: perspectiveDown;
          animation-name: perspectiveDown;
}
@-webkit-keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }
}
@keyframes perspectiveDown {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }
}
.perspectiveDownReturn {
  -webkit-animation-name: perspectiveDownReturn;
          animation-name: perspectiveDownReturn;
}
@-webkit-keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveDownReturn {
  0% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg);
            transform: perspective(800px) rotateX(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.perspectiveLeft {
  -webkit-animation-name: perspectiveLeft;
          animation-name: perspectiveLeft;
}
@-webkit-keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }
}
@keyframes perspectiveLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }
}
.perspectiveLeftReturn {
  -webkit-animation-name: perspectiveLeftReturn;
          animation-name: perspectiveLeftReturn;
}
@-webkit-keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(-180deg);
            transform: perspective(800px) rotateY(-180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveRight {
  -webkit-animation-name: perspectiveRight;
          animation-name: perspectiveRight;
}
@-webkit-keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }
}
@keyframes perspectiveRight {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }
}
.perspectiveRightReturn {
  -webkit-animation-name: perspectiveRightReturn;
          animation-name: perspectiveRightReturn;
}
@-webkit-keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
@keyframes perspectiveRightReturn {
  0% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
  }

  100% {
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
  }
}
.perspectiveUp {
  -webkit-animation-name: perspectiveUp;
          animation-name: perspectiveUp;
}
@-webkit-keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }
}
@keyframes perspectiveUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }
}
.perspectiveUpReturn {
  -webkit-animation-name: perspectiveUpReturn;
          animation-name: perspectiveUpReturn;
}
@-webkit-keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
            transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
            transform: perspective(800px) rotateX(0deg);
  }
}
.rotateDown {
  -webkit-animation-name: rotateDown;
          animation-name: rotateDown;
}
@-webkit-keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
            transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
@keyframes rotateDown {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
            transform: perspective(800px) rotateX(-180deg) translateZ(300px);
  }
}
.rotateLeft {
  -webkit-animation-name: rotateLeft;
          animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
            transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
            transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
@keyframes rotateLeft {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
            transform: perspective(800px) rotateY(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
            transform: perspective(800px) rotateY(-180deg) translateZ(300px);
  }
}
.rotateRight {
  -webkit-animation-name: rotateRight;
          animation-name: rotateRight;
}
@-webkit-keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
            transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
            transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}
@keyframes rotateRight {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
            transform: perspective(800px) rotateY(0deg) translate3d(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
            transform: perspective(800px) rotateY(180deg) translateZ(150px);
  }
}

.rotateUp {
  -webkit-animation-name: rotateUp;
          animation-name: rotateUp;
}
@-webkit-keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
            transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
@keyframes rotateUp {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
            transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
            transform: perspective(800px) rotateX(180deg) translateZ(100px);
  }
}
.slideDown {
  -webkit-animation-name: slideDown;
          animation-name: slideDown;
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.slideDownReturn {
  -webkit-animation-name: slideDownReturn;
          animation-name: slideDownReturn;
}
@-webkit-keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideDownReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
.slideLeft {
  -webkit-animation-name: slideLeft;
          animation-name: slideLeft;
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.slideLeftReturn {
  -webkit-animation-name: slideLeftReturn;
          animation-name: slideLeftReturn;
}
@-webkit-keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes slideLeftReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
          transform: translateX(0%);
  }
}
.slideRight {
  -webkit-animation-name: slideRight;
          animation-name: slideRight;
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.slideRightReturn {
  -webkit-animation-name: slideRightReturn;
          animation-name: slideRightReturn;
}
@-webkit-keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes slideRightReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
.slideUp {
  -webkit-animation-name: slideUp;
          animation-name: slideUp;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
.slideUpReturn {
  -webkit-animation-name: slideUpReturn;
          animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
.openDownLeft {
  -webkit-animation-name: openDownLeft;
          animation-name: openDownLeft;
}
@-webkit-keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeft {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openDownLeftReturn {
  -webkit-animation-name: openDownLeftReturn;
          animation-name: openDownLeftReturn;
}
@-webkit-keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openDownLeftReturn {
  0% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openDownRight {
  -webkit-animation-name: openDownRight;
          animation-name: openDownRight;
}
@-webkit-keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRight {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}

.openDownRightReturn {
  -webkit-animation-name: openDownRightReturn;
          animation-name: openDownRightReturn;
}
@-webkit-keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openDownRightReturn {
  0% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openUpLeft {
  -webkit-animation-name: openUpLeft;
          animation-name: openUpLeft;
}
@-webkit-keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeft {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpLeftReturn {
  -webkit-animation-name: openUpLeftReturn;
          animation-name: openUpLeftReturn;
}
@-webkit-keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openUpLeftReturn {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openUpRight {
  -webkit-animation-name: openUpRight;
          animation-name: openUpRight;
}
@-webkit-keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRight {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpRightReturn {
  -webkit-animation-name: openUpRightReturn;
          animation-name: openUpRightReturn;
}
@-webkit-keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes openUpRightReturn {
  0% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.openDownLeftOut {
  -webkit-animation-name: openDownLeftOut;
          animation-name: openDownLeftOut;
}
@-webkit-keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openDownRightOut {
  -webkit-animation-name: openDownRightOut;
          animation-name: openDownRightOut;
}
@-webkit-keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openDownRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpLeftOut {
  -webkit-animation-name: openUpLeftOut;
          animation-name: openUpLeftOut;
}
@-webkit-keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpLeftOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(110deg);
            transform: rotate(110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.openUpRightOut {
  -webkit-animation-name: openUpRightOut;
          animation-name: openUpRightOut;
}
@-webkit-keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes openUpRightOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: rotate(-110deg);
            transform: rotate(-110deg);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
.tinDownIn {
  -webkit-animation-name: tinDownIn;
          animation-name: tinDownIn;
}
@-webkit-keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinDownIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
.tinDownOut {
  -webkit-animation-name: tinDownOut;
          animation-name: tinDownOut;
}
@-webkit-keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }
}
@keyframes tinDownOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(900%);
            transform: scale(1, 1) translateY(900%);
  }
}
.tinLeftIn {
  -webkit-animation-name: tinLeftIn;
          animation-name: tinLeftIn;
}
@-webkit-keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
.tinLeftOut {
  -webkit-animation-name: tinLeftOut;
          animation-name: tinLeftOut;
}
@-webkit-keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }
}
@keyframes tinLeftOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(-900%);
            transform: scale(1, 1) translateX(-900%);
  }
}
.tinRightIn {
  -webkit-animation-name: tinRightIn;
          animation-name: tinRightIn;
}
@-webkit-keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
@keyframes tinRightIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }
}
.tinRightOut {
  -webkit-animation-name: tinRightOut;
          animation-name: tinRightOut;
}
@-webkit-keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }
}
@keyframes tinRightOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateX(0);
            transform: scale(1, 1) translateX(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateX(0);
            transform: scale(1.1, 1.1) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateX(900%);
            transform: scale(1, 1) translateX(900%);
  }
}
.tinUpIn {
  -webkit-animation-name: tinUpIn;
          animation-name: tinUpIn;
}
@-webkit-keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes tinUpIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
.tinUpOut {
  -webkit-animation-name: tinUpOut;
          animation-name: tinUpOut;
}
@-webkit-keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }
}
@keyframes tinUpOut {
  0%, 20%, 40%, 50% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }

  10%, 30% {
    opacity: 1;
    -webkit-transform: scale(1.1, 1.1) translateY(0);
            transform: scale(1.1, 1.1) translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translateY(-900%);
            transform: scale(1, 1) translateY(-900%);
  }
}
/*-------------------------------------------------------------------------------------*/
	.switch {
		opacity:0; 
		left:0px; 
		top:20px;
	}

	.switch02{
    top: 20px;
		opacity: 0;
		left:900px;
	}


/*-------------------------------------------------------------------------------------*/
	#fixed_block .flex_end {
	    justify-content: flex-end;
	}

	#fixed_block .item {
	    display: flex;
	    align-items: stretch;
	    flex-wrap: wrap;
	    height: 550px !important;

	}
	.copy{
	}


	.copy_title_background02{
		width:418px;
		height:250px;
		background-color:white;
		/*opacity: 0.9;*/
	}
	.button{
		font-size: 1em !important;
	}

	.tiles{
		margin: 0px auto 0px auto;
	}
	.mainmain-text{
		 width: 100%;
		 padding: 0;
		 margin-top: 0px;"
	}
	.pic-content .main-pic {
		display:inline-block;
		width:95%;
		max-width:600px;
	}
	.main-pic {
		margin: 0 auto;
		width: 95%;
		opacity: 1;
		position: relative;
		left: 0px;
	}
	.non01_content{
		width: 100% !important;
	    margin: 5px 0 !important;
      font-family: 微軟正黑體 !important;
	    font-size: 1.5em !important;
	    color: #ce9f21 !important;
	}

	.message02{
		  padding: 0px 0 0 236px !important;
    	height: 110px !important;
	}
	.copy_title{
		height: 0px;
	    opacity: 10;
	    width: 100%;
	    margin: 0 auto;
	    background: url(../../images/deco03.png) left top no-repeat !important; */
	}
  .copy_title2{
    height: 0px;
      opacity: 10;
      width: 100%;
      margin: 0 auto;
      background: url(../../images/deco03.png) left top no-repeat !important; */
  }
	#video-box01 {
	    width: 100%;
	    height: 400px;
	    background: url(../../images/pic/01.jpg) center !important;
	    background-size: cover;
	    text-align: center;
	    overflow: hidden;
	}

	#video-box01 a {
	    display: block;
	    text-decoration: none;
	    height: 100%;
	    border: 0px;
	    border-radius: 150px;
	    -webkit-border-radius: 150px;
	    -moz-border-radius: 150px;
	    color: #000;
	}

	#video-box01 span {
		width: 300px;
	    display: block;
	    margin: 80px auto;
	    padding: 80px 0px 60px 0px;
      border: #f78545 1px solid;
	    color: #fff;
	    font-size: 2em;
	    font-weight: 900;
	    font-family: 微軟正黑體;
	}
	#video-box02 {
	    width: 100%;
	    height: 400px;
	    background: url(../../images/pic/01.jpg) center !important;
	    background-size: cover;
	    text-align: center;
	    overflow: hidden;
	}

	#video-box02 a {
	    display: block;
	    text-decoration: none;
	    height: 100%;
	    border: 0px;
	    border-radius: 150px;
	    -webkit-border-radius: 150px;
	    -moz-border-radius: 150px;
	    color: #000;
	}

	#video-box02 span {
		width: 300px;
	    display: block;
	    margin: 80px auto;
	    padding: 80px 0px 60px 0px;
	    color: #fff;
	    font-size: 2em;
	    border: #f78545 1px solid;
	    font-weight: 900;
	    font-family: 微軟正黑體;
	}
	/*-----------------------------------------------------------*/
	.lastlast-image{
		width:100%;
		height:400px;
		background: url(../../images/last-image.jpg);
		background-repeat:  no-repeat;
		background-size: cover;
	}
	.lastlast-box{
		width: 100%;
		height:400px;

	}
	.last-box{
	    position: relative;
	    margin: 0 auto;
	    padding: 40px 300px 40px 300px;
	    height: 100%;
	    width: 100%;
	}
	.last-box-inner01{
    height: 100%;
		width:50%;
		float: left;

	}
	.pic-content {
	    display: block;
	    overflow: hidden;
	    width: 100%;
	    margin: 0 auto;
	    padding-top: 100px;
	    text-align: center;
	}
	.last-box-inner01 img{
		width: auto;
	    height: 250px;
	    margin: auto;
	    position: relative;
	    top: 15%;
	}
	.last-box-inner02{
		float: left;
		padding-left: 40px;
		width: 50%;
	}
	.inner02-box01{
		padding-top: 50px;

	}
	.inner02-box02{
		width: 100%;
		margin: 0 auto;
		
	}
.mainmainmain-text {
  width: 1px;
    height: 30px;
    min-height: 20px;
    max-height: 150px;
    border: 0.2px solid white;
    margin: 0 auto;
    display: block;
}

.main-page-section{
 background-image:url(../../images/pic/main-bg.png);
 background-repeat:
 no-repeat;
 background-size:auto;
 width: 100%;
 min-height: 100%;
 height:100%;
 height:-webkit-fill-available;
}

	/*-----------------------------------------------------------*/
	.sp-to {
	    position: absolute;
	    display: block;
	    height: 150px;
	    margin-top: -75px;
	}
	.container01 {
    /*max-width: 1150px;*/
    height: auto;
    margin-right: auto;
    margin-left: auto;
	}


	.sp_non01{
		top: 45px;
	    opacity: 1;
	    transform: matrix(1, 0, 0, 1, 0, 0);
	    z-index: 1;
	}
	.right_pic img {
		width: 100%;
	}

	.right_pic {
	    right: -80px;
	    position: absolute;
	    width: 80px;
	    z-index: 10000;
	    background: none;
	    float: left;
	    display: block;
	    top: 0px;
	}

  .rightpic{
    width: 100%;
    height: 80px;
    /* line-height: 50px; */
    padding: 20px 0 15px 0;
  }
	.jiajia {
	    position: relative;
	    display: inline-block;
	    text-align: center;
	    color: white;
	}

	.left_pic{
		font-size: 0.8em;
	    left: -80px;
	    position: relative;
	    width: 80px;
	    z-index: 10000;
	    background: none;
	    float: left;
	    display: block;
	    top: -468px;
	}
	.left_pic img {
		width: 100%;
	}
  .Canvas02{
    left: 10px;
  }

	.forth_title{
		position: absolute;
	    width: 100%;
	    float: left;
	    height: 15%;
	}

	.inner_box{
		width:1000px;
		margin:auto;
	}
	.non01{
		font-size: 2em;
		font-weight: bold; 
		font-family: 微軟正黑體;
		color: #ce9f21;
		margin-bottom: 5px;
	}
  .non02{
    font-size: 2em;
    font-weight: bold; 
    font-family: 微軟正黑體;
    color: #ce9f21;
    margin-bottom: 5px;
  }
  .non03{
    font-size: 2em;
    font-weight: bold; 
    font-family: 微軟正黑體;
    color: #ce9f21;
    text-align: center;
    margin: 40px auto;
  }
	.main-text-content {
		padding: 10px;
	    display: block;
	    overflow: hidden;
	    width: 100%;
	    margin: 0px auto 0 auto;
	    max-width: 600px;
	    font-size: 1em;
	    line-height: 23px;
	    color: #565656;
	    text-align: center;
	    color: white;
	}


	.xixi_close{
    -ms-writing-mode:tb-rl;
	    writing-mode: vertical-rl !important;
	    text-orientation: upright !important;
	    color: #ce9f21 !important;
	    font-size: 2em !important;
	    height: 100% !important;
	    max-height: 400px;
	    float: left !important;
	    margin: 1em 0 0 0 !important;
	    width: 15% !important;
	}
  .xixi_close02{
    -ms-writing-mode:tb-rl;
      writing-mode: vertical-rl !important;
      text-orientation: upright !important;
      color: #ce9f21 !important;
      font-size: 2em !important;
      height: 100% !important;
      max-height: 400px;
      float: left !important;
      width: 15% !important;
      margin: 1em 0 0 0 !important;
  }
	.img-responsive{
		height: 550px;
	}

	#fixed_block .item .fixed {
	    position: fixed;
	    height: 100vh;
	    width: 50%;
	    transition: .3s all;
	    background: #f2f2f2;
	    z-index: 2;
	}
	#fixed_block .item .left {
	height: 100%;
    width: 100%;
    padding: 0;
    overflow: hidden;
    top: 0;
    left: 0;
    position: relative;
	}


	.fadeIn {
    animation-name: fadeIn;
	} 
	.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
	}

	#fixed_block .item .right02 {
	    width: 45%;
	    height: 550px;
	    /* float: left; */
	    opacity: 0.94;
	    background: white;
	    /* display: flex; */
	    /* align-items: center; */
	    /* justify-content: center; */
	    position: relative;
	    top: -550px;
	    left: -200px;
	    z-index: 1000;
	}

	#fixed_block .item .right {
    width: 45%;
    height: 550px;
    /*float: left;*/
    opacity: 0.94;
    background: white;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    position: relative;
    top: -550px;
    left: -400px;
    z-index: 1000;
	}
	#fixed_block .item .right .txt {
		opacity: 1;
    	padding: 2em 5em 0 5em;
	}
	#fixed_block .item .right02 .txt {
    padding: 2em 5em 0 5em;
	}
	#fixed_block .item .intro {
    padding: 1em 0; 
	}
	section .txt p {
    font-family: "Microsoft JhengHei",Arial,sans-serif !important;
    text-align: justify;
    margin-bottom: 30px;
    margin-left: 30px;
	}
.intro{
  font-family: "Microsoft JhengHei",Arial,sans-serif !important;
	width: 85%;
  float: right;
  font-size: 1em;
}

.sp_br{
	display:none;
}
.pc_br{
	display:block;
}
.color{
	color:#b09a77;
}
.sp_img{
	display:none;
}
/*
a:hover {
	opacity: 1;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-duration: 1s;
	animation-name: flash;
}
@-ms-keyframes flash {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes flash {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes flash {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}*/

/* ヘッダー
*********************************************************************************************************/

#toggle{
	display:none;
}
.hide{    float: right;
    height: 7px;
    left: -70px;
    position: relative;
    top: 192px;
    width: 3px;
}

ul#bread{
	list-style:none;
	clear:both;
	margin:0 auto;
	padding:12px  0;
	overflow:hidden;
	font-size:12px;
	line-height:1.2;
	width:1000px;
}
ul#bread li{
	float:left;
}
ul#bread li a{
	color:#b09a77;
}
ul#bread li::after{
	content:">";
	margin:0 4px 0 3px;
}
ul#bread li:last-child::after{
	content:"";
}

/* コンテンツエリア
*********************************************************************************************************/
#main h2{
	border:4px solid #c9b27c;
	font-size:22px;
	color:#111830;
	padding:19px 0 20px 20px;
	line-height:1;
	position:relative;
	margin:0 0 25px;
}
#main h2::after{
	content:"";
	display:block;
	width:23px;
	height:3px;
	background-color:#000000;
	margin:12px 0 0;
}
#main h3{
	border-top:2px solid #c9b27c;
	padding:30px 0 0;
	margin:60px 0 0;
	font-size:16px;
}
#main p{
	font-size:14px;
	line-height:1.8;
}

/* フッターエントリー
*********************************************************************************************************/
#foot_entry{
	width:1000px;
	margin:100px auto 0;
}
#foot_entry ul{
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
#foot_entry ul li{
	float:left;
	margin:0;
}
#foot_entry ul li:last-child{
	float:right;
}

/* トップに戻る
*********************************************************************************************************/
#totop{
	padding:60px 0;
	text-align:center;
	cursor:pointer;
}
#top #totop{
	padding:46px 0;
	text-align:center;
	cursor:pointer;
}

/* バナー
*********************************************************************************************************/
#banner_area{
	background-color:#f8f7fc;
	text-align:center;
}
#banner_area ul{
	font-size:0;
	list-style:none;
	margin:0 auto;
	padding:55px 0 55px;
	width: 700px;
}
#banner_area ul li{
	display:inline-block;
	margin: 0 24px;
}

#banner_area ul li:nth-child(-n + 3){
	margin: 0 24px 20px;
}

#top #banner_area ul{
	font-size:0;
	list-style:none;
	margin:0 auto;
	padding:155px 0 162px;
	width: 700px;
}


/* フッター
*********************************************************************************************************/
footer{
	text-align:center;
}
footer ul{
	list-style:none;
	margin:0;
	padding:66px 0 0;
	font-size:0;
}
footer ul li{
	display:inline-block;
	font-size:14px;
	margin:0 7px;
}
footer p{
	font-size:14px;
}
footer p#logo{
	margin:61px 0 36px;
}
footer p#logo img{
	width:73px;
	height:60px;
}
footer p#copy{
	margin:30px 0;
	font-size:12px;
}

/* トップ
*********************************************************************************************************/
#top #head_area{
	background-color:#000;
}
#top header{
	background-color:#000;
}
#top header nav{
	float:right;
	width:500px;
	overflow: hidden;
	display:block !important;
}
#top header ul#gnavi{
	list-style:none;
	margin:23px 0 0;
	padding:0;
	overflow:hidden;
	line-height:0;
}
#top header ul#gnavi li{
	float:left;
	margin:0 62px 0 0;
}
#top header ul#gnavi li:last-child{
	margin:0;
}
#top header ul#entry{
	list-style:none;
	margin:45px 0 0;
	padding:0;
	float:right;
}
#top header ul#entry li{
	float:left;
}


#visual{
	width:1000px;
	height:518px;
	position:relative;
	margin:0 auto;
	padding:120px 0 0;
}
#visual h2{
	margin:0 0 50px;
	text-align:right;
	border:none;
	padding:0;
}
#visual p{
	margin:0;
	text-align:right;
}


#visual p#year{
	position:absolute;
	margin:0;
	bottom:0;
	right:30px;
	z-index:100;
}
#visual #key_visual{
	position:absolute;
	bottom:0;
	left:-100px;
}
#visual #key_visual img{
vertical-align:bottom;
}
.wrapper{
	font-family: 微軟正黑體;
}

#message_wrap{
	//background-image:url(../../images/bg_message_wrap.png);
	background-repeat:no-repeat;
	background-position:center top;
	margin:-30px 0 0;
	padding:40px 0 0;
}
#message_wrap2{
	//background-image:url(../../images/bg_message_wrap.png);
	background-repeat:no-repeat;
	background-position:center top;
	margin:-120px 0 0;
	padding:40px 0 0;
}
#m
#message_wrap01 {
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0px 0 0;
    padding: 0px 0 0;
}
#message_wrap02 {
    min-height: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0px 0 0;
    padding: 0px 0 0;
}
#message_wrap03 {
background-repeat: no-repeat;
    background-position: center top;
}

#message_wrap07 {
background-repeat: no-repeat;
    background-position: center top;
    padding: 0px 0 0;
}
.boss{
    margin: 0 auto;
    width: 100%;
}
.boss-pic{
  position: relative;
  top: 0 !important;
}
.pic-boss{
  bottom:0;
  top: 100px;
  left: 0;
  right: 0;
  position: absolute;
  width: 450px;
  height: 230px;
  margin: 0 auto;
}

#message{
	width:1000px;
	margin:auto;
	position:relative;
	height:380px;
}
.seven_three {
    width: 85%;
    padding: 0 10px;
    margin: 0 auto;
}
.three_one{
    display: inline-block;
    width: 32%;
    padding: 10px;
    margin: 0 auto 20px auto;
    border: 0.01em solid #f9f4f4;
    position: relative;
}
.one_item{
    width: 100%;
    height: auto;
    margin: 3px;
    padding: 3px;
}

.three_one img{
  cursor: pointer;
	max-width: 100%;
    height: auto;
}

.one_pic{
    font-family: "Microsoft JhengHei",Arial,sans-serif !important;
	  text-align: justify;
    display: inline-block;
    padding: 10px;
    width: 100%;
    line-height: 20px;
    /* margin: 30px 0; */
}
.one_button{
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #ce9f21;
}
.button-go{
    background-color: white; /* Green */
    border: none;
    color: white !important;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;	
}

.last-button01{
    position: relative;
    font-family: "Microsoft JhengHei",Arial,sans-serif !important;
    font-weight: lighter;
    top: 0px;
    margin: 15px auto;
    background-color: #ce9f21;
    color: white;
    height: 40px;
    display: block;
    /* margin: 15px 30px 0 0; */
}
}
.last-button01:hover {
	background-color: white;
	color: #ce9f21 !important;
  height: 40px;
	border: 0.5px solid #ce9f21 !important;
}

#message h2::after{
	content:"";
	display:block;
}

#message p{
    font-family: "Microsoft JhengHei",Arial,sans-serif !important;
    position: relative;
    z-index: 40;
    margin: 15px 0;
    width: 360px;
    font-size: 14px;
    line-height: 1.6;
}
#message p.copy{
	margin:0 0 16px;
	line-height:1;
}
#message p.img01{
	position:absolute;
	top:20px;
	width:auto;
}
#message p.img02{
	position: absolute;
    top: 20px;
    width: 100%;
}
#message .deco01{
	position:absolute;
	top:465px;
	right:-65px;
	z-index:100;
}
#message .deco02{
	position:absolute;
	z-index:100;
	top:205px;
	right:161px;
}
#message p.btn{
	margin:45px 0 0;
}
}
#message2 .bg01{
	position:absolute;
	height:380px;
	top:-40px;
	left:30px;
	width:100%;
	z-index:0;
}
#message h2{
    position: absolute;
    top: 50px;
    left: 380px;
    z-index: 200;
    line-height: 1;
    border: none;
    padding: 0;
}

#message2 h2{
    /* width: 100%; */
    position: absolute;
    top: 30px;
    left: 600px;
    z-index: 200;
    line-height: 1;
    border: none;
    padding: 0;
}


#message2 h2::after{
	content:"";
	display:block;
}


.mobile {
  display: none;
}

.copy_title_background{
    width: 450px;
    padding: 5px;
}

#message2 p{
    position: relative;
    z-index: 40;
    margin: 0;
    width: 410px;
    line-height: 1.6;
}
#message2 p.copy{
	margin:0 0 16px;
	line-height:1;
}
#message2 p.img01{
	position:absolute;
	top:20px;
	width:auto;
}
#message2 p.img02{
	position: absolute;
    top: 20px;
    width: 100%;
}
#message2 .deco01{
	position:absolute;
	top:465px;
	right:-65px;
	z-index:100;
}
#message2 .deco02{
	position:absolute;
	z-index:100;
	top:205px;
	right:161px;
}
#message2 p.btn{
	margin:45px 0 0;
}

#interview_wrap{
	background-image:url(../../images/bg_interview_wrap.png);
	background-position:center 0;
	background-repeat:no-repeat;
}
#interview{
	width:1000px;
	margin:0 auto;
	position:relative;
	height:3065px;
	padding:140px 0 0;
}
#interview .bg01{
	position:absolute;
	top:0;
	right:0;
}
#interview h2{
	margin:0;
	position:absolute;
	left:107px;
	top:127px;
	z-index:50;
	line-height:1;
	border:none;
	padding:0;
}
#interview h2::after{
	content:"";
	display:block;
	width:90px;
	height:1px;
	background-color:#111830;
	margin:39px 0 0 auto;
}

#interview .bg_frame_title{
	position:absolute;
	top:65px;
	left:-55px;
}
#interview .bg_english{
	position:absolute;
	top:224px;
	left:-26px;
}
#interview01{
	position:relative;
	z-index:50;
	height:989px;
	padding:0 0 0 59px;
}
#interview01 .number{
	position:absolute;
	top:0;
	left:411px;
	z-index:80;
}
#interview01 .name{
	position:absolute;
	bottom:226px;
	right:-82px;
}
#interview01 .photo01{
	position:absolute;
	top:193px;
	right:-80px;
}
#interview01 .photo02{
	position:absolute;
	top:599px;
	right:236px;
}
#interview01 .deco01{
	position:absolute;
	top:150px;
	left:497px;
	z-index:100;
}
#interview01 .deco02{
	position:absolute;
	top:132px;
	right:-139px;
}
#interview01 h3{
	padding:423px 0 35px;
	margin:0;
	border:none;
}
#interview p{
	font-size:14px;
	width:290px;
	margin:0 0 43px;
	line-height:1.8;
}
#interview01 .house{
	position:absolute;
	top:334px;
	left:1px;
	z-index:-1;
}

#interview02{
	height:771px;
	position:relative;
	margin:173px 0 0;
	padding:93px 0 0 637px;
}
#interview02 .number{
	position:absolute;
	top:0;
	left:435px;
	z-index:80;
}
#interview02 .deco01{
	position:absolute;
	top:25px;
	left:371px;
	z-index:100;
}
#interview02 .deco02{
	position:absolute;
	top:132px;
	left:-67px;
}
#interview02 .name{
	position:absolute;
	bottom:105px;
	left:0;
}
#interview02 .photo01{
	position:absolute;
	top:153px;
	left:0;
}
#interview02 .house{
	position:absolute;
	top:5px;
	right:23px;
	z-index:0;
}
#interview02 h3{
	margin:0 0 35px;
	border:none;
	padding:0;
}
#interview02  p{
	margin:0 0 41px;
	font-size:14px;
	width:290px;
	position:relative;
}
#interview02 .photo02{
	position:absolute;
	bottom:0;
	right:80px;
}
#interview02 .deco03{
	position:absolute;
	bottom:130px;
	right:420px;
	height:5px;
}

#interview03{
	position:relative;
	margin:101px 0 0;
	height:890px;
	padding:93px 0 0;
}
#interview03 .number{
	position:absolute;
	top:75px;
	right:17px;
	z-index:60;
}
#interview03 .name{
	position:absolute;
	bottom:285px;
	right:130px;
}
#interview03 .deco01{
	position:absolute;
	top:0;
	right:-43px;
}
#interview03 .photo01{
	position:absolute;
	top:62px;
	right:130px;
}
#interview03 .deco02{
	position:absolute;
	top:129px;
	right:163px;
	z-index:70;
}
#interview03 h3{
	margin:0 0 35px;
	border:none;
	padding:0;
}
#interview03 .house{
	position:absolute;
	left:-52px;
	top:5px;
	z-index:0;
}
#interview03 p{
	width:290px;
	margin:0 0 45px;
	font-size:14px;
	position:relative;
	z-index:50;
}
#interview03 .deco04{
	position:absolute;
	left:329px;
	bottom:325px;
	z-index:90;
}
#interview03 .photo02{
	position:absolute;
	bottom:0;
	left:182px;
}

#company_wrap{
	margin:113px 0 0;
}
#company{
	width:1000px;
	margin:auto;
	position:relative;
	height:852px;
}
#bg_company{
	position:absolute;
	top:0;
	left:-180px;
}
#company h2{
	position:absolute;
	margin:0;
	top:246px;
	right:0;
	z-index:50;
	border:none;
	padding:0;
}
#company h2::after{
	content:"";
	display:block;
	width:90px;
	height:1px;
	background-color:#fff;
	margin:29px 0 0 0;
}
#company .bg_frame_title{
	position:absolute;
	top:183px;
	right:60px;
}
#company .bg_english{
	position:absolute;
	top:343px;
	right:-36px;
}
#company ul{
	position:relative;
	list-style:none;
	padding:261px 0 0;
	margin:0;
	overflow:hidden;
}
#company ul li{
	float:left;
}
#company ul li:nth-child(even){
	margin:235px 0 0;
}

#recruit_wrap{
	margin:105px 0 0;
	background-image:url(../../images/bg_recruit_wrap.png);
	background-position:center 33px;
	background-repeat:no-repeat;
}
#recruit{
	width:1000px;
	margin:auto;
	height:452px;
	position:relative;
	padding:139px 0 0 268px;
}
#recruit #bg_recruit{
	position:absolute;
	top:33px;
	left:-53px;
}
#recruit .bg_frame_title{
	position:absolute;
	top:0;
	left:-58px;
}
#recruit .bg_english{
	position:absolute;
	top:158px;
	left:-38px;
}
#recruit h2{
	position: absolute;
	top:64px;
	left:40px;
	z-index:50;
	margin:0 0 0;
	line-height:1;
	border:none;
	padding:0;
}
#recruit h2::after{
	content:"";
	display:block;
	width:90px;
	height:1px;
	background-color:#111830;
	margin:39px 0 0 auto;
}
#recruit .deco01{
	position:absolute;
	bottom:0;
	left:44px;
	z-index:50;
}
#recruit ul{
	position:relative;
	list-style:none;
	padding:0;
	margin:0;
}
#recruit ul li{
	float:left;
}
#recruit ul li:first-child{
	margin:0 40px 0 0;
}

#whats_new_wrap{
	margin:18px 0 120px;
	background-image:url(../../images/bg_whatnew_wrap.png);
	background-position:center 0;
	background-repeat:no-repeat;
}
#whats_new{
	width:1000px;
	margin:0 auto;
	position:relative;
	height:723px;
	padding:347px 0 0;
}
#bg_whats_new{
	position:absolute;
	top:0;
	left:-772px;
}
#whats_new h2{
	position: absolute;
	top:150px;
	right:62px;
	z-index:50;
	margin:0 0 0 40px;
	line-height:1;
	border:none;
	padding:0;
}
#whats_new h2::after{
	content:"";
	display:block;
	width:90px;
	height:1px;
	background-color:#111830;
	margin:39px 0 0;
}
#whats_new .bg_frame_title{
	position:absolute;
	top:88px;
	right:21px;
}
#whats_new .bg_english{
	position:absolute;
	top:249px;
	right:102px;
}
#whats_new .boxset{
	overflow:hidden;
	position:relative;
	z-index:120;
	margin:0 0 0 16px;
}
#whats_new .boxset .box{
	float:left;
	width:285px;
	margin:0 0 0 43px;
}
#whats_new .boxset .box p{
	margin:0 0 5px;
	font-size:14px;
	line-height:1.8;
}
#whats_new .boxset .box p.img img{
	-webkit-filter:saturate(33%);
	-moz-filter:saturate(33%);
	-o-filter:saturate(33%);
	-ms-filter:saturate(33%);
}
#whats_new .boxset .box p span.date{
	background-color:#111830;
	color:#fff;
	padding:4px 6px;
	display:inline-block;
	line-height:1;
	margin:4px 0;
}
#whats_new .boxset .box a{
	text-decoration:none;
	overflow:hidden;
}
#whats_new .boxset .box p.img a{
	display:block;
}
#whats_new .boxset .box p.img a:hover{
	border:9px solid #111830;
}
#whats_new .boxset .box p.img a:hover img{
	margin:-9px;
	-webkit-filter:saturate(100%);
	-moz-filter:saturate(100%);
	-o-filter:saturate(100%);
	-ms-filter:saturate(100%);
}

/* 下層
*********************************************************************************************************/
#title div{
	height:150px;
	text-align:center;
}
#title h1{
	margin:0;
	line-height:0.5;
	position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* メッセージ
*********************************************************/
#title{
	background-image:url(../images/bg_title.png);
	background-position:center;
	background-size:cover;
	width:100%;
}

.message{
	text-align:center;
}
.message p{
	margin:38px 0;
	line-height:2.2;
	font-size:14px;
}
.message p.color{
	color:#b09a77;
}
.message .copy{
	text-align:center;
	margin:103px 0 77px;
}
.message .lead{
	margin:77px 0;
	text-align:center;
}
#main.message h2{
	margin:70px 0 50px;
	text-align:center;
	border:none;
	padding:0;
}
#main.message h2::after{
	display:none;
}

/* リクルート
*********************************************************/
#sub_navi{
	list-style:none;
	margin:28px 0;
	padding:0;
	font-size:14px;
	overflow:hidden;
	line-height:1.8;
}
#sub_navi li{
	width:50%;
	text-align:center;
	float:left;
}
#sub_navi li:first-child{
	border-right:1px solid #d3d3de;
}
#sub_navi li a{
	color:#b09a77;
}

table{
	border-collapse:collapse;
	border:1px solid #111830;
	font-size:14px;
	line-height:1.8;
	margin:26px 0 0;
	width:100%;
}
table th{
	border-right:1px solid #111830;
	border-bottom:1px dotted #111830;
	background-color:#f8f8f9;
	width:173px;
	text-align:left;
	vertical-align:middle;
	font-weight:normal;
	padding:16px 0 16px 40px;
}
table td{
	border-bottom:1px dotted #111830;
	padding:16px 40px 16px 40px;
}
table td p{
	margin:0;
}
table td p +p{
	margin:25px 0 0;
}
#dir_recruit h2 +table{
	margin:60px 0 0;
}
table dl{
	margin:0;
	padding:0;
	overflow:hidden;
}
table dl dt{
	float:left;
	width:18%;
}
table dl dd{
	float:left;
	width:82%;
	margin:0;
}
table dl dd a{
	color:#b09a77;
}

/* カンパニー
*********************************************************/
/* index */
.index_box{
	background-color:#111830;
	margin:60px 0 0;
}
.index_box:first-child{
	margin:80px 0 0;
}
.index_box p.right{
	float:right;
	border-left:1px solid #fff;
	margin:0;
}
.index_box p.left{
	float:left;
	border-right:1px solid #fff;
	margin:0;
}
.index_box div > a{
	display:block;
	padding:63px 62px 30px 62px;
	width:654px;
	float:left;
}
.index_box a > div{
	/*padding:63px 62px 30px 62px;
	width:654px;
	*/
}

.index_box p.title{
	margin:0 0 24px;
}
.index_box p{
	color:#c2c5cf;
}

#link_box{
	overflow:hidden;
	margin:60px 0 0;
}
#link_box .left{
	background-image:url(../../company/images/bg_index01.png);
	background-position:0 0;
	background-repeat:no-repeat;
	padding:50px 117px;
	float:left;
}
#link_box .right{
	background-image:url(../../company/images/bg_index02.png);
	background-position:0 0;
	background-repeat:no-repeat;
	padding:50px 116px 50px 117px;
	float:right;
}

#dir_company #sub_navi{
	list-style:none;
	margin:28px 0;
	padding:0;
	font-size:14px;
	overflow:hidden;
	line-height:1.8;
}
#dir_company #sub_navi li{
	width:20%;
	text-align:center;
	float:left;
	border-right:1px solid #d3d3de;
}
#dir_company #sub_navi li:last-child{
	border-right:none;
}

/* business */
#pagelink{
	list-style:none;
	margin:60px 0 80px;
	padding:0;
	overflow:hidden;
}
#pagelink li{
	float:left;
}
#pagelink li:last-child{
	float:right;
}
.boxset01{
	overflow:hidden;
	margin:30px 0 0;
}
.boxset01 .inner{
	width:333px;
	float:left;
}
.boxset01 .inner .border_box{
	border-right:1px dotted #c2c5cf;
	padding:0 20px 20px;
}
.boxset01 .inner:first-child{
	width:334px;
}
.boxset01 .inner:first-child .border_box{
	border-left:1px dotted #c2c5cf;
}
.boxset01 .inner:last-child{
	width:333px;
}
.inner .img{
	margin:25px 0 0;
}
.boxset01 .inner .img img{
	border-right:1px solid #fff;
}
.boxset01 .inner:last-child .img img{
	border-right:none;
}


.boxset02 p{
	text-align:center;
}
.boxset02 .inner ul{
	width:288px;
	margin:55px auto 0;
}
.boxset02 .inner ul li a{
	padding:22px 0;
}

/* career */
.career h4{
	text-align:center;
	margin:60px 0 0;
}
.inner2{
	margin:58px 0 0;
	position:relative;
}
.inner2 .icon{
	position:absolute;
	margin:0;
	top:-74px;
	right:-70px;
}
.inner2 p{
	margin:0;
}
.inner2 dl{
	overflow:hidden;
	color:#111830;
	margin:53px 0 0;
}
.inner2 dl dt{
	clear:both;
	float: left;
	border-top:2px solid #c9b27c;
	width:382px;
	font-size:16px;
	font-weight:bold;
	padding:25px 86px 54px 0;
}
.inner2 dl dd{
	float:left;
	border-top:2px solid #c9b27c;
	width:618px;
	margin:0;
	font-size:14px;
	padding:25px 0 54px 0;
}

/* benefits */
.benefits h4{
	text-align:center;
	margin:60px 0 0;
}

/* ワーク
*********************************************************/
#dir_work #sub_navi{
	list-style:none;
	margin:28px 0;
	padding:0;
	font-size:14px;
	overflow:hidden;
	line-height:1.8;
}
#dir_work #sub_navi li{
	width:25%;
	text-align:center;
	float:left;
	border-right:1px solid #d3d3de;
}
#dir_work #sub_navi li:last-child{
	border-right:none;
}
#dir_work .more{
	margin:30px 0 80px;
}
#dir_work .index_box{
	background-color:#f8f7fc;
	position:relative;
}
#dir_work .index_box p.right{
	float:right;
	border:none;
	margin:0;
}
#dir_work .index_box p.left{
	float:left;
	border:none;
	margin:0;
}
#dir_work .index_box > div{
	float:left;
	padding:60px 60px 0 60px;
	width:655px;
}
#dir_work .index_box p.icon{
	margin:0;
	position:absolute;
	right:-60px;
	bottom:-30px;
}
#dir_work .index_box p.title{
	margin:0 0 16px;
	font-size:16px;
	color:#c9b27c;
	font-weight:bold;
}
#dir_work .index_box p.title2{
	font-size:22px;
	margin:0 0 30px;
	color:#111830;
	font-weight:bold;
	line-height:1.6;
}
#dir_work .index_box p.name{
	font-size:12px;
	text-align:right;
}
#dir_work .index_box p.more{
	margin:40px 0 0;
	text-align:left;
}
#dir_work .index_box:nth-of-type(2) p.icon{
	right:auto;
	bottom:auto;
	top:-40px;
	left:-60px;
}
#dir_work .index_box:nth-of-type(4) p.icon{
	right:auto;
	bottom:20px;
	left:-60px;
}
#dir_work .index_box:nth-of-type(even) p.name{
	text-align:left;
}
#dir_work .index_box:nth-of-type(even) p.more{
	text-align:right;
}
#dir_work .index_box p{
	color:#111830;
}

/* インタビュー */
#dir_interview #sub_navi,
#dir_vision #sub_navi{
	list-style:none;
	margin:6px auto 20px;
	padding:0;
	font-size:14px;
	overflow:hidden;
	line-height:1.8;
	width:1000px;
	border-left:1px solid #d3d3de;
}
#dir_interview #sub_navi li,
#dir_vision #sub_navi li{
	width:25%;
	text-align:center;
	float:left;
	border-right:1px solid #d3d3de;
}
#title_bg01,
#title_bg02,
#title_bg03,
#title_bg04{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:588px;
}
#title_bg01{
	background-image:url(../../work/images/bg_h1_interview01.png);
}
#title_bg02{
	background-image:url(../../work/images/bg_h1_interview02.png);
}
#title_bg03{
	background-image:url(../../work/images/bg_h1_interview03.png);
}
#title_bg04{
	background-image:url(../../work/images/bg_h1_interview04.png);
}
#dir_interview #main{
	background-color:#f8f7fc;
}
#dir_interview #main .inner_box{
	padding:60px 80px;
}
.box01{
	background-color:#fff;
	padding:54px 60px;
	margin:60px 0 0;
	clear:both;
}
.box01:first-child{
	margin:0;
}
.box01 img.right{
	float:right;
	margin:0 -230px 60px 60px;
}
.box01 img.left{
	float:left;
	margin:-100px 60px 60px -160px;
}
#main .box01 h3{
	margin:0 0 30px;
}
#main .box01 h3.left{
	float:left;
	width:376px;
}

#btm_link .nav{
	overflow:hidden;
	margin:60px 0 40px;
}
#btm_link .nav p.left{
	margin:0;
	float:left;
}
#btm_link .nav p.right{
	margin:0;
	float:right;
}
#btm_link ul{
	list-style:none;
	margin:0;
	padding:0;
}
#btm_link ul li{
	margin:20px 0 0;
}

/* 私たちの仕事 */
#dir_vision #main{
	background-color:#f8f7fc;
}
#dir_vision #main .inner_box{
	padding:60px 80px;
}
#title_bg{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-image:url(../../work/images/bg_h1_vision.png);
	height:588px;
}
#dir_vision .box01{
	position:relative;
	margin:84px 0 0;
	padding:60px;
}
#dir_vision .box01:first-child{
	margin:0;
}
.box01 .box_left01{
	width:470px;
}
.box01 .box_left02{
	position:absolute;
	top: 90px;
	left:-60px;
}
.box01 .box_left03{
	position:absolute;
	top:60px;
	left:-60px;
}
.box01 .box_right01{
	top:54px;
	position:absolute;
	right:-80px;
}
.box01 .box_right02{
	width:466px;
	margin:0 0 0 auto;
}
.box01 .box_right03{
	top:138px;
	position:absolute;
	right:-80px;
}
#dir_vision .box01 p.btn{
	margin:35px 0 0;
}
#dir_vision .box01 p.caution{
	color:#b09a77;
	font-size:12px;
	margin:35px 0 0;
}
.f_btn{	text-align:center;	margin: 3em 0;	}
.f_btn input{	
	background-color:#111830;
	background-image:url(../../recruit/images/btn_inq.png);
	width:420px;
	color:#ffffff;	
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;	
	padding:  0;
	font-size:0;
	border:none;
	height:65px;
	cursor:pointer;}
.f_btn input:hover{}
table textarea{	width:100%;}
}

/* clearfix */
.clearfix:after,
.index_box:after{
	content: "";
	clear: both;
	display: block;
}

/* End clearfix */