InnovationLab/public/assets/css/index.css

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: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

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;
}

img {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  image-rendering: auto;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  /* Safari seems to support, but seems deprecated and does the same thing as the others. */
  image-rendering: -webkit-optimize-contrast;
}

div {
  box-sizing: border-box;
}

.text__white {
  color: #ffffff !important;
}

.text__red {
  color: #77182d !important;
}

.text__gold {
  background-image: linear-gradient(90deg, #eccdb8 0%, #cb6d29 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  letter-spacing: 2px;
}

.bg__color__skintone {
  background-color: #e0d2c9 !important;
}

.bg__color__red {
  background-color: #77182d !important;
}

@-webkit-keyframes animloader46 {
  0% {
    background: #ffefbe;
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  14% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px #ffefbe, 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  28% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px #ffefbe, 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  42% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px #ffefbe, 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  57% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px #ffefbe, 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  71% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px #ffefbe, 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  85% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px #ffefbe;
  }

  100% {
    background: rgba(255, 239, 190, 0.5);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }
}

@keyframes animloader46 {
  0% {
    background: #ffefbe;
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  14% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px #ffefbe, 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  28% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px #ffefbe, 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  42% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px #ffefbe, 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  57% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px #ffefbe, 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  71% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px #ffefbe, 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }

  85% {
    background: rgba(255, 239, 190, 0);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px #ffefbe;
  }

  100% {
    background: rgba(255, 239, 190, 0.5);
    box-shadow: 9px -19px 0 -1px rgba(255, 239, 190, 0), 28px -19px 0 -2px rgba(255, 239, 190, 0), 39px -5px 0 -3px rgba(255, 239, 190, 0), 34px 10px 0 -4px rgba(255, 239, 190, 0), 22px 17px 0 -5px rgba(255, 239, 190, 0), 9px 16px 0 -6px rgba(255, 239, 190, 0);
  }
}

.loader-component {
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 3000;
  display: none;
}

.loader-component.show {
  display: flex;
}

.loader-component .loader-46 {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: scale3d(2, 2, 2);
}

.loader-component .loader-46::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 0;
  transform: translate(-50%, 100%);
  -webkit-animation: animloader46 1s linear infinite;
  animation: animloader46 1s linear infinite;
  top: 0;
}

.font__serif {
  font-family: "Noto Serif TC", serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, .section__title {
  font-family: "Noto Serif TC", serif;
}

p, a, li, span {
  font-family: "Noto Sans TC", sans-serif;
}

.align__right {
  text-align: right;
}

.align__left {
  text-align: left;
}

.align__center {
  text-align: center;
}

.d-box {
  display: none;
}

@media (min-width: 641px) {
  .d-box {
    display: block;
  }
}

.m-box {
  display: block;
}

@media (min-width: 641px) {
  .m-box {
    display: none;
  }
}

html, body {
  font-size: 16px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

body {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1;
}

body.style__hidden {
  overflow: hidden;
}

body.style__no__scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  background: linear-gradient(360deg, #FFEFBE 0%, rgba(255, 239, 190, 0) 46.86%), linear-gradient(0deg, rgba(255, 239, 190, 0.5), rgba(255, 239, 190, 0.5)), url("https://d1xzlli46wohoc.cloudfront.net/assets/images/bg.png");
}

.main__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.photographPage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.photographPage__header {
  position: absolute;
  padding-top: 3.75em;
  padding-left: 1.875em;
  z-index: 10;
}

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

.photographPage__userImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.photographPage__facemasker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: -7.5em;
}

.photographPage__facemasker img {
  width: 100%;
}

.photographPage__facemaskerText {
  color: white;
  position: absolute;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  width: 100%;
  left: 0;
  bottom: 3.125em;
}

.photographPage__toolbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8.96875em;
}

.photographPage__toolbar__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-top: 0.625em;
}

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

.photographPage .btn__back {
  cursor: pointer;
  position: relative;
  width: 9.375em;
}

.photographPage .btn__insert {
  cursor: pointer;
  position: relative;
  width: 3.9375em;
  height: 3.9375em;
}

.photographPage .btn__insert input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.photographPage .btn__camera {
  cursor: pointer;
  position: relative;
  width: 8.05em;
  height: 8.05em;
  visibility: hidden;
  pointer-events: none;
}

.photographPage .btn__camera.is__show {
  visibility: visible;
  pointer-events: auto;
}

.photographPage .btn__camera.is__hidden {
  visibility: hidden;
}

.photographPage .btn__flip__camera {
  cursor: pointer;
  position: relative;
  width: 3.9375em;
  height: 3.9375em;
  visibility: hidden;
  pointer-events: none;
}

.photographPage .btn__flip__camera.is__show {
  visibility: visible;
  pointer-events: auto;
}

.photographPage .btn__flip__camera.is__hidden {
  visibility: hidden;
}

.templatePage {
  position: relative;
  width: 100%;
  height: 100%;
}

.templatePage__header {
  position: relative;
  padding-top: 3.75em;
  padding-left: 1.875em;
}

.templatePage__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 2em;
}

.templatePage__footer {
  position: relative;
  padding-top: 5em;
}

.templatePage__title {
  position: relative;
  padding-bottom: 1.25em;
  width: 31.25em;
}

