@charset "UTF-8";
.contant {
  height: 500px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: -500px;
  padding: 0 60px; }

.contant-next {
  z-index: 250;
  width: 100%;
  background-color: #fff;
  height: 500px;
  position: absolute;
  bottom: -500px;
  padding: 0 60px;
  animation-name: movecontant;
  animation-duration: 500ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  -webkit-animation-name: movecontant;
  -webkit-animation-duration: 500ms;
  -webkit-animation-delay: 300ms;
  -webkit-animation-fill-mode: forwards;
  background-image: url(../img/logo-bg.png);
  background-repeat: no-repeat;
  background-position: 0 110px;
  background-size: auto; }
@media(max-width :600px) {
  .contant-next {
    padding: 0 30px; } }
@keyframes movecontant {
  0% {
    bottom: -500px; }
  100% {
    bottom: -200px; } }
.contant-next-index {
  z-index: 250;
  width: 100%;
  background-color: #fff;
  height: auto;
  position: relative;
  bottom: 200px;
  padding: 0 60px; }
@media(max-width :600px) {
  .contant-next-index {
    padding: 0 30px; } }
.about-us {
  padding-top: 100px; }
@media(max-width:600px) {
  .about-us {
    padding-top: 36px; } }
@media(max-width: 600px) {
  .about-us-main {
    flex-direction: column-reverse; } }
.about-us-logo, .gallery-logo, .plan-logo {
  width: 100%;
  text-align: left;
  height: 100px;
  padding: 10px 0; }
  .about-us-logo img, .gallery-logo img, .plan-logo img {
    height: 100%; }
@media(max-width: 600px) {
  .about-us-logo, .gallery-logo, .plan-logo {
    text-align: center; } }
.about-video {
  padding: 80px 0; }
  .about-video a {
    color: #000;
    text-decoration: none; }
  .about-video p {
    margin-bottom: 0;
    font-size: 15px;
    display: inline-block;
    margin-left: 10px; }
@media(max-width: 600px) {
  .about-video p {
    display: block;
    margin: 10px 0 0 0; } }
@media(max-width: 600px) {
  .about-video {
    text-align: center; } }
.about-contant {
  font-size: 15px; }
@media(max-width: 600px) {
  .about-contant {
    margin-top: 16px; } }
.gallery {
  margin: 50px 0 90px; }

.gallery-main {
  margin: 0; }
@media(max-width: 600px) {
  .gallery-main {
    margin: 0 -30px; } }
.gallery-logo {
  margin-bottom: 20px; }

.gallery-family, .gallery-video {
  padding: 150px 75px 0 0; }
