* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
}

*:focus {
  outline: none;
}

@font-face {
  font-family: Futura;
  font-weight: 300;
  src: url("../fonts/Futura/FuturaStd-Light.otf") format("opentype");
}

@font-face {
  font-family: Futura;
  font-weight: 500;
  src: url("../fonts/Futura/FuturaStd-Medium.otf") format("opentype");
}

@font-face {
  font-family: Futura;
  font-weight: 700;
  src: url("../fonts/Futura/FuturaStd-Bold.otf") format("opentype");
}

:lang(en) {
  font-family: "Futura", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}

:lang(tc) {
  font-family: "微軟正黑體", Arial, sans-serif;
  font-weight: 400;
}

:lang(sc) {
  font-family: "微軟正黑體", Arial, sans-serif;
  font-weight: 400;
}

html,
body {
  background-color: transparent;
  color: white;
  /* font-family: Lato, Arial, sans-serif; */
  font-weight: 300;
  font-size: 14px;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  height: 100%;
  width: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

a {
  text-decoration: none;
  color: white;
}

.lock-scroll {
  overflow: hidden;
  position: relative;
}

.animsition {
  overflow-x: hidden;
}

.container {
  max-width: none;
  width: 90%;
  margin: auto;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.layer {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  margin: auto;
  overflow: hidden;
}

.btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  z-index: 4;
  background-color: transparent;
  display: flex;
  align-items: center;
}

.btn-close::before,
.btn-close::after {
  display: block;
  content: "";
  position: absolute;
  width: 70%;
  height: 1px;
  background-color: #075d6f;
  top: 0;
  bottom: 0;
  left: 0%;
  /* right: -10%; */
  margin: auto;
  transform-origin: center center;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
}

.btn-close::before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.btn-close::after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

/*--- Section 1 ---*/

.section {
  min-height: 576px;
}

.section-1 {
  /*background-color: #0A6287;*/
  background-color: #075d6f;
}

.popup-layer {
  z-index: 1000;
  opacity: 1;
  /* transition: all 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -webkit-transition: all 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -moz-transition: all 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -ms-transition: all 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -o-transition: all 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000); */
  /*background-color: #0A6287;*/

  background-color: #075d6f;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
}

.popup-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.disclaimer-popup {
  position: relative;
  background-color: white;
  color: #075d6f;
  padding: 3rem 1.75rem;
  max-height: 50%;
  width: 80%;
  font-size: calc(1rem / 14 * 12);
  display: flex;
  flex-direction: column;
}

:lang(en) .disclaimer-popup {
  max-height: 60%;
}

.disclaimer-content {
  height: calc(100% - 2rem);
  overflow: hidden;
  text-align: justify;
}

.disclaimer-date {
  text-align: center;
  margin-top: 1rem;
}

.overlay {
  width: 100%;
  right: auto;
  opacity: 0;
  z-index: 1000;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  background-color: #075d6f;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.overlay.animation-in {
  width: 100%;
  opacity: 1;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
}

.popup-layer.animation-out {
  /* width: 0%; */
  transform: translateX(100%);
  left: auto;
  opacity: 1;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

.index-background-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.index-background-1 img {
  width: 15%;
  opacity: 0;
  transform: translate(-100%, -100%);
  -webkit-transform: translate(-100%, -100%);
  -moz-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  -o-transform: translate(-100%, -100%);
  transform-origin: left top;
  transition: transform 2.5s cubic-bezier(0.37, 0.85, 0.56, 1),
    opacity 2.5s cubic-bezier(0.37, 0.85, 0.56, 1);
  -webkit-transition: transform 2.5s cubic-bezier(0.37, 0.85, 0.56, 1),
    opacity 2.5s cubic-bezier(0.37, 0.85, 0.56, 1);
  -moz-transition: transform 2.5s cubic-bezier(0.37, 0.85, 0.56, 1),
    opacity 2.5s cubic-bezier(0.37, 0.85, 0.56, 1);
  -ms-transition: transform 2.5s cubic-bezier(0.37, 0.85, 0.56, 1),
    opacity 2.5s cubic-bezier(0.37, 0.85, 0.56, 1);
  -o-transition: transform 2.5s cubic-bezier(0.37, 0.85, 0.56, 1),
    opacity 2.5s cubic-bezier(0.37, 0.85, 0.56, 1);
}

.index-background-1 img.animation-in {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
}

.index-background-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.index-background-2 img {
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 35%;
  transform: translate(-100%, 50%);
  -webkit-transform: translate(-100%, 50%);
  -moz-transform: translate(-100%, 50%);
  -ms-transform: translate(-100%, 50%);
  -o-transform: translate(-100%, 50%);
  transition: transform 2.5s cubic-bezier(0.2, 0.68, 0.56, 1),
    opacity 2.5s cubic-bezier(0.2, 0.68, 0.56, 1);
  -webkit-transition: transform 2.5s cubic-bezier(0.2, 0.68, 0.56, 1),
    opacity 2.5s cubic-bezier(0.2, 0.68, 0.56, 1);
  -moz-transition: transform 2.5s cubic-bezier(0.2, 0.68, 0.56, 1),
    opacity 2.5s cubic-bezier(0.2, 0.68, 0.56, 1);
  -ms-transition: transform 2.5s cubic-bezier(0.2, 0.68, 0.56, 1),
    opacity 2.5s cubic-bezier(0.2, 0.68, 0.56, 1);
  -o-transition: transform 2.5s cubic-bezier(0.2, 0.68, 0.56, 1),
    opacity 2.5s cubic-bezier(0.2, 0.68, 0.56, 1);
}

.index-background-2 img.animation-in {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
}

.index-background-3 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
}

.index-background-3 img {
  height: 100%;
  width: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transition: transform 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94),
    opacity 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94);
  -webkit-transition: transform 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94),
    opacity 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94);
  -moz-transition: transform 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94),
    opacity 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94);
  -ms-transition: transform 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94),
    opacity 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94);
  -o-transition: transform 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94),
    opacity 2.5s cubic-bezier(0.46, 1.02, 0.52, 0.94);
}

