@charset "utf-8";

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

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

*/


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


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


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');
:root {
    --MainColor: #90a086;
    /*網站主要色系*/
    --SubColor: #c9cfc4;
    /*網站輔助色系1*/
    --SubColor2: #0000;
    /*網站輔助色系2*/
    --color: #202020;
    --SFont: "Noto Sans TC", sans-serif;
    /*特殊字體*/
    --SFontE: "Syncopate", sans-serif;
    /*特殊字體*/

    --pd100: 100px 0;
    --m100: 100px;
    --m50: 50px;
    --m30: 30px;
    --f100: 100px;
    --f60: 60px;
    --f48: 48px;
    --f40: 40px;
    --f36: 36px;
    --f32: 32px;
    --f28: 28px;
    --f24: 24px;
    --f22: 22px;
    --f20: 20px;
    --f18: 18px;
    --f17: 17px;
    --f16: 16px;
    --m100: 100px;
    --m50: 50px;

}

@media (max-width:1024px) {
    :root {
        --m50: 40px;
        --m30: 25px;
        --f100: 90px;
        --f60: 52px;
        --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;
        --f100: 72px;
        --f60: 50px;
        --f48: 32px;
        --f40: 28px;
        --f36: 26px;
        --f32: 24px;
        --f28: 20px;
        --f24: 20px;
        --f20: 18px;
        --f18: 17px;
        --f17: 16px;
        --f16: 15px;
    }
}

@media (max-width:600px) {
    :root {
        --pd100: 50px 0;
        --m100: 50px;
        --m50: 25px;
        --f100: 60px;
        --f60: 40px;
        --f48: 28px;
        --f40: 24px;
        --f36: 22px;
        --f32: 20px;
        --f28: 18px;
        --f24: 18px;
        --f22: 18px;
        --f20: 17px;
        --f18: 16px;
        --f17: 15px;
    }
}

@media (max-width:375px) {
    :root {
        --f100: 48px;
        --f60: 32px;
        --f48: 24px;
        --f40: 20px;
        --f36: 18px;
        --f32: 18px;
        --f28: 17px;
        --f24: 17px;
        --f22: 17px;
        --f20: 16px;
        --f18: 15px;
    }
}

.path {   display: none;}
ul.page { display: none!important;}
.me_tp_features { display: none;}

