html, body {
  height: 100%; }

html {
  font-size: 62.5%; }

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; }

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, div, section, li, table, th, td, tr, form, iframe {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: bottom; }

li {
  list-style-type: none; }

img {
  vertical-align: bottom;
  width: 100%;
  height: auto; }

.pc_hidden {
  display: none; }

.sp_hidden {
  display: block; }

.ld-overlay {
  position: fixed;
  color: #CCC;
  font-size: 12px;
  letter-spacing: 0.4pt;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #333;
  z-index: 1000;
  overflow: hidden; }

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.loader {
  color: #c3a2be;
  font-size: 10px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0) scale(0.5);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0; }

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
#wrap {
  width: 100%;
  height: 100%;
  min-height: 740px;
  min-width: 1200px;
  position: relative;
  opacity: 0; }

.modalIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  border: none;
  display: none; }

#gnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1200px;
  padding-left: 250px;
  background: #FFF url("../images/gnav/gnav_bg.png") no-repeat left top;
  background-size: 220px 55px;
  height: 55px;
  z-index: 1001; }
  #gnav .gnav-logo {
    width: 264px;
    position: absolute;
    top: 0;
    left: 0; }
  #gnav .gnav-btns {
    display: flex;
    height: 55px; }
    #gnav .gnav-btns li a,
    #gnav .gnav-btns li span {
      display: block;
      transition: all 0.2s;
      position: relative; }
      #gnav .gnav-btns li a img,
      #gnav .gnav-btns li span img {
        height: 55px;
        width: auto;
        transition: all 0.2s; }
      #gnav .gnav-btns li a::after,
      #gnav .gnav-btns li span::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: -2px;
        height: 4px;
        width: 0;
        background: #F00;
        transition: all 0.2s; }
    #gnav .gnav-btns li span.modal:hover img,
    #gnav .gnav-btns li a:hover img {
      opacity: 0; }
    #gnav .gnav-btns li span.modal:hover::after,
    #gnav .gnav-btns li a:hover::after {
      left: 0;
      width: 100%; }
    #gnav .gnav-btns li.btn0 {
      background: url("../images/gnav/gnav_btn0_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn1 {
      background: url("../images/gnav/gnav_btn1_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn2 {
      background: url("../images/gnav/gnav_btn2_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn3 {
      background: url("../images/gnav/gnav_btn3_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn4 {
      background: url("../images/gnav/gnav_btn4_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn5 {
      background: url("../images/gnav/gnav_btn5_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn6 {
      background: url("../images/gnav/gnav_btn6_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn7 a:hover img, #gnav .gnav-btns li.btn8 a:hover img {
      opacity: 0.8; }
    #gnav .gnav-btns li.current {
      position: relative; }
      #gnav .gnav-btns li.current::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -2px;
        height: 4px;
        width: 100%;
        background: #F00; }

#caststaff {
  background: none;
  position: relative; }
  #caststaff .caststaff-inner {
    height: 100%; }
    #caststaff .caststaff-inner .page-title {
      width: 1100px;
      margin: 0 auto;
      padding: 150px 0 0 50px;
      text-align: left; }
      #caststaff .caststaff-inner .page-title img {
        width: 156px; }
  #caststaff::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/caststaff/caststaff_bg1.jpg") no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5; }
  #caststaff .billing-block {
    width: 930px;
    margin: 0 auto;
    padding: 200px 0; }
  #caststaff .cast-block {
    width: 1100px;
    margin: 0 auto;
    padding: 0 0 100px; }
  #caststaff .inner2 {
    margin-top: 120px; }
  #caststaff .inner3 {
    margin-top: 100px; }
  #caststaff .cast {
    position: relative;
    width: 520px; }
    #caststaff .cast-inner {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: space-between; }
      #caststaff .cast-inner:nth-child(1) {
        margin-top: -50px; }
    #caststaff .cast-name {
      width: 400px; }
    #caststaff .cast .cast-img {
      width: 285px; }
    #caststaff .cast dd {
      color: #FFF;
      font-size: 1.4rem;
      line-height: 1.7em;
      letter-spacing: 0.06em; }
  #caststaff #cast2 {
    padding-left: 40px;
    padding-right: 20px; }
    #caststaff #cast2 dt {
      padding-left: 90px;
      height: 190px;
      position: relative; }
      #caststaff #cast2 dt .cast-name-en {
        display: block;
        position: absolute;
        top: 0;
        right: 20px;
        z-index: 0;
        width: 25px; }
      #caststaff #cast2 dt .cast-img {
        display: block;
        position: absolute;
        top: 0;
        right: 45px;
        z-index: 0; }
      #caststaff #cast2 dt::before {
        content: '';
        display: block;
        width: 130px;
        height: 340px;
        background: #7b59a3;
        position: absolute;
        top: 15px;
        right: 0;
        z-index: -1; }
    #caststaff #cast2 dd {
      padding-right: 50px; }
      #caststaff #cast2 dd .cast-name {
        margin-bottom: 20px; }
  #caststaff #cast3 {
    margin-top: 76px; }
    #caststaff #cast3 dt {
      height: 223px;
      position: relative; }
      #caststaff #cast3 dt .cast-name-en {
        display: block;
        position: absolute;
        top: 0;
        left: 110px;
        z-index: 102;
        width: 285px; }
      #caststaff #cast3 dt .cast-img {
        display: block;
        position: absolute;
        top: 35px;
        left: 110px;
        z-index: 102; }
      #caststaff #cast3 dt::before {
        content: '';
        display: block;
        width: 432px;
        height: 142px;
        background: #7b59a3;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100; }
    #caststaff #cast3 dd {
      padding-left: 110px; }
      #caststaff #cast3 dd .cast-name {
        margin-bottom: 20px; }
  #caststaff #cast4 {
    margin-top: -150px;
    padding-right: 30px; }
    #caststaff #cast4::after {
      mix-blend-mode: overlay;
      content: '';
      display: block;
      width: 455px;
      height: 105px;
      background: url("../images/caststaff/cast_overlay.png") repeat;
      position: absolute;
      top: 0;
      left: 20px;
      z-index: 101; }
    #caststaff #cast4 dt {
      height: 223px;
      position: relative; }
      #caststaff #cast4 dt .cast-name-en {
        display: block;
        position: absolute;
        top: 0;
        left: 30px;
        z-index: 102;
        width: 285px; }
      #caststaff #cast4 dt .cast-img {
        display: block;
        position: absolute;
        top: 36px;
        left: 30px;
        z-index: 102; }
      #caststaff #cast4 dt::before {
        content: '';
        display: block;
        width: 475px;
        height: 126px;
        background: #7b59a3;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100; }
    #caststaff #cast4 dd {
      padding-right: 30px;
      padding-left: 30px; }
      #caststaff #cast4 dd .cast-name {
        margin-bottom: 20px; }
  #caststaff #cast5 dt {
    padding-left: 70px;
    height: 200px;
    position: relative; }
    #caststaff #cast5 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 15px;
      left: 35px;
      z-index: 0;
      width: 34px; }
    #caststaff #cast5 dt .cast-img {
      display: block;
      position: absolute;
      top: 15px;
      left: 70px;
      z-index: 0; }
    #caststaff #cast5 dt::before {
      content: '';
      display: block;
      width: 130px;
      height: 340px;
      background: #7b59a3;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; }
  #caststaff #cast5 dd {
    margin-left: 70px;
    width: 410px; }
    #caststaff #cast5 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast6 {
    margin-top: -220px;
    padding-right: 30px;
    padding-left: 30px; }
    #caststaff #cast6 dt {
      padding-left: 90px;
      height: 200px;
      position: relative; }
      #caststaff #cast6 dt .cast-name-en {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        z-index: 0;
        width: 25px; }
      #caststaff #cast6 dt .cast-img {
        display: block;
        position: absolute;
        top: 15px;
        right: 45px;
        z-index: 0; }
      #caststaff #cast6 dt::before {
        content: '';
        display: block;
        width: 130px;
        height: 340px;
        background: #7b59a3;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1; }
    #caststaff #cast6 dd {
      padding-left: 10px;
      padding-right: 40px; }
      #caststaff #cast6 dd .cast-name {
        margin-bottom: 23px; }
  #caststaff #cast7::after {
    mix-blend-mode: overlay;
    content: '';
    display: block;
    width: 140px;
    height: 142px;
    background: url("../images/caststaff/cast_overlay.png") repeat;
    position: absolute;
    top: 0;
    left: 92px;
    z-index: 101; }
  #caststaff #cast7 dt {
    padding-left: 90px;
    height: 230px;
    position: relative; }
    #caststaff #cast7 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 0;
      left: 110px;
      z-index: 102;
      width: 285px; }
    #caststaff #cast7 dt .cast-img {
      display: block;
      position: absolute;
      top: 42px;
      left: 110px;
      z-index: 102; }
    #caststaff #cast7 dt::before {
      content: '';
      display: block;
      width: 432px;
      height: 142px;
      background: #7b59a3;
      position: absolute;
      top: 0;
      left: 92px;
      z-index: 100; }
  #caststaff #cast7 dd {
    padding-left: 110px; }
    #caststaff #cast7 dd .cast-name {
      margin-bottom: 23px; }
  #caststaff #cast1 {
    display: flex;
    flex-wrap: wrap;
    width: 980px;
    margin: 0 auto 90px;
    padding-top: 120px; }
    #caststaff #cast1::after {
      content: '';
      display: block;
      width: 140px;
      height: 400px;
      background: url("../images/caststaff/cast_overlay.png") repeat;
      position: absolute;
      top: 0;
      left: 310px;
      z-index: -1;
      mix-blend-mode: overlay; }
    #caststaff #cast1 dt {
      width: 415px;
      height: 200px;
      position: relative; }
      #caststaff #cast1 dt .cast-name-en {
        display: block;
        position: absolute;
        top: 24px;
        left: 350px;
        z-index: 0;
        width: 25px; }
      #caststaff #cast1 dt .cast-img {
        display: block;
        position: absolute;
        top: 24px;
        left: 0;
        width: 350px;
        z-index: 0; }
      #caststaff #cast1 dt::before {
        content: '';
        display: block;
        width: 130px;
        height: 340px;
        background: #7b59a3;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1; }
    #caststaff #cast1 dd {
      width: 520px;
      margin-left: 25px; }
      #caststaff #cast1 dd .cast-name {
        margin-bottom: 23px; }
  #caststaff .staff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 935px;
    margin: 0 auto 60px; }
    #caststaff .staff-bg {
      content: '';
      display: none;
      width: 100%;
      height: 100vh;
      background: url("../images/caststaff/staff_bg_blur.jpg");
      background-size: cover;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1; }
    #caststaff .staff-block {
      padding: 100px 0;
      position: relative; }
    #caststaff .staff dt {
      width: 250px; }
    #caststaff .staff dd {
      width: 685px;
      color: #FFF;
      font-size: 1.4rem;
      line-height: 1.7em;
      letter-spacing: 0.06em; }
    #caststaff .staff:first-child {
      align-items: flex-start; }
      #caststaff .staff:first-child dt {
        width: 345px; }
        #caststaff .staff:first-child dt .staff-name {
          width: 250px;
          margin-bottom: 18px; }
        #caststaff .staff:first-child dt .staff-img {
          width: 300px; }
      #caststaff .staff:first-child dd {
        padding-top: 80px;
        width: 590px; }
  #caststaff .caststaff-bridge {
    width: 100%;
    height: 150vh;
    background: url("../images/caststaff/caststaff_bridge.jpg") no-repeat center center;
    background-size: cover;
    background-attachment: fixed; }
    #caststaff .caststaff-bridge img {
      opacity: 0; }

