@charset "utf-8";
/*字體-思源黑體*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');


/*變數*/
:root {
    --first-color: #3D3539; /*主色-深咖 var(--first-color)*/
    --second-color: #D7D2CE; /*輔色-奶茶灰  var(--second-color) */
    --third-color: #D7D2CE; /*輔色-奶茶灰 var(--third-color) */
    --accent-color: #3D3539; /*強調色-深咖  var(--accent-color)*/
    --f1-color: #444;  /* 深灰 var(--dark-gray) var(--f1-color)*/
    --f2-color: #bbb; /* 中度灰 var(--medium-gray) var(--f2-color)*/
    --f3-color: #e9e9e9;  /* 淺灰 var(--light-gray) var(--f3-color)*/
    --bg-color: #fff; /*背景色-白 var(--bg-color)*/
    --ff:'Noto Sans TC', sans-serif; /*字型 var(--ff)*/
    --f24:24px;/*var(--f24)*/
    --f21:21px;/*var(--f21)*/
    --f17:17px;/*var(--f17)*/
    --f15:15px;/*var(--f15)*/
    --f14:14px;/*var(--f14)*/
    --f12:12px;/*var(--f12)*/
}

@media screen and (max-width: 968px) {
:root {
    --f24:20px;
    --f21:18px;
    --f17:15px;
    --f15:13px;
    --f14:13px;
    --f12:10px;
}
}

body{
    letter-spacing: 0.1rem;
    font: normal 14px/1.5 var(--ff);
}

/*背景色*/
#content_main,
#content {
    background-color: var(--bg-color);
}


::selection {
    color: var(--bg-color);
    background: var(--first-color);
}
/*滾動條全域設定---------- */

/*寬度*/
::-webkit-scrollbar {
    width: 6px;
}

/*軌道顏色*/
::-webkit-scrollbar-track{
    background-color: var(--f3-color);
    border-radius: 3px;
}

/*滑塊*/
::-webkit-scrollbar-thumb {
    background-color: var(--f2-color);
    border-radius: 3px;
}

/*版面寬度*/
.main_header_area .container{
    max-width: 1250px;
    width: 90%;
    margin: 0 auto;
}

.album_page .main_part ,
.album_class_page .main_part,
.album_info_page .main_part,
.share_page .main_part,
.product_page .main_part,
.product_info_page .main_part,
.contact_page .main_part,
.inquiry_page .main_part,
.work_page .main_part ,
.work_class_page .main_part,
.work_info_page .main_part{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

/*首頁嵌入區塊寬度*/
.pageIndex .news_part,
.pageIndex .module_i_news,
.pageIndex .prod_part{
    padding: 50px 0px;
}

/* ▼ 統一文字設定 ▼  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*標題文字樣式(文章管理、聯絡我們、相簿、估價單、購物車)*/
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(--f24)/2 var(--ff);
    color: var(--first-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(--f21)/1.5 var(--ff);
    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(--f17)/1.5 var(--ff);
    letter-spacing: .15rem;
    text-align: left;
}

.show-list .show_name,/*相簿名稱*/
.other_subalbum li p,
.album_fixed_title,/*相簿詳情頁-觀看更多字樣*/
.shopping-cart .row/*購物車結帳頁-商品項目*/{
    font: normal var(--f17)/1.5 var(--ff);
    letter-spacing: .15rem;
    text-align:center;
}

/* 內文(粗) -------------------- */
.submenu a,/*文章目錄頁|次分類*/
.product-layer-two li li a,/*商品目錄頁|次分類*/
.products-list .name,/*商品目錄頁|商品名稱*/
.products-list .price b,/*商品目錄頁|價格*/
.product_info_page ul.prod li,
#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: bold var(--f15)/1.5 var(--ff);
    letter-spacing: .15rem;
}

/* 內文 -------------------- */
.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,/*首頁嵌入-文章管理|文章內文*/
.blog_box_edit,/*文章管理 | 詳細頁-內文*/
.share_page .edit/*小撇步 | 詳細頁-內文*/ {
    font: normal var(--f14)/1.5 var(--ff);
    letter-spacing: .1rem;
}


/* 裝飾小字 -------------------- */
.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(--first-color);
    border:1px var(--first-color) solid;
    border-radius: 3vw;
    transition: ease .5s;
}

/*文章按鈕外觀微調*/
.blog_back a.article_btn_next{
    border-radius: 0 3vw 3vw 0 ;
}

.blog_back a.article_btn_prev{
    border-radius: 3vw 0 0 3vw ;
}

.blog_back a.article_btn_back{
    border-radius: 0vw;
}


