:root { --TransitionEase: .3s ease-in-out; --MainColor: var(--wt-MainColor); --SubColor: var(--wt-SubColor); --TextMainColor: #333; --TextSubColor: #555; --TitleMainColor: #333; --BorderPx1: 1px solid #333; --BorderGrayPx1: 1px solid #cbcbcb; --MainHoverColor: var(--wt-MainColor); --SubHoverColor: #333; --DividerGrayColor: rgba(221, 221, 221, 0.5); /* 按鈕 */ --BtnOutlineColor: var(--wt-BtnEmptyColor); --BtnOutlineBg: transparent; --BtnOutlineHoverColor: var(--wt-HoverColor); --BtnOutlineHoverBg: var(--MainHoverColor); --BtnColor: white; --BtnBg: var(--MainColor); --BtnHoverColor: white; --BtnHoverBg: var(--MainHoverColor); --SubBtnColor: white; --SubBtnBg: var(--SubColor); --SubBtnHoverColor: white; --SubBtnHoverBg: var(--SubHoverColor); --BtnBorderRadius: 10px; --BtnWidth: 250px; --BtnHeight: 50px; --BtnFontSize: clamp(0.9375rem, 0.9108rem + 0.0558vw, 1rem); --BtnMarginTop: max(3vw, 2rem); /* 字體 */ --FontFamily: 'Inter', "Open Sans", sans-serif; --FontFamilyEn: 'Inter', sans-serif; --FontFamilyTw: "Open Sans", sans-serif; /* Navi */ --NaviHeight: 90px; --StickyHeight: calc(var(--NaviHeight) + 1rem); --NaviColor: #999; --NaviHoverColor: var(--SubColor); --NaviUpColor: #999; --NaviUpHoverColor: var(--SubColor); /* 有會員或電商的時候用 */ --NaviBtnColor: white; --NaviBtnBg: #36cee9; --NaviBtnHoverColor: white; --NaviBtnHoverBg: #0e434d; --NaviSubBtnColor: white; --NaviSubBtnBg: #ff0a0a; --NaviSubBtnHoverColor: white; --NaviSubBtnHoverBg: #721515; /* 文字大小 */ /* 螢幕2560px-767px 大小72px-46px */ --FontSizeMain: clamp(2.625rem, 2.2656rem + 1.4747vw, 4.625rem); /* 螢幕2560px-767px 大小24px-20px */ --FontSizeSub: clamp(1.25rem, 1.1431rem + 0.2231vw, 1.5rem); /* 螢幕2560px-767px 大小22px-18px */ --FontSizeH3: clamp(1.125rem, 1.0181rem + 0.2231vw, 1.375rem); /* 螢幕2560px-767px 大小18px-16px */ --FontSizeH4: clamp(1rem, 0.9465rem + 0.1115vw, 1.125rem); /* 螢幕2560px-767px 大小16px-15px */ --FontSizeH5: clamp(0.9375rem, 0.9108rem + 0.0558vw, 1rem); /* 螢幕2560px-767px 大小17px-15px */ --FontSizeH6: clamp(0.9375rem, 0.884rem + 0.1115vw, 1.0625rem); /* 螢幕2560px-767px 大小16px-15px */ --FontSizeP: clamp(0.9375rem, 0.9108rem + 0.0558vw, 1rem); /* 螢幕2560px-767px 大小24px-16px */ --FontSizeEn: clamp(1rem, 0.7861rem + 0.4462vw, 1.5rem); /* 螢幕2560px-1366px 大小17px-15px */ --FontSizeNavi: clamp(0.9375rem, 0.884rem + 0.1115vw, 1.0625rem); /* 區塊邊界 */ /* 螢幕2560px-1200px 大小160px-60px */ --SectionPadding: clamp(3.75rem, -1.7647rem + 7.3529vw, 10rem); /* 內頁區塊邊界 */ /* 螢幕2560px-1200px 大小160px-60px */ --InnerSectionPadding: clamp(3.75rem, -1.7647rem + 7.3529vw, 10rem); /* 標題下邊界 */ --SectionTitleBottom: max(3vw, 2rem); /* 小項目間的邊界 */ --ItemSpacing: max(2vw, 1.5rem); /* 卡片的邊界 */ --CardPadding: max(3vw, 2rem); /* 螢幕2560px-650px 50px-25px */ --BorderRadius: clamp(1.5625rem, 1.0308rem + 1.3089vw, 3.125rem); /* 推回中間的時候用 */ --TransformCenter: translateX(-50%) translateY(-50%); --TransformXCenter: translateX(-50%); --TransformYCenter: translateY(-50%); /* sns */ --SnsLine: #4cc764; --SnsFB: #1877f2; --SnsMessenger: linear-gradient(20deg, rgba(0, 153, 255, 1) 0%, rgba(160, 51, 255, 1) 60%, rgba(255, 82, 128, 1) 90%, rgba(255, 112, 97, 1) 100%); --SnsYT: #ff0000; --SnsIG: linear-gradient(45deg, rgba(250, 225, 0, 1) 0%, rgba(252, 183, 32, 1) 15%, rgba(255, 121, 80, 1) 30%, rgba(255, 28, 116, 1) 50%, rgba(108, 28, 209, 1) 100%); --SnsTwitter: #000; --SnsShopee: #ed4c2f;}/* 圖片撐滿 */img { max-width: 100%; height: auto;}/* 圖片需要object-fit: cover時在圖片加上.cover */img.cover { width: 100%; height: 100%; max-width: unset; object-fit: cover; max-height: 100%; min-height: 100%;}a,button,button:hover,a:is(:hover, :active, :focus, :visited) { transition: var(--TransitionEase); text-decoration: none;}a:hover,a:focus { color: var(--MainHoverColor);}/* 取消掉預設 */:is(h1, h2, h3, h4, h5, h6, p) { padding: 0; margin: 0;}/* 取消掉預設 */ .row { margin-right: 0px; margin-left: 0px;}.row::before,.row::after { display: none;}body.wrapper_bg { font-family: var(--FontFamily) !important; letter-spacing: 0px; line-height: 1.5; font-size: var(--FontSizeP); color: var(--TextMainColor); background-repeat: repeat;}/* 有sticky要改成visible */ .cd-main-content { overflow: hidden;}/*容器設定*//* 把預設都改成滿版 */#RWDfullscreen01 .container { width: 100%; z-index: 1; position: relative;}/* 把預設都改成滿版 */ .RWDmenu_plus04 .container { width: 100% !important; max-width: unset; padding: 0;}/* 容器100%時用 */ .container-fuild { width: 100%; z-index: 1; position: relative;}/* 其他的寬度請自行增加 */ .container-95 { width: 95%; margin: auto; z-index: 1; position: relative;}.container-90 { width: 90%; margin: auto; z-index: 1; position: relative;}.container-85 { width: 85%; margin: auto; z-index: 1; position: relative;}.container-80 { width: 80%; margin: auto; z-index: 1; position: relative;}.container-75 { width: 75%; margin: auto; z-index: 1; position: relative;}.container-70 { width: 70%; margin: auto; z-index: 1; position: relative;}/* 共用設定 *//* 上下區塊邊界 */ .section-spacing { padding: var(--SectionPadding) 0;}/* 只有上區塊邊界 */ .section-spacing-top { padding-top: var(--SectionPadding);}/* 只有下區塊邊界 */ .section-spacing-bottom { padding-bottom: var(--SectionPadding);}/* 把預設空div拿掉 */body.wrapper_bg .clear,body.wrapper_bg .RWDedictor008>div:last-of-type,body.wrapper_bg .RWDedictor>div:last-of-type { display: none;}.edit_mask { display: block !important;}.scrollTop002 { bottom: 100px;}/* banner下滑按鈕的區塊 */ .anchor-block { padding-top: calc(var(--NaviHeight)*0.9); margin-top: calc(0px - calc(var(--NaviHeight)*0.9));}/* 反白顏色設定*/::selection { background: #555; color: #fff;}::-moz-selection { background: #555; color: #fff;}/* 表單 */input[type=checkbox],input[type=radio] { accent-color: var(--MainColor); margin: 0 0;}/*搜尋*/ .RWDmenu_plus04 #search-box.full .form-control { font-size: 30px;}.RWDmenu_plus04 #search-box.full .ibtn { font-size: 25px;}/* 文字 */ .section-title { position: relative;}/* 標調文字有下方邊界 */ .section-title-bottom { margin-bottom: var(--SectionTitleBottom); text-align: center;}/* 主標 */ .main-title { letter-spacing: 1px; font-weight: 500; margin-top: 0rem; margin-bottom: 0; font-size: var(--FontSizeMain); color: var(--TextMainColor); line-height: 1; text-transform: uppercase;}/* 副標 */ .sub-title { letter-spacing: 0px; font-weight: 400; font-size: var(--FontSizeSub); line-height: 1.4; text-transform: uppercase;}/* 當有主副標時才會有邊界 */ .main-title+.sub-title { margin-top: 16px;}/* 英文標題 */ .en-title { font-size: var(--FontSizeEn); font-weight: 500; letter-spacing: 0px; font-family: var(--FontFamilyEn) !important; color: var(--TextGreyColor); line-height: 1;}/* 需要標題是白字時 */:is(.main-title, .sub-title, .en-title).white { color: white !important;}h3 { font-size: var(--FontSizeH3); letter-spacing: 1px; font-weight: 400; line-height: 1.3;}p,.description { font-size: var(--FontSizeP); letter-spacing: 0px; color: var(--TextSubColor); line-height: 1.7; font-weight: 400; font-family: var(--FontFamily) !important;}/* Navi */ .collapsing_header .main { top: 0 !important; background-color: transparent;}.RWDmenu_plus04 .header { padding: 0 5%; background: #0f141e; transition: var(--TransitionEase); border-bottom: 1px solid #444;} /* 測選單 */#div_forget_content .subject { letter-spacing: 2px; font-weight: 500; color: var(--TextMainColor);}#forget_table .verifyimg { width: 80px;}#forget_table .th { font-weight: 400; color: var(--TextMainColor);}/* 統一選單高度 */ .RWDmenu_plus04 .header,.RWDmenu_plus04 .logo { height: var(--NaviHeight);}/* 選單下滑後色塊 */ .RWDmenu_plus04 .header::before { content: ''; width: 100%; height: 0%; background: #0f141e; background-size: cover; opacity: 0; transition: var(--TransitionEase); position: absolute; left: 0;}.RWDmenu_plus04 .header.is-up::before { height: 100%; opacity: 1; transition: var(--TransitionEase); left: 0;}/* logo設定 */ .RWDmenu_plus04 .logo { position: relative; display: flex; align-items: center; width: fit-content; transition: var(--TransitionEase);}/* logo高度等於選單高度-30px這樣就不會碰到邊邊有動態時也比較好調整 */ .RWDmenu_plus04 .logo img { height: calc(var(--NaviHeight) - 50px); aspect-ratio: 0; /* 依照自己的圖片比例修改 */}/* 選單設定 */ .RWDmenu_plus04 .site-nav .menu>li>a { font-size: var(--FontSizeNavi); text-align: center; color: var(--NaviColor); letter-spacing: 1px; font-weight: 400; text-transform:uppercase; height: var(--NaviHeight); display: flex; align-items: center; padding: 0 20px;}/* 統一選單icon顏色 */ .RWDmenu_plus04 .features :is(.cart-btn, .querycar-btn, .share-group a, i, .lang-select) { color: var(--NaviColor);}/* 統一上滑選單icon顏色 */ .RWDmenu_plus04 .header.is-up :is(.features .cart-btn, .features .querycar-btn, .features .share-group a, .features i, .features .lang-select, .site-nav .menu>li>a) { color: var(--NaviUpColor); transition: var(--TransitionEase);}/* 選單收尋icon */ .RWDmenu_plus04 .glyphicon-search { position: relative; top: 3px;}.RWDmenu_plus04 .site-nav .menu { text-align: right;}.RWDmenu_plus04 .features .share-group span,.RWDmenu_plus04 .site-nav .menu ul li a { font-size: var(--FontSizeNavi); text-align: center; color: var(--NaviColor);}.RWDmenu_plus04 .features .member-btn { margin-right: 4px;}.lang-select-label,.RWDmenu_plus04 .features .search-btn,.RWDmenu_plus04 .features .member-btn,.RWDmenu_plus04 .features .cart-btn,.RWDmenu_plus04 .features .querycar-btn { padding-inline: 15px !important; height: var(--NaviHeight); display: flex; align-items: center;}/* 購物車數字 */ .cart-nu { top: 3px; position: relative;}.cart-btn img { width: 20px;}.RWDmenu_plus04 .site-nav .menu>li.active>a:after,.RWDmenu_plus04 .site-nav .menu>li.is-active>a:after { border-color: var(--MainColor);}.RWDmenu_plus04 .cart-block h3,.RWDmenu_plus04 .querycar-block h3 { font-size: 18px; font-weight: 500;}/* 下拉選單 */ .RWDmenu_plus04 .dropdown-menu .manu-item-box ul li.has-child>a:after,.RWDmenu_plus04 .lang-select-label:after,.RWDmenu_plus04 .site-nav .menu li.dropdown>a:after,.RWDmenu_plus04 .site-nav .menu li.has-child>a:after { border-color: var(--NaviColor);}.RWDmenu_plus04 .header.is-up .dropdown-menu .manu-item-box ul li.has-child>a:after,.RWDmenu_plus04 .header.is-up .lang-select-label:after,.RWDmenu_plus04 .header.is-up .site-nav .menu li.dropdown>a:after,.RWDmenu_plus04 .header.is-up .site-nav .menu li.has-child>a:after { border-color: var(--NaviUpColor);}.RWDmenu_plus04 .site-nav .manu-item:hover>a,.RWDmenu_plus04 .site-nav .menu ul li a:hover,.RWDmenu_plus04 .site-nav .menu>li>ul>li.active>a,.RWDmenu_plus04 .site-nav .menu>li>ul>li>ul>li.active>a { text-decoration: unset; font-weight: 400; color: var(--NaviHoverColor);}.RWDmenu_plus04 .site-nav .menu>li>ul { width: 200px; margin-left: -100px; padding: 0;}.RWDmenu_plus04 .site-nav .menu ul li>a { padding-right: 10px; text-transform:uppercase;}.RWDmenu_plus04 .site-nav .menu ul li.has-child>a:after { right: 20px;}.RWDmenu_plus04 .site-nav .menu>li.active>a { background: transparent; color: var(--NaviHoverColor);}.member-block h3 { text-align: left; font-weight: bold; padding-bottom: 1rem;}.RWDmenu_plus04 .cart-block-headline,.RWDmenu_plus04 .querycar-block-headline,.member-block .login-headline { font-size: var(--FontSizeH3); text-align: left; font-weight: 500;}.RWDmenu_plus04 .cart-block .bottom-box .total,.RWDmenu_plus04 .querycar-block .bottom-box .total { font-size: var(--FontSizeNavi);}.lang-select-options a { font-size: var(--FontSizeNavi);}/* 登入按鈕 */#btn_member_login { float: none; background: var(--BtnBg); padding: 6px 12px;}#btn_member_login,#div_forget_content #forget_table_btn { background: var(--BtnBg); border: 1px solid var(--BtnColor); color: var(--BtnColor); border-radius: var(--BtnBorderRadius); transform: var(--TransitionEase);}/* 會員區塊 */ .RWDmenu_plus04 .member-block a.login,.RWDmenu_plus04 .member-block button.login,.RWDmenu_plus04 .member-block a.login.is-on,.RWDmenu_plus04 .member-block button.login.is-on { background-color: var(--NaviBtnBg); color: var(--NaviBtnColor); transition: var(--TransitionEase); border-radius: var(--BtnBorderRadius);}.RWDmenu_plus04 .querycar-block .bottom-box .pay-btn { font-size: var(--FontSizeNavi); background: var(--NaviBtnBg); transition: var(--TransitionEase); color: var(--NaviBtnColor);}.RWDsearch01 .bottom-box .search_btn,.RWDmenu_plus04 .cart-block .bottom-box .pay-btn { background: var(--NaviBtnBg); transition: var(--TransitionEase); font-size: var(--FontSizeNavi);}.RWDmenu_plus04 .cart-block .pic,.RWDmenu_plus04 .querycar-block .pic { background: transparent;}.RWDmenu_plus04 .member-block a.login,.RWDmenu_plus04 .member-block button.login { background-color: var(--NaviSubBtnBg); color: var(--NaviSubBtnColor); transition: var(--TransitionEase);}.RWDmenu_plus04 .member-block a.signin,.RWDmenu_plus04 .member-block button.signin { background-color: var(--BtnOutlineBg); color: var(--BtnOutlineColor); border: 1px solid var(--BtnOutlineColor); transition: var(--TransitionEase); border-radius: var(--BtnBorderRadius);}/* 漢堡選單 */ .RWDmenu_plus04 #mobile-menu .menu>li.active>a { background-color: transparent; color: white !important;}.RWDmenu_plus04 #mobile-menu .menu>li.active{ background-color: var(--MainColor); color: white !important;}.RWDmenu_plus04 #mobile-menu .menu>li.active>.toggle-submenu:after,.RWDmenu_plus04 #mobile-menu .menu>li>ul>li.active>.toggle-submenu:after,.RWDmenu_plus04 .dropdown-menu .manu-item-box ul ul a { color: var(--NaviColor);}.RWDmenu_plus04 #mobile-menu .menu li a { color: var(--NaviColor);}.RWDmenu_plus04 #mobile-menu .menu>li { border-bottom: 1px solid #f2ecf3;}.RWDmenu_plus04 #mobile-menu .menu>li>ul>li>a { letter-spacing: 2px;}.RWDmenu_plus04 .ml-stack-nav-toggle{ color: var(--NaviColor); height: var(--NaviHeight); align-items: center; padding-block: 0;}.RWDmenu_plus04 .header.is-up .ml-stack-nav-toggle { color: var(--NaviUpColor);}.ml-stack-nav-toggle__line { background: var(--NaviColor);}.RWDmenu_plus04 .header.is-up .ml-stack-nav-toggle__line { background: var(--NaviUpColor);}/*loading*/ .fl { width: max(10vw,160px);}.fl img { width: 100%; animation-name: zeroall; animation-duration: 1s;}@-webkit-keyframes zeroall { 0% { opacity: .1; } 100% { opacity: 1; }}/* btn *//* 按鈕模組父層加上 .index-btn */ .index-btn a,.RWDbtn01 .btn, .about-btn-box .fix-btn-01,.step-btn-link{ border: none; padding: 5px 10px; width: var(--BtnWidth); height: var(--BtnHeight); border-radius: var(--BtnBorderRadius); font-size: var(--BtnFontSize); letter-spacing: 0px; margin-top: var(--BtnMarginTop); transition: var(--TransitionEase); display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; overflow: hidden;}/* 按鈕背景主色 */ .index-btn .main-btn { color: var(--BtnColor); background: var(--BtnBg);}/* 按鈕背景輔色 */ .index-btn .sub-btn { color: var(--SubBtnColor); background: var(--SubBtnBg);}/* 按鈕邊框 */ .index-btn .outline-btn { border: var(--BorderGrayPx1); background: var(--BtnOutlineBg); color: var(--BtnOutlineColor);}/* 按鈕如果有icon或圖片 */ .index-btn i,.index-btn img { transition: var(--TransitionEase); margin-left: 10px;}.m-auto{ margin-inline: auto;}@media (hover:hover) { .RWDmenu_plus04 .header.is-up :is(.features .cart-btn, .features .querycar-btn, .features .share-group a, .features i):hover { color: var(--NaviUpHoverColor); } .RWDmenu_plus04 .features>div:hover .cart-nu, .RWDmenu_plus04 .features>div:hover i { color: var(--NaviHoverColor); } .RWDmenu_plus04 .header.is-up .features>div:hover .cart-nu, .RWDmenu_plus04 .header.is-up .features>div:hover i { color: var(--NaviUpHoverColor); } .RWDmenu_plus04 .site-nav .menu>li.dropdown>a:hover:after, .RWDmenu_plus04 .site-nav .menu>li.has-child>a:hover:after { border-color: var(--NaviHoverColor); } .RWDsearch01 .bottom-box .search_btn:hover, .RWDmenu_plus04 .cart-block .bottom-box .pay-btn:hover { background: var(--NaviBtnHoverBg); transition: var(--TransitionEase); color: white; } .RWDmenu_plus04 .querycar-block .bottom-box .pay-btn:hover { background: var(--NaviBtnHoverBg); transition: var(--TransitionEase); font-size: var(--FontSizeNavi); } .RWDmenu_plus04 .lang-select-label:hover::after, .RWDmenu_plus04 .header .site-nav .menu li.has-child>a:hover:after, .RWDmenu_plus04 .header .site-nav .menu li.active>a:after, .RWDmenu_plus04 .header .site-nav .menu li.has-child:hover>a:after { border-color: var(--NaviHoverColor); } .lang-select-label:hover i, .RWDmenu_plus04 .features .lang-select:hover .lang-select-label i, .RWDmenu_plus04 .lang-select:hover .lang-select-label { color: var(--NaviHoverColor); } .RWDmenu_plus04 .site-nav .manu-item:hover>a, .RWDmenu_plus04 .site-nav .menu ul li a:hover { text-decoration: unset; font-weight: 400; color: var(--NaviHoverColor); } .RWDmenu_plus04 .header.is-up .site-nav .menu>li>a:hover, .RWDmenu_plus04 .lang-select:hover .lang-select-label, .RWDmenu_plus04 .site-nav .menu>li>a:hover { background: transparent; color: #fff; } .RWDmenu_plus04 .member-block a.signin:hover, .RWDmenu_plus04 .member-block button.signin:hover { background-color: var(--BtnOutlineHoverBg); color: var(--BtnOutlineHoverColor); transition: var(--TransitionEase); border-color: var(--BtnOutlineHoverBg); } .RWDmenu_plus04 .member-block a.login:hover, .RWDmenu_plus04 .member-block button.login:hover, .RWDmenu_plus04 .member-block a.login.is-on:hover, .RWDmenu_plus04 .member-block button.login.is-on:hover { background-color: var(--NaviBtnHoverBg); color: var(--NaviBtnHoverColor); transition: var(--TransitionEase); } .RWDmenu_plus04 .member-block .other a:hover { color: var(--NaviHoverColor); transition: var(--TransitionEase); } .lang-select-options a:hover, .lang-select-options a:hover * { font-weight: 400; color: var(--NaviHoverColor); } #btn_member_login:hover, #div_forget_content #forget_table_btn:hover { background: var(--BtnHoverBg); border: 1px solid var(--BtnHoverColor); color: var(--BtnHoverColor); } .RWDmenu_plus04 #mobile-menu .menu>li:hover>a, .RWDmenu_plus04 #mobile-menu .menu>li>ul>li>a:hover { color: var(--NaviHoverColor); } .RWDmenu_plus04 .ml-stack-nav-toggle:hover i, .RWDmenu_plus04 .header.is-up .ml-stack-nav-toggle:hover, .RWDmenu_plus04 .ml-stack-nav-toggle:hover { color: var(--NaviHoverColor); } .RWDmenu_plus04 .header.is-up .ml-stack-nav-toggle:hover .ml-stack-nav-toggle__line, .RWDmenu_plus04 .ml-stack-nav-toggle:hover .ml-stack-nav-toggle__line { background: var(--NaviHoverColor); } /* 按鈕 */ .index-btn .main-btn:hover { color: var(--BtnHoverColor); background: var(--BtnHoverBg); } .index-btn .sub-btn:hover { color: var(--SubBtnHoverColor); background: var(--SubBtnHoverBg); } .index-btn .outline-btn:hover { border-color: var(--BtnOutlineHoverBg); background: var(--BtnOutlineHoverBg); color: var(--BtnOutlineHoverColor); }} /*選配用完請刪除 start*/ /* Dear 同學 有遇到選單有跟隨的按鈕建議另用模組， 不要寫在選單的編輯器裡客戶很常用壞， 沒有用到的請刪除 有更讚的作法請無私分享給我，非常需要!謝謝大家*//* ---cookie--- *//* 本網站使用cookies為您提供更好的用戶體驗。繼續使用本網站表示您同意我們的隱私權政策 This site uses cookies. For more information, please see our Privacy Policy. Agree *//* ---建議瀏覽--- *//* 建議使用Chrome、Firefox、Safari最新版本瀏覽Recommend using Chrome, Firefox, Safari latest version of the browser. *//* 選配1.版型配置時請在base裡面放這個js.menu-container 加入一個div class="fix-btn-box"裡面插入base
[sLoop{跟隨按鈕}] [text{跟隨文字}] [eLoop{跟隨按鈕}]
2.如果你的搜尋是滿版，請在base裡面放這個js$(document).ready(function () { var $searchBox = $('#search-box'); var $fixBtnBox = $('.fix-btn-box'); function updateZIndex() { if ($searchBox.hasClass('is-open')) { $fixBtnBox.css('z-index', '202'); } else { $fixBtnBox.css('z-index', ''); } } updateZIndex(); // 監聽 #search-box 的 class 變化 var observer = new MutationObserver(updateZIndex); observer.observe($searchBox[0], { attributes: true, attributeFilter: ['class'] });});3.如果你的上滑後選單會有變化請在base裡面放這個js$(window).scroll(function () { var scroll = $(window).scrollTop(); if (scroll >= 1) { $(".fix-btn-box").addClass("is-up"); } else { $(".fix-btn-box").removeClass("is-up"); }});.fix-btn-box { position: fixed; z-index: 203; top: 0; right: calc(5% + 320px + 2vw); transition: var(--TransitionEase); height: var(--NaviHeight); display: flex; align-items: center; justify-content: center;}.fix-btn a { border: var(--BorderPx1); background: var(--BtnOutlineBg); color: var(--BtnOutlineColor); font-weight: 400; font-size: var(--FontSizeNavi); padding: 8px 10px; width: var(--BtnWidth); height: var(--BtnHeight); text-align: center; letter-spacing: 4px; display: flex; align-items: center; justify-content: center;}.fix-btn-box.is-up .fix-btn a { border: var(--BorderPx1); background: var(--BtnOutlineBg); color: var(--BtnOutlineColor);}.fix-btn-box.is-up { transition: var(--TransitionEase);}.fix-btn img { width: 27px; margin-right: 10px;}@media (hover:hover) { .fix-btn-box:hover.is-up .fix-btn, .fix-btn a:hover { color: var(--BtnHoverColor); background: var(--BtnHoverBg); } .fix-btn a:hover img { filter: invert(1) brightness(3); }}*//* fix-btn *//* @media (max-width: 650px) {.fix-btn-box,.fix-btn-box.is-up { right: 0; width: 100%; bottom: 0; top: unset;}.fix-btn-box .RWDbase,.fix-btn { width: 100%;}.fix-btn-box { height: auto;}.fix-btn-box .fix-btn a,.fix-btn-box.is-up .fix-btn a { background: var(--BtnBg); border: 0; color: var(--BtnColor);}} *//*漢堡提早*//* .RWDmenu_plus04 .site-nav { display: none; } .RWDmenu_plus04 .header-in, .RWDmenu_plus04 #mobile-menu{ display: block; } .RWDmenu_plus04 .ml-stack-nav-toggle { display: flex; } .RWDmenu_plus04 .features .lang-select, .RWDmenu_plus04 .features .language-block { display: none; } .fix-btn-box { right: 220px;} .RWDmenu_plus04 #mobile-menu .menu>li>ul>li>ul>li>a { padding-left: 50px; }*/ /*選配用完請刪除 end*/ /*首頁客製 start*/ /*nav*/ .RWDmenu_plus04 .header{padding-right: 17%;padding-left: 60px;}.RWDmenu_plus04 .site-nav{padding-right: 3%;}.RWDmenu_plus04 .site-nav .menu ul li > a:hover{color: #ed6d00;}/*nav跟隨按鈕*/ .fix-btn-box { position: fixed; z-index: 203; top: 0; right: 0; transition: var(--TransitionEase); height: calc(var(--NaviHeight) + 1px); display: flex; align-items: center; justify-content: center;}.fix-btn a { position: relative; display: grid; align-items: center; background: linear-gradient(to right, #ed0121 0%, #fc6148 100%); color: #fff; padding: 10px 35px; grid-template-columns: auto 28px; grid-gap: 20px; letter-spacing: 1px; text-transform:uppercase; font-weight: 400; font-size: var(--FontSizeNavi); height: var(--NaviHeight); width: auto; overflow: hidden; justify-content: center; z-index: 0;}.fix-btn a:after { content: ''; background: #fff; width: 0; height: 100%; position: absolute; right: 0; top: 0; transition: var(--TransitionEase); z-index: -1;}@media (hover:hover) {.fix-btn a:hover:after { width: 100%; transition: var(--TransitionEase); right: auto; left: 0; background: linear-gradient(to right, #d8001d 0%, #ff4427 100%);}}/* banner-block */#RWDfullscreen01 .banner-block .RWDbanner_plus01 .slick-caption .container { width: 100%; display: flex; flex-direction: column;}.banner-block .RWDbanner_plus01 .slick-caption { top: calc(var(--NaviHeight) + 7%); text-transform: uppercase;}.banner-block .RWDbanner_plus01 .slick-caption .txt1 { order: 1; font-size: var(--FontSizeH5); font-weight: 300; line-height: 1; letter-spacing: 0px; color: #fff;}.banner-block .RWDbanner_plus01 .slick-caption .txt1 span{ position: relative; display: block; width: fit-content; margin: 0 auto; border: 1px solid rgba(255,255,255,0.3); padding: 15px 30px; border-radius: 99em; overflow: hidden;}.banner-block .RWDbanner_plus01 .slick-caption .txt1 span::after{ content: ""; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, #111926 0%, #4e535e 100%); opacity: 0.5; top: 0; left: 0; z-index: -1;}.banner-block .RWDbanner_plus01 .slick-caption .txt2 { order: 2; font-size: clamp(2.625rem, 1.0743rem + 3.2348vw, 6.25rem);/*100-42*/ margin-top: 1vw; font-weight: 500; letter-spacing: 1px; color: #000000; line-height: 1.1;}.banner-block .RWDbanner_plus01 .slick-caption .txt3 { order: 3; font-size: var(--FontSizeH4); font-weight: 300; margin-top: 1.1vw; padding-bottom: 0.5vw; color: #000000; letter-spacing: 0; line-height: 1.5;}.banner-block .RWDbanner_plus01 .slick-caption .txt3 > span{ position: relative; display: block; width: fit-content; margin: 0 auto;}.banner-block .RWDbanner_plus01 .slick-caption .txt3 > span::before, .banner-block .RWDbanner_plus01 .slick-caption .txt3 > span::after{ content: ""; display: block; width: 13vw; height: 2px; background: transparent url(archive/image/customization/slogan_line.png) center right no-repeat; position: absolute; left: -15vw; top: 50%; margin-top: -1px;}.banner-block .RWDbanner_plus01 .slick-caption .txt3 > span::after{ content: ""; left: auto; right: -15vw; transform: rotate(180deg);}.banner-block .RWDbanner_plus01 .slick-caption .txt2 > span > span, .banner-block .RWDbanner_plus01 .slick-caption .txt3 > span > span{display: block;}.RWDbanner_plus01 .logo{ display: block; order: 4;}.banner-block .RWDbanner_plus01 .logo img { width: 100%; max-width: 800px; margin: 0 auto;}.RWDbanner_plus01 .page-scroll{ bottom: 4vw; left: auto; right: 4vw; margin-left: auto; text-align: center; width: auto;}.RWDbanner_plus01 .page-scroll a{ position: relative; display: flex; justify-content: center; align-items: center; width: 7.5vw; height: 7.5vw; transform: none; background: radial-gradient(circle closest-side at center,#a6aab3,#0c1224); border-radius: 99em; border: 7px solid #03091c;}.RWDbanner_plus01 .page-scroll a img{ width: 20px; height: 20px;}.RWDbanner_plus01 .page-scroll.style-custom span{display: none;}.RWDbanner_plus01 .page-scroll a::before, .RWDbanner_plus01 .page-scroll a::after{ content: ""; position: absolute; width: calc(100% + 16px); height: calc(100% + 16px); background: linear-gradient(200deg, #060c1f 68%, #d0d1d4); top: -8px; left: -8px; z-index: -2; border-radius: 99em; transition: var(--TransitionEase);}.RWDbanner_plus01 .page-scroll a::before{ opacity: 0; background: linear-gradient(200deg, #fc6148 68%, #ed0121); z-index: -1;}.RWDbanner_plus01 .page-scroll a:hover { opacity: 1;}@media (hover:hover) { .RWDbanner_plus01 .page-scroll a:hover::before{ opacity: 1; transition: var(--TransitionEase); }}/* 點點 */ .banner-block .RWDbanner_plus01.style-dotnav.dot .slick-dots button { background: #272b39 !important; opacity: 1;}.banner-block .RWDbanner_plus01.style-dotnav.dot .slick-dots li.slick-active button { opacity: 1; background: var(--wt-HoverColor) !important;}/*按鈕*/ .RWDbtn01 .btn-box li {padding: 0;}.RWDbtn01 .btn{text-transform: uppercase;}.about-btn-box .fix-btn-01{ position: relative; margin-top: calc(var(--BtnMarginTop) - 0.5vw); border: var(--BorderGrayPx1); color: #333;}.produce-block-content .RWDbtn01 .btn{ background: linear-gradient(to bottom, #03091c 0%, #4a4e5c 100%); color: #fff; border: var(--BorderGrayPx1);}.step-btn-link{ font-family: var(--FontFamily) !important; margin: 0 auto; margin-top: calc(var(--BtnMarginTop) - 0.5vw); background: linear-gradient(to right, #ed0121 0%, #fc6148 100%); color: #fff;}.step-btn-link span{text-transform: uppercase;}.step-btn-link::after{ content: "arrow_outward"; font-family: "Material Symbols Outlined"; position: relative; top: 1px; margin-left: 10px; font-size: 22px;}.step-btn-link::before { content: ''; background: #fff; width: 0; height: 100%; position: absolute; right: 0; top: 0; transition: var(--TransitionEase); z-index: -1;}.about-btn-box .fix-btn-01::after, .produce-block-content .RWDbtn01 .btn::after { content: ''; position: absolute; width: 100%; height: 0; background: var(--MainColor); left: -50%; top: -100%; transform: translateX(50%); z-index: -1; transition: var(--TransitionEase);}.produce-block-content .RWDbtn01 .btn::after{ background: #fff;}@media (hover:hover) { .about-btn-box .fix-btn-01:hover { color: #fff; background: transparent; border-color: var(--MainHoverColor); } .produce-block-content .RWDbtn01 .btn:hover{ color: var(--MainColor); border-color: #fff; } .about-btn-box .fix-btn-01:hover::after, .produce-block-content .RWDbtn01 .btn:hover::after{ height: 100%; top: 0; transition: var(--TransitionEase); } .step-btn-link:hover, .step-btn-link:focus{color: #fff;} .step-btn-link:hover::before { width: 100%; transition: var(--TransitionEase); right: auto; left: 0; background: linear-gradient(to right, #d8001d 0%, #ff4427 100%); }}/*線條裝飾*/ .about-block-content, .produce-block-content, .step-block-content{ position: relative; padding-top: calc(var(--SectionTitleBottom) * 1.2);}.produce-block-content .RWDbtn01{ position: relative; overflow: visible;}.about-block-content::before, .about-block-content::after,.produce-block-content::before, .produce-block-content::after, .produce-block-content .RWDbtn01::before, .produce-block-content .RWDbtn01::after,.step-block-content::before, .step-block-content::after{ content: ""; display: block; position: absolute; width: 35px; height: 35px; background: transparent url(archive/image/customization/trim_top_right-1.webp) center center no-repeat; left: -8px; top: -8px;}.about-block-content::after,.produce-block-content::after, .produce-block-content .RWDbtn01::after,.step-block-content::after{ background: transparent url(archive/image/customization/trim_top_right.webp) center center no-repeat; left: auto; right: -8px;}.produce-block-content .RWDbtn01::before, .produce-block-content .RWDbtn01::after{top: auto;bottom: -8px;}.produce-block-content::before{background: transparent url(archive/image/customization/w_trim_lefttop.webp) center center no-repeat;}.produce-block-content::after{background: transparent url(archive/image/customization/w_trim_righttop.webp) center center no-repeat;}.produce-block-content .RWDbtn01::before{background: transparent url(archive/image/customization/w_trim_leftbottom.webp) center center no-repeat;}.produce-block-content .RWDbtn01::after{background: transparent url(archive/image/customization/w_trim_rightbottom.webp) center center no-repeat;}.block-grayline { z-index: -1; width: 100vw; height: 1px; display: block; position: absolute; background-color: var(--DividerGrayColor); top: 0; left: 50%; margin-left: -50vw;}.produce-block-content .block-grayline{ background-color: rgba(221, 221, 221, 0.2); width: 100%; margin-left: -50%;}.block-grayline::before{ content: ""; display: block; position: absolute; width: 69px; height: 24px; background: transparent url(archive/image/customization/trim_top.webp) center center no-repeat; left: 50%; margin-left: -34.5px; top: -6px;}.produce-block-content .block-grayline::before{ background: transparent url(archive/image/customization/w_trim_top.webp) center center no-repeat;}.container-grayline{position: relative;}.container-grayline::before, .container-grayline::after{ content: ""; display: block; position: absolute; width: 1px; height: 200vh; background-color: var(--DividerGrayColor); left: 0; top: 50%; margin-top: -100vh; z-index: 1;}.container-grayline::after{ left: auto; right: 0;}.produce-block .container-grayline::before, .produce-block .container-grayline::after{background-color: rgba(221, 221, 221, 0.2);}/*公司簡介*/ .about-block{position: relative;}.about-block::after{ content: ""; display: block; position: absolute; width: 100%; height: 100%; background: transparent url(archive/image/model/images/block_bg.webp) center center no-repeat; background-size: cover; top: 0; left: 0; z-index: -1;}.about-block-title .section-title{ display: flex; flex-direction: revert; align-items: center; text-align: left;}@media screen and (min-width: 1537px) { .about-block-title .main-title, .about-block-title .sub-title{margin: 0;} .about-block-title .sub-title{ margin-left: 2em; }}.about-block-content .RWDbase { display: grid; grid-template-columns: auto 50%; gap: 0 4vw;}.about-slogan { font-size: var(--FontSizeH3); letter-spacing: 0; text-transform: uppercase; font-weight: bold; line-height: 1.3;}.about-description { text-transform: uppercase; margin-top: 1.5em;}.advantages-block{ margin-top: 3.5em;}.advantages-item { display: grid; grid-template-columns: 140px auto; gap: 2vw; align-items: center; background-color: #fff; border-radius: var(--BtnBorderRadius); padding: 1vw 1.5vw; padding-right: 3vw; margin-top: 1.5em; box-shadow: 0px 0px 20px rgba(146, 152, 157, 0.27);}.advantages-item:nth-child(1){margin-top: 0;}.advantages-title{ position: relative; color: var(--wt-HoverColor); text-transform: uppercase; font-size: var(--FontSizeH4); font-weight: 600; font-style: italic; line-height: 1.3;}.advantages-title::after{ content: ""; display: block; position: absolute; width: 1px; height: 40px; background-color: #efefef; right: -0.5vw; top: 50%; margin-top: -20px;}.about-image div { width: 100%; height: 100%; position: relative; display: block;}.about-image div img{ width: 100%; height: 100%; object-fit: cover;}/*產品展示*/ .produce-block { background-color: #03091c; position: relative; overflow: hidden;}.produce-block::after{ content: ""; display: block; position: absolute; height: 100%; width: 55vw; background: url(archive/image/customization/product-bg.webp) right top no-repeat; background-size: contain; right: 0; top: 0; z-index: 0;}.produce-block-title .main-title{color: #fff;}.produce-block-title .sub-title{color: var(--wt-BtnEmptyColor);}.RWDproduct004 .section-subject, .RWDproduct004 .heading-title.heading-arrow-bottom::after, .RWDproduct004 .section-subject .section-line{ display: none;}.RWDproduct004 section{border: none;}.RWDproduct004 .section-subject .col-md-12{ display: flex; flex-direction: column-reverse; float: none;}.RWDproduct004 .section-subject .main-title{ margin-bottom: 30px;}.RWDproduct004 .section-subject .sub-title{ margin-top: 0; margin-left: auto; margin-right: auto; }.RWDproduct004 #portfolio .mix-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; grid-gap: 6rem 50px;}.RWDproduct004 #portfolio.portfolio-nogutter .row > div{ float: none; width: 100%;}.RWDproduct004 .item-box .item-hover.active{display: none;}.RWDproduct004 .item-box figure{ overflow: hidden;}.RWDproduct004 div.row > div img.img-responsive{ transition: .4s; transform: scale(1);}.RWDproduct004 .overlay, .RWDproduct004 .item-box .item-hover{ display: none;}@media (hover:hover) {.RWDproduct004 .item-box:hover img.img-responsive{ transform: scale(1.05);}}.RWDproduct004 .item-box-desc{ padding: 3em 0 0; margin-bottom: 0;}.RWDproduct004 #portfolio div.col-md-3 h3{ color: #fff; letter-spacing: 0; font-weight: 600; font-size: var(--FontSizeH3); margin: 0 0 15px; text-align: center; text-transform: uppercase;}@media (hover:hover) {.RWDproduct004 #portfolio div.col-md-3 .item-box:hover h3{ color: #fff;}}.RWDproduct004 .list-inline{ height: auto !important; text-align: center; color: var(--wt-BtnEmptyColor);}/*合作流程*/ .step-block{position: relative;overflow: hidden;}.step-block::before{ content: ""; display: block; position: absolute; width: 30%; height: 100%; background: transparent url(archive/image/customization/step-light.webp) right top no-repeat; background-size: contain; right: 0; top: 0; z-index: -1;}.step-block::after{ content: ""; display: block; position: absolute; width: 100%; height: 100%; background: transparent url(archive/image/model/images/step-bg.webp) left bottom no-repeat; background-size: cover; top: 0; left: 0; z-index: -2;}@media screen and (min-width: 1200px) { .step-block-title .main-title br{display: none;}}.RWDService001{ width: calc(100% - 10vw); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2vw;}.RWDService001 .section-subject{display: none !important;}.RWDService001 .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 2vw 1.5vw;}.RWDService001 .col-md-3.col-sm-6{ float: none; width: 100%;}.RWDService001 .boxFeature-2{ position: relative; background-color: #fff; border-radius: var(--BtnBorderRadius); box-shadow: 0px 0px 25px rgba(150, 138, 148, 0.27); display: grid; grid-template-columns: 70px auto; gap: 0 5vw; padding: 2vw 3vw;}.RWDService001 .boxFeature-2::before{ content: ""; display: block; position: absolute; width: 1px; height: 100%; background-color: var(--DividerGrayColor); top: 0; left: calc(3vw + 70px + (5vw / 2));}.RWDService001 .boxFeature-2::after{ content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 25px solid white; transform: rotate(90deg); right: -27px; top: calc(2vw + 10px);}.RWDService001 .row:nth-child(3) > .col-md-3.col-sm-6:nth-child(2) .boxFeature-2::after{display: none;}.RWDService001 .boxFeature-2 h2{ font-weight: 500; font-style: italic; font-size: clamp(2.5rem, 1.9653rem + 1.1154vw, 3.75rem);}.RWDService001 p{ text-align: left; font-size: var(--FontSizeP); margin: 0; min-height: 168px;}.RWDService001 p span{ display: block; font-size: var(--FontSizeH3); font-weight: 700; font-style: italic; text-transform: uppercase; margin: 10px 0;} /*首頁客製 end*/ /*footer start*/ /* Dear All 1.沒有map，請收尋.footer-map刪除 2.有社群模組使用.RWDsocial002，沒有的請收尋.footer-sns刪除 3.有EDM模組使用.RWDedm001，沒有的請收尋.footer-edm刪除 4.看完備註請刪除謝謝*//* footer_block */ .keyarrow p,.copyrights,.copyrights a,.copyrights:hover,.copyright_desc,.copyright_desc a,.copyright_desc a:hover { color: #5e5e5e !important; font-size: 13px !important; font-weight: 300;}.RWDssl01 { display: flex;}.copyrights { display: flex; width: 100%; max-width: 650px; justify-content: flex-start; gap: 5px 1rem; flex-wrap: wrap; margin: 0 0 0 auto;}.footer-info p,.footer-info a { color: #4a4a4a;}.footer-info-list>div { display: flex; font-size: var(--FontSizeP); align-items: center; gap: 10px;}/* footer-btn */ .footer-btn { display: flex; gap: 1rem;}.footer-btn a { text-align: center; width: var(--BtnWidth); height: var(--BtnHeight); padding: 10px; border-radius: var(--BtnBorderRadius); line-height: 1; font-size: var(--BtnFontSize); display: flex; align-items: center; justify-content: center; background: var(--BtnOutlineBg); border: 1px solid var(--BtnOutlineColor); color: var(--BtnOutlineColor);}/* footer-map */ .footer-map iframe { aspect-ratio: 3/1;}/* footer-edm */ .footer-edm { border: var(--BorderPx1); width: fit-content; border-radius: 40px; overflow: hidden;}.footer-edm .newsletter-form { display: grid; grid-template-columns: 20vw 80px 80px;}.footer-edm #btn_order_email { background-color: var(--BtnBg); border-color: var(--BtnBg); color: var(--BtnColor);}.footer-edm #btn_reject_email { background-color: var(--SubBtnBg); border-color: var(--SubBtnBg); color: var(--SubBtnColor);}.footer-edm .form-group { margin-bottom: 0;}.footer-edm .form-control,.footer-edm .RWDedm001 .btn.btn-rj { height: 40px; border-radius: 0; border: 0; box-shadow: unset; font-size: var(--FontSizeP);}.footer-edm .form-control { padding-inline: 20px; color: white;}.footer-edm .form-control::-webkit-input-placeholder { color: #ffffff5c; font-size: 15px;}/* footer-sns */ .footer-sns .RWDsocial002 .pull-right { float: unset !important;}.footer-sns .RWDsocial002 ul.socialNetwork { padding: 0; display: flex; flex-direction: row; margin-bottom: 0;}.footer-sns .RWDsocial002 ul.socialNetwork img { width: 22px; position: relative; top: -3px;}.footer-sns .RWDsocial002 .iconRounded { border: 0; color: var(--TextMainColor); background-color: transparent; width: 40px; height: 40px; transition: var(--TransitionEase); margin-right: 0; padding-top: 0; font-size: 20px; border-radius: 50%; line-height: 40px;}/* icon class改成你選的 */ .footer-sns .RWDsocial002 .iconRounded.ii-line3 { color: var(--SnsLine);}.footer-sns .RWDsocial002 .iconRounded.ii-fb1 { color: var(--SnsFB);}.footer-sns .RWDsocial002 .iconRounded.ii-youtube1 { color: var(--SnsYT);}.footer-sns .RWDsocial002 .iconRounded.ii-ig2 { color: transparent; background: var(--SnsIG); background-clip: text;}.footer-sns .RWDsocial002 ul.socialNetwork li { margin-bottom: 0; line-height: 0; display: flex; align-items: center; transition: var(--TransitionEase);}/* cookie */ .RWDalert_fancybox.bottom .editor a { text-decoration: underline; color: var(--MainColor);}.RWDalert_fancybox.bottom .editor a:hover { color: var(--MainHoverColor);}.RWDalert_fancybox.bottom .editor { margin-bottom: 0 !important;}.RWDalert_fancybox.bottom { z-index: 99999 !important; width: 500px; padding: 50px 75px 40px !important; box-shadow: 0 20px 40px rgb(51 51 102 / 60%) !important; background: rgba(255, 255, 255, 90%) !important; color: #000 !important; left: unset !important; right: 5% !important; line-height: 1.8 !important; border-radius: 0; display: flex; flex-direction: column; gap: 1rem;}.RWDalert_fancybox .btn,.RWDalert_fancybox .btn.active { padding: 5px 20px; border-color: var(--BtnBg); background: transparent !important; border-radius: 0; margin-top: 0; color: var(--TextMainColor) !important; border: 1px solid var(--BtnBg); transition: var(--TransitionEase)}.RWDalert_fancybox .btn:hover { color: #fff !important; border-color: var(--BtnHoverBg); background: var(--BtnHoverBg) !important; transition: var(--TransitionEase)}/* go top */ .scrollTop002 { bottom: 100px; right: 20px; width: 35px; transition: var(--TransitionEase);}.scrollTop002 .ii:hover { opacity: 1 !important; transition: var(--TransitionEase);}.scrollTop002 .ii { font-size: 35px; background: #8a8e99; color: #fff; border-radius: 5px; transition: var(--TransitionEase);}@media (hover:hover) { .footer-sns .RWDsocial002 .iconRounded:hover { background-color: transparent; } .footer-sns.RWDsocial002 ul.socialNetwork li:hover { transition: var(--TransitionEase); transform: translateY(-3px); } .footer-edm #btn_order_email:hover { background-color: var(--BtnHoverBg); border-color: var(--BtnHoverBg); color: var(--BtnHoverColor); } .footer-edm #btn_reject_email:hover { background-color: var(--SubBtnHoverBg); border-color: var(--SubBtnHoverBg); color: var(--SubBtnHoverColor); }}/*客製*/ .footer-block .ft-content { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--SectionTitleBottom) * 1.5) 5vw; align-items: flex-end;}.footer-block .ft-content, .footer-block .ft-content a{color: #bbb;transition: var(--TransitionEase);}.footer-block .ft-content a:hover{color: var(--wt-HoverColor);}.footer-block{ position: relative; padding-top: calc(var(--SectionPadding) / 2); overflow: hidden;}.footer-block::before{ content: ""; z-index: 0; width: 100vw; height: 1px; display: block; position: absolute; background-color: rgba(221, 221, 221, 0.1); top: calc((var(--SectionPadding) / 2) + 120px + calc((var(--SectionTitleBottom) * 1.5) / 2)); left: 50%; margin-left: -50vw;}.footer-block::after{ content: ""; display: block; position: absolute; width: 100%; height: 100%; background: transparent url(archive/image/model/images/ft-bg.jpg) center center no-repeat; background-size: cover; top: 0; left: 0; z-index: -1;}.ft-logo .RWDbase { display: flex; align-items: end;}.ft-logo img {height: 120px;}.ft-logo-name{ font-size: var(--FontSizeH3); font-weight: 400; text-transform: uppercase; color: #fff; line-height: 1.1; margin-left: 40px;}.copyrights .RWDedictor { width: 100%;}.ft-info-title{ font-size: var(--FontSizeH4); font-weight: 500; font-style: italic; text-transform: uppercase; color: #fff; margin-bottom: calc(var(--SectionTitleBottom) * 0.5);}.footer-list-box { display: grid; gap: 10px 0; grid-template-rows: 1fr;}.footer-list{ display: grid; align-items: start; gap: 0; grid-template-columns: 100px auto;}.footer-list span{ text-transform: uppercase; color: #fff;}.ft-gmap .RWDbase, .ft-gmap {height: 180px;} /*footer end*/ /*首頁RWD start*/ /* 首頁RWD */@media (max-width: 2160px) { .RWDService001 p { min-height: 188px; }}@media (max-width: 2048px) { .RWDmenu_plus04 .site-nav { padding-right: 2%; } .RWDmenu_plus04 .header { padding-right: 350px; } .banner-block .RWDbanner_plus01 .logo img { max-width: 700px; }}@media (max-width: 1920px) { .RWDproduct004 #portfolio .mix-grid { grid-gap: 4rem 30px; } .RWDproduct004 .item-box-desc { padding: 2.5em 0 0; } .RWDproduct004 #portfolio div.col-md-3 h3 { margin: 0 0 10px; } .RWDService001 { width: calc(100% - 6vw); } .RWDService001 .boxFeature-2 { padding: 2vw 2.5vw; gap: 0 3vw; } .RWDService001 .boxFeature-2::before { left: calc(2vw + 70px + (3vw / 2)); } .step-block::before { width: 50%; }}@media (max-width: 1800px) { .footer-block .ft-content { gap: calc(var(--SectionTitleBottom) * 1.5) 0; grid-template-columns: auto 650px; } .copyrights { max-width: 100%; }}@media (max-width: 1680px) { :root { --NaviHeight: 80px; } .RWDmenu_plus04 .logo img { height: calc(var(--NaviHeight) - 40px); } .RWDbanner_plus01 .page-scroll a img { width: 15px; height: 15px; } .advantages-item { padding: 1vw 1.5vw; } .footer-block::before { top: calc((var(--SectionPadding) / 2) + 100px + calc((var(--SectionTitleBottom) * 1.5) / 2)); } .ft-logo img { height: 100px; }}@media (max-width: 1536px) { .banner-block .RWDbanner_plus01 .logo img { max-width: 630px; } .advantages-block { margin-top: 3em; } .about-block-title .section-title { display: block; text-align: center; } .about-block-title .sub-title br { display: none; } .footer-list { grid-template-columns: 80px auto; } .footer-block .ft-content { grid-template-columns: auto 530px; }}@media (max-width: 1440px) { :root { --FontSizeMain: clamp(2.875rem, 2.1399rem + 1.5334vw, 3.75rem); /*60-46*/ } .about-block-content::before, .about-block-content::after, .produce-block-content::before, .produce-block-content::after, .produce-block-content .RWDbtn01::before, .produce-block-content .RWDbtn01::after, .step-block-content::before, .step-block-content::after { width: 30px; height: 30px; left: -6px; top: -6px; } .about-block-content::after, .produce-block-content::after, .produce-block-content .RWDbtn01::after, .step-block-content::after { left: auto; right: -6px; } .produce-block-content .RWDbtn01::before, .produce-block-content .RWDbtn01::after { top: auto; bottom: -6px; } .RWDproduct004 #portfolio .mix-grid { grid-gap: 3.5rem 30px; } .RWDService001 .boxFeature-2 { gap: 0 2vw; } .RWDService001 .boxFeature-2::before { left: calc(2vw + 70px + (2vw * 0.4)); } .RWDService001 { width: calc(100% - 4vw); } .footer-block { padding-top: calc(var(--SectionPadding) * 0.8); } .footer-block::before { top: calc((var(--SectionPadding) * 0.8) + 100px + calc((var(--SectionTitleBottom) * 1.5) / 2)); }}@media (max-width: 1366px) { .RWDmenu_plus04 .header { padding-right: 300px; } .RWDmenu_plus04 .site-nav .menu>li>a { padding: 0 15px; } .fix-btn a { padding: 10px 25px; } .RWDmenu_plus04 .site-nav { padding-right: 0; } .about-block-content .RWDbase { gap: 0; display: flex; flex-direction: column-reverse; } .about-image { height: 300px; overflow: hidden; margin-bottom: 3em; position: relative; } .about-image div { position: relative; top: 0; } .advantages-block { margin-top: 3em; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; } .advantages-item { margin-top: 0; } .about-btn-box .fix-btn-01 { margin-left: auto; margin-right: auto; } .container-grayline::before, .container-grayline::after { display: none; } .RWDService001 { width: calc(100% - 10px); } .footer-block::before { display: none; } .footer-block .ft-content { display: flex; flex-wrap: wrap; gap: 0; align-items: center; } .ft-logo { order: 1; width: 100%; margin-bottom: 25px; } .ft-info { order: 2; width: 550px; } .ft-gmap { order: 3; width: calc(100% - 550px); margin-bottom: var(--SectionTitleBottom); } .ft-copyrights { order: 4; width: 100%; padding-top: var(--SectionTitleBottom); position: relative; } .ft-copyrights::before { content: ""; z-index: 0; width: 100vw; height: 1px; display: block; position: absolute; background-color: rgba(221, 221, 221, 0.1); top: 0; left: 50%; margin-left: -50vw; } .ft-info-title { display: none; } .ft-logo-name { margin-left: 20px; } .footer-list { grid-template-columns: 90px auto; }}/* ipad pro 橫式 */@media (width: 1366px) and (height: 1024px) {}@media (max-width: 1300px) { .RWDService001 p { min-height: 234px; }}@media (max-width: 1199px) { /* 首頁預設 */ :root { --NaviHeight: 75px; } .banner-block .RWDbanner_plus01.full .banner-slider.bg .slick-item { max-height: 100svh !important; height: 100svh !important; } .RWDmenu_plus04 .header { padding-left: 30px; padding-right: 280px; } .RWDmenu_plus04 .site-nav .menu>li>a { letter-spacing: 0; padding: 0 10px; } .fix-btn a { padding: 10px 20px; grid-gap: 0 15px; } .fix-btn-01 img { width: 25px; } .banner-block .RWDbanner_plus01 .slick-caption .txt2 { font-size: clamp(1.875rem, 1.4199rem + 2.2753vw, 3.125rem); } /*50-30*/ .banner-block .RWDbanner_plus01 .logo img { max-width: 65vh; } .RWDbanner_plus01 .page-scroll a { width: 10vw; height: 10vw; } .about-image { margin-bottom: calc(var(--SectionTitleBottom) * 1.2); } .advantages-block { margin-top: calc(var(--SectionTitleBottom) * 1.2); } .about-description { margin-top: calc(var(--SectionTitleBottom) * 0.6); } .advantages-item { gap: 1.5vw; } .advantages-title::after { right: 0; margin-top: -30px; height: 60px; } .RWDproduct004 #portfolio .mix-grid { grid-gap: 3rem 20px; } .RWDproduct004 .item-box-desc { padding: 1.7em 0 0; }}@media (max-width: 1024px) { .RWDmenu_plus04 .ml-stack-nav-toggle i { display: none; } .RWDmenu_plus04 .header { padding-right: 290px; padding-left: 50px; } .RWDmenu_plus04 #mobile-menu .menu li a { color: var(--TextMainColor); } .ft-info { width: 50%; } .ft-gmap { width: 50%; padding-left: 3vw; } .RWDalert_fancybox.bottom { width: 100%; right: 0rem !important; border-radius: 1em 1em 0 0; margin-bottom: 0; padding: 30px 45px 20px !important; }}/* ipad pro 直式 */@media (width: 1024px) and (height: 1366px) { .banner-block .RWDbanner_plus01 .slick-caption .txt3 span::before, .banner-block .RWDbanner_plus01 .slick-caption .txt3 span::after { display: none; } .banner-block .RWDbanner_plus01 .slick-caption .txt2 { margin-top: 2vw; } .banner-block .RWDbanner_plus01 .slick-caption .txt3 { margin-top: 3vw; padding-bottom: 5vw; } .RWDbanner_plus01 .page-scroll a { width: 11.5vw; height: 11.5vw; } .RWDbanner_plus01 .page-scroll { right: auto; left: 50%; margin-left: -5.75vw; }}@media (max-width: 1000px) { .RWDService001 p { min-height: 258px; }}@media (max-width: 991px) { .banner-block .RWDbanner_plus01 .slick-caption .txt3 span::before, .banner-block .RWDbanner_plus01 .slick-caption .txt3 span::after { display: none; } .banner-block .RWDbanner_plus01 .slick-caption .txt2 { margin-top: 2vw; } .banner-block .RWDbanner_plus01 .slick-caption .txt3 { margin-top: 3vw; padding-bottom: 3.5vw; } .RWDbanner_plus01 .page-scroll { display: none; } .banner-block .RWDbanner_plus01 .logo img { max-width: 70vw; } .advantages-block { margin-top: var(--SectionTitleBottom); grid-template-columns: 1fr; } .advantages-item { padding: 2vw 3vw; } .produce-block::after { width: 60vw; } .produce-block-content .RWDbtn01::before, .produce-block-content .RWDbtn01::after { display: none; } .RWDproduct004 #portfolio .mix-grid { grid-template-columns: 1fr 1fr; grid-gap: 3rem 25px; } .RWDService001 .row { grid-template-columns: 1fr; gap: 45px 0; } .RWDService001 p { min-height: auto; } .RWDService001 .boxFeature-2 { gap: 0 3vw; padding: 3vw 3vw; } .RWDService001 .boxFeature-2::after { transform: rotate(180deg); top: auto; bottom: -20px; right: auto; left: 50%; margin-left: -20px; } .RWDService001 .row:nth-child(3) { margin-top: 30px; } .step-block::before { width: 80%; }}@media (max-width: 850px) { .RWDbanner_plus01 .page-scroll a { width: 70px; height: 70px; } .RWDbanner_plus01 .page-scroll { margin-left: -35px; } .banner-block .RWDbanner_plus01 .slick-caption .txt3 { padding-bottom: 2vw; } .advantages-title::after { right: 5px; } .RWDService001 { width: 100%; } .RWDService001 .col-md-3.col-sm-6 { padding: 0; } .ft-info { width: 100%; margin-bottom: 25px; } .ft-gmap { width: 100%; padding-left: 0; }}@media (max-width: 800px) { .step-block-title .main-title br { display: none; }}@media (max-width: 768px) {}@media (max-width: 767px) { .banner-block .RWDbanner_plus01 .slick-caption .txt3 { padding-bottom: 1vw; } .produce-block::after { width: 80vw; }}@media screen and (min-width: 415px) and (max-width: 767px) {}@media (max-width: 650px) { /* 首頁預設 */ :root { --BtnWidth: 100%; } /* navi */ .RWDmenu_plus04 .features .member-btn, .RWDmenu_plus04 .features .search-btn { padding-inline: 10px; } .RWDmenu_plus04 .features { margin-right: 0; padding-right: 0; } .RWDmenu_plus04 .features:after { display: none; } /*banner*/ .banner-block .RWDbanner_plus01 .slick-caption .txt3>span>span { display: inline; margin-left: 12px; } .banner-block .RWDbanner_plus01 .slick-caption .txt2 { font-size: clamp(1.875rem, 1.3902rem + 2.4242vw, 2.375rem); } /*38-30*/ .banner-block .RWDbanner_plus01 .logo img { max-width: 85vw; } .RWDbanner_plus01 .page-scroll { display: none; } /*cta至底*/ .RWDmenu_plus04 .header { padding: 0 35px; } .fix-btn-box { top: unset; bottom: 0; height: 50px; width: 100%; } .fix-btn-box .RWDbase { width: 100%; opacity: 1; } .fix-btn a, .fix-btn a>span>small { font-size: 18px; } .fix-btn a { height: 55px; text-align: center; justify-content: center; width: 100%; } .fix-btn a>span>small { display: inline-block; margin-right: 10px; } .banner-block .RWDbanner_plus01.full .banner-slider.bg .slick-item { height: calc(100svh - 50px) !important; } .footer-block { padding-bottom: calc(var(--SectionPadding) * 2); } /*首頁*/ .RWDproduct004 #portfolio .mix-grid { grid-gap: 3rem 20px; } .RWDService001 .row { gap: 35px 0; } .RWDService001 .row:nth-child(3) { margin-top: 25px; }}@media (max-width: 600px) { :root { --FontSizeMain: clamp(2.375rem, 1.8036rem + 2.8571vw, 2.875rem); /*46-38*/ } /*banner*/ .banner-block .RWDbanner_plus01 .slick-caption .txt2 { margin-top: 13px; } .banner-block .RWDbanner_plus01 .slick-caption .txt3 { padding-bottom: 0; } /*banner輪播點*/ .RWDbanner_plus01.style-dotnav.control-left .plus-banner-container, .RWDbanner_plus01.style-dotnav.control-right .plus-banner-container { position: relative; top: inherit; left: 0; right: 0; bottom: 20px; } .RWDbanner_plus01.style-dotnav.control-left .control-box, .RWDbanner_plus01.style-dotnav.control-right .control-box { top: initial; position: absolute; bottom: 1.5%; width: 100%; height: inherit !important; } .RWDbanner_plus01.style-dotnav .control-box .items, .RWDbanner_plus01.style-dotnav .control-box .items li, .RWDbanner_plus01.style-dotnav .slick-arrow { display: inline-block; vertical-align: middle; } /*首頁*/ .RWDproduct004 #portfolio .mix-grid { grid-template-columns: 1fr; } .produce-block-content .RWDbtn01 { margin-top: 10px; } .step-block::before { width: 100%; }}@media (max-width: 480px) { :root { --FontSizeMain: clamp(1.875rem, 0.875rem + 5vw, 2.375rem); /*38-30*/ } .banner-block .RWDbanner_plus01 .slick-caption .txt2>span>span { display: inline; margin-left: 12px; } .RWDmenu_plus04 .features .search-btn { margin-right: 20px; } .fix-btn-01 img { width: 20px; } .RWDbanner_plus01 .page-scroll { margin-left: -17.5px; bottom: 70px; } .RWDbanner_plus01 .page-scroll a { width: 35px; height: 35px; } .about-image { height: auto; } .advantages-block { gap: 15px 0; } .advantages-item, .RWDService001 .boxFeature-2 { grid-template-columns: 1fr; padding: 30px; gap: 20px; } .advantages-title::after { right: auto; margin: 0 auto; height: 1px; width: 100%; top: auto; bottom: -10px; } .produce-block::after { width: 100vw; } .RWDService001 .boxFeature-2::before { display: none; } .RWDService001 p span { margin-top: 0; line-height: 1.5; } .ft-logo .RWDbase { display: block; } .ft-logo-name { margin-left: auto; margin-top: 10px; } .footer-list { grid-template-columns: 1fr; }}@media (max-width: 414px) { .banner-block .RWDbanner_plus01 .slick-caption { top: calc(var(--NaviHeight) + 12%);}}@media (max-width: 380px) { .advantages-item, .RWDService001 .boxFeature-2 { padding: 20px; gap: 15px; }} /*首頁RWD end*/ /*內頁RWD start*/ /* 內頁RWD */ /*內頁RWD end*/ /*850px start*/ @media (max-width: 850px) {} /*850px end*/