@charset "utf-8";

.mask-wrap{
  display: table;
  overflow: hidden;
}
.ta_center .mask-wrap,
.ta_center_left .mask-wrap {
  margin:0 auto;
}
@media screen and (max-width:768px) {
  .ta_center_left .mask-wrap {
    margin:0 auto 0 0;
  }
}

.mask_lr_w,.mask_lr_k,.mask_lr_a,.mask_lr_b,.mask_rl_k,.mask_rl_b,.mask_rl_w {
  display: table;
  position: relative;
  overflow: hidden;
  transition:all .5s;
}
.mask_lr_w,.mask_lr_k,.mask_lr_b {
  left:-100%;
}
.mask_lr_a {
  left:-100%;
  transition:all .1s;
}
.mask_lr_w.inview,.mask_lr_k.inview,.mask_lr_a.inview,.mask_lr_b.inview {
  left:0;
}
.mask_rl_k,.mask_rl_b,.mask_rl_w {
  right:-100%;
}
.mask_rl_k.inview,.mask_rl_b.inview,.mask_rl_w.inview {
  right:0;
}

.mask-bg {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition:all .5s;
}
.mask_lr_w .mask-bg {
  background: #fff;
  left: 0;
}
.mask_lr_k .mask-bg {
  background: #000;
  left: 0;
}
.mask_lr_a .mask-bg {
  background:#F7F7F7;
  left:0;
}
.mask_lr_b .mask-bg {
  background:#02052E;
  left:0;
}
.mask_lr_w .mask-bg.inview,
.mask_lr_k .mask-bg.inview,
.mask_lr_a .mask-bg.inview,
.mask_lr_b .mask-bg.inview {
  left:100%;
}

.mask_rl_k .mask-bg {
  background:#000;
  right:0;
}
.mask_rl_b .mask-bg {
  background:#02052E;
  right:0;
}
.mask_rl_w .mask-bg {
  background:#fff;
  right:0;
}
.mask_rl_k .mask-bg.inview,
.mask_rl_b .mask-bg.inview,
.mask_rl_w .mask-bg.inview {
  right:100%;
}