/*按鈕高度微調-首頁崁入&購物車*/
.product_info_page .show_content input[type="submit"],
.animated-arrow{
    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(--first-color);
    color: var(--bg-color);
    border:1px var(--first-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: ease .5s;
}

/*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;
}

/* 表單樣式 -------------------- */

/* 欄位樣式 (聯絡我們、商品QA"商品規格"&"分享到"文字*)*/
.contact_form li .form__label,
.product_info_page ul.prod li,
.product_info li span,
.toShare {
    margin-left:0px;
    color: var(--f1-color);
}

/* 輸入框及輸入文字樣式 (聯絡我們、商品QA) */
.contact_form li input.noborder,
.contact_form li textarea.noborder,
.qaform .breakF {
    border: 0px var(--first-color) solid;
    background: transparent;
    border-bottom: 1px var(--f2-color) solid;
    padding: 10px;
    color: var(--f1-color);
    letter-spacing: .1rem;
}

/*必填*/
.red {
    color: var(--accent-color);
}

/*下拉選單外觀*/
.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 img, .blog_list_le img,
.show-list .show_pic,
.other_subalbum li a div,
.pic-list .show_pic,
.products-list .pic,
.related_list li a img {
    border-radius: var(--border-radius);
    border: 3px solid transparent;
    transition: ease .5s;
}
.subbox_item:hover .blog_list_le img,
.module_i_news li:hover .i_blog_le img,
.products-list .item a:hover .show_pic,
.other_subalbum li:hover a div,
.show-list .item a:hover .show_pic,
.products-list .pic:hover,
.related_list li a:hover img  {
    border: 3px solid var(--first-color);
}


/*商品目錄-商品名稱變色*/
.subbox_item:hover .blog_list_ri h5,
.products-list .item a:hover .name,
.related_list li a:hover p{
    color: var(--first-color);
}

/* ▲ 統一樣式設定 ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ HEADER (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*選單寬度內縮*/
.main_header_area .container {
    transition: all 0.5s ease;
    padding: 0;
}

.navigation {
    padding: 0;
}

.stellarnav {
    z-index: 0;
}

/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/

/*隱藏-選單右上社群icon 臉書/LINE/電話/信箱------------*/
.me_tp_features{
    display: none;
}

/*隱藏-選單右上購購物車------------*//*
.tp_links{
    display: none;
}


/* ▲ HEADER (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ▼ HEADER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*Logo ----------*/

/*logo定位 */
.nav-header {
    top: 5px;
    left: 2vw;
}

/*logo大小*/
.header_area .nav-brand {
    max-width: 190px;
    width: 100%;
}

/*header樣式*/
.main_header_area {
    background: transparent;

    transition: all 0.5s ease;
    margin: 0;
    border-radius: 0;
}

/*header下拉後白色*/
.sticky .main_header_area.animated {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: saturate(93%) blur(10px);
}

/*選單文字*/
.stellarnav > ul > li > a {
    color: var(--first-color);
    font: bold var(--f15)/1.5 var(--ff);
    letter-spacing: 0.15rem;
    text-align: center;
    transition: all .3s;
    margin: 30px 0px 10px 0px; /*選單高度*/
    padding: 0px 10px 0; /*選單間距*/
}

/*下拉符號-隱藏*/
.stellarnav li.has-sub > a:after {
    display: none;
}

/*次選單 ---------- */

/*次選單樣式-半透明底色*/
.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);
    width: 180px;
}

/*次選單欄位邊框*/
.stellarnav li li {
    border: 0px var(--f3-color) solid;
}

/*次選單文字樣式*/
.stellarnav li a {
    padding: 7px 10px;
    display: block;
    color: var(--f1-color);
    font: normal 14px/1.5 var(--ff);
    letter-spacing: .1rem;
}

/*欄位尺寸*/
.stellarnav li li > a ,
.stellarnav li li.has-sub > a {
    padding: 7px 5px;
    transition: all 0.3s;
    border-left: 2px solid transparent ;
}

/*欄位hover樣式*//*
.stellarnav li li:hover > a ,
.stellarnav li li.has-sub:hover > a {
    color: var(--first-color);
    border-color:var(--first-color) ;
}
*/

/*hover欄位樣式-向右滑動*/
.stellarnav li.has-sub ul li a:hover{
    color: var(--first-color);
    padding-left: 10px;
    border-left: 2px solid var(--accent-color);
}

/*文字底色透明*/
.stellarnav.desktop li.has-sub ul a {
    background: transparent;
    transition: all .3s;
    letter-spacing: .1rem;
    position: relative;
}


/*選單漸變效果＝＝*/
/*首頁固定選單 開啟後下方RWD 768對應標籤也需開啟*//*
.pageIndex .header_area{
    position: fixed;
    width: 100%;
}

/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*不換行-維持電腦版*/
@media screen and (max-width: 1024px) {
.stellarnav ul {
    text-align: right;
}
.nav-header{
    position: absolute;
}

/*縮小按鈕間距*/
.stellarnav > ul > li > a{
    padding: 0px 5px 0;
}

}

