@charset "UTF-8"; /* 顏色設定 */ :root { --color-scheme: dark; --blue: #0084b4; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: beige; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #212529; --primary: #0084b4; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: beige; --danger: #dc3545; --light: #dee2e6; --dark: #212529; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: "Roboto Condensed", sans-serif; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ; } @media all { .bg-warning { color: #212529; } } @media all { #sidebar { background: #212529; } } .sidebar-close { background: transparent; } @media all { .sidebar-close { color: #f8f9fa; } } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; line-height: 1.5; text-align: left; font-size: 1rem; letter-spacing: 2px; } @media all { body { color: #f8f9fa; background-color: #212529; } } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } p { margin-top: 0; margin-bottom: 1rem; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .ms-auto { margin-left: auto !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 3rem !important; } .me-auto { margin-right: auto !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 3rem !important; } .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) / -2); margin-left: calc(var(--bs-gutter-x) / -2); } .col { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; } .w-50 { width: 50% !important; } .h-100 { height: 100% !important; } .row-cols-auto > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .row-cols-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .row-cols-2 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .row-cols-3 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; } .row-cols-4 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .row-cols-5 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; } .row-cols-6 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.6666666667%; } @media (min-width: 576px) { .col-sm { -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; } .row-cols-sm-auto > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; } .row-cols-sm-4 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.6666666667%; } .p-sm-1 { padding: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } } @media (min-width: 992px) { .col-lg { -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; } .row-cols-lg-auto > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; } .row-cols-lg-4 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 1400px) { .col-xxl { -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; } .row-cols-xxl-auto > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xxl-4 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.6666666667%; } } .toggle, [id^=drop] { display: none; } /* Change ' +' in order to change the Dropdown symbol */ li > a:after { content: ' +'; } li > a:only-child:after { content: ''; } /* Media Queries --------------------------------------------- */ .d-none { display: none !important; } .d-block { display: block !important; } @media (min-width: 576px) { .d-sm-block { display: block !important; } } @media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } } input[type="radio"][class="style"]:checked + label { color: white; background: #6666ff; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .order-1 { -webkit-box-ordinal-group: 2 !important; -ms-flex-order: 1 !important; order: 1 !important; } .order-2 { -webkit-box-ordinal-group: 3 !important; -ms-flex-order: 2 !important; order: 2 !important; } .title { font-size: 1.3rem; } .footer { color: #656565; } .footer a { color: #656565; text-decoration: none; } .footer a:hover { color: #78AD42; } .footer h5 { color: black; font-weight: 600; padding-bottom: 15px; } .footer .link { padding-bottom: 20px; } @media (min-width: 992px) { .order-lg-1 { -webkit-box-ordinal-group: 2 !important; -ms-flex-order: 1 !important; order: 1 !important; } .order-lg-2 { -webkit-box-ordinal-group: 3 !important; -ms-flex-order: 2 !important; order: 2 !important; } } /* Airspace Template SCSS */ .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .blank { height: 130px; width: 100%; background-color: white; } .btn-yellow { outline: none; border: 3px solid #FFCC00; background-color: transparent; padding: .5rem 1rem; color: #FFCC00; -webkit-transition: all .4s; transition: all .4s; } .btn-yellow:hover { background-color: rgba(255, 255, 255, 0.246); } .btn-yellow__fill { color: black; background-color: #FFCC00; -webkit-transition: all .4s; transition: all .4s; } .btn-yellow__fill:hover { background-color: #ffcc0078; } .btn-blue { display: inline-block; outline: none; border: 3px solid #2980B8; background-color: #2980B8; color: white; padding: .5rem 1rem; -webkit-transition: all .4s; transition: all .4s; } .btn-blue:hover { background-color: #0e7fc5; } .nav-link { cursor: pointer; } .hero { height: 42rem; background-position: center; background-size: cover; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 128, 184, 0.8)), to(rgba(41, 128, 184, 0.1))), url(../imgs/hero-img.jpg); background-image: linear-gradient(to bottom, rgba(41, 128, 184, 0.8), rgba(41, 128, 184, 0.1)), url(../imgs/hero-img.jpg); } .hero__imgfr { margin: 0 9rem; -webkit-transform: translateY(-90px); transform: translateY(-90px); position: relative; } @media (max-width: 992px) { .hero__imgfr { margin: 0 3rem; } } @media (max-width: 576px) { .hero__imgfr { margin: 0 0rem; } } .hero__stamp { position: absolute; left: -6rem; bottom: -4rem; width: 150px; } @media (max-width: 992px) { .hero__stamp { width: 120px; } } @media (max-width: 576px) { .hero__stamp { -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -3rem; } } .hero__underline { width: 50%; height: 6px; background-color: transparent; border: none; border-top: 2px solid black; border-bottom: 2px solid black; margin: 2.5rem auto; } .hero__h2 { font-size: 3rem; letter-spacing: 2px; } @media (max-width: 992px) { .hero__h2 { margin: 0 6rem; } } @media (max-width: 576px) { .hero__h2 { font-size: 2rem; margin: 0rem; } } .hero__p { color: black; margin: 0 12rem; } @media (max-width: 992px) { .hero__p { margin: 0 6rem; } } .text-dark { color: black; } .footer { background-color: #CAD7E6; padding: 3rem; } .footer .right-column { border-left: 1px solid black; } @media (max-width: 830px) { .footer .right-column { border-left: none; } } .footer .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .footer-aigirl { font-weight: 600; font-size: 2rem; margin-top: 1rem; margin-bottom: 2.5rem; } .footer .footer-follow { font-size: 1.6rem; margin-bottom: 1rem; color: black; font-size: 1rem; font-weight: 600; margin-top: 2rem; } .footer .footer-socials a { margin-right: 5px; } .logos { padding-bottom: 10rem; } .logos__img { width: 22rem; height: 12rem; background-size: contain; background-repeat: no-repeat; background-position: center; } @media (max-width: 576px) { .logos { padding-bottom: 3rem; } } .cards .card__imgfr { position: relative; cursor: pointer; } .cards .card__imgfr::before { content: " "; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.25); display: none; } .cards .card__imgfr:hover::before { display: block; } .cards .card__imgfr:hover .card__comingSoon { display: inline-block; } .cards .card__play { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cards .card-text { color: #848484; } .cards .card-learn { color: #2980B8; text-decoration: none; } .cards .card-body { height: 340px; } .cards .card__comingSoon { display: inline-block; border: 2px solid white; font-weight: 600; color: white; padding: .3rem; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: none; } .cards .card-img-top { height: auto; } @media (max-width: 576px) { .cards .card-img-top { height: auto; } } .condition .imgfr { position: absolute; left: 5rem; bottom: -3.5rem; width: 22rem; height: 22rem; background-image: url(../imgs/pexels-bess-hamiti-35537.png); background-size: cover; background-repeat: no-repeat; background-position: center; } @media (max-width: 860px) { .condition .imgfr { width: 16rem; height: 16rem; } } .carousels { color: black; background-color: white; } .carousels .items > .item { width: 100%; height: 16rem; } .carousels .strong { font-size: 2rem; position: relative; z-index: 2; } .carousels .strong::after { position: absolute; width: 100%; height: .8rem; background-color: #FFCC00; left: 0; bottom: 0; content: ""; z-index: -1; } .carousels .left_quotation, .carousels .right_quotation { position: absolute; } .carousels .left_quotation { left: 0; top: 0; } .carousels .right_quotation { right: 0; bottom: 0; } .footer-contacts { width: 60%; } @media (max-width: 860px) { .footer-contacts { width: 90%; } } @media (min-width: 1400px) { .hero .container { max-width: 1190px; } } @media (min-width: 1400px) { .condition .container { max-width: 1190px; } } .dropdown-menu__bg { background-color: white; } @media (max-width: 576px) { .dropdown-menu__bg { background-color: transparent; } } .dropdown-menu__bg a { color: black; } @media (max-width: 576px) { .dropdown-menu__bg a { color: white; } } /*# sourceMappingURL=style.css.map */