@charset "utf-8";
/*Archivo+黑體*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*網站全域設定/＝＝＝＝＝*/
/*變數*/
:root {
  --main-color: #d9be81; /* 主色- */
  --sub1-color: #ffe5a7; /* 輔色- 米黃 */
  --sub2-color: #7e5a32; /* 輔色-咖 */
  --ac-color: #d9be81; /* 強調色- */
  --f1-color: #F9F9F9; /* 淺灰 */
  --f2-color: #cccccc; /* 中度灰 */
  --f3-color: #555555;  /* 深灰 */
  --bg-color: #212121; /* 背景色-鐵灰 */
  --bg2-color: #1a1a1a; /* 背景色-黑 */
  --ff:"Noto Sans", serif; /*字型 var(--ff)*/
  --ff2:"Archivo Black", serif; /*特殊字型*/
  --tr:ease-out 0.5s;/*變化*/
  --br:2px;/*圓角*/
  --pd100:100px 0;
  --m100:100px;
  --m50:50px;
  --m30:30px;
  --f48:48px;
  --f40:40px;
  --f36:36px;
  --f32:32px;
  --f28:28px;
  --f24:24px;
  --f22:22px;
  --f20:20px;
  --f18:18px;
  --f17:17px;
  --f16:16px;
  --f15:15px;
  --f14:14px;
  --f12:12px;
}

@media (max-width:1024px) {
:root{
  --m50:40px;
  --m30:25px;
  --f48:40px;
  --f40:36px;
  --f36:32px;
  --f32:28px;
  --f28:24px;
  --f24:22px;
  --f22:20px;
}
}
@media (max-width:768px) {
:root{
  --pd100:70px 0;
  --m100:70px;
  --m50:30px;
  --m30:20px;
  --f48:32px;
  --f40:28px;
  --f36:26px;
  --f32:24px;
  --f28:20px;
  --f24:20px;
  --f20:18px;
  --f18:17px;
  --f17:16px;
}
}
@media (max-width:600px) {
:root{
  --pd100:50px 0;
  --m100:50px;
  --m50:25px;
  --f48:28px;
  --f40:24px;
  --f36:22px;
  --f32:20px;
  --f28:18px;
  --f24:18px;
  --f22:18px;
  --f20:17px;
  --f18:16px;
  --f17:15px;
  --f16:15px;
}
}
@media (max-width:375px) {
:root{
  --f48:24px;
  --f40:20px;
  --f36:18px;
  --f32:18px;
  --f28:17px;
  --f24:17px;
  --f22:17px;
  --f20:16px;
  --f18:15px;
}
}

/*DEBUG-模組8結帳頁-資訊欄*/
.car_page .information_left {
    display: block;
}

body.car_page .footer_info li p:before{
    position: initial;
    display: inline;
}

/*滾動條 ---------- */

/*寬度*/
::-webkit-scrollbar {width: 8px;}

/*軌道顏色*/
::-webkit-scrollbar-track{
    background-color: var(--bg-color);
    border-radius: 0px;
}

/*滑塊*/
::-webkit-scrollbar-thumb {
    background-color: var(--f2-color);
    border-radius: 3px;
}

/*背景顏色*/
#content_main,#content {
    background-color: var(--bg-color);
}

/*反白顏色/＝＝＝＝＝*/
::-moz-selection {
    color: var(--bg-color);
    background: var(--sub1-color);
}

::selection {
    color: var(--bg-color);
    background: var(--sub1-color);
}

/*-------------------- */

/*版面寬度*/
.main_part {
    max-width: 1200px;
    width: 90%;
    margin: auto;
    position: relative
}

