@charset "utf-8"; /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); */ @font-face { font-family: 'icon'; src: url('../fonts/icon.woff2') format("woff2"), url('../fonts/icon.woff') format("woff"); } @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; } :root { --light-100: #ffffff; --yellow-100: #f4e111; --base-btn-color: #269547; --base-btn-hover-color: #1c6c33; --base-link-color: #333333; --mobile-menu-bg: #f2e7df; --link-active-bg-color: var(--yellow-100); --link-base-color-100: var(--light-100); --link-bg-color-100: #5e638e; --link-bg-color-200: #328083; --link-bg-color-300: #398537; --link-bg-color-400: #677d29; --link-bg-color-500: #ae6060; --link-active-color-100: #404781; --link-active-color-200: #035f63; --link-active-color-300: #1c651a; --link-active-color-400: #465717; --link-active-color-500: #9b3535; --link-border-color-100: #9e7eca; --link-border-color-200: #3baaaa; --link-border-color-300: #62a33f; --link-border-color-400: #8c8d22; --link-border-color-500: #c3543e; --list-bullet-color-100: #9f5e95; --list-bullet-color-200: #3ca99d; --list-bullet-color-300: #62a33f; --list-bullet-color-400: #8c8d22; --list-bullet-color-500: #c3543e; --alert-color-100: #157130; --box-shadow-100: 0px 0px 5px 0px rgba(0, 0, 0, 0.4); --page-title-color: #7a3870; --h3-color: #af3a3a; --h4-color: #196a31; --table-subhead: #e2dcef; --content-header-bottom: 20px; --button-size: 40px; --swiper-arrow-color: var(--link-bg-color-100); --photo-simple-width: 360px; } /* Loader Styles */ .loader { border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid var(--link-bg-color-100); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Hide content initially */ .hidden { display: none; } [id] { scroll-margin-top: var(--page-header-height); } @layer core { html { border: 0; margin: 0 auto; padding: 0; min-height: 100vh; scroll-behavior: smooth; } body { font-family: 'Noto Sans TC', 'Roboto', Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; font-variant-ligatures: none; font-size: 18px; color: #333; line-height: 1.2; font-weight: 400; min-height: 100vh; } body { opacity: 0; } body.done { opacity: 1; } .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } *:focus-visible { outline: black solid 2px; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { max-width: 100%; } #skipToContent { float: left; margin: 0; padding: 0; width: 100%; position: relative; z-index: 5000; } #skipToContent a { background: #fff; font-size: 100%; height: 1px; overflow: hidden; position: absolute; width: 1px; } #skipToContent a:focus, #skipToContent a:active { display: inline; height: auto; left: 0; padding: 4px; top: 0; width: 180px; z-index: 1000; background: #005295; color: #fff; } .videoWrap, .youtubeWrap { position: relative; } .youtubeWrap iframe, .videoWrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .accessibility { height: 0; width: 0; display: inline-block; overflow: hidden; margin: 0; padding: 0; font-size: 0; text-indent: -9999px; } .hidden, .invisible { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; display: inline; } body { margin: 0 !important; } object { width: 100%; height: 100%; display: block; pointer-events: none; -moz-transition: width 0.25s ease 0s; -o-transition: width 0.25s ease 0s; -webkit-transition: width 0.25s ease; -webkit-transition-delay: 0s; transition: width 0.25s ease 0s; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: rgba(51, 51, 51, 0.8); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: rgba(51, 51, 51, 0.8); opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: rgba(51, 51, 51, 0.8); opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(51, 51, 51, 0.8); } ::-ms-input-placeholder { /* Microsoft Edge */ color: rgba(51, 51, 51, 0.8); } ::placeholder { /* Most modern browsers support this now. */ color: rgba(51, 51, 51, 0.8); } input:focus::-moz-placeholder { color: rgba(51, 51, 51, 1); } input:focus:-ms-input-placeholder { color: rgba(51, 51, 51, 1); } input:focus::-webkit-input-placeholder { color: rgba(51, 51, 51, 1); } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="search"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } strong { font-weight: 700; } .container { width: 100%; padding: 0 40px; margin: 0 auto; max-width: 1800px; } #wrapper { width: 100%; min-width: 320px; max-width: 3000px; min-height: 100vh; margin: 0 auto; position: relative; /* background: #ccc; */ } .hide { display: none; } #wrapper.grayscale { filter: grayscale(1); } #headerZone { position: sticky; /* z-index: 1000; */ z-index: 100; width: 100%; top: 0; left: 0; background-color: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1); -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1); box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1); } #headerTop { max-width: 2000px; display: flex; align-items: center; padding: 0 40px; } #logoWrap { padding: 12px 0 12px; flex: 1; } #logoWrap a { display: inline-block; } #logoWrap img { width: 375px; transition: width .25s ease 0s; } /* #mmenuCtrl { display: none; height: 90px; width: 52px; z-index: 2000; } #mmenuCtrl a { width: 100%; height: 100%; display: block; position: relative; } #mmenuCtrl.active { background-color: var(--base-btn-hover-color); margin-left: 10px; } */ #topNavWrap { margin-left: auto; padding: 20px 0; } #siteTools { position: relative; padding-left: 20px; height: 100%; display: flex; } #siteTools > ul { text-align: right; display: flex; position: relative; align-items: center; } #siteTools > ul > li { display: flex; } #siteTools > ul > li:not(:first-child) { margin-left: 10px; } #siteTools .header-popup-button { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--base-btn-color); transition: all .25s ease 0s; } #siteTools .header-popup-button:hover, #siteTools .header-popup-button.focus, #siteTools .header-popup-button:focus { background-color: var(--base-btn-hover-color); } #siteTools .header-popup-button span { width: 28px; height: 28px; display: block; line-height: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: 28px 28px; } #siteTools #home .header-popup-button span { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"><defs><style> .cls-1 { fill: %23fff; fill-rule: evenodd; } </style></defs><g><g data-name="圖層_1"><path class="cls-1" d="M19.8,8.5L10,1.1.2,8.5l.5,1.4h.8v9h17.2v-9h.8l.5-1.4ZM3,17.3v-9l7-5.3,7,5.3v9h-3.9v-4.6l-.8-.8h-4.7l-.8.8v4.6h-3.9ZM8.4,17.3h3.1v-3.8h-3.1v3.8Z"/></g></g></svg>'); background-size: 22px 22px; } #siteTools #bgMusic .header-popup-button span { background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.23 122.88" style="enable-background:new 0 0 104.23 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23ffffff;}</style><g><path class="st0" d="M87.9,78.04c2.74-0.48,5.33-0.4,7.6,0.13V24.82L39.05,41.03v61.95c0.03,0.34,0.05,0.69,0.05,1.03 c0,0,0,0.01,0,0.01c0,8.34-8.75,16.62-19.55,18.49C8.76,124.37,0,119.12,0,110.77c0-8.34,8.76-16.62,19.55-18.48 c4.06-0.7,7.84-0.39,10.97,0.71l0-76.26h0.47L104.04,0v85.92c0.13,0.63,0.2,1.27,0.2,1.91c0,0,0,0,0,0.01 c0,6.97-7.32,13.89-16.33,15.44c-9.02,1.56-16.33-2.83-16.33-9.8C71.57,86.51,78.88,79.59,87.9,78.04L87.9,78.04L87.9,78.04z"/></g></svg>'); background-size: 20px 20px; } #siteTools #bgMusic .header-popup-button.mute span { background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 121.06" style="enable-background:new 0 0 122.88 121.06" xml:space="preserve"><style type="text/css">.st0{fill:%23ffffff;}</style><g><path class="st0" d="M7.6,22.7c-2.91-2.12-3.56-6.2-1.44-9.12s6.2-3.56,9.11-1.44L120.2,88.64c2.91,2.12,3.55,6.2,1.43,9.12 c-2.12,2.91-6.2,3.56-9.11,1.44L7.6,22.7L7.6,22.7z M88.85,51.97V23.09l-28.42,8.16l-24.01-17.5L96.79,0v57.76L88.85,51.97 L88.85,51.97z M36.33,57.46v45.08c0.03,0.32,0.05,0.64,0.05,0.96v0.01c0,7.76-8.14,15.46-18.19,17.2C8.15,122.44,0,117.55,0,109.79 c0-7.76,8.15-15.46,18.19-17.19c3.78-0.65,7.29-0.36,10.21,0.66V51.68L36.33,57.46L36.33,57.46z M92.87,98.69 c-2.77,2.77-6.71,4.88-11.09,5.63c-8.39,1.45-15.19-2.63-15.19-9.12c-0.01-4.03,2.62-8.04,6.62-10.84L92.87,98.69L92.87,98.69z"/></g></svg>'); background-size: 20px 20px; } #siteTools #toolShare .header-popup-button span { background-image: url('../images/green-burial-icon-share.png'); } #siteTools #toolFontsize .header-popup-button span { background-image: url('data:image/svg+xml,<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><style type="text/css">.st0{fill:%23ffffff;}</style><g><path class="st0" d="M5,7.1l-4.2,11h1.5l1-2.9H8l1,2.9h1.5l-4.2-11H5z M3.8,14.1l1.9-5.1l1.9,5.1H3.8z M13.4,1.9h-1.9L8.7,9.3L9.8,12l2.7-7.5l2.8,7.6H9.8l0.7,1.8h5.4l1.6,4.3h2.2L13.4,1.9z"/></g></svg>'); background-size: 24px; } #siteTools #toolLangs .header-popup-button span { width: 40px; height: 40px; background-size: 40px 40px; } #siteTools #toolLangs .header-popup-button.langEN span { background-image: url('../images/green-burial-icon-en-white.png'); } #siteTools #toolLangs .header-popup-button.langTC span { background-image: url('../images/green-burial-icon-tc-white.png'); } #siteTools #toolLangs .header-popup-button.langSC span { background-image: url('../images/green-burial-icon-sc-white.png'); } #siteTools #mmenuBtn { display: none; } #siteTools #mmenuBtn .header-popup-button span { position: relative; display: block; width: 50%; height: 3px; background-color: var(--light-100); } #siteTools #mmenuBtn .header-popup-button span:before, #siteTools #mmenuBtn .header-popup-button span:after { position: absolute; content: ''; width: 100%; height: 3px; background-color: var(--light-100); left: 0; } #siteTools #mmenuBtn .header-popup-button span:before { top: -7px; left: 0; } #siteTools #mmenuBtn .header-popup-button span:after { top: 7px; left: 0; } #siteTools .header-popup-button span { font-size: 0; } /* site Tool subnav */ #siteTools .subnav { position: absolute; background-color: var(--base-btn-color); opacity: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; pointer-events: none; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; } #siteTools .subnav:before { content: ""; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--base-btn-color); top: -7px; } #siteTools .subnav a { display: none; } #siteTools > ul > li { position: relative; } #siteTools > ul > li.active > .subnav a { display: block; text-align: center; } #siteTools > ul > li.active > .subnav { opacity: 1; pointer-events: visible; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2); } #siteTools > ul > li > a > span { position: relative; } #siteTools > ul > li:not(#mmenuBtn) > a > span:before { content: ""; position: absolute; width: 38px; height: 38px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--base-btn-color); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease 0s; } #siteTools > ul > li > a:hover > span:before, #siteTools > ul > li > a.focus > span:before, #siteTools > ul > li.active > a > span:before { opacity: 1; } #siteTools > ul > li > a.header-popup-button > span:after { font-family: icon; display: block; font-size: 21px; position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: var(--primary-light); line-height: 21px; transition: color 0.3s ease 0s; } #siteTools > ul > li > a.header-popup-button:hover > span:after, #siteTools > ul > li:focus-within > a.header-popup-button > span:after, #siteTools > ul > li > a.header-popup-button:focus > span:after, #siteTools > ul > li.active > a.header-popup-button > span:after { color: var(--white); } #toolLangs a.trigger > span, #toolFontsize > a > span, #toolShare > a > span, #toolSearch > a > span { background-position: 50% 50%; background-repeat: no-repeat; background-size: 20px 20px; transition: background 0.3s ease 0s; } #toolLangs .subnav, #toolShare .subnav { position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 10px); color: #fff; padding: 15px 0; z-index: 1000; } #toolLangs .subnav:before, #toolShare .subnav:before { left: 50%; transform: translateX(-50%); opacity: 0; } #toolLangs.active .subnav:before, #toolShare.active .subnav:before { opacity: 1; } #toolLangs .subnav > a, #toolShare .subnav > a { padding: 0 10px; line-height: 40px; } #toolLangs .subnav > a.selected, #toolLangs .subnav > a:hover, #toolLangs .subnav > a.focus { color: #ebd639; } #toolLangs.active .subnav, #toolShare.active .subnav { opacity: 1; transform: translate(-50%, 0px); } #toolFontsize.active > a > span:after, #toolFontsize > a:hover > span:after, #toolFontsize > a.focus > span:after { color: var(--light-100) !important; } #toolShare .subnav a { background-repeat: no-repeat; background-position: 50% 50%; background-size: 20px 20px; text-indent: -9999px; font-size: 0; width: 40px; color: var(--base-btn-hover-color); line-height: 40px; } #toolLangs .subnav > a.selected, #toolLangs .subnav > a:hover, #toolLangs .subnav > a.focus, #toolShare .subnav > a.selected, #toolShare .subnav > a:hover, #toolShare .subnav > a.focus { color: var(--light-100); background-color: var(--base-btn-hover-color); } #toolShare .subnav a.btnEmail { background-image: url('data:image/svg+xml,<svg data-name="圖層_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path fill="%23ffffff" class="st1" d="M704.5,137.9c-35.3-32.8-84-46.3-137.8-46.3H233.3c-53.8,0-102.5,13.5-137.8,46.3-35.7,33.1-53.8,82.3-53.8,145.4v233.3c0,63.1,18.2,112.3,53.8,145.4,35.3,32.8,84,46.3,137.8,46.3h333.3c53.8,0,102.5-13.5,137.8-46.3,35.7-33.1,53.8-82.3,53.8-145.4v-233.3c0-63.1-18.2-112.3-53.8-145.4ZM663.4,570.1h0c-8.9,8.9-23.6,8.9-32.5,0l-160-160-14.9,11.5c-33,25.5-79.1,25.5-112.1,0l-12.3-9.5-160.2,160.2c-8.9,8.9-23.6,8.9-32.5,0h0c-8.9-8.9-8.9-23.6,0-32.5l156-156-136-105.1c-10.9-8.4-12.9-24.1-4.5-35.1,8.4-10.9,24.1-12.9,35.1-4.5l184.9,142.9c15,11.6,35.9,11.6,51,0l184.9-142.9c10.9-8.4,26.6-6.4,35.1,4.5,8.4,10.9,6.4,26.6-4.5,35.1l-133.3,103,155.8,155.8c8.9,8.9,8.9,23.6,0,32.5Z"/></svg>'); } #toolShare .subnav a.btnWhatsapp { background-image: url('data:image/svg+xml,<svg enable-background="new 0 0 50 50" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" class="st0" d="M40.5,9.5c-4.1-4.1-9.6-6.4-15.4-6.4c-12,0-21.7,9.7-21.7,21.7c0,3.8,1,7.6,2.9,10.9L3.2,46.9l11.5-3c3.2,1.7,6.7,2.6,10.4,2.6h0c12,0,21.7-9.7,21.7-21.7C46.8,19,44.6,13.6,40.5,9.5zM25.1,42.9L25.1,42.9c-3.2,0-6.4-0.9-9.2-2.5L15.2,40l-6.8,1.8l1.8-6.7l-0.4-0.7C8,31.5,7,28.2,7,24.8c0-9.9,8.1-18,18.1-18c4.8,0,9.4,1.9,12.8,5.3s5.3,7.9,5.3,12.8C43.1,34.8,35,42.9,25.1,42.9z"/><path fill="%23ffffff" class="st0" d="M36,30c-0.1-0.2-0.5-0.4-1-0.6c-0.5-0.3-3.2-1.6-3.7-1.8c-0.5-0.2-0.9-0.3-1.2,0.3c-0.4,0.5-1.4,1.8-1.7,2.1c-0.3,0.4-0.6,0.4-1.2,0.1c-0.5-0.3-2.3-0.8-4.4-2.7c-1.6-1.4-2.7-3.2-3-3.8c-0.3-0.5,0-0.8,0.2-1.1c0.6-0.7,1.2-1.5,1.4-1.9c0.2-0.4,0.1-0.7,0-1c-0.1-0.3-1.2-2.9-1.7-4c-0.4-1.1-0.9-0.9-1.2-0.9c-0.3,0-0.7,0-1,0c-0.4,0-0.9,0.1-1.4,0.7c-0.5,0.5-1.9,1.9-1.9,4.5c0,2.7,1.9,5.2,2.2,5.6c0.3,0.4,3.8,5.8,9.3,8.2c1.3,0.6,2.3,0.9,3.1,1.1c1.3,0.4,2.5,0.4,3.4,0.2c1-0.2,3.2-1.3,3.7-2.6C36.2,31.3,36.2,30.2,36,30z"/></svg>'); } #toolShare .subnav a.btnFacebook { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path fill="%23ffffff" d="M82.66,45.23c0-20.79-16.86-37.65-37.66-37.65S7.34,24.43,7.34,45.23c0,18.72,13.66,34.25,31.55,37.16l.22.03v-26.31h-9.56v-10.89h9.56v-8.29c-.05-.42-.07-.91-.07-1.4,0-7.34,5.95-13.29,13.29-13.29.35,0,.71.02,1.05.04h-.05c3.01.04,5.92.31,8.77.78l-.34-.05v9.27h-4.75c-.22-.03-.46-.05-.72-.05-3.01,0-5.44,2.44-5.44,5.44,0,.17,0,.34.02.51v-.02s0,7.06,0,7.06h10.44l-1.67,10.89h-8.77v26.31c18.11-2.95,31.77-18.48,31.78-37.2h0Z" style="stroke-width:0px;"/></svg>') } #mainNavWrap { position: relative; background-color: var(--light-100); /* z-index: 500; */ transition: opacity .25s ease 0s, height .2s ease 0s, transform .35s ease 0s, z-index .35s ease 0s; } #mainNavWrap.mobile.scrollDown { z-index: -1; height: 0; opacity: 0; transform: translateY(-75px); } #mainNav > ul { position: relative; z-index: 100; display: flex; justify-content: center; /* max-width: 1320px; */ margin: 0 auto; } #mainNav > ul > li { position: relative; text-align: center; max-width: 230px; width: calc((100% - 12%) / 5); transition: height .25s ease 0s, opacity .25s ease 0s; } #mainNav > ul > li.hidden { height: 0; opacity: 0; } #mainNav > ul > li:not(:last-child) { margin-right: 3%; } .nav-item { background-color: transparent; border-top-left-radius: 30px; border-top-right-radius: 30px; } .nav-item.active:nth-child(1), .nav-item.selected:nth-child(1), .nav-item:hover:nth-child(1) { background-color: var(--link-bg-color-100); } .nav-item.active:nth-child(2), .nav-item.selected:nth-child(2), .nav-item:hover:nth-child(2) { background-color: var(--link-bg-color-200); } .nav-item.active:nth-child(3), .nav-item.selected:nth-child(3), .nav-item:hover:nth-child(3) { background-color: var(--link-bg-color-300); } .nav-item.active:nth-child(4), .nav-item.selected:nth-child(4), .nav-item:hover:nth-child(4) { background-color: var(--link-bg-color-400); } .nav-item.active:nth-child(5), .nav-item.selected:nth-child(5), .nav-item:hover:nth-child(5) { background-color: var(--link-bg-color-500); } .nav-item:before { content: ''; position: absolute; display: inline-block; width: 15px; height: 15px; top: 25px; right: -27px; opacity: .5; transform: rotate(-45deg); /* border-width: 0 8px 8px 0; */ } .nav-item:nth-child(1):before { border-right: 3px solid var(--link-border-color-100); border-bottom: 3px solid var(--link-border-color-100); } .nav-item:nth-child(2):before { border-right: 3px solid var(--link-border-color-200); border-bottom: 3px solid var(--link-border-color-200); } .nav-item:nth-child(3):before { border-right: 3px solid var(--link-border-color-300); border-bottom: 3px solid var(--link-border-color-300); } .nav-item:nth-child(4):before { /* border-right: 3px solid var(--link-border-color-400); */ /* border-bottom: 3px solid var(--link-border-color-400); */ width: 3px; top: 32px; padding: 0; height: 20px; border: 0; background-color: var(--link-border-color-400); transform: translateY(-50%) rotate(30deg); } .nav-item:nth-child(5):before { content: none; } .nav-item .nav-link { display: flex; justify-content: center; align-items: center; padding: 10px 10px 40px; } .nav-item .nav-link .title { font-size: 1.111em; font-weight: 700; transition: all .25s ease 0s; } .nav-item.active .nav-link .title, .nav-item.selected .nav-link .title, .nav-item .nav-link:hover .title, .nav-item .nav-link.focus .title { color: var(--light-100); } .nav-item .nav-link .icon { display: block; min-width: 40px; height: 40px; margin-right: 0.5rem; background-size: 40px 40px; background-position: 50% 50%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><line x1="13.35" y1="82.74" x2="13.35" y2="63.48" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="27.76" cy="20.6" r="13.34" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="54.43" cy="36.05" r="13.34" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M63.94,59.39s-3.3,12.6-17.97,14.33" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M44.74,81.54s29.16,1.12,31-28.31" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M38.89,36.05h-18.34c-2.58,0-5.07.91-7.01,2.61-4.03,3.52-6.98,12.8-1.41,22.69,8.28,14.71,14.33,19.14,21.78,20.65,6.27,1.27,12.94,1.65,12.94-5.32,0-9.04-13.57,1.26-22.07-17.49" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><path d="M80.94,48.25c0,4.44-1.43,4.27-5.88,4.27s-10.22.18-10.22-4.27,3.6-8.05,8.05-8.05,8.05,3.6,8.05,8.05Z" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><line x1="71.91" y1="82.74" x2="71.91" y2="67.94" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><line x1="43.5" y1="48.76" x2="43.5" y2="71.72" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/></svg>'); } .nav-item:nth-child(1) .nav-link .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><line x1="13.35" y1="82.74" x2="13.35" y2="63.48" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="27.76" cy="20.6" r="13.34" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="54.43" cy="36.05" r="13.34" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M63.94,59.39s-3.3,12.6-17.97,14.33" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M44.74,81.54s29.16,1.12,31-28.31" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><path d="M38.89,36.05h-18.34c-2.58,0-5.07.91-7.01,2.61-4.03,3.52-6.98,12.8-1.41,22.69,8.28,14.71,14.33,19.14,21.78,20.65,6.27,1.27,12.94,1.65,12.94-5.32,0-9.04-13.57,1.26-22.07-17.49" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><path d="M80.94,48.25c0,4.44-1.43,4.27-5.88,4.27s-10.22.18-10.22-4.27,3.6-8.05,8.05-8.05,8.05,3.6,8.05,8.05Z" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><line x1="71.91" y1="82.74" x2="71.91" y2="67.94" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/><line x1="43.5" y1="48.76" x2="43.5" y2="71.72" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:4px;"/></svg>'); } .nav-item:nth-child(1).selected .nav-link .icon, .nav-item:nth-child(1).active .nav-link .icon, .nav-item:nth-child(1) .nav-link.focus .icon, .nav-item:nth-child(1) .nav-link:hover .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><line x1="13.35" y1="82.74" x2="13.35" y2="63.48" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="27.76" cy="20.6" r="13.34" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><circle cx="54.43" cy="36.05" r="13.34" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><path d="M63.94,59.39s-3.3,12.6-17.97,14.33" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><path d="M44.74,81.54s29.16,1.12,31-28.31" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><path d="M38.89,36.05h-18.34c-2.58,0-5.07.91-7.01,2.61-4.03,3.52-6.98,12.8-1.41,22.69,8.28,14.71,14.33,19.14,21.78,20.65,6.27,1.27,12.94,1.65,12.94-5.32,0-9.04-13.57,1.26-22.07-17.49" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M80.94,48.25c0,4.44-1.43,4.27-5.88,4.27s-10.22.18-10.22-4.27,3.6-8.05,8.05-8.05,8.05,3.6,8.05,8.05Z" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><line x1="71.91" y1="82.74" x2="71.91" y2="67.94" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><line x1="43.5" y1="48.76" x2="43.5" y2="71.72" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/></svg>'); } .nav-item:nth-child(2) .nav-link .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M25.19,12.48c1.34-1.4,3.23-2.28,5.31-2.28h0c4.04,0,7.35,3.31,7.35,7.35h0c0,4.04-3.31,7.35-7.35,7.35h0c-2.52,0-5.61-2.9-6.93-4.85" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><path d="M40.57,44.17v-12.01c0-1.63-1.61-2.05-2.96-2.96-1.22-.82-5.55-3.17-7.39-3.17l-5.97,1.87" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><path d="M64.8,12.88c-1.35-1.63-3.39-2.67-5.66-2.67h0c-4.04,0-7.35,3.31-7.35,7.35h0c0,4.04,3.31,7.35,7.35,7.35h0c2.47,0,5.33.05,7.9-4.17" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><path d="M49.08,44.17v-12.01c0-1.63,1.66-1.98,2.96-2.96,1.6-1.21,6.52-3.07,8.36-3.07l4.59,2.31" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><rect x="10.5" y="8.11" width="14.7" height="14.7" rx="7.19" ry="7.19" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:3px;"/><path d="M32.1,43.91v-10.31c0-1.9-7.8-6.24-9.93-6.24h-8.64c-2.14,0-9.93,4.34-9.93,6.24v18.91c0,1.9,1.55,3.45,3.45,3.45.82,0,1.57-.3,2.16-.78v22.39c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32v-7.05" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:3px;"/><rect x="64.8" y="8.11" width="14.7" height="14.7" rx="7.19" ry="7.19" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:3px;"/><path d="M63.51,70.52v7.05c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32v-22.39c.59.48,1.34.78,2.16.78,1.9,0,3.45-1.55,3.45-3.45v-18.91c0-1.9-7.8-6.24-9.93-6.24h-8.64c-2.14,0-9.93,4.34-9.93,6.24v10.61" style="fill:none; stroke:%2399538e; stroke-miterlimit:10; stroke-width:3px;"/><path d="M26.31,51.42h36.89s-.27-6.42-5.88-6.42h-25.13s-5.88-1.34-5.88,6.42Z" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:4px;"/><rect x="24.66" y="65.05" width="40.14" height="5.35" rx="1.28" ry="1.28" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:4px;"/><line x1="26.26" y1="50.77" x2="26.26" y2="66.07" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:4px;"/><line x1="63.2" y1="50.77" x2="63.2" y2="66.07" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:4px;"/><path d="M40.87,56.97c-.67-1.96-2.52-3.36-4.7-3.36s-4.03,1.41-4.7,3.36h-1.41c-.89,0-1.62.72-1.62,1.61s.72,1.61,1.62,1.61h1.41c.67,1.96,2.52,3.36,4.7,3.36s4.03-1.41,4.7-3.36h4.14v-3.21h-4.14ZM36.17,61.49c-1.61,0-2.92-1.31-2.92-2.92s1.31-2.92,2.92-2.92,2.92,1.31,2.92,2.92-1.31,2.92-2.92,2.92Z" style="fill:%2399538e; stroke-width:0px;"/><path d="M48.92,60.18c.67,1.96,2.52,3.36,4.7,3.36s4.03-1.41,4.7-3.36h1.41c.89,0,1.62-.72,1.62-1.61s-.72-1.61-1.62-1.61h-1.41c-.67-1.96-2.52-3.36-4.7-3.36s-4.03,1.41-4.7,3.36h-5.05v3.21h5.05ZM53.62,55.65c1.61,0,2.92,1.31,2.92,2.92s-1.31,2.92-2.92,2.92-2.92-1.31-2.92-2.92,1.31-2.92,2.92-2.92Z" style="fill:%2399538e; stroke-width:0px;"/></svg>'); } .nav-item:nth-child(2).selected .nav-link .icon, .nav-item:nth-child(2).active .nav-link .icon, .nav-item:nth-child(2) .nav-link.focus .icon, .nav-item:nth-child(2) .nav-link:hover .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M25.19,12.48c1.34-1.4,3.23-2.28,5.31-2.28h0c4.04,0,7.35,3.31,7.35,7.35h0c0,4.04-3.31,7.35-7.35,7.35h0c-2.52,0-5.61-2.9-6.93-4.85" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M40.57,44.17v-12.01c0-1.63-1.61-2.05-2.96-2.96-1.22-.82-5.55-3.17-7.39-3.17l-5.97,1.87" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M64.8,12.88c-1.35-1.63-3.39-2.67-5.66-2.67h0c-4.04,0-7.35,3.31-7.35,7.35h0c0,4.04,3.31,7.35,7.35,7.35h0c2.47,0,5.33.05,7.9-4.17" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M49.08,44.17v-12.01c0-1.63,1.66-1.98,2.96-2.96,1.6-1.21,6.52-3.07,8.36-3.07l4.59,2.31" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><rect x="10.5" y="8.11" width="14.7" height="14.7" rx="7.19" ry="7.19" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M32.1,43.91v-10.31c0-1.9-7.8-6.24-9.93-6.24h-8.64c-2.14,0-9.93,4.34-9.93,6.24v18.91c0,1.9,1.55,3.45,3.45,3.45.82,0,1.57-.3,2.16-.78v22.39c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32v-7.05" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><rect x="64.8" y="8.11" width="14.7" height="14.7" rx="7.19" ry="7.19" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M63.51,70.52v7.05c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32c0,2.38,1.94,4.32,4.32,4.32s4.32-1.94,4.32-4.32v-22.39c.59.48,1.34.78,2.16.78,1.9,0,3.45-1.55,3.45-3.45v-18.91c0-1.9-7.8-6.24-9.93-6.24h-8.64c-2.14,0-9.93,4.34-9.93,6.24v10.61" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><path d="M26.31,51.42h36.89s-.27-6.42-5.88-6.42h-25.13s-5.88-1.34-5.88,6.42Z" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><rect x="24.66" y="65.05" width="40.14" height="5.35" rx="1.28" ry="1.28" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><line x1="26.26" y1="50.77" x2="26.26" y2="66.07" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><line x1="63.2" y1="50.77" x2="63.2" y2="66.07" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><path d="M40.87,56.97c-.67-1.96-2.52-3.36-4.7-3.36s-4.03,1.41-4.7,3.36h-1.41c-.89,0-1.62.72-1.62,1.61s.72,1.61,1.62,1.61h1.41c.67,1.96,2.52,3.36,4.7,3.36s4.03-1.41,4.7-3.36h4.14v-3.21h-4.14ZM36.17,61.49c-1.61,0-2.92-1.31-2.92-2.92s1.31-2.92,2.92-2.92,2.92,1.31,2.92,2.92-1.31,2.92-2.92,2.92Z" style="fill:%23ffffff; stroke-width:0px;"/><path d="M48.92,60.18c.67,1.96,2.52,3.36,4.7,3.36s4.03-1.41,4.7-3.36h1.41c.89,0,1.62-.72,1.62-1.61s-.72-1.61-1.62-1.61h-1.41c-.67-1.96-2.52-3.36-4.7-3.36s-4.03,1.41-4.7,3.36h-5.05v3.21h5.05ZM53.62,55.65c1.61,0,2.92,1.31,2.92,2.92s-1.31,2.92-2.92,2.92-2.92-1.31-2.92-2.92,1.31-2.92,2.92-2.92Z" style="fill:%23ffffff; stroke-width:0px;"/></svg>'); } .nav-item:nth-child(3) .nav-link .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M79.89,30.41c1.7.28,2.96,1.76,2.96,3.49,0,1.96-1.59,3.55-3.55,3.55h-35.63v-13.49c.78.08,36.22,6.45,36.22,6.45ZM12.8,37.56c3.13,0,5.64-2.54,5.64-5.64s-2.51-5.64-5.64-5.64-5.64,2.54-5.64,5.64c0,3.13,2.51,5.64,5.64,5.64ZM25.58,37.45h10.56c1.96,0,3.52-1.56,3.52-3.52v-10.36c0-1.28-.95-2.37-2.21-2.46-1.4-.08-2.54,1.01-2.54,2.37v7.54c0,.61-.5,1.12-1.12,1.12s-1.12-.5-1.12-1.12v-5.87c-3.6,1.17-6.95,3.1-9.69,5.84-.78.81-1.45,2.43-1.09,3.77.47,1.62,1.98,2.71,3.69,2.68Z" style="fill:none; stroke:%233baaaa; stroke-miterlimit:10; stroke-width:3px;"/><polygon points="6.61 68.89 83.39 68.89 83.39 65.12 81.92 60.27 81.92 43.34 8.25 43.34 8.25 59.15 6.61 64.29 6.61 68.89" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:4px;"/><line x1="35.27" y1="62.82" x2="54.73" y2="62.82" style="fill:none; stroke:%2399538e; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/><line x1="35.27" y1="62.82" x2="54.73" y2="62.82" style="fill:none; stroke:%2399538e; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/></svg>'); } .nav-item:nth-child(3).selected .nav-link .icon, .nav-item:nth-child(3).active .nav-link .icon, .nav-item:nth-child(3) .nav-link.focus .icon, .nav-item:nth-child(3) .nav-link:hover .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M79.89,30.41c1.7.28,2.96,1.76,2.96,3.49,0,1.96-1.59,3.55-3.55,3.55h-35.63v-13.49c.78.08,36.22,6.45,36.22,6.45ZM12.8,37.56c3.13,0,5.64-2.54,5.64-5.64s-2.51-5.64-5.64-5.64-5.64,2.54-5.64,5.64c0,3.13,2.51,5.64,5.64,5.64ZM25.58,37.45h10.56c1.96,0,3.52-1.56,3.52-3.52v-10.36c0-1.28-.95-2.37-2.21-2.46-1.4-.08-2.54,1.01-2.54,2.37v7.54c0,.61-.5,1.12-1.12,1.12s-1.12-.5-1.12-1.12v-5.87c-3.6,1.17-6.95,3.1-9.69,5.84-.78.81-1.45,2.43-1.09,3.77.47,1.62,1.98,2.71,3.69,2.68Z" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/><polygon points="6.61 68.89 83.39 68.89 83.39 65.12 81.92 60.27 81.92 43.34 8.25 43.34 8.25 59.15 6.61 64.29 6.61 68.89" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:4px;"/><line x1="35.27" y1="62.82" x2="54.73" y2="62.82" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/><line x1="35.27" y1="62.82" x2="54.73" y2="62.82" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/></svg>'); } .nav-item:nth-child(4) .nav-link .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M45.64,6.44s-9.85,8.44-9.85,16.61,3.94,9.73,9.85,9.73c7.16,0,10.13-3.82,10.13-9.45s-7.6-16.04-10.13-16.89Z" style="fill:none; stroke:%2399538e; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/><path d="M67.05,52.14s-3.41-5.45-4.82-6.02,1.69-6.29-5.35-9.01-10.13,5.7-10.13,5.7c0,0-2.25-2.32-6.47-1.76s-6.61,3.41-6.61,3.41c0,0-3.52-1.94-6.05,0s-3.1,5.24-3.1,5.24" style="fill:none; fill-rule:evenodd; stroke:%233baaaa; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/><path d="M16.93,83.56s3.94-5.07,9.57-5.35c5.63-.28,34.62,0,34.62,0,0,0,9.29-6.72,15.48-14.9s9.01-14.94,9.01-14.94c0,0,0-4.22-2.25-5.35s-4.22,2.39-7.88,6.68-9.19,13-11.91,14.94" style="fill:none; fill-rule:evenodd; stroke:%23269547; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><path d="M38.61,66.6h21.95s2.81-.76,2.81-5.55c0-2.46-3.1-2.46-3.1-2.46h-12.38s-3.66-8.88-16.89-8.88c-14.07,0-14.07,16.89-14.07,16.89" style="fill:none; fill-rule:evenodd; stroke:%23269547; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><line x1="16.93" y1="63.31" x2="5.96" y2="63.19" style="fill:none; stroke:%23269547; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><polyline points="43.72 19.61 47.85 24.7 47.85 40.86" style="fill:none; stroke:%2399538e; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/><line x1="48.77" y1="23.26" x2="42.79" y2="28.78" style="fill:none; stroke:%2399538e; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/></svg>'); } .nav-item:nth-child(4).selected .nav-link .icon, .nav-item:nth-child(4).active .nav-link .icon, .nav-item:nth-child(4) .nav-link.focus .icon, .nav-item:nth-child(4) .nav-link:hover .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M45.64,6.44s-9.85,8.44-9.85,16.61,3.94,9.73,9.85,9.73c7.16,0,10.13-3.82,10.13-9.45s-7.6-16.04-10.13-16.89Z" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/><path d="M67.05,52.14s-3.41-5.45-4.82-6.02,1.69-6.29-5.35-9.01-10.13,5.7-10.13,5.7c0,0-2.25-2.32-6.47-1.76s-6.61,3.41-6.61,3.41c0,0-3.52-1.94-6.05,0s-3.1,5.24-3.1,5.24" style="fill:none; fill-rule:evenodd; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:3px;"/><path d="M16.93,83.56s3.94-5.07,9.57-5.35c5.63-.28,34.62,0,34.62,0,0,0,9.29-6.72,15.48-14.9s9.01-14.94,9.01-14.94c0,0,0-4.22-2.25-5.35s-4.22,2.39-7.88,6.68-9.19,13-11.91,14.94" style="fill:none; fill-rule:evenodd; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><path d="M38.61,66.6h21.95s2.81-.76,2.81-5.55c0-2.46-3.1-2.46-3.1-2.46h-12.38s-3.66-8.88-16.89-8.88c-14.07,0-14.07,16.89-14.07,16.89" style="fill:none; fill-rule:evenodd; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><line x1="16.93" y1="63.31" x2="5.96" y2="63.19" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-linejoin:round; stroke-width:4px;"/><polyline points="43.72 19.61 47.85 24.7 47.85 40.86" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/><line x1="48.77" y1="23.26" x2="42.79" y2="28.78" style="fill:none; stroke:%23ffffff; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px;"/></svg>'); } .nav-item:nth-child(5) .nav-link .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M72.1,34.88c-.07-.09-.03-.21.07-.26.97-.47,1.63-1.42,1.63-2.5,0-1.55-1.36-2.82-3.02-2.82H18.29c-1.66,0-3.02,1.27-3.02,2.82,0,1.08.66,2.03,1.63,2.5.1.05.14.17.07.26-4.21,5.94-6.7,13.29-6.7,21.24,0,11.05,4.8,20.92,12.35,27.48.04.03.06.08.06.13v2.24c0,1.77,1.55,3.22,3.44,3.22h36.82c1.89,0,3.44-1.45,3.44-3.22v-2.24c0-.05.02-.1.06-.13,7.54-6.56,12.35-16.43,12.35-27.48,0-7.95-2.49-15.3-6.7-21.24ZM64.1,80.99c-.79.68-1.22,1.69-1.22,2.74v1.76c0,.1-.08.18-.18.18H26.37c-.1,0-.18-.08-.18-.18v-1.76c0-1.04-.43-2.05-1.22-2.74-7.11-6.16-11.19-15.22-11.19-24.88,0-7.05,2.13-13.75,6.17-19.37.63-.87.82-1.98.52-3.02-.1-.33-.24-.65-.43-.93h48.99c-.19.29-.33.6-.43.93-.3,1.03-.11,2.14.52,3.02,4.03,5.62,6.17,12.32,6.17,19.37,0,9.65-4.08,18.72-11.19,24.88Z" style="fill:%233baaaa; stroke-width:0px;"/><path d="M72.3,20.67c-5.09-7.18-13.43-11.87-22.93-13.06.01-.15.02-.3.02-.45,0-2.67-2.15-4.83-4.81-4.86-.14,0-.29.04-.41.11-4.16,2.22-4.57,3.69-4.49,5.03,0,.1-.06.18-.16.19-9.42,1.23-17.7,5.9-22.76,13.04-.56.79-.84,1.77-.67,2.72.31,1.74,1.8,2.91,3.46,2.91h49.94c1.66,0,3.14-1.17,3.46-2.91.17-.95-.11-1.93-.67-2.72ZM19.93,22.79c-.15,0-.24-.17-.15-.29,4.58-6.33,12.51-10.75,21.73-11.56,1-.09,2.01-.15,3.03-.15s2.04.06,3.03.15c9.21.81,17.14,5.23,21.73,11.56.09.12,0,.29-.15.29H19.93Z" style="fill:%233baaaa; stroke-width:0px;"/><path d="M44.2,53.28h-.53c-4.79,0-8.68,3.89-8.68,8.68v3.44h17.89v-3.44c0-4.79-3.89-8.68-8.68-8.68Z" style="fill:%2399538e; stroke-width:0px;"/><path d="M43.94,52.95c2.82,0,5.11-2.3,5.11-5.12s-2.29-5.11-5.11-5.11-5.11,2.29-5.11,5.11,2.29,5.12,5.11,5.12Z" style="fill:%2399538e; stroke-width:0px;"/><rect x="32.91" y="37.44" width="21.76" height="27.53" rx="2.95" ry="2.95" style="fill:none; stroke:%23269547; stroke-miterlimit:10; stroke-width:3px;"/></svg>'); } .nav-item:nth-child(5).selected .nav-link .icon, .nav-item:nth-child(5).active .nav-link .icon, .nav-item:nth-child(5) .nav-link.focus .icon, .nav-item:nth-child(5) .nav-link:hover .icon { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="_圖層_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M72.1,34.88c-.07-.09-.03-.21.07-.26.97-.47,1.63-1.42,1.63-2.5,0-1.55-1.36-2.82-3.02-2.82H18.29c-1.66,0-3.02,1.27-3.02,2.82,0,1.08.66,2.03,1.63,2.5.1.05.14.17.07.26-4.21,5.94-6.7,13.29-6.7,21.24,0,11.05,4.8,20.92,12.35,27.48.04.03.06.08.06.13v2.24c0,1.77,1.55,3.22,3.44,3.22h36.82c1.89,0,3.44-1.45,3.44-3.22v-2.24c0-.05.02-.1.06-.13,7.54-6.56,12.35-16.43,12.35-27.48,0-7.95-2.49-15.3-6.7-21.24ZM64.1,80.99c-.79.68-1.22,1.69-1.22,2.74v1.76c0,.1-.08.18-.18.18H26.37c-.1,0-.18-.08-.18-.18v-1.76c0-1.04-.43-2.05-1.22-2.74-7.11-6.16-11.19-15.22-11.19-24.88,0-7.05,2.13-13.75,6.17-19.37.63-.87.82-1.98.52-3.02-.1-.33-.24-.65-.43-.93h48.99c-.19.29-.33.6-.43.93-.3,1.03-.11,2.14.52,3.02,4.03,5.62,6.17,12.32,6.17,19.37,0,9.65-4.08,18.72-11.19,24.88Z" style="fill:%23ffffff; stroke-width:0px;"/><path d="M72.3,20.67c-5.09-7.18-13.43-11.87-22.93-13.06.01-.15.02-.3.02-.45,0-2.67-2.15-4.83-4.81-4.86-.14,0-.29.04-.41.11-4.16,2.22-4.57,3.69-4.49,5.03,0,.1-.06.18-.16.19-9.42,1.23-17.7,5.9-22.76,13.04-.56.79-.84,1.77-.67,2.72.31,1.74,1.8,2.91,3.46,2.91h49.94c1.66,0,3.14-1.17,3.46-2.91.17-.95-.11-1.93-.67-2.72ZM19.93,22.79c-.15,0-.24-.17-.15-.29,4.58-6.33,12.51-10.75,21.73-11.56,1-.09,2.01-.15,3.03-.15s2.04.06,3.03.15c9.21.81,17.14,5.23,21.73,11.56.09.12,0,.29-.15.29H19.93Z" style="fill:%23ffffff; stroke-width:0px;"/><path d="M44.2,53.28h-.53c-4.79,0-8.68,3.89-8.68,8.68v3.44h17.89v-3.44c0-4.79-3.89-8.68-8.68-8.68Z" style="fill:%23ffffff; stroke-width:0px;"/><path d="M43.94,52.95c2.82,0,5.11-2.3,5.11-5.12s-2.29-5.11-5.11-5.11-5.11,2.29-5.11,5.11,2.29,5.12,5.11,5.12Z" style="fill:%23ffffff; stroke-width:0px;"/><rect x="32.91" y="37.44" width="21.76" height="27.53" rx="2.95" ry="2.95" style="fill:none; stroke:%23ffffff; stroke-miterlimit:10; stroke-width:3px;"/></svg>'); } .nav-item .nav-link .step { position: absolute; display: block; left: 50%; bottom: -25px; font-size: 1.111em; font-weight: 700; text-align: center; padding: 12px 5px; white-space: nowrap; width: 100%; min-width: 95px; /* max-width: 95px; */ max-width: 130px; border: 3px solid var(--light-100); border-radius: 50px; box-shadow: var(--box-shadow-100); -webkit-box-shadow: var(--box-shadow-100); -moz-box-shadow: var(--box-shadow-100); color: var(--light-100); background-color: var(--link-bg-color-100); transform: translateX(-50%); transition: all .25s ease 0s; } .nav-item:nth-child(1) .nav-link .step { background-color: var(--link-bg-color-100); } .nav-item:nth-child(2) .nav-link .step { background-color: var(--link-bg-color-200); } .nav-item:nth-child(3) .nav-link .step { background-color: var(--link-bg-color-300); } .nav-item:nth-child(4) .nav-link .step { background-color: var(--link-bg-color-400); } .nav-item:nth-child(5) .nav-link .step { background-color: var(--link-bg-color-500); } .nav-item.active .nav-link .step, .nav-item:hover .nav-link .step, .nav-item .nav-link.focus .step { display: none; } .nav-item.selected .nav-link .step { background-color: var(--yellow-100); min-width: 115px; max-width: 115px; font-size: 1.333em; bottom: -35px; } .nav-item:nth-child(1).active.nav-link .step, .nav-item:nth-child(1).selected .nav-link .step, .nav-item:nth-child(1):hover .nav-link .step, .nav-item:nth-child(1) .nav-link.focus .step { color: var(--link-active-color-100); } .nav-item:nth-child(2).active.nav-link .step, .nav-item:nth-child(2).selected .nav-link .step, .nav-item:nth-child(2):hover .nav-link .step, .nav-item:nth-child(2) .nav-link.focus .step { color: var(--link-active-color-200); } .nav-item:nth-child(3).active.nav-link .step, .nav-item:nth-child(3).selected .nav-link .step, .nav-item:nth-child(3):hover .nav-link .step, .nav-item:nth-child(3) .nav-link.focus .step { color: var(--link-active-color-300); } .nav-item:nth-child(4).active.nav-link .step, .nav-item:nth-child(4).selected .nav-link .step, .nav-item:nth-child(4):hover .nav-link .step, .nav-item:nth-child(4) .nav-link.focus .step { color: var(--link-active-color-400); } .nav-item:nth-child(5).active.nav-link .step, .nav-item:nth-child(5).selected .nav-link .step, .nav-item:nth-child(5):hover .nav-link .step, .nav-item:nth-child(5) .nav-link.focus .step { color: var(--link-active-color-500); } .nav-item .subnav { width: 335px; max-width: 335px; position: absolute; left: 50%; top: 53%; transform: translateX(-50%); border-radius: 20px; opacity: 0; pointer-events: none; text-align: left; z-index: 100; /* transform: translate(-50%, 20px); */ transition: all .3s ease 0s; } /* .nav-item:first-child .subnav { left: 0; transform: translateX(-20px); } .nav-item:last-child .subnav { left: inherit; right: 20px; transform: translateX(20px); } */ .nav-item.active .subnav { pointer-events: visible; opacity: 1; /* transform: translate(50%, 0); */ /* top: 63%; */ top: 100%; } .nav-item:nth-child(1) .subnav { border: 8px solid rgba(158, 126, 202, .5); } .nav-item:nth-child(2) .subnav { border: 8px solid rgba(59, 170, 170, .5); } .nav-item:nth-child(3) .subnav { border: 8px solid rgba(98, 163, 63, .5); } .nav-item:nth-child(4) .subnav { border: 8px solid rgba(140, 141, 34, .5); } .nav-item:nth-child(5) .subnav { border: 8px solid rgba(195, 84, 62, .5); } .nav-item .subnav .popup_title { position: relative; font-size: 1.333em; padding: 8px 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: var(--light-100); transition: all .25s ease 0s; z-index: -1; } .nav-item:nth-child(1) .subnav .popup_title { background-color: var(--link-bg-color-100); } .nav-item:nth-child(2) .subnav .popup_title { background-color: var(--link-bg-color-200); } .nav-item:nth-child(3) .subnav .popup_title { background-color: var(--link-bg-color-300); } .nav-item:nth-child(4) .subnav .popup_title { background-color: var(--link-bg-color-400); } .nav-item:nth-child(5) .subnav .popup_title { background-color: var(--link-bg-color-500); } .nav-item .subnav .section-title { padding: 15px 20px 5px 20px; background-color: var(--light-100); } .nav-item .subnav .section-title a { /* display: inline-block; */ font-size: 1.555em; border-bottom: 1px solid transparent; transition: all .25s ease 0s; } .nav-item .subnav .section-title a:hover, .nav-item .subnav .section-title a.focus { border-bottom: 1px solid #333333; } .nav-item:nth-child(1) .subnav .section-title { color: var(--link-bg-color-100); } .nav-item:nth-child(2) .subnav .section-title { color: var(--link-bg-color-200); } .nav-item:nth-child(3) .subnav .section-title { color: var(--link-bg-color-300); } .nav-item:nth-child(4) .subnav .section-title { color: var(--link-bg-color-400); } .nav-item:nth-child(5) .subnav .section-title { color: var(--link-bg-color-500); } .nav-item .subnav ul { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: var(--light-100); padding: 5px 20px 20px; position: relative; z-index: -1; } .nav-item .subnav-item { position: relative; padding-left: 1.25rem; margin-bottom: 8px; } .nav-item .subnav-item:last-child { margin-bottom: 0; } .nav-item .subnav-item:before { content: ''; position: absolute; width: 8px; height: 8px; top: 10px; left: 0; border-radius: 50%; z-index: 1; } .nav-item:nth-child(1) .subnav-item:before { background-color: var(--list-bullet-color-100); } .nav-item:nth-child(2) .subnav-item:before { background-color: var(--list-bullet-color-200); } .nav-item:nth-child(3) .subnav-item:before { background-color: var(--list-bullet-color-300); } .nav-item:nth-child(4) .subnav-item:before { background-color: var(--list-bullet-color-400); } .nav-item:nth-child(5) .subnav-item:before { background-color: var(--list-bullet-color-500); } .nav-item .subnav-item:after { content: ''; position: absolute; width: 4px; height: 4px; background-color: var(--light-100); top: 12px; left: 2px; border-radius: 50%; z-index: 2; } .nav-item .subnav-link { /* display: inline-block; */ border-bottom: 1px solid transparent; font-size: 1.222em; transition: all .25s ease 0s; } .nav-item .subnav-link:hover, .nav-item .subnav-link.focus { text-decoration: none; border-bottom: 1px solid #000000; } /*mainNav css ends*/ #mainZone { position: relative; background-color: #fff; } #footerMain { max-width: 2000px; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; color: #333; font-size: 0.833em; } #footerMain > div { padding: 15px 0; } ul#footerNav { overflow: hidden; } ul#footerNav li { position: relative; display: inline-block; padding-right: 10px; margin-right: 10px; margin-bottom: 10px; } ul#footerNav li:before { content: ""; background-color: #cbcbcb; width: 1px; height: 13px; position: absolute; top: 50%; transform: translateY(-50%); left: -10px; } ul#footerNav li a { border-bottom: 1px solid transparent; transition: color 0.25s ease 0s, border-color 0.25s ease 0s; } ul#footerNav li a:hover { border-bottom: 1px solid #333333; } .footerCopyright > div { display: inline-block; position: relative; padding-left: 30px; color: #000; } .footerCopyright > div:before { content: ""; width: 1px; height: 15px; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); } .footerCopyright > div:first-child { padding-left: 0; } .footerCopyright > div:first-child:before { display: none; } .footerRight { display: flex; align-items: center; max-width: 450px; flex: 1; margin-left: 1.25rem; } .footerRight > div { margin-left: auto; } .footerRight a { display: inline-block; margin-left: 20px; line-height: 0; vertical-align: middle; } .footerRight a:first-child { margin-left: 0; } /*mobile menu css starts*/ #mobileBgLayer { position: fixed; width: 100%; height: 100%; background-color: #000; opacity: 0.5; z-index: 9997; left: 0; top: 0; } #mobileNavWrap { position: fixed; width: 100%; /* height: calc(100% - 80px); */ height: 100%; top: -100%; opacity: 1; z-index: 999; display: none; background: var(--mobile-menu-bg); transition: top 0.5s ease 0s; } .showMMenu #mobileNavWrap { display: block; } #mobileNavWrap.show { top: 0; z-index: 9999; } #mobileNav { overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; } #mobileMenu { padding: 10px 0; } .mobileMenuHeader { padding: 10px 20px; display: flex; justify-content: space-between; } .mobileMenuHeader a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--base-btn-hover-color); } .mobileMenuHeader span { position: relative; width: 18px; height: 3px; background-color: var(--light-100); font-size: 0; transform: rotate(45deg); } .mobileMenuHeader span:before { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 3px; background-color: var(--light-100); transform: translate(-50%, -50%) rotate(-90deg); } .mobileMenuHeader .m_toolLangs { display: flex; } .mobileMenuHeader .m_toolLangs a:not(:last-child) { margin-right: .75rem; } .mobileMenuHeader .m_toolLangs a { background-color: #dfd5cd; transition: background-color .25s ease 0s; } .mobileMenuHeader .m_toolLangs a:hover, .mobileMenuHeader .m_toolLangs a.selected { background-color: var(--base-btn-hover-color); } .mobileMenuHeader .m_toolLangs span { color: #333333; background-color: transparent; width: inherit; height: inherit; font-size: 20px; line-height: 40px; font-weight: 500; text-align: center; transform: inherit; transition: color .25s ease 0s; } .mobileMenuHeader .m_toolLangs a:hover span, .mobileMenuHeader .m_toolLangs a.selected span { color: var(--light-100); transition: color .25s ease 0s; } .mobileMenuHeader .m_toolLangs span:before { content: none; } .shareWrap { margin: 5px 0; } .socialmedia { display: flex; padding: 0 20px; } .socialmedia a:not(:last-child) { margin-right: 15px; } .socialmedia a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .socialmedia span { font-size: 0; display: block; text-indent: -9999px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; transition: all .25s ease 0s; } .socialmedia .btnEmail span { background-image: url('data:image/svg+xml,<svg data-name="圖層_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path fill="%23269547" class="st1" d="M704.5,137.9c-35.3-32.8-84-46.3-137.8-46.3H233.3c-53.8,0-102.5,13.5-137.8,46.3-35.7,33.1-53.8,82.3-53.8,145.4v233.3c0,63.1,18.2,112.3,53.8,145.4,35.3,32.8,84,46.3,137.8,46.3h333.3c53.8,0,102.5-13.5,137.8-46.3,35.7-33.1,53.8-82.3,53.8-145.4v-233.3c0-63.1-18.2-112.3-53.8-145.4ZM663.4,570.1h0c-8.9,8.9-23.6,8.9-32.5,0l-160-160-14.9,11.5c-33,25.5-79.1,25.5-112.1,0l-12.3-9.5-160.2,160.2c-8.9,8.9-23.6,8.9-32.5,0h0c-8.9-8.9-8.9-23.6,0-32.5l156-156-136-105.1c-10.9-8.4-12.9-24.1-4.5-35.1,8.4-10.9,24.1-12.9,35.1-4.5l184.9,142.9c15,11.6,35.9,11.6,51,0l184.9-142.9c10.9-8.4,26.6-6.4,35.1,4.5,8.4,10.9,6.4,26.6-4.5,35.1l-133.3,103,155.8,155.8c8.9,8.9,8.9,23.6,0,32.5Z"/></svg>'); } .socialmedia .btnFacebook span { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path fill="%23269547" d="M82.66,45.23c0-20.79-16.86-37.65-37.66-37.65S7.34,24.43,7.34,45.23c0,18.72,13.66,34.25,31.55,37.16l.22.03v-26.31h-9.56v-10.89h9.56v-8.29c-.05-.42-.07-.91-.07-1.4,0-7.34,5.95-13.29,13.29-13.29.35,0,.71.02,1.05.04h-.05c3.01.04,5.92.31,8.77.78l-.34-.05v9.27h-4.75c-.22-.03-.46-.05-.72-.05-3.01,0-5.44,2.44-5.44,5.44,0,.17,0,.34.02.51v-.02s0,7.06,0,7.06h10.44l-1.67,10.89h-8.77v26.31c18.11-2.95,31.77-18.48,31.78-37.2h0Z" style="stroke-width:0px;"/></svg>'); } .socialmedia .btnWeiBo span { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path fill="%23269547" d="M38.88,71.81c-12.81,1.26-23.88-4.53-24.71-12.95-.83-8.4,8.88-16.25,21.7-17.52,12.82-1.27,23.88,4.52,24.71,12.93.84,8.38-8.88,16.27-21.69,17.52h-.01ZM35.5,61.81c-1.25,1.99-3.89,2.84-5.89,1.94-1.98-.89-2.55-3.2-1.31-5.13,1.22-1.91,3.79-2.77,5.78-1.93,2,.84,2.64,3.12,1.42,5.12ZM39.59,56.58c-.45.76-1.45,1.13-2.22.8-.77-.29-1.02-1.16-.58-1.89.45-.73,1.41-1.11,2.16-.77.77.29,1.02,1.16.58,1.94l.05-.09ZM40.16,47.81c-6.1-1.58-12.98,1.46-15.64,6.83-2.69,5.49-.09,11.56,6.06,13.55,6.39,2.06,13.91-1.09,16.53-7.01,2.58-5.78-.64-11.74-6.96-13.37ZM64.51,43.87c-1.11-.34-1.84-.58-1.31-1.98,1.21-3.15,1.36-5.81,0-7.75-2.52-3.57-9.38-3.38-17.27-.09,0,0-2.47,1.06-1.84-.88,1.21-3.91,1.02-7.16-.87-9.05-4.31-4.3-15.69.15-25.4,9.93-7.26,7.31-11.47,15.05-11.47,21.73,0,12.82,16.42,20.6,32.48,20.6,21.05,0,35.06-12.24,35.06-21.97,0-5.86-4.98-9.18-9.38-10.57v.03ZM70.67,27.48c-2.48-2.77-6.15-3.82-9.54-3.11-1.41.29-2.28,1.65-1.99,3.01.29,1.35,1.65,2.23,3.01,1.94,1.65-.34,3.43.14,4.64,1.5s1.5,3.15,1.02,4.74c-.44,1.31.29,2.76,1.64,3.2,1.31.39,2.77-.34,3.2-1.65,1.07-3.28.39-7.02-2.07-9.78l.1.15ZM78.46,20.41c-5.08-5.66-12.58-7.8-19.5-6.34-1.6.33-2.62,1.89-2.28,3.49s1.89,2.62,3.49,2.28c4.93-1.07,10.25.48,13.84,4.45,3.57,4.01,4.6,9.47,3.04,14.22-.53,1.55.34,3.25,1.89,3.72,1.55.54,3.2-.33,3.72-1.89,2.18-6.72.78-14.42-4.3-20.08l.1.15Z" style="stroke-width:0px;"/></svg>'); } .socialmedia .btnWhatsapp span { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><defs><style> .st0 { fill: %23269547; } </style></defs><path class="st0" d="M396.4,50.9c-189.6,0-344.7,155.1-342.6,346.9,0,64.6,19.4,127.1,51.7,181l8.6,12.9-34.5,127.1,129.3-32.3,12.9,6.5c53.9,32.3,114.2,47.4,174.5,47.4,189.6,0,344.7-155.1,344.7-344.7S593,50.9,396.4,50.9ZM599.3,504.2c-2.2,10.8-4.3,21.5-8.6,30.2-2.2,4.3-6.5,8.6-10.8,12.9-4.3,4.3-8.6,6.5-12.9,10.8l-4.3,4.3c-4.3,4.3-8.6,4.3-15.1,8.6-8.6,4.3-21.5,8.6-32.3,8.6h-21.5c-6.5-2.2-15.1-2.2-21.5-4.3-58.2-15.1-109.9-43.1-155.1-81.9-4.3-6.5-10.8-10.8-17.2-17.2l-8.6-8.6c-34.5-32.3-60.3-68.9-79.7-109.9l-2.2-6.5c-6.5-15.1-10.8-32.3-10.8-49.6s8.6-47.4,23.7-66.8c4.3-4.3,6.5-8.6,10.8-12.9,4.3-2.2,8.6-6.5,12.9-8.6l2.2-2.2c4.3,0,8.6-2.2,12.9-2.2h23.7c6.5,2.2,10.8,4.3,15.1,10.8,6.5,12.9,32.3,71.1,34.5,81.9,2.2,6.5,0,15.1-4.3,21.5-4.3,4.3-6.5,10.8-10.8,15.1-6.5,6.5-15.1,17.2-15.1,17.2-2.2,2.2-2.2,6.5-2.2,10.8,2.2,4.3,2.2,6.5,4.3,8.6l2.2,4.3c10.8,19.4,25.9,36.6,40.9,51.7,4.3,4.3,10.8,8.6,15.1,12.9,17.2,17.2,38.8,30.2,62.5,40.9l10.8,4.3c2.2,2.2,6.5,4.3,8.6,4.3h2.2c4.3,0,8.6-2.2,10.8-6.5,30.2-34.5,32.3-36.6,32.3-36.6,4.3-2.2,8.6-4.3,15.1-4.3s4.3,2.2,6.5,2.2c21.5,10.8,56,25.9,56,25.9l23.7,10.8c4.3,2.2,6.5,4.3,6.5,4.3v15.1h-.3Z"/></svg>'); } /* #mobileMenu a { font-size: 0.889em; line-height: 1em; } */ .mainNav_m { background-color: var(--light-100); } .mainNav_m a, .mainNav_m span { display: block; } .mainNav_m > ul > li { border-bottom: 1px solid var(--light-100); position: relative; } .mainNav_m > ul > li:nth-child(1) { background-color: var(--link-bg-color-100); } .mainNav_m > ul > li:nth-child(2) { background-color: var(--link-bg-color-200); } .mainNav_m > ul > li:nth-child(3) { background-color: var(--link-bg-color-300); } .mainNav_m > ul > li:nth-child(4) { background-color: var(--link-bg-color-400); } .mainNav_m > ul > li:nth-child(5) { background-color: var(--link-bg-color-500); } .mainNav_m .nav-link { display: inline-block; position: relative; padding: 12px 20px 12px 20px; width: calc(100% - 55px); } .mainNav_m .hasSubnav button { display: block; position: absolute; width: 40px; height: 100%; top: 3px; right: 15px; text-indent: -9999px; cursor: pointer; } .mainNav_m .hasSubnav button:before { content: ''; position: absolute; left: 50%; top: 13px; width: 12px; height: 12px; border-left: 2px solid var(--light-100); border-bottom: 2px solid var(--light-100); transform: translateX(-50%) rotate(-45deg); transition: all .25s ease 0s; } .mainNav_m .hasSubnav.active button:before { top: 20px; transform: translateX(-50%) rotate(135deg); } /* .mainNav_m>ul>li:nth-child(1).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-100); border-bottom: 2px solid var(--link-active-color-100); } .mainNav_m>ul>li:nth-child(2).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-200); border-bottom: 2px solid var(--link-active-color-200); } .mainNav_m>ul>li:nth-child(3).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-300); border-bottom: 2px solid var(--link-active-color-300); } .mainNav_m>ul>li:nth-child(4).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-400); border-bottom: 2px solid var(--link-active-color-400); } .mainNav_m>ul>li:nth-child(5).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-500); border-bottom: 2px solid var(--link-active-color-500); } .mainNav_m>ul>li:nth-child(6).hasSubnav.active .nav-link:before { border-left: 2px solid var(--link-active-color-100); border-bottom: 2px solid var(--link-active-color-100); } */ .mainNav_m .nav-link span { display: flex; align-items: center; font-size: 18px; line-height: 24px; color: var(--light-100); transition: color .25s ease 0s; font-weight: 700; } .mainNav_m .nav-link .textImg { display: inline-block; margin-left: 20px; line-height: 1; width: 18px; height: 22px; background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 30 30"><path d="M16,23.8c-4,1.3-8.7,2.5-14.2,3.5l-.5-2.7c6.8-1.3,11.7-2.4,14.5-3.4l.2,2.6ZM28.7,22.6c-.6,4.2-1.8,6.2-3.8,6.2s-1.6-.4-2.6-1.1-1.7-1.9-2.4-3.4c-1.7,1.7-3.4,3.3-5.2,4.6l-2.1-1.9c2.7-1.9,4.8-3.8,6.3-5.6-1-3.6-1.6-8.1-1.8-13.5H1.4v-2.7h15.5c0-1,0-2.3,0-3.9h2.8c0,1.6,0,2.9,0,3.9h8.8v2.7h-8.7c.1,4.1.5,7.6,1.2,10.5,1.5-2.6,2.7-5.4,3.6-8.6l2.5.9c-1.2,4.3-2.9,8-5.1,11.1.5,1.3,1,2.2,1.5,2.8s.9.9,1.2.9.3,0,.4-.2.3-.6.5-1.6.4-1.9.5-2.8l2.6,1.4ZM14.5,19.8H3.1v-9.1h11.4v9.1ZM11.8,17.2v-4h-5.8v4h5.8ZM26.6,3.1l-1.9,1.8c-.8-.7-1.8-1.5-3-2.2l1.9-1.8c1.3.7,2.3,1.4,2.9,2.1Z" style="fill: %23ffffff;"/></svg>'); background-position: 50% 50%; background-size: contain; } /* .mainNav_m>ul>li:nth-child(1).hasSubnav.active .nav-link span { color: var(--link-active-color-100); } .mainNav_m>ul>li:nth-child(2).hasSubnav.active .nav-link span { color: var(--link-active-color-200); } .mainNav_m>ul>li:nth-child(3).hasSubnav.active .nav-link span { color: var(--link-active-color-300); } .mainNav_m>ul>li:nth-child(4).hasSubnav.active .nav-link span { color: var(--link-active-color-400); } .mainNav_m>ul>li:nth-child(5).hasSubnav.active .nav-link span { color: var(--link-active-color-500); } */ .mainNav_m .subnav ul { max-height: 0; overflow: hidden; background: var(--light-100); transition: max-height .5s ease 0s; } .mainNav_m > ul > li.hasSubnav.active .subnav ul { max-height: 1000px; } .mainNav_m .subnav ul li { padding: 5px 20px; font-size: 1.25rem; } .mainNav_m .subnav ul li.sectionTitle { padding: 0.75rem 1.25rem 0.5rem; font-size: 1.5rem; font-weight: 500; } .mainNav_m > ul > li:nth-child(1) .subnav ul li.sectionTitle { color: var(--link-bg-color-100); } .mainNav_m > ul > li:nth-child(2) .subnav ul li.sectionTitle { color: var(--link-bg-color-200); } .mainNav_m > ul > li:nth-child(3) .subnav ul li.sectionTitle { color: var(--link-bg-color-300); } .mainNav_m > ul > li:nth-child(4) .subnav ul li.sectionTitle { color: var(--link-bg-color-400); } .mainNav_m > ul > li:nth-child(5) .subnav ul li.sectionTitle { color: var(--link-bg-color-500); } .mainNav_m > ul > li:nth-child(1) .subnav ul li.sectionTitle { color: var(--link-bg-color-100); } .mainNav_m .subnav ul li:not(.sectionTitle) { position: relative; padding: 10px 20px 10px 45px; /* font-weight: 600; */ } .mainNav_m .subnav ul li:not(.sectionTitle):before { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid var(--link-active-color-100); background-color: var(--light-100); top: 0.85em; left: 25px; border-radius: 50%; z-index: 1; } .mainNav_m > ul > li:nth-child(1).hasSubnav .subnav ul li:not(.sectionTitle):before { border: 2px solid var(--link-active-color-100); } .mainNav_m > ul > li:nth-child(2).hasSubnav .subnav ul li:not(.sectionTitle):before { border: 2px solid var(--link-active-color-200); } .mainNav_m > ul > li:nth-child(3).hasSubnav .subnav ul li:not(.sectionTitle):before { border: 2px solid var(--link-active-color-300); } .mainNav_m > ul > li:nth-child(4).hasSubnav .subnav ul li:not(.sectionTitle):before { border: 2px solid var(--link-active-color-400); } .mainNav_m > ul > li:nth-child(5).hasSubnav .subnav ul li:not(.sectionTitle):before { border: 2px solid var(--link-active-color-500); } .mainNav_m > ul > li:nth-child(1).hasSubnav .subnav ul li:not(.sectionTitle) a { transition: all .25s ease 0s; } .mainNav_m > ul > li:nth-child(1).hasSubnav .subnav ul li:not(.sectionTitle) a:hover, .mainNav_m > ul > li:nth-child(1).hasSubnav .subnav ul li:not(.sectionTitle) a.focus { color: var(--link-active-color-100); ; } .mainNav_m > ul > li:nth-child(2).hasSubnav .subnav ul li:not(.sectionTitle) a:hover, .mainNav_m > ul > li:nth-child(2).hasSubnav .subnav ul li:not(.sectionTitle) a.focus { color: var(--link-active-color-200); ; } .mainNav_m > ul > li:nth-child(3).hasSubnav .subnav ul li:not(.sectionTitle) a:hover, .mainNav_m > ul > li:nth-child(3).hasSubnav .subnav ul li:not(.sectionTitle) a.focus { color: var(--link-active-color-300); ; } .mainNav_m > ul > li:nth-child(4).hasSubnav .subnav ul li:not(.sectionTitle) a:hover, .mainNav_m > ul > li:nth-child(4).hasSubnav .subnav ul li:not(.sectionTitle) a.focus { color: var(--link-active-color-400); ; } .mainNav_m > ul > li:nth-child(5).hasSubnav .subnav ul li:not(.sectionTitle) a:hover, .mainNav_m > ul > li:nth-child(5).hasSubnav .subnav ul li:not(.sectionTitle) a.focus { color: var(--link-active-color-500); ; } /* .mainNav_m .subnav ul li:not(.sectionTitle):after { content: ''; position: absolute; width: 4px; height: 4px; background-color: var(--light-100); top: 50%; left: 27px; border-radius: 50%; transform: translateY(-50%); z-index: 2; } */ /*mobile menu css ends*/ #backToTop { position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px; border: 3px solid rgba(255, 255, 255, .5); opacity: 0; transition: background-color 0.5s ease 0s, opacity 0.3s ease 0s; z-index: 1000; text-indent: -9999px; color: var(--light-100); background-color: var(--list-bullet-color-100); visibility: hidden; border-radius: 50%; } #backToTop:hover, #backToTop.focus { background-color: #5e638e; color: var(--light-100); } #backToTop:before { content: ""; height: 14px; width: 14px; display: block; border: 2px solid currentColor; border-left-width: 0; border-bottom-width: 0; transform-origin: left top; transform: rotate(-45deg) translate(-50%, -50%); position: absolute; top: 50%; left: 50%; margin-top: 4px; transition: border-color 0.3s ease 0s; } #backToTop.fixed { position: absolute; bottom: 0; } #backToTop.fixed { bottom: 20px; } #backToTop.active { opacity: 1; visibility: visible; } #wrapper.showMMenu #backToTop { visibility: hidden; } .fancybox-content { max-width: 800px; } /*inside*/ #insideVisualWrap { height: 200px; overflow: hidden; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; } /* #insideVisualWrap.loaded { } */ #secTitle { font-size: 2.778em; color: var(--primary-dark); font-weight: 700; text-transform: uppercase; display: flex; align-items: center; height: 100%; z-index: 100; } /* #pageTitle { position: relative; display: inline-block; padding-right: 50px; margin-bottom: 30px; font-size: 2.111em; color: var(--page-title-color); font-weight: 600; } */ /* #pageTitle:before { content: ''; position: absolute; width: 40px; height: 40px; right: 0; top: -5px; background-repeat: no-repeat; background-size: 40px 40px; background-position: 50% 50%; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g id="red-flower2"><path d="M39.85,30.49s1.49-24.41-15.83-27.46c-8.48-1.23-11.72,17.27,4.15,30.84C14.96,30.33-1.05,40.24,1.01,50.58c2.06,10.34,25.29,1.84,31.47-5.23-16.53,15.61-10.1,31.3-3.29,31.67,6.81.37,19.52-9.1,15.9-29.16,12.55,14.98,33.59,14.78,34.06,3.58.47-11.2-20.08-13.27-31.9-14.57,21.77-8.94,24.37-19.95,23.04-25.64-1.33-5.7-19.73-9.63-30.44,19.26Z" style="fill:%23ff6540; stroke-width:0px;"/><path d="M41.39,31.39s3.29-11.99,14.64-19.21c-6.51,6.7-10.31,14.16-10.78,15.94-.47,1.78,16.61-14.75,16.61-14.75,0,0-10.85,12.8-11.42,15.28-.57,2.48,15.66-9.28,15.66-9.28-6.57,8.08-14.72,12.41-19.68,14.87-4.97,2.46-5.03-2.85-5.03-2.85Z" style="fill:%23fe4d18; stroke-width:0px;"/><path d="M33.14,34.71s-10.19-7.14-13.16-20.25c4.12,8.38,9.87,14.47,11.38,15.52,1.51,1.04-8.3-20.61-8.3-20.61,0,0,8.4,14.53,10.54,15.9,2.14,1.37-3.47-17.87-3.47-17.87,5.39,8.91,6.74,18.04,7.38,23.54.64,5.5-4.38,3.77-4.38,3.77Z" style="fill:%23fe4d18; stroke-width:0px;"/><path d="M33.34,40.96s-8.36,9.21-21.74,10.52c8.83-3.04,15.59-7.98,16.82-9.35,1.23-1.37-21.49,5.66-21.49,5.66,0,0,15.46-6.52,17.09-8.47,1.62-1.95-18.16,1.21-18.16,1.21,9.51-4.24,18.74-4.43,24.28-4.38,5.54.05,3.2,4.81,3.2,4.81Z" style="fill:%23fe4d18; stroke-width:0px;"/><path d="M41.02,44.75s3.16,12.03-3.05,23.96c2.28-9.06,1.83-17.42,1.35-19.19-.48-1.78-6.99,21.09-6.99,21.09,0,0,2.99-16.51,2.24-18.94-.75-2.43-8.91,15.87-8.91,15.87,1.65-10.28,6.52-18.11,9.59-22.73,3.07-4.62,5.78-.05,5.78-.05Z" style="fill:%23fe4d18; stroke-width:0px;"/><path d="M45.38,40.13s12.02-3.2,23.97,2.96c-9.07-2.24-17.43-1.76-19.2-1.28-1.77.49,21.11,6.92,21.11,6.92,0,0-16.52-2.93-18.95-2.17-2.43.76,15.9,8.85,15.9,8.85-10.29-1.61-18.14-6.45-22.77-9.5-4.63-3.05-.07-5.78-.07-5.78Z" style="fill:%23fe4d18; stroke-width:0px;"/><path d="M33.33,41.98c1.69,3.18,5.63,4.4,8.82,2.71,3.18-1.69,4.4-5.63,2.71-8.82-1.69-3.18-5.63-4.4-8.82-2.71s-4.4,5.63-2.71,8.82Z" style="fill:gold; stroke-width:0px;"/></g></svg>'); } */ #contentWrap { position: relative; } #contentWrap.hasLeftNav .container { display: flex; column-gap: 40px; } .hasLeftNav #mainContent { width: calc(100% - 320px); } #mainContent { width: 100%; padding: 80px 0 70px; position: relative; min-height: 600px; opacity: 0; transition: opacity 0.2s ease 0s; } #contentWrap.shown #mainContent, #contentWrap.shown #content { opacity: 1; } #content { opacity: 0; } #lastRevDate { text-align: left; color: #6e6e6e; font-size: 0.833em; padding: 10px 20px; } #footerZone { border-top: 1px solid #cccccc; background-color: #ffffff; position: relative; z-index: 3; } .fancybox-content { max-width: 800px; } #lastRevDate { text-align: left; color: #6e6e6e; font-size: 0.833em; padding: 10px 20px; } } /*end layer*/ /*custom style*/ .f-left { float: left; } .f-right { float: right; } .a-center { text-align: center; } .a-right { text-align: right; } .v-top { vertical-align: top; } .v-middle { vertical-align: middle; } .v-bottom { vertical-align: bottom; } .no-wrap { white-space: nowrap; } .no-padding { padding: 0; } .no-margin { margin: 0; } .display-m { display: none; } .alert-color-100 { color: var(--alert-color-100); } .fixIcon { background-color: #ffeca9; position: relative; width: 70px; height: 70px; border-radius: 50%; display: inline-block; text-align: center; vertical-align: middle; border: 8px solid #f1cd3d; z-index: 999; } .fixIcon img { margin: 3px; width: 44px; } .fixIcon-content { background-color: #ffeca9; position: absolute; left: 20px; top: 0; width: 0; height: 70px; font-size: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; display: inline-block; text-align: center; vertical-align: middle; z-index: -1; transition: width 1s, height 2s, font-size 3s; } .fixIcon:hover .fixIcon-content { width: 150px; font-size: inherit; } .fixBtn { position: fixed; /* right: 20px; */ right: -30px; text-align: center; width: 90px; height: 90px; background-color: #ffeca9; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); border-radius: 50px; text-decoration: none; overflow: hidden; z-index: 991; opacity: 1; display: inline-block; /* transition: all .5s ease 0s; */ transition: opacity .3s ease 0s, right .5s ease 0s, border .5s ease 0s; } /* .fixBtn { opacity: 1; display: inline-block; } */ .fixBtn:hover, .fixBtn.focus, .fixBtn.hovered, .fixBtn.init { right: 0; border-top-left-radius: 50px; border-top-right-radius: 0; border-bottom-left-radius: 50px; border-bottom-right-radius: 0; } .fixBtn.btn-1 { background-color: #ffeca9; top: 250px; } .fixBtn.btn-2 { background-color: #c0b4f5; top: 345px; } .fixBtn.btn-3 { background-color: #b0eca8; top: 440px; } .fixBtn.btn-4 { display: none; background-color: #cffdfc; top: 535px; } .fixBtn .icon { display: inline-block; width: 90px; height: 90px; border: 8px solid #f1cd3d; border-radius: 50px; text-align: center; vertical-align: middle; box-sizing: border-box; background-image: url('../images/btn1.png'); background-size: 50px 50px; background-position: 50% 50%; background-repeat: no-repeat; background-color: #ffeca9; /* transition: all .5s ease 0s; */ transition: all .5s ease 0s; } .fixBtn.btn-1 .icon { background-image: url('../images/btn1.png'); border: 8px solid #f1cd3d; background-color: #ffeca9; } .fixBtn.btn-2 .icon { background-image: url('../images/btn2.png'); border: 8px solid #9785e6; background-color: #c0b4f5; } .fixBtn.btn-3 .icon { background-image: url('../images/btn3.png'); border: 8px solid #72d57b; background-color: #b0eca8; } .fixBtn.btn-4 .icon { background-image: url('../images/btn4.png'); border: 8px solid #59d7d7; background-color: #cffdfc; } .fixBtn:hover .icon, .fixBtn.focus .icon, .fixBtn.hovered .icon { background-color: var(--light-100); background-size: 65px 65px; } .fixBtn.btn-1:hover .icon, .fixBtn.btn-1.focus .icon, .fixBtn.btn-1.hovered .icon { border: 4px solid #f1cd3d; } .fixBtn.btn-2:hover .icon, .fixBtn.btn-2.focus .icon, .fixBtn.btn-2.hovered .icon { border: 4px solid #9785e6; } .fixBtn.btn-3:hover .icon, .fixBtn.btn-3.focus .icon, .fixBtn.btn-3.hovered .icon { border: 4px solid #72d57b; } .fixBtn.btn-4:hover .icon, .fixBtn.btn-4.focus .icon, .fixBtn.btn-4.hovered .icon { border: 4px solid #59d7d7; } .fixBtn span { position: relative; opacity: 0; /* top: 0; */ right: -150%; display: inline-block; font-size: 20px; line-height: 1.2; margin-left: 10px; margin-top: 10%; transition: opacity .3s ease-out, right .5s ease-out; } .fixBtn:hover, .fixBtn.hovered, .fixBtn.focus, .fixBtn.init { width: auto; max-width: 375px; padding-right: 20px; padding-left: 3px; display: inline-flex !important; justify-content: center; align-items: center; } .fixBtn:hover .icon, .fixBtn.focus .icon, .fixBtn.init .icon, .fixBtn.hovered .icon { /* margin-top: 0; */ width: 82px; height: 82px; min-width: 82px; } .fixBtn:hover span, .fixBtn.focus span, .fixBtn.init span, .fixBtn.hovered span { margin-top: 0; display: inline-block; position: relative; right: inherit; opacity: 1; } /* SVGImage */ .svgImg { position: absolute; height: auto; aspect-ratio: 1 / 1; opacity: 0; background-position: 0 0; background-repeat: no-repeat; background-size: contain; z-index: 2; } /* utilities */ .mx-auto { margin: 0 auto; } .text-center { text-align: center; } .text-align-content-center { align-content: center; } .border-ring { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4); } .bg-white { background: var(--light-100); } .img-mw { width: var(--photo-simple-width); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.4); } .mb-32-16 { margin-bottom: 2rem; } @media screen and (max-width: 991.98px) { .mb-32-16 { margin-bottom: 1rem; } .img-mw { /* margin-bottom: 1rem; */ max-width: 100%; } } /* @media (hover:none) { .fixBtn { pointer-events: none; } .fixBtn.hovered { pointer-events: auto; } } */