@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; } } .scrollbox{ overflow:auto!important; } .homerightken{ background: linear-gradient(0deg, #b9b2a2 0%, #a28e69 25%, #473027 100%); border-radius: 10px; padding: 1em; } .verticalhome{ position: relative; width: 100%; overflow: hidden; z-index: 1; } .internal-page{ .layout-content{ // background: transparent; padding-bottom: 0; } } .big-banner{ width: 100%; position: relative; } .layout-content { position: relative; min-height: 42.5em; .container { @extend .response-container; } } .layout-content-inner{ overflow: hidden; } .video-banner{ max-width: 850px; margin: auto; position: relative; } .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; } .contentwrap{ overflow: hidden; position: relative; width: 100%; padding-bottom: 2em; p{ padding-bottom: 1em; } @media(min-width:769px){ padding-top: 3em; } } .contentwrap1{ overflow: hidden; position: relative; width: 100%; // background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0); padding-top: 0; padding-bottom: 0; } .contentwrap2{ overflow: hidden; position: relative; width: 100%; padding-top: 0; padding-bottom: 0; } .contentwrap3{ overflow: hidden; position: relative; width: 100%; padding-top: 1em; padding-bottom:2em; } .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:100; 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); } } .rotated{ transform: rotate(180deg); } .header-nav{ .vk_button_link_caption{ clear: both; display: block; width: 100%; } ul{ padding: 0; li{ list-style: none; padding: 1em; } } } // .page-home{ // .body-banner1{ // @media(min-width:769px){ // margin: auto; // border-radius: 1em; // overflow: hidden; // width: 50%; // } // } // } .body-banner1{ // margin-bottom: 1em; // margin-top: 2em; z-index: 1; position: relative; } .leftnav{ z-index: 2; } .home-list-unstyled{ padding: 0; .widget-content{ text-align: center; border-radius: 4px; padding-top: calc(.6em + 2px); padding-bottom: calc(.6em + 2px); margin-top: 2em; display: block; background: #17a2b8; margin-bottom: 1em; color: #fff; &:hover{ opacity: .8; -webkit-box-shadow: 0 0 0 .2rem #abb8c340; box-shadow:0 0 0 .2rem #abb8c340; } a{ color: #fff; } } } .internal-page{ .vk_borderBox_title_container{ background-color: #f68f46; border-radius: 8px 8px 0 0; } .vk_borderBox_body{ border-radius: 0 0 8px 8px; border: 2px solid #f68f46; background: transparent; } } .vk_borderBox_title_container{ background: #6f5143; color: #fff; display: flex; align-items: center; padding: 0.5em 1em; margin-top: 1em; .vk_borderBox_title{ margin: 0; } h3{ margin: 0; } } .vk_borderBox_body{ padding: 1em 3em 1em; background-color: #e3decb; border: 2px solid #6f5143; margin-bottom: 0.5em; i.fa-solid.fa-up-right-from-square { margin-right: 5px; } a{ color: #3532ef; &:hover{ color: #ce5d25; } } } //wordpress css :root { --wp--preset--aspect-ratio--square: 1; --wp--preset--aspect-ratio--4-3: 4 / 3; --wp--preset--aspect-ratio--3-4: 3 / 4; --wp--preset--aspect-ratio--3-2: 3 / 2; --wp--preset--aspect-ratio--2-3: 2 / 3; --wp--preset--aspect-ratio--16-9: 16 / 9; --wp--preset--aspect-ratio--9-16: 9 / 16; --wp--preset--color--black: #000000; --wp--preset--color--cyan-bluish-gray: #abb8c3; --wp--preset--color--white: #ffffff; --wp--preset--color--pale-pink: #f78da7; --wp--preset--color--vivid-red: #cf2e2e; --wp--preset--color--luminous-vivid-orange: #ff6900; --wp--preset--color--luminous-vivid-amber: #fcb900; --wp--preset--color--light-green-cyan: #7bdcb5; --wp--preset--color--vivid-green-cyan: #00d084; --wp--preset--color--pale-cyan-blue: #8ed1fc; --wp--preset--color--vivid-cyan-blue: #0693e3; --wp--preset--color--vivid-purple: #9b51e0; --wp--preset--color--vk-color-custom-1: #35933a; --wp--preset--color--vk-color-custom-2: #4e7a4e; --wp--preset--color--vk-color-custom-3: #7e8f63; --wp--preset--color--vk-color-custom-4: #cbe1cb; --wp--preset--color--vk-color-custom-5: #a1d746; --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%); --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%); --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%); --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%); --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%); --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%); --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%); --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%); --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%); --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%); --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%); --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%); --wp--preset--font-size--small: 0.8125em; /* 13px ÷ 16 */ --wp--preset--font-size--medium: 1.25em; /* 20px ÷ 16 */ --wp--preset--font-size--large: 2.25em; /* 36px ÷ 16 */ --wp--preset--font-size--x-large: 2.625em; /* 42px ÷ 16 */ --wp--preset--spacing--20: 0.44rem; --wp--preset--spacing--30: 0.67rem; --wp--preset--spacing--40: 1rem; --wp--preset--spacing--50: 1.5rem; --wp--preset--spacing--60: 2.25rem; --wp--preset--spacing--70: 3.38rem; --wp--preset--spacing--80: 5.06rem; --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2); --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4); --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2); --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1); --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1); } body .is-layout-flex { @media(min-width:769px){ display: flex; } } .wp-container-core-group-is-layout-4b2eccd6 { flex-direction: column; align-items: center; } @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important; } } .wp-block-columns { align-items: normal !important; box-sizing: border-box; display: flex; flex-wrap: wrap ; } :where(.wp-block-columns.is-layout-flex) { gap: 2em; } .wp-block-file__button { background: #32373c; color: #fff!important; text-decoration: none; } :where(.wp-block-file__button) { border-radius: 2em; display: inline-block; padding: .5em 1em; } .is-style-vk-group-shadow { -webkit-box-shadow: 0px 0px 5px #00000033; box-shadow: 0px 0px 5px #00000033; padding: 1.8em; margin-bottom: 1rem; } .is-layout-flex > :is(*, div) { margin: 0; } .wp-block-file:not(.wp-element-button) { font-size: .8em; margin-left: 1em; } .wp-element-button { cursor: pointer; } :where(.wp-block-columns) { margin-bottom: 1.75em; } :where(.wp-block-columns.has-background) { @media(min-width:769px){ padding: 1.25em 2.375em; } } .has-white-background-color { background-color: #ffffff !important; } .subSection-title, h3 { padding-bottom: 8px; position: relative; border-bottom: 1px solid #0000001a; } .entry-body{ a{ color: #3532ef; } .subSection-title:after, h3:after { content: "."; line-height: 0; display: block; overflow: hidden; position: absolute; bottom: -1px; width: 30%; border-bottom: 1px solid $theme-color-second; } } .is-style-vk-group-solid { border: solid 3px; padding: 1.8em; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .blockart-heading.blockart-heading-611e546e, .blockart-heading.blockart-heading-678aca74, .blockart-heading.blockart-heading-c7a50046, .blockart-heading.blockart-heading-adcd5b94, .blockart-heading.blockart-heading-e386990c { margin: 10px 0px 0px 0px; font-family: Work Sans; font-weight: 600; width: 100%; text-align: left; color: #000; } .has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .rounded-xl { border-radius: 0.75rem; } .min-h-64 { min-height: 16rem; } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:-translate-y-3:hover { --tw-translate-y: -0.75rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 782px) { .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis: 0; flex-grow: 1; } } .wp-block-cover, .wp-block-cover-image { align-items: center; background-position: 50%; box-sizing: border-box; display: flex; justify-content: center; min-height: 430px; overflow: hidden; overflow: clip; padding: 1em; position: relative; } body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__background, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__gradient-background, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__inner-container, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)).has-background-dim:not(.has-background-gradient):before { z-index: 1; } .rounded-3xl { border-radius: 1.5rem; } .rounded-2xl { border-radius: 1rem; } .mb-40 { margin-bottom: 10rem; } .has-vivid-red-color { color: #cf2e2e !important; } .is-style-vk-arrow-mark{ li{ list-style: none; } } ul.is-style-vk-arrow-mark li::before, ol.is-style-vk-arrow-mark li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; content: ""; left: -1.5em; } .wp-block-group__inner-container{ p{ margin: 0!important; } } @media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis: 100% !important; } } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:-translate-y-3:hover { --tw-translate-y: -0.75rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .duration-300 { transition-duration: 300ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .wp-block-group__inner-container{ svg{ text-align: center; width: 100%!important; height:68px!important; stroke-width: 1.5; stroke:#4e7a4e; fill: none; stroke-linecap: round; stroke-linejoin: round; } } .wp-block-button__link { font-size: 1rem; background-color:$theme-color-hover; transition: all .1s ease-in; display: block; &:hover{ background-color:$theme-color-second; } } .wp-block-button .wp-block-button__link { border-radius: 4px; margin-right: 0.5em; } .wp-block-button__link { color: #fff!important; box-shadow: none; text-decoration: none; padding: calc(.667em + 2px) calc(1.333em + 2px); font-size: 1.125em; padding-top: calc(.6em + 2px); padding-bottom: calc(.6em + 2px); } .is-style-vk-group-alert-danger { background-color: #f2dede; color: #a94442; border-radius: 3px; border: 1px solid #ebccd1; padding: 1.8em; margin-top: var(--vk-margin-elem); margin-bottom: var(--vk-margin-elem); } .vk_faq .vk_faq_title:before { content: "Q"; color: #e50000; font-weight: 500; float: left; line-height: 2; margin-right: 1em; } .vk_faq .vk_faq_content:before { content: "A"; color: #337ab7; font-weight: 500; float: left; line-height: 2; margin-right: 1em; } .vk_faq .vk_faq_content { border: none; padding:.8rem; margin: 0; position: relative; font-weight: normal; -webkit-transition: .25s; transition: .25s; } .vk_faq .vk_faq_title { border: none; padding:.8rem; margin: 0; position: relative; font-weight: bold; font-size: 16px; border-bottom: 1px dotted #0000001f; } .is-style-vk-group-shadow h2, .is-style-vk-group-shadow h3, .is-style-vk-group-shadow h4, .is-style-vk-group-shadow h5, .is-style-vk-group-shadow h6 { margin-bottom: 1rem; } :root .has-vk-color-primary-color, :root .editor-styles-wrapper .has-vk-color-primary-color { color: var(--wp--preset--color--vk-color-primary); } .is-layout-flex { flex-wrap: wrap; align-items: center; } .custom-lightbox-overlay img { transition: transform 0.3s ease; } .custom-lightbox-overlay img:hover { transform: scale(1.02); } .lightbox-close:hover { color: #ff4444; } .wp-lightbox-container button:focus, .wp-lightbox-container button:hover, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) { background-color: #5a5a5a40; border: none; } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; } .wp-lightbox-container button { transition: opacity .2s ease; } .wp-lightbox-container button { align-items: center; -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: #5a5a5a40; border: none; border-radius: 4px; cursor: zoom-in; display: flex; height: 20px; justify-content: center; padding: 0; position: absolute; right: 16px; text-align: center; top: 16px; width: 20px; z-index: 100; } figure{ position: relative; } .wp-block-details summary { cursor: pointer; &:before{ content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; /* solid 款式要加這個 */ margin-right: 6px; } } .wp-block-details[open] summary::before { content: "\f078"; /* 向下箭頭 */ } .is-style-vk-group-shadow { border-radius: 10px; } .blockart-image-f842fd31 img { opacity: 1; max-width: 1244px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); border-radius: 10px; object-fit: fill; } .vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container, .vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container { display: inline-block; } .blockart-column-8ee45efe > .blockart-column-inner, .blockart-column-a0b641da > .blockart-column-inner, .blockart-column-af52e0bc > .blockart-column-inner, .blockart-column-ca566c14 > .blockart-column-inner, .blockart-column-9e6b4196 > .blockart-column-inner, .blockart-column-0cbc73ca > .blockart-column-inner, .blockart-column-917f75db > .blockart-column-inner, .blockart-column-0d2b73b1 > .blockart-column-inner, .blockart-column-00f53cb1 > .blockart-column-inner, .blockart-column-5f6e2d4a > .blockart-column-inner, .blockart-column-b5d4ebfc > .blockart-column-inner, .blockart-column-f3bfbc38 > .blockart-column-inner, .blockart-column-4fb0d3c2 > .blockart-column-inner, .blockart-column-01e74fd2 > .blockart-column-inner { padding: 20px; border-radius: 16px; background-color: #ffffff; } .blockart-section-inner{ display: flex; position: relative; flex-wrap: wrap; } .blockart-column-inner { margin-bottom: 2em; } @media(min-width:769px){ .blockart-column-ddbc7997 { width: 50%!important; } .blockart-column-f82e5937, .blockart-column-c3ff0e65, .blockart-column-236a5142, .blockart-column-305ae6d6, .blockart-column-7f6705ba { width: 50%!important; } } .blockart-column { width: 100%; } .blockart-column-8ee45efe:hover > .blockart-column-inner, .blockart-column-a0b641da:hover > .blockart-column-inner, .blockart-column-af52e0bc:hover > .blockart-column-inner, .blockart-column-ca566c14:hover > .blockart-column-inner, .blockart-column-9e6b4196:hover > .blockart-column-inner, .blockart-column-0cbc73ca:hover > .blockart-column-inner, .blockart-column-917f75db:hover > .blockart-column-inner, .blockart-column-0d2b73b1:hover > .blockart-column-inner, .blockart-column-00f53cb1:hover > .blockart-column-inner, .blockart-column-5f6e2d4a:hover > .blockart-column-inner, .blockart-column-b5d4ebfc:hover > .blockart-column-inner, .blockart-column-f3bfbc38:hover > .blockart-column-inner, .blockart-column-4fb0d3c2:hover > .blockart-column-inner, .blockart-column-01e74fd2:hover > .blockart-column-inner { box-shadow: 0px 0px 10px 0px #00000080; } .wp-container-core-group-is-layout-cb46ffcb { flex-wrap: nowrap; justify-content: space-between; } .wp-container-core-group-is-layout-0dfbf163 { flex-wrap: nowrap; justify-content: space-between; } .has-vivid-cyan-blue-color { color: #0693e3 !important; } .membercontainer{ @media(max-width:768px){ display: flex; flex-wrap: wrap-reverse; } }