|
|
@@ -0,0 +1,530 @@
|
|
|
+/*custom font*/
|
|
|
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
|
|
|
+
|
|
|
+/*basic reset*/
|
|
|
+* {margin: 0; padding: 0;}
|
|
|
+
|
|
|
+html {
|
|
|
+ min-height: 100%;
|
|
|
+ height: auto;
|
|
|
+ /*Image only BG fallback*/
|
|
|
+
|
|
|
+ /*background = gradient + image pattern combo*/
|
|
|
+ /* background:
|
|
|
+ linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ font-family: montserrat, arial, verdana;
|
|
|
+ background-color: white;
|
|
|
+ font-size: 1.05rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ml {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mr {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.top {
|
|
|
+ margin-top: 20px;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ z-index: 20;
|
|
|
+ background-color: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/* .imf {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 3;
|
|
|
+} */
|
|
|
+
|
|
|
+.img_banner {
|
|
|
+ background-image: url('images/banner_top1.jpg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 65px;
|
|
|
+}
|
|
|
+
|
|
|
+/*form styles*/
|
|
|
+.img_logo {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.title__block {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-logo {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.slogan {
|
|
|
+ display: block;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.notice_card {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 10%;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ background: white;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 3px;
|
|
|
+ box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
|
|
|
+ padding: 10px 20px;
|
|
|
+ line-height: 1.5rem;
|
|
|
+}
|
|
|
+#myProgress {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ #myBar {
|
|
|
+ width: 10%;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #1C7CE0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+.go_title {
|
|
|
+ color: white;
|
|
|
+ font-family: 'Montserrat', sans-serif;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-list {
|
|
|
+ color: white;
|
|
|
+ margin-top: 3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-list-item {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.nav-list-item::after {
|
|
|
+ content: " ";
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ border-bottom: 1px solid white;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all .4s;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-list-item:hover::after {
|
|
|
+
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.right-text {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.loader {
|
|
|
+ position: absolute;
|
|
|
+ top: 30%;
|
|
|
+ left: 45%;
|
|
|
+}
|
|
|
+
|
|
|
+/* .history-modal {
|
|
|
+ height: 80vh;
|
|
|
+}
|
|
|
+.history-modal .modal-content{
|
|
|
+ height: 80vh;
|
|
|
+
|
|
|
+}
|
|
|
+.history-modal .modal-conten .modal-terms {
|
|
|
+ height: 90%;
|
|
|
+ overflow: scroll;
|
|
|
+} */
|
|
|
+
|
|
|
+.historyList-item {
|
|
|
+ padding: 1rem;
|
|
|
+ display: block;
|
|
|
+ width: 80%;
|
|
|
+ margin: 1rem auto;
|
|
|
+ border: 1px solid rgb(177, 177, 177);
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.historyList-link {
|
|
|
+ text-decoration: none;
|
|
|
+ color: rgb(73, 73, 73);
|
|
|
+}
|
|
|
+
|
|
|
+.historyList-link:hover {
|
|
|
+ color: rgb(124, 124, 124);
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: calc(100% - 250px);
|
|
|
+}
|
|
|
+/*form styles*/
|
|
|
+#msform {
|
|
|
+ max-width: 1000px;
|
|
|
+ min-width: 370px;
|
|
|
+ margin: 50px auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#msform fieldset {
|
|
|
+ background: white;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 3px;
|
|
|
+ box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
|
|
|
+ padding: 20px 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 80%;
|
|
|
+ margin: 3rem 10%;
|
|
|
+
|
|
|
+ /*stacking fieldsets above each other*/
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+/*Hide all except first fieldset*/
|
|
|
+
|
|
|
+/*inputs*/
|
|
|
+#msform input[type="text"], #msform textarea, #msform input[type="email"] {
|
|
|
+ padding: 15px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: montserrat;
|
|
|
+ color: #2C3E50;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+/*buttons*/
|
|
|
+#msform .action-button {
|
|
|
+ width: 100px;
|
|
|
+ background: #1C7CE0;
|
|
|
+ font-weight: bold;
|
|
|
+ color: white;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 1px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px 5px;
|
|
|
+ margin: 10px auto;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+#msform .action-button:hover, #msform .action-button:focus {
|
|
|
+ box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
|
|
|
+}
|
|
|
+/*headings*/
|
|
|
+.fs-title {
|
|
|
+ font-size: 15px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #2C3E50;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.fs-subtitle {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 3px;
|
|
|
+ border-bottom: 2px solid #1C7CE0;
|
|
|
+}
|
|
|
+.fs-label {
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.fs-label > i {
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+/*progressbar*/
|
|
|
+#progressbar {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ /*CSS counters to number the steps*/
|
|
|
+ counter-reset: step;
|
|
|
+}
|
|
|
+#progressbar li {
|
|
|
+ list-style-type: none;
|
|
|
+ color: black;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 33.33%;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+#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: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background: white;
|
|
|
+ position: absolute;
|
|
|
+ left: -50%;
|
|
|
+ top: 9px;
|
|
|
+ z-index: -1; /*put it behind the numbers*/
|
|
|
+}
|
|
|
+#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:before, #progressbar li.active:after{
|
|
|
+ background: #27AE60;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+p.error-text {
|
|
|
+ bottom: -23px;
|
|
|
+ left: 24px;
|
|
|
+ color: rgba(255, 0, 0, .7);
|
|
|
+ font-size: .8em;
|
|
|
+}
|
|
|
+
|
|
|
+#term-error {
|
|
|
+ color: rgba(255, 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 rgb(163, 163, 163);
|
|
|
+ line-height: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.term-link a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.thankyou {
|
|
|
+ margin: auto;
|
|
|
+ min-width: 350px;
|
|
|
+ height: 250px;
|
|
|
+ margin-top: 190px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 20px;
|
|
|
+ line-height: 25px;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+}
|
|
|
+.thankyou input {
|
|
|
+ margin-top: 40px;
|
|
|
+}
|
|
|
+.thankyou h3 {
|
|
|
+ font-size: 2rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #21ba45;
|
|
|
+ line-height: 2.5rem;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.check_button {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.fs-label-type {
|
|
|
+ background: transparent;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid black;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.check_button:checked + .fs-label-type{
|
|
|
+ background-color: #27AE60;
|
|
|
+ color: white;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid #27AE60;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="checkbox"] {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+#checker1, #checker2 {
|
|
|
+ display: inline;
|
|
|
+}
|
|
|
+
|
|
|
+.fs-label-info {
|
|
|
+ background: transparent;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid black;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="radio"] {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="radio"]:checked + .fs-label-info {
|
|
|
+ background-color: #27AE60;
|
|
|
+ color: white;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid #27AE60;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="checkbox"]:checked + .fs-label-info {
|
|
|
+ background-color: #27AE60;
|
|
|
+ color: white;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid #27AE60;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ padding: 2rem;
|
|
|
+ padding-top: .5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.img_fr {
|
|
|
+ width: 80%;
|
|
|
+ max-width: 850px;
|
|
|
+ min-width: 300px;
|
|
|
+ height: 60px;
|
|
|
+ object-fit: contain;
|
|
|
+ object-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.img_fr img {
|
|
|
+ width: 100%;
|
|
|
+ height: 90%;
|
|
|
+}
|
|
|
+
|
|
|
+#msform #userid, #msform #area {
|
|
|
+ height: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
huaisianhuang