@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kings&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/

/* =============== 開場動畫 =============== */
.pageIndex .bannerindex::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    -webkit-backdrop-filter: grayscale(1) blur(0px);
    backdrop-filter: grayscale(1) blur(0px);
    z-index: 999999;
    animation: action-bg 3.2s cubic-bezier(0.80, 0.08, 0.11, 0.5) forwards;
    pointer-events: none;
}

.pageIndex.swiper-wrapper {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: action-banner 2.5s cubic-bezier(0.80, 0.08, 0.11, 0.59) forwards;
    animation: action-banner 2.5s cubic-bezier(0.80, 0.08, 0.11, 0.59) forwards;
}

@keyframes action-bg {
    0% { backdrop-filter: grayscale(1) blur(10px); }
    100% { backdrop-filter: grayscale(0) blur(0px); }
}

@keyframes action-banner {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =============== LOGO進入畫面 =============== */
@-webkit-keyframes fade-in {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fade-in {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

body.pageIndex::before {
    content: '';
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #2C3439;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    animation: fade-in 2.5s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
}

body.pageIndex::after {
    content: "";
    pointer-events: none;
    display: block;
    width: 15%;
    height: 0;
    padding-bottom: 100%;
    background-image: url(https://pic03.eapple.com.tw/062139383/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 100000000;
    animation: fade-in 3s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
}

/* =============== 導航欄樣式 =============== */
.header_area.sticky {
    -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    background: transparent;transition: all 0.6s ease;
}

header.header_area.sticky .nav-header:before {
    content: "";
    background: #2C3439;
    width: 200px;
    height: 135px;
    z-index: -1;
    position: absolute;
    border-radius: 0 0 30px 30px;transition: all 0.6s ease;
}
 .pageIndex .swiper-banner .swiper-slide img {
        height:auto;
        object-fit: cover;
    }


/* =============== 響應式設計 =============== */
@media screen and (max-width: 768px) {
  body.pageIndex::after { width: 20%; }
 .stellarnav .menu-toggle { padding-top: 15px; }
 .bannerindex {padding-bottom:51%;}
}

@media screen and (max-width: 600px) {
    body.pageIndex::after { width: 25%; }
}

@media screen and (max-width: 450px) {
    body.pageIndex::after { width: 35%; }
}

/* =============== 大圖輪播 =============== */
.swiper-banner .swiper-slide img {
    height: auto;
}

/* =============== 底部色塊 =============== */
.pageIndex .swiper-wrapper:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 21vw;
    height: auto;
    background: rgba(0,0,0,.075);
    z-index: 1;
    animation: bg 6s;
    animation-fill-mode: both;
}

@keyframes bg {
    0% { opacity: 0; width: 0vw; }
    100% { opacity: 1; width: 100%; }
}

/* =============== 大圖文字 =============== */
.pageIndex .swiper-slide { position: relative; }

.pageIndex .swiper-fade .swiper-slide:before { 
    content: "";
    position: absolute;
    background-image: url(https://pic03.eapple.com.tw/062139383/pre_text.png);
    width: 25%;
    top: 32%;
    right: 38%;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9999;
    animation: text-left 7s;
    animation-fill-mode: both;
}

@keyframes text-left {
    0% { opacity: 0; transform: translateX(2.5vw); }
    100% { opacity: 1; transform: translateX(0vw); }
}

/* =============== 響應式調整 =============== */

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

 .pageIndex .swiper-fade .swiper-slide:before {
        width: 38%; right: 32%; top: 23%;}
}
@media screen and (max-width: 1024px) {
	
    .pageIndex .swiper-fade .swiper-slide:before {
        width: 44%;
        top: 19%;
        right: 28%;
    }
	
}

@media screen and (max-width: 768px) {
    .pageIndex .swiper-fade .swiper-slide:before {
        width: 53%;
        top: 4%;
        right: 24%;
    }
   
}

@media screen and (max-width: 600px) {
   
   .pageIndex  .swiper-fade .swiper-slide:before {
        top: 1.5%;
    }
}

/* =============== 其他元素 =============== */
.tp_links {
    display: none;
}

.swiper-pagination-bullet {
    width: 100px;
    height: 3px;
    border-radius: 0%;
    background: #fdfdfd;
}

.me_tp_features a {
    color: #fff;
}

.header_area.sticky .me_tp_features a {
    color: #222;
}

.me_tp_features a:hover {
    color: #BB9E92;
}

#content, #content_main {
    background-image: url(https://pic03.eapple.com.tw/062139383/bg_pre.jpg);
    background-repeat: repeat;
}

/* =============== 頁首樣式 =============== */
.header_area { 
    position: fixed;
    background: linear-gradient(to bottom, #232e35, #00000000); 
    padding: 0px 20px;
}

.main_header_area .container { 
    max-width: 1630px; 
    transition: 0.8s;
}

.navigation { 
    grid-template-columns: 215px 1fr 250px; 
    align-items: center;
}

.stellarnav ul { 
    text-align: left;
}
.stellarnav ul ul {
    width: 210px;}
.stellarnav > ul > li > a { 
    color: #ffffff; 
    letter-spacing: 2px; 
    font-size: 16px;
    padding: 0 10px;
}

.stellarnav li.has-sub > a:after {
    display: none;
}

.stellarnav > ul > li.has-sub > a { 
    padding-right: 0px;
}

/* =============== 懸停效果 =============== */
.stellarnav ul:hover li a { 
    opacity: 0.7; 
    transition: all 0.3s ease-in-out;
}

.stellarnav ul li:hover a {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.stellarnav > ul > li:hover > a { 
    letter-spacing: 4px; 
    filter: drop-shadow(2px 4px 6px #888);
}

/* =============== 下滑效果 =============== */
.header_area.sticky {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(93%) blur(7px);transition: all 0.6s ease;
}

.header_area.sticky .stellarnav > ul > li > a {
    color: #000;
    font-weight: 600;transition: all 0.6s ease;
}

.header_area.sticky .nav-header {
    max-width: 145px;transition: all 0.6s ease;
}

.header_area.sticky .container { 
    max-width: 100%;transition: all 0.6s ease;
}

.header_area.sticky .tp_links a { 
    color: #525252;transition: all 0.6s ease;
}

/* =============== 上方選單右邊設定 =============== */
.me_tp_features { 
    width: 250px; 
    text-align: right; 
    order: 2;
}

.tp_links a { 
    font-size: 16px; 
    color: #ffffff; 
    margin: 0;
}

.me_tp_features a i { 
    margin: 0 8px;
}

/* =============== LOGO設定 =============== */
.nav-brand { 
    display: flex; 
    align-items: center;    
    padding-top: 10px;
}

.nav-header {  
    max-width: 135px;  
    grid-row: auto;
}

.footer_logo { 
    max-width: 100px;
}

/* =============== 商品下拉選單 =============== */
.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: #efefef; 
    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 #898989; 
    right: 5px;
}

.shop_search_btn { 
    background: #913f16;
}

/* =============== 頁尾樣式 =============== */
.footer {
    padding: 0;
    background: #2c3439;
    position: relative;
}

.footer_logo {
    left: 50%;
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
    position: absolute;
    font-size: 0;
    transform: translateX(-50%);
}


.footer .center {
    position: relative;
    max-width: 100%;
    padding: 60px 50px;
    background-color: #2C3439;
    font-size: 13px;
    color: #BB9E92;
    padding: 4em 0 4rem;
}

.footer_info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px 48px;
    padding: 0;
    max-width: 1400px;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 60px;
    max-width: 1600px;
    margin-left: clamp(60px, 5%, 100px);
    margin-right: clamp(60px, 5%, 100px);
}

.footer_info ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 200px;
    align-items: baseline;
    width: 100%;
    margin: auto;
}

.footer_info li {
    padding: 0;
}

.footer_menu a,
.footer_info li:nth-child(1)>p,
.footer_info li:nth-child(1) a {
    transition: all 0.3s;
    font-style: normal;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #fffbec;
    padding: 0;
}

.footer_menu {
    flex-wrap: wrap;
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 20px;
    row-gap: 5px;
    margin-left: auto;
}

.footer_menu a {
    margin: 0;
    text-align: left;
    border: none;
    background: transparent;
    width: fit-content;
    transition: all 0.3s;
    padding: 0 0 20px 0;
}

.footer_menu a:first-child {
    display: none;
}

.footer_menu a:hover {
    background: transparent;
    color: #b7a89a;
    text-decoration: underline;
}

.footer_info li:before, 
.box_link:before {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.12em;
    color: #f9f286;
}

.box_link {
    display: none;
    flex-direction: row;
    max-width: fit-content;
    width: 100%;
    justify-content: flex-start;
    padding: 0;
    margin: 0 auto;
    position: relative;
    order: 3;
    padding-top: 20px;
    align-items: flex-end;
    align-content: flex-start;
    text-align: right;
}

.box_link a {
    border: none;
    margin: 0;
    width: fit-content;
    color: #1c1b1b;
    padding: 0 10px;
    font-size: 20px;
    transition: all .5s;
    padding: 0;
    margin: 0 10px 0 0;
    width: 30px;
    height: 30px;
    transform: scale(.8);
    background: #fff;
}

.box_link a.me_tp_line {
    color: #1c1b1b;
    background: #1c1b1b;
}

.box_link a.me_tp_line:hover {
    background: #1c1b1b;
    opacity: .6;
}

.box_link a:hover {
    background: #999;
}

.copy {
    border: none;
    padding: 12px 0;
    background-color: #617481;
    color: #2c3439;
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.copy a {
    color: #2c3439;
}

/* =============== 響應式調整 =============== */
@media screen and (min-width: 1700px) {
    .footer_info {
        margin: auto;
    }
}

@media screen and (max-width: 1024px) {
  
    
    .me_tp_features { 
        width: 450px;
    }
    
    .stellarnav > ul > li > a {
        line-height: 23px;
        letter-spacing: 5px;
    }
    
    .box_search input[type=text] {
        padding: 3px 55px 3px 32px;
    }
    
    .footer_info {
        grid-template-columns: 1fr;
        text-align: center;
        position: relative;
        gap: unset;
    }
    
    .footer_logo {
        position: relative;
        left: unset;
        width: 100%;
        max-width: 160px;
        font-size: 0;
        transform: unset;
        padding-bottom: 15px;
    }
    
    .footer_info ul {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .footer_info li:nth-child(1) {
        border-bottom: 1px solid #4d4036;
        padding-bottom: 20px;
    }
    
    .footer_menu {
        margin: auto;
        max-width: 400px;
        display: block;
    }
    
    .footer_menu a {
        text-align: center;
        padding: 5px;
    }
    
    .footer .center {
        padding: 0em 0 0rem;
    }
    
    .nav-header {
        max-width: 110px;
    }  
    
    header.header_area.sticky .nav-header:before {
        width: 145px;
        height: 80px; 
    }
    
    .me_tp_features {
        text-align: center;
        margin: 0px;
        padding-bottom: 5px;
    }
    
	   .header_area {   position: sticky;
      background: linear-gradient(to bottom, #63747f, #2d3439);      
    }
	.bannerindex {
    position: relative;
}
	
    .header_area.sticky .nav-header {
        max-width: 100px;transition: all 0.6s ease;
    }
    
    .stellarnav > ul > li > a {
        height: 23px;
    }
    
    .stellarnav ul {
        text-align: center;
    }
    
    .stellarnav {
        position: relative;
        width: 100%;
        z-index: 9900;
        line-height: normal;
        padding-top: 6px;
    }
    
    
}

@media screen and (max-width: 768px) {
	
    .me_tp_features {
        display: none;
    }
    
    .header_area.sticky {
        backdrop-filter: none;
    }
      .header_area {   position: sticky;
      background: linear-gradient(to bottom, #63747f, #2d3439);      
    }
    .stellarnav.mobile > ul > li > a {
        color: #555;
    }
    
    .nav-header {
        max-width: 100px;
        padding-bottom: 15px;
    }
	  .stellarnav.mobile.left > ul {
       
        background: url(https://pic03.eapple.com.tw/062139383/pre_bg.jpg) no-repeat;
    }
	.stellarnav.mobile.left .close-menu {  background: #363a3f;}
}




/*Banner/＝＝＝＝＝*/
.banB{display: none;}
.banner h5 {
	font-size: 28px;
    font-weight: 600;
    background: linear-gradient(90deg, #fff, #a8d8ea, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient 8s ease infinite; animation: float 6s ease-in-out infinite;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
    background-size: 200% 200%;
}
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.banner { background-image: url(https://pic03.eapple.com.tw/062139383/banner.jpg); background-position: center; width: 100%; background-size: cover;height: 250px;
 background-position: center;
    background-size: cover;
    overflow: hidden;
    background-image: none;
    position: relative;
    z-index: 1;
   }
.banner::before {
    content: "";
    background-image: linear-gradient(180deg, #00000000 40%, rgb(0 0 0 / 31%) 65%), url(https://pic03.eapple.com.tw/062139383/banner.jpg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation-duration: 5s;
    background-size: cover;
    background-position: center;
    animation: bgScroll 20s linear infinite;
    width: 110%;
    height: 250px;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
/.banner::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 250px;
    top: 0;
    left: 0;
    background: url(https://pic03.eapple.com.tw/06-2999995/5.png) #ffffff;
    -webkit-animation: noise 1.5s steps(5) alternate infinite;
    animation: noise 1.5s steps(5) alternate infinite;
    z-index: -1;
}

@keyframes bgScroll {
    0% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
    50% {        -webkit-transform: translateX(-5%);        transform: translateX(-5%);    }
    100% {        -webkit-transform: translateX(0);        transform: translateX(0);    }
}
@keyframes noise {
    0% {      background-position: -88px 166px    }
    20% {      background-position: 222px -333px    }
    40% {      background-position: -111px 444px    }
    60% {      background-position: 33px -66px    }
    80% {      background-position: -138px 212px    }
    100% {      background-position: 317px -197px    }
}

@media screen and (max-width: 768px) {
.product_info_page .banner {display: none;}
.main_part {padding: 5px 10px 50px 10px;}
}



/*購物車/＝＝＝＝＝*/
.prod_part {    width: 90%;}
.products-list {    display: grid;    gap: 10px;    grid-template-columns: 1fr 1fr 1fr 1fr;}
.products-list:before{content:none;}
.products-list .item {    width: 100%;}
.products-list .name {
    position: relative;
    height: 61px;
    color: #000;
}
.products-list .name:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #bdbdbd;
    top: 60px;
    left: 0px;
}
.i_prod_tit span, .i_video_tit span {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
}
.products-list .pic img {
    display: block;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: contain;
    -moz-object-fit: contain;
    -ms-object-fit: contain;
    -o-object-fit: contain;
    -webkit-object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.products-list a:hover .pic img {
    transform: translate(-50%, -50%) scale(1.2);
    filter: none;
    transition: all 0.3s;
}

.products-list a:hover .pic:before {
    opacity: 0;
}
.products-list .pic:before {
    content: "+  M O R E ";
    color: #fff;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    line-height: 161%;
    background:#2c3439;
    opacity: 1;
    transition: all 0.3s;
    font-size: 14px;
    width: 100%;
}


.products-list a:hover .pic:after {
    opacity: 0;
}
.products-list .pic:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    background: #1d1d1d2b;
    opacity: 1;
}

/*購物車/外層＝＝*/
/*顏色*/
.products-list .more {     display: none;}
.products-list .item a:hover .more {    background: #b8ab92;}
/*價格*/
.products-list .price {
    display: flex;
    margin: 0px;
    margin-bottom: 5px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.products-list .price b {    margin: 0 5px;    line-height: 180%;    text-align: center;color: #b8ab92;}
.products-list .price b.ori_price {    font-size: 14px;}

/*外層版面*/
.product_page .main_part {    width: 90%;	max-width: 1500px;}
.product_page .show_content {    display: flex;    flex-wrap: wrap;    align-items: flex-start;    justify-content: space-between;}
.product_page .products-list {    width: calc(100% - 280px);}
.product-layer-two {    width: 250px;    margin: 0;}
.product_info_page .product-layer-two {    display: none;}
.product-layer-two li {    margin: 0;    width: 100%;padding: 0 10px;}
.product-layer-two > li.active {    background: transparent;}
.product-layer-two li.active a {
    border: unset;
    border-bottom: 1px solid;
    font-weight: 500;
}

/**/
.product-layer-two li a {        color: #63747f;   border: none;    background: transparent;    transition: all 0.3s;    line-height: 200%;    transition: all 0.3s;position: relative;}
.product-layer-two > li > a {

    padding-left: 31px;
    color: #FFF;
    letter-spacing: 1px;
    font-size: 15px;
    border: none;
    background:#2c3439;
}
.i_prod_tit h2, .i_video_tit h2 {
    font-size: 56px;font-family: "Big Shoulders Stencil", serif
}
.product-layer-two li:hover > a , .product-layer-two li.active > a{color: #b8ab92;}
.product-layer-two li:hover > a:before , .product-layer-two li.active > a:before {background: #b8ab92; color:#fff;}
.product-layer-two > li > a:before {
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 1px;
    content: "";
    background: #f2f2f2;
    width: 13px;
    text-align: center;
    position: absolute;
    left: 9px;
    top: 51%;
    transform: translateY(-50%);
    transition: all 0.3s;
    padding-left: 2px;
    font-size: 13px;
}
/**/
.product-layer-two li ul {    position: relative;padding-top: 1px;}
.product-layer-two li li {    border: none;background: transparent;}
.product-layer-two li li a{    background: transparent;position: relative;}
.product-layer-two li li a:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: aliceblue;
    border-radius: 50%;
    top: 18px;
    left: 1px;
    opacity: 0;
    transition: all 0.3s;
}
.product-layer-two li.active li a {
    color: #000;
}
.product-layer-two li li:hover a{color: #b8ab92;transition: all 0.3s;}
.product-layer-two li li:hover a:before {opacity: 1;transition: all 0.3s;}

/*hover到才顯示副選單 關掉↓*/
.product-layer-two li li {    display: block;}

/*購物車/內層＝＝*/
.product_info_page .main_part {    width: 90%;}
/*按鈕顏色*/
.inquiry_a1{background: #2c3439;}
.inquiry_a2{background: #2c3439;}
.inquiry_a3{background: #2c3439;}
.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover {
    background: #dadada;
    color: #000;
}
.lastaction {
    color: #ffffff;
    background-color: #a0a0a0;
}

.lastPage {
    background: #dadada;
    color: #000;
    padding: 3px;
    border-radius: 30px;
}
/*商品側邊規格*/
.product_info li .txt_box {
    color: #aaaaaa;
    width: 100%;
    padding-bottom: 10px;
}
.sidebarBtn .sp_price {
    color:#8f7d5b;
}
.toShare {
    display: none;
}
.mobile_product_name{font-size: 24px;}
.product_pic #bx-pager h6 {display: none;}
.sidebarBtn {
    border: none;
    background: #bbc2c7;
    color: #c3c3c3;
    letter-spacing: 1px;
}
.sidebarBtn h2 {
    font-weight: 400;
    padding-bottom: 5px;
    color: #1c2020;
    letter-spacing: 1px;
    font-size: 22px;
    
}
.radio-inline__input:checked + .radio-inline__label {
    background: #dadada;
    color: #000;
    border: 1px solid #000;
}
.radio-inline__label {
    display: inline-block;
    padding: 2px 17px;
    margin: 2px 5px 2px 0;
    transition: all .2s;
    color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 30px;
}
.sidebarBtn .price span {
    font-size: 15px;
}
.sidebarBtn .price {
    border-bottom: 1px solid #505050;
    color: #e5e5e5;
}
.qaform .breakF {
    border: 1px #eee solid;
    background: #ffffff17;
    border: none;
}
.product_pic #bx-pager a {
    border: none
}
    
.bx-wrapper .bx-viewport {
border:none
}

ul.prod li h3.prod-thumb {
    background: #000000;
    color: #dedede;
    text-align: center;
    padding: 5px;
    letter-spacing: 2px;
    font-weight: 400;
}
ul.prod li {
    margin-bottom: 10px;
    color: #d5d5d5;
    letter-spacing: 1px;
}



/*相關推薦*/
.prod_related h6 span:before {
    font-size: 25px;
    color: #ffffff;
    letter-spacing: 2px;
    font-weight: 400;
  }
  .prod_related {
  background: #63747f;
  padding: 36px 15px 1px;
  }
  
  .related_list li a:hover {
    transform: translateY(-17px);
    transition: all .4s;
  }
  
  .related_list li a {
    transition: all .4s;
  }
  .prod_related h6 {
    margin: 0 auto 35px;
  }
  .related_list li a {
    display: block;
    padding: 17px;
    
}
  .related_list li a img {
    max-width: 100%;
    border-radius: 4%;
  }
  .related_list li a p {
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 2px;
    font-weight: 300;
    padding-top: 10px;
  }

body.car_page .footer_info li p:before{
    position: initial;
    display: inline;
}


/*文章管理/＝＝＝＝＝*/
h4.blog_category_title{font-size: 28px;}
h4.blog_category_title span{font-size: 24px;}
/*文章管理/外層＝＝*/
.i_prod_tit, .i_video_tit {color: #2c3439;}
.module_i_news ul, .blog_subbox {    display: grid;    gap: 10px;}
.module_i_news li , .subbox_item {    width: 100%;}
.module_i_news li a , .subbox_item a {    padding: 5px;}
.module_i_news li a:after , .subbox_item a:after{pointer-events:none;}
.i_blog_le, .i_blog_ri , .blog_list_le , .blog_list_ri {    width: 100%;}
.i_blog_le , .blog_list_le{    position: relative;    padding-bottom: 100%;    height: 0;}/*文章縮圖長寬比例，100% →100:100 = 1:1 正方形 */
.i_blog_le img , .blog_list_le img{
	display:block;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);}
/*側邊*/
.blog_le .accordion > li{transition:all 0.3s;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {    background: #b8ab92 !important;}
.submenu a:hover {    background: #cbc0a0;}
/*首*/
.module_i_news ul{width: 90%;	grid-template-columns:1fr 1fr 1fr 1fr;}
/*功*/
.blog_subbox{grid-template-columns:1fr 1fr 1fr;}
.blog_subbox:before{content:none;}
/*文章管理/內層＝＝*/
.blog_back a.article_btn_back{background: #b8ab92;}

/*相簿/＝＝＝＝＝*/
/*作品展示*/
.work_page .main_part , .work_class_page .main_part, .work_info_page .main_part{    max-width: 1400px; width: 90%;    margin: 0 auto;}
/*相簿管理*/
.album_page .main_part , .album_class_page .main_part, .album_info_page .main_part{    max-width: 1400px; width: 90%;    margin: 0 auto;}
/*版面*/
ul.show-list, .other_subalbum, ul.pic-list {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    gap: 20px;}
ul.show-list:before , ul.pic-list:before{content:none;}
.overlay {    z-index: 1;}
.show-list .item , .other_subalbum li , .pic-list .item{width: 100%;margin:0;padding:5px;}
.show-list .show_pic , .other_subalbum li a div , .pic-list .show_pic{    display: block;    position: relative;    overflow: hidden;    height: 0;}
.show-list .show_pic , .other_subalbum li a div , .pic-list .show_pic    {    padding-bottom: 75%;}/*相簿圖片長寬比例，75% →100:75 = 4:3 */
.show-list .show_pic img , .other_subalbum li a img, .pic-list .show_pic img{
	display:block;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);}

.show-list .item:hover .show_name {    color: #b8ab92;}
.other_album_choice li {    background: #b8ab92;}
.subalbum-menu h2{    color: #cbc0a0;font-size: 24px;}
.other_subalbum li p {    margin-top: 10px;}
/**/

.news_part .title_i_box h4 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
	color: #2c3439;
}
.i_news_b {
    text-align: end;
}
.news_list ul li {
	border-bottom: 1px #d5d2d2 solid;
	background-color: #e5f0f1;
}
.news_part .title_i_box h4:before {
    content: "NEWS";font-size: 56px;display: block;font-weight: 600;font-family: "Big Shoulders Stencil", serif }
	
.news_list ul li a:hover {
    background: #2c3439;
    background-size: cover;
}
.news_list ul li p {
    color: #2c3439;}
.news_list ul li a:hover p {
    color: #eeeeee;
}
   .news_list ul li p:after {
        padding: 3px 5px;
        color: #64747e;
    }
/*促銷方案更改/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.news_part {    width: 90%;}

/*外觀顏色*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.other_promotion li a {
    display: block;
    padding: 10px;
    width: 94%;
    margin: 2%;
    position: relative;
    border: none;
    background: #ffffff17;
    transition: 0.3s cubic-bezier(0.4, 0, 1, 1)
}
.other_promotion li a:hover {
   /* background: #1d1d1d;
    border-radius: 100%;
    transition: 0.3s cubic-bezier(0.4, 0, 1, 1)*/
}

.promotion_title span {
    border: none;
    color: #d0d0d0;
    padding: 2px 0px;
}
.promotion_title em {
    display: none;
}
.promotion_title h2 {
    font-size: 21px;
    color: #222;
    font-weight: 300;
    letter-spacing: 2px;
}
.edit {
    margin: auto;
    font-weight: 200;
    letter-spacing: 1px;
    color: #000;
}
.other_promotion li a:hover:before, .other_promotion li a:hover:after {
   /* border-color: #000;
    border-radius: 100%;*/
}

.promotion_title {
   /* background: #181818;
    padding: 10px;
    border-left: 6px solid #a9a9a9;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;*/
}

.pmtTitle span {
    letter-spacing: 2px;
    color: #a8a8a8;
}

/*改呈現方式*/

/*.promotions_page .main_part {
    display: flex;
}
.promotions_page .page {
    width: 0%;
}
.other_promotion {
    list-style: none;
    margin: 0;
    padding: 11px;
}
.other_promotion li {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
}
.other_promotion li a {
    display: block;

    padding: 10px;
    width: 100%;
    margin: 0%;
    position: relative;
    border: none;
    background: #ffffff17;
}
.other_promotion .pmtTitle h3 {
    color: #3f3f3f;
    letter-spacing: 2px;
    height: 60px;
}
.show_content {
    width: 100% !important;
    margin: 0px;
    padding: 10px 10px;
}*/



/*手機板*/



@media screen and (max-width: 1024px) {
/*文章管理/＝＝＝＝＝*/
.module_i_news ul{grid-template-columns:1fr 1fr;}

/*購物車/＝＝＝＝＝*/
.product_page .products-list {    grid-template-columns: 1fr 1fr;}

}
@media screen and (max-width: 768px) {
.product_page .products-list {    width: calc(100% - 0px);}
.promotions_page .main_part {   display: block;    }
.footer.with_shopping_mode { padding:30px 0 50px; }
#to_top { bottom:60px;}
.i_news_b { text-align: center;}
}
@media screen and (max-width: 425px) {
.product_page .products-list {
        grid-template-columns: 1fr;
}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */






/*其他*/
.animated-arrow {
    background: #63747f;}

.info_fix_links {
    display: flex !important;}
.info_fix>span {display:none;}
.info_fix_links a {
    background: rgb(98 116 128);}
.info_fix_links a {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    color: #222;
    background: #f9f9f9;
    text-decoration: none;
    transition: all 0.3s ease;
     overflow: hidden;
}

/* Hover 效果 */
.info_fix_links a:hover {
    background: #373737;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* 加一點「光暈效果」 */
.info_fix_links a::after {
     position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Hover 時光暈出現 */
.info_fix_links a:hover::after {
    opacity: 1;
}

.path{display:none;}
.news_part section,.prod_part section, .i_news_b{
    max-width: 1400px;
    margin: auto;
}
.news_part,.prod_part {
     MARGIN: 0 AUTO;
}
.send_simple {
    background: #2c3439 }
.separate_title {
    font-size: 22px;
    color: #444;
    padding: 10px 0 10px 18px;
    background:none; 
}
.form_content {
	max-width: 750px;
	border: 1px solid #999;
	background-color: #FFF;
	padding: 50px 50px;
   }   
 
@media screen and (max-width: 375px) { 
.form_content {
   padding: 20px;}}
   
   
.edit * {
    LINE-HEIGHT: 35PX;
   }   
   
  
   .news_part {
	padding-top: 7%;
	padding-right: 20px;
	padding-bottom: 7%;
	padding-left: 20px;
}
.prod_part {
	padding-top: 50px;
	padding-right: 20px;
	padding-bottom: 10%;
	padding-left: 20px;
}
.linkBox_Open + span i {transform:rotate(45deg);}
.footer_info li p.mail,.info_fix_links a:nth-child(4) ,.info_fix_links a:nth-child(5){display:none;}