469 lines
9.8 KiB
SCSS
469 lines
9.8 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "../initial";
|
|
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
|
|
@media(max-width: $screen-xs){
|
|
padding: 0;
|
|
}
|
|
}
|
|
.verticalhome{
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
}
|
|
.big-banner{
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.lastcontent{
|
|
padding-bottom: 8em;
|
|
padding-top: 4em;
|
|
background: #ffffff69;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.layout-content {
|
|
background-color:#d5fffe;
|
|
position: relative;
|
|
min-height: 46.5em;
|
|
.container {
|
|
@extend .response-container;
|
|
}
|
|
}
|
|
.layout-content-inner{
|
|
overflow: hidden;
|
|
}
|
|
.video-banner{
|
|
max-width: 850px;
|
|
}
|
|
.homebanner{
|
|
-webkit-transition: .3s ease-out;
|
|
-moz-transition: .3s ease-out;
|
|
-ms-transition: .3s ease-out;
|
|
-o-transition: .3s ease-out;
|
|
transition: .3s ease-out;
|
|
}
|
|
.fa, .fas{
|
|
font-family: "FontAwesome";
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
.fab{
|
|
font-family: "Font Awesome 5 Brands";
|
|
}
|
|
.padding0{
|
|
.layout-content-box{
|
|
&:hover{
|
|
opacity: .8;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
.layout-content-box{
|
|
padding: 0;
|
|
}
|
|
padding: 0 1em;
|
|
}
|
|
|
|
|
|
@keyframes circleboxroll {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: rotate(160deg);
|
|
}
|
|
100% {
|
|
transform: translateY(60vh) rotate(320deg);
|
|
}
|
|
}
|
|
.circlebox{
|
|
&:before{
|
|
content: "";
|
|
position: fixed;
|
|
opacity: .15;
|
|
background:#09cbc2;
|
|
border-radius: 100%;
|
|
z-index: 0;
|
|
clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
|
|
}
|
|
&:after{
|
|
content: "";
|
|
position: fixed;
|
|
opacity: .25;
|
|
// background: #00356a61;
|
|
// border-radius: 100%;
|
|
z-index: 0;
|
|
background: url(/assets/circlebox.png) no-repeat;
|
|
display: block;
|
|
width: 300px;
|
|
height:300px;
|
|
background-size: contain;
|
|
}
|
|
@media(max-width:768px){
|
|
&:before{
|
|
bottom: 0;
|
|
right: -35vw;
|
|
width: 80vw;
|
|
height: 80vw;
|
|
}
|
|
&:after{
|
|
width: 40vw;
|
|
height: 40vw;
|
|
bottom: 0;
|
|
left: -8vw;
|
|
}
|
|
}
|
|
@media(min-width:769px){
|
|
&:before{
|
|
top: 35px;
|
|
right: -8vw;
|
|
width: 30vw;
|
|
height: 30vw;
|
|
transform-origin: center center;
|
|
animation: circleboxroll 10s linear forwards;
|
|
animation-timeline: scroll();
|
|
}
|
|
&:after{
|
|
bottom: 0;
|
|
left: -8vw;
|
|
width: 27vw;
|
|
height: 27vw;
|
|
}
|
|
}
|
|
|
|
}
|
|
.contentwrap{
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: 2em;
|
|
padding-top: 2em;
|
|
.container{
|
|
padding-bottom: 1em!important;
|
|
padding-top: 1em!important;
|
|
}
|
|
}
|
|
.contentwrap1{
|
|
background-color:#73d0cf;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
// background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0);
|
|
padding-top: 4em;
|
|
padding-bottom: 4em;
|
|
}
|
|
.contentwrap2{
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 4em;
|
|
padding-bottom: 4em;
|
|
}
|
|
.contentwrap3{
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.iconwrap{
|
|
padding: 4em 0 0;
|
|
}
|
|
.zero{
|
|
padding: 0;
|
|
}
|
|
.i-video_data{
|
|
li{
|
|
list-style: none;
|
|
}
|
|
}
|
|
.ask-question .form-horizontal .control-label{
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
text-align: justify !important;
|
|
}
|
|
.ask-question .single-col.form-horizontal .control-group .controls{
|
|
justify-content: flex-start;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
.ask-question-form{
|
|
padding: 2em;
|
|
border-radius: 10px;
|
|
border: 1px solid #E4E6EA;
|
|
padding-bottom: 3em!important;
|
|
@media(max-width: 820px){
|
|
padding: 1.5em;
|
|
}
|
|
}
|
|
.image-carousel{
|
|
padding: 15px 0px 25px 0px;
|
|
}
|
|
.downIcon {
|
|
a{
|
|
bottom: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
position: absolute;
|
|
left: 48.8%;
|
|
bottom: 10%;
|
|
z-index:2;
|
|
display: block;
|
|
cursor: pointer;
|
|
@media(max-width:$screen-xs){
|
|
left: 45%;
|
|
}
|
|
&:hover{
|
|
transform:scale(1.1);
|
|
-webkit-transition: .3s ease-out;
|
|
-moz-transition: .3s ease-out;
|
|
-ms-transition: .3s ease-out;
|
|
-o-transition: .3s ease-out;
|
|
transition: .3s ease-out;
|
|
}
|
|
width: 3px;
|
|
padding: 10px 15px;
|
|
height: 35px;
|
|
border: 2px solid #fff;
|
|
border-radius: 25px;
|
|
opacity: 0.75;
|
|
box-sizing: content-box;
|
|
animation: move 3s ease-out 1s infinite;
|
|
}
|
|
.scroller {
|
|
width: 3px;
|
|
height: 10px;
|
|
border-radius: 25%;
|
|
background-color: #fff;
|
|
animation-name: scroll;
|
|
animation-duration: 2.2s;
|
|
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
|
|
animation-iteration-count: infinite;
|
|
}
|
|
@keyframes scroll {
|
|
0% { opacity: 0; }
|
|
10% { transform: translateY(0); opacity: 1; }
|
|
100% { transform: translateY(15px); opacity: 0;}
|
|
}
|
|
@keyframes move {
|
|
25% {
|
|
opacity: 1;
|
|
|
|
}
|
|
33% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
67% {
|
|
opacity: 1;
|
|
transform: translateY(40px);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
|
|
}
|
|
}
|
|
.moduletitle{
|
|
margin-bottom: 10px;
|
|
background:$theme-color-second;
|
|
font-size: 0.9375em;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
border-radius: 6px !important;
|
|
margin-top: 0;
|
|
padding: 8.5px 15px 8.5px;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
.je_acc{
|
|
ul{
|
|
padding: 0;
|
|
}
|
|
}
|
|
.je_acc > ul > li {
|
|
margin-bottom: 10px;
|
|
list-style: none;
|
|
a{
|
|
border:1px solid #d7d7d7;
|
|
padding: 15px 15px;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
font-weight: bold;
|
|
color: #6D6D6D;
|
|
width: 100%;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.marqueeken {
|
|
font-family: "Noto Serif TC", sans-serif;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
.scroll .text1{
|
|
font-size:1000%;
|
|
color:#f8f8f8 !important;
|
|
letter-spacing: 8px;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
animation: scroll 80s linear infinite;
|
|
-webkit-animation:scrollken 80s linear infinite;
|
|
line-height: 1;
|
|
&:nth-child(2) {
|
|
animation: scroll2 80s linear infinite;
|
|
animation-delay: -40s;
|
|
}
|
|
}
|
|
.scroll .text2{
|
|
font-size:1000%;
|
|
color:#f5f5f5;
|
|
letter-spacing: 8px;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
animation: scroll 80s linear infinite;
|
|
-webkit-animation:scrollken 80s linear infinite;
|
|
line-height: 1;
|
|
&:nth-child(2) {
|
|
animation: scroll2 80s linear infinite;
|
|
animation-delay: -40s;
|
|
}
|
|
}
|
|
}
|
|
@keyframes scrollken {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
@keyframes scroll2 {
|
|
from {
|
|
transform: translateX(0%);
|
|
}
|
|
to {
|
|
transform: translateX(-200%);
|
|
}
|
|
}
|
|
|
|
.quick > p {margin: 5px; display: flex;}
|
|
.quick .ic-list {display: flex;align-items: center;position: relative; width: 95%; margin:0 2%; background-color: #fff; border-radius: 7px; border: 2px solid #6C9ABD; text-align: left;}
|
|
.quick .ic-list.half {width: 45%; margin: 2%;}
|
|
.quick .ic-list a {
|
|
display: inline-block;
|
|
color: #000;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
padding: 1em;
|
|
padding-left: 0.5em;
|
|
}
|
|
.quick .ic-list:before {vertical-align: middle; color: #5182a7; padding: 0; padding-left: 1em;}
|
|
.quick .hot a {color: #ff0000; font-weight: bold;}
|
|
.zt-font-ic{
|
|
overflow: hidden;
|
|
&:after{
|
|
z-index: 0;
|
|
content: '';
|
|
position: absolute;
|
|
top: -100%;
|
|
left: -100%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0) 30%,
|
|
#fff 50%,
|
|
rgba(255, 255, 255, 0) 70%
|
|
);
|
|
transform: translateX(-100%) rotate(0deg);
|
|
transition: all 1.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.zt-font-ic:hover{
|
|
background: #e1e1e1;
|
|
// a{
|
|
// color: #fff;
|
|
// }
|
|
// &:before {
|
|
// color: #fff;
|
|
// }
|
|
&:after{
|
|
transform: translateX(100%) rotate(0deg);
|
|
}
|
|
|
|
}
|
|
|
|
.section-one div img {
|
|
position: absolute;
|
|
width: 160px;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform-origin: center center;
|
|
animation: roll 10s linear forwards;
|
|
animation-timeline: scroll();
|
|
}
|
|
|
|
@keyframes roll {
|
|
0% {
|
|
transform: translateX(0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateX(50vw) rotate(450deg);
|
|
}
|
|
100% {
|
|
transform: translateX(60vw) translateY(60vh) rotate(620deg);
|
|
}
|
|
}
|
|
.quick{
|
|
&:hover{
|
|
|
|
}
|
|
}
|
|
|
|
@function random_range($min, $max) {
|
|
$rand: random();
|
|
$random_range: $min + floor($rand * (($max - $min) + 1));
|
|
@return $random_range;
|
|
}
|
|
|
|
.snow {
|
|
$total: 200;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
|
|
@for $i from 1 through $total {
|
|
$random-x: random(1000000) * 0.0001vw;
|
|
$random-offset: random_range(-100000, 100000) * 0.0001vw;
|
|
$random-x-end: $random-x + $random-offset;
|
|
$random-x-end-yoyo: $random-x + ($random-offset / 2);
|
|
$random-yoyo-time: random_range(30000, 80000) / 100000;
|
|
$random-yoyo-y: $random-yoyo-time * 100vh;
|
|
$random-scale: random(10000) * 0.0001;
|
|
$fall-duration: random_range(10, 30) * 1s;
|
|
$fall-delay: random(30) * -1s;
|
|
|
|
&:nth-child(#{$i}) {
|
|
opacity: random(10000) * 0.0001;
|
|
transform: translate($random-x, -10px) scale($random-scale);
|
|
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
|
|
}
|
|
|
|
@keyframes fall-#{$i} {
|
|
#{percentage($random-yoyo-time)} {
|
|
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
|
|
}
|
|
|
|
to {
|
|
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
|
|
}
|
|
}
|
|
}
|
|
} |