@charset "UTF-8";




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

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}



@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}



@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

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

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}



@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}



@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root {
	--px1:0.055804vw;
	--px2:0.111607vw;
	--px3:0.167411vw;
	--px4:0.223214vw;
	--px5:0.279018vw;
	--px6:0.334821vw;
	--px7:0.390625vw;
	--px8:0.446429vw;
	--px9:0.502232vw;
	--px10:0.558036vw;
	--px11:0.613839vw;
	--px12:0.669643vw;
	--px13:0.725446vw;
	--px14:0.781250vw;
	--px15:0.837054vw;
	--px16:0.892857vw;
	--px17:0.948661vw;
	--px18:1.004464vw;
	--px19:1.060268vw;
	--px20:1.116071vw;
	--px21:1.171875vw;
	--px22:1.227679vw;
	--px23:1.283482vw;
	--px24:1.339286vw;
	--px25:1.395089vw;
	--px26:1.450893vw;
	--px27:1.506696vw;
	--px28:1.562500vw;
	--px29:1.618304vw;
	--px30:1.674107vw;
	--px31:1.729911vw;
	--px32:1.785714vw;
	--px33:1.841518vw;
	--px34:1.897321vw;
	--px35:1.953125vw;
	--px36:2.008929vw;
	--px37:2.064732vw;
	--px38:2.120536vw;
	--px39:2.176339vw;
	--px40:2.232143vw;
	--px41:2.287946vw;
	--px42:2.343750vw;
	--px43:2.399554vw;
	--px44:2.455357vw;
	--px45:2.511161vw;
	--px46:2.566964vw;
	--px47:2.622768vw;
	--px48:2.678571vw;
	--px49:2.734375vw;
	--px50:2.790179vw;
	--px51:2.845982vw;
	--px52:2.901786vw;
	--px53:2.957589vw;
	--px54:3.013393vw;
	--px55:3.069196vw;
	--px56:3.125000vw;
	--px57:3.180804vw;
	--px58:3.236607vw;
	--px59:3.292411vw;
	--px60:3.348214vw;
	--px61:3.404018vw;
	--px62:3.459821vw;
	--px63:3.515625vw;
	--px64:3.571429vw;
	--px65:3.627232vw;
	--px66:3.683036vw;
	--px67:3.738839vw;
	--px68:3.794643vw;
	--px69:3.850446vw;
	--px70:3.906250vw;
	--px71:3.962054vw;
	--px72:4.017857vw;
	--px73:4.073661vw;
	--px74:4.129464vw;
	--px75:4.185268vw;
	--px76:4.241071vw;
	--px77:4.296875vw;
	--px78:4.352679vw;
	--px79:4.408482vw;
	--px80:4.464286vw;
	--px81:4.520089vw;
	--px82:4.575893vw;
	--px83:4.631696vw;
	--px84:4.687500vw;
	--px85:4.743304vw;
	--px86:4.799107vw;
	--px87:4.854911vw;
	--px88:4.910714vw;
	--px89:4.966518vw;
	--px90:5.022321vw;
	--px91:5.078125vw;
	--px92:5.133929vw;
	--px93:5.189732vw;
	--px94:5.245536vw;
	--px95:5.301339vw;
	--px96:5.357143vw;
	--px97:5.412946vw;
	--px98:5.468750vw;
	--px99:5.524554vw;
	--px100:5.580357vw;
	
	--basefz:16;
	
	--fz12: calc((12*0.75)/var(--basefz) * 1rem);
	--fz14: calc((14*0.75)/var(--basefz) * 1rem);
	--fz16: calc((16*0.75)/var(--basefz) * 1rem);
	--fz18: calc((18*0.75)/var(--basefz) * 1rem);
	--fz20: calc((20*0.75)/var(--basefz) * 1rem);
	--fz21: calc((21*0.75)/var(--basefz) * 1rem);
	--fz22: calc((22*0.75)/var(--basefz) * 1rem);
	--fz23: calc((23*0.75)/var(--basefz) * 1rem);
	--fz24: calc((24*0.75)/var(--basefz) * 1rem);
	--fz25: calc((25*0.75)/var(--basefz) * 1rem);
	--fz26: calc((26*0.75)/var(--basefz) * 1rem);
	--fz28: calc((28*0.75)/var(--basefz) * 1rem);
	--fz30: calc((30*0.75)/var(--basefz) * 1rem);
	--fz32: calc((32*0.75)/var(--basefz) * 1rem);
	--fz35: calc((35*0.75)/var(--basefz) * 1rem);
	--fz37: calc((37*0.75)/var(--basefz) * 1rem);
	--fz40: calc((40*0.75)/var(--basefz) * 1rem);
	--fz56: calc((56*0.75)/var(--basefz) * 1rem);
	--fz80: calc((80*0.75)/var(--basefz) * 1rem);
	
}

