@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

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

*/
body{
    font-family: "Noto Sans TC", "Asap Condensed", sans-serif;
}
.path p, .path p a{ display: none;}

.edit{ padding: 0px 0;}
.info_fix{ display: none;}

.main_part{ max-width: 1440px; width: 100%;}



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


/*選單設定*/


.main_header_area .container{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: 14px;
    max-width: 1600px;
    background-color: #ffffffe3;
    border-radius: 20px;
    -webkit-box-shadow:0px 5px 10px 0px rgb(98 110 69 / 7%);
    box-shadow: 0px 5px 10px 0px rgb(98 110 69 / 7%);
    padding: 0px 32px;
    margin: auto;
    animation: show-nav 1.2s ease-in-out forwards;
}

@keyframes  show-nav {
    from,
    60%,
    75%,
    90%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      transform: translate3d(0, -3000px, 0) scaleY(3);
    }
  
    60% {
      opacity: 1;
      transform: translate3d(0, 25px, 0) scaleY(0.9);
    }
  
    75% {
      transform: translate3d(0, -10px, 0) scaleY(0.95);
    }
  
    90% {
      transform: translate3d(0, 5px, 0) scaleY(0.985);
    }
  
    to {
      transform: translate3d(0, 0, 0);
    }
  }

 .header_area.sticky .main_header_area .container{
    max-width: 100%;
    top: 0px;
    border-radius: 0px;
    background-color: #fff;
  }
  
.nav-menu {
    margin: 0;
}

.header_area .main_header_area .container {
    max-width: 90%;
    transition: all 0.6s;
}

.header_area.sticky .main_header_area .container {
    transition: all 0.6s;
}

.nav-menu>li:not(.tp_links) {
    padding-right: 15px;
}

.nav-menu>li:hover>a,
.nav-menu>li.active>a,
.nav-menu>li.focus>a {
    color: #2B3047;
}

.nav-dropdown>li:hover>a,
.nav-dropdown>li.focus>a {
    color: #2B3047;
}

.nav-dropdown>li {
    text-align: center;
}

.me_tp_features {
    padding-top: 23px;
    position: absolute;
    right: 0%;
}

.me_tp_features .box_search{ display: none; }

.tp_links a{
    font-size: 14px;
    color: #fff;
    margin: 0;
    background: #879297;
    border-radius: 50px;
    padding: 6px;
    transition: 0.5s;
}
.tp_links a:hover{
    background: #789096;
}

.tp_links a.me_tp_call ,.tp_links a.me_tp_mail { display: none; }

.nav-header {
    max-width: 210px;
    position: absolute;
    top: 52%;
    z-index: 98999999;
    transform: translate(0, -50%);
    transition: all 0.5s;
}

.nav-header::before {}

.pageIndex .nav-header::before {
    top: -100px;
    opacity: 0;
    transition: all 0.3s;
    transition-delay: 0.5s;
}


.sticky .nav-header::before {
    top: 50%;
    opacity: 1;
    transition: all 0.3s;
    /* transition-delay: 0.5s; */
}

.nav-header::after {}

.nav-header:hover:after {
    animation-play-state: paused;
    transition: all 0.3s;
}

.nav-header:hover:before {
    background-color: #215b6d;
    transition: all 0.3s;
    transition-delay: none;
}





@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


.header_area {
    position: fixed;
    z-index: 9999;
    width: 100%;
    padding: 0;
    top: 0;
    background: transparent;
    transition: all 0.7s;
}

.header_area.sticky {
    top: 0px;
    background: transparent;
    transition: all 0.7s;
}

.main_header_area {
    position: relative;
    background: transparent;
}

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



.stellarnav{ display: flex; justify-content: center;  width: 70%; margin: auto;}



.stellarnav>ul>li>a {
    padding: 0px 15px;
    color: #4C565B;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    margin: 18px 2px;
    cursor: pointer;
    text-align: center;
    transition: all 0.5s;
}

.sticky .stellarnav>ul>li>a {
    color: #4C565B;
    transition: all 0.5s;
}

.stellarnav>ul>li>a:hover {
    transition: all 0.5s;
}

.stellarnav>ul>li>a:hover {
    color: #789096;
    transition: all 0.5s;
}

.stellarnav > ul > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 22px;
  height: 20px;
  background-image: url(https://pic03.eapple.com.tw/yuguostudio/nav-icon.png); 
background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-out;
}

.stellarnav > ul > li:hover:before {
  transform: translate(-50%, -50%) scale(1.5);
}