.index-background-3 img.animation-in {
  opacity: 1;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
}

.index-background-4 {
  position: absolute;
  right: 0;
  height: 60%;
  width: 100%;
  display: none;
}

.index-background-4 img {
  height: 100%;
  width: auto;
  position: absolute;
  opacity: 0;
  right: 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transition: transform 2.5s cubic-bezier(0.19, 0.71, 0.56, 1),
    opacity 2.5s cubic-bezier(0.19, 0.71, 0.56, 1);
  -webkit-transition: transform 2.5s cubic-bezier(0.19, 0.71, 0.56, 1),
    opacity 2.5s cubic-bezier(0.19, 0.71, 0.56, 1);
  -moz-transition: transform 2.5s cubic-bezier(0.19, 0.71, 0.56, 1),
    opacity 2.5s cubic-bezier(0.19, 0.71, 0.56, 1);
  -ms-transition: transform 2.5s cubic-bezier(0.19, 0.71, 0.56, 1),
    opacity 2.5s cubic-bezier(0.19, 0.71, 0.56, 1);
  -o-transition: transform 2.5s cubic-bezier(0.19, 0.71, 0.56, 1),
    opacity 2.5s cubic-bezier(0.19, 0.71, 0.56, 1);
}

.index-background-4 img.animation-in {
  opacity: 1;
  transform: translateX(0%);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
}

.background-video {
  width: 100%;
  display: none;
}

.background-video-1 {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.video-background,
.video-background2 {
  opacity: 0;
  transition: opacity 1.5s ease-in;
  -webkit-transition: opacity 1.5s ease-in;
  -moz-transition: opacity 1.5s ease-in;
  -ms-transition: opacity 1.5s ease-in;
  -o-transition: opacity 1.5s ease-in;
}

.video-background.active,
.video-background2.active {
  opacity: 1;
}

#background-video,
#background-video2 {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: #075d6f;
  /* background-image: our video ;*/
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  z-index: 1;
  display: none;
}

.video-overlay {
  /*background-color: #0A6287;*/

  background-color: #075d6f;
  /* display:none; */
  /*background-image: url("../img/main/teaseroverlay.png");*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
}

.video-overlay.active {
  opacity: 1;
  visibility: visible;
}

.main-layer {
  display: none;
}

.main-wrap {
  /* display: flex;
    flex-direction: column; */
  /* align-items: center;*/
  /* justify-content: center; */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.main-content {
  width: 100%;
  justify-items: center;

  display: grid;
  /* grid-row-gap: 12rem; */

  grid-row-gap: min(20vh, 12rem);
  margin-bottom: max(16rem, 16vh);

  /* transform: translate(20%);
    -webkit-transform: translate(20%);
    -moz-transform: translate(20%);
    -ms-transform: translate(20%);
    -o-transform: translate(20%); */
}

.logo_div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6rem;
}

/* .logo_div::after {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
} */

.big-logo {
  /* background: #075d6f;
  border-radius: 1rem; */

  /* height: 15%; */
  /* position: absolute; */
  left: 0;
  right: 0;
  width: auto;
  margin: auto;
  text-align: center;
  top: 20%;
  /* margin-top: 15%; */
  /* width: 50%; */
}

/* .big-logo p {
  padding: 2rem 1rem;
  display: block;
} */

.big-logo:nth-child(1) {
  /* margin-right: 2rem; */
}

.big-logo p {
  font-size: 1.5em;
  text-shadow: 2px 2px 6px black;
}