@font-face {
    font-family: 'LINESeedTW';
    src: url('../LINESeedTW_ver02/WOFF2/LINESeedTW_OTF_Th.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}


@font-face {
    font-family: 'LINESeedTW';
    src: url('../LINESeedTW_ver02/WOFF2/LINESeedTW_OTF_Rg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'LINESeedTW';
    src: url('../LINESeedTW_ver02/WOFF2/LINESeedTW_OTF_Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: 'LINESeedTW';
    src: url('../LINESeedTW_ver02/WOFF2/LINESeedTW_OTF_Eb.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

body {
    font-family: 'LINESeedTW', sans-serif;
    font-weight: 400;
    
}
section{
	padding: 80px 0px;
}
hr{
	background-color: #555;
	opacity: .7;
}
img{
	vertical-align: middle;
	width: 100%;
}
.pic{
	position: relative;
}
.img_txt{
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 99;
	color: #fff;
	font-size: 12px;
	text-shadow: 1px 1px 2px #333;
}
.box{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}


.slick-slide {
    
}

.slick-list {
    
}
.slick-dotted.slick-slider {
    margin-bottom: 0px;
}
.slick-dots {
	bottom: 20px;
}
.slick-dots li button:before{
	font-size: 14px;
	color: #fff;
	opacity: 1;
}
.slick-dots li.slick-active button:before{
	color: #604c3f;
	opacity: 1;
}
.slick-one .img{
	position: relative;
}


h1{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
h2{
    font-size: var(--fz56);
    font-weight: 700;
    line-height: 1.5;
    
}
h3{
    font-size: var(--fz40);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}
h4{
    font-size: var(--fz30);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}
p{
    font-size: var(--fz22);
    font-weight: 400;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-ideograph;
    letter-spacing: .1em;
}

.menu_mobile{
	justify-content: space-between;
    position: sticky;
    bottom: -2px;
    z-index: 999;
    width: 100%;
    text-align: center;
	background-color: #000;
    z-index: 99999;
    border-top:0px solid #fff; 
}
.menu_mobile a{
    text-decoration: none;
    color: #B5B5B6;
    font-size: 12px;
    font-weight: 500 !important;
	display: block;
	width: 100%;
	padding: 10px 0;
}
.menu_mobile a + a{
	border-left: 1px solid #595757;
}
.menu_mobile i{
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
}
.menu_mobile{
	display: none;
}

header .menu-toggle,
header .menu-close{
	display: none;
}
header{
	position: sticky;
	z-index: 16;
	width: 100%;
	padding: 20px 2%;
	top: 0;
	background-color: rgba(255, 255, 255, .5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0px solid rgba(204, 204, 204, 0.5);
	backdrop-filter: blur(15px);
  	-webkit-backdrop-filter: blur(15px); 
}
header .logo{
	width: 200px;
}
header nav{
	display: flex;
	align-items: center;
	gap: 40px;
}
header nav a.disable{
	color: #999999;
}
header nav a{
	color: #000;
	font-size: var(--fz21);
	font-weight: 700;
	text-decoration: none;
}
header nav a:hover{
	color: #217FBA;
}
header nav .social-icon{
	display: flex;
	align-items: center;
	gap: 10px;
}
header nav .social-icon i{
	color: #999999;
	font-size: var(--fz32);
}
header nav .social-icon a:hover i{
	color: #217FBA;
}


body.index .kv{
	padding: 0;
}


body.index .title{
	position: relative;
}
body.index .title:after{
	content: '';
	position: absolute;
	top: 0%;
	left: 0%;
	transform: translate(-130%,18%);
	width: var(--fz56);
	height: var(--fz56);
	background-image: url(../img/six.svg);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 3px 5px rgba(33, 127, 186, 0.3)); 
}
body.index .title .arrow-wrapper {
  
  display: inline-block; 
  
  filter: drop-shadow(2px 3px 5px rgba(33, 127, 186, 0.3)); 
  margin-top: 10px;
}

body.index .title .arrow-banner {
  display: inline-block; 
  background-color: #217FBA; 
  color: #ffffff;
  padding: 5px 30px 5px 20px; 
  
  
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}
body.index .title .arrow-banner h3{
	font-size: var(--fz28);
}
body.index .title .arrow-banner h3 a{
	text-decoration: none;
	color: #fff;
}


body.index .s1{
	background-color: #fcfcfc;
}
body.index .overlay {
	display: none; 
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3); 
	backdrop-filter: blur(15px);
	justify-content: center;
	align-items: center;
}
body.index .overlay.active {
 	display: flex;
}
body.index .overlay .hexagon{
	
	width: 90%;
	max-width: 700px; 

	background-image: url(../img/hexagon.svg?v1);
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio: 1000 / 653;

	
	display: none;
	justify-content: center;
	align-items: center;
	padding: 10px; 
	margin: 0 auto;
	position: relative;
}

body.index .overlay .hexagon .text-content{
	width: 85%;
	letter-spacing: .1em;
}
body.index .overlay .hexagon .text-content .t{
	font-size: var(--fz26);
	font-weight: 700;
	color: #ffffcc;
}
body.index .overlay .hexagon .text-content .c1,
body.index .overlay .hexagon .text-content .c2{
	font-size: var(--fz20);
	color: #fff;
	margin-top: 30px;
	font-weight: 700;
}
body.index .overlay .hexagon .text-content .c2{
	font-size: var(--fz26);
	color: #ffffcc;
	text-align: center;
	position: relative;
}
body.index .overlay .hexagon .text-content .c2:before{
	display: block;
	text-align: center;
	font-size: var(--fz26);
	color: #ffffcc;
	width: fit-content;
	margin: 0 auto;
	margin-bottom: 3%;
	background-color: #217fba;
	position: relative;
	z-index: 2;
	padding: 0 10px;
}
body.index .overlay .hexagon.hexagon1 .text-content .c2:before{
	content: '經驗累積的系統化管理';
}
body.index .overlay .hexagon.hexagon2 .text-content .c2:before{
	content: 'AIO服務';
}
body.index .overlay .hexagon .text-content .c2:after{
	content: '';
	width: 100%;
	height: 1px;
	background-color: #ffffcc;
	position: absolute;
	top: 13%;
	left: 0;
}
body.index .overlay .hexagon.hexagon3 .text-content .c2:after,
body.index .overlay .hexagon.hexagon4 .text-content .c2:after,
body.index .overlay .hexagon.hexagon5 .text-content .c2:after{
	height: 0px;
	width: 0;
}
body.index .overlay .hexagon .text-content .c1{
	font-weight: 400;
	line-height: 1.5;
}

body.index .kv .m{
	display: none;
}
body.index .s1 .box{
	
}
body.index .s1 .items{
	width: 80%;
	margin: 0 auto;
	position: relative;
}
body.index .s1 .items.m{
	display: none;
}
body.index .s1 .items .item{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
body.index .s1 .items .item > div{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.3));
	transform: translateY(0) scale(1);
	transform-origin: center center;
}
body.index .s1 .items .item > div:nth-child(1){
	animation: shadow-s1-item 3s .5s ease-in-out infinite;
}
body.index .s1 .items .item > div:nth-child(2){
	animation: shadow-s1-item 3s .7s ease-in-out infinite;
}
body.index .s1 .items .item > div:nth-child(3){
	animation: shadow-s1-item 3s .9s ease-in-out infinite;
}
body.index .s1 .items .item > div:nth-child(4){
	animation: shadow-s1-item 3s 1.1s ease-in-out infinite;
}
body.index .s1 .items .item > div:nth-child(5){
	animation: shadow-s1-item 3s 1.2s ease-in-out infinite;
}
@keyframes shadow-s1-item {
	0%, 100% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.3));
	}

	45% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, 0.6));
	}

	55% {
		transform: translateY(2px) scale(0.99);
		filter: drop-shadow(1px 1px 8px rgba(0, 0, 0, 0.25));
	}

	65% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(2px 3px 8px rgba(0, 0, 0, 0.45));
	}
}
body.index .s1 .click-items{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
body.index .s1 .click-item{
	cursor: pointer;
}


body.index .s2 .vs{
	display: flex;
	align-items: center;
	gap: 5%;
	margin-top: 5%;
}
body.index .s2 .vs .m{
	display: none;
}
body.index .s2 .vs .pic:nth-child(1){
	width: 47.27%;
}
body.index .s2 .vs .pic:nth-child(2){
	width: 52.73%;
	color: #217FBA;
}
body.index .s2 .vs .pic p{
	font-size: var(--fz35);
	font-weight: 700;
	text-align: center;
	position: absolute;
	top: 0;
	width: 100%;
}
body.index .s2 .say-block{
	position: relative;
	filter: drop-shadow(1px 1px 8px rgba(33, 127, 186, 0.6)); 
}
body.index .s2 .say-block:after{
	content: '';
	width: 24px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: 40px;
	right: 25%;
}
body.index .s2 .say-block .triangle{
	width: 0;
	height: 0;
	border-left: 12px solid transparent;  
	border-right: 12px solid transparent; 
	border-bottom: 40px solid #fff;  
	margin-left: auto;
	margin-right: 25%;
}
body.index .s2 .say-block .say{
	border: 1px solid #BFDAE8;
	border-radius: 20px;
	padding: 1%;
	background-color: #fff;
}
body.index .s2 .say-block .say p{
	font-size: var(--fz37);
	font-weight: 700;
	text-align: center;
}
body.index .s2 .items{
	display: flex;
	gap: 5%;
	margin-top: 5%;
}
body.index .s2 .items .item{
	width: 100%;
	text-align: center;
	padding: 5% 0;
	border: 1px solid #DCECF4;
	background-color: #fff;
	border-radius: 15px;
	filter: drop-shadow(1px 1px 8px rgba(33, 127, 186, 0.6)); 
	animation: shadow-breath 3s ease-in-out infinite;
}
@keyframes shadow-breath {
	0%, 100% {
		filter: drop-shadow(1px 1px 6px rgba(33, 127, 186, 0.4));
	}
	50% {
		filter: drop-shadow(1px 1px 12px rgba(33, 127, 186, 0.8));
	}
}
body.index .s2 .items .item .pic{
	margin-top: 5%;
	margin-bottom: 5%;
}
body.index .s2 .items .item p{
	text-align: center;
}
body.index .s2 .items .item h3{
	font-size: var(--fz40);
	color: #217FBA;
}
body.index .s2 .items .item h4{
	font-size: var(--fz30);
}
body.index .s2 .items .item > h4{
	font-weight: 400;
}
body.index .s2 .items .item .txt{
	padding: 0 10%;
}
body.index .s2 .items .item .txt + .txt{
	margin-top: 3%;
}
body.index .s2 .items .item .txt h4{
	color: #217FBA;
	margin-bottom: 10px;
}
body.index .s2 .items .item .txt p span{
	font-weight: 700;
}
body.index .s2 .items .item .click-btn{
	font-size: var(--fz30);
	font-weight: 700;
	text-align: center;
	background-color: #217FBA;
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	margin: 0 auto;
	margin-top: 10%;
	padding: 3% 10%;
	filter: drop-shadow(1px 1px 8px rgba(33, 127, 186, 0.6)); 
	cursor: pointer;
	transition: all .3s;
	text-decoration: none;
}
body.index .s2 .items .item:nth-child(2){
	border: 1px solid #B3F4ED;
	filter: drop-shadow(1px 1px 8px rgba(40, 163, 154, 0.6)); 
}
body.index .s2 .items .item:nth-child(2) h3{
	color: #28A39A;
}
body.index .s2 .items .item:nth-child(2) .txt h4{
	color: #28A39A;
}
body.index .s2 .items .item:nth-child(2) .click-btn{
	background-color: #28A39A;
	filter: drop-shadow(1px 1px 8px rgba(40, 163, 154, 0.6)); 
}
body.index .s2 .items .item .click-btn:hover{
	filter: drop-shadow(0px 0px 0px rgba(33, 127, 186, 0)); 
}

body.index .s3{
	padding-top: 5%;
	padding-bottom: 0;
	background-color: #F3F3F3;
}
body.index .s3 .title .arrow-banner h3 span:before{
	content: '，';
}
body.index .s3 .title .arrow-banner h3 span:after{
	content: '。';
}
body.index .s3 .items-358{
	margin-top: 5%;
	display: flex;
	gap: 10%;
}
body.index .s3 .items-358 .item{
	width: 100%;
	text-decoration: none;
}
body.index .s3 .items-358 .item .pic{
	filter: drop-shadow(1px 1px 8px rgba(19, 84, 113, 0.6)); 
	transition: all .3s;
}
body.index .s3 .items-358 .item:hover .pic{
	filter: drop-shadow(0px 0px 0px rgba(19, 84, 113, 0)); 
}
body.index .s3 .items-358 h3{
	color: #217FBA;
	margin: 10% 0 5% 0;
}
body.index .s3 .items-358 h3 sup{
	font-size: var(--fz20);
	display: inline-block;
	transform: translateY(-10px);
}
body.index .s3 .items-358 p{
	font-size: var(--fz32);
	font-weight: 700;
	line-height: 1.4;
	color: #000;
}

body.index .s3 .marquee{
	margin-top: 5%;
	overflow: hidden;
	width: 100%;
}
body.index .s3 .marquee .marquee-track{
	display: flex;
	width: max-content;
	animation: indexMarquee 60s linear infinite;
	will-change: transform;
}
body.index .s3 .marquee .marquee-group{
	display: flex;
	flex-shrink: 0;
}
body.index .s3 .marquee .pic{
	flex: 0 0 auto;
	width: 25vw; 
	padding: 0;
	box-sizing: border-box;
}
body.index .s3 .marquee .pic img{
	display: block;
	width: 100%;
	height: auto;
}
@keyframes indexMarquee{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-50%); 
	}
}
@media (prefers-reduced-motion: reduce){
	body.index .s3 .marquee .marquee-track{
		animation: none;
	}
}

body.index .s4{
	background-color: #333333;
}
body.index .s4 .title h2{
	color: #fff;
}
body.index .s4 .items{
	display: flex;
	gap: 3%;
	margin-top: 5%;
}
body.index .s4 .items .item{
	width: 100%;
}
body.index .s4 .items .item h3{
	font-size: var(--fz32);
	font-weight: 400;
	color: #fff;
	margin-top: 5%;
	border-bottom: 1px solid #fff;
	padding-bottom: 15px;
	display: inline-block;
}
body.index .s4 .items .item h3:after{
	content: '⭢';
	color: #fff;
	display: inline-block;
	margin-left: 60px;
	transition: all .3s;
}
body.index .s4 .items .item:hover h3:after{
	margin-left: 70px;
}

body.index .s4 .items .item .pic{
	overflow: hidden;
}

body.index .s4 .items .item .pic img{
	display: block;
	width: 100%;
	transition: transform .4s ease;
}

body.index .s4 .items .item:hover .pic img{
	transform: scale(1.03);
}

body.index .s5{
	padding: 0;
	position: relative;
}
body.index .s5 .m{
	display: none;
}
body.index .s5 .btn-contact{
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	background-color: #fff;
	padding: 10px 20px;
	transition: all .3s;
}
body.index .s5 .btn-contact h2{
	font-size: var(--fz32);
	width: 220px;
	position: relative;
}
body.index .s5 .btn-contact h2 a{
	text-decoration: none;
	color: #000;
}
body.index .s5 .btn-contact h2:after{
	content: '⭢';
	color: #000;
	position: absolute;
	right: 0;
	border-left: 1px solid #000;
	padding-left: 20px;
}
body.index .s5 .btn-contact:hover{
	background-color: #333;
}
body.index .s5 .btn-contact:hover h2 a{
	color: #fff;
}
body.index .s5 .btn-contact:hover h2:after{
	color: #fff;
	border-left: 1px solid #fff;
}


