@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}
*/

.main_header_area{
  padding: 0 5%;
}

.stellarnav li.active>a {
  color: var(--MainColor);
  font-weight: 500;
}

.stellarnav li>a {
  transition: linear .1s;
}

.nav-brand img{
  width: 95px;
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*反白顏色*/

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 頁面的麵包屑 首頁/頁面名稱/ */
.path {
  display: none;
}

/*首頁+聯絡按鈕*/
.swiper-pagination {
  left: 50%;
  margin-left: 0;
  transform: translate(-50%, 0);
}

.main_part.products_part,
.news_part {
  display: none;
}

.pageIndex .main_part {
  border-top: none;
}

/*預設解除背景輪播*/
#content_main {
  margin: 0;
}

.bannerindex {
  position: static;
  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;
  }
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*選單設定*/

/*電腦選單*********************************/

/*手機漢堡選單設定*/



/**/

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*LOGO設定*/
/* .nav-brand img {
    margin-top: ;
    max-width: 200px;
}
.footer_logo img {
    width: 200px;
    margin-top: ;
} */

@media screen and (max-width: 768px) {
  .nav-brand-m {
    display: block;
    text-align: left;
    padding: 15px 10px;
  }

  .nav-brand-m img {
    max-width: 200px;
    width: 100%;
  }
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*Footer*/
.footer {
  background: var(--MainColor);
  color: #FFFFFF;
}

/* .footer_info li:first-child .footer_menu a:nth-child(1),
.footer_info li:first-child .footer_menu a:nth-child(3),
.footer_info li:first-child .footer_menu a:nth-child(5),
.footer_info li:first-child .footer_menu a:nth-child(9)~a {
  display: none;
} */

/* footer Logo */
.footer_logo {
  display: none;
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*購物車設定*/
.car_page .information_left {display: none;}

/*首頁購物車設定*/
.products-box {
  width: 100%;
  max-width: 1200px;
  margin: 100px auto;
}

/*金額設定*/

/* .product_page .price,
.pageIndex .price {
  display: flex;
  justify-content: center;
}

.product_page .price b,
.pageIndex .price b {
  width: 100%;
  text-align: center;
  font-weight: normal;
  line-height: 140%;
}

.products-list .name {
  color: #3c4563;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  height: 60px;
}

.products-list .price * {
  margin: 0 5px 10px;
}

.products-list .price b {
  color: #506bb2;
} */

@media screen and (max-width: 600px) {
  .products-box {
    margin: 50px auto;
  }

  .products-list .name {
    font-size: 16px;
  }

  .product_page .price,
  .pageIndex .price {
    flex-direction: column;
    line-height: 0;
    margin-bottom: 10px;
  }

  .product_page .price b,
  .pageIndex .price b {
    margin: 0;
  }

  .products-list .price b:not(b.ori_price, b.sp_price) {
    padding: 11px 0;
  }

  .products-list .item a {
    padding: 0 0 10px;
  }
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/

.share_page .edit {
  text-align: justify;
  line-height: 180%;
}

.subbox_item a:before,
.subbox_item a:after {
  transition: 0.3s;
}

.blog_le .accordion>li {
  transition: all 0.3s;
}

.blog_box_edit {
  line-height: 180%;
  text-align: justify;
}

h4.blog_category_title {
  text-align: justify;
}

.link a {
  width: 100%;
  display: block;
  padding: 15px 10px;
}

.accordion li .link {
  padding: 0;
}

/*文章分享變1排3個*/
.blog_page .main_part {
  max-width: 1400px;
}

.blog_list_le,
.blog_list_ri {
  width: 100%;
}

.blog_subbox {}

.subbox_item {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 600px) {}

/**/

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*主分類頁面*/
.album_page .main_part,
.album_class_page .main_part,
.album_info_page .main_part {
  max-width: 1400px;
}

/* .show-list .item:hover .show_name {
  color: #506bb2;
} */

.show-list .show_pic {
  padding-bottom: 80%;
}

.show-list .show_pic img {
  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%);
}

/*次分類頁面*/
/*
.other_album_choice li {
  background: #506bb2;
}
*/

.other_subalbum li p {
  line-height: 220%;
}

.other_subalbum li a div {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 80%;
}

.other_subalbum li a img {
  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%);
}

/* 
.other_subalbum li a div:after {
  content: "";
  position: absolute;
  background: rgb(0 0 0 / 30%);
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  top: 50%;
  left: 50%;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.other_subalbum li a:hover div:after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
} */

/*照片頁*/
.pic-list {
  display: block;
  column-count: 3;
  column-gap: var(--m20);
}

.pic-list .item {
  margin-bottom: var(--m20);
}

.pic-list .show_pic {
  padding-bottom: 0;
  height: auto;
}

.pic-list .show_pic img {
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
}

@media screen and (max-width: 768px) {
  .pic-list {
    column-count: 2;
  }

  .pic-list .item {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .pic-list .item{
    margin: 0;
    margin-bottom: var(--m20);
  }
}

@media screen and (max-width: 480px) {

  /*照片頁*/
  .pic-list {
    column-count: 1;
  }
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*其他分頁*/
/**/
.list_before.info li:last-child {
  padding-left: 0;
  margin-top: 15px;
}

/**/
.other_select_page .promotion_title,
.other_select_page .other_promotion,
.other_select_page .page {
  display: none;
}

/*購物車開金流*/
.box_search {
  margin-left: 40px;
}

@media screen and (max-width: 768px) {
  /* 開啟手機板下方按鈕所需設定 */

  /*手機選單漸變效果處*********************************/
  /*選單字體顏色
.pageIndex .header_area .nav-menu>li>a {   color:#444 ;}
/*選單logo變色*/
  .pageIndex .header_area .nav-brand img {
    filter: none;
  }

  /*選單下拉箭頭顏色
.pageIndex .header_area .submenu-indicator-chevron {    border-color: transparent #444 #444 transparent;}
/**/

}

@media screen and (max-width: 600px) {

  .subbox_item a:before,
  .subbox_item a:after {
    content: none;
  }

  .products-list .item {}

  /*手機板大圖*/
  /*
.swiper-slide img { display:none; }
.swiper-slide {    width: 100%;    height: 0;    padding-bottom: calc(100% / 3 * 4);}
.swiper-slide:nth-child(1) { background-image:url(https://pic03.eapple.com.tw/.../Banner-03.png) ; background-size:cover;   background-position: center;}
.swiper-slide:nth-child(2) { background-image:url(https://pic03.eapple.com.tw/.../Banner-04.png) ; background-size:cover;   background-position: center;}
*/
  .banner h5 {
    font-size: 24px;
  }

  .banner {
    min-height: 150px;
  }
}

/*banner*/
.banner,
.banner1{
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 50px 5% 30px;
  height: unset;
  max-height: unset;
  background: unset;
}
.banner h5,
.banner1 h5{
  display: none;
}
.banner::after,
.banner1::after{
  content: '';
  width: 100%;
  min-height:230px;
  background: url(../images/bn_bg.png);
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: top center;
  background-size: cover; 
  background-repeat: repeat-x;
  z-index: -1;
}
.banner::before,
.banner1::before{
  content: '';
  display: block;
  max-width: 800px;
  width: 100%;
  height: 350px;
  margin: auto;
  background-position: center;
  background-size: cover;
}
.work_ban::before{
  background-image: url(../images/bn-workshow.png);
}
.store_ban::before{
  background-image: url(../images/bn-store.png);
}
.news_ban::before{
  background-image: url(../images/bn-news.png);
}
.member_ban::before{
  background-image: url(../images/bn-member.png);
}
.dcinfo_ban::before{
  background-image: url(../images/bn-e-dcinfo.png);
}
.env_ban::before{
  background-image: url(../images/bn-env.png);
}
.bdinfo_ban::before{
  background-image: url(../images/bn-e-bdinfo.png);
}
.aprc_ban::before{
  background-image: url(../images/bn-e-aprc.png);
}
.room_ban::before{
  background-image: url(../images/bn-e-room.png);
}
.contact_ban::before{
  background-image: url(../images/bn-contact.png);
}
.privacy_ban::before{
  background-image: url(../images/bn-e-privacy.png);
}
.disclaimer_ban::before{
  background-image: url(../images/bn-e-disclaimer.png);
}


/*footer header*/
.top_icons a img,
.right_member_in img{
  filter: invert(51%) sepia(42%) saturate(137%) hue-rotate(71deg) brightness(94%) contrast(88%);
  -webkit-filter: invert(51%) sepia(42%) saturate(137%) hue-rotate(71deg) brightness(94%) contrast(88%);
}
.header_area.sticky .main_header_area {
  background: rgba(255, 255, 255, .95); 
}
.has-sub ul > li{
  transition: all .4s;
}
.has-sub ul > li:hover{
  background: var(--WebColor03);
  transition: all .4s;
}
.has-sub ul li:hover a{
  color: #fff;
  transition: all .4s;
} 
.has-sub ul li.drop-left > a{
  color: #777;
}
.has-sub ul li.drop-left:hover > a{
  color: #fff;
  transition: all .4s;
}
.tp_btn_cart{
  display: none;
  opacity: 0;
  width: 0px;
  overflow: hidden;
}
.stellarnav > ul > li:nth-of-type(1){
  display: none;
}
.footer_info h6{
  font-size: var(--fz20);
  color: #fff;
  line-height: 150%;
  letter-spacing: 0.1em;
  font-family: 'Noto Serif TC';
  max-width: fit-content;
  border-bottom: 1px solid #fff;
  margin: 0 auto 10px;
  font-weight: 600;
  padding: 0 0 5px;
}
.box_link>*{width: unset;}
.box_link>p{
  font-size: var(--fz16);
  color: #E9F2EC;
  line-height: 200%;
  letter-spacing: 0.1em;
}
.box_link>h3{
  font-size: var(--fz16);
  color: #E9F2EC;
  letter-spacing: 0.1em;
  max-width: fit-content;
  margin: 5px auto 15px;
  border-bottom: 1px solid #fff;
  padding: 0 0 5px;
}
.box_link>h4{
  font-size: var(--fz18);
  color: var(--MainColor);
  background-color: var(--WebColor04);
  padding:5px;
  border-radius: 8px;
  line-height: 170%;
  letter-spacing: 0.05em;
  font-weight: 900;
  max-width: 250px;
  margin: auto;
}
.box_link>h4 s{
  display: inline-block;
  font-size: var(--fz18);
  color: var(--MainColor);
  background-color: var(--WebColor04);
  border-radius: 8px;
  line-height: 170%;
  letter-spacing: 0.05em;
}
.footer_menu a{
  color: #E9F2EC;
}
.footer_menu a:hover{
  color: #fff;
}
.footer_info li:nth-of-type(1) .footer_menu > a:nth-of-type(1){
  display: none;
}
.copy{
  max-width: 1300px;
  margin: auto;
  border-top: 1px solid #fff;
  padding: 10px 0;
}
.page strong{
  border: 1px dotted #BFB19B;
  color: var(--MainColor);
  font-size: 15px;
  font-weight: 200;
}
.page strong, 
.page a{
    border: 1px dotted var(--MainColor);
    font-weight: 200;
}
.page strong,
.page a:hover{
    background: var(--MainColor);
    color: #fff;
}

/*workshow*/
.show-list{
  gap: var(--m30);
}
.subalbum-menu h2{
  font-size: var(--fz28);
  color: #b7796c;
  filter: invert(53%) sepia(12%) saturate(436%) hue-rotate(71deg) brightness(96%) contrast(90%);
  -webkit-filter: invert(53%) sepia(12%) saturate(436%) hue-rotate(71deg) brightness(96%) contrast(90%);
}
.other_album{
  padding:0 0 20px;
  margin: 50px auto 0;
}
.album_fixed_title em{
    font-size: var(--fz20);
    color: #666;
    margin-top: -15px;
    padding-right: 30px;
    display: inline-block;
    position: relative;
    background: #fff;
    font-style: normal;
}
.fa-right-from-bracket::before{
  content: unset;
}
.other_album_choice li b{
  margin-right: 20px;
}
.other_album_choice li a img{
  transition: all .3s;
}
.other_album_choice li a:hover img {
  transform: translateX(5px);
  transition: all .3s;
}


/*product*/
.ask_btm_line{
  display: block;
  text-align: center;
  padding: 10px;
  background-color: var(--WebColor04);
  color: #fff;
  font-weight: 600;
  font-size: var(--fz18);
  letter-spacing: 0.1em;
  border-radius: 8px;
  max-width: 180px;
  transition: all .4s;
}
.ask_btm_line:hover{
  background-color: var(--MainColor);
  transition: all .4s;
}
.product_pic #bx-pager{
  padding: 20px 0;
}
.prod_data h3{
  border-bottom: 1px dashed var(--WebColor04);
  margin-bottom: var(--m30);
}
.prod_data h3 span{
  color: #fff;
  background-color: var(--MainColor);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.sidebarBtn{
  width: calc(100% - 675px);
}
.sidebarBtn .price2{
  color: #B7796C;
  font-size: var(--fz20);
}
.prod_related{
  padding: var(--m50) var(--m30);
  background-color: #F8F5E9;
}
.prod_related h6 span:before{
  color: var(--WebColor02);
  font-size: var(--fz24);
}
.related_list li a p{
  color: var(--WebColor02);
  font-size: var(--fz18);
  padding: 10px 0 0;
  font-family: 'Noto Serif TC';
  font-weight: bold;
}
.lastPage{
  border-radius: 500px;
  font-family: 'Noto Serif TC';
  font-weight: bold;
}
.lastPage:hover{
  background-color: var(--WebColor04);
}
.product_info li .txt_box{
  color: #242413;
  font-weight: bold;
}
.toShare{
  font-size: var(--fz16);
  color: #666666;
  letter-spacing: 0.1em;
}
.toShare b{
  font-weight: '微軟正黑體';
}
.radio-inline__input:checked + .radio-inline__label{
    color: var(--MainColor);
    border: 1px solid var(--MainColor);
}

/*news*/
h5.blog_le_t{
  font-weight: normal;
  color: #333333;
}
h4.blog_category_title{
  border-bottom: 1px solid var(--WebColor05);
}
.accordion li .link{
  font-family: '微軟正黑體';
}
.subbox_item a{
    display: block;
    position: relative;
    padding: 7px;
    border: 1px dashed var(--WebColor05);
    border-radius: 10px;
    overflow: hidden;
}
.blog_list_le{
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 20px;
}
.blog_list_ri *{
  font-family: '微軟正黑體';
}
.blog_list_ri p{
  margin: 20px 0 0;
  font-size: var(--fz16);
}
.subbox_item a:hover{
  background-color: var(--WebColor06);
}
.blog_list_ri h5{
  font-size: var(--fz18);
}
.blog_list_ri em{
  font-size: 13px;
}
h4.blog_category_title{
  font-family: '微軟正黑體';
  font-size: var(--fz28);
  color: #333333;
  letter-spacing: 0.05em;
}
.blog_box_edit{
  font-family: '微軟正黑體';
}
.blog_back{ 
  max-width: 515px;
  margin: 50px auto 0;
}
.blog_back *{
  font-family: '微軟正黑體';
}
.blog_back a.article_btn_prev,
.blog_back a.article_btn_next{
  background: var(--WebColor04);
}

/*member*/
.member_title h2{
  font-size: var(--fz24);
  color: #242413;
}
.login_mem_other_link a{
  color: #B7796C;
}
.member_order{
  max-width: 800px;
  margin: auto;
}
.member_order a{
  color: #fff;
  background-color: var(--WebColor04);
  font-size: var(--fz18);
  border: unset;
}
.member_order a:hover{
  background-color: var(--MainColor);
}
.bbtn01,
.mem_btn01{
  background-color: var(--WebColor04);
}
.order_history tr:nth-of-type(1) td{
  background-color: #F0F0F0;
}
.order_history tr td:nth-child(3) a{
  background-color: var(--WebColor04);
}
.order_history tr td:nth-child(3) a{
  background-color: var(--WebColor04);
}

@media (max-width:1024px) {
  /*product*/
  .product_pic{max-width: 450px;}
  .sidebarBtn{width: calc(100% - 500px);}
}
@media (max-width: 968px) {
  /*banner*/
  .banner::after,
  .banner1::after{min-height: 180px;}
  .banner::before,
  .banner1::before{
    max-width: 600px;
    height: 260px;
  }

  /*product*/
  .product_main{width: 100%;}
  .product_pic{max-width: unset;padding-left: unset;}
  .sidebarBtn{width: 100%;}
}
@media (max-width: 768px) {
    /*banner*/
    .banner::after,
    .banner1::after{min-height: 110px;}
    .banner::before,
    .banner1::before{
      max-width: 400px;
      height: 175px;
    }

    #bottom_menu li:nth-of-type(3){display: none !important;}
    #bottom_menu li:first-child:nth-last-child(3), 
    #bottom_menu li:first-child:nth-last-child(3) ~ li{width: 50%;}

  .box_link{padding:15px 0 0;}
  .show-list{grid-template-columns: 1fr 1fr;}

  /*product*/
  .product_info li span{margin-left: unset;}
  .product_info li{padding-left: unset;}
  .mobile_product_name{display: none;}
}

@media (max-width: 525px) {
    .footer_info ul li .footer_menu {
        max-width: 100%;
    }
    .footer_info ul li .footer_menu a{
      width: unset;
    }
}

@media (max-width: 425px) {
      /*banner*/
    .banner::after,
    .banner1::after{min-height: 100px;}
    .banner::before,
    .banner1::before{
      max-width: 300px;
      height: 130px;
    }
  .show-list{
    grid-template-columns: 1fr;
  }
  .banner, .banner1{
    padding: 50px 5% 0;
  }
}
