init

.gitignore

@@ -0,0 +1 @@
+node_modules

css/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

css/reset.css

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+/* HTML5 display-role reset for older browsers */
+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;
+}
+button {
+	padding: 0;
+}
+p{
+	margin-bottom: 0 !important;
+}

css/style.css

@@ -0,0 +1,903 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
+@font-face {
+  font-family: drechifont;
+  src: url(../drechifont-proportional.woff);
+  font-weight: 300; }
+
+@font-face {
+  font-family: 'Taipei Sans TC Beta';
+  src: local("Taipei Sans TC Beta");
+  font-weight: 300; }
+
+body {
+  background-color: #F7F7F7;
+  overflow-x: hidden !important;
+  font-family: 'Taipei Sans TC Beta'; }
+
+.header {
+  z-index: 5;
+  height: 94vh;
+  background-image: url("../images/hero.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border-bottom-right-radius: 18rem;
+  border-bottom-left-radius: 18rem;
+  position: relative;
+  box-shadow: 0px 8px 25px 5px #a8a8a8; }
+  @media screen and (max-width: 576px) {
+    .header {
+      border-bottom-right-radius: 4rem;
+      border-bottom-left-radius: 4rem;
+      height: 90vh; } }
+  .header__logo {
+    display: block;
+    width: 120px;
+    height: 35px; }
+    .header__logo img {
+      width: 100%;
+      height: 100%; }
+  .header__logo-box {
+    padding: 1rem;
+    margin: 0rem 4.5rem; }
+    @media screen and (max-width: 576px) {
+      .header__logo-box {
+        margin: 0rem .4rem; } }
+  .header__line {
+    background-color: white;
+    height: 2px;
+    border-top: 1px solid #ffff; }
+  .header__text-box {
+    position: absolute;
+    width: 40vw;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -60%); }
+    .header__text-box::after {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 125%;
+      height: 125%;
+      border-radius: 70%;
+      content: ' ';
+      background: #E5A982;
+      opacity: .5;
+      mix-blend-mode: darken;
+      -webkit-filter: blur(80px);
+      -moz-filter: blur(80px);
+      -o-filter: blur(80px);
+      -ms-filter: blur(80px);
+      filter: blur(80px);
+      z-index: -1; }
+    @media screen and (max-width: 576px) {
+      .header__text-box {
+        width: 98vw; } }
+    .header__text-box h2 {
+      font-size: 4rem;
+      font-family: drechifont;
+      color: white;
+      text-shadow: #494949 1px 0 10px;
+      position: relative; }
+      @media screen and (max-width: 576px) {
+        .header__text-box h2 {
+          font-size: 2.6rem;
+          letter-spacing: 1px;
+          font-weight: lighter;
+          text-shadow: #696969 1px 0 10px;
+          line-height: 3.4rem; } }
+      .header__text-box h2 img {
+        position: absolute;
+        width: 110px;
+        height: 109px;
+        left: 90%;
+        top: 44%; }
+        @media screen and (max-width: 576px) {
+          .header__text-box h2 img {
+            width: 70px;
+            height: 80px;
+            left: 80%;
+            top: 75%;
+            transform: rotate(5deg); } }
+  .header__polygon-box {
+    position: absolute;
+    bottom: 3%;
+    left: 50%;
+    display: flex;
+    flex-direction: column; }
+    @media screen and (max-width: 576px) {
+      .header__polygon-box {
+        transform: translateX(-50%); } }
+    .header__polygon-box img {
+      margin-top: -6px; }
+
+.deco__path1 {
+  z-index: -1;
+  width: 100%;
+  position: absolute;
+  top: 60%; }
+  @media screen and (max-width: 576px) {
+    .deco__path1 {
+      top: 80%; } }
+  .deco__path1 img {
+    width: 100%; }
+
+.regulation {
+  z-index: 5;
+  padding: 10rem .5rem 9rem .5rem;
+  padding-bottom: 7rem;
+  position: relative; }
+  @media screen and (max-width: 576px) {
+    .regulation {
+      padding: 6rem .5rem 7rem .5rem;
+      padding-bottom: 7rem; } }
+  .regulation__box {
+    transform: translateX(35%);
+    width: 52%;
+    padding: 3rem;
+    background-color: #F7F7F7;
+    border-radius: 50px;
+    padding-bottom: 6rem;
+    padding-top: 4rem;
+    color: #707070;
+    box-shadow: 1px 1px 10px 1px #cccccc, inset 0em 3px white;
+    position: relative; }
+    @media screen and (max-width: 576px) {
+      .regulation__box {
+        width: 95%;
+        padding: 1.5rem;
+        border-radius: 20px;
+        transform: none;
+        margin: 0 auto; } }
+    .regulation__box::after {
+      content: " ";
+      position: absolute;
+      bottom: 3rem;
+      right: 3rem;
+      width: 27%;
+      height: 1px;
+      background: #707070; }
+      @media screen and (max-width: 576px) {
+        .regulation__box::after {
+          bottom: 2rem;
+          right: 1.5rem; } }
+    .regulation__box__title {
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+      font-size: 1.4rem; }
+      @media screen and (max-width: 576px) {
+        .regulation__box__title {
+          font-size: 1.6rem; } }
+    .regulation__box__list {
+      font-family: 'Taipei Sans TC Beta';
+      margin-bottom: 1.5rem;
+      font-size: 1rem;
+      color: #707070;
+      line-height: 2rem;
+      font-weight: 300; }
+      @media screen and (max-width: 576px) {
+        .regulation__box__list {
+          font-size: 1.1rem; } }
+  .regulation__imgbox {
+    width: 43vw;
+    height: 60%;
+    background-image: url("../images/plant.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    -o-filter: blur(3px);
+    -ms-filter: blur(3px);
+    filter: blur(3px);
+    opacity: 0.75;
+    position: absolute;
+    right: 0;
+    bottom: 3rem;
+    z-index: -1;
+    border-radius: 3rem 0 0 2rem; }
+    @media screen and (max-width: 576px) {
+      .regulation__imgbox {
+        width: 70vw; } }
+  .regulation__square {
+    position: absolute;
+    bottom: 2.4rem;
+    left: 11%; }
+  .regulation__cricle {
+    position: absolute;
+    top: 12rem;
+    right: 20%; }
+  .regulation__line {
+    position: absolute;
+    left: -4rem;
+    opacity: 0.5; }
+
+.designers {
+  padding: 4rem 0;
+  text-align: center;
+  color: #707070;
+  font-family: 'TaipeiSansTCBeta';
+  position: relative; }
+  @media screen and (max-width: 576px) {
+    .designers {
+      padding-top: 0rem; } }
+  .designers .row {
+    margin: 1px 0; }
+  .designers__left {
+    position: absolute;
+    top: 75%;
+    left: -1rem;
+    z-index: -2; }
+  .designers__cricle {
+    position: absolute;
+    bottom: -5rem;
+    left: 10%;
+    z-index: -1; }
+  .designers__title {
+    padding: .5rem 0 1rem 0;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 2rem;
+    display: block;
+    position: relative;
+    letter-spacing: 1px; }
+    @media screen and (max-width: 576px) {
+      .designers__title {
+        font-size: 2rem;
+        padding-top: .5rem;
+        margin-bottom: 1rem; } }
+    .designers__title::before, .designers__title::after {
+      content: " ";
+      position: absolute;
+      width: 25%;
+      height: 1px;
+      background-color: #E0E0E0;
+      top: 42%; }
+      @media screen and (max-width: 576px) {
+        .designers__title::before, .designers__title::after {
+          width: 18%;
+          top: 40%; } }
+    .designers__title::before {
+      left: 18%; }
+      @media screen and (max-width: 576px) {
+        .designers__title::before {
+          left: 6%; } }
+    .designers__title::after {
+      right: 18%; }
+      @media screen and (max-width: 576px) {
+        .designers__title::after {
+          right: 6%; } }
+  .designers__small {
+    font-family: 'Taipei Sans TC Beta'; }
+  .designers__card {
+    height: 14rem;
+    padding: 0rem 0 1.5rem 0;
+    color: #707070;
+    background-color: #F7F7F7;
+    margin-right: 10px;
+    margin-left: 10px;
+    text-decoration: none;
+    text-align: center; }
+    .designers__card:hover {
+      color: #707070; }
+    @media screen and (max-width: 576px) {
+      .designers__card {
+        margin-right: 5px;
+        margin-left: 5px;
+        padding: 0rem 0 1.5rem 0;
+        height: 16rem; } }
+    .designers__card__imgfr {
+      display: inline-block;
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0px 3px 20px 6px rgba(214, 214, 214, 0.8); }
+      @media screen and (max-width: 576px) {
+        .designers__card__imgfr {
+          width: 125px;
+          height: 125px; } }
+      @media screen and (max-width: 576px) {
+        .designers__card__imgfr img {
+          width: 120px; } }
+    .designers__card__text {
+      font-weight: 350;
+      margin-top: .8rem; }
+      @media screen and (max-width: 576px) {
+        .designers__card__text {
+          margin-top: .8rem;
+          padding-left: 5px;
+          padding-right: 5px; } }
+      .designers__card__text strong {
+        font-weight: bold;
+        font-size: 1rem;
+        letter-spacing: 1px;
+        margin-right: 5px; }
+        @media screen and (max-width: 576px) {
+          .designers__card__text strong {
+            font-size: 1.2rem; } }
+      .designers__card__text p {
+        font-size: .8rem; }
+        .designers__card__text p:nth-of-type(1) {
+          padding-bottom: 3px; }
+        .designers__card__text p:nth-of-type(2) {
+          padding-top: 3px;
+          border-top: 1px solid grey; }
+        .designers__card__text p small {
+          font-size: .7rem; }
+        @media screen and (max-width: 576px) {
+          .designers__card__text p {
+            font-size: 1rem; } }
+  .designers .container-fluid {
+    padding-left: 0;
+    padding-right: 0; }
+
+.personal {
+  padding: 4rem 0;
+  padding-top: 0;
+  text-align: center;
+  color: #707070;
+  position: relative; }
+  @media screen and (max-width: 576px) {
+    .personal {
+      padding-top: 0rem;
+      padding-bottom: 2rem; } }
+  .personal__title {
+    padding: .5rem 0 1rem 0;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 2rem;
+    display: block;
+    position: relative;
+    letter-spacing: 1px; }
+    @media screen and (max-width: 576px) {
+      .personal__title {
+        font-size: 2rem;
+        padding-top: .5rem; } }
+    .personal__title::before, .personal__title::after {
+      content: " ";
+      position: absolute;
+      width: 25%;
+      height: 1px;
+      background-color: #E0E0E0;
+      top: 42%; }
+      @media screen and (max-width: 576px) {
+        .personal__title::before, .personal__title::after {
+          width: 18%;
+          top: 40%; } }
+    .personal__title::before {
+      left: 18%; }
+      @media screen and (max-width: 576px) {
+        .personal__title::before {
+          left: 6%; } }
+    .personal__title::after {
+      right: 18%; }
+      @media screen and (max-width: 576px) {
+        .personal__title::after {
+          right: 6%; } }
+  .personal__small {
+    font-weight: 300; }
+  .personal__box {
+    min-width: 350px;
+    width: 60%;
+    padding: 3rem;
+    background-color: #F7F7F7;
+    color: #707070;
+    box-shadow: 1px 1px 10px 1px #cccccc, inset 0em 3px white;
+    border-radius: 3rem;
+    height: fit-content;
+    min-height: 630px;
+    margin: 0 auto; }
+    @media screen and (max-width: 576px) {
+      .personal__box {
+        padding: .5rem;
+        padding-top: 2rem;
+        border-radius: 2rem;
+        min-height: 750px; } }
+  .personal__triangle {
+    position: absolute;
+    top: 1rem;
+    right: 9%;
+    transform: rotate(43deg);
+    z-index: -1; }
+  .personal__wave {
+    position: absolute;
+    bottom: 8rem;
+    left: 13%;
+    z-index: -1; }
+  .personal__left {
+    position: absolute;
+    left: -1rem;
+    top: -1.5rem;
+    z-index: -1; }
+  .personal #msform select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none; }
+
+.modal {
+  background-color: rgba(0, 0, 0, 0.7); }
+  .modal-body {
+    color: #707070;
+    padding: 2rem; }
+    @media screen and (max-width: 576px) {
+      .modal-body {
+        padding: 1rem; } }
+  .modal-title {
+    text-align: center;
+    font-size: 22px;
+    display: block;
+    width: 16rem;
+    margin: 1rem auto; }
+  .modal-dialog {
+    max-width: 800px;
+    border-radius: 3rem;
+    margin-top: calc(50vh - 297px); }
+    @media screen and (max-width: 576px) {
+      .modal-dialog {
+        padding: 1rem;
+        margin-top: 2rem;
+        margin-left: 0;
+        margin-right: 0; } }
+  .modal-content {
+    border-radius: 1.3rem; }
+  .modal-closer {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    right: -2.1rem;
+    top: -2.1rem; }
+    @media screen and (max-width: 576px) {
+      .modal-closer {
+        right: -.75rem;
+        top: -2.2rem; } }
+  .modal-terms {
+    font-size: 1rem;
+    line-height: 2rem; }
+
+.owl-carousel .owl-item img {
+  display: inline-block;
+  width: 100px; }
+  @media screen and (max-width: 576px) {
+    .owl-carousel .owl-item img {
+      width: 125px; } }
+
+.owl-carousel .owl-stage-outer {
+  overflow: unset; }
+
+.owl-theme .owl-nav {
+  margin-top: 0;
+  text-align: unset; }
+
+.owl-theme .owl-nav .owl-prev .owl-prev-icon, .owl-theme .owl-nav .owl-next .owl-next-icon {
+  background-color: transparent;
+  margin: 0;
+  padding: 0; }
+
+.owl-theme .owl-nav span i {
+  font-size: 2rem;
+  color: #bebebe; }
+
+.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%); }
+  .owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover {
+    background-color: transparent; }
+    .owl-carousel .owl-nav button.owl-next:hover i, .owl-carousel .owl-nav button.owl-prev:hover i {
+      color: grey; }
+
+.owl-carousel .owl-nav button.owl-prev {
+  left: 0px;
+  margin: 0; }
+
+.owl-carousel .owl-nav button.owl-next {
+  right: 0px;
+  margin: 0; }
+
+.owl-theme .owl-dots {
+  margin-top: 2rem; }
+  @media screen and (max-width: 576px) {
+    .owl-theme .owl-dots {
+      margin-top: .5rem; } }
+
+.owl-theme .owl-dots .owl-dot span {
+  width: 25px;
+  height: 3px;
+  margin: 5px 3px; }
+  @media screen and (max-width: 576px) {
+    .owl-theme .owl-dots .owl-dot span {
+      width: 15px; } }
+
+.owl-theme .owl-dots .owl-dot.active span {
+  background-color: #F39800; }
+
+.mb {
+  margin-bottom: 8px; }
+
+.mt {
+  margin-top: 8px; }
+
+.mr {
+  margin-right: 5px; }
+
+/*form styles*/
+#msform {
+  min-width: 370px;
+  max-width: 1000px;
+  margin: auto;
+  text-align: center;
+  position: relative;
+  font-family: 'Taipei Sans TC Beta'; }
+  @media screen and (max-width: 576px) {
+    #msform {
+      min-width: 340px; } }
+
+#msform fieldset {
+  background: transparent;
+  box-sizing: border-box;
+  width: 85%;
+  margin: 0 7.5%;
+  /*stacking fieldsets above each other*/
+  position: relative; }
+
+/*Hide all except first fieldset*/
+#msform fieldset:not(:first-of-type) {
+  display: none;
+  margin-top: 2rem; }
+
+/*inputs*/
+#msform input[type="text"], #msform textarea, #msform input[type="email"], #msform select {
+  padding: 8px;
+  padding-left: 1rem;
+  border: 1px solid #C4C4C4;
+  border-radius: 0px;
+  margin-bottom: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: montserrat;
+  color: #2C3E50;
+  font-size: 14px; }
+
+#msform select {
+  background-color: white;
+  color: #C4C4C4; }
+
+#msform input {
+  color: black; }
+
+#msform input::placeholder {
+  color: #C4C4C4; }
+
+/*buttons*/
+#msform .action-button {
+  width: 90px;
+  background: #F7F7F7;
+  font-weight: 400;
+  color: #707070;
+  border: 1px solid #707070;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 4px 9px;
+  margin: 10px auto;
+  display: inline-block; }
+
+#msform .action-button:hover, #msform .action-button:focus {
+  background: #707070;
+  color: #F7F7F7; }
+
+#msform .action-button.btn-margin {
+  margin-top: 1.5rem; }
+  @media screen and (max-width: 576px) {
+    #msform .action-button.btn-margin {
+      margin-top: 160px; } }
+
+/*headings*/
+.fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px; }
+
+.fs-subtitle {
+  display: inline-block;
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+  padding-bottom: 3px;
+  border-bottom: 2px solid #27AE60; }
+
+.fs-label {
+  display: block;
+  text-align: left;
+  font-weight: bold; }
+
+/*progressbar*/
+#progressbar {
+  width: 85%;
+  margin: 0 auto;
+  overflow: hidden;
+  /*CSS counters to number the steps*/
+  counter-reset: step; }
+
+#progressbar li {
+  list-style-type: none;
+  color: #C4C4C4;
+  font-size: .9rem;
+  width: 33.33%;
+  float: left;
+  position: relative; }
+  @media screen and (max-width: 576px) {
+    #progressbar li {
+      font-size: .8rem; } }
+
+#progressbar span {
+  display: block; }
+
+/* #progressbar li:before {
+	content: counter(step);
+	counter-increment: step;
+	width: 20px;
+	line-height: 20px;
+	display: block;
+	font-size: 12px;
+	color: #333;
+	background: white;
+	border-radius: 3px;
+	margin: 0 auto 5px auto;
+}
+/* progressbar connectors*/
+#progressbar li:after {
+  content: '';
+  width: 60%;
+  height: 1px;
+  background: #C4C4C4;
+  position: absolute;
+  left: -30%;
+  top: 17px;
+  z-index: 2;
+  /*put it behind the numbers*/ }
+  @media screen and (max-width: 576px) {
+    #progressbar li:after {
+      width: 35%;
+      height: 1px;
+      background: #C4C4C4;
+      position: absolute;
+      left: -20%;
+      top: 14px; } }
+
+#progressbar li:first-child:after {
+  /*connector not needed before the first step*/
+  content: none; }
+
+/*marking active/completed steps green*/
+/*The number of the step and the connector before it = green*/
+#progressbar li.active:after {
+  background-color: #F39800;
+  color: white; }
+
+#progressbar li.active {
+  color: #F39800;
+  font-weight: 600; }
+
+p.error-text {
+  bottom: -23px;
+  left: 24px;
+  color: rgba(255, 0, 0, 0.7);
+  font-size: .8em; }
+
+#term-error {
+  color: rgba(255, 0, 0, 0.7);
+  font-size: .8em;
+  bottom: -23px;
+  left: 24px; }
+
+select {
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: montserrat;
+  color: #2C3E50;
+  font-size: 13px;
+  background-color: transparent; }
+
+.pl-0 {
+  padding-left: 0; }
+
+.terms {
+  font-size: .9rem;
+  width: 95%;
+  min-width: 250px;
+  height: auto;
+  overflow: scroll;
+  margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid #a3a3a3;
+  line-height: 1.5rem; }
+
+@media screen and (max-width: 576px) {
+  .term-link {
+    font-size: .8rem; } }
+
+.term-link span {
+  color: black;
+  display: inline-block;
+  margin-left: 4px;
+  text-decoration: underline;
+  cursor: pointer; }
+
+.h2 {
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-top: 2rem; }
+
+.left_align {
+  font-size: 18px;
+  text-align: left; }
+
+#overlay {
+  position: fixed;
+  /* Sit on top of the page content */
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  cursor: pointer; }
+
+.check_button {
+  display: none; }
+
+.fs-label-type {
+  background: white;
+  padding: 5px 11px;
+  border: 1px solid #C4C4C4;
+  border-radius: 8px;
+  display: inline-block;
+  font-weight: lighter;
+  font-size: 1rem; }
+
+.check_button:checked + .fs-label-type {
+  background-color: #FFC107;
+  color: black;
+  border-color: #FFC107; }
+
+input[type="checkbox"] {
+  display: none; }
+
+#checker1, #checker2 {
+  display: inline; }
+
+.fs-label-info {
+  background: white;
+  padding: 5px 11px;
+  border: 1px solid #C4C4C4;
+  border-radius: 8px;
+  display: inline-block;
+  font-weight: lighter;
+  font-size: 1rem; }
+
+input[type="radio"] {
+  display: none; }
+
+input[type="radio"]:checked + .fs-label-info {
+  background-color: #FFC107;
+  color: black;
+  border-color: #FFC107; }
+
+input[type="checkbox"]:checked + .fs-label-info {
+  background-color: #FFC107;
+  color: black;
+  border-color: #FFC107; }
+
+#msform .submit {
+  background-color: #0D6EFD;
+  color: white;
+  border: 1px solid #0D6EFD; }
+
+#msform .submit:hover, #msform .submit:focus {
+  background-color: #0D6EFD;
+  color: white; }
+
+.btn-exit {
+  padding: .5rem .75rem;
+  background-color: transparent;
+  border: 1px solid black;
+  margin-top: .3rem; }
+
+.btn-term-exit {
+  padding: .5rem .75rem;
+  background-color: transparent;
+  border: 1px solid black;
+  margin-top: .3rem;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem; }
+
+#msform #userid, #msform #area {
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: none; }
+
+.footer {
+  text-align: center;
+  padding: 1.5rem;
+  color: #707070;
+  font-size: 1rem;
+  position: relative;
+  font-family: 'Taipei Sans TC Beta'; }
+  @media screen and (max-width: 576px) {
+    .footer {
+      padding-bottom: 3rem;
+      background-color: transparent;
+      font-size: .9rem; } }
+  .footer .deco__bottomdiv {
+    position: absolute;
+    right: 15%;
+    bottom: 0rem;
+    z-index: -2;
+    width: 920px;
+    overflow: hidden; }
+  .footer .deco__rightdiv {
+    width: 710px;
+    position: absolute;
+    right: 0;
+    bottom: 0rem;
+    z-index: -2;
+    overflow: hidden; }
+    @media screen and (max-width: 576px) {
+      .footer .deco__rightdiv {
+        width: 270px; } }
+  .footer .deco__right {
+    width: 100%;
+    transform: translateY(2rem); }
+  .footer .deco__bottom {
+    width: 100%;
+    transform: translateY(2rem); }
+  .footer .deco__linediv {
+    width: 310px;
+    position: absolute;
+    bottom: 0rem;
+    left: -8rem;
+    z-index: -1;
+    overflow: hidden; }
+    @media screen and (max-width: 576px) {
+      .footer .deco__linediv {
+        width: 140px;
+        left: -3rem; } }
+  .footer .deco__line3 {
+    width: 100%;
+    height: 110%;
+    transform: translateY(3rem);
+    opacity: .5; }
+  .footer .deco__rightlinediv {
+    width: 650px;
+    position: absolute;
+    bottom: 0rem;
+    right: -4rem;
+    z-index: -1;
+    overflow: hidden; }
+    @media screen and (max-width: 576px) {
+      .footer .deco__rightlinediv {
+        width: 300px; } }
+  .footer .deco__rightline {
+    width: 100%;
+    opacity: .6;
+    transform: translateY(2rem); }
+    @media screen and (max-width: 576px) {
+      .footer .deco__rightline {
+        opacity: 1; } }