@charset "utf-8";

/* --------------------------------------------------
   base
-------------------------------------------------- */
/* =============== ▼ 全域變數 ▼ =============== */

:root {
    /* 顏色 */
    --main-color: #121212;
    --sub1-color: #881b02;
    --sub2-color: #DF523D;
    --sub3-color: #fafafa;
    --ac-color: #ff3402;
    --f1-color: #444;
    --f2-color: #999;
    --f3-color: #e9e9e9;
    --bg-color: #fff;

    /* 字型 */
    --font: 'Noto Sans TC', sans-serif;
    --sfont: "Splash", 'Noto Sans TC', sans-serif;

    /*變化*/
    --tr: ease-out 0.5s;
    /*圓角*/
    --br: clamp(2px, 1vw, 4px);
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */


/* =============== ▲ 全域變數 ▲ =============== */

/* =============== ▼ 文字設定 ▼ =============== */

body {
    letter-spacing: .1rem;
    font: normal 16px/1.5 var(--font);
    color: var(--f1-color);
}

/* 客戶編輯區文字 */
.blog_box_edit *,
.promotions_page .edit *,
.edit {
    letter-spacing: .1rem;
    font-weight: 400;
    font-size: 16px;
    line-height: 250% !important;
    font-family: var(--font) !important;
    color: var(--f1-color) !important;
}

/* 反白顏色 ----------*/
::-moz-selection {
    color: var(--bg-color);
    background: var(--f1-color);
}

::selection {
    color: var(--bg-color);
    background: var(--f1-color);
}

/* =============== ▲ 文字設定 ▲ =============== */

/* =============== ▼ 通用設定 ▼ =============== */

/* 滾動條 ---------- */
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: 8px;
    /*右側捲軸寬度*/
    height: 0px;
    /*下方捲軸高度*/
}

/* 軌道背景底色 */
::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}

/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
    background-color: var(--f2-color);
}

/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
    background: var(--f1-color);
}

/* =============== ▲ 通用設定 ▲ =============== */

/* --------------------------------------------------
   layout
-------------------------------------------------- */

/* =============== ▼ 大範圍設定 ▼ =============== */

/* ＝＝＝ 【【  版型設定(基本) ↓↓↓  】】 ＝＝＝ */

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

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {
    .show_content {
        padding: 10px 0 20px;
    }
}

@media screen and (max-width: 600px) {
    .main_part {
        padding: 10px 20px;
    }
}

/* 麵包屑 -------------------- */
/* 隱藏 */
.path p,
.path p a {
    display: none;
}

/* 頁碼 -------------------- */
.page li a{
    color: var(--f1-color);
}
.page strong, .page a:hover {
    background: var(--f1-color);
    color: var(--bg-color);
}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */

.main_part {
    padding: 10px 20px 50px;
}

/* 隱藏新浮動 */
.info_fix {
    display: none;
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ *//*
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}


/* =============== ▲ 大範圍設定 ▲ =============== */



/* =============== ▼ 大圖 ▼ =============== */

/* ＝＝＝ 【【  預設區塊不動 ↓↓↓  】】 ＝＝＝ */

/*預設解除背景輪播*/
#content_main {
    margin: 0;
}

.bannerindex {
    position: relative;
    height: auto;
}

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

/* .swiper-slide img { height:auto;} */

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {
    .bannerindex {
        padding: 0;
        margin: 0;
    }
}
/* ＝＝＝ 【【  版型設定(基本) ↓↓↓  】】 ＝＝＝ */

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */

.swiper-banner .swiper-slide img{
    width: 100vw;
}

.pageIndex .swiper-slide:before {
    content: "";
    position: absolute;
    top: 45%;
    left: 13%;
    width: 28%;
    background-image: url(https://pic03.eapple.com.tw/shanghow/slogan_A.png);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 550 / 200;
    z-index: 999;
    pointer-events: none;
}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */
/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ *//*
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}

/* =============== ▼ HEADER ▼ =============== */

/* ＝＝＝ 【【  xx 無預設區塊 xx  】】 ＝＝＝ */