.templatePage__swiper {
  position: relative;
  width: 31.25em;
  height: 31.25em;
}

.templatePage__slide {
  position: relative;
  width: 31.25em;
  height: 31.25em;
  border-radius: 1.25em;
  border: 1px solid #4B5283;
  overflow: hidden;
}

.templatePage__slide img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.templatePage .swiper-container {
  overflow: visible !important;
}

.templatePage .swiper-container .swiper-slide {
  transition: all 0.5s ease-in-out;
  margin-right: 1.875em;
}

.templatePage .swiper-container .swiper-slide:not(.swiper-slide-active) {
  filter: grayscale(0.6);
  opacity: 0.8;
}

.templatePage .swiper-container .swiper-slide.swiper-slide-active {
  filter: grayscale(0);
  opacity: 1;
}

.templatePage__pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.625em;
}

.templatePage__pagination .pagination__bullet {
  position: relative;
  width: 0.625em;
  height: 0.625em;
  border-radius: 100%;
  background-color: #FFFFFF;
  margin-left: 0.3125em;
  margin-right: 0.3125em;
}

.templatePage__pagination .pagination__bullet.swiper-pagination-bullet-active {
  background-color: #4B5283;
}

.templatePage .btn__back {
  cursor: pointer;
  position: relative;
  width: 14.5625em;
}

.templatePage .btn__confirm {
  cursor: pointer;
  position: relative;
  width: 15.625em;
  margin-left: auto;
  margin-right: auto;
}

.mergePage {
  position: relative;
  width: 100%;
  height: 100%;
}

.mergePage__header {
  position: relative;
  padding-top: 3.75em;
  padding-left: 1.875em;
}

.mergePage__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 2em;
}

.mergePage__footer {
  position: absolute;
  width: 100%;
  height: 21.625em;
  padding-top: 15.625em;
  left: 0;
  bottom: 0;
}

.mergePage__title {
  position: relative;
  padding-bottom: 1.25em;
  width: 31.25em;
}

.mergePage__demo {
  position: relative;
  width: 31.25em;
  height: 31.25em;
  overflow: hidden;
}

.mergePage__picture {
  position: relative;
  width: 31.25em;
  height: 31.25em;
  border-radius: 1.25em;
  border: 1px solid #4B5283;
}

.mergePage__picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mergePage__loader {
  position: absolute;
  width: 31.25em;
  height: 31.25em;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mergePage__loader .loader__text {
  position: relative;
  color: #FFEFBE;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25em;
  text-align: center;
  margin-top: 3.75em;
}

.mergePage__loader .loader-46 {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: scale3d(1.8, 1.8, 1.8);
}

.mergePage__loader .loader-46::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 0;
  transform: translate(-50%, 100%);
  -webkit-animation: animloader46 1s linear infinite;
  animation: animloader46 1s linear infinite;
  top: 0;
}

.mergePage .btn__back {
  cursor: pointer;
  position: relative;
  width: 14.5625em;
  pointer-events: nono;
  opacity: 0;
}

.sharePage {
  position: relative;
  width: 100%;
  height: 100%;
}

.sharePage__header {
  position: relative;
  padding-top: 3.75em;
  padding-left: 1.875em;
}

.sharePage__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 2em;
}

.sharePage__footer {
  position: absolute;
  width: 100%;
  height: 21.625em;
  padding-top: 15.625em;
  left: 0;
  bottom: 0;
  visibility: hidden;
  pointer-events: none;
}

.sharePage__footer.is__show {
  visibility: visible;
  pointer-events: auto;
}

.sharePage__footer.is__hidden {
  visibility: hidden;
}

.sharePage__title {
  position: relative;
  padding-bottom: 1.25em;
  width: 31.25em;
}

.sharePage__demo {
  position: relative;
  width: 31.25em;
  height: 31.25em;
  border-radius: 1.25em;
  border: 1px solid #4B5283;
  background-color: #FFEFBE;
  overflow: hidden;
}

.sharePage__picture {
  position: relative;
  width: 31.25em;
  height: 31.25em;
}

.sharePage__picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sharePage__loader {
  position: absolute;
  width: 31.25em;
  height: 31.25em;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sharePage__loader .loader__text {
  position: relative;
  color: #FFEFBE;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25em;
  text-align: center;
  margin-top: 1.875em;
}

.sharePage__loader .loader-46 {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: scale3d(1.8, 1.8, 1.8);
}

.sharePage__loader .loader-46::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 0;
  transform: translate(-50%, 100%);
  -webkit-animation: animloader46 1s linear infinite;
  animation: animloader46 1s linear infinite;
  top: 0;
}

.sharePage .btn__back {
  cursor: pointer;
  position: relative;
  width: 14.5625em;
}

.sharePage .btn__group {
  position: relative;
  width: 100%;
  height: 6em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sharePage .btn__line, .sharePage .btn__facebook {
  cursor: pointer;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.6666666667em;
  height: 2.6666666667em;
  width: 50%;
  text-align: center;
}

.sharePage .btn__line {
  background-color: white;
  color: #4B5283;
}

.sharePage .btn__facebook {
  color: #FFEFBE;
  background-color: #4B5283;
}

.tableAtfooter {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

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