.big-logo img {
  /* height: 100%; */
  width: 100%;
  height: auto;
}
.info_div {
  /* -webkit-transform: translate(0px, 140%);
  -moz-transform: translate(0px, 140%);
  -ms-transform: translate(0px, 140%);
  -o-transform: translate(0px, 140%); */
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0, -50%);
}
.main-center {
  /* position: absolute; */
  bottom: 40%;
  left: 0;
  right: 0;
  margin-bottom: 50px;
  /* margin-top: 8rem; */
}

.project-name {
  text-align: center;
  /* bottom: 40%; */
  /* position: absolute; */
  left: 0;
  right: 0;
  /* margin-top: 5%; */
  margin-bottom: 0.5rem;
}

:lang(en) .project-name .span-2 {
  display: block;
}

.project-enquiry {
  display: flex;
  align-items: baseline;
  /* position: absolute; */
  justify-content: center;
  /* left: 0;
    right: 0;
    bottom: 35%; */
  /* margin-top: 1rem; */
}

.project-enquiry h2 {
  margin-right: 1rem;
}

:lang(en) .project-enquiry h2,
:lang(en) .project-name h2,
:lang(en) .big-logo p {
  font-size: calc(1rem / 14 * 18);
}

.project-enquiry h1 {
  margin: 0;
}

.main-lang {
  display: flex;
  left: 15px;
  right: 15px;
  justify-content: flex-end;
  position: absolute;
  top: 15px;
  /* margin-top: 5%; */
}

.main-lang .logo {
  width: 25%;
  transform: translate(5%, 5%);
  -webkit-transform: translate(5%, 5%);
  -moz-transform: translate(5%, 5%);
  -ms-transform: translate(5%, 5%);
  -o-transform: translate(5%, 5%);
}

.main-lang .logo img {
  width: 100%;
}

.logo {
  width: 30%;
}
.logo img {
  width: 100%;
}

.sound {
  margin-right: 1rem;
  display: flex;
  /* align-items: center; */

  align-items: flex-start;
  cursor: pointer;
  /* width: calc(1rem / 14 * 12); */
  width: 16px;
  margin-top: 5%;
}

.sound img {
  width: 100%;
}

.main-lang .stroke {
  margin: 0 0.5rem;
}

.vendor-logo-box-1 {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
}

.vendor-logo-1 {
  margin-right: 1rem;
}

.vendor-info {
  display: flex;
  justify-content: center;
  /* position: absolute; */
  bottom: 20%;
  left: 0;
  right: 0;
  /* margin-top: 5%; */
  /* margin-bottom: 1rem; */
  text-align: center;
  /* height: 10%; */
  image-rendering: -webkit-optimize-contrast;
}

.vendor-info svg {
  height: 100%;
  width: 100%;
}

.vendor-logo-2 svg {
  width: auto;
  height: 100%;
}

.vendor-info-1 {
  width: 21%;
  height: 100%;
}

.vendor-info-2 {
  width: 10.5%;
  height: 100%;
}

.vendor-info p {
  margin-bottom: 1rem;
  font-size: calc(1rem * 10 / 14);
}

/* .vendor-info-1 {
    width: calc(100% / 3 * 2);
} */

.vendor-logo-box-1 .vendor-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.vendor-logo-box-1 .vendor-links a {
  height: 100%;
}

.vendor-logo-box-1 .vendor-links .kerry-link {
  width: 33%;
}

.vendor-logo-box-1 .vendor-links .sino-link {
  width: 33%;
}

.vendor-logo-box-1,
.vendor-logo-box-2 {
  /* height: 40%;*/
  width: 100%;
  position: relative;
}

.vendor-logo-box-1 img,
.vendor-logo-box-2 img {
  /* height: 40%;*/
  width: 100%;
}

.vendor-logo-box-2 img {
  width: 60%;
}

.vendor-logo-1,

/* .vendor-logo-2, */

.vendor-logo-3 {
  height: 100%;
  width: 100%;
}

.vendor-logo-1 {
  width: 50%;
  height: 100%;
}

.vendor-logo-2 {
  width: 50%;
  height: 100%;
}

.vendor-logo-2 svg {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

.vendor-logo-3 svg {
  transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -o-transform: scale(0.75);
}

.copyright {
  position: absolute;
  bottom: 1rem;
  left: 25px;
  right: 0;
  margin: auto;
  text-align: left;
  font-size: calc(1rem * 10 / 14);
}

.btn-disclaimer {
  position: absolute;
  bottom: 1rem;
  right: 15px;
  font-size: calc(1rem * 10 / 14);
  cursor: pointer;
}

.btn-disclaimer::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: transparent;
  position: absolute;
  transform: rotate(45deg) translateX(-50%);
  left: -15px;
  border-top: 1px;
  border-left: 1px;
  border-style: solid;
  border-bottom: 0;
  border-right: 0;
  top: 50%;
}