@charset "utf-8";
/*由非室內裝修設計*/
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+Mono+TC:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*大圖-設計老爹 想直接等比例縮放 不想要背景輪播被裁圖*/
/*背景輪播*/
.bannerindex { position: relative; height: auto;}
.bannerindex .swiper-banner { position: relative;}
.bannerindex ~ #content_main { margin-top: 0;}


.me_tp_features{
  display: none;
}

/*縮圖輪播*/
.BannerHome03 .thumbs03 .swiper-slide img { height: 100%;}

/*版面*/
.album_class_page .main_part,.album_info_page .main_part{
    width: 100%;
    max-width: 78%;
    padding: 5% 0 8% 0;
}
.blog_page .main_part{
    width: 100%;
    max-width: 74%;
    padding: 5% 0 8% 0;
}
.blog_in_page  .main_part{
    width: 100%;
    max-width: 70%;
    padding: 5% 0 8% 0;
}
.contact_page .main_part {
    width: 100%;
    max-width: 100%;
    padding: 0 0 7% 0;
}

/*網站 LOADING 畫面*/
/*背景*/
body.pageIndex:before {
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    background:#F8F8F8;
    pointer-events: auto; /* 動畫播放期間阻擋下方點擊 */
    animation:mask-split 2.2s cubic-bezier(0.77,0,0.175,1) forwards;
}
@keyframes mask-split {
  0% {
    /* 初始狀態：完全填滿 */
    clip-path: polygon(
      0% 0%, 100% 0%, 100% 35%, 0% 35%,
      0% 35%, 100% 35%, 100% 65%, 0% 65%,
      0% 65%, 100% 65%, 100% 100%, 0% 100%
    );
     opacity:.3;
  }
  30% {
    /* 動畫前段：三段橫貫傾斜切角 */
    clip-path: polygon(
      0 0, 100% 5%, 100% 30%, 0 25%,       
      0 30%, 100% 35%, 100% 65%, 0 60%,     
      0 65%, 100% 70%, 100% 100%, 0 95%     
    );
    opacity: .3;
  }
  70% {
    /* 動畫後段-三段各自朝不同方向消失 */
    clip-path: polygon(
     0 0, 100% 0, 100% 0, 0 0,           /* 第一段移到上方 */

    0 0, 0 0, 0 100%, 0 100%,    /* 第二段移到左邊 */

     0 100%, 100% 100%, 100% 100%, 0 100%  /* 第三段移到下方 */
    );

    opacity:.3;
  }
 100% {
    opacity: 0;
    pointer-events: none; /* 動畫結束釋放點擊限制 */
    visibility: hidden;   /* 完全隱藏避免遮擋 */
  }
}