.header_area .navigation {
    display: flex;
    width: 100%;
    position: relative;
    padding: 4px 0;
    opacity: 1;
    transition: all 0.3s;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

/* .pageIndex .header_area .navigation {
    padding: 50px 0;
} */

.header_area.sticky .navigation {
    padding: 6px 0;
    opacity: 1;
    transition: all 0.5s;
    transition-delay: 0.5s;
}

@media screen and (max-width:1550px) {
    .nav-header{ max-width: 180px; }
}

@media screen and (max-width:1366px) {
    .header_area .main_header_area .container{  max-width: 96%;}
}
@media screen and (max-width:1200px) {
    .stellarnav>ul>li>a{ padding: 0px 8px;}
}

@media screen and (max-width: 1024px) {
    .header_area .navigation {
        padding: 10px 0;
    }
    .me_tp_features{ display: none; }
    .header_area .main_header_area .container{ height: 98%;}
      .nav-header{ max-width: 160px ;top: 54%;}
    .stellarnav{ width: 100%; justify-content: flex-end;}
}

@media screen and (max-width:875px) {
    .main_header_area .container{ padding: 0px 10px;}
    .stellarnav>ul>li>a{ font-size: 15px;}
    .nav-header{ max-width: 150px;}
}

@media screen and (max-width: 768px) {
    .header_area .main_header_area .container {
        max-width: 90%;
        height: 100%;
    }
}









/*下拉*/
.nav-dropdown>li>a {
    background: #f7f5f5;
    transition: 0.2s;
    letter-spacing: 1.5px;
    width: 100%;
}

.nav-dropdown>li>a:hover {
    transition: 0.2s;
    background-color: #2B3047;
    ;
    color: #fff
}

.nav-dropdown>li:hover>a .submenu-indicator-chevron,
.nav-dropdown>.focus>a .submenu-indicator-chevron {
    border-color: transparent #fff #fff transparent;
}

.stellarnav ul ul{ left: 4px ; top: 60px; max-height: 320px;width: 175px;
    /* overflow-x:scroll; */
}


.stellarnav li li a {
    padding: 10px 15px;
    display: block;
    color: #4C565B;
    background-color: transparent;
    transition: all 0.3s;
    font-size: 14px;
}

.stellarnav li li a:hover {
    color: #fff;
    background-color: #789096;
    transition: all 0.3s;
    border: 0px;
}







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

/*LOGO設定*/
.header_area .nav-brand {
    display: inline-block;
    width: 100%;
    transition: all 0.5s;
}

.header_area.sticky .nav-brand {
    width: 100%;
    transition: all 0.5s;
}

@media screen and (max-width: 1024px) {
    .me_tp_features{ text-align: right;}
    .stellarnav ul {
        text-align: right;
    }

    .stellarnav>ul>li>a {
        padding: 0px 5px;
        margin: 8px 5px;
    }
      .nav-header{ max-width: 160px ;top: 54%;}
}

@media screen and (max-width:800px) {
    .stellarnav>ul>li>a{ padding: 0px 0px;}
}

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

    .header_area .nav-brand img{ filter: brightness(100); transition: 0.5s;}
    .header_area.sticky .nav-brand img{ filter: brightness(1); transition: 0.5s;}
    
    .nav-brand-m {
        display: block;
        text-align: left;
        padding: 15px 10px;
    }

    .nav-brand-m img {
        max-width: 200px;
        width: 100%;
    }

    .stellarnav.mobile {
        top: -11px;
        left: unset;
        right: -39px;
    }
    .stellarnav.mobile ul{ top: 0px ;left: 0px;}
    .stellarnav .menu-toggle span.bars span {
        background: #333333;
    }

    .stellarnav .menu-toggle:after {
        color: #333333;
    }

    .stellarnav.mobile>ul {
        border-top: 0;
    }

    /* .stellarnav.mobile.left > ul{ left: -40px; top: -13px;} */
    .header_area.sticky .stellarnav.mobile.left > ul{ left: 0px; top: 0px;}
    .stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul{ max-height: 100vh; overflow-y: auto; }

    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu {
        background: #262626;
        color: #fff;
    }

    .stellarnav .icon-close:after {
        border-bottom: solid 3px #fff;
    }

    .stellarnav .icon-close::before {
        border-bottom: solid 3px #fff;
    }

    .stellarnav.mobile>ul>li>a {
        color: #2B2B29;
        text-shadow: none;
        padding: 15px 10px;
    }

    .stellarnav.mobile > ul > li{ border-bottom: 1px #f0f0f0 solid; }

    .nav-brand {
        display: inline-block;
        width: 220px;
    }

    .header_area .nav-brand {
        width: 140px;
    }

    .header_area .navigation {
        padding: 10px 0;
    }

    .header_area.sticky .navigation {
        padding: 10px 0;
    }

    .header_area.sticky .stellarnav>ul {
        margin: 0;
        padding: 0;
        border: 0;
        text-align: right;
        transition: all 0.3s;
    }

    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu {
        display: inline-block;
        text-align: right;
        font-size: 12px;
        background: #789096;
        color: #fff;
    }

    .stellarnav .icon-close:after {
        border-bottom: solid 3px #fff;
    }

    .stellarnav .icon-close:before {
        border-bottom: solid 3px #fff;
    }

    .stellarnav.mobile>ul>li>a {
        display: flex;
        padding: 20px 10px;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .stellarnav.mobile>ul>li>a.dd-toggle {
        padding: 0;
        position: absolute;
        top: 7px;
    }

    /* .stellarnav.mobile.left>ul {
        left: 0;
        padding: 0;
        border: 0;
        max-width: 100%;
    }

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

    .stellarnav li li:hover {
        background: inherit;
        border-radius: 0;
        color: inherit;
        transform: none;
        box-shadow: none;
        z-index: 100000;
        transition: all 0.3s;
    }

    .stellarnav li li:hover>a {
        color: #fff;
        transition: all 0.3s;
    }

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

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

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

    .stellarnav.mobile li a {
        border-bottom: 0;
    }

    .stellarnav li li a {
        padding: 15px 15px;
        color: #666;
        text-align: center;
    }

    .nav-header {
        position: absolute;
        left: 40px;
        top: 20px;
        transform: translate(-50%, -50%);
        z-index: 0;
        transition: all 0.5s;
        z-index: 1;
    }

  

    .header_area .nav-brand {}

    .header_area .navigation {
        padding: 0px 0;
    }

    .header_area.sticky .navigation {
        padding: 0px 0;
    }

    .header_area.sticky .nav-brand {
        width: 130px;
        transition: all 0.5s;
    }

    .nav-header::before {
        top: -120%;
        width: 90%;
        height: 100px;
    }

    .sticky .nav-header {
        top: 35px;
        transition: all 0.5s;
        left: 60px;
    }

    .sticky .stellarnav.mobile{ top: 5px; right: -11px;}

    .stellarnav.mobile>ul>li>a b:nth-of-type(2) {
        font-weight: bold;
    }
    /* 手機版選單只要怪怪的，第一個檢查 header 有沒有 transform */
    .main_header_area .container{
        animation: none !important;
        transform: none !important;
  }
    
}

@media screen and (max-width:570px) {
    .stellarnav.mobile{ top:-4px; right: -23px;}
    .sticky .stellarnav.mobile{ top: 17px; right: 0px;}
}

@media screen and (max-width:460px) {
    .nav-header{ left: 52px;}
}
@media screen and (max-width:320px) {
    .stellarnav.mobile.left > ul{ left: -15px; top: -14px;}
}

/* 商品下拉超過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個--結束 */


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


/* FOOTER  */
.footer_menu a:nth-of-type(1) {
    display: none;
}

.footer_info li:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px 0px 20px 10px;
    width: 80%;
    gap: 5px 50px;
}

.footer_info li:nth-child(2) {
    padding: 0px;
    padding-top: 15px;
}

.footer {
    background: #C9D0D4;
}

.footer_info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 20px;
}

