* { margin: 0; padding: 0; box-sizing: border-box; font-family: 微軟正黑體; } $moblie: 767px; $desktop: 1025px; 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)); */ } // basic reset body { font-family: "Montserrat", sans-serif; 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; } .copy { cursor: pointer; } .navbar { background-color: white; } .propertytitle { -webkit-text-stroke: 0.7px #fff; -moz-text-stroke: 0.7px #fff; } p { font-size: 24px; } // .bgslider{ // position: relative; // width: 100% !important; // } // ul{ // list-style-type: none; // width: 100% !important; // } // ul>li{ // position: absolute; // width: 100% !important; // } // ul>li:nth-child(3){ // animation: li3 12s infinite; // } // ul>li:nth-child(2){ // animation: li2 12s infinite; // } // ul>li:nth-child(1){ // animation: li1 12s infinite; // } // @keyframes li3{ // 0%{ // opacity: 1; // } // 35%{ // opacity: 0; // } // 75%{ // opacity: 0; // } // } // @keyframes li2{ // 40%{ // opacity: 1; // } // 80%{ // opacity: 0; // } // 75%{ // opacity: 0; // } // } // @keyframes li1{ // 80%{ // opacity: 1; // } // 95%{ // opacity: 0; // } // } .bg-item { display: none; // img{ // // opacity: 0; // // animation-name:BgFadein; // // animation-duration: 5s; // // animation-delay: -3s; // // animation-fill-mode:forwards; // // animation-fill-mode:backwards; // // animation-timing-function:ease-out; // } } .bg-item2 { display: none; img { animation-name: BgFadein; animation-duration: 3s; animation-timing-function: ease-out; } } .bg-active { display: block; } @keyframes BgFadein { 0% { opacity: 0.5; } 50% { opacity: 0.8; } // 50% {opacity: 1;} 100% { opacity: 1; } } // sec-usecase .sec-usecase { .usecase-block { border: none; position: relative; background-color: transparent; &::after { position: absolute; bottom: -1rem; left: 5%; width: 90%; height: 8rem; background-color: #ffebe2; content: " "; z-index: -1; border-radius: 2rem; margin-left: auto; margin-right: auto; } .usecase-imgfr { width: 85%; margin: 0 auto; height: 45vh; background-position: center center; background-size: contain; background-repeat: no-repeat; margin-bottom: 1.5rem; } .usecase-sub { background-color: transparent; i { color: #ea5413; } } } } .sec-steps { .container { width: 100%; } .steps-title { font-size: 3rem; text-align: center; letter-spacing: 1px; } .steps-title strong { font-size: 5rem; } .steps-block { padding: 0 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; &::after { position: absolute; bottom: -1rem; left: 0; width: 100%; height: 15rem; background-color: #ffebe2; content: " "; z-index: -1; border-radius: 2rem; } .steps-imgfr { width: 85%; margin: 0 auto; height: 45vh; background-position: center center; background-size: contain; background-repeat: no-repeat; margin-bottom: 1.5rem; } .steps-txt { display: flex; align-items: center; span { display: inline-block; width: 35px; height: 35px; background-color: #ea5413; color: white; font-size: 1.4rem; line-height: 35px; border-radius: 50%; text-align: center; margin-right: 0.6rem; } .steps-sub { font-size: 1.6rem; } } } .step-videofr { width: 100%; } .step-videofr video { width: 100%; } } .btn-dark { display: inline-block; text-decoration: none; color: white; border: 1px solid #ea5413; padding: 1rem 2.5rem; outline: none; background-color: #ea5413; margin-top: 4rem; border-radius: 3rem; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); } /* sec-hero */ .sec-hero { padding: 6rem 0; padding-bottom: 0; margin-bottom: 0 !important; h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 900; line-height: 1.1; color: #e95412; } } .sec-hero .hero-title { font-size: 48px; letter-spacing: 1px; padding-top: 0rem; } .sec-hero .hero-txt { font-size:30px; letter-spacing: 1px; } .sec-hero .hero-btn { border: none; outline: none; border-radius: 3rem; margin-top: 2rem; padding: 0.5rem 2.5rem; // background: linear-gradient(20deg, #ea5413, #920783); background:#e95412 ; color: white; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534); } .hero-orange { position: absolute; left: 10%; top: 0%; } .hero-purple { position: absolute; right: 0%; top: -10%; z-index: -1; width: 180px; } .hero-orange-s { position: absolute; left: -5%; bottom: 13%; z-index: -1; animation: floating 8s infinite ease-in-out; width: 80px; } .hero-slide{ width: 100px; z-index: 3; position: absolute; top: 1%; left: -1%; animation: floating2 5s infinite ease-in-out; } .hero-textgrp { z-index: 3; position: absolute; left: -10%; bottom: 10%; animation: floating3 6s infinite 1s ease-in-out; width: 300px; } .hero-aips{ z-index: 3; position: absolute; right: 0%; bottom: 10%; animation: floating3 6s infinite 1s ease-in-out; width: 250px; } .hero-video { z-index: 3; position: absolute; right: 10%; top: -10%; animation: floating 8s infinite 1.5s ease-in-out; width: 120px; } .hero-amplify { z-index: 3; position: absolute; bottom: 5%; right: 0; animation: floating2 5s infinite ease-in-out; width: 120px; } .hero-imgfr { width: 100%; height: 95%; } .hero-imgfr img { width: 100%; } @keyframes floating { from { transform: translate(0px, 0); } 65% { transform: translate(25px, 0); } to { transform: translate(0, -0px); } } @keyframes floating3 { from { transform: translate(0px, 0); } 65% { transform: translate(-20px, 0); } to { transform: translate(0, -0px); } } @keyframes floating2 { from { transform: translate(0px, 0); } 65% { transform: translate(0px, 30px); } to { transform: translate(0, -0px); } } .nav-link { border: none; outline: none; background-color: transparent; color: black; } /* sec-features */ .ai-spokesgril { display: flex; align-items: center; justify-content: space-between; .nav-link { border: none; outline: none; background-color: transparent; color: black; } .dropdown-toggle { text-decoration: none; &:hover { text-decoration: none; } } } .sec-features { padding: 5rem 0; } .sec-features .row { margin: 8rem 0; } .sec-features .row:nth-of-type(1) { margin: 4rem 0; } .sec-features .row:nth-of-type(4) { margin-bottom: 0; } .features-orangel { position: absolute; left: -150px; top: 5%; z-index: -1; } .features-purpler { position: absolute; right: -150px; top: 5%; z-index: -1; } .features-purplel { position: absolute; left: -150px; top: 5%; z-index: -1; } .features-oranger { position: absolute; right: -150px; top: 5%; z-index: -1; } .sec-features .row .d-block { display: none; } .sec-features .features-col { position: relative; } .sec-features .features-col .features-block { position: absolute; // left: 10rem; // top: 6rem; display: flex; opacity: 0; transition: all 0.8s; } .sec-features{ h3 { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 900; line-height: 1.1; color:#e95412; } } .sec-features .features-col .block-right { transform: translateX(-30%) scale(0.95); } .sec-features .features-col .block-left { transform: translateX(30%) scale(0.95); } .sec-features .features-col .features-block.active { opacity: 1; transform: translateX(0%) scale(1); } .sec-features .features-num { display: inline-block; font-size: 14rem; color: #f0f0f0; } .sec-features .features-title { font-size: 3rem; text-align: center; letter-spacing: 1px; padding-bottom: 6px; border-bottom: 8px solid #ea5413; display: inline-block; } .sec-features .features-title strong { font-size: 5rem; } .sec-features .features-imgfr { width: 100%; } .sec-features .features-imgfr video { width: 100%; } .sec-features .features-list { text-align: left; } .features-list { padding-left: 40px; font-size: 18px; } .sec-blogtab { padding-bottom: 5rem; } .blog-tabs { display: flex; align-items: center; } .blogtab-title { font-size: 3rem; letter-spacing: 1px; padding-bottom: 6px; border-bottom: 8px solid #ea5413; display: inline-block; text-align: center; } .blog-tabs .blog-tabs-nav { width: 35%; background-color: #f0f0f0; padding: 4rem 2.5rem; list-style: none; box-shadow: 0 2px 5px -2px rgb(173, 173, 173); text-align: left; } .blog-tabs .blog-tabs-nav li { padding: 10px; border-bottom: 1px dashed grey; } .blog-tabs .blog-tabs-nav li a { color: #ea5413; } .blog-tabs .blog-tabs-stage { width: 65%; padding: 3.5rem; padding-bottom: 6rem; box-shadow: 1px 1px 10px 2px grey; height: 48rem; overflow: hidden; text-align: left; position: relative; } .blog-tab-box { height: 90%; overflow: scroll; } .blog-tabs .blog-tabs-stage .blog-txt { font-size: 1.6rem; } .btn-light { color: black; border: 1px solid #ea5413; padding: 1rem 2.5rem; outline: none; background-color: white; margin-top: 4rem; border-radius: 3rem; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); } .btn-dark { text-decoration: none; color: white; border: 1px solid #ea5413; padding: 1rem 2.5rem; outline: none; background-color: #ea5413; margin-top: 4rem; border-radius: 3rem; font-size: 1.8rem; box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637); } .blog-tabs .btn-light { margin-top: 1.5rem; color: #ea5413; position: absolute; bottom: 1rem; left: 3.5rem; } // 影片導覽區塊 .video-int { .video-box { margin-top: 30px; .video-btn { padding: 15px 50px; width: 280px; background: #fff; font-size: 32px; } } } :fullscreen { #expand { display: none; } .home-page { @media screen and(max-width:1280px) { height: 100vh; } } .home-box { height: 350px; @media screen and(max-width:1280px) { height: 250px; } } } #compression { display: none; } // 首頁 .home-page { position: relative; height: 100vh; @media screen and(max-width:1280px) { height: 130vh; } @media screen and(max-width:1080px) { height: 100vh; } .home-box { height: 33vh; } .homebutton-box { background-image: url(./img/BG_3png.png); background-size: cover; background-repeat: no-repeat; // height: 65vh; .homebtn-icon { h1 { font-size: 32px; text-align: center; transition: 0.5s; } img { width: 100px; transition: 0.5s; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%); } &:hover { h1 { font-size: 26px; } img { transform: scale(0.75); } } } } .homepage-title { h1 { color: #e95412; font-weight: 900; font-size: 48px; } } .homepage-line { position: absolute; bottom: 50px; width: 70vw; @media screen and(max-width:1280px) { bottom: 30px; } } // #wheel{ // animation-name: wheel; // animation-duration: 10s; // } } .home-btn{ filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%); } // @keyframes wheel { // 0%{ // transform: rotate(0); // } // 100%{ // transform: rotate(10deg); // } // } // demo .demo-btn { width: 90%; margin: 0 auto; // background: #3f4c72; font-size: 32px; padding: 10px 20px; text-decoration: none; color: white; border: none; display: block; padding: 3rem 0; text-align: center; &:hover { color: white; } } .demo-box{ background:#E2E2E2; width: 90%; margin:0 auto ; .demo-card{ padding: 4rem 30px; } li{ font-size: 17px; } .demo-CTA{ color:#fff; padding: 15px 50px; font-size: 24px; transition: 1s; &:hover{ opacity: 0.7; } } } .features-nav { .dropdown-toggle { &::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } } } // 影片導覽區塊 .video-sec01 { height: 100vh; .video-int { .video-box { margin-top: 30px; .video-btn { padding: 15px 50px; width: 250px; background: #fff; font-size: 32px; } } } } #gotop { cursor: pointer; position: fixed; bottom: 50px; right: 50px; } .sec-video { height: 50vh; } .video-img { cursor: pointer; } .aboutpage{ height:100vh; }