#story {
  height: 100%;
  min-width: 1100px;
  background: url("../images/introduction/introduction_bg.jpg") no-repeat right top;
  background-size: cover; }
  #story .story-inner {
    height: 100%;
    display: flex;
    flex-wrap: wrap; }
  #story .story-l {
    width: 60%;
    height: 100%;
    background: url("../images/story/story_bg.jpg") no-repeat left bottom;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    #story .story-l .page-title {
      width: 86px;
      margin: auto auto 60px 10%; }
    #story .story-l .catch1 {
      width: 502px;
      margin: 0 auto 40px; }
    #story .story-l .scroll-text {
      margin: 0 auto auto; }
      #story .story-l .scroll-text p {
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.7em;
        letter-spacing: 0.05em;
        color: #FFF; }
  #story .story-r {
    width: 40%;
    height: 100%;
    background: url("../images/story/story_kv1.jpg") no-repeat center top;
    background-size: cover;
    position: relative; }
    #story .story-r .catch2 {
      width: 28px;
      position: absolute;
      top: 50%;
      left: 80%;
      margin-top: -287px; }

#introduction {
  height: 100%;
  min-width: 1100px;
  background: url("../images/introduction/introduction_bg.jpg") no-repeat right top;
  background-size: cover; }
  #introduction .introduction-inner {
    position: relative;
    height: 100%;
    padding-top: 55px; }
    #introduction .introduction-inner .page-title {
      position: absolute;
      top: 80px;
      right: 30px;
      width: 180px; }
  #introduction .introduction-l {
    width: 50%;
    height: 100%;
    background: url("../images/introduction/introduction_kei.png") no-repeat left top;
    background-size: auto 100%;
    position: relative;
    overflow: hidden; }
    #introduction .introduction-l .catch4 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-indent: -9999px;
      background: url("../images/introduction/introduction_catch4_all.png") no-repeat left top;
      background-size: auto 100%; }
  #introduction .introduction-r {
    position: absolute;
    top: 0;
    right: 0;
    width: 68%;
    height: 100%;
    padding-top: 95px; }
    #introduction .introduction-r .catch1 {
      width: 100%;
      margin-bottom: 10px;
      padding-right: 5%;
      padding-bottom: 0;
      position: relative; }
    #introduction .introduction-r .catch3 {
      width: 80%;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 100; }
    #introduction .introduction-r-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
      #introduction .introduction-r-inner .thumbs1,
      #introduction .introduction-r-inner .thumbs2 {
        width: 25%; }
        #introduction .introduction-r-inner .thumbs1 img,
        #introduction .introduction-r-inner .thumbs2 img {
          display: block;
          margin-bottom: 1.7em; }
      #introduction .introduction-r-inner .thumbs1 img:nth-child(2) {
        transform: translateX(-15px); }
      #introduction .introduction-r-inner .thumbs2 img:nth-child(1) {
        transform: translateX(-5px); }
      #introduction .introduction-r-inner .thumbs2 img:nth-child(2) {
        transform: translateX(10px); }
      #introduction .introduction-r-inner .thumbs1,
      #introduction .introduction-r-inner .textbox {
        margin-top: 30px; }
      #introduction .introduction-r-inner .textbox {
        width: 40%; }
        #introduction .introduction-r-inner .textbox .catch2 {
          margin-bottom: 1.7em; }
        #introduction .introduction-r-inner .textbox .scroll-text {
          width: 100%;
          height: 38vh;
          padding-right: 15px;
          overflow-y: auto;
          direction: ltr;
          scrollbar-color: #d4aa70 #e4e4e4;
          scrollbar-width: thin; }
          #introduction .introduction-r-inner .textbox .scroll-text p {
            color: #FFF;
            font-size: 1.4rem;
            line-height: 1.7em; }
        #introduction .introduction-r-inner .textbox .scroll-text::-webkit-scrollbar {
          width: 7px; }
        #introduction .introduction-r-inner .textbox .scroll-text::-webkit-scrollbar-track {
          background: url("../images/common/scrollbar_track.png") repeat-y center top;
          background-size: 7px auto; }
        #introduction .introduction-r-inner .textbox .scroll-text::-webkit-scrollbar-thumb {
          border-radius: 2px;
          /*border-left: 0;
          border-right: 0;*/
          background-color: #FFF; }

