|
|
@@ -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; } }
|
huaisianhuang
4 年之前