.header_area {
    background: #fff;
    padding: 10px;
    backdrop-filter: blur(9px);
    padding: 10px 10px 0;
}
.pageIndex .header_area { background: #ffffff00;    position: absolute;}
/*.header_area.sticky{ background: var(--MainColor);}*/
/*電腦LOGO*/
.nav-header {  max-width: 250px;}
.nav-brand {
    width: 100%;
    transition: all 0.3s;
}

.header_area .nav-brand {    transition: all 0.3s;filter: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(590%) hue-rotate(53deg) brightness(90%) contrast(92%);}

.header_area::after {
    position: absolute;
    content: "";
    background: var(--MainColor);
    width: 0;
    height: 100%;
    left: 0%;
    top: 0;
}

.header_area::after {
    position: absolute;
    content: "";
    background: #90a08694;
    height: 100%;
    width: 0%;
    left: 0;
    top: 0;
    transition: 0.5s ease-in-out;
}

/*sticky*/
.sticky .main_header_area .container {   max-width: 2000px;}
.sticky.header_area { position: fixed;}
.sticky.header_area::after {
    width: 100%;
    transition: 0.5s ease-in-out;
}
.sticky.header_area .nav-brand{filter: unset;}
.sticky .stellarnav>ul>li>a { color: #fff;}
.sticky .stellarnav>ul>li:hover>a { color:  #fff;}
.sticky .stellarnav li.has-sub>a:after { border-top: 6px solid #fff;}
.sticky .stellarnav li.has-sub:hover>a:after { border-top: 6px solid #fff;}

.sticky .navigation {  grid-template-columns: 220px 1fr;}




/*第一層*/
.navigation {
    grid-template-columns: 230px 1fr;
    padding: 0;
    align-items: baseline;
}

.stellarnav {grid-row: 1 / span 2;}

.stellarnav>ul>li>a {
    transition: all 0.3s;
    font-family: var(--SFont);
    color: var(--SubColor);
    letter-spacing: 1px;
    color: var(--MainColor);
}
.stellarnav>ul>li>a b:nth-child(2){font-family: var(--SFontE);letter-spacing: 0;font-weight: bold;font-size: var(--f16);} 

.pageIndex .header_area .nav-brand{filter: unset;}
.pageIndex .stellarnav>ul>li>a {  color: #4d5c44;}
.pageIndex  .stellarnav>ul>li:hover>a { color: #4d5c44;}
.pageIndex .stellarnav>ul>li>a:hover b { color: #4d5c44;}
.pageIndex .stellarnav li.has-sub>a:after {  border-top: 6px solid #4d5c44;}
.pageIndex .stellarnav li.has-sub:hover>a:after { border-top: 6px solid #4d5c44;}
.pageIndex .sticky  .stellarnav>ul>li>a {  color:#fff;}
.pageIndex .sticky  .stellarnav>ul>li:hover>a {  color:#4d5c44;}
.pageIndex .sticky  .stellarnav li.has-sub>a:after {  border-top: 6px solid #fff;}
.pageIndex .sticky  .stellarnav li.has-sub:hover>a:after { border-top: 6px solid #4d5c44;}


.stellarnav>ul>li:hover>a { color:  var(--MainColor);}
.stellarnav>ul>li>a:hover b { color: #4d5c44;}
.stellarnav li.has-sub>a:after {  border-top: 6px solid var(--MainColor);}
.stellarnav li.has-sub:hover>a:after { border-top: 6px solid var(--MainColor);}
.stellarnav>ul:hover>li>a { opacity: 0.5;}
.stellarnav>ul>li:hover>a { opacity: 1;}




/*第二層*/
.stellarnav li li>a,
.stellarnav li li.has-sub>a {
    padding: 7px 5px;
    transition: all 0.3s;
    border-left: 1px solid transparent;
}

.stellarnav li li:hover>a,
.stellarnav li li.has-sub:hover>a {
    color: #fff;
    padding-left: 10px;
    background: var(--MainColor);
}
.stellarnav ul ul { width: 200px;}

/* 商品下拉超過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: #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;
}

/* 主分類超過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個--結束 */

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*進入網站動畫*/

.swiper-fade .swiper-slide:nth-child(1)::after {
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/muchi/bn01-1.png) no-repeat;
    background-size: contain;
    background-position: left;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% / 1*0.4);
    left: 10%;
    top: 60%;
    transform: translateY(-60%);
}

.swiper-fade .swiper-slide:nth-child(2)::after {
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/muchi/bn02-1.png) no-repeat;
    background-size: contain;
    background-position: left;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% / 1*0.3);
    left: 10%;
    top: 60%;
    transform: translateY(-60%);
}

/*Banner/＝＝＝＝＝*/
.banner {
    background: url(https://pic03.eapple.com.tw/muchi/banner.jpg) no-repeat;
    background-size: cover!important;
    background-position: left;
    min-height: 700px;
    position: relative;
    margin: 0 2%;
    border-radius: 20px;
}

.banner h5 {
    position: absolute;
    font-size: var(--f24);
    left: 50%;
    transform: translateX(-50%);
    top: 350px;
    color: #414141;
}
.banner h5::after{
    position: absolute;
    content: "";
    font-family: var(--SFontE);
    left: 50%;
    transform: translateX(-50%);
    top: -80px;
    font-size: var(--f100);
    color: #fff;
}
.sticky.header_area~ #content .banner::before{
    position: absolute;
    content: "";
    background: linear-gradient();
    background-size:contain!important;
    width: 100%;
    height: 700px;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(5px);
    background-position: bottom!important;
}
.sticky.header_area~ #content .banner h5:after, .sticky.header_area~ #content .banner h5{display: none;}

.other_select_page .banner {display: none;}

.product_page .banner { background: url(https://pic03.eapple.com.tw/muchi/banner-team.jpg) no-repeat;background-position: right;}
.product_page .banner h5::after{content: "TEAM";}
.product_page .sticky.header_area~ #content .banner::before{  background:linear-gradient(360deg,#fff 3%,#ffffffd5 20%,#ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-team-be.png) no-repeat;}
.product_info_page .banner{display: none;}


.blog_page .banner h5::after, .blog_in_page .banner h5::after{content: "NEWS";}
.blog_page .sticky.header_area~ #content .banner::before, .blog_in_page .sticky.header_area~ #content .banner::before{  background:linear-gradient(360deg,#fff 3%,#ffffffd5 20%,#ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-column-be.png) no-repeat;}
.blog_in_page .banner h5 {  font-size: var(--f28);color: #fff;}
.blog_page .banner h5 {  color: #fff;}




.services_page .banner { background: url(https://pic03.eapple.com.tw/muchi/banner-service.jpg) no-repeat;background-position: right;}
.services_page .banner h5{left: 10%;transform: unset;}
.services_page .banner h5::after{content: "SERVICE";left: 0;color: var(--MainColor);transform: unset;    top: -90px;}
.services_page .sticky.header_area~ #content  .banner::before{  background:linear-gradient(360deg,#fff 3%,#ffffffd5 20%,#ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-service-be.png) no-repeat;}




/*Footer/＝＝＝＝＝*/
.footer {  background: var(--MainColor);}
.footer_logo {}
.footer_logo img {  width: 100%;}

.footer_info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    
    flex-wrap: wrap;
}

.footer_info ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 280px);
}

.footer_info li {  width: 100%;}
.footer_info li:nth-child(1) {  padding: 10px 10px 0px 10px;}
.footer_info li p { color: #fff;}
.footer_info li p a {   color: #fff;}
.footer_info li p.mail {   display: none;}
.footer_info li p.tel{   display: none;}





.footer_menu {
    display: flex;
    gap: 5px;
    border-top: 1px solid #fff;
}

/*footer按鈕最小寬度100px*/
.footer_menu a {
    margin: 0;
    text-align: left;
    padding: 5px 5px 5px 25px;
    transition: all 0.3s;
    border: none;
    color: #ffffff;
    background: #ffffff00;
    position: relative;
}

.footer_menu a::after {
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/muchi/icon-f.png) no-repeat;
    background-size: contain;
    width: 22px;
    height: 21px;
    left: 0;
    top: 2px;

}

.footer_menu a::before {
    position: absolute;
    content: "";
    background: #fff;
    width: 0;
    height: 1px;
    left: 22px;
    bottom: 0px;
    transition: 0.3s ease-in;

}

.footer_menu a:hover::before {
    transition: 0.3s ease-in;
    width: calc(100% - 22px);
}

.footer_menu a:hover {
    background: #ffffff00;
    letter-spacing: 2px;
    font-weight: bold;
}


.copy {
    background: var(--MainColor);
    color: #fff;
    border: none;
}

.copy a {
    color: #fff;
    transition: all 0.3s;
}

.box_link {  display: none;}
.box_link a {  transition: all 0.3s;}

.box_link a:hover {
    background: #ADA17E;
    color: #fff;
}

/*url(https://pic03.eapple.com.tw/muchi/icon-01.png) no-repeat;*/

/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 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 #ccc;*/
    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;
    margin-top: 0;
    column-gap: 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: #fff;
    color: var(--MainColor);
}

.product-layer-two>li {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: left;
    border-bottom: 1px dotted #ccc;
    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(--MainColor);}
.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;
}

.products-list .name {   text-align: center;font-weight: bold;color: var(--MainColor);font-size: var(--f18);}
.products-list .more {
    border: 1px solid var(--MainColor);
    color: var(--MainColor);
}

.products-list .item a:hover .more {    background: var(--MainColor);}
.product-layer-two li.active>a {
    border: 1px var(--MainColor) solid;
    background: var(--MainColor);
    color: #fff;
}

.product-layer-two>li:hover>a {
    border: 1px var(--MainColor) solid;
    background: var(--MainColor);
    color: #fff;
}

.product-layer-two li ul {   grid-gap: 0;}
.product-layer-two li a{background: #ffffff00;border-radius: 10px;}
.products-list { grid-template-columns: 1fr 1fr 1fr;}
.products-list .item a {
    padding: 16.66% 14.28% 7.71% 14.28%;
    border-bottom: 1px solid var(--SubColor);}
.products-list .item a:hover { background:var(--SubColor);}
.products-list li{position: relative;}
.products-list li+li::after{
    position: absolute;
    content: "";
    background: var(--SubColor);
    width: 1px;
    height: 80%;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
}
.products-list li:nth-child(3n+1):after{display: none;}


/*首頁*/
.animated-arrow { background: var(--MainColor);}

/*產品內頁*/
.sidebarBtn {  border:none; padding: 15px 0;}
.inquiry_a1 {  background: var(--MainColor);   }
.inquiry_a2 {  background: var(--color);}
.inquiry_a3 { background: var(--MainColor);}
.lastPage {   background: var(--color);}

.pd_tabTitle li.activeTab a {    color: #fff;background: var(--MainColor);padding: 5px 15px;}
.pd_tabTitle li.activeTab::after {
    height: 3px;
    background: var(--MainColor);
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-vertical>.swiper-wrapper {  display: none;}
.product_pic { padding-left: 0;}
.product-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.prod_info_clearfix {display: none;}
.pd_tabTitle li.activeTab::after {display: none;}



.promotion_title h2 {color: var(--MainColor);font-weight: bold;}
.other_promotion li a:before {  border: 1px var(--MainColor) solid;border-bottom: none;border-right: none;}
.other_promotion li a:after {  border: 1px var(--MainColor) solid;border-top: none;border-left: none;}
.other_promotion li a:hover{
    background: url(https://pic03.eapple.com.tw/muchi/promotion_bg.png),#90a0866b;
    background-position: right;background-size: cover;}

.other_promotion a:hover .pmtTime span { background:var(--MainColor);color: #fff; }   

.product_main { width: 71%; max-width: 540px;}

.toShare{display: none;}
.sidebarBtn {  width: 28%; position: relative;    width: 100%;    max-width: calc(100% - 600px);}
.sidebarBtn h2{border-bottom: 1px solid var(--SubColor);color: var(--MainColor);padding-bottom: 10px;margin-bottom: 10px;}
/*首頁最新課表*/
.news_part .title_i_box h6{font-family: var(--SFontE);color: var(--MainColor);}
.news_part .title_i_box h4 {
    font-size: 22px;
    color: #828282;
    font-weight: bold;}

.news_list ul li p:after {
    content: 'more';
    color: var(--MainColor);
    padding: 0 10px;
    border: 1px solid var(--MainColor);
    border-radius: 10px;
}
.news_list ul li span{color: var(--color);font-family: var(--SFontE);}
.news_list ul li p{color: var(--color);font-size: var(--f16);}

.news_list ul li a:hover span{color: var(--MainColor);}
.news_list ul li a:hover p {color: var(--MainColor);font-weight: bold;}
.news_list ul li a:hover p:after{background: var(--MainColor);color: #fff;}
.news_list ul li a:hover { background: #91a0871a;transform: scale(1.05);}
.product_info li .txt_box { color:#5c5c5c;}
.prod_tabs {  margin-top: 20px;}
.edit {
    font-size: 16px;
    color: #5c5c5c;
    line-height: 180%;
    text-align: justify;
    }
.product_info li span {
  font-size: 14px;
 color: #fff;
  background: var(--MainColor);
padding: 5px 20px;
width: max-content; }






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


/*預設解除背景輪播*/
#content_main { margin: 0;}
.bannerindex {
    position: relative;
    height: auto;
}

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

/* .swiper-slide img { height:auto;} */
@media screen and (max-width: 768px) {
    .bannerindex {
        padding: 0;
        margin: 0;
    }
}




/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/





/*相簿 內頁*/
.other_album_choice li { background: var(--MainColor);}
.show-list .show_name {
    text-align: center;
    color: var(--SubColor2);
}

.show-list .item:hover .show_name {  color: var(--MainColor);}
.album_fixed_title { background: #ffffff00;}

/*最新消息-文章*/
.blog_back a.article_btn_back {  background: var(--MainColor);}
.lastPage { background: var(--MainColor);}
.blog_le .accordion>li:hover,
.blog_le .accordion>li.on_this_category {
    background: var(--MainColor) !important;
}

.subbox_item a { padding: 5px;}
.blog_list_ri h5 {
    color: var(--MainColor);
    font-weight: bold;
}

.subbox_item a:after {
    background: rgb(255 255 255 / 0%);
    border: 1px var(--MainColor) solid;
}

.subbox_item a:before {
    content: 'MORE';
    bottom: unset;
    top: 0;
    color: #fff;
    background: var(--MainColor);
    padding: 5px 15px;
}

.other_subalbum li a p {
    text-align: center;
    font-weight: bold;
    line-height: 3;
}

.show-list .item:hover { background: var(--MainColor);}
.blog_box_edit .articel_mainPic{display: none;}
/*首頁*/
.module_i_news .title_i_box h6{
    font-family: var(--SFontE);
    color: var(--MainColor);}
.module_i_news .title_i_box h4{   
    font-size: 22px;
    color: #828282;
    font-weight: bold;}
.module_i_news li a:after {
    background:#ffffff00;
    border: 1px var(--MainColor) solid;}
.module_i_news li a:before {
    content: 'MORE';
    bottom: unset;
    top: 0;
    color: #fff;
    background: var(--MainColor);
    padding: 5px 15px;
    }
.i_blog_ri h5{color: var(--MainColor);}



/*聯絡我們*/
.contact_form li.last cite {  background: var(--MainColor);}

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

@media screen and (max-width:1300px) {
.banner{min-height: 500px;}
.banner::before{    height: 700px;}



    }
@media screen and (max-width:1200px) {
.products-list li+li::after{  left: -7.5px;}
}

@media screen and (max-width:1024px) {
    .nav-header { margin: auto; }
    .banner {  min-height: 350px;  margin-top: 2%;  }
    .banner h5 {  top: 200px;}
    .product_page .banner h5 {color: #fff;}
}

@media screen and (max-width: 980px) {
    .header_area .nav-brand {  filter:unset;}
    .header_area {
        position: static;
        text-align: center;
        background: var(--MainColor);
    }

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

    .sticky .nav-brand img {
        display: block;
        transition: 0.5s ease-in-out;
    }

    .sticky .header_area .nav-brand { display: none; }

    .footer_info { flex-wrap: wrap;    flex-direction: column;     align-content: center;    grid-gap:0px;}
    .footer_info li {  width: 100%;}
    .footer_menu {      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
    .footer_info li:nth-child(1) {  padding: 10px ;        width: max-content; }
    .footer_info ul {   max-width: 500px;margin: auto;}
    .footer_logo {  margin: auto;}
.footer_info li p {  text-align: center;}


    .products-list {   grid-template-columns: 1fr 1fr;    }
    .product_main {  width: 100%;}
    .prod_tabs {
        width: 100%;
        position: relative;
        top: 0;}
    .pd_tabInner_contain { padding-top: 0;}
    .sidebarBtn { padding: 0;    width: 100%;}
    #prod_thumbSwiper{display: none;}
  .products-list li:nth-child(3n+1):after{display:block;}
  .products-list li:nth-child(odd):after{display: none;}

/*教練介紹內頁*/
.product_main {max-width: 440px;}
.sidebarBtn {  max-width: calc(100% - 450px);}









}

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

    /*footer*/
    .footer_info { 
        padding: 0 60px; 
        grid-template-columns: 1fr;
    }

    .footer_info li:nth-child(1) {  width: 100%;}

    .footer_info li:nth-child(2) { width: 100%; }

    .footer_menu { grid-template-columns: 1fr 1fr 1fr 1fr; }

    .box_link {
        top: 193px;
        left: 63px;
    }
}

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

    /*HEADER*/
    .header_area { backdrop-filter: unset;    padding: 10px ;}
    .header_area.sticky{background:#90a086b6;}
    .nav-header { max-width: 200px; }
    .sticky.header_area::after{display: none;}
    .nav-header {
        position: relative;
        z-index: 999;
        margin: 0;
    }

  


    /*手機側邊欄位*/
    .stellarnav.mobile {
        left: unset;
        right: 0;}
    .stellarnav.mobile.left > ul {
        left: unset;
        right: 0;
        border-right:none ;
        border: none;
        overflow-x: unset;
        background: #ffffff00;
        max-width: 100%;
        justify-content: flex-end;
     
}
.stellarnav.mobile > ul > li { margin: auto 0 auto auto;width: 300px;}

.stellarnav.mobile.active>ul::after{
    position: absolute;
    content: "";
    background: #ffffff1c;
    backdrop-filter: blur(9px);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -2;
}
.stellarnav.mobile.active>ul::before{
    position: absolute;
    content: "";
    background: var(--SubColor);
    width:300px;
    height: 100%;
    right: 0;
    top: 0;
    z-index: -1;
    box-shadow: 0 0 3px #00000033;
}  
.stellarnav .icon-close { right: 0;}
    .stellarnav .icon-close:before,
    .stellarnav .icon-close:after { border-bottom: solid 3px #fff;    }
    .stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after { border-bottom: solid 3px #ffffff;}
    .stellarnav .menu-toggle span.bars span {background: #fff; }
    .stellarnav .menu-toggle:after { color:#fff; }

    .sticky .stellarnav .menu-toggle span.bars span { background: #ffffff; }
    .sticky .stellarnav .menu-toggle:after {  color: #fff; }

    .stellarnav.mobile>ul>li>a {
        padding: 20px 0;
        text-align: center;
    }

    .stellarnav>ul>li>a b,
    .sticky .stellarnav>ul>li>a {
        color: #fff;
        text-align: center;
        padding: 20px 0;
    }

    .stellarnav.mobile>ul>li>a:hover b {
        color: var(--MainColor);
        font-weight: bold;
    }

    .stellarnav.mobile>ul>li>a b:last-child { display: none; }
    .header_area .mobile.nav-brand {
        background: url(https://pic03.eapple.com.tw/zliclinic/logo_s.png) no-repeat;
        background-size: contain;
        width: 50px;
        height: 50px;
    }

    .stellarnav.mobile.left .close-menu {
        padding: 10px;
        background:#ffffff00;
        color: #fff;
    }

    .stellarnav.mobile li.open { background:var(--MainColor); }
    .stellarnav.mobile ul ul{background: #ffffff00;}
    .stellarnav li li>a{text-align: center;}
    .stellarnav li li {
        border: none;
        border-bottom: 1px solid #ffffff3d;
   
}
    .stellarnav.mobile li li a {  border-bottom:none;   color: #fff; }





    .banner {  min-height: 300px;}
    .banner h5::after {  top: -61px;}

    .product_page .banner {    background-position: left;}
    .product_page .sticky.header_area~ #content .banner::before {  background: linear-gradient(360deg, #fff 1%, #ffffffa4 10%, #ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-team-be.png) no-repeat;    }

    .promotions_page .banner h5{color: #fff;}
    .promotions_page .sticky.header_area~ #content .banner::before {    background: linear-gradient(360deg, #fff 1%, #ffffffa4 10%, #ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-course-be.png) no-repeat; }
    .services_page .sticky.header_area~ #content .banner::before {   background: linear-gradient(360deg, #fff 1%, #ffffffa4 10%, #ffffff00), url(https://pic03.eapple.com.tw/muchi/banner-service-be.png) no-repeat; }
    
    
    /* 開啟手機板下方按鈕所需設定 */
    #bottom_menu { display: none; }
    .footer.with_shopping_mode {padding: 30px 0 0px; }

    #to_top {bottom: 60px; }
    .footer_logo { margin: 0;}
    .footer_info {
        grid-template-columns: 1fr;
        width: fit-content;
        margin: auto;
    }
    .footer_info ul { justify-content: flex-start;width: 100%;max-width: 100%;}
    .footer_info li { width: 90%; }
    .footer_info li+li {  margin-top: 0;}
    .footer_info li p.fax { text-align: center; }
    .footer_menu {
        margin: 0;
        padding: 10px;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer_info li p { text-align: left;}


    .box_link {
        top: 170px;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer_info li p.line {  margin-top: 20px; }


    .product_info_page .main_part {  padding: 10px 10px 10px;}
    .proImgSwiper {
         width: 80%;
        margin: auto;}
    .mobile_product_name { display: none}
    .product_menu_list,
    .products-list,
    .product-wrapper {
        width: 100%;
        padding: 0 20px;
    }

    .product-layer-two {
        margin-right: 0;
        grid-template-columns:1fr;
        grid-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;
    }
    /*教練內頁*/
    .product_main { max-width: 100%;}
    .sidebarBtn { max-width: 100%;}
    .sidebarBtn h2 { text-align: center;    }
}


@media screen and (max-width: 600px) {
    .swiper-banner .swiper-slide img {
        height: 600px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .swiper-fade .swiper-slide:nth-child(1)::after {
        background: url(https://pic03.eapple.com.tw/muchi/bn01-600p-1.png) no-repeat;
        background-size: contain;
        background-position: right;
         padding-bottom: calc(100% / 1* 1.1);
         right: 0;
         left: unset;
        top: 15%;
        transform: translateY(-10%);}
    .swiper-fade .swiper-slide:nth-child(2){
        background: url(https://pic03.eapple.com.tw/muchi/bn02-600.png) no-repeat;
        width: 100%;
        height: 600px;
        background-position: right top;
        background-size: cover;
    }
    .swiper-banner .swiper-slide:nth-child(2) img{display: none;}
    .swiper-fade .swiper-slide:nth-child(2)::after {
        background: url(https://pic03.eapple.com.tw/muchi/bn02-600p-1.png) no-repeat;
        background-size: contain;
        background-position:left;
        padding-bottom: calc(100% / 1* 0.4);
        left:0;
        bottom: 0;
        top: unset;
        transform: unset;
    }
   
    .contact_form li .form__label {  background: rgb(255 255 255 / 0%);  }



    .news_list ul li a p:after {font-size: 16px;font-weight: bold;    width: 100%;
        max-width: 200px;
        margin: 15px auto 0;
    }

.products-list li+li::after{  left: -5px;}


}

@media screen and (max-width: 500px) {
    .swiper-banner .swiper-slide img { height: 500px;}
    .swiper-fade .swiper-slide:nth-child(2){  height: 500px;}
    .swiper-fade .swiper-slide:nth-child(2)::after {
        padding-bottom: calc(100% / 1* 0.5);
        bottom: 0;
        top: unset;}

    .footer_menu {  grid-template-columns: 1fr 1fr;   }

}

@media screen and (max-width: 420px) {
    .footer_logo { max-width: 220px;}
    .footer_info {  padding: 0 60px 0 10px;}
}

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