#trailer-btns {
  margin: 10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap; }
  #trailer-btns li {
    width: 25%;
    box-sizing: border-box;
    padding-bottom: 10px;
    padding-right: 10px; }
    #trailer-btns li span {
      display: block;
      letter-spacing: 0.6pt;
      background: #CCC;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      color: #2a2824;
      border: solid 1px #CCC !important;
      border-radius: 30px;
      cursor: pointer; }
      #trailer-btns li span:hover {
        background: #FFF;
        border: solid 1px #FFF !important; }
      #trailer-btns li span.current {
        background: #e60038 !important;
        color: #FFF !important;
        border: solid 1px #e60038 !important;
        cursor: default !important; }
        #trailer-btns li span.current:hover {
          background: #e60038;
          border: solid 1px #e60038 !important; }

.is_loaded #introduction,
.is_loaded #story {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded .page-title {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

/*.is_loaded #introduction .introduction-l {
	-webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
	-webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}*/
.is_loaded #introduction .catch1,
.is_loaded #story .catch1 {
  -webkit-animation-name: moveLeft;
  animation-name: moveLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #story .scroll-text {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #story .catch2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .catch2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .scroll-text {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .thumbs1 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .thumbs2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .catch3 {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .catch4 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
@-webkit-keyframes scaleVerticalRight {
  from {
    transform: translateY(-40px);
    height: 0%; }
  to {
    transform: translateY(0px);
    height: 100%; } }
@-webkit-keyframes scaleLeft {
  from {
    width: 100%; }
  to {
    width: 0; } }
@keyframes scaleLeft {
  from {
    width: 100%; }
  to {
    width: 0; } }
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0; }
  to {
    transform: translateX(0px);
    opacity: 1; } }
@keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0; }
  to {
    transform: translateX(0px);
    opacity: 1; } }
@-webkit-keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
.fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.6s; }

.fadeinLeft {
  opacity: 0;
  transform: translateY(40px) translateX(-40px);
  transition: all 1.6s; }

.fadeinRight {
  opacity: 0;
  transform: translateY(40px) translateX(40px);
  transition: all 1.6s; }