/* ＝＝＝ 【【  版型設定(一頁式購物車) ↓↓↓  】】 ＝＝＝ */
.header_area,
.header_area.sticky {
    position: fixed;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, 0) 100%);
}

.main_header_area .container {
    max-width: 100%;
    padding: 0 2% 0 6%;
}

.navigation {
    display: flex;
    align-items: flex-start;
    gap: 0px;
}

/* logo */
.nav-header {
    display: block;
    max-width: 180px;
}

.nav-brand {
    max-width: 100%;
    margin: 0;
}

/* logo */
.pageIndex .nav-header {
    display: block;
    max-width: 300px;
    transition: var(--tr);
}

.pageIndex .header_area.sticky .nav-header  {
    max-width: 180px;
    transition: var(--tr);
}

/* 產品搜尋 */
.me_tp_features * {
    transition: all .1s;
}

.me_tp_features {
    display: flex;
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    max-width: 420px;
    padding-top: 20px;
    display: none;
}

.box_search {
    width: 200px;
    margin: 0 30px 0;
}

.box_search input[type=text] {
    max-width: 180px;
    height: 40px;
    border-radius: 0;
}

.box_search input[type=text] {
    border-radius: 0;
}

.shop_search_btn {
    font-weight: bold;
    background:var(--f2-color);
    border-radius: 0;
}

.shop_search_btn:hover {
    background:var(--sub1-color);
    transition: var(--tr);
}

.box_search input[type=text]:focus {
    color: var(--f1-color);
}

/* header購物車按鈕 */
.me_tp_features a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    margin: 0;
}

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

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

.me_tp_features a span {
    font-size: 13px;
    letter-spacing: 1px;
}

/* .me_tp_features a:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 84px;
    background: #B49976;
    z-index: -1;
}
.me_tp_features a.tp_btn_cart::before {
    background: #FBC700;
}
.me_tp_features a.tp_btn_notice::before {
    background: #7D4113;
} */
.me_tp_features a i {
    margin: 0 3px 8px;
}

.tp_links {
    display: none;
}

/* header聯絡按鈕--隱藏 */

/* 選單 */
.me_tp_features a:hover {
    opacity: .8;
}

.stellarnav * {
    font-family: '', 'Noto Sans TC', sans-serif;
    transition: all .3s;
}

.stellarnav {
    order: 2;
    padding-top: 10px;
}

.stellarnav ul {
    text-align: center;
}

.stellarnav>ul>li {}

.stellarnav>ul>li::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 40px;
    background: rgba(247, 245, 242, 1);
    opacity: 0;
}

.stellarnav>ul>li>a {
    height: auto;
    color: var(--bg-color);
    letter-spacing: 2px;
    background: rgba(247, 245, 242, 0);
    padding: 0 5px;
    overflow: unset;
    display: flex;
    align-items: flex-start;
}

.stellarnav>ul>li>a::before {
    content: '';
    display: inline-block;
    position: relative;
    left: 0;
    background-image: url(https://pic03.eapple.com.tw/shanghow/icon.svg);
    width: 30px;
    height: 30px;
    opacity: 0;
}

.stellarnav li.has-sub>a:after {
    position: relative;
    border-top: 6px solid var(--bg-color);
    margin-left: 0;
    display: none;
}

.stellarnav ul ul {
    background: rgb(35 24 21 / 80%);
    box-shadow: 2px -2px 15px rgb(0 0 0 / 20%);
    backdrop-filter: blur(3px);
}

.stellarnav li li {
    border: 0;
}

.stellarnav li li>a {
    font-size: 15px;
    color: var(--bg-color);
    letter-spacing: 1px;
}

.stellarnav li li>a,
.stellarnav li li.has-sub>a {
    padding: 12px 15px 12px 10px;
}

.stellarnav li li.has-sub>a:after {
    border-left: 6px solid var(--bg-color);
}

/* hover */
.stellarnav * {
    transition: all .3s;
}

.stellarnav>ul>li>a::before,
.stellarnav>ul>li>a:hover::before {
    transition: ease-in-out .5s;
}

.stellarnav>ul>li>a:hover,
.stellarnav>ul>li:hover>a {
    color: rgb(255 255 255 / 70%);
}

/* 主選單一般變色 */
.stellarnav>ul>li:hover>a::before,
.stellarnav>ul>li>a:hover::before {
    opacity: 1;
    animation: up-and-down .6s infinite alternate;
}

.stellarnav>ul>li.has-sub>a:hover:after,
.stellarnav>ul>li.has-sub:hover>a:after {
    border-top: 6px solid #;
}

/* 主選單三角形 */
.stellarnav li li:hover>a,
.stellarnav li li>a:hover,
.stellarnav.desktop li.has-sub li a:hover,
.stellarnav.desktop li.has-sub li:hover>a {
    color: ;
    background: rgb(35 24 21 / 100%);
    padding: 12px 15px 12px 15px;
}

/* 次分類一般變色 */
.stellarnav li li.has-sub>a:hover:after,
.stellarnav li li.has-sub:hover>a:after {
    border-left: 6px solid #;
}

/* 次分類三角形 */


@keyframes up-and-down {
    0% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(3px);
    }
}