.footer_info li p {
    font-size: 14px;
}
.footer_info li p,.footer_info li p a{color: #2B2B29; transition: 0.5s; }
.footer_info li p a:hover{ color: #789096;}

.footer_info li p.add2:before{ content: '營業時間：';}
.footer_info li p.add2{ order: 1;}
.footer_info li p.taxid{ order: 2;}
.footer_info li p.phone{ order: 3;}
.footer_info li p.tel{ order: 4;}
.footer_info li p.fax{ order: 5;}
.footer_info li p.mail{ order: 6;}
.footer_info li p.add{ order: 7;}

.footer_menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer_menu a {
    margin: 0;
    text-align: justify;
    transition: all 0.3s;
    border: none;
    color: #4C565B;
    background: transparent;
    font-size: 13px;
    position: relative;
}
.footer_menu a:hover {
    background: transparent;
    color: #789096;
}

.box_link {
    display: none;
}

.copy {
    background: transparent;
    color: #606060;
    border: none;
    font-size: 12px;
    justify-content: center;
    width: 1300px;
    max-width: 100%;
    margin: auto;
    padding: 20px 50px;
}

.copy a {
    color: #606060;
    transition: all 0.3s;
}
.footer_logo img {
    width: 300px;
}


@media screen and (max-width: 1480px) {
    .footer_menu {
        grid-template-columns: repeat(auto-fit, minmax(min(60px, 100%), 1fr));
    }
}

@media screen and (max-width:1380px) {
    .footer_info{ padding: 20px 80px; }
}
@media screen and (max-width: 1024px) {

    .footer_info li:nth-child(1) {
        padding-left: 73px;
        grid-template-columns: 1fr;
    }
    .footer_info li:nth-child(2) {
        padding: 35px 0px 0px 57px;
    }
     .footer_logo img {
        width: 220px;
    }
}

@media screen and (max-width: 768px) {
        .footer_info {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .footer_logo img {
        width: 180px;
    }
    .footer_info li:nth-child(1) {
        width: 100%;
    }
    .footer_info li:nth-child(2) {
        width: 100%;
        text-align: center;
    }
    .footer_menu {
        margin: 0;
        gap: 0px 20px;
        justify-content: center;
    }
    .box_link {
        position: relative;
        right: 0;
        top: 0;
        text-align: left;
        padding: 15px 0;
    }
    .copy {
        font-size:11px;
    }
    .footer {
        padding: 40px 0 30px;
    }
    .footer_info {
        flex-direction: column;padding:0px;
    }
    .footer_info ul {
        text-align: center;
        margin: 10px 0;
        border: none
    }
    .footer_logo {
        width: 200px;
        margin: 10px auto;
        margin-bottom: 0px;
        justify-content: center;

    }
    .footer_info li:nth-child(1) {
        border-left: none;
        padding: 0px 0px 0px;
    }
    .footer_info li:nth-child(2) {
        padding: 10px 0px 10px;
    }

}



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



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

.pageIndex .products-list{gap:50px 30px;}
.prod_part section{width: 90%;max-width: 1500px;}


.products-list .price b.ori_price{color: #444;}
.products-list .price b.sp_price{color: var(--WebColor01);font-weight: bold;}

.product_menu_list{margin-bottom: 80px;}
.product_menu_list ul.product-layer-two {    display: grid;    grid-template-columns: repeat(3, 1fr);    max-width: 650px;margin: 0 auto 50px;    grid-gap: 15px;}

.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:#fff; color:#ad925e;}
.product-layer-two > li {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid var(--WebColor02);transition:all 0.4s;
}
.product-layer-two > li:hover{border-color: #789096;}

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

.product-layer-two li a , .video-layer-two li a{background: transparent;color: #789096 ;padding: 10px 5px;    font-weight: bold;font-size: 15px;text-align: center;transition:all 0.4s; border-radius:100px ; border: 1px solid #789096;}
.product-layer-two li:hover a , .video-layer-two li:hover a{color: #fff; background: #789096; } 
.product-layer-two li.active , .video-layer-two li.active{   padding-bottom: 0;}
.product-layer-two li.active a , .video-layer-two li.active a{    border: none;    color: #fff; background: #789096; transition:all 0.4s;}

/* 商品內頁 */
.product_pic{ padding-left: 0px; margin: 40px 0px;}
.show_content{ padding: 0px 0px;}
/*商品頁-大範圍*/
.product-wrapper{display: flex;flex-direction: column; align-items: center;}
/*商品頁-輪播區塊*/
.product-wrapper{ top: -26px;}
.swiper-vertical>.swiper-wrapper{ display: none;}
#prod_thumbSwiper .swiper-button-next{display: none;}
#prod_thumbSwiper .swiper-button-prev{display: none;}
.proImgSwiper {
    aspect-ratio: 3 / 1.8;
}


.product_info_page .product-layer-two { display: none;}
.product_info_page .products-list,
.product-wrapper { width: 100%;}

.products-list{grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));grid-gap:30px 20px;}
.products-list .more{display: none;}

.products-list .pic{aspect-ratio:4/3; border-radius: 26px;}
.products-list .pic img{ border-radius: 26px;}
.products-list .item a{padding-bottom: 0;}
.products-list .item a *{transition:all 0.8s;}
.products-list .name{font-size: 16px;height: auto;line-height: 160%;margin-top: 10px;font-weight: 500; color: #4c565b;}

.products-list .item a:hover .pic img{transform:scale(1.1);  border-radius: 26px;}
.products-list .item a:hover .name{color: #789096;}


.mobile_product_name{display: none;}
/* .product_main{display: none;} */
.sidebarBtn form{display: none;}
.pd_tabTitle{display: none;}
.toShare{text-align: center;}
.sidebarBtn{width: 100%;padding: 0;border: none;}
.sidebarBtn h2{font-size: 28px;text-align: center; color: #4c565b;}

.prod_tabs{margin-top: 30px;}
.pd_tabInner_contain{padding-top: 0;}
.prod_tabs .edit{padding: 0; text-align: center;}


.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;}

/* 
.inquiry_a1{    background: #789096;}
.inquiry_a2{    background: var(--WebColor02);}
.inquiry_a3 {    background: var(--WebColor01);}
.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover{background: var(--WebColor04);} */

.prod_related{ background: transparent;}
.prod_related h6{color: #999; }
.related_list li a img{ border-radius: 26px;transition: 0.5s;}
.related_list li a:hover img{
    opacity: 0.85;
    transition: 0.5s;
}

.lastPage{background: #789096;border-radius:50px;margin: 0 auto;transition:all 0.3s;}
.lastPage:hover{background: #789096;}


@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 980px) {
}
@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)); grid-gap: 5px;}
.product_page ul.products-list{ grid-template-columns:1fr 1fr; }
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}

.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;}
#prod_thumbSwiper{ display: none; }
}
@media screen and (max-width: 600px) {
.product_menu_list ul.product-layer-two {grid-template-columns: repeat(2,1fr);max-width: 320px;      grid-gap: 10px 15px;}
.product-layer-two li a, .video-layer-two li a {    padding: 5px;    font-size: 14px;}

}
@media screen and (max-width:460px) {
    .product_page ul.products-list{ grid-template-columns:1fr; }
    .product_menu_list ul.product-layer-two { grid-template-columns:1fr; }
}


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


/*預設解除背景輪播*/
#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;}
}


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


/*內頁BANNER 設定*/
.banner {}
.banner h5 {}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}


/*Banner/＝＝＝＝＝*/
.banner {    width: 100%;    height: 36vh;    background: #444444;    position: relative;    overflow: hidden; }
.banner:before {
    content: '';
    animation: bgScroll 30s linear infinite;
    width: 110%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-image: url(https://pic03.eapple.com.tw/yuguostudio/ban.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
.product_page  .banner:before ,.product_info_page .banner:before, .car_page .banner:before{     background-image: url(https://pic03.eapple.com.tw/yuguostudio/banF.jpg);}
.blog_page .banner:before, .blog_in_page  .banner:before { background-image: url(https://pic03.eapple.com.tw/yuguostudio/banblog.jpg);}
.contact_page .banner:before {     background-image: url(https://pic03.eapple.com.tw/yuguostudio/banC.jpg);}
.other_page .banner:before {     background-image: url(https://pic03.eapple.com.tw/yuguostudio/banB.jpg);}
.album__page .banner:before ,.album_class_page .banner:before, .album_info_page .banner:before{  background-image: url(https://pic03.eapple.com.tw/yuguostudio/banE.jpg);}

@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);    }
}

.banner h5 {
	display: none;
}

@media screen and (max-width:1024px) {
    .banner{ height: 28vh;}
}
@media screen and (max-width:768px) {
    .banner{ height: 23vh;}
}
@media screen and (max-width:450px) {
    .banner{ height: 10vh;}
}


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


/*文章設定*/
.blog_page h4.blog_category_title {
    display: none;
}

.blog_box {
    margin-top: 20px;
    padding: 0;
}

.blog_le {
    padding: 0;
}

.blog_ri {
    padding: 0 0 0 60px;
}

.blog_le,
.blog_ri {
    margin-bottom: 1vw;
}

.blog_subbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

.blog_subbox:before {
    content: none;
}

.subbox_item {
    width: 100%;
    margin: 0;
    border-bottom: none;
}

.subbox_item a {
    display: flex;
    flex-flow: column wrap;
    gap: 0;
}

.blog_list_le {
    padding: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}

.blog_list_le:after {
    content: 'MORE +';
    font-family: "Asap Condensed", sans-serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    width: 105%;
    height: 105%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 0px 0px 5px #000;
    opacity: 0;
    transition: all .4s;
}

.subbox_item a:hover .blog_list_le:after {
    opacity: 1;
}

.subbox_item a:hover img{ border-radius:  20;}

.blog_list_le img {
    min-width: 100%;
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 26px;
}

.blog_list_ri {
    display: flex;
    flex-flow: column wrap;
    padding: 15px 0 0;
    position: relative;
    justify-content: center;
}

.blog_list_ri h5 {
    font-weight: bold;
    color: #4c565b;
    font-size: 18px;
}
.subbox_item a:hover .blog_list_ri h5 {  transition: all .5s; color: #789096;}

.blog_list_ri em {
    font-weight: 400;
    margin: 6px 0 18px;
}

.blog_list_ri p {
    line-height: 160%;
    padding: 14px 0 0;
    margin-bottom: 14px;
    -webkit-line-clamp: 2;
    text-align: justify;
    font-size: 15px;
    border-top: 1px solid #ededed;
    margin-top: 0;
    position: relative;
}

.subbox_item a .blog_list_ri p:before{
    content: "";  position: absolute;  bottom: 37px;  left: 0;  width: 0px;  height: 2px;  background-color: #8e979c;  transition: 0.3s;  z-index: 1;
}
.subbox_item a:hover .blog_list_ri p:before{width: 100%; transition: all .5s;}

.subbox_item a:before,
.subbox_item a:after {
    content: none;
}

h5.blog_le_t {
    display: none;
}
.accordion li .link a {
    color: #789096;
    font-weight: 400;
    font-size: 15px;
    padding: 12px;
}

.accordion li .link {
    border-bottom: none;
}

.accordion li {
    transition: all 0.2s ease;
}

.blog_le .accordion>li:hover,
.blog_le .accordion>li.open:hover,
.blog_le .accordion>li.on_this_category:hover,
.blog_le .accordion>li.open,
.blog_le .accordion>li.on_this_category {
    background: #789096 !important;
    color: #fff!important;
}

.blog_le .accordion>li .link a,
.blog_le .accordion>li .link i {
    color: #789096!important;
}

.submenu {
    background: #000;
    font-size: 14px;
}

.submenu a {
    font-family: 'Noto Sans TC', serif;
    color: #fff;
    letter-spacing: 0px;
    font-weight: 400;
    padding: 12px 12px 12px 36px;
    border-left: #000 0 solid;
    transition: all .15s;
}

.submenu li.on_this_category a,
.submenu a:hover {
    background: #000;
    color: #789096;
}

.submenu a i {
    left: 12px;
    font-weight: var(--fa-style, 900);
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

.submenu a:hover {
    border-left: #000 4px solid;
}

.blog_search input[type=search] {
    background: #fff;
    font-size: 13px;
    padding: 12px 36px 12px 12px;
}

.blog_search input[type=submit] {
    filter: grayscale(20);
}

.blog_le .accordion li .link i {
    transition: none;
}

/*內頁*/
.articel_mainPic,
.blog_shareData {
    display: none;
}

h4.blog_category_title {
    padding: 0;
    margin-bottom: 30px;
    font-size: 26px;
    color: #4c565b;
}

.blog_box_edit {
    color: #535353;
    font-size: 16px;
}

.blog_box_edit * {
    line-height: 170%;
}

.blog_back {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    justify-content: center;
}

.blog_back a {
    width: 100%;
    font-weight: 500 !important;
}

.blog_back a.article_btn_next,
.blog_back a.article_btn_prev {
    background: #789096;
    transition: all .3s ease;
    border-radius: 40px;
}
.blog_back a.article_btn_back{
    background: #789096;
    transition: all .3s ease;
    border-radius: 40px;
}

.news_related {
    background: #fff;
    padding: 48px 0;
}

.news_related_list {
    max-width: 1400px;
    width: 90%;
    /* display: flex;
    flex-flow: row wrap;
    justify-content: center; */
}

.news_related_list li {
    width:100%;
}

.lastPage {
    margin: 40px auto 20px;
    background: #789096;
    border-radius: 40px;
}

.news_related h6 span:before {
    color: #999;
}


.news_related_list li a{
    background: transparent;
    transition: 0.5s;
}
.news_related_list li a p {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px 5px 5px;
}
.news_related_list li a img { transition: 0.5s; border-radius: 26px;}
.news_related_list li a:hover img{
    opacity: 0.85;
    transition: 0.5s;
}

/*首頁文章*/

.module_i_news section{ max-width: 1440px;}

.i_blog_le {
    padding: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}

.i_blog_le:after {
    content: 'MORE +';
    font-family: "Asap Condensed", sans-serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    width: 105%;
    height: 105%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 0px 0px 5px #000;
    opacity: 0;
    transition: all .4s;
}

.module_i_news ul a:hover .i_blog_le:after {
    opacity: 1;
}

/* .module_i_news ul a:hover img{ border-radius:  60px 0px 60px 0px;} */

.i_blog_le img {
    min-width: 100%;
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 26px;
}

.blog_list_ri {
    display: flex;
    flex-flow: column wrap;
    padding: 15px 0 0;
    position: relative;
    justify-content: center;
}

.i_blog_ri h5 {
    font-weight: bold;
    color: #4c565b;
    font-size: 20px;
}
.module_i_news ul a:hover .i_blog_ri h5 {  transition: all .5s; color: #789096;}

.i_blog_ri em {
    font-weight: 400;
    margin: 6px 0 18px;
}

.i_blog_ri p {
    line-height: 160%;
    padding: 14px 0 0;
    margin-bottom: 14px;
    -webkit-line-clamp: 2;
    text-align: justify;
    font-size: 15px;
    border-top: 1px solid #ededed;
    margin-top: 0;
    position: relative;
}

.module_i_news ul a .i_blog_ri p:before{
    content: "";  position: absolute;  bottom: 37px;  left: 0;  width: 0px;  height: 2px;  background-color: #8e979c;  transition: 0.3s;  z-index: 1;
}
.module_i_news ul a:hover .i_blog_ri p:before{width: 100%; transition: all .5s;}

.module_i_news ul a:before,
.module_i_news ul a:after {
    content: none;
}

.module_i_news{ padding: 50px 20px 100px; }
.module_i_news li a{ grid-template-columns:1fr;}
.module_i_news ul { grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:30px;}

.module_i_news .title_i_box h4{  color: #4c565b; font-weight: bold; font-size: 30px;font-weight: bold; }
.module_i_news .title_i_box h4::after{ content: "DESIGN BLOG"; display: block; font-weight: 300; font-size: 26px; color: #8e979c;  text-align: center;  font-family: "Asap Condensed", sans-serif;}
.i_blog_b a{ font-weight: 300; }
.animated-arrow{ background: #789096; width: 190px; border-radius: 50px; transition: 0.5s;}
.animated-arrow:hover{ background: #789096; }


/* 文章二 */
.blog_page.article_b .subbox_item a{ flex-flow: row;}
.blog_page.article_b .subbox_item a { display:grid; grid-template-columns: 240px 1fr; position:relative; grid-gap: 20px;}
.blog_page.article_b .blog_subbox{grid-template-columns:1fr  }
.blog_page.article_b .blog_list_le:after{ border-radius: 65px 0px 65px 0px;}



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

}

@media screen and (max-width:1200px) {
    .module_i_news ul a .i_blog_ri p:before{ bottom: 61px;}
    .subbox_item a .blog_list_ri p:before { bottom: 61px;}
}

@media screen and (max-width:1024px) {
    .blog_subbox{grid-template-columns:repeat(2, 1fr); }
    .module_i_news ul{ grid-template-columns:1fr 1fr 1fr;}
}

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

    .module_i_news ul{ grid-template-columns:1fr 1fr;}
    .module_i_news li{ border-bottom: 0px;}
    .blog_ri {
        padding: 0;
    }

    .blog_page h5.blog_le_t {
        display: block;
        color: #7a7a7a;
        letter-spacing: 0;
    }

    .blog_le {
        margin-bottom: 20px;
    }

    .module_i_news {
        padding: 48px 5%;
    }

    .pageIndex .contact_content,
    .module_i_album {
        padding: 48px 0;
    }


    .i_blog_ri p {
        font-size: 14px;
        margin: 8px 0 12px;
        line-height: 160%;
    }

    .blank_letter,
    .module_i_album .title_i_box h4,
    .module_i_news .title_i_box h4 {
        font-size: 24px;
    }

    .other_subalbum li a p {
        font-size: 16px;
    }

    h4.blog_category_title {
        font-size: 24px;
    }

    .blog_box {
        margin-top: 0;
    }

    .pic-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
        .blog_page.article_b .subbox_item a .blog_list_ri p:before{ background-color: transparent; display: none; }
    .subbox_item a .blog_list_ri p:before{ display: none; }
}

@media screen and (max-width:520px) {
    .blog_subbox {
        grid-template-columns: 1fr;
        grid-gap: 8px;
    }
    .module_i_news ul a .i_blog_ri p:before{  background-color: transparent; display: none; }
    .module_i_news .title_i_box h4::before{ font-size: 40px;}
    
    .blog_page.article_b .subbox_item a{grid-template-columns:160px 1fr; }
    .module_i_news ul{ grid-template-columns:1fr;}

}
@media screen and (max-width:410px){
    .blog_page.article_b .subbox_item a{display: flex; flex-direction: column;}
}


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



/*首頁相簿*/


.i_album_list li a {
    padding: 20px 0px 50px;
}

.i_album_list li a p {
    padding: 0 10px 15px;
    letter-spacing: 1px;
    color: #4c565b;
    background: rgba(255,255,255,.75);
}

.i_album_list li div {
    border-radius: 15px;
}

.module_i_album .title_i_box{ margin-bottom: 12px;}

.module_i_album .title_i_box h4 {
    font-size: 30px; 
    font-weight: bold;
    color: #4c565b;
    letter-spacing: 0px;
}

.module_i_album .title_i_box h4::after{ content: "WORK"; display: block; font-size: 26px; color: #8e979c; font-weight: 400;  font-family: "Asap Condensed", sans-serif;}

.module_i_album section {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 1440px;
}


.module_i_album {
    margin: 0 auto;
    padding: 60px 20px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column-reverse;
}

.module_i_album .title_i_box h6 {
    font-size: 30px;
    color: #333326;
    padding: 0px 0px 15px 50px;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 5px;
    text-align: justify;
    position: absolute;
    top: 60px;
}

.i_album_list {
    grid-template-columns: repeat(3, 1fr);
}

.pageIndex .fa-arrow-right::before {display: none;}
.pageIndex .i_album_b a i.fa-solid.fa-arrow-right {display: none;}
.pageIndex .i_blog_b a i.fa-solid.fa-arrow-right{display: none;}
.animated-arrow {
    background: transparent;
    border: 1px solid #789096;
    width: 180px;
    border-radius: 30px;
    color: #789096;
    height: 40px;
    line-height: 37px;
}
.i_album_b{ margin-top: 0px; }

.animated-arrow:hover {
    background: #789096;
}

.animated-arrow:hover b{
  color:#fff
}

.module_i_album *,.i_blog_b * {
    transition: all .5s;
    font-weight: 400;
    letter-spacing: 2px;
}


/*相簿/＝＝＝＝＝*/
/*作品展示*/
/* .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;} */
.show-list .show_name {
  letter-spacing: 1px;
  font-weight: 400;
  color: #404040;
}
/*版面*/
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;}



.show-list .item, .other_subalbum li, .pic-list .item {
    width: 100%;
    margin: 0;
    background: transparent;
}
.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%);
	border-radius: 15px;
	}

/**/

.overlay {
    z-index: 9999;
    width: 0%;
    border-radius: 15px;
    transform: none;
    transition: all .7s;
    background: #e6eaec7d;
}

.show-list .item:hover .overlay {
  width: 100%;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: all .7s;
}

/**/



.show-list .item:hover .show_name {  color: #404040;}
.other_album_choice li {    background: #3b3b3b;}
.other_album_choice li a:hover i.fa-solid.fa-right-from-bracket {
display: none;
}
.fa-right-from-bracket::before {
  display: none;
}
.other_album_choice li a i.fa-solid.fa-right-from-bracket {
  display: none;
}
.album_fixed_title {
background: transparent;
}
.other_album_choice li:hover {
  transform: translateY(-5px);
  transition: all .4s;
}
.subalbum-menu h2{ display: none;}

.other_subalbum li p {
    margin-top: 0px;
    padding: 14px 0 0;
    letter-spacing: 1.2px;
    color: #4c565b;
    text-align: center;
    font-size: 16px;
}

.pic-list .item h6 {
    font-weight: 400;
    letter-spacing: 1px;
    padding-top: 13px;
    text-align: center;
    font-size: 14px;
}
.block {
  display: none;
}

.album_fixed_title span:before {
    content: 'MORE';
    letter-spacing: 2px;
}

.fa-image::before {
    font-size: 15px;
}

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

  .album_page .main_part, .album_class_page .main_part, .album_info_page .main_part {
    width: 95%;
}

}

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

    .i_album_list{ grid-template-columns:repeat(2, 1fr) }

  .album_page .main_part, .album_class_page .main_part, .album_info_page .main_part {
    width: 100%;
}

ul.show-list, .other_subalbum, ul.pic-list {
  grid-template-columns: 1fr 1fr;
}

}

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

.blog_list_ri h5 {
padding: 10px 0px 0px;
font-size: 18px;
}

.blog_list_ri p {
font-size: 14px;
letter-spacing: 0.5px;
}

.subbox_item a:before {
height: 29px;
font-weight: 400;
font-size: 15px;
}

.subbox_item a:hover:before {
height: 21px;
}

    .subbox_item a {
        flex-wrap: wrap;
        padding: 35px 0px 40px 0;
    }
.blog_ri {
    width: 95%;
}
}


@media screen and (max-width: 450px){
     .i_album_list{ grid-template-columns:repeat(1, 1fr) }

    ul.show-list, .other_subalbum, ul.pic-list {
  grid-template-columns: 1fr;
}

.blog_subbox {
grid-gap: 25px;
grid-template-columns: 1fr;
}

  .subbox_item a:before {
    content: '';
    background: #ffffff;
    height: 25px;
    }

    .subbox_item a:hover:before {
      background: #616161;
    }

    .blog_list_le {
      width: 100%;
  }

  .subbox_item a {
    flex-wrap: wrap;
    padding: 17px 17px 50px;
}

}



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




/* 聯絡我們 */
.contact_content .information_left{ display: none;}
.contact_editbox{ padding: 0px 0px;}
.contact_content .information_right{ width: 100%; padding-left: 0px;}
.contact_content{ max-width: 1200px;}

/* 聯絡我們 */
.blank_letter{ color: #4c565b;}
.contact_form{ grid-gap:16px;}
.contact_form li{ grid-template-columns:124px 1fr;}
.contact_form li.last blockquote{ color: #789096;
  }
.contact_form li.last blockquote, .contact_form li.last cite{ border: 1px solid #789096;  border-radius: 100px;}
.contact_form li.last cite{ color: #fff; background: #789096; border: 0px;border-radius: 100px;
}
.contact_form li:has(input[type=checkbox]) .form__insert, .contact_form li:has(input[type=radio]) .form__insert{ display: unset;}
.contact_form li .form__label{max-width: 115px;  font-size: 16px;}

@media screen and (max-width:600px) {
    .contact_form li .form__label{ background: transparent;}
    .contact_content .information_right{ padding-left: 10px;}
}

@media screen and (max-width:450px) {
    .contact_form li{grid-template-columns:1fr; }
}



.car_page .information_left {
    display: block;
}
body.car_page .footer_info li p:before{
    position: initial;
    display: inline;
}
.contact_le_map a{background: #2a93d8; }




@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {}
.footer.with_shopping_mode { padding:30px 0 55px; }
#to_top { bottom:60px;}
}

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