/* +++ 手機板選單 ▼ -------------------- */

@media screen and (max-width: 768px) {
/*logo圖層往後+定位*/
.nav-header {
    z-index: 0;
    left: 5vw;
}

/*logo縮小*/
.header_area .nav-brand {
    max-width: 160px;
}

/*header底色不透明*/
.header_area.sticky {
    background: var(--bg-color);
}

/*header底色加寬*/
.navigation {
    padding: 35px 0px;
}

/*關掉原有設定-------------------- */

/*關掉底線*/
.stellarnav > ul > li:before{
    display: none;
}

/*關掉陰影*/
.stellarnav ul ul{
    box-shadow:none;
}

/*調整左右邊緣*/
.main_header_area .container{
    width: 100%;
    padding: 0;
}

/*漢堡選單 -------------------- */
/*右滑出現*/
.stellarnav.mobile.left > ul{
    left: -100vw;
    transition: all .5s;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    max-height: 100vh;
}

.stellarnav.mobile.left.active > ul{
    left: 0;
}

/*三位移*/
.stellarnav.mobile {
    left: auto;
    right: 1vw;
    top: 5%;
}

/*三改色*/
.stellarnav .menu-toggle span.bars span {
    background: var(--first-color);
}

/*menu & close 文字樣式*/
.stellarnav .menu-toggle:after,
.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu  {
    font: bold 14px/1.5rem var(--ff);
    color: var(--first-color);
    letter-spacing: .2rem;
}

/*打開後 close 表頭*/
.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu {
    background: var(--bg-color);
    text-align: right;
    padding-right: 25px;
    color: var(--first-color);
}

.stellarnav .icon-close {
    margin-right: 6px;
}

.stellarnav .icon-close:before,
.stellarnav .icon-close:after {
    border-bottom: solid 3px  var(--first-color);
}

/*選單高度*/
.stellarnav.mobile.right > ul,
.stellarnav.mobile.left > ul {
    height: 100vh;
}

/*選單寬度加陰影*/
.stellarnav.mobile.left > ul {
    border: none;
    box-shadow: 1px 0px 10px rgba(0,0,0,.3);
    padding-top: 0;
    background: var(--bg-color);
    backdrop-filter: saturate(180%) blur(10px);
}

/*選單外寬度*/
.stellarnav.mobile > ul > li {
    width: auto;
    text-align: left;
    border-bottom: none;
}

/*選單文字*/
.stellarnav.mobile > ul > li > a {
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: capitalize;
    padding: 15px 25px;
    line-height: 1rem; /*按鈕高度*/
}

.stellarnav.mobile > ul > li > a b {
    vertical-align: middle;
    line-height: 1.5rem;
}

/*第一欄視覺調整-往下偏移*/
.stellarnav.mobile > ul > li:nth-child(2) {
    margin-top: 10px;
}

/*第二層 ---------- */
/*下拉+號*/
.stellarnav.mobile > ul > li > a.dd-toggle {
    padding: 10px 0 0 0;
}

.stellarnav a.dd-toggle .icon-plus:after,
.stellarnav a.dd-toggle .icon-plus:before {
    border-bottom: solid 3px var(--accent-color);
}

/*下拉區塊-外層*/
.stellarnav.mobile li.open {
    background:transparent;
    padding: 0px;
    color: var(--medium-gray);
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
}

/*下拉區塊-內層：調整間距底色*/
.stellarnav.mobile ul ul {
    top: -10px;
    background:transparent;
    border: none;
    border-radius:0px
}

/*第二層文字區塊*/
.stellarnav li li {
    border:none;
    margin-bottom: -2px;
}

/*第二層文字*/
.stellarnav.mobile li a,
.stellarnav.mobile li li.has-sub a {
    padding-left: 20px;
    color:var(--first-color);
    border-bottom: none;
    font-size: 15px;
}

/*第二層文字hover*/
.stellarnav li li:hover > a,
.stellarnav li.has-sub ul li a:hover {
    color: var(--dark-gray);
    border: none;
}


/*第三層區塊*/
.stellarnav.mobile li.open li.open{
    padding: 3px;
    background: transparent;
    border: none;
}


}
/* ▲ 手機板框架 (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▲ HEADER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ FOOTER (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*隱藏-footer logo & footer icon*/
.footer_logo,
.box_link {
    display: none;
}