@media(max-width: 600px) {
  .gallery-family, .gallery-video {
    padding: 40px 0; } }
  .gallery-family .photo-box, .gallery-video .photo-box {
    position: relative !important; }
    .gallery-family .photo-box:hover button, .gallery-video .photo-box:hover button {
      background-position: 0px 0px;
      color: #fff; }
    .gallery-family .photo-box img, .gallery-video .photo-box img {
      width: 100%;
      max-height: 380px; }
    .gallery-family .photo-box button, .gallery-video .photo-box button {
      padding-left: 20px;
      cursor: pointer;
      position: absolute;
      bottom: 30px;
      right: 0;
      text-align: left;
      width: 230px;
      height: 110px;
      background-color: #FFF;
      border: 0;
      font-size: 25px;
      font-weight: bold;
      color: #4a4a4a;
      background-image: url(../img/4aback.png);
      background-position: -236px 0;
      background-size: auto;
      background-repeat: no-repeat; }
@media(max-width: 600px) {
  .gallery-family .photo-box button, .gallery-video .photo-box button {
    bottom: -65px; } }
    .gallery-family .photo-box span, .gallery-video .photo-box span {
      font-size: 15px; }

.sweep-to-right {
  transition-timing-function: cubic-bezier(0.947, 0, 1, 1);
  transition-duration: 300ms;
  -webkit-transition-timing-function: cubic-bezier(0.947, 0, 1, 1);
  -webkit-transition-duration: 300ms; }

.gallery-wedding, .gallery-recording {
  padding: 0 0 150px 75px; }
@media(max-width: 600px) {
  .gallery-wedding, .gallery-recording {
    padding: 40px 0; } }
  .gallery-wedding .photo-box, .gallery-recording .photo-box {
    position: relative; }
    .gallery-wedding .photo-box:hover button, .gallery-recording .photo-box:hover button {
      background-position: 0px 0px;
      color: #fff; }
    .gallery-wedding .photo-box img, .gallery-recording .photo-box img {
      width: 100%;
      max-height: 380px; }
    .gallery-wedding .photo-box button, .gallery-recording .photo-box button {
      padding-right: 20px;
      cursor: pointer;
      position: absolute;
      bottom: 30px;
      left: 0;
      text-align: right;
      width: 230px;
      height: 110px;
      background-color: #FFF;
      border: 0;
      font-size: 25px;
      font-weight: bold;
      color: #4a4a4a;
      background-image: url(../img/4aback.png);
      background-position: -236px 0;
      background-size: auto;
      background-repeat: no-repeat; }
@media(max-width: 600px) {
  .gallery-wedding .photo-box button, .gallery-recording .photo-box button {
    bottom: -65px; } }
      .gallery-wedding .photo-box button span, .gallery-recording .photo-box button span {
        font-size: 15px; }

.gallery-video {
  padding: 150px 75px 0 0; }
@media(max-width: 600px) {
  .gallery-video {
    padding: 40px 0; } }
.gallery-recording {
  padding: 0 0 0 75px; }
@media(max-width: 600px) {
  .gallery-recording {
    padding: 40px 0; } }
.gallery-bt-all {
  position: relative;
  margin: 105px 0 0 0;
  width: 200px;
  height: 45px;
  border: 1px solid #4a4a4a;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #4a4a4a; }
@media(max-width: 600px) {
  .gallery-bt-all {
    transform: translateX(-50%);
    left: 50%;
    right: 50%; } }
.plan-logo {
  margin-bottom: 20px; }

.plan-main {
  margin: 0 -60px; }
@media(max-width: 600px) {
  .plan-main {
    margin: 0 -30px; } }
.plan a {
  text-decoration: none; }

.plan-box, .plan-box-odd {
  margin-top: 20px;
  width: 100%;
  height: 400px;
  font-size: 0; }
@media(max-width:600px) {
  .plan-box, .plan-box-odd {
    display: flex;
    height: auto;
    flex-wrap: wrap; } }
@media(max-width:600px) {
  .plan-box-odd {
    flex-direction: column-reverse; } }
.plan-img-1, .plan-img-2, .plan-img-3, .plan-img-4 {
  width: calc(100% - 290px);
  height: 400px;
  display: inline-block;
  background-image: url(../img/plan-動態.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%; }
@media(max-width:600px) {
  .plan-img-1, .plan-img-2, .plan-img-3, .plan-img-4 {
    width: 100%;
    height: auto; } }
  .plan-img-1 img, .plan-img-2 img, .plan-img-3 img, .plan-img-4 img {
    display: none; }
@media(max-width:600px) {
  .plan-img-1 img, .plan-img-2 img, .plan-img-3 img, .plan-img-4 img {
    width: 100%;
    height: auto;
    display: block; } }
.plan-img-2 {
  background-image: url(../img/plan-婚紗.jpg); }

.plan-img-3 {
  background-image: url(../img/plan-婚禮.jpg); }

.plan-img-4 {
  background-image: url(../img/plan-婚包.jpg); }

.plan-contant {
  width: 290px;
  display: inline-block;
  background-color: #fff;
  text-align: center; }
@media(max-width:600px) {
  .plan-contant {
    width: 100%;
    height: 200px; } }
  .plan-contant div {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  .plan-contant p {
    font-size: 25px;
    color: #4a4a4a;
    margin-bottom: 0; }
@media(max-width: 600px) {
  .plan-contant p {
    font-size: 17px; } }
.plan-contant-left, .plan-contant-right {
  width: 100%; }

.plan-contant-right {
  width: 100%; }

.plan-contant-left, .plan-contant-right {
  padding: 30px 0;
  font-size: 15px;
  color: #4a4a4a;
  padding-left: 80px; }
@media(max-width: 600px) {
  .plan-contant-left, .plan-contant-right {
    display: none; } }
.plan-contant-right {
  padding-left: 290px; }

.bt-all {
  width: 100%;
  text-align: center;
  padding: 60px 0; }
  .bt-all button {
    border: solid 1px #4a4a4a;
    width: 200px;
    height: 45px;
    font-size: 15px;
    color: #fff;
    cursor: pointer; }

.follow-us {
  text-align: center;
  padding: 50px 0; }

.fb-ig {
  text-align: center;
  padding: 30px 0; }
  .fb-ig a {
    padding: 0 25px;
    text-decoration: none; }
  .fb-ig i {
    font-size: 33px;
    color: #4a4a4a; }

.follow-main {
  margin-top: 30px; }
@media(max-width:600px) {
  .follow-main {
    margin-top: 15px; } }
.follow-img {
  @media(max-width:600px);
  margin-bottom: 30px; }
  .follow-img img {
    width: 100%;
    cursor: pointer;
    height: auto; }

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