@charset "utf-8"; /*●●●●●●●●●●●●●●●●●●●●●●●● 隱藏內容 ●●●●●●●●●●●●●●●●●●●●●●●●*/ .me_tp_features{display:none;} .box_link{display:none;} .tp_links{display:none;} .path p, .path p a { display: none;} /*●●●●●●●●●●●●●●●●●●●●●●●● 大範圍設定 ●●●●●●●●●●●●●●●●●●●●●●●●*/ *{letter-spacing: .1rem;} *{font-family:/* "Kosugi Maru", sans-serif;*/} :root{ /*顏色*/ --ColorMain:#ff7701/**LOGO橘*/; --ColorMain2:#464646 /**LOGO黑*/; --ColorMain3:#f6eeee /*淺淺紅*/; --ColorSub:#ab9976/*淺咖*/; --ColorSub2:#878787 /**中灰色*/; --ColorSub3:#a9a9a9/*灰色*/; --textColor: #333333; /*文字*/ /* 字型 */ --ffmain: "微軟正黑體"; --ffsub:"Noto Sans TC", sans-serif; } :root { /* Brand */ --brand-black: #000000; --brand-orange: #ff7701; --brand-white: #ffffff; /* Core palette (莫蘭迪灰＋藍) */ --primary-700: #3c4a57; /* 深藍灰 */ --primary-500: #6d7d8b; /* 灰藍綠（點綴） */ --neutral-100: #f5f5f5; /* 淺灰白（大面積背景） */ --neutral-300: #e0e0e0; /* 邊框/分隔線 */ --neutral-900: #1a1a1a; /* Text */ --text-primary: #333333; --text-secondary: #666666; --text-on-dark: #ffffff; --text-on-accent: #ffffff; /* Surfaces */ --bg-page: var(--neutral-100); --bg-surface: #ffffff; --bg-inverse: var(--primary-700); /* Actions / States */ --accent: var(--brand-orange); --accent-hover: var(--primary-700); --link: var(--primary-700); --link-hover: var(--brand-orange); --focus-ring: rgba(255, 119, 1, 0.35); /* UI elements */ --border: var(--neutral-300); --card-shadow: 0 2px 10px rgba(0,0,0,0.06); --radius: 10px; --radius-lg: 16px; } /* 暗色主題（選用：加上 .theme-dark 到 或容器） *//* .theme-dark { --bg-page: #0f1418; --bg-surface: #121820; --bg-inverse: #000000; --text-primary: #e8e8e8; --text-secondary: #b7bdc6; --border: rgba(255,255,255,0.12); --card-shadow: 0 8px 24px rgba(0,0,0,0.4); --link: #aeb7c3; --link-hover: var(--brand-orange); } /* 使用示例（可直接貼上測試） */ body { background: var(--bg-page); color: var(--text-primary); } header, footer { background: var(--bg-inverse); color: var(--text-on-dark); } .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); } .btn-primary { background: var(--accent); color: var(--text-on-accent); border: none; padding: 12px 20px; border-radius: var(--radius-lg); } .btn-primary:hover { background: var(--accent-hover); } /* a { color: var(--link); } a:hover { color: var(--link-hover); }*/ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } #content_main { margin-top: 0;} #content_main {} @media screen and (max-width: 1024px){ } @media screen and (max-width: 768px){ } @media screen and (max-width: 450px) { } /*●●●●●●●●●●●●●●●●●●●●●●●● 浮動按鈕 ●●●●●●●●●●●●●●●●●●●●●●●●*/ .info_fix_links{ display:block !important;}/*保持展開*/ .info_fix>span { display: none;}/*隱藏展開鈕*/ .linksBtn, .info_fix:hover>.linksBtn{ background: #de8c66;} .info_fix_links a { opacity: 0.7; background:#616d88;} .info_fix_links a:hover { opacity: 1; background:var(--ColorMain); animation: move2 2s; animation-timing-function: ease-out;} .info_fix_links a:nth-of-type(even) { opacity: 0.7; background:var(--ColorMain2);} .info_fix_links a:nth-of-type(even):hover { opacity: 1; background:var(--ColorMain);} @keyframes move2{ 0%{transform: rotateY(0deg);} 100%{transform: rotateY(360deg);}} /*●●●●●●●●●●●●●●●●●●●●●●●● 查看更多按鈕 ●●●●●●●●●●●●●●●●●●●●●●●●*/ .animated-arrow {border-radius: 20px;background: unset;transition:.3s;position:relative;overflow:hidden; color: #fff; font-size: 14px;height: 40px; line-height: 40px;} .animated-arrow b, .animated-arrow i{position:relative; z-index:99;} .animated-arrow b{ font-weight: normal;} .animated-arrow::after { content:"";position:absolute;width:0px;height:100%;top:0px;left:0px;transition:.5s;} .animated-arrow:hover { color: #fff;} .animated-arrow:hover::after { width:100%;} /*●●●●●●●●●●●●●●●●●●●●●●●● 大圖設定 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○//*首頁大圖*/ .bannerindex { position:relative; height:auto;} .swiper-banner { position:static; margin:0; height:auto;} .swiper-slide img { height:auto;} .bannerindex{position: relative;} /*煙霧*/ .bannerindex:before, .bannerindex:after{ content: ""; position: absolute; top: 0; left: 0; z-index: 10; mix-blend-mode: hard-light; position: absolute; z-index: 999; pointer-events: none; /*transition-duration: 2s;*/ /*transition-timing-function: linear;*/ width: 100%; height: 100%; background: url(https://pic03.eapple.com.tw/dazheng/cover.png); background-size: contain; /*background-repeat: repeat-x;*/ animation: anime_wave01 200s linear 0s infinite reverse; opacity: .5; } .bannerindex:after { background: url(https://pic03.eapple.com.tw/dazheng/BN.png); background-size: cover; mix-blend-mode: revert; animation-duration: 100s;opacity: 1; animation-delay: 2s; animation-direction: alternate; } @keyframes anime_wave01 { from { background-position: 0 0;} to { background-position: -2000px 0;}} /*各別*/ .bannerindex .swiper-slide{position: relative;} .bannerindex .swiper-slide:before, .bannerindex .swiper-slide:after { content: ""; position: absolute; z-index: 999; pointer-events: none; transition-duration: 2s; transition-timing-function: linear; } .bannerindex .swiper-slide.swiper-slide-active:nth-child(1):before, .bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after { background-image: url(https://pic03.eapple.com.tw/dazheng/BN1.png); background-repeat: no-repeat; width: 100%; height: 100%; top: 0; background-size: contain; position: absolute; z-index: 101; animation: up_pop 1.5s ease; } .bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after, .bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after{ background-image: url(https://pic03.eapple.com.tw/dazheng/BN2.png); animation: fade_in 1.5s ease; } @keyframes up_pop { 0% { transform: translateY(10%); opacity: 0;} 60% { transform: translateY(0);} 70% { transform: translateY(1%);opacity: 1;} 100% { transform: translateY(0);} } @keyframes fade_in { 0% { opacity: 0;} 60% { opacity: 0;} 65% { opacity: 1;} 80% { opacity: 0;} 95% { opacity: 1;} 100% { opacity: 1;} } /*大圖滑動點*/ .bannerindex {--swiper-pagination-color: #fff;} .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: auto;top: 50%;left: 2vw;width: 25px;} .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0px 5px; width: 3px; height: 13px;border-radius: 2px;} @media screen and (max-width: 768px) { .bannerindex { padding:0; margin:0;} } /*○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○//*內頁大圖*/ .banner {background: url(https://pic03.eapple.com.tw/dazheng/ban.jpg) no-repeat; text-align: right; padding: 5% 10%; background-position: center center !important; background-size: cover !important; height: 20vw;display: flex; justify-content: flex-end;} .banner h5 {font-weight: bold;color: white;letter-spacing: 8px;font-size: 20px;border-bottom: 5px solid var(--ColorMain); padding-bottom: 15px; margin-bottom: -10px;} .banner h5:before{ content: "DA ZHENG"; letter-spacing: 2px; font-weight: normal; display: block; font-size: 30px; margin-bottom: 5px; color: #fff; font-family: Bangers;} .banner.banE h5:before {content: "CASE";} .banner.banF h5:before {content: "SHOP";} .banner.banblog h5:before {content: "FAQ";} @media screen and (max-width: 1024px) { .banner{} .banner h5 {} .banner h5:before{} } @media screen and (max-width: 768px) { .banner { min-height: 160px;} .banner h5 {} .banner h5:before{} } @media screen and (max-width: 450px){ .banner{} } /*●●●●●●●●●●●●●●●●●●●●●●●● 功能頁首頁顯示-外掛 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*英文*/ .i_prod_tit h2, .i_video_tit h2, .news_part .title_i_box h6, .module_i_album .title_i_box h6, .module_i_news .title_i_box h6 {font-family: serif;font-weight: bold;font-size: 35px;margin-bottom: 5px;color: #fff;letter-spacing: 0;} /*中文*/ .i_prod_tit span, .i_video_tit span, .news_part .title_i_box h4, .module_i_album .title_i_box h4, .module_i_news .title_i_box h4 {font-size: 22px;} /*●●●●●●●●●●●●●●●●●●●●●●●● HEADER區塊 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*LOGO*/ .container {max-width:95%;} .nav-header {max-width: 210px;} /*底色*/ .header_area { padding: 0;} .pageIndex .header_area{opacity: 0;transition: all .5s;} .pageIndex .header_area, .header_area, .header_area.sticky {padding: 10px; background: transparent;position: fixed;border-top: 5px solid var(--ColorMain);} .header_area{position: relative;} .header_area.sticky {opacity: 1;transition: all .5s; box-shadow: 0px -9px 20px 0px;} .header_area:before{content: "";width: 80%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%); background: transparent;transition: all .5s;} .header_area.sticky:before{width: 100%;background: #fff;transition: all .5s;} .navigation {display: flex;align-items: center;grid-gap: 0 10px;} .main_header_area .container{max-width: 850px;} /*第一層*/ .stellarnav > ul {display: flex; justify-content: flex-end;gap: 10px;} .stellarnav > ul > li:before{/*content: "+"; color: #ffcfbe;font-style: italic;*/} .stellarnav > ul > li { display: flex; align-items: center;} .stellarnav > ul > li:nth-of-type(3) > a, .stellarnav > ul > li:nth-of-type(4) > a, .stellarnav > ul > li:nth-of-type(5) > a{ padding-right: 17px !important;} .stellarnav > ul > li > a{color: var(--textColor);letter-spacing: .2rem;transition: all .5s;font-weight: bold;} .stellarnav > ul > li > a:hover {color:var(--ColorMain2);} .stellarnav > ul > li:nth-of-type(even) > a{color:var(--ColorSub2);} .stellarnav > ul > li > a b{font-weight: bold;} .stellarnav > ul > li > a b:nth-of-type(2){color:var(--ColorMain2);} /*主選單箭頭*/ .stellarnav li.has-sub > a:after {border-left: 5px solid transparent;border-right: 5px solid transparent; border-top: 5px solid var(--ColorMain);} /*第二層*/ .stellarnav ul ul{ background: transparent;top: 40px;} .stellarnav li a{ padding: 10px;transition: 1s ease;} .stellarnav li.has-sub li {border: none; border-bottom: 1px solid #d69e88; background: #ffffffe8;} .stellarnav li.has-sub li a:hover{background: var(--ColorMain); color: #fff; padding-left: 18px;} @media screen and (max-width: 1024px) { .stellarnav > ul { justify-content: center; gap: 5px;} } @media screen and (max-width: 768px) { .main_header_area .container{max-width: 100%;} .nav-header{max-width: 180px;} .pageIndex .header_area, .header_area, .header_area.sticky { position: sticky;opacity: 1;padding: 5px 0;} /*menu*/ .stellarnav .menu-toggle{ } .stellarnav .menu-toggle:after{ color: var(--ColorMain2); margin-top: 10px;font-size: 8px;} .stellarnav .menu-toggle span.bars span { background: var(--ColorSub3);} /*區塊*/ .stellarnav > ul { margin-top: 0;} .stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul { background:#ffffffeb;backdrop-filter: saturate(93%) blur(3px); width: 350px; max-width: 100%;} /*close*/ .stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent;color: var(--ColorMain);} .stellarnav .icon-close:before, .stellarnav .icon-close:after{ border-bottom: solid 3px var(--ColorMain);} .stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after { border-bottom: solid 3px var(--ColorMain2);} .stellarnav .icon-close { margin-right: 5px;} /*第一層*/ .stellarnav.mobile > ul > li{margin: 20px 10px; padding-bottom: 20px;} .stellarnav.mobile > ul > li > a.mob_main_link, .stellarnav > ul > li:nth-of-type(2) > a, .stellarnav > ul > li:nth-of-type(3) > a{ /*padding: 30px 0px !important; */} .stellarnav.mobile > ul > li > a.mob_main_link{/*margin: 0 30px;*/} .stellarnav.mobile > ul > li > a b {font-style: normal;color: var(--ColorMain2);} .stellarnav.mobile > ul > li:hover > a b{color: var(--ColorMain);} .stellarnav > ul > li:before{display:none;} .stellarnav ul ul {top: 0;} .stellarnav.mobile li.open { background: transparent;padding: 0 0 20px;} .stellarnav.mobile li a {border-bottom: none;} /*第二層*/ .stellarnav.mobile > ul > li > a.dd-toggle{ padding: 6px 0px !important;margin: 0;} .stellarnav.mobile ul { background: transparent;} .stellarnav.mobile ul ul { margin: 0px 40px 15px 15px;} .stellarnav li.has-sub li { background: #eaeaeac2;} .stellarnav li a{} } @media screen and (max-width: 570px) { .stellarnav .menu-toggle { padding: 10px;} } /*●●●●●●●●●●●●●●●●●●●●●●●● FOOTER區塊 ●●●●●●●●●●●●●●●●●●●●●●●●*/ .footer{background: #fff;padding: 0;box-shadow: -5px 12px 20px 0px;} .footer .center {max-width: 1000px;width: 90%;} /*LOGO*/ .footer_logo{ margin: auto;} /*聯絡資料*/ .footer_info {display: flex; flex-direction: column; grid-gap: 10px;padding: 20px 0 0;} .footer_info ul{display: flex; flex-direction: column; align-items: center;} .footer_info li {display: flex; flex-wrap: wrap; justify-content: center;text-align: center; gap: 0 15px;padding: 5px;} .footer_info li:nth-child(1){} .footer_info li:nth-child(2){} .footer_info li+li { margin-top: 0;} .footer_info li p, .footer_info li p a{ color:var(--textColor); font-size: 13px; letter-spacing: 1px;} .footer_info li p {display: flex;} .footer_info li p:after { content: '●'; color: var(--ColorMain3); font-size: 10px;order: 1;margin-right: 5px;} .footer_info li p:before {order: 2;} .footer_info li p a{order: 3;} /*按鈕*/ .footer_menu a{background: var(--ColorMain2);border: none;color: white;font-size: 12px;padding: 6px 8px;position: relative;z-index: 0; margin: 5px 0;width: 130px;} .footer_menu a:nth-of-type(even){background:var(--ColorSub2);} .footer_menu a:first-child{display: none;} .footer_menu a:before{content: "";width: 0;height: 100%;position: absolute;top: 0;left: 0;transition: all .5s;background:#616d88;z-index: -1;} .footer_menu a:hover:before{left: auto;right: 0;width: 100%;transition: all .5s;} /*copy*/ .copy {padding: 8px 0 10px; margin-top: 5px;background: transparent; border-top: 1px solid var(--ColorMain3);} .copy, .copy a{color: #8b8b8b;letter-spacing: 0;} /*#to_top*/ #to_top { border: 1px solid #ffffff33; background: #828282b5; box-shadow: none; border-radius: 0; color: #ffffff;bottom: 90px;} #to_top i:before, #to_top i:after { background: #ffffff;} /*#bottom_menu*/ #bottom_menu{display:none;background: var(--ColorMain2); box-shadow: none;} #bottom_menu li { border-right: 1px solid #ffffff;} #bottom_menu li a i { color: white;} #bottom_menu li a em {color: #878787;} @media screen and (max-width: 768px) { .footer { /*padding: 0 0 55px;*/} #to_top { bottom: 66px; } } /*●●●●●●●●●●●●●●●●●●●●●●●● 文章 ●●●●●●●●●●●●●●●●●●●●●●●●*/ .blog_subbox { grid-template-columns: 1fr; grid-gap: 10px;} .subbox_item { background: white;} .subbox_item a { grid-template-columns: 1fr;} .blog_list_ri em {display: none;} .blog_list_ri { padding: 0;} .blog_list_le { display: none;} .blog_list_ri h5 { background: #ebedf3; padding: 1.5%;} .blog_list_ri p { margin: 1.5%;} .subbox_item a:after { background: transparent; border: 1px solid var(--ColorMain);} .subbox_item a:before {color: transparent;} .blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: var(--link) !important;} /*內頁*/ h4.blog_category_title { border-bottom: 1px solid;} .blog_in_page .main_part { background: white;} .news_related_list li figure { display: none;} .blog_back a.article_btn_back {background: var(--ColorMain);} .lastPage { background: var(--primary-500);} /*●●●●●●●●●●●●●●●●●●●●●●●● 購物車 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*購物首頁*//* .products-list{grid-template-columns: repeat(4, 1fr);} .products-list .price, .products-list .more{ display: none;} .products-list .item a {padding-bottom: 0;} .products-list .name { text-align: center;} .products-list .pic { border-radius: 10px;} .products-list li:hover .pic img{transform: scale(1.5); transition: all 5s ease;} .product_page .main_part{padding: 50px 20px 0;} /*分類*//* .product_menu_list>ul{display: flex; flex-wrap: wrap;gap: 5px; justify-content: center;} .product-layer-two li { width: 30%; text-align: center;} .product-layer-two li:hover a{background: var(--ColorMain);color: white;} .product-layer-two li.active a{border: 1px #979797 solid; background: #e4e4e4;} @media screen and (max-width: 980px) { .products-list, .pageIndex .products-list {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));} } @media screen and (max-width: 600px) { .product-layer-two li { margin: 0;} } /*●●●●●●●●●●●●●●●●●●●●●●●● 相簿 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*相簿首頁*/ .other_subalbum li a p { padding: 2% 5%;background: var(--neutral-900);color: white; text-align: center;} .subalbum-menu h2 { display: none;} /*相簿內頁*/ /*●●●●●●●●●●●●●●●●●●●●●●●● 聯絡我們 ●●●●●●●●●●●●●●●●●●●●●●●●*/ /*首頁*/ .contact_content .information_left{ display:none;} .contact_content .information_right { max-width: 100%; width: 800px; margin: auto;} .blank_letter { text-align: right;} .contact_form li.last blockquote, .contact_form li.last cite { padding: 0px;} .contact_form li.last { margin-top: 10px;} .i_contact_box{ background: #f3f3f3;} .blank_letter .red {color: var(--ColorMain);} /*內頁*/ .blank_letter {display: flex; flex-direction: column;padding-top: 0;} .blank_letter:before{content: 'FORM';font-family: Antonio;color: var(--ColorMain);font-size: 50px;font-weight: normal;} .contact_page .contact_content { padding: 0; margin: 0;} .contact_page .main_part{background: #f3f3f3;max-width: 100%;display: flex;flex-direction: column-reverse;} .contact_editbox { padding: 0; margin: 0;} /*聯絡資料*/ .list_before.info li:before{letter-spacing: 2px;letter-spacing: 2px; font-weight: normal;padding-left: 20px; width: 70px;} .list_before.info li:first-of-type{border-top: 1px solid var(--ColorMain2);} .list_before.info li { padding: 15px; padding-left: 60px;;border-bottom: 1px solid var(--ColorMain2);} .contact_le_nomap iframe{width: 100%;} /*表單*/ .contact_content form{display:flex;} .contact_form li input.noborder, .contact_form li textarea.noborder { border: none; background: #fff; border-radius: 4px;padding: 10px;} .contact_form { grid-gap: 20px;} .contact_page .red { color: var(--ColorMain);} .contact_form li.last cite { background: var(--ColorMain);} .contact_form li.last blockquote { border: 1px solid var(--ColorMain);background: white;} .contact_form li .form__label{font-weight: bold;} .contact_form li.last cite{ border: none;} @media screen and (max-width: 768px){ .contact_content form { flex-direction: column;} .footer_info ul { gap: 10px;} .contact_content .information_right { padding: 10% 5%;} .contact_content{} } @media screen and (max-width: 600px){ .contact_form li .form__label {font-weight: normal; padding: 0; background: transparent;} .contact_form { grid-gap: 10px;} .i_contact_box { padding: 0;} }