/*功能頁區塊*/
.show_content{
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/*首頁嵌入-功能頁區塊*/
.pageIndex .news_part,/*促銷方案*/
.pageIndex .module_i_news,/*文章*/
.pageIndex .prod_part/*商品*/{
    padding: var(--pd100);
}

/*header寬度*/
.main_header_area .container{
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
}

/* ▼ 統一文字設定 ▼ ＝＝＝＝＝ */
body{
    letter-spacing: 0.1rem;
    font: normal 14px/1.5 var(--ff);
    color: var(--f1-color);
}

/*標題文字樣式 --------------------*/
/*(文章管理、聯絡我們、相簿、估價單、購物車)*/
h5.blog_le_t em,
h4.blog_category_title,
h4.blog_category_title span,
h4.blog_category_title em:after,
.blank_letter,
.subalbum-menu h2,
.promotion_title h2,
.separate_title,
.sidebarBtn h2,
.news_part .title_i_box h4,
.module_i_news .title_i_box h4,
.i_prod_tit span {
    font: bold var(--f28)/2rem var(--ff2);
    color: var(--main-color);
    letter-spacing: .2rem;
    text-align: center;
    line-height: 30px;
    padding-top: 0px;/*聯絡我們*/
}

/* 中標 */
.product_info_page ul.prod li h3.prod-thumb, /*商品詳細頁|商品資訊標題*/
.prod_related h6 span:before /*商品詳細頁|相關推薦*/
{
    font: bold var(--f24)/1.5rem var(--ff2);
    letter-spacing: .2rem;
    text-align: center;
}


/* 小標 */
.blog_list_ri h5,/*文章分享|目錄頁-文章標題*/
.i_blog_ri h5,/*文章分享|首頁崁入-文章標題*/
.accordion li .link a,/*文章分享|目錄頁-文章分類*/
.product-layer-two li a /*商品目錄頁|分類*/
{
    font: bold var(--f18)/1.5rem var(--ff);
    letter-spacing: .2rem;
    text-align: left;
}

.show-list .show_name, /*相簿名稱*/
.other_subalbum li p,
.album_fixed_title ,/*相簿詳情頁-觀看更多字樣*/
.shopping-cart .row {/*購物車結帳頁-商品項目*/
    font: normal var(--f18)/1.5rem var(--ff);
    letter-spacing: .2rem;
    text-align:center;
}

/* 內文(粗) -------------------- */
.submenu a,/*文章目錄頁|次分類*/
.product-layer-two li li a,/*商品目錄頁|次分類*/
.products-list .name,/*商品目錄頁|商品名稱*/
.products-list .price b,/*商品目錄頁|價格*/
#number_area,/*商品詳細頁-型號*/
.sidebarBtn .ori_price,/*商品詳細頁-原價*/
.sidebarBtn .sp_price,/*商品詳細頁-特價*/
.product_info li span,/*商品規格*/
.product_info_page .toShare,/*分享到*/
.related_list li a p,/*商品詳細頁|相關推薦商品標題*/
.contact_form li .form__label,/*聯絡我們、*/
.other_promotion .pmtTitle h3,/*小撇步 | 詳細頁-文章卡片標題*/
.other_promotion li,
.TEL:before,.TEL2:before,.PHONE:before,.FAX:before,/*聯絡我們 | 聯絡資訊-標題*/
.TAXID:before,.MAIL:before,.ADD:before,.ADD2:before,
.remit_page .formbox_form /*匯款通知*/,
.total_amount li,
.shopping-cart .cell {
    font: 500 var(--f16)/2rem var(--ff);
    letter-spacing: .2rem;
}

/* 內文 -------------------- */
.footer_info li p,
.footer_info li p> a,
.me_tp_features a.tp_btn_notice,
.me_tp_features a.tp_btn_cart,
.list_before,/*聯絡我們 | 聯絡資訊-內容*/
.contact_form li .form__insert,/*聯絡我們 | 選取欄文字*/
.form select,/*聯絡我們 | 下拉選單文字*/
.blog_list_ri p,/*文章管理 |目錄頁-文章卡片內文 */
.i_blog_ri p,/*首頁嵌入-文章管理|文章內文*/
.product_info_page ul.prod li .prod-panel,/*商品 | 客戶編輯*/
.blog_box_edit,/*文章管理 | 客戶編輯*/
.share_page .edit/*小撇步 | 客戶編輯*/ {
    font: normal var(--f16) / 2rem var(--ff);
    letter-spacing: .2rem;
}


/* 裝飾小字 -------------------- */
.footer_menu a,
.time ,
.promotion_title span,/*小撇步|促銷方案-年份*/
.promotion_title em,/*小撇步|文章分享-年份*/
.other_promotion .pmtTime,/*小撇步|促銷方案-其他文章卡片時間*/
.other_promotion .pmtTime cite,/*小撇步|文章分享-其他文章卡片時間*/
.other_promotion .pmtTime span,
.blog_list_ri em ,/*文章管理|目錄頁-文章時間*/
.i_blog_ri em,/*首頁嵌入-文章管理|文章時間*/
.product_info li span,/*商品規格*/
.product_info_page .toShare b,/*分享到*/
.path p,/*麵包屑*/
.path p a,
.note/*必填*/,
.shop_search_btn,
.shop_search_txt {
    font: bold var(--f12)/1.5 var(--ff);
    letter-spacing: .1rem;
}


/* ▲ 統一文字設定 ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 統一樣式設定 ▼  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 按鈕樣式 -------------------- */

/* 送出 、下一頁、詢價車、更多*/
.contact_form li.last cite,
.contact_le_map a,
.products-list .more,
.product_info_page .show_content input[type="submit"],
.product_info_page .lastPage,
.inquiry_a1, .inquiry_a2, .inquiry_a3,
.blog_back a.article_btn_prev,
.blog_back a.article_btn_back,
.blog_back a.article_btn_next,
.send_simple,.rewrite_simple,
.animated-arrow {
    font: bold var(--f15)/1.5 var(--ff);
    letter-spacing: .15rem;
    background: transparent;
    background-image: none;
    color: var(--main-color);
    border:1px var(--main-color) solid;
    border-radius: 0vw;
    transition: var(--tr);
}

/*文章按鈕外觀微調*/
.blog_back a.article_btn_next{
    border-radius: 0 0vw 0vw 0 ;
}

.blog_back a.article_btn_prev{
    border-radius: 0vw 0 0 0vw ;
}

.blog_back a.article_btn_back{
    border-radius: 0vw;
}


/*按鈕高度微調-首頁崁入&購物車*/
.product_info_page .show_content input[type="submit"],
.animated-arrow,
.inquiry_a2,
.total_amount .send_simple{
    height: 3rem;
    line-height: 3rem;
}

/* hover效果-實心 */
.contact_form li.last cite:hover,
.contact_le_map a:hover,
.products-list .item a:hover .more,
.product_info_page .show_content input[type="submit"]:hover,
.product_info_page .lastPage:hover,
.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover,
.blog_back a.article_btn_prev:hover,
.blog_back a.article_btn_back:hover,
.blog_back a.article_btn_next:hover,
.send_simple:hover,
.animated-arrow:hover {
    background: var(--main-color);
    color: var(--bg-color);
    border:1px var(--main-color) solid;
    letter-spacing: .3rem;
}

/* 重新填寫 */
.contact_form li.last blockquote,
.product_info_page .show_content input[type="reset"],
.rewrite_simple {
    font: bold var(--f15)/1.5 var(--ff);
    letter-spacing: .15rem;
    background: transparent;
    background-image: none;
    color: var(--f2-color);
    border:none;
    transition: var(--tr);
}

/*hover效果-文字間距*/
.contact_form li.last blockquote:hover input,
.contact_form li.last cite:hover input,
.product_info_page .show_content input[type="reset"]:hover,
.rewrite_simple:hover{
    letter-spacing: .3rem;
}

/* 表單樣式 -------------------- */

/* 欄位樣式*/
.contact_form li .form__label,
.product_info_page ul.prod li,
.product_info li span,
.toShare,
.remit_page .formbox_form /*匯款通知*/ {
    margin-left:0px;
    color: var(--f1-color);
}

/* 輸入框及輸入文字樣式*/
.contact_form li input.noborder,
.contact_form li textarea.noborder,
.qaform .breakF,
.remit_page .border200 {
    border:1px var(--f3-color) solid;
    background: transparent;
/*    border-bottom: 1px var(--f3-color) solid;*/
    padding: 10px;
    color: var(--f1-color);
    letter-spacing: .1rem;
    width: 100%;
}

/*必填*/
.red {
    color:#9F353A;
}

/*下拉選單外觀*/
.form select{
    margin: 10px 0 0 0;/*框外間距*/
    padding: 3px 26px 3px 5px;/*框內間距*/
    background: var(--bg-color);
    color: var(--f1-color);
    border: 1px solid var(--f3-color);
    border-radius: 0.5vw;
}

/*勾選框間距微調(聯絡我們)*/
input[type="checkbox"],
input[type="radio"] {
    margin-left: 15px;
    margin-right: 5px;
}

/*關掉第一欄左邊空白*/
input[type="checkbox"]:first-child,
input[type="radio"]:first-child{
    margin-left: 0px;
}


/*全域照片 hover效果 -------------------- */

/*照片框*/
.i_blog_le , /*文章目錄頁*/
.blog_list_le ,/*文章-首頁嵌入*/
.show-list .show_pic,/*相簿目錄頁*/
.other_subalbum li a div,/*相簿次分類*/
.pic-list .show_pic,/*相簿頁*/
.products-list .pic,/*商品目錄頁*/
.related_list li a img/*商品頁-相關推薦*/ {
    border-radius: var(--br);
    border: 3px solid transparent;
    overflow: hidden;
}

/*hover +外框*/
.subbox_item:hover .blog_list_le ,/*文章目錄頁*/
.module_i_news li:hover .i_blog_le ,/*文章-首頁嵌入*/
.show-list .item a:hover .show_pic,/*相簿目錄頁*/
.other_subalbum li:hover a div,/*相簿次分類*/
.pic-list .item a:hover .show_pic,/*相簿頁*/
.products-list .item:hover a .pic,/*商品目錄頁*/
.related_list li a:hover img/*商品頁-相關推薦*/  {
    border: 3px solid var(--main-color);
    transition: var(--tr);
}

/*hover 照片*/
.show-list .show_pic img,
.pic-list .show_pic img,
.other_subalbum li a img,
.products-list .pic img,
.i_blog_le img ,
.blog_list_le img {
    display:block;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

/*hover 照片放大*/
.subbox_item:hover .blog_list_le img,/*文章目錄頁*/
.module_i_news li:hover .i_blog_le img,/*文章-首頁嵌入*/
.show-list .item a:hover .show_pic img,/*相簿目錄頁*/
.other_subalbum li:hover a img,/*相簿次分類*/
.pic-list .show_pic img:hover,/*相簿頁*/
.products-list .item:hover .pic img/*商品目錄頁*/{
    transform: translate(-50%, -50%) scale(1.1);
    transition: var(--tr);
    filter: saturate(1.5);
}

/*hover 名稱變色*/
.subbox_item:hover .blog_list_ri h5,/*文章目錄頁*/
.module_i_news li:hover .i_blog_ri h5 ,/*文章-首頁嵌入*/
.products-list .item a:hover .name,/*商品目錄頁*/
.related_list li a:hover p/*商品頁-相關推薦*/{
    color: var(--main-color);
    transition: var(--tr);
}

/* ▲ 統一樣式設定 ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* = = = 固定設定 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* ▼ HEADER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*選單版面寬度 */
.main_header_area .container{
    max-width: 1000px;
    margin: 0 auto;
}

/*留白 */
.navigation {
    padding: 10px;
}

/*header樣式*/
.main_header_area {
    background: var(--bg2-color);
    box-shadow: 0px 1px 5px rgba(0 0 0 / 15%);
    transition: var(--tr);
    margin: 0;
    border-radius: 0;
}

/*header下拉變化-底色磨砂感*//*
.sticky .main_header_area.animated {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: saturate(93%) blur(10px);
    border: solid 1px rgba(255, 255, 255, 0.1);
}

/*客製-下滑線條*/
.header_area.sticky .main_header_area:before {width: 100%;}
.main_header_area:before {
    content: "";
    width: 0%;
    height: 4px;
    background: linear-gradient(to right, rgb(255 229 167) 10%, rgba(126,90,50,1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--tr);
    animation-timing-function: ease-in;
}


/*Logo ----------*/

/*logo定位 */
.nav-header {
    transition: var(--tr);
    z-index: 9999;
}

/*logo大小*/
.nav-brand {
    width: 100%;
    max-width: 170px;
    transition: var(--tr);
    margin-top: 14px;
    position: relative;
}

/*下滑變化*//*
.header_area.sticky .nav-brand {
    max-width: 80px;
}

/*SubMenu-輔助選單 ----------*/

.me_tp_features a {
    color: #fff;
}

.shop_search_btn {
    background: var(--sub1-color);
    padding-top: 3px;
    top: 1px;
}

.tp_links a {
    transition:var(--tr);
}

.tp_links a:hover {
    color: var(--main-color);
}

/*隱藏購物車搜尋欄*/
.box_search {display: none;}

/*隱藏購物車*/
.me_tp_features {z-index: 1;position: relative;display: none;}

/*隱藏匯款通知*/
.me_tp_features a.tp_btn_notice {display: none;}

/*隱藏選單按鈕連結*/
.tp_links {display: none;}


/*主選單 -----------*/

/*選單文字*/
.stellarnav > ul > li > a {
    color: var(--main-color);
    font: normal var(--f15)/1.5rem var(--ff);
    height: 1.5rem;
    letter-spacing: 0.15rem;
    text-align: center;
    transition: var(--tr);
    margin: 3rem 0 .5rem 0; /*選單高度*/
    padding: 0px 1rem; /*選單間距*/
}

.stellarnav > ul > li > a b{
    font: normal var(--f15)/1.5rem var(--ff);
}

/*文字hover-變色*/
.stellarnav > ul > li:hover>a{
    color: var(--f2-color);
}

/*下拉欄位 -------------------- */

.stellarnav li a {
    padding: 7px 10px;
    display: block;
    color: var(--main-color);
}

/*下拉符號-隱藏*/
.stellarnav li.has-sub > a:after {
    display: none;
}

/*次選單 -------------------- */

/*次選單樣式-一般*/
.stellarnav ul ul {
    border-radius: 0px;
    width: 180px;
    background: var(--bg2-color);
}

/*次選單樣式-半透明底色*//*
.stellarnav ul ul {
    background: rgb(255 255 255 / 85%);
    border: solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px;
    box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 12%);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
}

/*次選單欄位邊框*/
.stellarnav li li {
    border: 0px var(--f3-color) solid;
}

/*次選單文字樣式*/
.stellarnav li a {
    padding: 7px 10px;
    display: block;
    color: var(--f1-color);
    font-size: 15px;
}

/*欄位尺寸*/
.stellarnav li li > a ,
.stellarnav li li.has-sub > a {
    padding: 7px 5px;
    transition: var(--tr);
    border-left: 2px solid transparent ;
}

/*hover-變色*/
.stellarnav li li:hover > a ,
.stellarnav li li.has-sub:hover > a {
    color: var(--bg-color);
}

.stellarnav > ul > li > ul a:hover{
    background: var(--main-color);
}

/*hover欄位樣式-向右滑動*/
.stellarnav li.has-sub ul li a:hover{
    padding-left: 1rem;
}

/*文字底色透明*/
.stellarnav.desktop li.has-sub ul a {
    position: relative;
    font: normal var(--f15) var(--ff);
    letter-spacing: 0.15rem;
    padding: 1rem;
}

/*選單漸變效果＝＝*/
/*首頁固定選單 開啟後下方RWD 768對應標籤也需開啟*//*
.pageIndex .header_area{position: fixed;width: 100%;}

/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 1024px) {

.main_header_area .container{
    width: 100%;
}

/*關掉-邊緣留白(含Logo)*/
.navigation {
    padding: 0px;
}

/*logo大小*/
.nav-brand{
    max-width: 140px;
    margin-top: 10px;
}

/*選單*//*
.stellarnav ul{
    text-align: center;
}

/*選單高度調整*/
.stellarnav > ul > li > a{
    margin: 0px 0px 0px 0px;
    height: 1.5rem;
}

/*底線調整*/
.stellarnav > ul > li:before {
    bottom: 0px;
}
}

/* ▲ HEADER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* +++ 手機板選單 ▼ -------------------- */

@media screen and (max-width: 768px) {

/*logo大小*/
.nav-brand{
    max-width: 140px;
}

/*logo定位(不置中)*//*
.nav-header{
    position: relative;
    text-align: left;
    left:5vw ;
}

/*漢堡選單 -------------------- */
/*右滑出現*/
.stellarnav.mobile.left > ul{
    left: -100vw;
    transition: var(--tr);
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    max-height: 100vh;
    padding: 0 1rem;
    border: none;
    box-shadow: 1px 0px 10px rgba(0,0,0,.3);
    padding-top: 0;
    background: var(--bg2-color);
    max-width: 350px;/*選單寬度*/
}

/*選單高度*/
.stellarnav.mobile.right > ul,
.stellarnav.mobile.left > ul {
    height: 100vh;
}

.stellarnav.mobile.left.active > ul{
    left: 0;
}

/*三位移*/
.stellarnav.mobile {
    left: auto;
    right: 1vw;
    top: 10px;
}

/*三改色*/
.stellarnav .menu-toggle span.bars span {
    background: var(--main-color);
}

/*menu文字樣式*/
.stellarnav .menu-toggle:after {
    color: var(--main-color);
    font: normal var(--f14)/1.5rem var(--ff);
    letter-spacing: .2rem;
}

/*打開後 close表頭樣式*/
.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu {
    background: var(--bg2-color);
    padding: 1rem 0;
    color: var(--ac-color);
    font: normal var(--f17)/1.5rem var(--ff);
    letter-spacing: .1rem;
}

.stellarnav .icon-close {
    margin-right: .5rem;
}

/*x顏色*/
.stellarnav .icon-close:before,
.stellarnav .icon-close:after {
    border-bottom: solid 3px  var(--ac-color);
}

/*選單外寬度*/
.stellarnav.mobile > ul > li {
    width: auto;
    text-align: left;
    border-bottom: 1px solid var(--f3-color);
}

/*選單文字*/
.stellarnav.mobile > ul > li > a {
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: capitalize;
    padding: 20px 25px;
    line-height: 1rem; /*按鈕高度*/
    text-shadow: none;
    display: flex;
    flex-direction: column;
    border-bottom: unset;
}

/*下拉+號*/
.stellarnav.mobile > ul > li > a.dd-toggle {
    padding: 20px 0px;
}

.stellarnav a.dd-toggle .icon-plus:after,
.stellarnav a.dd-toggle .icon-plus:before {
    border-bottom: solid 2px var(--f2-color);
}

.stellarnav.mobile > ul > li > a b {
    vertical-align: middle;
    line-height: 1.5rem;
}

/*中文*/
.stellarnav.mobile > ul > li > a b:first-of-type{
    color: var(--ac-color);
    font: normal 16px / 1.5 var(--ff);
    letter-spacing: .1rem;
}

.stellarnav.mobile > ul > li > a b:last-of-type{
    color: var(--f2-color);
    font: normal 12px / 1.5 var(--ff);
    letter-spacing: .1rem;
}


/*第一欄視覺調整-往下偏移*/
.stellarnav.mobile > ul > li:nth-child(2) {
    margin-top: 10px;
}

/*第二層 ---------- */

/*下拉區塊-外層*/
.stellarnav.mobile li.open {
    background:transparent;
    padding: 0px;
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
}

/*下拉區塊-內層：調整間距底色*/
.stellarnav.mobile ul ul {
    background:transparent;
    border: none;
    border-radius:0px;
    padding-bottom: 1rem;
}

/*第二層文字區塊*/
.stellarnav li li {
    border:none;
/*    margin-bottom: -2px;*/
}

/*主分類文字*/
.stellarnav>ul>li.has-sub>ul a{
    font-weight: normal;
    color: var(--f1-color);
    padding: .5rem 1rem .5rem 1.5rem;
    border-bottom: none;
    font-size: 15px;
    line-height: 1.2rem;
}

/*主分類文字前 符號*/
.stellarnav li.has-sub ul li a:before{
    content: "- ";
    color: var(--f1-color);
    font-size: 15px;
    font-family: var(--ff);
}

/*次分類下拉選項*/
.stellarnav.mobile li li.has-sub a:first-of-type{
    padding: .5rem 1rem .5rem 1.5rem;
}

/*隱藏-次分類+號*/
.stellarnav.mobile li li.has-sub a:last-of-type{
    display: none;
}

/*關掉-第三層+號旁 符號*/
.stellarnav.mobile li li a.dd-toggle:before{
    display: none;
}

/*第二層文字hover*/
.stellarnav li li:hover > a,
.stellarnav li.has-sub ul li a:hover {
    color: var(--f2-color);
    border: none;
}

/*第三層區塊*/
.stellarnav.mobile li.open li.open{
    padding: 3px;
    background: transparent;
    border: none;
}

}
@media only screen and (max-width: 570px) {
/*logo尺寸*/
.nav-brand {
    max-width: 120px;
}

/*蓋掉預設*/
.stellarnav .menu-toggle {
     padding: 10px;
}

}
@media screen and (max-width: 400px) {
/*logo靠左*//*
.nav-header {
    text-align: left;
}
/*logo偏移*//*
.header_area .nav-brand {
    padding-left: 20px;
    padding-top: 5px;
}
*/
}
/* ▲ 手機板框架 (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 大圖 START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*隱藏-小白點 ----------*/
.swiper-pagination {
    bottom: 1%;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    display: none;
}

/*小白點-尺寸調整*/
.swiper-pagination-bullet {
    width: clamp(1px, 1vw, 10px);
    height: clamp(1px, 1vw, 10px);
}

/*預設解除背景輪播 ----------*/
#content_main {
    margin:0;
}

.bannerindex {
    position:relative;
    height:auto;
}

.swiper-banner {
    position:static;
    margin:0;
    height:auto;
}

.swiper-slide img {
    height:auto;
}

/*----------*/

/*關掉大圖動畫*//*
.leftUp img,.centerBig img,.rightDownBig img,
.moveRight img,.moveDown img{
animation: none;
}
*/

/*大圖偽元素 ----------*/

/*閃閃效果 ----------*/
.swiper-banner {
  overflow: hidden;
  transition-duration: .5s;
  width: 100%;
  max-height: 100vh;
  background: #eeeeee;
  text-align: center;
  vertical-align: middle;
}

.swiper-slide {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.swiper-banner .swiper-slide:before {
  content: "";
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 25%;
  opacity: 0.4;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 70%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  filter: blur(10px);
  -webkit-animation: bannerLight 2.5s ease-in 2s infinite;
  animation: bannerLight 2.5s ease-in 2s infinite
}

@-webkit-keyframes bannerLight {
  0% {
    left: -100%;
    top: -0%
  }

  100% {
    left: 100%;
    top: 100%
  }
}

@keyframes bannerLight {
  0% {
    left: -100%;
    top: -0%
  }

  100% {
    left: 100%;
    top: 100%
  }
}

/*slogan ----------*/
.swiper-slide:after {
    content: "";
    position: absolute;
    z-index: 999;
    pointer-events:none;
    background-size: contain;
    background-repeat: no-repeat;
    width: 27.5%;
    bottom: 40%;
}

.swiper-slide:nth-child(1):after {
    background-image: url(https://pic03.eapple.com.tw/yswrap/slogan_A.png);
    aspect-ratio: 2/1;
    height: auto;
    left: 15%;
}

.swiper-slide:nth-child(2):after {
    background-image: url(https://pic03.eapple.com.tw/yswrap/slogan_B.png);
    aspect-ratio: 2/1;
    height: auto;
    right: 12%;
}


/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


@media screen and (max-width: 1024px) {

/*大圖下推*//*
.pageIndex .header_area {
    position:relative;
}

.bannerindex {
    position: relative;
}

/*關掉-編輯區域設空白*//*
#content_main{
    margin-top: 0;
}

/*slogan*/
.swiper-slide:after{
    width: 35%;
    bottom: 30%;
}

.swiper-slide:nth-child(2):after{
    right: 5%;
}

}

@media screen and (max-width: 768px) {
/*關掉下方空白*/
.bannerindex{
    padding: 0;
    margin: 0;
/*    height: 400px;*/
}

/*大圖比例調整*/
.swiper-slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/*大圖定位*//*
.swiper-slide:nth-child(1) img{
    object-position:right;
}

.swiper-slide:nth-child(2) img{
    object-position:left;
}

/*關掉-閃亮效果*/
.swiper-banner .swiper-slide:before{
    display: none;
}

}

@media screen and (max-width: 600px) {
/*slogan-大小定位調整*/
.swiper-slide:after{
    width: 280px;
    bottom: unset;
    top: 6%;
    filter: drop-shadow(0 0 5px rgba(0 0 0 /50%));
}


.swiper-slide:nth-child(1):after{
    right: unset;
    left: 5%;
}

.swiper-slide:nth-child(2):after{
    right: 1%;
    left: unset;
}


}

/* ▲ 大圖 END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* ▼ FOOTER (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*隱藏-footer logo & footer icon*/
.footer_logo,
.box_link {
    display: none;
}

/*footer布局(含logo、icon)*/
.footer_info {
    padding: 0 5% ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*區塊布局(資訊&按鈕排列)*/
.footer_info ul {
    display: flex;
    vertical-align: top;
    width: calc(100% - 5%);
    flex-direction: column;
}

/*資訊內容布局*/
.footer_info li {
    display: grid;
    align-content: space-between;
    justify-content: space-around;
    width: 100%;
}

/*揚京版權塊 -------------------- */
.copy {
    font: normal var(--f12) / 1.5 var(--ff);
    letter-spacing: .1rem;
    color: var(--main-color);
    margin-top: 5px;
    background-color: var(--bg2-color);
    border-top: 0px var(--sub1-color) solid;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.copy a {
    color:var(--main-color);
    padding: 0 .25rem;
}

.copy a:hover {
    color:var(--main-color);
    text-decoration: underline var(--main-color) 1px solid;
    text-underline-offset: 5px;
}

/* ▲ FOOTER (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ FOOTER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.footer {
    padding: 30px 0 0;
    font: normal var(--f14)/1.5 var(--ff);
    background: var(--bg2-color);
    position: relative;
    z-index: 99;
}

/*資訊內容改色*/
.footer_info li p,
.footer_info li p> a {
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
    color:var(--main-color);
}

/*選單按鈕*/
.footer_menu {
    text-align: center;
    padding-top: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer_menu a {
    display: revert;
    padding: 5px 15px;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--main-color);
    margin: 0.25rem;
    font: normal var(--f12)/1 var(--ff) ;
    letter-spacing: 0.1rem;
    color:var(--main-color);
    background: transparent;
    border-radius: 0px;
}

.footer_menu a:hover {
    transition: var(--tr);
    opacity: .6;
    color:var(--main-color);
    background: transparent;
}

.footer_menu a:first-of-type{
    display: none;
}


/*客製 ----------*/
/*手機改標題*/
.footer_info li p.phone:before{
    content: '預約施工估價專線：';
}

/*第二地址改標題*/
.footer_info li p.add2:before{
    content: '營業時間：';
}

/*隱藏信箱*//*
.footer_info li p.mail{display: none;}

/*排序調整*/
.footer_info li p.add2{order: 1;}
.footer_info li p.phone{order: 2;}
.footer_info li p.line{order: 3;}
.footer_info li p.add{order: 5;}
.footer_info li p.mail{order: 4;}


/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media screen and (max-width: 768px) {

/*左右改上下排列*/
.footer_info ul{
    display: flex;
    flex-direction: column;
}

.footer_info li{
    width: 100%;
    padding: 0;
    justify-content: center;
}

.footer_info li p,
.footer_info li p> a{
    padding-left: 0;
}

/*關掉按鈕*/
.footer_menu{
    display: none;
}

.copy {
    margin-top: 2rem;
    border-top: 1px var(--f2-color) dashed;
    padding-bottom: 60px;
}



}

/* ▲ FOOTER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ PAGE (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 隱藏-麵包屑 -------------------- */
.path p,
.path p a {
    display: none;
}

/* 頁碼 -------------------- */
.page {
    width: 100%;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.page li {
    display: flex;
    margin: 3px;
    width: 30px;
    height: 30px;
    line-height:30px;
    align-items: center;
    justify-content: center;
}

.page li a {
    display: block;
    width: inherit;
    height: inherit;
    line-height: inherit;
    padding: 0;
    transition:var(--tr);
}

.page strong,
.page a:hover {
    background: var(--main-Color);
    border: 1px solid var(--main-Color);
}

/* ▲ PAGE (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* = = = 分隔線 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* ▼ 相簿 (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 版面布局設定 -------------------- */

/*排列*/
ul.show-list,
.other_subalbum,
ul.pic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:0.5rem;
    margin: 0 auto;
    width: 100%;
}

/*次分類版面微調*/
.subalbum-menu {
    margin: 0;
    padding: 0;
}

ul.show-list:before ,
ul.pic-list:before {
    content:none;
}

/*卡片底色透明*/
.show-list .item ,
.other_subalbum li ,
.pic-list .item {
    width: 100%;
    padding: 0;
    margin: 20px 0;
    background: transparent;
}

/*相簿圖片框*/
.show-list .show_pic ,
.other_subalbum li a div ,
.pic-list .show_pic {
    padding-bottom: 75%;
    display: block;
    position: relative;
    overflow: hidden;
    height: 0;
}

/*相簿圖片長寬比例，75% →100:75 = 4:3 */


/*關掉上層透明黑*/
.overlay {
    display: none;
}

/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 768px) {
ul.show-list,
.other_subalbum,
ul.pic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap:0.5rem;
}

}
/* ▲ 相簿 (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 相簿---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 相簿文字 -------------------- */
.show-list .show_name ,
.other_subalbum li p {
    margin-top: 10px;
    color: var(--f1-color);
    overflow: visible;
}

.show-list .item:hover .show_name ,
.other_subalbum li:hover p {
    color: var(--main-color);
}


/* 相簿圖片 -------------------- */
.show-list .show_pic img,
.pic-list .show_pic img ,
.other_subalbum li a img {
    transition: var(--tr) ;
    display: block;
    object-fit: cover;
    min-width: 100%;
    height: 100%;
    position: absolute;
    filter: blur(0px);/*毛玻璃效果*/
}

/*hover放大圖片*//*
.show-list .show_pic img:hover,
.pic-list .show_pic img:hover,
.other_subalbum li a img:hover {
    transform: scale(1.1);
    filter: blur(2px);
}

/* +++ 相簿次分類頁 -------------------- */
/*隱藏--分類標題&標題後方塊*/
.subalbum-menu h2,
.block {
    display: none;
}

/*觀看更多相簿 -------------------- */

/*隱藏-其他次分類區塊*//*
.other_album {
    display: none;
}

/*次分類按鈕*/
.other_album_choice li {
    background: transparent;
    transition: var(--tr);
    border:1px var(--f1-color) solid;
    border-radius: var(--border-radius);
}

.other_album_choice li a {
    color: var(--f1-color);
}

.other_album_choice li:hover {
    background: var(--f1-color);
}

.other_album_choice li:hover a {
    color: var(--bg-color);
}

/*按鈕圖示距離(不動)*/
.other_album_choice li a i.fa-solid.fa-right-from-bracket,
.other_album_choice li a:hover i.fa-solid.fa-right-from-bracket {
    margin: 0 0 0 10px;
}

/*"觀看更多相簿"文字樣式*/
.album_fixed_title {
    background: transparent;
    color: var(--f1-color);
}


/* ▲ 相簿---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 文章管理 (長條無分類版) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*側邊欄 -------------------- */

/*側邊欄寬度*/
.blog_le {
    width: 250px;
    padding: 15px;
 }

/*隱藏-選單標題*/
h5.blog_le_t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-left: 20px;
}

/*"文章分類"文字樣式*/
h5.blog_le_t em {
    text-align: left;
}

/*Article 文字樣式*/
h5.blog_le_t span {
    font: lighter var(--f15)/2 var(--ff);
    color: var(--sub1-color);
    text-transform: uppercase;
    letter-spacing: .1rem;
    text-align: left;
}

/*隱藏-搜尋區*//*
.blog_search{
    display: none;
}

/*搜尋框-------------------- */
.blog_search input[type=search] {
    border-radius: 0;
    border: 0px solid var(--main-color);/*框線*/
    box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);/*陰影*/
    color: var(--f3-color);
    padding: 10px 35px 10px 20px;
}

 /*輸入|跳動*/
.blog_search input[type=search]:focus {
    color: var(--f1-color);
}

/*分類框-------------------- */

.blog_le .accordion {
    border-radius: 0px;
    border: 0px solid var(--main-color);
/*    box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);*/
}

/*hover-底色變化*/
.blog_le .accordion >li:hover,
.blog_le .accordion >li.on_this_category {
    background: var(--main-color)!important;
    transition: var(--tr);
    border-radius: 0px;
}

/*hover-文字偏移*/
.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.on_this_category .link a {
    padding-left: 20px;
}

/*主分類框*/
 .accordion li .link {
    border-bottom: 0px solid  var(--f2-color);
    padding: 10px;
    margin: 10px 0;
 }

/*主分類項目文字*/
.accordion li .link a {
    display: inline-block;
    color: var(--main-color);
    padding-left: 10px;
    transition: var(--tr);
 }

/*次分類 -------------------- */
.submenu {
    background: var(--bg-color);
 }

.submenu li {
    border-bottom: 0px solid  var(--f2-color);
}


/*次分類文字*/
.submenu a {
    color:  var(--f2-color);
    background: transparent;
 }

.submenu a:hover {
    color: var(--main-color);
    background: transparent;
    padding-left: 30px;
}

 /*關掉次分類圖示*/
.submenu a:before {
    display: none;
}


/*展開圖示*/
.blog_le .accordion li i,
.blog_le .accordion li.open i {
    color: var(--main-color);
}

/* +++ 文章目錄頁 -------------------- */

/*文章卡片 -------------------- */

/*關掉白色遮罩*/
.subbox_item a:after,
.module_i_news li a:after {
    display: none;
}

.clearfix:before,
.clearfix:after{
    display: none;
}

.subbox_item,
.module_i_news li {
    width: 100%;
    transition: var(--tr);
    padding: 15px 0;
    border-bottom: 1px dotted var(--f3-color);
    margin: 10px 0;
}


/*直線*/
.subbox_item:hover:after {
    width: 100%;
    transition: var(--tr);
}

.subbox_item:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0px;
    height: 1px;
    background-color: var(--main-color);
    transition: var(--tr);
    z-index: 1;
}

/*邊框內容不內縮*/
.module_i_news li a,
.subbox_item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

/*文章縮圖寬度*/
 .blog_list_le {
    width: 250px;
    padding: 0;
 }

/*照片*/
.i_blog_le img,
.blog_list_le img {
    border-radius: var(--border-radius);
    position: relative;
    transform: scale(1);
    left: initial;
    top: initial;
}

.subbox_item:hover .blog_list_le img{
    transform: scale(1.1);
}

/*文字區塊 -------------------- */
/*文字區塊*/
 .i_blog_ri,
 .blog_list_ri {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
 }

/*樣式微調-文章標題*/
.blog_list_ri h5,
.i_blog_ri h5 {
    color: var(--main-color);
    transition: all var(--tr);
    order: 1;
 }

/*樣式微調-內文*/
.blog_list_ri p,
.i_blog_ri p {
    color: var(--f1-color);
    margin-top: 20px;
    order: 3;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
 }

/*樣式微調-日期*/
.blog_list_ri em,
.i_blog_ri em {
    color: var(--f3-color);
    order: 2;
    margin: .25rem 0;
 }

/*more*/
.subbox_item a:before,
.module_i_news li a:before {
    content: "READ MORE >";
    position: absolute;
    right: 1rem;
    left: auto;
    bottom: 0;
    opacity: 1;
    text-align: left;
    color:var(--f3-color);
    font: normal var(--f12)/1.5 var(--ff);
    letter-spacing: .1rem;
}

/*hover-變色*/
.subbox_item:hover a:before,
.module_i_news li:hover a :before{
    color: var(--main-color);
}

/* +++ 文章內頁 -------------------- */

/*文章標題置中+底線*/
.blog_in_page h4.blog_category_title{
    text-align: center;
    padding: 0 2% 2% 2%;
    border-bottom: 1px solid var(--main-color);
}

 /*內文距離*/
 .blog_ri {
    width: calc(100% - 260px);
    padding: 15px 0 0 50px;
 }

/*內文文字樣式*/
.blog_box_edit {
    color: var(--f1-color);
    padding: 2%;
    line-height: 190% !important;
}

/*強制文字顏色*/
.blog_box_edit p {
    color: var(--f1-color)!important;
    font-family: var(--ff)!important;
    line-height: 190% !important;
}

/*按鈕上下留白*/
.blog_back{
    margin: 3rem 0 1rem 0;
}

/* +++ 首頁文章管理 -------------------- */

/*最多顯示2則*/
.module_i_news li:nth-child(n+3) {
    display: none;
}

/*隱藏-按鈕*/
.i_blog_b {
    display: none;
}

/*布局設定*/
.module_i_news {
    background: var(--bg-color);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/*文章區塊*/
.module_i_news ul {
    width: 70%;
}

/*標題區塊*/
.module_i_news .title_i_box {
    width: 20%;
    padding-left: 5vw;
    margin: 20px auto;
}

/*文字區塊寬度*/
.i_blog_ri {
    width: calc(100% - 250px);
}

/*圖片寬度*/
.i_blog_le {
    width: 200px;
    overflow: hidden;
    position: relative;
}

/*標題-最新消息*/
.module_i_news .title_i_box h4 {
    font: normal var(--f17) / 1 var(--ff);
    color: var(--f1-color);
    text-align: left;
    border-left: 4px solid var(--main-color);
    padding-left: 30px;
}

/*英文標題*/
.module_i_news .title_i_box h4::before {
    content: "NEWS";
    display: block;
    font: bold 36px /1.5 var(--ff);
    color: var(--main-color);
    letter-spacing: .2rem;
}


/*關掉-側邊攔*/
.blog_le{
    display: none;
}

.blog_ri{
    width: 100%;
    padding: 15px 10%;
}

/*內頁-底色透明*/
.blog_in_page .blog_ri{
    background: transparent;
}

/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 @media screen and (max-width: 960px) {
/*詳細頁---------------------*/
/*關掉側邊攔*/
.blog_in_page .blog_le{
    display: none;
}

/*文章區塊寬度調整*/
.blog_in_page .blog_ri{
    width: 90%;
    padding: 0;
    margin: 10px auto;
    display: block;
}

/*首頁嵌入--------------------*/
.module_i_news {
    flex-direction: column;
    flex-wrap: wrap;
}

/*標題寬度*/
.module_i_news .title_i_box{
    width: 90%;
    margin: 10px 0;
}
/*文章區塊寬度*/
.module_i_news ul {
    width: 90%;
}

}
@media screen and (max-width: 768px) {
/*文章區塊-寬度調整*/
.blog_ri {
    width: 100%;
    padding: 0;
}
/*搜尋欄-寬度*/
.blog_le {
    width: 100%;
}

}

@media screen and (max-width: 600px) {

/*直式*/

.blog_ri{
    padding: 0 5vw;
}
.module_i_news li a, .subbox_item a {
    display: grid;
    grid-template-columns: 1fr;
}
.blog_list_le{
    width: 100%;
    height: 250px;/*刪掉ios會破*/
}

.blog_list_ri p, .i_blog_ri p{
    margin: .5rem 0 1rem 0;
}

.subbox_item a:before, .module_i_news li a:before{
    font-size: 12px;
}


/*首頁嵌入-文字區塊填滿*/
.i_blog_ri{
    width: 100%;
}
}


/* ▲ 文章管理 (長條無分類版) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 小撇步(促銷方案) ---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.promotion_title {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 10px;
}

/*日期*/
.time {
    display: flex;
    text-align: left;
    align-items: baseline;
    flex-direction: row;
    color: var(--f2-color);
    padding: 3px 5px;
}

/*年份*/
.promotion_title span {
    border: none;
    padding: 0;
    margin: 0;
    color: var(--f2-color);
}


/*關掉小字*/
.promotion_title h2 span,
.promotion_title em{
    display: none;
}

/*內文*/
.share_page .edit,
.promotions_page .edit {
    margin: auto;
    width: 100%;
    padding: 30px 10px;
    color: var(--f1-color);
}

/*文章布局-----------------*/
.other_promotion {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 20px;
}

.other_promotion li {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
}


/*卡片區塊*/
.other_promotion li a {
    background: var(--bg2-color);
    border-radius: var(--border-radius);
    border: none;/*覆蓋預設*/
    margin: 0;/*覆蓋預設*/
    width: 100%;
    padding: 20px;
    transition: var(--tr);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 2px solid var(--main-color);
}

/*hover*/
.other_promotion li a:hover {
    background: var(--bg-color);
    border-left: 2px solid var(--bg-color);
}

/*卡片裝飾線*/
.other_promotion li a:before {
    left: 5%;
    top: 80%;
    width: 20%;
    height: 0%;
    border-top: 1px var(--main-color) solid;
    transition: var(--tr);
}

/*hover延長*/
.other_promotion li a:hover:before {
    width: 90%;
    height: 0%;
    border-radius: 0;
    border-top: 1px var(--main-color) solid;
    z-index: 1;
}

.other_promotion li a:after,
.other_promotion li a:hover:after,
.other_promotion .pmtTime:after {
    display: none;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display:none;
}

/*日期*//*
.other_promotion .pmtTime {
    color: var(--f2-color);
}

/*年份*/
.other_promotion .pmtTime span {
    color: var(--f2-color);
    padding-right: 10px;
}

/*隱藏-網站公告字樣(none會連標題一起隱藏)*/
.pmtTitle {
    color: transparent;
}

/*文章卡片標題*/
.other_promotion .pmtTitle h3 {
    line-height: 2.5;
    text-align: left;
    margin: 0 0 10px 0;
    -webkit-line-clamp: 1;/*一行*/
    text-overflow: ellipsis;/**/
    color: var(--f1-color);
}

.other_promotion .pmtTime div {
    padding: 0 10px;
}

/*最多顯示3個*/
.other_promotion li:nth-child(n+4){
    display:none;
}

/* +++ 首頁崁入小撇步 ▼ -------------------- */

/*最多顯示4個*/
.news_list ul li:nth-child(n+5){
    display:none;
}

/*底色*/
.news_list ul li a:hover {
    background: transparent;
}


/*底線*/
.news_list ul li{
    border-bottom:1px dotted var(--f2-color);
}

.news_list ul li:hover{
    border-bottom-color:transparent;
}

/*日期 & read more*/
.news_list ul li span,
.news_list ul li p:after{
    color: var(--f2-color);
    letter-spacing: .15rem;
}

.news_list ul li p:after {
    content: '>>';
}

/*文章標題*/
.news_list ul li p{
    color: var(--f1-color);
}

/*hovwr 變色*/
.news_list ul li a:hover span,
.news_list ul li a:hover p,
.news_list ul li a:hover p:after{
    color: var(--main-color);
}

@media screen and (max-width: 768px){
.news_part .title_i_box{
    margin-bottom: 10px;
}

/*蓋掉預設*/
.pageIndex .news_list ul li{
    border: none;
    background: none;
    border-bottom: 1px dotted var(--f2-color);
    margin-bottom: 0px;
}

/*隱藏 >>*/
.news_list ul li p:after{
    display: none;
}

.news_list ul li a{
    display: flex;
    flex-direction: row;
}

.news_list ul li span{
    width: min(40%,150px);
}

.news_list ul li p{
    text-align: left;
    padding: 15px 0;
}

/*日期 & read more*/
.news_list ul li span,
.news_list ul li p:after{
    color: var(--f2-color);
    font: bold 12px / 1.5 var(--ff2);
    letter-spacing: .15rem;
}
}

@media screen and (max-width: 600px){

/*調整高度*/
.news_list ul li a{
    padding: .5rem;
}

/*日期標題上下排列*/
.news_list ul li a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*日期置左*/
.news_list ul li span{
    text-align: left;
}

/*標題*/
.news_list ul li p{
    line-height: 1.5rem;
}


}

/* +++ 首頁崁入小撇步 ▲ -------------------- */

/* ▲ 小撇步(促銷方案)---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* ▼ 聯絡我們 (無資訊，表單兩欄分類)--START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*隱藏-聯絡資訊*/
.contact_page .path,
.contact_content .information_left {
    display: none;
}

/*表單寬度*/
.contact_content .information_right {
    width: 90%;
    max-width: 1100px;
    padding: 50px 0;
    margin: 0 auto;
    display: block;
}

/*標題布局*/
.information_right .blank_letter {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
/*    color: transparent;/*隱藏標題*/
}

/*兩欄布局*/
.contact_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0;
    padding: 0 30px;
}


.contact_form li {
    width: 49%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0 0 24px 0;
    border-bottom: none;
    color: #666;
}

/*留言內容-單欄*/
.contact_form li:nth-of-type(1),
.contact_form li:nth-last-of-type(3) {
    width: 100%;
}

/*驗證碼-布局*/
.contact_form li .form__label {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-bottom: 10px;
    padding-right: 0;
}

/*必填*/
.star {
    order: 1;
    height: 18px;
}

.contact_form li.last cite {
    margin-left: 10px;
}

/*按鈕靠右不換行*/
.contact_form li.last {
    justify-content: flex-end;
    flex-wrap: nowrap;
    height: 5rem;
}

@media screen and (max-width: 568px) {
    .contact_form li {
        width: 100%;
    }

    .contact_form li.last{
        justify-content: space-around;
    }

}

/*編輯區滿版*/
.contact_page .main_part{
    width: 100%;
    max-width: 100%;
}
.contact_editbox{
    padding: 0;
}

/* ▲ 聯絡我們(無資訊，表單兩欄分類)--END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ BANNER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*BANNE背景 ----------*/

.banner {
    position: relative;
    height: clamp(200px,50vw,400px);
    background: repeating-linear-gradient(45deg, rgba(226, 226, 226, 0.01) 0px, rgba(226, 226, 226, 0.01) 2px, transparent 2px, transparent 4px), linear-gradient(90deg, rgb(26, 26, 26), rgb(26, 26, 26));
}

/*預設*//*
.banner.banB {
    background: repeating-linear-gradient(45deg, rgba(226, 226, 226, 0.01) 0px, rgba(226, 226, 226, 0.01) 2px, transparent 2px, transparent 4px), linear-gradient(90deg, rgb(26, 26, 26), rgb(26, 26, 26));
    background-size: cover;
}

/*小撇步-*//*
.banner.banA {
    background: url(https://pic03.eapple.com.tw/yswrap/bn_a.jpg)center no-repeat;
    background-size: cover;
}

/*聯絡我們*/
.banner.banC {
    background: url(https://pic03.eapple.com.tw/yswrap/bn_c.jpg)center no-repeat;
    background-size: cover;
    display: none;
}

/*相簿-*/
.banner.banE {
    background: url(https://pic03.eapple.com.tw/yswrap/bn_e.jpg)center no-repeat;
    background-size: cover;
}

/*購物車-*//*
.banner.banF {
    background: url(https://pic03.eapple.com.tw/yswrap/bn_f.jpg)center no-repeat;
    background-size: cover;
}

/*文章管理-*/
.banner.banblog {
    background: url(https://pic03.eapple.com.tw/yswrap/bn_banblog.jpg)center no-repeat;
    background-size: cover;
}

/*頁面標題 ----------*/

.banner h5{
    width: 100%;
    font: bold var(--f36)/2rem var(--ff);
    color: var(--main-color);
    letter-spacing: .3rem;
    text-align: center;
    position: absolute;
    bottom: 10%;
}

/*英文小標*/
.banner h5:before {
    content: "YS";
    display: block;
    font: bold var(--f24)/2rem var(--ff2);
    letter-spacing: .3rem;
    color: var(--main-color);
    background-image: linear-gradient(to bottom, rgb(255 229 167) 10%, rgba(126, 90, 50, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*直線*/
/*.banner h5:after {
    content: "";
    width: 2px;
    height: 1.5rem;
    background: var(--bg-color);
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
}*/

@media screen and (max-width: 768px) {
    .banner {
        height: 200px;
    }

    .banner.banc,
    .banner.banB,
    .banner.banA{
        background-position:left ;
    }

    .banner.banblog{
        background-position:right ;
    }

    .banner.banE{
        background-position:center ;
    }

}

/* ▲ BANNER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

