@charset "UTF-8";

* {
  /* border:1px solid red; */
}

.page .pageBox {
  min-height: 100vh;
  /* align-content: center; */
}

.stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.stage .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.text p {
  margin-top: 1rem;
}

.text p span {
  display: block;
}

.C1 .pageBox {
  padding-top: 15%;
}

.C1 .title h1 {
  white-space: nowrap;
  transform: translateX(-30%);
}

.C2 {
  padding: 10% 0;
}
.C2 .pageBox {
  color: #fff;
  z-index: 10;
  align-items: flex-end;
  position: relative;
  min-height: 80vh;
  padding: 5%;
}

.bg-video-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-video-wrap video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.bg-video-wrap:after{
  content: '';
  width: 100%;  
  height: 100%;
  background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%,  rgba(0,0,0,0.9) 100%);
  background: -o-linear-gradient(right, rgba(0,0,0,0) 0%,  rgba(0,0,0,0.9) 100%);
  background: linear-gradient(to left, rgba(0,0,0,0) 0%,  rgba(0,0,0,0.9) 100%);

  position: absolute;
  top: 0;
  left: 0;
}

.C3 {
  padding-top: 5%;
  padding-bottom: 5%;
}

.C3 .innerImg {
  padding-top: 40%;
}

.CardList .item{
  padding: 10px;
}
.CardList .item .innerImg{
  padding-top: 47%;
  border: 1px solid #eee;
}
.CardList .item .innerImg .image{
background-size: contain;
background-color: transparent;
}

@media (max-width: 991px) {
  .text p span {
    display: inline;
  }

  .text p {
    text-align: justify;
  }

  .C1 {
    padding-top: 20%;
    overflow: hidden;
  }

  .C1 .stage {
    width: 150%;
  }

  .C1 .stage .layer {
    background-size: 130%;
    background-position: bottom;

  }

  .C1 .title h1 {
    transform: translateX(0%);
  }

  .C2 .pageBox {
    min-height: auto;
    padding-top: 20%;
    padding-bottom: 80%;
  }

  .C2:after {
    top: 20px;
    left: 0;
    right: 0;
    bottom: 20px;
    background-position: center right;
  }

  .text h4 {
    font-size: 1.2rem;
  }

  .C3 .innerImg {
    padding-top: 70%;
  }

}