body.about .tab-nav{
	margin-top: 7%;
}
body.about .items{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.about .items .item{
	position: relative;
	font-size: var(--fz24);
	font-weight: 600;
	width: 25%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	padding: 20px;
	text-align: center;
	color: #999;
	cursor: pointer;
	transition: color .3s;
}
body.about .items .item:hover{
	color: #217fba;
}
body.about .items .item.active,
body.about .items .item.active:hover{
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 0px solid #000;
	color: #000;
	background-image: url(../img/bg.jpg);
	font-weight: 600;
}
body.about .items .item:nth-child(1).active{
	border-left: 0px;
}
body.about .items .item:nth-child(4).active{
	border-right: 0px;
}


body.about .items .item:nth-child(1).active::before{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.about .items .item:nth-child(4).active::after{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.about .items .item:nth-child(1):not(.active)::before{
	content: "";
	position: absolute;
	bottom: -1px;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.about .items .item:nth-child(4):not(.active)::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.about section{
	background-image: url(../img/bg.jpg);
	display: none;
	padding-top: 7%;
	
}
body.about section.active{
	display: block;
}
body.about > .box{
	
}
body.about .con{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
body.about .con h2{
	font-size: var(--fz40);
	font-weight: 700;
	color: #217fba;
	margin-bottom: 5%;
}
body.about .con .text p{
	font-size: var(--fz20);
	font-weight: 400;
}
body.about .con .text p + p{
	margin-top: 15px;
}

body.about .s1 .con{
	display: flex;
	
	gap: 5%;
}
body.about .s1 .con .text{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.about .s1 .con .image{
	width: 50%;
}

body.about .s2 .con .ch + .ch{
	border-top: 1px solid #ccc;
	margin-top: 5%;
	padding-top: 5%;
}
body.about .s2 .con .ch:nth-child(1){
	display: flex;
	
	gap: 5%;
}
body.about .s2 .con .ch:nth-child(1) .text{
	width: 55%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.about .s2 .con .ch:nth-child(1) .image{
	width: 45%;
}
body.about .s2 .con .ch:nth-child(1) .text p + p{
	margin-top: 15px;
}
body.about .s2 .con .ch:nth-child(2){
	display: flex;
	align-items: flex-end;
	flex-direction: row-reverse;
	gap: 5%;
}
body.about .s2 .con .ch:nth-child(2) .text{
	width: 60%;
}
body.about .s2 .con .ch:nth-child(2) .image{
	width: 40%;
}
body.about .s2 .con .ch:nth-child(2) .text .t{
	font-size: var(--fz24);
	font-weight: 700;
}
body.about .s2 .con .ch:nth-child(2) .text .t img{
	width: 130px;
}
body.about .s2 .con .ch:nth-child(2) .text .st{
	display: flex;
	gap: 5%;
}
body.about .s2 .con .ch:nth-child(2) .text .st p{
	margin-top: 0;
}
body.about .s2 .con .ch:nth-child(3) .swipe-hint{
	display: none;
}
body.about .s2 .con .ch:nth-child(3) .year-timeline{
	position: relative;
}
body.about .s2 .con .ch:nth-child(3) .year-timeline .pic img:not(:first-child){
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	filter: saturate(0%) brightness(0%);
}
body.about .s2 .con .ch:nth-child(3) .year-timeline .pic img.active{
	filter: saturate(100%) brightness(100%);
}
body.about .s2 .con .ch:nth-child(3) .year-timeline .click-block{
	position: absolute;
	z-index: 3;
	width: 100%;
	top: 0;
	left: 0;
}

body.about .s2 .con .ch:nth-child(4){
	display: flex;
	align-items: flex-end;
	gap: 5%;
}
body.about .s2 .con .ch:nth-child(4) .text{
	width: 60%;
}
body.about .s2 .con .ch:nth-child(4) .text h2{
	margin-bottom: 20%;
}
body.about .s2 .con .ch:nth-child(4) .image{
	width: 40%;
}
body.about .s2 .con .ch:nth-child(4) .text .t{
	font-size: var(--fz24);
	font-weight: 700;
}

body.about .s3 .con{
	display: flex;
	
	gap: 5%;
}
body.about .s3 .con .text{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.about .s3 .con .image{
	width: 50%;
}
body.about .s3 .con .text .item + .item{
	margin-top: 20px;
}
body.about .s3 .con .text .item{
	display: flex;
	align-items: center;
	gap: 15px;
}
body.about .s3 .con .text .item .t{
	font-size: var(--fz40);
	font-weight: 700;
	white-space: nowrap;
}

body.about .s4 .con{
	display: flex;
	gap: 3%;
}
body.about .s4 .con .item{
	width: 100%;
}
body.about .s4 .con .item h2{
	text-align: center;
}
body.about .s4 .con .item h2 span{
	display: block;
	font-weight: 400;
}
body.about .s4 .con .item .pic{
	margin: 5% 0;
}


body.news .tab-nav{
	margin-top: 7%;
}
body.news .items{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.news .items .item{
	position: relative;
	font-size: var(--fz24);
	font-weight: 400;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	padding: 20px;
	text-align: center;
	color: #999;
	font-weight: 600;
	cursor: pointer;
	transition: color .3s;
}
body.news .items .item:hover{
	color: #217fba;
}
body.news .items .item.active,
body.news .items .item.active:hover{
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 0px solid #000;
	color: #000;
	background-image: url(../img/bg.jpg);
	font-weight: 600;
}
body.news .items .item:nth-child(1).active{
	border-left: 0px;
}
body.news .items .item:nth-child(3).active{
	border-right: 0px;
}


body.news .items .item:nth-child(1).active::before{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.news .items .item:nth-child(3).active::after{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.news .items .item:nth-child(1):not(.active)::before{
	content: "";
	position: absolute;
	bottom: -1px;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.news .items .item:nth-child(3):not(.active)::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}



body.news section{
	background-image: url(../img/bg.jpg);
	display: none;
	padding-top: 7%;
	
}
body.news section.active{
	display: block;
}
body.news > .box{
	
}
body.news .con{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
body.news .con h2{
	font-size: var(--fz40);
	font-weight: 700;
	color: #217fba;
	margin-bottom: 5%;
}
body.news .con .text p{
	font-size: var(--fz20);
	font-weight: 400;
}
body.news .con .text p + p{
	margin-top: 15px;
}

body.news .s1 .con p + p{
	border-top: 1px solid #333;
	margin-top: 20px;
	padding-top: 20px;
}
body.news .s1 .con p{
	position: relative;
	transition: all .3s;
}
body.news .s1 .con p:after{
	content: '⭢';
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	font-size: var(--fz24);
	transition: all .3s;
}
body.news .s1 .con p:hover:after{
	right: 0px;
}
body.news .s1 .con p a{
	color: #000;
	text-decoration: none;
	transition: all .3s;
}
body.news .s1 .con p:hover a{
	color: #217fba;
}

body.news .s2 .con .awards{
	display: flex;
	gap: 5%;
}
body.news .s2 .con .awards h2{
	white-space: nowrap;
	font-size: var(--fz24);
	font-weight: 700;
	color: #000;
}
body.news .s2 .con .awards .news-items{
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
	width: 100%;
}
body.news .s2 .con .awards .news-items .item{
	width: calc(33.333333% - 2%);
}
body.news .s2 .con .awards .news-items .item p{
	font-size: var(--fz24);
	font-weight: 700;
	margin-top: 15px;
}
body.news .s2 .con .awards + .awards{
	margin-top: 5%;
	padding-top: 5%;
	border-top: 1px solid #333;
}

body.news .s3 .con .title{
	display: flex;
	align-items: center;
	gap: 3%;
	margin-bottom: 5%;
}
body.news .s3 .con .title h2{
	font-size: var(--fz40);
	font-weight: 700;
	white-space: nowrap;
	margin-bottom: 0;
}
body.news .s3 .con .title p{
	font-size: var(--fz20);
	font-weight: 400;
}
body.news .s3 .con .posts{
	width: 100%;
	display: flex;
	gap: 3%;
	flex-wrap: wrap;
}
body.news .s3 .con .posts .post{
	width: calc(50% - 1.5%);
}
body.news .s3 .con .posts .post .pic{
	margin-bottom: 15px;
}
body.news .s3 .con .posts .post p{
	font-size: var(--fz20);
	font-weight: 400;
}



body.product .tab-nav{
	margin-top: 7%;
}
body.product .items{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.product .items .item{
	position: relative;
	font-size: var(--fz24);
	font-weight: 600;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	padding: 20px;
	text-align: center;
	color: #999;
	cursor: pointer;
	transition: color .3s;
}
body.product .items .item:hover{
	color: #217fba;
}
body.product .items .item.active,
body.product .items .item.active:hover{
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 0px solid #000;
	color: #000;
	background-image: url(../img/bg.jpg);
	font-weight: 600;
}
body.product .items .item:nth-child(1).active{
	border-left: 0px;
}
body.product .items .item:nth-child(3).active{
	border-right: 0px;
}


body.product .items .item:nth-child(1).active::before{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.product .items .item:nth-child(3).active::after{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.product .items .item:nth-child(1):not(.active)::before{
	content: "";
	position: absolute;
	bottom: -1px;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.product .items .item:nth-child(3):not(.active)::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}


body.product section{
	background-image: url(../img/bg.jpg);
	display: none;
	padding-top: 7%;
	
}
body.product section.active{
	display: block;
}
body.product > .box{
	
}
body.product .con{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
body.product .con h2{
	font-size: var(--fz40);
	font-weight: 700;
	color: #217fba;
	margin-bottom: 5%;
}
body.product .con .text p{
	font-size: var(--fz20);
	font-weight: 400;
}
body.product .con .text p + p{
	margin-top: 15px;
}

body.product .s1 .con{
	width: 80%;
	margin: 0 auto;
}
body.product .s1 .con .text h2{
	font-size: var(--fz40);
}
body.product .s1 .con .text h3{
	font-size: var(--fz32);
	margin-bottom: 15px;
}
body.product .s1 .con .vs-block{
	position: relative;
	margin-top: 5%;
}
body.product .s1 .con .vs-block .vs{
	display: flex;
	gap: 5%;
	mix-blend-mode: multiply;
}
body.product .s1 .con .vs-block .txt{
	font-size: var(--fz56);
	font-weight: 700;
	color: #217fba;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
body.product .s1 .con .vs-block .vs .pic:nth-child(1){
	width: 49.68549172%;
}
body.product .s1 .con .vs-block .vs .pic:nth-child(2){
	width: calc(100% - 48.68549172%);
}
body.product .s1 .con .vs-block .vs .pic h3{
	text-align: center;
	color: #217fba;
}
body.product .s1 .con .vs-block .vs .pic:nth-child(1) h3{
	font-weight: 400;
	color: #000;
}
body.product .s1 .vs-text .compare-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
	box-sizing: border-box;
}
body.product .s1 .vs-text .compare-row:nth-child(odd) {
	background: #fff;
}
body.product .s1 .vs-text .compare-left,
body.product .s1 .vs-text .compare-right {
	flex: 1 1 0;
	min-width: 0;
	line-height: 1.4;
	font-size: var(--fz24);
	font-weight: 400;
}
body.product .s1 .vs-text .compare-left {
	text-align: right;
}
body.product .s1 .vs-text .compare-title {
  flex: 0 0 180px;
  text-align: center;
  color: #217fba;
  white-space: nowrap;
  font-size: var(--fz25);
  font-weight: 700;
}
body.product .s1 .vs-text .compare-right {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 12px;
}
body.product .s1 .vs-text .compare-right span:first-child {
 	min-width: 0;
}
body.product .s1 .vs-text .compare-right .win {
	width: 30px;
	height: 30px;
	border: 1px solid #1681bd;
	border-radius: 50%;
	color: #1681bd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-22deg);
	flex: 0 0 auto;
	font-size: var(--fz16);
	font-weight: 800;
}

body.product .s2 .con > h2{
	text-align: center;
	margin-bottom: 1%;
}
body.product .s2 .con > h3{
	font-size: var(--fz32);
	font-weight: 700;
	text-align: center;
}
body.product .s2 .aio-block{
	display: flex;
	gap: 3%;
	margin-top: 5%;
}
body.product .s2 .aio-block .aio{
	width: 100%;
	border-radius: 20px;
	padding: 5%;
	background-color: #fff;
	box-shadow: 1px 1px 12px #999;
}
body.product .s2 .aio-block .aio:nth-child(1){
	border: 1px solid #217fba;
}
body.product .s2 .aio-block .aio:nth-child(2){
	border: 1px solid #28a39a;
}
body.product .s2 .aio-block .aio h2{
	text-align: center;
	margin-bottom: 1%;
}
body.product .s2 .aio-block .aio:nth-child(2) h2{
	color: #28a39a;
}
body.product .s2 .aio-block .aio h3{
	font-size: var(--fz30);
	font-weight: 400;
	text-align: center;
	margin-bottom: 5%;
}
body.product .s2 .aio-block .aio .txt{
	font-size: var(--fz22);
	font-weight: 400;
	border-top: 1px solid #999;
	margin-top: 8%;
	padding-top: 8%;
	border-bottom: 1px solid #999;
	margin-bottom: 8%;
	padding-bottom: 8%;
}
body.product .s2 .aio-block .aio .txt .r + .r{
	margin-top: 15px;
}
body.product .s2 .aio-block .aio .txt .r{
	display: flex;
	gap: 15px;
}
body.product .s2 .aio-block .aio .txt .r .t{
	color: #217fba;
	font-weight: 700;
	white-space: nowrap;
}
body.product .s2 .aio-block .aio:nth-child(2) .txt .r .t{
	color: #28a39a;
}
body.product .s2 .aio-block .aio .txt .r .c span{
	font-weight: 700;
}
body.product .s2 .aio-block .aio .txt .r .c span.blue{
	color: #217fba;
}
body.product .s2 .aio-block .aio .txt .r .c span.green{
	color: #28a39a;
}
body.product .s2 .aio-block .aio .icons{
	margin-top: 5%;
}
body.product .s2 .aio-block .aio .icons .icon p{
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
}
body.product .s2 .aio-block .aio .icons .icon .pic + .pic{
	margin-top: 10px;
}
body.product .s2 .aio-block .aio .icons .icon + .icon{
	margin-top: 8%;
}


body.product .s3 .con > h2{
	text-align: center;
	margin-bottom: 1%;
}
body.product .s3 .con > h3{
	font-size: var(--fz32);
	font-weight: 700;
	text-align: center;
}
body.product .s3 .applicable-block{
	display: flex;
	gap: 3%;
	margin-top: 5%;
}
body.product .s3 .applicable-block .applicable{
	border-radius: 20px;
	padding: 3%;
	background-color: #fff;
	box-shadow: 1px 1px 12px #999;
}
body.product .s3 .applicable-block .applicable:nth-child(1){
	width: 65%;
	border: 1px solid #217fba;
}
body.product .s3 .applicable-block .applicable:nth-child(2){
	width: 35%;
	border: 1px solid #28a39a;
}
body.product .s3 .applicable-block .applicable h2{
	text-align: center;
	margin-bottom: 1%;
}
body.product .s3 .applicable-block .applicable:nth-child(2) h2{
	color: #28a39a;
}
body.product .s3 .applicable-block .applicable h3{
	font-size: var(--fz30);
	font-weight: 400;
	text-align: center;
	margin-bottom: 30px;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table {
	display: grid;
	grid-template-columns: 56px repeat(3, 1fr);
}
body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div {
	box-sizing: border-box;
	padding: 20px;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div:nth-child(n + 5) {
 	border-top: 1px solid #000;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div:not(:nth-child(4n + 1)) {
	border-left: 1px solid #000;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .title {
	text-align: center;
	font-size: var(--fz25);
	font-weight: 700;
	color: #217fba;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .row-title {
  	writing-mode: vertical-rl;
  	text-orientation: upright;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: var(--fz25);
	font-weight: 700;
	color: #217fba;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content ul {
 	margin: 0;
 	
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content li{
	text-align: center;
	font-size: var(--fz20);
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content li + li {
 	margin-top: 12px;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content p {
 	margin: 0;
 	font-size: var(--fz20);
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content p:nth-child(1){
	font-weight: 700;
}
body.product .s3 .applicable-block .applicable:nth-child(1) .content p + p {
 	margin-top: 16px;
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone .t{
	font-size: var(--fz25);
	font-weight: 700;
	color: #28a39a;
	text-align: center;
	margin-bottom: 3%;
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c-m{
	display: none;
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone .c p{
	font-size: var(--fz20);
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c p + p{
	margin-top: 8px;
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone1 .c.flex{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
body.product .s3 .applicable-block .applicable:nth-child(2) .allinone + .allinone{
	margin-top: 20%;
}


body.exclusive .tab-nav{
	margin-top: 7%;
}
body.exclusive .title{
	display: flex;
	align-items: center;
	gap: 20px;
	width: 80%;
	margin: 0 auto;
	margin-top: 7%;
}
body.exclusive .title .pic{
	width: 24%;
}
body.exclusive .title .text{
	width: 90%;
}
body.exclusive .title .text h2{
	font-size: var(--fz32);
	font-weight: 700;
}
body.exclusive .items{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.exclusive .items .item{
	position: relative;
	font-size: var(--fz24);
	font-weight: 600;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	padding: 20px;
	text-align: center;
	color: #999;
	cursor: pointer;
	transition: color .3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
body.exclusive .items .item:hover{
	color: #217fba;
}
body.exclusive .items .item sup{
	font-size: var(--fz16);
	transform: translateY(-5px);
	display: inline-block;
}

body.exclusive .items .item.active,
body.exclusive .items .item.active:hover{
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 0px solid #000;
	color: #000;
	background-image: url(../img/bg.jpg);
	font-weight: 600;
}
body.exclusive .items .item:nth-child(1).active{
	border-left: 0px;
}
body.exclusive .items .item:nth-child(3).active{
	border-right: 0px;
}


body.exclusive .items .item:nth-child(1).active::before{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.exclusive .items .item:nth-child(3).active::after{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.exclusive .items .item:nth-child(1):not(.active)::before{
	content: "";
	position: absolute;
	bottom: -1px;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.exclusive .items .item:nth-child(3):not(.active)::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.exclusive section{
	background-image: url(../img/bg.jpg);
	display: none;
	padding-top: 7%;
	
}
body.exclusive section.active{
	display: block;
}
body.exclusive > .box{
	
}
body.exclusive .con{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
body.exclusive .con h2{
	font-size: var(--fz40);
	font-weight: 700;
	color: #217fba;
	margin-bottom: 5%;
}
body.exclusive .con .text p{
	font-size: var(--fz20);
	font-weight: 400;
}
body.exclusive .con .text p + p{
	margin-top: 15px;
}

body.exclusive .s1 h2{
	color: #28a39a;
	margin-bottom: 10px;
	text-align: center;
}
body.exclusive .s1 h2 img{
	width: 40px;
	margin-bottom: 10px;
}
body.exclusive .s1 h2 sup{
	font-size: var(--fz20);
	transform: translateY(-5px);
	display: inline-block;
}
body.exclusive .s1 h3{
	font-size: var(--fz32);
	text-align: center;
}
body.exclusive .s1 .flex{
	display: flex;
	align-items: center;
	gap: 10%;
	margin-top: 5%;
}
body.exclusive .s1 .flex .block-123{
	width: 50%;
}
body.exclusive .s1 .flex .text{
	width: 50%;
}
body.exclusive .s1 .flex .block-123 .block-con{
	border: 1px solid #000;
	padding: 3% 8%;
	padding-right: 0;
	display: flex;
	background-color: #fff;
}
body.exclusive .s1 .flex .block-123 .sline{
	width: 100%;
	height: 30px;
	background-color: #28a39a;
	clip-path: polygon(3.32% 0,100% 0,96.68% 100%,0 100%);
}
body.exclusive .s1 .flex .block-123 .block-con .en{
	font-size: var(--fz28);
	font-weight: 800;
	width: 70%;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .1em;
}
body.exclusive .s1 .flex .block-123 .block-con .en span{
	color: #28a39a;
}
body.exclusive .s1 .flex .block-123 .block-con .num{
	font-size: var(--fz56);
	font-weight: 800;
	color: #28a39a;
	width: 30%;
	border-left: 1px solid #999;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body.exclusive .s1 .flex .text p + p{
	margin-top: 20px;
}
body.exclusive .s1 .flex .text p span:nth-child(1){
	display: block;
}
body.exclusive .s1 .flex .text p span{
	font-weight: 700;
}
body.exclusive .s1 .flex .text p span.t{
	font-size: var(--fz24);
}
body.exclusive .s1 .flex .text p sup{
	font-size: var(--fz16);
	transform: translateY(-3px);
	display: inline-block;
}

body.exclusive .s2 h2{
	color: #28a39a;
	margin-bottom: 15px;
	text-align: center;
}
body.exclusive .s2 h2 img{
	width: 40px;
	margin-bottom: 10px;
}
body.exclusive .s2 h3{
	font-size: var(--fz32);
	text-align: center;
	margin-bottom: 15px;
}
body.exclusive .s2 p{
	width: 70%;
	margin: 0 auto;
}
body.exclusive .s2 .s5c-block{
	display: flex;
	gap: 5%;
	margin-top: 5%;
}
body.exclusive .s2 .s5c-block .s5c{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5%;
}
body.exclusive .s2 .s5c-block .s5c .m{
	display: none;
}
body.exclusive .s2 .s5c-block .s5c .t{
	font-size: var(--fz24);
	font-weight: 700;
	writing-mode: vertical-rl;
	white-space: nowrap;
	letter-spacing: .1em;
}
body.exclusive .s2 .s5c-block .s5c .t span{
	display: none;
}

body.exclusive .s3 h2{
	color: #28a39a;
	margin-bottom: 15px;
	text-align: center;
}
body.exclusive .s3 h2 img{
	width: 40px;
	margin-bottom: 10px;
}
body.exclusive .s3 h3{
	font-size: var(--fz32);
	text-align: center;
	margin-bottom: 15px;
}
body.exclusive .s3 .con > p{
	width: 70%;
	margin: 0 auto;
}
body.exclusive .s3 .csuperb-block{
	display: flex;
	flex-wrap: wrap;
	gap: 6%;
	margin-top: 5%;
	padding-bottom: 10%;
}
body.exclusive .s3 .csuperb-block .superb{
	width: calc(50% - 3%);
	margin-bottom: 5%;
}
body.exclusive .s3 .csuperb-block .superb:nth-child(even){
	transform: translateY(40%);
}
body.exclusive .s3 .csuperb-block .superb .superb-title{
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}
body.exclusive .s3 .csuperb-block .superb .superb-title .num{
	font-size: var(--fz80);
	font-weight: 700;
	color: #28a39a;
}
body.exclusive .s3 .csuperb-block .superb .superb-title .txt h2{
	font-size: var(--fz32);
	text-align: left;
	margin-bottom: 0px;
}
body.exclusive .s3 .csuperb-block .superb .pic img{
	border-radius: 15px;
}



body.work .tab-nav{
	margin-top: 7%;
}
body.work .items{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body.work .items .item{
	position: relative;
	font-size: var(--fz24);
	font-weight: 600;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #000;
	padding: 20px;
	text-align: center;
	color: #999;
	cursor: pointer;
	transition: color .3s;
}
body.work .items .item:hover{
	color: #217fba;
}
body.work .items .item.active,
body.work .items .item.active:hover{
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 0px solid #000;
	color: #000;
	background-image: url(../img/bg.jpg);
	font-weight: 600;
}
body.work .items .item:nth-child(1).active{
	border-left: 0px;
}
body.work .items .item:nth-child(3).active{
	border-right: 0px;
}


body.work .items .item:nth-child(1).active::before{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.work .items .item:nth-child(3).active::after{
	content: "";
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	background-image: url(../img/bg.jpg);
	border-top: 1px solid #000;
}

body.work .items .item:nth-child(1):not(.active)::before{
	content: "";
	position: absolute;
	bottom: -1px;
	right: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.work .items .item:nth-child(3):not(.active)::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 100%;
	width: calc((100vw - min(90vw, 1100px)) / 2);
	height: 0;
	border-bottom: 1px solid #000;
}

body.work section{
	background-image: url(../img/bg.jpg);
	display: none;
	padding-top: 7%;
	
}
body.work section.active{
	display: block;
}
body.work > .box{
	
}
body.work .con{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
body.work > .tab-nav > .box > h2{
	font-size: var(--fz32);
	margin-bottom: 3%;
}
body.work .con h2{
	font-size: var(--fz32);
}
body.work .con h3{
	font-size: var(--fz24);
	color: #217fba;
	margin: 15px 0;
}
body.work .con p{
	font-size: var(--fz24);
}
body.work .con p span{
	font-weight: 700;
}
body.work .con .slick-1{
	margin: 3% 0;
}
body.work .con .slick-dots li button:before{
	font-size: 14px;
	color: #ccc;
	opacity: 1;
}
body.work .con .slick-dots li.slick-active button:before{
	color: #604c3f;
	opacity: 1;
}
body.work .con .infon-block{
	display: flex;
	gap: 10%;
	align-items: flex-start;
	font-size: var(--fz20);
	font-weight: 400;
}
body.work .con .infon-block .txt{
	line-height: 2;
	padding-left: 20px;
	border-left: 1px solid #217fba;
}




body.contact > .box{
	
	padding: 80px 0;
}
body.contact > .box > h2{
	font-size: var(--fz32);
	margin-bottom: 3%;
}
body.contact .contact-block{
	display: flex;
	margin-bottom: 5%;
}
body.contact .contact-block .info-block{
	width: 30%;
	padding-right: 6%;
	border-right: 1px solid #000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.contact .contact-block .form-block{
	width: 70%;
	padding-left: 6%;
}
body.contact .contact-block .info-block .logo{
	width: 100%;
}
body.contact .contact-block .info-block .info li{
	font-size: var(--fz20);
	font-weight: 700;
}
body.contact .contact-block .info-block .info li +li{
	margin-top: 10px;
}
body.contact .contact-block .form-block [class$="-input"],
body.contact .contact-block .form-block .privacy-block,
body.contact .contact-block .form-block .submit-block{
	display: flex;
	align-items: center;
	gap: 10px;
}
body.contact .contact-block .form-block .msg-input{
	align-items: start;
}
body.contact .contact-block .form-block [class$="-input"] + [class$="-input"]{
	margin-top: 20px;
}
body.contact .contact-block .form-block .privacy-block{
	margin-top: 20px;
}
body.contact .contact-block .form-block [class$="-input"] > span,
body.contact .contact-block .form-block .privacy-block > span,
body.contact .contact-block .form-block .submit-block > span{
	width: 80px;
}
body.contact .contact-block .form-block [class$="-input"] > input{
	width: 100%;
	height: 60px;
	background-color: #eee;
	border: 0px;
}
body.contact .contact-block .form-block [class$="-input"] > select{
	width: 100%;
	height: 60px;
	background-color: #eee;
	border: 0px;
}
body.contact .contact-block .form-block [class$="-input"] > textarea{
	width: 100%;
	height: 150px;
	background-color: #eee;
	border: 0px;
}
body.contact .contact-block .form-block .privacy-block > .checkbox-block,
body.contact .contact-block .form-block .submit-block > input{
	width: 100%;
}
body.contact .contact-block .form-block [class$="-input"] .select-sex{
	display: flex;
	align-items: center;
	gap: 5%;
}
body.contact .contact-block .form-block [class$="-input"] .select-sex > div{
	width: 100px;
}
body.contact .contact-block .form-block .privacy-block label{
	margin-left: 10px;
}
body.contact .contact-block .form-block .submit-block{
	margin-top: 20px;
}
body.contact .contact-block .form-block .submit-block .submit-btn{
	width: 100%;
	background-color: #000;
	color: #fff;
	padding: 20px;
	position: relative;
}
body.contact .contact-block .form-block .submit-block .submit-btn:after{
	content: '>>';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 80px;
	text-align: center;
	padding: 0 10px;
	border-left: 1px solid #fff;
}


footer{
	padding: 80px 0;
	background-color: #333;
}
footer .modal-body li{
	font-size: var(--fz22);
    font-weight: 400;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-ideograph;
    letter-spacing: .1em;
}
footer .modal-body h4{
	margin-bottom: 20px;
}
footer .modal-body h5{
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 700;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1000px;
    }
}
footer .box{
	display: flex;
	justify-content: space-between;
}
footer .box .item h2,
footer .box .item h3{
	font-size: var(--fz20);
	font-weight: 400;
	color: #fff;
	margin-bottom: 30px;
}
footer .box .item h3{
	font-size: var(--fz16);
	color: #999;
}
footer .box:nth-child(2){
	margin-top: 5%;
	letter-spacing: .1em;
}
footer .box:nth-child(2) p{
	color: #999;
	font-size: var(--fz16);
	font-weight: 400;
}
footer .box .item .contact-info,
footer .box .item .link-txt{
	font-size: var(--fz16);
	font-weight: 400;
	color: #fff;
	line-height: 2;
	white-space: nowrap;
	letter-spacing: .1em;
}
footer .box .item .link-txt a{
	text-decoration: none;
	color: #fff;
}
footer .box .item:nth-child(2){
	display: flex;
	gap: var(--px50);
}
footer .box p a{
	color: #999;
	text-decoration: none;
}








@media (max-width: 1400px) {
    .rwd:after{
        content: 'mx1400';
    }
}

@media (max-width: 1200px) {
    .rwd:after{
        content: 'mx1200';
    }
}
 
@media (max-width: 992px) {
    .rwd:after{
        content: 'mx992';
    }
    
    :root {
        --basefz: 14;
    }
    .box{
        width: 75%;
    }
    .tab-nav .box{
        width: 90%;
    }
    p{
        font-size: var(--fz18);
        letter-spacing: .1em;
    }
    header .logo{
        width: 250px;
    }
    
    header .menu-toggle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 30;
    }
    header .menu-toggle span{
        display: block;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: transform .3s ease, opacity .3s ease;
        transform-origin: center;
    }
    header .menu-toggle.open span:nth-child(1){
        transform: translateY(7px) rotate(45deg);
    }
    header .menu-toggle.open span:nth-child(2){
        opacity: 0;
    }
    header .menu-toggle.open span:nth-child(3){
        transform: translateY(-7px) rotate(-45deg);
    }
    
    header nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        padding: 80px 30px 30px;
        transform: translateX(-100%);   
        transition: transform .35s ease;
        z-index: 25;
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0,0,0,.15);
    }
    header nav.open{
        transform: translateX(0);       
    }
    
    header .menu-close{
        display: none;
    }
    
    
    body.index section{
        padding: 50px 0;
    }
    body.index .title .arrow-banner {
        padding: 5px 16px 5px 12px;
    }
    body.index .kv{
        padding: 0;
    }
    body.index .kv .pc{
        display: none;
    }
    body.index .kv .m{
        display: block;
    }
    
    
    body.index .title{
        position: relative;
    }
    body.index .title:after{
        
        transform: translate(-125%,25%);
        width: var(--fz25);
        height: var(--fz25);
    }
    body.index .title h2{
        font-size: var(--fz30);
        position: relative;
        z-index: 2;
    }
    body.index .title .arrow-banner h3{
        font-size: var(--fz14);
    }
    body.index .overlay {
        display: none; 
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3); 
        backdrop-filter: blur(15px);
        justify-content: center;
        align-items: center;
    }
    body.index .overlay.active {
        display: flex;
    }
    body.index .overlay .hexagon{
        
        width: 90%;
        max-width: 90%; 
        background-image: url(../img/hexagon-m.svg);
        aspect-ratio: 590 / 816;

        
        display: none;
        justify-content: center;
        align-items: center;
        padding: 10px; 
        margin: 0 auto;
        position: relative;
    }
    body.index .overlay .hexagon .text-content{
        width: 90%;
    }
    body.index .overlay .hexagon .text-content .t{
        font-size: var(--fz22);
        font-weight: 600;
        line-height: 1.4;
    }
    body.index .overlay .hexagon .text-content .t span{
        display: block;
    }
    body.index .overlay .hexagon .text-content .t span:nth-child(2){
        text-align: right;
    }
    body.index .overlay .hexagon .text-content .c1,
    body.index .overlay .hexagon .text-content .c2{
        font-size: var(--fz16);
        font-weight: 600;
        margin-top: 20px;
    }
    body.index .overlay .hexagon .text-content .c1{
        text-align: justify;
    }
    body.index .overlay .hexagon .text-content .c2{
        font-size: var(--fz22);
        line-height: 1.4;
    }
    body.index .overlay .hexagon .text-content .c2 span{
        display: block;
        font-size: var(--fz16);
    }
    body.index .overlay .hexagon2 .text-content .c2{
        font-size: var(--fz16);
    }
    body.index .overlay .hexagon3 .text-content .c2,
    body.index .overlay .hexagon4 .text-content .c2,
    body.index .overlay .hexagon5 .text-content .c2{
        text-align: left;
    }
    body.index .overlay .hexagon .text-content .c2:before{
        font-size: var(--fz24);
    }
    body.index .overlay .hexagon.hexagon1 .text-content .c2:before{
        content: '經驗累積的系統化管理';
    }
    body.index .overlay .hexagon.hexagon2 .text-content .c2:before{
        content: 'AIO服務';
    }
    
    body.index .s1 .box:nth-child(2){
        width: 100%;
    }
    body.index .s1 .items.pc{
        display: none;
    }
    body.index .s1 .items.m{
        display: block;
        width: 100%;
    }
    
    body.index .s2{
        padding-top: 0;
        padding-bottom: 0;
    }
    body.index .s2 .vs .m{
        display: block;
        margin-top: 15px;
    }
    body.index .s2 .vs .pc{
        display: none;
    }
    body.index .s2 .vs .pic p{
        font-size: var(--fz25);
        position: static;
    }
    body.index .s2 .say-block{
        display: none;
    }
    body.index .s2 .say-block .say p{
        font-size: var(--fz24);
        font-weight: 600;
        text-align: left;
    }
    body.index .s2 .say-block .say{
        padding: 5%;
    }
    body.index .s2 > .box:nth-child(2){
        width: 100%;
        max-width: 100%;
    }
    body.index .s2 .items{
        display: block;
        margin-top: 5%;
        padding-bottom: 10%;
        background: linear-gradient(to bottom, #217fba 0%, #28a39a 100%);
    }
    body.index .s2 .items:before{
        content: '匯達豐針對不同資產規劃需求\A提供兩套量身定制的精準路徑';
        white-space: pre-wrap;
        display: block;
        text-align: center;
        color: #fff;
        font-size: var(--fz22);
        font-weight: 700;
        line-height: 1.5;
        padding: 30px 0;
    }
    body.index .s2 .items .item{
        width: 85%;
        margin: 0 auto;
        padding-top: 0%;
        padding-bottom: 8%;
    }
    body.index .s2 .items .item .item-title{
        position: absolute;
        width: 100%;
        z-index: 2;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        
    }
    body.index .s2 .items .item .pic{
        margin: 0;
        margin-bottom: 20px;
    }
    body.index .s2 .items .item .pic img{
        display: none;
    }
    body.index .s2 .items .item:nth-child(1) .pic{
        background-image: url(../img/index-s2-3.jpg);
        background-position: center;
        padding-bottom: 35%;
        border-radius: 15px 15px 0 0;
        opacity: .5;
    }
    body.index .s2 .items .item:nth-child(2) .pic{
        background-image: url(../img/index-s2-4.jpg);
        background-position: center;
        padding-bottom: 35%;
        border-radius: 15px 15px 0 0;
        opacity: .5;
    }
    body.index .s2 .items .item h3{
        font-size: var(--fz26);
        color: #000;
    }
    body.index .s2 .items .item h4{
        font-size: var(--fz24);
        color: #000;
    }
    body.index .s2 .items .item .item-title > h4{
        font-weight: 500;
    }
    body.index .s2 .items .item .txt{
        padding: 0 5%; 
    }
    body.index .s2 .items .item .txt + .txt{
        margin-top: 5%;
    }
    body.index .s2 .items .item .txt h4{
        margin-bottom: 0px;
    }
    body.index .s2 .items .item + .item{
        margin-top: 20px;
    }
    body.index .s2 .items .item:nth-child(2) h3{
        color: #000;
    }
    body.index .s2 .items .item .click-btn{
        font-size: var(--fz24);
    }
    
    body.index .s3bg{
        background: #28a39a;
        padding-top: 8%;
    }
    
    body.index .s3{
        padding-top: 8%;
    }
    body.index .s3 .box:nth-child(2){
        width: 100%;
        max-width: 100%;
    }
    body.index .s3 .title .arrow-wrapper {
      filter: unset; 
      margin-top: 10px;
    }
    body.index .s3 .title .arrow-banner {
      background-color: unset; 
      color: #000;
      padding: 0px; 
      clip-path: initial;
    }
    body.index .s3 .title .arrow-banner h3{
        font-size: var(--fz16);
        font-weight: 500;
    }
    body.index .s3 .title .arrow-banner h3 span{
        display: block;
    }
    body.index .s3 .title .arrow-banner h3 span:before{
        content: '';
    }
    body.index .s3 .title .arrow-banner h3 span:after{
        content: '';
    }
    body.index .s3 .title .arrow-banner h3 a{
        text-decoration: none;
        color: #000;
    }
    body.index .s3 .items-358{
        margin-top: 10%;
        display: block;
    }
    body.index .s3 .items-358 .item {
        
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: 1fr auto auto; 
        column-gap: 10%;
        row-gap: 0;
        align-items: stretch;

        padding: 0 12.5%;
        position: relative;
    }
    body.index .s3 .items-358 .item:after {
        content: '';
        width: 10px;
        height: 100%;
        position: absolute;
        background: linear-gradient(to top, #217fba 0%, #28a39a 100%);
        left: 0;
        top: 0;
    }
    body.index .s3 .items-358 .item + .item{
        margin-top: 40px;
    }
    body.index .s3 .items-358 .item .pic {
        grid-column: 1;
        grid-row: 1 / -1; 
    }
    body.index .s3 .items-358 .item h3{
        grid-column: 2;
        grid-row: 2;
        font-size: var(--fz20);
        margin: 0 0 5px 0;
        align-self: end;
    }
    body.index .s3 .items-358 h3 sup{
        font-size: var(--fz14);
        transform: translateY(0px);
    }
    body.index .s3 .items-358 .item p {
        grid-column: 2;
        grid-row: 3;
        margin: 0;
        align-self: start;
    }
    body.index .s3 .items-358 .item .pic img {
        width: 100%;
        display: block;
    }
    body.index .s3 .items-358 p{
        font-size: var(--fz18);
        font-weight: 600;
    }
    body.index .s3 .marquee{
        margin-top: 10%;
    }
    body.index .s3 .marquee .pic{
        width: 80vw; 
    }
    body.index .s3 .marquee .marquee-track{
        animation-duration: 45s;
    }
    
    body.index .s4 .title .arrow-wrapper {
      filter: unset; 
      margin-top: 10px;
    }
    body.index .s4 .title .arrow-banner {
      background-color: unset; 
      color: #000;
      padding: 0px; 
      clip-path: initial;
    }
    body.index .s4 .title .arrow-banner h3{
        font-size: var(--fz18);
        font-weight: 500;
        color: #fff;
    }
    body.index .s4 .items{
        display: block;
        margin-top: 10%;
    }
    body.index .s4 .items .item{
        display: block;
        text-decoration: none;
    }
    body.index .s4 .items .item + .item{
        margin-top: 30px;
    }
    body.index .s4 .items .item h3{
        font-size: var(--fz24);
        display: block;
        text-align: right;
        margin-top: 15px;
        padding-bottom: 10px;
    }
    body.index .s4 .items .item h3:after{
        margin-left: 30px;
    }
    
    body.index .s5 .pc{
        display: none;
    }
    body.index .s5 .m{
        display: block;
    }
    body.index .s5 .btn-contact{
        top: 15%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    body.index .s5 .btn-contact h2{
        font-size: var(--fz20);
        width: 220px;
    }
    
    body.about section{
        padding-top: 12%;
    }
    body.about .con .text p {
        font-size: var(--fz18);
    }
    body.about .items .item{
        font-size: var(--fz18);
        font-weight: 500;
        padding: 20px 10px;
    }
    body.about .con h2{
        font-size: var(--fz30);
        font-weight: 600;
    }
    body.about .s1 .con{
        display: block;
    }
    body.about .s1 .con .text{
        width: 100%;
        display: block;
    }
    body.about .s1 .con .image{
        width: 100%;
        margin-top: 5%;
    }
    body.about .s2 .con .ch + .ch{
        margin-top: 10%;
        padding-top: 10%;
    }
    body.about .s2 .con .ch:nth-child(1),
    body.about .s2 .con .ch:nth-child(2),
    body.about .s2 .con .ch:nth-child(4){
        display: block;
    }
    body.about .s2 .con .ch:nth-child(1) .text,
    body.about .s2 .con .ch:nth-child(2) .text,
    body.about .s2 .con .ch:nth-child(4) .text{
        width: 100%;
    }
    body.about .s2 .con .ch:nth-child(1) .image,
    body.about .s2 .con .ch:nth-child(2) .image,
    body.about .s2 .con .ch:nth-child(4) .image{
        width: 100%;
        margin-top: 5%;
    }
    body.about .s2 .con .ch:nth-child(2) .text .st{
        display: block;
    }
    body.about .s2 .con .ch:nth-child(2) .text .st p + p{
        margin-top: 20px;
    }
    
    body.about .s2 .con .ch:nth-child(3) .year-timeline{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.about .s2 .con .ch:nth-child(3) .year-timeline .pic,
    body.about .s2 .con .ch:nth-child(3) .year-timeline .click-block{
        width: 1000px;
        max-width: none;
    }
    body.about .s2 .con .ch:nth-child(4) .text h2{
        margin-bottom: 5%;
    }
    body.about .s2 .con .ch:nth-child(3) .swipe-hint{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin: 8px 0 12px;
        color: #217fba;
        font-size: 14px;
        font-weight: 500;
        pointer-events: none;
    }
    body.about .s2 .con .ch:nth-child(3) .swipe-hint i{
        font-size: 20px;
        animation: swipeHint 1.4s ease-in-out infinite;
    }
    @keyframes swipeHint{
        0%, 100%{ transform: translateX(0); }
        50%{ transform: translateX(6px); }
    }
    body.about .s3 .con{
        display: block;
    }
    body.about .s3 .con .text,
    body.about .s3 .con .image{
        width: 100%;
    }
    body.about .s3 .con .image{
        margin-top: 5%;
    }
    body.about .s3 .con .text .item{
        display: block;
    }
    body.about .s3 .con .text .item .t{
        font-size: var(--fz30);
        font-weight: 600;
        margin-bottom: 10px;
    }
    body.about .s4 .con{
        display: block;
    }
    body.about .s4 .con .item + .item{
        margin-top: 40px;
    }
    
    body.news section{
        padding-top: 12%;
    }
    body.news .items .item{
        font-size: var(--fz18);
        font-weight: 500;
        padding: 20px 10px;
    }
    body.news .con h2{
        font-size: var(--fz30);
        font-weight: 600;
    }
    body.news .s1 .con p{
        font-size: var(--fz18);
    }
    body.news .s1 .con p:after{
        display: none;
    }
    body.news .s2 .con .awards{
        display: block;
    }
    body.news .s2 .con .awards h2{
        font-weight: 600;
    }
    body.news .s2 .con .awards .news-items{
        display: block;
    }
    body.news .s2 .con .awards .news-items .item{
        width: 100%;
    }
    body.news .s2 .con .awards .news-items .item + .item{
        margin-top: 20px;
    }
    body.news .s2 .con .awards .news-items .item p{
        font-size: var(--fz22);
        font-weight: 600;
    }
    body.news .s2 .con .awards + .awards{
        margin-top: 10%;
        padding-top: 10%;
    }
    body.news .s3 .con .title{
        display: block;
        margin-bottom: 5%;
    }
    body.news .s3 .con .title h2{
        font-size: var(--fz30);
        font-weight: 600;
        margin-bottom: 5%;
    }
    body.news .s3 .con .posts{
        display: block;
    }
    body.news .s3 .con .posts .post{
        width: 100%;
    }
    body.news .s3 .con .posts .post + .post{
        margin-top: 20px;
    }
    body.news .s3 .con .posts .post .pic{
        margin-bottom: 15px;
    }
    
    body.product section{
        padding-top: 12%;
    }
    body.product .con .text p {
        font-size: var(--fz18);
    }
    body.product .items .item{
        font-size: var(--fz18);
        font-weight: 500;
        padding: 20px 10px;
    }
    body.product .con h2{
        font-size: var(--fz30);
        font-weight: 600;
    }
    body.product .s1 .con{
        width: 90%;
    }
    body.product .s1 .con .text h2{
        font-size: var(--fz30);
    }
    body.product .s1 .con .text h3{
        font-size: var(--fz28);
    }
    body.product .s1 .con .vs-block {
        margin-top: 10%;
        margin-bottom: 5%;
    }
    body.product .s1 .con .vs-block .vs{
        justify-content: space-between;
    }
    body.product .s1 .con .vs-block .txt{
        font-size: var(--fz40);
    }
    body.product .s1 .con .vs-block .vs .pic:nth-child(1){
        width: 42%;
    }
    body.product .s1 .con .vs-block .vs .pic:nth-child(2){
        width: 42%;
    }
    body.product .s1 .con .vs-block .vs .pic h3{
        font-size: var(--fz22);
    }
    body.product .s1 .vs-text .compare-row {
        flex-direction: column;
        align-items: start;
        padding: 5% 5%;
    }
    body.product .s1 .vs-text .compare-row:nth-child(1) .compare-left i,
    body.product .s1 .vs-text .compare-row:nth-child(1) .compare-right i{
        
    }
    body.product .s1 .vs-text .compare-left,
    body.product .s1 .vs-text .compare-right {
        flex: unset;
        font-size: var(--fz18);
    }
    body.product .s1 .vs-text .compare-right {
        display: block;
    }
    body.product .s1 .vs-text .compare-right:before{
        content: '全案管理：';
        font-weight: 600;
    }
    body.product .s1 .vs-text .compare-left:before{
        content: '傳統自建：';
        font-weight: 600;
    }
    body.product .s1 .vs-text .compare-left {
        text-align: left;
        margin-bottom: 10px;
    }
    body.product .s1 .vs-text .compare-title {
        flex: unset;
        order: -1;
        margin-bottom: 15px;
    }
    body.product .s1 .vs-text .compare-right .win {
        width: 40px;
        height: 40px;
        border: 3px solid #1681bd;
        font-weight: 700;
        font-size: var(--fz14);
    }
    body.product .s2 .con > h2 span{
        display: block;
    }
    body.product .s2 .con > h3{
        font-size: var(--fz28);
    }
    body.product .s2 .aio-block{
        display: block;
        margin-top: 5%;
    }
    body.product .s2 .aio-block .aio + .aio{
        margin-top: 20px;
    }
    body.product .s2 .aio-block .aio h3{
        font-size: var(--fz26);
    }
    body.product .s2 .aio-block .aio p{
        font-size: var(--fz18);
    }
    body.product .s2 .aio-block .aio .txt .r + .r{
        margin-top: 20px;
    }
    body.product .s2 .aio-block .aio .txt .r{
        display: block;
    }
    body.product .s2 .aio-block .aio .txt .r .t{
        margin-bottom: 10px;
    }
    body.product .s2 .aio-block .aio .txt .r .c{
        font-size: var(--fz18);
        line-height: 1.4;
    }
    body.product .s2 .aio-block .aio .txt .r .c span{
        font-weight: 600;
    }


    body.product .s3 .con > h3{
        font-size: var(--fz16);
    }
    body.product .s3 .applicable-block{
        display: block;
        margin-top: 8%;
    }
    body.product .s3 .applicable-block .applicable{
        padding: 8%;
    }
    body.product .s3 .applicable-block .applicable + .applicable{
        margin-top: 20px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1),
    body.product .s3 .applicable-block .applicable:nth-child(2){
        width: 100%;
    }
    body.product .s3 .applicable-block .applicable h3{
        font-size: var(--fz24);
        margin-bottom: 20px;
    }

    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table .row-title {
        display: none;
    }

    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table {
        display: block;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div:nth-child(1) {
        display: none;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div {
        padding: 10px 0;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div:nth-child(n + 5) {
        border-top: 0px solid #000;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .compare-table > div:not(:nth-child(4n + 1)) {
        border-left: 0px solid #000;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .title {
        display: none;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .row-title {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        display: block;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .row-title-2 {
        margin-top: 20px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content:before{
        display: block;
        font-size: var(--fz22);
        font-weight: 600;
        margin-bottom: 15px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content:before{
        width: 100%;
        text-align: center;
        background-color: #217fba;
        font-size: var(--fz24);
        font-weight: 700;
        padding: 10px 0;
        border-radius: 50px;
        color: #fff;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-1:before{
        content: '自地自用型';
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-2:before{
        content: '融資償還型';
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-3:before{
        content: '開發自用型';
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content ul {
        margin: 0;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content ul:before{
        content: '基本條件';
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content ul:after{
        content: '適用對象';
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content ul:before,
    body.product .s3 .applicable-block .applicable:nth-child(1) .content ul:after {
        display: block;
        width: 100%;
        text-align: center;
        font-size: var(--fz18);
        font-weight: 700;
        color: #217fba;
        margin-top: 25px;
        margin-bottom: 20px;

        
        background-image: 
            linear-gradient(#217fba, #217fba),
            linear-gradient(#217fba, #217fba);

        
        background-size: calc(50% - 3.5em) 1.5px;

        
        background-position: left center, right center;

        background-repeat: no-repeat;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-1 span:before{
        content: '擁有自有土地及資金的個人或企業擬活化舊資產運用。';
        display: block;
        font-size: var(--fz18);
        font-weight: 700;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-1 span:after{
        content: '例：舊資產重置新建商業辦公大樓、企業總部、酒店式公寓或集合式住宅等供自用或出租。';
        display: block;
        font-size: var(--fz18);
        font-weight: 500;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-2 span:before{
        content: '擁有自有土地雖欠缺營建資金但仍想提升資產價值者。';
        display: block;
        font-size: var(--fz18);
        font-weight: 700;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-2 span:after{
        content: '例：連棟透天或老舊公寓所有者，新建大樓以提升資產價值並出售部分房產償還融資貸款。';
        display: block;
        font-size: var(--fz18);
        font-weight: 500;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-3 > span:before{
        content: '擁可用資金雖欠缺合宜土地但想以成本價取得房產者。';
        display: block;
        font-size: var(--fz18);
        font-weight: 700;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-3 > span:after{
        content: '例：揪團合資建屋分屋、家族或高資產者投資置產、醫美、旅館、社團、商會等自用大樓。';
        display: block;
        font-size: var(--fz18);
        font-weight: 500;
        margin: 10px 0;
        line-height: 1.5;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-4,
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-5,
    body.product .s3 .applicable-block .applicable:nth-child(1) .content-6{
        display: none;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content li{
        font-size: var(--fz18);
        font-weight: 700;
    }
    body.product .s3 .applicable-block .applicable:nth-child(1) .content p + p {
        margin-top: 12px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone + .allinone{
        margin-top: 20px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone1:before{
        content: '全方位全案管理';
        width: 100%;
        text-align: center;
        background-color: #28a39a;
        font-size: var(--fz24);
        font-weight: 700;
        padding: 10px 0;
        border-radius: 50px;
        color: #fff;
        display: block;
        margin-bottom: 15px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone1 .c.flex{
        display: block;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone .t{
        text-align: center;
        font-size: var(--fz18);
        font-weight: 700;
        color: #28a39a;
        margin-top: 25px;
        margin-bottom: 20px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone .t:before{
        content: '';
        width: 100%;
        height: 1px;
        display: block;
        background-image: linear-gradient(#28a39a, #28a39a),linear-gradient(#28a39a, #28a39a);
        background-size: calc(50% - 3.5em) 1.5px;
        background-position: left center, right center;
        background-repeat: no-repeat;
        transform: translateY(5px);
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone1 .t{
        padding-top: 10px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone1 .c.flex{
        display: block;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone1 .c.flex p{
        text-align: center;
        font-size: var(--fz18);
        font-weight: 700;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone + .allinone{
        margin-top: 30px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c{
        display: none;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c-m{
        display: block;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c-m .c-t{
        text-align: center;
        font-size: var(--fz18);
        font-weight: 700;
        margin-bottom: 10px;
    }
    body.product .s3 .applicable-block .applicable:nth-child(2) .allinone.allinone2 .c-m .c-c{
        text-align: center;
        font-size: var(--fz18);
        font-weight: 500;
        margin-bottom: 15px;
        line-height: 1.5;
    }
    
    body.exclusive .title{
        display: block;
        width: 100%;
        margin-top: 7%;
        margin-bottom: 5%;
    }
    body.exclusive .title .pic{
        width: 100px;
        margin-bottom: 20px;
    }
    body.exclusive .title .text{
        width: 100%;
    }
    body.exclusive .title .text h2{
        font-size: var(--fz30);
        font-weight: 600;
        margin-bottom: 20px;
    }
    body.exclusive section{
        padding-top: 12%;
    }
    body.exclusive .items .item{
        font-size: var(--fz18);
        font-weight: 500;
        padding: 20px 10px;
    }
    body.exclusive .items .item i{
        
    }
    body.exclusive .con h2{
        font-size: var(--fz30);
        font-weight: 600;
    }
    body.exclusive .s1 h3{
        font-size: var(--fz22);
        text-align: left;
    }
    body.exclusive .s1 .con .text p{
        font-size: var(--fz18);
    }
    body.exclusive .s1 .flex{
        display: block;
        margin-top: 5%;
    }
    body.exclusive .s1 .flex .text p span.t{
        font-size: var(--fz22);
    }
    body.exclusive .s1 .flex .text p sup{
        font-size: var(--fz12);
    }
    body.exclusive .s1 .flex .block-123{
        width: 100%;
        margin-bottom: 30px;
    }
    body.exclusive .s1 .flex .text{
        width: 100%;
    }
    body.exclusive .s2 h2{
        margin-bottom: 10px;
    }
    body.exclusive .s2 h3{
        font-size: var(--fz22);
        text-align: left;
    }
    body.exclusive .s2 p{
        width: 100%;
    }
    body.exclusive .s2 .s5c-block{
        display: block;
    }
    body.exclusive .s2 .s5c-block .s5c{
        flex-direction: row;
    }
    body.exclusive .s2 .s5c-block .s5c + .s5c{
        margin-top: 20px;
    }
    body.exclusive .s2 .s5c-block .s5c .pic{
        width: 150px;
    }
    body.exclusive .s2 .s5c-block .s5c .pc{
        display: none;
    }
    body.exclusive .s2 .s5c-block .s5c .m{
        display: block;
    }
    body.exclusive .s2 .s5c-block .s5c .t{
        font-size: var(--fz18);
        writing-mode: unset;
        white-space: unset;
        line-height: 1.4;
    }
    body.exclusive .s2 .s5c-block .s5c .t span{
        display: block;
        font-size: var(--fz12);
        color: #28a39a;
        letter-spacing: .1em;
        margin-bottom: 8px;
    }
    body.exclusive .s2 .s5c-block .s5c .t span::first-letter{
        font-size: var(--fz18);
    }
    
    body.exclusive .s2 .con p{
        font-size: var(--fz18);
        letter-spacing: 1px;
    }
    
    body.exclusive .s3 h2{
        margin-bottom: 10px;
    }
    body.exclusive .s3 h3{
        font-size: var(--fz22);
        text-align: left;
    }
    body.exclusive .s3 .con > p{
        width: 100%;
    }
    body.exclusive .s3 .csuperb-block{
        display: block;
        padding-bottom: 5%;
    }
    body.exclusive .s3 .csuperb-block .superb{
        width: 100%;
        margin-bottom: 10%;
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(even){
        transform: translateY(0%);
    }
    body.exclusive .s3 .csuperb-block .superb .superb-title{
        display: block;
    }
    body.exclusive .s3 .csuperb-block .superb .superb-title .num{
        display: none;
    }
    body.exclusive .s3 .csuperb-block .superb .superb-title .txt h2{
        display: flex;
        align-items: center;
    }
    body.exclusive .s3 .csuperb-block .superb .superb-title .txt h2:before{
        font-size: var(--fz32);
        color: #28a39a;
        display: inline-flex;
        align-items: center;
        
        
        border-right: 1px solid currentColor;
        
        
        padding-right: 0.4em;
        margin-right: 0.45em;
        
        
        line-height: 0.85em;
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(1) .superb-title .txt h2:before{
        content: '01';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(2) .superb-title .txt h2:before{
        content: '02';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(3) .superb-title .txt h2:before{
        content: '03';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(4) .superb-title .txt h2:before{
        content: '04';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(5) .superb-title .txt h2:before{
        content: '05';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(6) .superb-title .txt h2:before{
        content: '06';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(7) .superb-title .txt h2:before{
        content: '07';
    }
    body.exclusive .s3 .csuperb-block .superb:nth-child(8) .superb-title .txt h2:before{
        content: '08';
    }
    body.exclusive .s3 .csuperb-block .superb .superb-title .txt p{
        letter-spacing: 0em;
    }
    
    body.work section{
        padding-top: 12%;
    }
    body.work .items .item{
        font-size: var(--fz18);
        font-weight: 500;
        padding: 20px 10px;
    }
    body.work .con h2{
        font-size: var(--fz30);
        font-weight: 600;
    }
    body.work > .tab-nav > .box > h2{
        margin-bottom: 12%;
    }
    body.work .con h2{
        font-size: var(--fz28);
    }
    body.work .con h3{
        font-size: var(--fz22);
    }
    body.work .con p{
        font-size: var(--fz18);
    }
    body.work .con .slick-1{
        margin: 5% 0;
    }
    body.work .con .infon-block{
        display: block;
    }
    body.work .con .infon-block .txt{
        font-size: var(--fz18);
    }
    
    body.contact > .box{
        
        padding: 50px 0;
        width: 80%;
    }
    body.contact > .box > h2{
        font-size: var(--fz32);
        margin-bottom: 8%;
    }
    body.contact .contact-block{
        display: block;
        margin-bottom: 5%;
    }
    body.contact .contact-block .info-block{
        width: 100%;
        padding-right: 0%;
        border-right: 0px solid #000;
        display: block;
    }
    body.contact .contact-block .form-block{
        width: 100%;
        padding-left: 0%;
        margin-bottom: 50px;
    }
    body.contact .contact-block .info-block .logo{
        width: 50%;
        margin-bottom: 30px;
    }
    body.contact .contact-block .info-block .info{
        margin-bottom: 40px;
    }
    body.contact .contact-block .info-block .info li +li{
        margin-top: 12px;
    }
    body.contact .contact-block .form-block [class$="-input"] > span,
    body.contact .contact-block .form-block .privacy-block > span,
    body.contact .contact-block .form-block .submit-block > span{
        width: 110px;
    }
    body.contact .contact-block .form-block [class$="-input"] > input{
        height: 50px;
    }
    body.contact .contact-block .form-block [class$="-input"] > select{
        height: 50px;
    }
    body.contact .contact-block .form-block .privacy-block label{
        font-size: var(--fz16);
    }





    
    
    footer{
        padding: 50px 0;
    }
    footer .box{
        display: block;
    }
    footer .box .item h3{
        margin-bottom: 10px;
    }
    footer .box .item:nth-child(2){
        display: block;
    }
    footer .box .item .affiliated{
        margin-top: 20px;
    }


}


@media (max-width: 768px) {
    .rwd:after{
        content: 'mx768';
    }
}


@media (max-width: 576px) {
    .rwd:after{
        content: 'mx576';
    }    
}