/*logo要設定寬高*/
body.pageIndex:after {
    content: '';
    pointer-events: none;
    display: block;
    width:  235px; 
    height: 100px; 
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index: 10000;
    background: url(https://pic03.eapple.com.tw/10design/top_logo.svg);
	  background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events: auto;
    animation: blink 2.4s cubic-bezier(0.77, 0, 0.175, 1) forwards; /* 時間與遮罩同步 */
}
@keyframes blink {
  0% {
    opacity: 0;
    animation-timing-function: step-end;
}
10% {
    opacity: 1;
    animation-timing-function: step-end;
}
25% {
    opacity: .4;
    animation-timing-function: step-end;
}
50% {
    opacity: 1;
    animation-timing-function: step-end;
}
75% {
    opacity: .8;
}
100% {
     opacity: 0;
     pointer-events: none;
    visibility: hidden;
}
}


/*抬頭*/
.navigation{
    grid-template-columns: 10% 1fr;
}
.header_area .main_header_area .container{
    width: 100%;
    max-width: 86%;
    transition: all 0.4s ease;
}

.header_area.sticky .main_header_area .container{
    width: 100%;
    max-width:90%;
    transition: all 0.4s ease;
}
.stellarnav ul{
      padding: .8% 0 0 0;
}
.pageIndex .header_area,.header_area{
  position: fixed;
  background: #ffffffe6;
  border-bottom: 1px solid #000000;
  transition: all 0.4s ease;
}
.pageIndex .header_area.sticky{
  position: fixed;
  background: #ffffffe6;
  transition: all 0.4s ease;
}
.header_area, .header_area.sticky{
  background: #ffffff;
  border-bottom: 1px solid #000000;
  transition: all 0.4s ease;
}
.header_area,.header_area.sticky{
  position: relative;
}
.stellarnav > ul > li > a b:nth-of-type(1){
  font-family: "Playfair Display", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #000;
}
.stellarnav > ul > li > a b:nth-of-type(2){
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #000;
}
.stellarnav > ul > li > a{
  margin: 0 30px;
}
.stellarnav li a{
  font-family: "Shippori Mincho B1", serif;
  color: #000;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 15px;
}

.path{display: none;}

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






.product_page .main_part { max-width:1500px;}

.product_page .show_content,
.product_info_page .show_content { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; width: 100%;}
ul.page { width: 100%;}

.ProdFilter_Item_Show { width: 100%;}
.Prods_Menulists { width: 100%; padding: 0;}
.Prods_Wrap { width: calc(100% - 270px);}

/* 篩選器-左手邊 / 產品分類-上面
.ProdFilter_ { order: 2;}
.Prods_Menulists { order: 1;}
.Prods_Wrap { order: 3;}
.ProdFilter_ { width: 250px; letter-spacing: 1px;}
.ProdFilter_ li { width: 100%;}
.ProdFilter_ li > a { background: #f3f3f3; border: none; border-bottom: 3px #ddd solid;}
.ProdFilter_ dl { position: static; width: 100%; display: block;}
*/

/* 產品分類-左手邊 / 篩選器-上面 */

.ProdFilter_ { order: 1; margin-bottom: 25px;}
.Prods_Menulists { order: 2;}
.Prods_Wrap { order: 3;}
.Prods_Menulists { width: 250px; letter-spacing: 1px;}
.Prods_Menulists ul {}
.Prods_Menulists > ul > li { width: 100%; flex-wrap: wrap;}
.Prods_Menulists ul ul { position: static; border: none;}
.Prods_Menulists ul li ul li {}
.Prods_Menulists li.has-sub.open > a { background: #f0f0f0;}

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




/*內頁BANNER 設定*/
.banner {
  background-image: none;
  background: #ffffff;
  padding: 6% 0 0 0;
}
.banner h5 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #000;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}
.banner.banDesign { background-color:#333;}


/*文章設定*/
h5.blog_le_t em{
  display: none;
}
h5.blog_le_t{
  text-align: center;
}
.fa-circle-chevron-right::before {
    content: "\f138";
    color: transparent;
}
.blog_list_ri{
  padding: 5px 2% 8% 2%;
  display: flex;
  flex-direction: column;
}
.blog_list_ri em{
      order: 1;
      margin-bottom: 4%;
}
.blog_list_ri h5{
  order: 2;
}
.blog_list_ri p{
   order: 3;
}
h5.blog_le_t span{
  font-family: "Shippori Mincho B1", serif;
  color: #000;
}
.accordion li .link a {
    color: #000;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 16px;
    text-align: left;
}
.blog_le .accordion > li:hover .link i, .blog_le .accordion > li.on_this_category .link i{
    font-size: 13px;
}
.blog_list_le,.news_related_list li > a figure{
    aspect-ratio: 4 / 2.6;
}
.blog_le .submenu{
    background: transparent;
}
.blog_le .submenu a{
    padding: 12px 12px 12px 12px;
}
.blog_le .submenu li::before{
  content: '➤';
  color: #b1b1b1;
  font-size: 10px;
  font-family: "Shippori Mincho B1", serif;

}
.blog_le .submenu li:hover::before{
  animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  color: #000;
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}

.blog_search input[type=search]{
    border-radius: 0;
    border-bottom: solid 1px #ccc; 
    border-right: none;
    border-left: none;
    border-top: none;
}
.blog_search input[type=submit] {
    background: url(https://pic03.eapple.com.tw/10design/magnifier.png) no-repeat center center;
    background-size: 80%;
    width: 28px;
    height: 28px;
}
.articel_mainPic img{
  display: none;
}

.blog_le .accordion{
    border-radius: 0;
    border-bottom: 1px #ccc solid;
    border-right: none;
    border-left: none;
}
.fa-chevron-down::before{
  color: #000;
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{
    background: transparent !important;
    text-align: left;
}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a {
    color: #000000 !important;
}
.blog_le .submenu li.on_this_category a, .submenu a:hover {
    background: transparent;
    color: #3f3f3f;
}
.blog_le .accordion > li:hover .link, .blog_le .accordion > li.on_this_category .link {
    color: #ffffff !important;
    border-bottom: 1px solid #ccc;
}
.blog_le .submenu li {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    left: 0;
}
.news_related_list li > a p{
    line-height: 1.5;
    margin-top: 5%;
}
.blog_le .submenu li{
  text-align: center;
}
.subbox_item{
  overflow: hidden;
}
.subbox_item a{
    grid-template-columns: 1fr;
}
.blog_subbox{
   grid-template-columns: repeat(2, 1fr);
}
.news_related_list{
  grid-template-columns: repeat(4, 1fr);
  max-width: 76%;
}
.subbox_item a:after{
  background: transparent;
  opacity: 1;
}
.blog_le {
    width: 18%;
}
.blog_ri {
    width: calc(100% - 19%);
    padding: 0 0 0 4%;
}
.blog_list_ri h5{
  -webkit-line-clamp: 1;
}
.blog_list_ri p{
  -webkit-line-clamp: 1;
}
.blog_box_edit * {
    line-height: 150%;
    letter-spacing: 1px;
}
h4.blog_category_title{
  color: #000;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
}
.news_related{
  background-color: #ffffff;
}
.lastPage {
    background: #ffffff;
    color: #000000;
}
.news_related h6 span:before{
  color: #000;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}
.blog_back{
   grid-gap: 0;
  max-width: 86%;
  margin: 0 auto;
}
.blog_back a, .blog_back a.article_btn_prev, .blog_back a.article_btn_next {
    font-size: 14px;
    font-weight: 300;
    background: transparent;
    color: #000000;
    border:none;
    padding: 12px;
}
.blog_back a{
  border: 1px solid #959595;
}
.blog_back a.article_btn_back {
    background: #ffffff;
    padding: 12px;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
}
.subbox_item a:hover .blog_list_le img {
    transform: scale(1.1);
}
.news_tags a{
    color: #535353;
    font-size: 14px;
}
.news_related_list li > a figure{
  display: none;
}
.news_related_list{
  grid-template-columns: repeat(1, 1fr);
}
.news_related_list li > a p{
  margin-top: 0;
}
.news_related_list li{
  border: 1px solid #eeeeee;
}
.news_related_list{
  max-width: 60%;
  grid-gap: 0;
}
.news_related_list li > a p{
  text-align: left;
  padding: 1%;
}
.news_related_list li:hover a{
  background-color: #e7e7e7;
}

/*相簿*/
.subalbum-menu h2{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
}
.other_subalbum li a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 1;
    z-index: 2;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.15em;
    transition: all 0.5s;
    font-family: "Shippori Mincho B1", serif;
}
.pic-list,.show-list{
  grid-template-columns: repeat(3, 1fr);
  animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.show_content{
  padding: 0;
}
.subalbum-menu{
  padding: 0; 
}
.overlay {
    background: #00000036;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    z-index: 1;
    transition: all 0.6s ease;
} 
.show-list .item:hover .overlay {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.show-list li a:hover .show_pic img {
    transform: scale(1.1);
    filter: saturate(1);
    transition: all 0.5s;
}
.show-list .show_pic,.pic-list .show_pic{
    aspect-ratio: 4 / 2.6;
}


/*聯絡我們*/
.contact_editbox{
  padding: 0;
}
.blank_letter {
    font-family: "Shippori Mincho B1", serif;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
    margin: 6% 0 10% 0;
    display: flex;
    flex-direction: column;
}
.contact_le_map a{
    background: #000000;
}
.animated-arrow{
    background: #000000;
    border: 1px #000000 solid;
}
.last .animated-arrow.otherSty{
    color: #000000;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 15px;
}
.last .animated-arrow i.fa-solid.fa-arrow-right {
    margin: 0;
}
.fa-arrow-right::before{
  display: none;
}
.list_before.info li {
    padding-left: 14%;
}
.contact_content .information_left{
  display: none;
}
.contact_content .information_right {
    color: #000000;
    border: 1px solid #000000;
    width: 100%;
    padding-left: 0;
    padding: 5% 8% 10% 8%;
    background-color: #ffffff;
}
.contact_form li .form__label{
    color: #000;
    font-size: 16px;
}
.contact_form li{
    grid-template-columns: 14% 1fr;
}
.contact_content{
    max-width: 64%;
    width: 100%;
    padding: 0;
}
.contact_form{
  grid-gap: 15px;
  font-size: 16px;
}
.contact_form li.last * b{
  font-weight: 400;
}
.contact_form li.last{
    margin-top: 12%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.contact_form li input.noborder,.contact_form li textarea.noborder{
    background-color: #f3f3f3;
    border: none;
}
.noborder{
  padding: 6px;
}
.contact_form li .form__label{
  display: flex;
  justify-content: flex-start;
}
.red{
  order: 2;
}
.contact_form li .form__label{
  width: 100%;
  max-width: 100%;
}


@media (max-width:1600px) { 

/*文章*/ 
.blog_page .main_part {
    width: 100%;
    max-width: 86%;
}
.blog_in_page .main_part {
    width: 100%;
    max-width: 80%;
}
.news_related_list{
  width: 100%;
  max-width: 72%;
}

/*聯絡我們*/
.contact_form li {
    grid-template-columns: 20% 1fr;
}


}
@media (max-width:1400px) { 
.BannerHome02 { height: auto;}
.BannerHome03 .swiperBan03 .swiper-slide img { height: 100%;}
/*抬頭*/
.header_area .main_header_area .container{
  width: 100%;
  max-width: 90%;
}
.stellarnav > ul > li > a {
    margin: 0 16px;
}
.header_area{
  background: #ffffff;
}
.banner{
  min-height: 200px;
}

}
@media (max-width:1280px) { 
/*文章*/
.blog_le {
    width: 22%;
}
.blog_ri{
    width: calc(100% - 23%);
}
.news_tags{
  margin-bottom: 4%;
}

/*相簿*/
.album_class_page .main_part, .album_info_page .main_part{
    width: 100%;
    max-width: 86%;
}


}
@media (max-width:1024px) { 
.BannerHome02 { height: auto;}
.BannerHome03 .swiperBan03 .swiper-slide img { height: 100%;}
.product_main { display: block; width: 100%;}    
.sidebarBtn { display: block; width: 100%;}
/*抬頭*/
.pageIndex .header_area,.pageIndex .header_area.sticky{
  position: relative;
}
.stellarnav > ul > li > a {
  margin: 0 10px;
}



}
@media screen and (max-width: 980px) {
/*文章*/
.blog_le {
    width: 100%;
}

/*相簿*/
.pic-list, .show-list {
    grid-template-columns: repeat(2, 1fr);
}

/*聯絡我們*/
.contact_content{
  max-width: 68%;
  width: 100%;
}
.contact_form li {
    grid-template-columns: 25% 1fr;
}
.blog_ri {
    width: 100%;
    padding: 0 2%;
}

}
@media (max-width:768px) { 
.BannerHome02 { height: auto;}
.BannerHome03 .swiperBan03 .swiper-slide img { height: 100%;}
.bannerindex { padding:  0 0;}
/* 篩選器-左手邊 / 產品分類-上面
.Prods_Wrap { width: 100%;}
.ProdFilter_ { width: 100%;}
.ProdFilter_Item_Show { width: calc(100% - 110px);}
.ProdFilter_ { order: 1;}
.Prods_Menulists { order: 2;}
.ProdFilter_ li > a span { color: #333;}
*/
/*#bottom*/
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {}
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
.stellarnav > ul > li > a b:nth-of-type(2){
  font-size: 15px;
}
.stellarnav.mobile li a{
  border-bottom: none;
}
.stellarnav li li{
  border: none;
}
.stellarnav.mobile li.open{
  padding: 8px;
}

.fa-house::before,.fa-square-facebook:before{
  color: #000;
}
#bottom_menu li:nth-of-type(2),#bottom_menu li:nth-of-type(3){
  display: none;
}
.Prods_Wrap { width: 100%; margin-top: 20px;}
.ProdFilter_ { width: 100%;}
.Prods_Menulists { opacity: 0; display: none;}
.header_area .main_header_area .container{
  width: 100%;
  max-width: 100%;
}

/*手機板大圖*/
body.pageIndex:before{display: none;}
body.pageIndex:after{display: none;}
.pageIndex .bannerindex .swiper-banner .swiper-slide img{ display:none; }
.pageIndex .swiper-slide {width: 100%;height: 0;min-height: 480px; padding-bottom: calc(100% / 3 * 4);}
.pageIndex  .swiper-slide:nth-child(1) { background-image:url(https://pic03.eapple.com.tw/10design/phonebig_01.png) ; background-size:cover;   background-position: center;}
.pageIndex .swiper-slide:nth-child(2) { background-image:url(https://pic03.eapple.com.tw/10design/phonebig_02.png) ; background-size:cover;   background-position: center;}

/*文章*/
.blog_le {
  width: 100%;
}
.blog_ri {
  padding: 0;
  width: 100%;
}
.blog_in_page .main_part {
  width: 100%;
  max-width: 88%;
}
.blog_ri {
    padding:0 0 0 4%;
}
a.news_menu_toggle i{
  font-size: 14px;
}
.blog_ri {
  padding: 0;
}
.blog_subbox {
    grid-template-columns: repeat(2, 1fr);
}
.fa-chevron-down::before{
  font-size: 14px;
}

/*聯絡我們*/
.contact_form li .form__label{
  background: transparent;
  padding: 5px 0;
}
.contact_form li {
    grid-template-columns: 1fr;
    grid-gap: 0;
}
.contact_content {
    max-width: 88%;
    width: 100%;
}
.last .animated-arrow {
    margin: 0;
    width: 100%;
}




}

@media screen and (max-width: 600px) { 
/*相簿*/
.pic-list, .show-list {
    grid-template-columns: repeat(1, 1fr);
}

/*文章*/
.news_related_list {
  width: 100%;
  max-width: 90%;
}
.news_tags {
  margin-bottom: 12%;
  justify-content: center;
}
.blog_subbox {
    grid-template-columns: repeat(1, 1fr);
}

}