@media screen and (max-width: 1300px) {
/*     .header_area {
        position: sticky;
        background: var(--main-color);
    }

    .header_area.sticky {
        background: var(--main-color);
    } */

/*     .nav-brand {
        max-width: 80px;
        margin: 0 auto;
    }
 */
/*     .navigation {
        flex-direction: column;
    } */

/*     .nav-header {
        position: static;
        text-align: center;
    } */

/*     .me_tp_features {
        display: grid;
        grid-template-columns: 8fr 1fr 1fr;
        position: absolute;
        right: 0;
        max-width: 100%;
    }

    .me_tp_features a {
        position: relative;
        width: auto;
    }

    .me_tp_features a:before {
        width: 100%;
        height: 61px;
    } */
}

@media screen and (max-width: 1024px) {
    .main_header_area .container {
        padding: 0 ;
    }
    .header_area {
        position: sticky;
        background: var(--main-color);
    }

    .header_area.sticky {
        background: var(--main-color);
    }
    .nav-header,
    .pageIndex .nav-header,
    .pageIndex .header_area.sticky .nav-header {
        max-width: 80px;
        margin: 0 auto;
    }

    .navigation {
        flex-direction: column;
        align-items: center;
    } 

    .nav-header {
        position: static;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {

/*     .me_tp_features {
        top: 9px;
        grid-template-columns: 1fr;
    }

    .me_tp_features a {
        display: none;
    }

    .box_search {
        margin: 0 10px 0 auto;
    }

    .box_search input[type=text] {
        height: 35px;
    } */

    .stellarnav.mobile.right>ul,
    .stellarnav.mobile.left>ul {
        background: var(--main-color);
        border-right: 0;
        box-shadow: 2px 2px 15px rgb(0 0 0 / 30%);
    }

    .stellarnav .menu-toggle {
        margin-top: 10px;
    }

    .stellarnav .menu-toggle span.bars span {
        width: 28px;
    }

    .stellarnav .menu-toggle span.bars span:nth-child(1) {
        background: ;
    }

    .stellarnav .menu-toggle span.bars span:nth-child(2) {
        margin: 8px 18px 8px 0;
    }

    .stellarnav .menu-toggle span.bars span:nth-child(3) {
        display: none;
        margin: 0 auto 4px 0;
    }

    .stellarnav .menu-toggle:after {
        display: none;
    }

    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu {
        color: transparent;
        background: transparent;
        padding-top: 20px;
        padding-left: 15px;
    }

    .stellarnav .icon-close {
        display: block;
    }

    .stellarnav .icon-close:before,
    .stellarnav .icon-close::after {
        width: 25px;
        border-bottom: ;
    }


    /* 選單設定--開始 */
    .stellarnav.mobile>ul>li {
        border-bottom: 1px var(--main-color) solid;
    }

    .stellarnav>ul>li>a::before {
        display: none;
    }

    .stellarnav.mobile li li.has-sub a {
        padding: 10px 43px 10px 40px;
    }

    .stellarnav li li>a {
        padding: 10px 10px 10px 40px;
    }

    .stellarnav a.dd-toggle .icon-plus:before,
    .stellarnav a.dd-toggle .icon-plus:after {
        border-bottom: solid 2px #777;
    }

    .stellarnav.mobile li.open {
        background: transparent;
        padding: 0;
    }

    .stellarnav.mobile ul ul {
        background: transparent;
    }

    .stellarnav.mobile li.open li.open {
        background: transparent;
        padding: 0;
    }

    .stellarnav.mobile li.open li.open>a {
        background: var(--main-color);
    }

    .stellarnav.mobile li.open li.open>a.dd-toggle {
        background: transparent;
    }

    .stellarnav.mobile ul ul ul {
        background: transparent;
    }

    .stellarnav.mobile li li.has-sub li a {
        padding: 10px 43px 10px 55px;
    }

    /* 選單設定--結束 */
}

@media screen and (max-width: 570px) {
    .box_search {
        width: 150px;
    }

    .stellarnav .menu-toggle {
        padding: 10px;
    }
}

@media screen and (max-width: 500px) {
/*     .nav-header {
        max-width: 100%;
        justify-content: flex-start;
    }

    .nav-brand {
        margin: 0 0 0 70px;
    } */
}

/* ＝＝＝ 【【  版型設定(基本) ↓↓↓  】】 ＝＝＝ */





/* =============== ▲ HEADER ▲ =============== */


/* --------------------------------------------------
   components 元件設定
-------------------------------------------------- */

/* =============== ▼ BANNER ▼ =============== */

/* ＝＝＝ 【【  版型設定(滿版+漸層) ↓↓↓  】】 ＝＝＝ */

/*BANNE背景 ----------*/

.banner {
    position: relative;
    height: 300px;
    background: url(https://pic03.eapple.com.tw/shanghow/bn_b.jpg)center no-repeat;
    background-size: cover;
}

/*漸層*/
.banner:after {
    content: '';
    position: absolute;
    background: linear-gradient(to top, #121212 10%, transparent 100%) ;
    display: block;
    width: 100%;
    height: 200px;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/*頁面標題 ----------*/
.banner h5 {
    position: absolute;
    z-index: 999;
    font: 500 22px/1 var(--font);
    letter-spacing:.4rem;
    color: white;
    bottom: 20%;
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

@media screen and (max-width: 768px) {
    .banner h5:before{
        font-size: 15vw;
    }
    .banner:after{
        height: 250px;
    }
}

/* =============== ▲ BANNER ▲ =============== */

/* =============== ▼ 按鈕 ▼ =============== */

/* 首頁嵌入功能-查看更多 */
.animated-arrow {
    background: var(--ac-color);
    color: var(--bg-color);
    border-radius: var(--br);
}

.animated-arrow:hover {
    filter: grayscale(1);
}

/* 按鈕-上一頁(同商品) */
.lastPage{
    color: var(--bg-color);
    margin: 1rem auto;
    border-radius: var(--br);
    background: var(--ac-color);
}

.lastPage:hover{
    transition: var(--tr);
    filter: grayscale(1);
}

/* =============== ▲ 按鈕 ▲ =============== */


/* --------------------------------------------------
   Content 功能頁
-------------------------------------------------- */

/* =============== ▼ 購物車 ▼ =============== */

/* ＝＝＝ 【【  預設區塊不動 ↓↓↓  】】 ＝＝＝ */

/* 商品下拉超過30個變大 */
.stellarnav.desktop li.bigMenu>ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    left: 0;
    width: 100%;
    position: fixed;
    padding: 20px;
}

.stellarnav.desktop li.bigMenu ul ul {
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--f2-color);
    height: auto;
    max-height: 300px;
    overflow: auto;
}

.stellarnav.desktop li.bigMenu ul ul li {
    margin: 0;
}

.stellarnav.hasBigMenu li.bigMenu li.has-sub>a:after {
    border-left: 6px solid transparent;
    border-bottom: unset;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--f1-color);
    right: 5px;
}

/* 主分類超過30個但次分類直接顯示 
.stellarnav.desktop li.bigMenu>ul{grid-gap: 10px;}
.stellarnav.desktop li.bigMenu li{border: 0;}
.stellarnav.desktop li.bigMenu>ul>li>a{border: 1px solid #ddd;}
.stellarnav.desktop li.bigMenu ul ul{display: block !important; position: relative; top: 0; background: unset; border: 0;}
.stellarnav.desktop li.bigMenu ul ul li{border: 0;}
 主分類超過30個但次分類直接顯示-結束 */
/* 商品下拉超過30個--結束 */

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 by shint at 2023.1.5  */
.product_page .main_part {
    max-width: 1500px;
}

/* .product_info_page .main_part { max-width:1200px;} */
.product_page .show_content,
.product_info_page .show_content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

.product_page .product_menu_list {
    position: relative;
    width: 220px;
    letter-spacing: 1px;
    /*border-right: 1px solid var(--f3-color);*/
    min-height: 30vw;
}

.product_page .products-list,
.product-wrapper {
    width: calc(100% - 270px);
}

ul.page {
    width: 100%;
}

.product-layer-two li ul {
    position: static;
    margin-top: 5px;
    /*display:block !important;*/
    width: 100%;
    margin-left: 0;
}

.product-layer-two li:hover ul {
    border: none !important;
    /*display:block !important;*/
}

.product-layer-two li li {
    display: block;
    padding: 0;
    transition: all ease .3s;
}

.product-layer-two li li a {
    padding: 5px 10px;
}

.product-layer-two li li:hover>a {
    background: var(--bg-color);
    color: var(--f1-color);
}

.product-layer-two>li {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: left;
    border-bottom: 1px dotted var(--f3-color);
    padding-bottom: 5px;
}

.product-layer-two>li ul>li+li {
    margin-top: 5px;
}

.product_info_page .product-layer-two {
    display: none;
}

.product_info_page .products-list,
.product-wrapper {
    width: 100%;
}

.product-layer-two li li:hover {
    margin-left: 15px;
}

.product-layer-two li li>a:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 8px;
    background: transparent;
    left: 0;
    margin-left: -20px;
    top: 50%;
    margin-top: -4px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.product-layer-two li li:hover>a:before {
    background: var(--ac-color);
}

.product_info_page .half_box {
    width: 100%;
    float: none;
    padding-right: 0;
}

.product_info_page .half_box li.btn_blankTop {
    margin-top: 50px;
    justify-content: space-between;
    display: flex;
}

.product_info_page .half_box li.btn_blankTop input {
    width: calc(50% - 10px);
    background-image: none;
    padding: 0;
    text-align: center;
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {

    .product_menu_list,
    .products-list,
    .product-wrapper {
        width: 100%;
    }

    .product-layer-two {
        margin-right: 0;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 5px;
    }

    .product_page .product-layer-two,
    .product_page .products-list {
        width: 100%;
        border-right: none;
    }

    .product_page .product_menu_list>h5 {
        display: block;
    }

    .product_page .show_content>a {
        order: 1;
    }

    .product_page ul.products-list {
        order: 2;
    }

    .product_page ul.page {
        order: 3;
    }

    .product_page .product_menu_list {
        width: 100%;
        order: 0;
        min-height: unset;
    }
}

/* ＝＝＝ 【【  版型設定(基本) ↓↓↓  】】 ＝＝＝ */

/* +++ 通用 -------------------- */

/* 圖片 */
.products-list .pic,
/*首頁相同*/
.related_list li figure {
    border-radius: var(--br);
    overflow: hidden;
    border: 3px solid transparent;
    aspect-ratio: 3/2;
}

/* 外框 */
.products-list .pic:hover,
.related_list li figure:hover {
    border: 3px solid var(--ac-color);
    transition: var(--tr);
}

.products-list .pic img,
/*首頁相同*/
.related_list li a img {
    transform: scale(1);
    filter: saturate(1);
    -webkit-filter: saturate(1);
    transition: var(--tr);
}

.products-list .item:hover img,
.related_list li:hover img {
    transition: var(--tr);
    transform: scale(1.05);
    filter: saturate(1.5);
    -webkit-filter: saturate(1.5);
}

/* 商品名稱 */
.products-list .name,
/*首頁相同*/
.related_list li a p {
    color: var(--f1-color);
    font-family: var(--font);
}

/* .products-list .item:hover .name,
.related_list li:hover p{
    color: var(--f2-color);
    transition: var(--tr);
} */

/* +++ 側邊 -------------------- */

/* 主分類區塊 */

.product-layer-two li.active {
    transition: var(--tr);
    background: transparent;
    /*保持透明*/
}

.product-layer-two li a {
    font-size: 14px;
    background: transparent;
    color: var(--f1-color);
    border: none;
    padding: .75rem 1rem;
    border-bottom: none;
}

.product-layer-two li:hover a,
.product-layer-two li.active a {
    font-weight: normal;
    /*蓋預設*/
    border: none;
    /*蓋預設*/
    color: var(--ac-color);
    transition: var(--tr);
}

.product-layer-two>li {
    padding-bottom: 0;
    border-bottom: 1px dotted var(--f3-color);
}

/* 展開+號 */
.product-layer-two li i {
    padding: 1rem;
    height: unset;
    transition: var(--tr);
}

/* 次分類 */
.product-layer-two li li a {
    background: transparent;
    /*蓋預設*/
    padding: 5px 1rem;
}

.product-layer-two li li {
    background: transparent;
}

/* 圖標 */
.product-layer-two li li>a:before {
    width: 8px;
    margin-left: 0px;
    transition: var(--tr);
}

/* 不偏移 */
.product-layer-two li li:hover {
    margin-left: 0px;
}

/* 次分類展開時 */
.product-layer-two li.active li a {
    color: var(--f1-color);
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

@media screen and (max-width: 768px) {

    /*分類下拉欄*/
    .product_page .product_menu_list {
        border: 1px var(--f2-color) solid;
        padding: .75rem 1rem;
        border-radius: var(--br);
    }

    .product_page .product_menu_list>h5 {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .4rem;
        margin: 0 .5rem;
        color: var(--f1-color);
    }

    .fa-caret-down::before {
        font-size: 14px;
        color: var(--f1-color);
    }

    .blog_page .fa-caret-down::before {
        display: none;
    }

    .product-layer-two {
        padding-top: 1rem;
    }

    .product-layer-two li a {
        padding: 1rem .5rem .5rem;
        width: 95%;
    }

    /* 顯示次分類三角形 */
    .product-layer-two li li>a:before {
        background: var(--f1-color);
    }
}


/* +++ 商品目錄頁 (product_page) -------------------- */

.products-list .price {
    margin: 0 0 10px;
    display: none;
}

/* 價格 */
.products-list .price b {
    color: var(--ac-color);
}

/* 詳細資料按鈕 */
.products-list .more {
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--f3-color);
    color: var(--f2-color);
    display: none;
}

.products-list .item a:hover .more {
    background: var(--f3-color);
}

/* +++ 首頁顯示 (prod_part) -------------------- */

/* 中文標 */
.i_prod_tit span {
    font: bold 24px/1.5rem var(--font);
    padding: 1rem 0;
    letter-spacing: 0.4rem;
}

/* 英文標 */
.i_prod_tit h2 {
    color: var(--ac-color);
    font: bold 48px/1.5rem var(--font);
    padding: 1rem 0;
}

/* +++ 商品頁 (product_info_page) -------------------- */

#prod_thumbSwiper .swiper-slide::before {
    background: var(--f1-color);
}

.sidebarBtn {
    padding: 20px;
    border-radius: var(--br);
    border: 2px var(--f3-color) solid;
    background: transparent;
}

.sidebarBtn h2 {
    color: var(--f1-color);
    font-size: 20px;
    letter-spacing: .4rem;
    line-height: 2rem;
    margin: .5rem 0;
}

/* 型號 */
.sidebarBtn .number_area {
    font: bold 16px/2rem var(--font);
    margin: .5rem 0;
}

/* 價格區塊 ---------- */
.sidebarBtn .price {
    font-family: var(--font);
    letter-spacing: .15rem;
    border-bottom: 1px solid var(--f3-color);
}

.sidebarBtn .price span {
    font-size: 22px;
}

/* 原價 */
.sidebarBtn .ori_price {
    text-decoration: line-through;
    color: var(--f2-color);
    font-size: 16px !important;
}

/* 價格 */
.sidebarBtn .sp_price {
    color: var(--ac-color);
}

/* 商品規格內文 */
.product_info li .txt_box {
    font: normal 12px / 180% var(--font);
    letter-spacing: .1rem;
    color: var(--f1-color);
}

/* 小標 */
#number_area,
.product_info li span,
.product_info_page .toShare {
    font: bold 12px /1.5 var(--font);
    letter-spacing: .15rem;
    color: var(--f1-color);
    margin: 1rem 0 0 0;
}

/* 規格按鈕 */
.radio-inline__label {
    border: 1px solid var(--f1-color);
    color: var(--f1-color);
}

.radio-inline__input:checked+.radio-inline__label {
    background: transparent;
    border: 1px solid var(--ac-color);
    color: var(--ac-color);
}

/* 數量輸入欄 */
.product_info_page .amountNum {
    background: transparent;
    color: var(--f1-color);
    border-radius: var(--br);
    border: 1px solid var(--f1-color);
    padding: 0px;
}

.toShare {
    border-top: none;/*蓋預設*/
    display: none;
}

/* 按鈕 ---------- */

/* 線框 */
#add_to_inquiry_cart,
.inquiry_a2 {
    border-radius: var(--br);
    background: var(--sub3-color);
    border: 1px solid var(--ac-color);
    color: var(--ac-color);
}

#add_to_inquiry_cart:hover,
.inquiry_a2:hover {
    background: transparent;
    border: 1px solid var(--ac-color);
    filter: grayscale(1);
}

/* 實心 */
#add_to_cart {
    background: var(--ac-color);
    color: var(--bg-color);
    border: 1px solid var(--ac-color);
}

#add_to_cart:hover {
    filter: grayscale(1);
}


/* TAB ---------- */

.prod_tabs {
    margin-top: 120px;
}

.pd_tabTitle li {
    border-bottom: none;
    background: var(--bg-color);
    border-bottom: 1px solid var(--f2-color);
    transition: all .5s;
}

.pd_tabTitle li a {
    color: var(--f2-color);
    letter-spacing: .6rem;
    transition: all .5s;
}

.pd_tabTitle li.activeTab {
    border-bottom: 1px solid var(--f1-color);
}

.pd_tabTitle li.activeTab a {
    color: var(--f1-color);
    font-weight: 600;
}

.pd_tabTitle li.activeTab::after {
    height: 0px;
}

/* 相關推薦 */
.prod_related {
    background: var(--sub3-color);
    padding: 40px 15px 25px;
}

.prod_related h6 span:before {
    font-size: 16px;
    letter-spacing: .6rem;
    color: var(--f1-color);
    font-weight: 600;
}

.related_list li a {
    background: transparent;
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {
    .mobile_product_name {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .pd_tabTitle li a {
        font-size: 12px;
    }
}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */
.product_info::after {
    content: '單次訂購滿300串可享批發價，直接與店家聯繫';
    display: block;
    font: bold 16px / 1.5 var(--font);
    color: var(--ac-color);
    letter-spacing: .1rem;
    padding-top: 10px;
}


/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

/* =============== ▲ 購物車 ▲ =============== */

/* =============== ▼ 聯絡我們 ▼ =============== */
/* ＝＝＝ 【【  xx 無預設區塊 xx  】】 ＝＝＝ */
/* ＝＝＝ 【【  版型設定(左右) ↓↓↓  】】 ＝＝＝ */
/*標題*/
.blank_letter {
    font: 500 20px/1.5 var(--font);
    color: var(--f1-color);
    letter-spacing: .6rem;
    padding-top: 0;
}

/* 必填 */
.red {
    letter-spacing: .15rem;
}

/* 資訊區塊 ---------- */

/* 內容 */
.list_before.info li {
    border-bottom: 1px solid var(--f3-color);
    padding: 5px;
    padding-left: 70px;
    /* >項目文字寬度*/
    color: var(--f1-color);
}

/* 項目 */
.list_before.info li:before {
    font-weight: 400;
    letter-spacing: .4rem;
    width: 60px;
}

/*表單區塊 ---------- */
.contact_content .information_right {
    width: calc(100% - 295px - 30px);
    /*100%-資訊區塊寬度-*/
}

/*表格設定*/
button,
input,
optgroup,
select,
textarea {
    outline: none;
}

.contact_form {
    color: var(--f1-color);
    grid-gap: 25px;
}

.contact_form li {
    grid-template-columns: 1fr;
}

.contact_form li .form__label {
    max-width: 100%;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.contact_form li input.noborder,
.contact_form li textarea.noborder {
    border: none;
    background: var(--f3-color);
}

/* 按鈕 ---------- */
.contact_form li.last blockquote,
.contact_form li.last cite {
    border: 1px solid var(--ac-color);
    border-radius: 4px;
}

.contact_form li.last blockquote:hover,
.contact_form li.last cite:hover {
    filter: grayscale(1);
    transition: var(--tr);
}

/* 重新填寫 */
.contact_form li.last blockquote {
    color: var(--ac-color);
}

/* 送出 */
.contact_form li.last cite {
    background: var(--ac-color);
}

.contact_form li.last blockquote:hover input,
.contact_form li.last cite:hover input {
    letter-spacing: 4px;
}

.noborder {
    padding: 10px;
    border-radius: 4px;
}

.contact_form li:has(input[type=checkbox]) .form__insert,
.contact_form li:has(input[type=radio]) .form__insert {
    grid-template-columns: repeat(auto-fit, minmax(20px, 20px) minmax(200px, 1fr));
    line-height: 1.8;
}

.form select {
    width: 100%;
    border: 1px solid var(--f1-color);
    padding: 6px 26px 6px 6px;
}


/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {

    /*左側資訊*/
    .list_before.info {
        margin: 0;
    }

    .list_before.info li,
    .list_before.info li:before {
        font-size: 12px;
    }

    /*表單設定*/
    .contact_content .information_right {
        width: 100%;
        margin-top: 50px;
    }

    .contact_form li {
        gap: 5px;
    }

    .form select {
        margin: 0;
    }

    .contact_form li.last blockquote,
    .contact_form li.last cite {
        padding: 0;
    }

    .contact_form li.last input {
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    .contact_form {
        margin-top: 20px;
    }

    .contact_form li .form__label {
        font-weight: 500;
        background: transparent;
        padding: 0;
    }

    .contact_form li:has(input[type=checkbox]) .form__insert,
    .contact_form li:has(input[type=radio]) .form__insert {
        font-size: 12px;
    }

    .form select {
        font-size: 12px;
    }

    .blank_letter {
        font-size: 16px;
        font-weight: 600;
    }

    .noborder {
        padding: 5px;
    }
}

/* ＝＝＝ 【【  客製更動處 ↓↓↓  】】 ＝＝＝ */

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

/* =============== ▲ 聯絡我們 ▲ =============== */



/* ▼ FOOTER (切版後微調) START ▼ =============== */
.footer{
    /* padding-top: 80px; */
}

.footer .center {
    width: 80%;
}

.footer_menu a {
    background: transparent;
    border: none;
    font-size: 12px;
}

.footer_menu a:hover {
    background: transparent;
    color: var(--f2-color);
}

/* 隱藏-回首頁 */
.footer_menu a:first-of-type {
    display: none;
}

.box_link{
    display: none;
}



/*揚京版權塊 -------------------- */
.copy {
    color: var(--f3-color);
    border-top: 1px var(--f2-color) solid;
}

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

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

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

@media (max-width: 768px) {
    #bottom_menu {
        display: none;
    }

    .footer {
        padding-bottom: 50px;
    }
    .footer .center {
        width: 90%;
    }
}

/* ▲ FOOTER (切版後微調) END ▲ =============== */