/*揚京版權塊 -------------------- */
.copy {
    padding: 7px 0;
    font: normal var(--f12)/1.5 var(--ff);
    letter-spacing: .1rem;
    color:var(--bg-color);
    margin-top: 5px;
    background-color:var(--first-color);
    border-top: 0px transparent solid;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.copy a {
    color:var(--bg-color);
}

.copy a:hover {
    color:var(--bg-color);
    text-decoration: underline var(--bg-color) 1px solid;
    text-underline-offset: 4px;
}

/* ▲ FOOTER (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ FOOTER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.footer {
    padding: 30px 0 0;
    font: normal var(--f14)/1.5 var(--ff);
    background: var(--bg-color);
    position: relative;
    z-index: 99;
}

.footer_info {
    padding: 0 5% ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer_info ul {
    display: flex;
    vertical-align: top;
    width: calc(100% - 10%);
    flex-direction: row;
}

.footer_info li {
    display: grid;
    padding-left: 5%;
    align-content: space-between;
    width: 50%;
    color: var(--bg-color) !important;
}

/*資訊內容改色*/
.footer_info li p,
.footer_info li p> a {
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
    color: var(--first-color);
    padding-left: 5%;
}

/*選單按鈕*/
.footer_menu {
    width: 100%;
    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 var(--first-color) solid;
    margin: 0.5rem;
    font: normal var(--f12)/1 var(--ff) ;
    letter-spacing: 0.1rem;
    color: var(--first-color);
    background: var(--bg-color);
    border-radius: 15px;
}

.footer_menu a:hover {
    background: var(--first-color);
    color: var(--bg-color);
    transition: all 0.5s ease;
}

/* 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;
}

}

/* ▲ FOOTER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ 大圖 (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*大圖固定比例*/
.swiper-slide img {
    height: auto;
}

/*demo滿版*/
.edit_part {
    max-width: inherit;
    margin: auto;
    padding: 0;
}

/*隱藏-小白點*/
.swiper-pagination {
   display: none;
}

/*大圖滿版*/
.bannerindex {
    position:relative;
    height: 50vw;
    max-height: 100vh;
}

/*預設解除背景輪播/整體下滑-方式1*/
#content_main {
    margin:0;
}


.swiper-banner {
    position:static;
    margin:0;
    height:auto;
}

.pageIndex .header_area {
    position: fixed;
    width: 100%;
}

/*關掉大圖動畫*//*
.leftUp img,.centerBig img,.rightDownBig img,.moveRight img,.moveDown img{
animation: none;
}
*/

/* RWD＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*大圖下推*/
@media screen and (max-width: 1024px) {
.pageIndex .header_area {
    position:relative;
}

}

/* ▲  大圖 (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* ▼ 大圖-slogan偽元素設定 ---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*偽元素定位 -------------------- */
.swiper-slide:before {
    content: "";
    position: absolute;
    z-index: 999;
    pointer-events:none;
    background-size: contain;
    background-repeat: no-repeat;
}

.swiper-slide:nth-child(1):before {
    width: 34%;
    background-image: url(https://pic03.eapple.com.tw/zuolin/slogan.png);
    aspect-ratio: 1/1;
    height: auto;
    top: 12%;
    right: 11%;
}


/*指定關鍵影格 -------------------- */

.swiper-slide.swiper-slide-active:nth-child(1):before {
    animation: ani_RtoL 1.5s 0.5s both;
}


/*關鍵影格設定 -------------------- */
@keyframes ani_RtoL {
    0% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity:1;
    }
  }

  /*關掉動畫*/
@media screen and (max-width: 768px) {
.swiper-slide.swiper-slide-active:nth-child(1):before{
    animation: none;
    width: 40%;
    top: 5%;
    right: 7%;
}

}

/*關掉浮動--------------------*/
.info_fix{
    display: none;
}

/* ▼ 相簿 (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ PAGE (基本) START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 麵包屑 -------------------- */
.path p,
.path p a {
    text-align: right;
    color: var(--f2-color);
}

.path p a:hover {
    color: var(--first-color);
}

/* 頁碼 -------------------- */
.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:all 0.5s;
}

.page strong,
.page a:hover {
    background: var(--first-color);
    border: 1px solid var(--first-color);
}

/* 按鈕 -------------------- */
.animated-arrow {
    background: var(--first-color);
}


/* ▲ PAGE (基本) END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 版面布局設定 -------------------- */

/*排列*/
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(--first-color);
}


/* 相簿圖片 -------------------- */
.show-list .show_pic img,
.pic-list .show_pic img ,
.other_subalbum li a img {
    transition: all .5s ;
    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: ease .5s;
    border:1px var(--first-color) solid;
    border-radius: var(--border-radius);
}

.other_album_choice li a {
    color: var(--first-color);
}

.other_album_choice li:hover {
    background: var(--first-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 ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ▼ BANNER---START ▼ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*隱藏-內頁 BANNER 設定*/
.banner {
    display: none;
}

/* ▲ BANNER---END ▲ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */