* { 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: .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); }