@charset "utf-8";

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

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

*/


body{font-family:"Kanit", sans-serif,"Noto Sans TC", serif;}
.stellarnav > ul > li:nth-of-type(5) ul li:nth-of-type(1){display: none;}/*隱藏相簿全部*/

  /* 捲軸寬度及高度 */
  &::-webkit-scrollbar {
      background: #ffffff;
      width: 5px;
    }
    
  /* 捲軸兩側頂端的按鈕 */
  &::-webkit-scrollbar-button {
      display: none;
    }
  /* 滑桿顏色 */
  &::-webkit-scrollbar-thumb {
        background-color: #C2D402;
        border-radius: 2px;
        transition: all 0.3s;
    }
&::-webkit-scrollbar-thumb:hover {
        background-color: #C2D402;
        transition: all 0.3s;
    }
  /* 軌道背景底色 */
  &::-webkit-scrollbar-track {  
        background-color: #ffffff;
    }

#content:not(.other_select_page #content){
    min-height: 80vh;
    background: url(https://pic03.eapple.com.tw/mascot/bg02.jpg);
    background-size: cover; 
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

/*下拉分頁*/
.path p, .path p a{display: none;}
.other_promotion{display: none;}
.other_select_page ul.page {display: none;}
.promotion_title{display: none;}

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


/*上方選單解除滑動固定
.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}
*/


/*大圖特效*/


#content_main {  margin: 0;}
.bannerindex { position: static; height: auto;}
.swiper-banner { position: static; margin: 0; height: auto;}
.swiper-slide { padding: 0px !important;}

.swiper-slide img { height: auto;}
.swiper-pagination { display: none;}
.swiper-slide { position: relative;}
.bannerindex .swiper-slide.swiper-slide-active:before {content: ""; position: absolute;  z-index: 999; pointer-events: none;}
.bannerindex .swiper-slide.swiper-slide-active:after {content: ""; position: absolute;  z-index: 999; pointer-events: none;}
@media screen and (max-width: 768px) {
    .bannerindex { padding:0; margin:0;}
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


.main_header_area:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 3%;
    left: 0%;
    background: #b1bb51;
    transition: all 2s;
    bottom: -2px;
}
.header_area.sticky .main_header_area:after {  width: 100%;}

/*logo*/

.nav-brand img {
    max-width: 100%;
    width: 150px;
    margin-bottom: 4px;
}

/*header*/
.me_tp_features {
display: none;
}

.header_area {
    background: #ffffff;
    padding: 25px 10px 15px;
    transition: all .5s;
}

.header_area.sticky {
    background: #ffffffba;
    backdrop-filter: saturate(100%) blur(50px);
    transition: all .5s;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stellarnav{ width: auto;}

/*第一層*/
.stellarnav > ul > li.has-sub > a {padding-right:0px}
.stellarnav li.has-sub > a:after{display: none;}

.stellarnav > ul > li > a {
    margin: 0 15px;
    letter-spacing: 1px;
    font-size: 15px;
    color: #747474;
    padding: 0px 0px 45px;
}

.stellarnav > ul > li > a:hover{color: #818a2a;}


.stellarnav > ul > li:hover > a,
.stellarnav > ul > li.active> a,
.stellarnav > ul > li.focus > a {color: #818a2a; }
.stellarnav > ul:hover > li > a {opacity: 0.2; }
.stellarnav > ul > li:hover > a {opacity: 1;  }


.stellarnav > ul > li {
    position: relative;
    transition: transform 0.3s ease-in-out;
}



.stellarnav > ul > li:hover:after {
    content: '';
    position: absolute;
    height: 68px;
    width: 68px;
    background: #b1bb51;
    transform: translateX(-50%);
    left: 50%;
    bottom: 54px;
    transition: 0.3s;
    border-radius: 500px;
}

.stellarnav > ul > li:after {
    content: '';
    position: absolute;
    height: 68px;
    width: 1px;
    background: #5f5f5f;
    transform: translateX(-50%);
    left: 50%;
    bottom: 81px;
    transition: 0.3s;
}


/*第二層*/
.stellarnav li li {    border: none;}
.stellarnav li li > a, .stellarnav li li.has-sub > a {
    padding: 8px 9px;
    transition: all 0.3s;
    color: #444;
    font-size: 15px;
}
.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a {
    background: #b1bb51;
    color: #fff;
}







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

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


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

/*購物車側選單*/


.box_search {
  width: 218px;
  margin-bottom: 11px;
}

.box_search input[type=text]:focus {
    color: #444;
}

.box_search input[type=text] {
    background: url(../images/search-icon.png) no-repeat 9px center #fff;
    border: solid 1px #f19b02;
    padding: 13px 55px 10px 32px;
    border-radius: 0px;
}

.shop_search_btn {
    background: #f19b02;
    border-radius: 0px;
}

.product-layer-two li a {
    padding: 10px 16px;
    color: #fff;
    background: #b1bb51;
    position: relative;
  }
  
  
  .product-layer-two li.active a {
    border: none;
    font-weight: 400;
  }
  
  .product-layer-two li i {
    top: 4px;
    color: #fff;
    transition: 0.3s;
  }
  
  .product-layer-two li i:hover {
    filter: drop-shadow(2px 2px 3px #4f5a47);
    transform: rotate(45deg);
    color: #FFF;
    transition: 0.3s;
  }
  
  .product-layer-two li.active li a {
    font-weight: 400;
    letter-spacing: 2px;
    color: #444;
    background: transparent;
  }
  
  .product-layer-two li li a {
    padding: 5px 10px;
    color: #444;
    transition: all 0.4s;
  }
  
  .product-layer-two > li 
  { width:100%; max-width:100%; padding:0; text-align:left; padding-bottom: 5px;}
  
  
  
  /*商品外觀*/
  
  .products-list .price b {
    color: #b1bb51;
    letter-spacing: 1px;
    font-weight: 400;
  }
  .products-list .name {
    font-size: 16px;
    color: #444;
    letter-spacing: 1px;
    font-weight: 400;
    border-bottom: 1pt solid #cad3c3;
    height: 60px;
  
  }
  
  .products-list .more {
    display: none;
  }
  
  .products-list .item a {
    padding-bottom: 0px;
    position: relative;
  
  }

  .products-list .pic:before {
    content: "READ MORE";
    letter-spacing: 2px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    line-height: 161%;
    background: #b1bb51;
    opacity: 1;
    transition: all 0.3s;
    font-size: 14px;
    width: 100%;
    color: #FAF7EF;
  }
  
  .products-list .pic img {
    border-radius: 5px;
    transition: all 0.3s;
    border: 1px solid #ffffff00;
  }
  
  .products-list a:hover .pic:before {
    opacity: 0;
  }
  
  .products-list a:hover .pic img {
    filter: none;
    transition: all 0.3s;
    border-radius: 50%;
    border: 3px solid #b1bb51;
}

  /*商品內文*/

  .pd_tabTitle li.activeTab::after {
    height: 3px;
    background: #b1bb51;
}
.pd_tabTitle li {
    border-bottom: 1px solid #b1bb51;
}

.pd_tabTitle li::after {
    background: #b1bb51;
}

.pd_tabTitle li.activeTab a {
    color: #b1bb51;
    font-weight: 700;
}

.edit {
    color: #444;
    letter-spacing: 0.04em;
}

  
  /*商品內頁側邊單*/
  .sidebarBtn {
    border: none;
  }
  .product_info li .txt_box {
    color: #b1bb51;
  }
  .sidebarBtn .price span {
    color: #4c5d3f;
    font-weight: 500;
    background: #FAF7EF;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    margin: 8px;
  }
  
  .sidebarBtn h2 {
    color: #373737;
    letter-spacing: 1px;
    font-size: 20px;
    font-weight: 500;
  }
  
  .sidebarBtn .price {
    color: #444;
      font-size: 18px;
      font-weight: 400;
    border-bottom: 1px solid #adb8a4;
  }
  
  .radio-inline__input:checked + .radio-inline__label {
    background: #b1bb51;
    color: #FAF7EF;
  }
  
  .inquiry_a3 {
    background: #b1bb51;
  }
  
  .inquiry_a3:hover {
    letter-spacing: 2px;
    background: #506039;
  }


  .inquiry_a1 {
    background: #b1bb51;
}

.inquiry_a2 {
    background: #f19b02;
}

.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover {
    background: #fdd100;
}
  
  /*商品推薦*/
  
  
  .prod_related {
    background: #f7f7f7;
    padding: 0px 0px 25px;
}
  
  .related_list li a {
    background: transparent;
    height: 100%;
    transition: all 0.5s;
  }
  
  .related_list li a img {
    transition: all 0.5s;
  }

  .related_list li a:hover img {
    transform: translate(0%, 0%) scale(1.1);
    transition: all 0.5s;
  }
  
  
  .prod_related h6 span:before {
    content: 'RECOMMEND';
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 3px;
}
  
  .prod_related h6 {
    max-width: 100%;
    margin: 0px auto 95px;
    background: #f19b02;
    text-align: center;
    padding: 3px 0px;
  }
  
  .related_list li a p {
    background: #a9b34d;
    padding: 10px;
    color: #fff;
    letter-spacing: 1px;
}
  
  .lastPage {
    color: #fff;
    background: #b1bb51;
    border-radius: 0px;
    padding: 10px 20px;
    margin: 55px auto 40px;
    text-align: center;
    transition: all 0.3s;
  }
  
  .lastPage:hover{
   background:#939c3e;
   transition: all 0.3s;
  
  }
  
  /* 商品下拉超過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個--結束 */
  
  /* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
  
  
  /*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 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: 13px 0px; /*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:hover > a { background:#fff; color:#b1bb51;}
  .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: 23px;}
  .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:#b1bb51;}
  
  .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;}
 

  
  @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(200px, 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;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
  }
.mobile_product_name {display: none}
  .related_list {padding: 0 10px;}
  .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;}
  
  /*FOOTER*/
  .footer_info ul {
    padding-left: 10px;
  }
  .footer.with_shopping_mode { padding:30px 0 70px; }
  .footer_info {    justify-content: center;}
  .footer_logo {    text-align: center;}
  
  }
  @media screen and (max-width: 600px) {
  }
  
  @media screen and (max-width: 375px) {
    /*購物車/＝＝＝＝＝*/
    .footer_menu {max-width: 300px;}}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設解除背景輪播*/
#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 {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 0;
  position: relative;
  padding: 0px;
  width: 100% !important;
  padding-bottom: calc(100% / 1 * 0.32);
  max-width: 100%;
  background: transparent;
  margin-bottom: 100px;
}

.car_page .banner h5 {display: none;}

.banner h5 {
  position: relative;
  width: 16vw;
  height: 16vw;
  background: #C2D402;
  top: 27vw;
  left: -24vw;
  border-radius: 30px;
  color:transparent;
}


.banner h5:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 400;
    white-space: break-spaces;
    width: auto;
    height: auto;
    font-size: 40px;
    transform: translate(-50%, -50%);
    color: #ffffff;
    line-height: 120%;
}



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

.banner h5 {
    width: 18vw;
    height: 18vw;
    top: 30vw;
    left: -25vw;
}
.banner h5:before {
    left: 50%;
    font-size: 34px;
}


}


@media screen and (max-width: 1200px) {
.banner h5 {
    width: 22vw;
    height: 22vw
}
}

@media screen and (max-width: 900px) {
.banner h5 {
  width: 25vw;
  height: 25vw;
  top: 33vw;
}
.banner h5:before {
  font-size: 27px;
}

}


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

.banner h5 {
  width: 34vw;
  height: 29vw;
  top: 37vw;
}

}


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

.banner h5 {
  width: 40vw;
  height: 34vw;
  top: 41vw;
  left: -23vw;
}

.banner h5:before {
    font-size: 22px;
}

}

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

.banner h5 {
  width: 43vw;
  height: 40vw;
  top: 43vw;
  left: -23vw;
}


}

/*團隊介紹*/
.article_a .banner h5:before {
  content: 'OUR TEAM';
}


/*作品總覽*/
.product_page .banner h5:before,.product_info_page .banner h5:before  {
  content: 'PROJECT SHOWCASE';
}

/*最新活動*/
.article_b .banner h5:before {
  content: 'LATEST EVENTS';
}

/*得獎*/
.album_a .banner h5:before {
  content: 'AWARDS & HONORS';
}


/*動態影片*/
.video_page .banner h5:before {
  content: 'MASCOT VIDEO';
}


/*聯絡我們*/
.contact_page .banner h5:before {
  content: 'CONTACT US';
}

/**/

.article_a .banner.banblog {background-image: url(https://pic03.eapple.com.tw/mascot/b4.png);}/*團隊*/
.banF {background-image: url(https://pic03.eapple.com.tw/mascot/b2.png);} /*作品*/
.article_b .banner.banblog {background-image: url(https://pic03.eapple.com.tw/mascot/b5.png);}/*活動*/
.banE {background-image: url(https://pic03.eapple.com.tw/mascot/b1.png);} /*得獎*/
.video_page .banner {background-image: url(https://pic03.eapple.com.tw/mascot/b6.png);}/*影片*/
.banC {background-image: url(https://pic03.eapple.com.tw/mascot/b3.png);}/*表單*/



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


/*影片*/

.video-list .vidTitle {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
}

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

.video-list .vid_item a {
    margin: 0 20px;
}
}  


/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/
h5.blog_le_t span {
    display: none;
}

h5.blog_le_t {
    font-size: 20px;
    font-weight: 400;
    font-family: "Kanit", sans-serif, "Noto Sans TC", serif;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.blog_le .accordion {
    border: none;
    border-radius: 0px;
}

.blog_list_ri h5 {
    font-weight: 400;
}

.subbox_item a {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

.accordion li .link a {
    font-weight: 400;
    letter-spacing: 2px;
}

.blog_subbox {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.subbox_item a:after { background: rgba(0,0,0,0.5);}
.blog_le .accordion > li:hover .link, .blog_le .accordion > li.on_this_category .link {background: #b1bb51;}
.blog_page .main_part {max-width:1600px;}
.submenu li.on_this_category a, .submenu a:hover {
    background: #b1bb51;
    color: #444;
}
.blog_back a.article_btn_prev,.blog_back a.article_btn_next { background: #b1bb51;}
.blog_back a.article_btn_back {background: #f19b02;}

.subbox_item a:hover:before {
    transform: translate(-50%, -50%) scale(1);
    transition: all 500ms;
}
.path p, .path p a {
display: none;
}
.subbox_item a:before {
    content: 'READ MORE';
    position: absolute;
    z-index: 19;
    top: 87%;
    left: 50%;
    width: 145px;
    text-align: center;
    background: #b1bb51;
    border-radius: 60px;
    font-size: 15px;
    color: #ffffff;
    padding: 10px 5px;
    transform: translate(-50%, -50%) scale(0, 0);
}

.subbox_item a:hover:after {
    opacity: 1;
    width: 100%;
    transition: all 500ms;
}
.subbox_item a:after {
    background: rgba(0, 0, 0, 0.5);
}
.subbox_item a:after {
    content: '';
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background: #ffffff99;
    opacity: 0;
    border: 2pt solid #b1bb51;
    border-radius: 10px;
}

.blog_list_le img {
    z-index: 999;
}
h4.blog_category_title {
    color: #444;
    font-size: 25px;
    font-weight: 500;
}


/*相關文章*/

.news_related h6 span:before {
      content: 'Related Articles';
    color: #505050;
    font-weight: 400;
}


.news_related_list li a:hover {
    padding: 10px 10px 0px;
    transition: .3s;
}

.news_related_list li a {
    transition: .3s;
}

.news_related {
    background: #f3f3f3b5;
}

.news_related_list li a p {
    padding: 10px;
}


/*文章內頁*/


.article_a .articel_mainPic img {
  max-width: 40%;
  border-radius: 100%;
}

/*首頁文章*/

.animated-arrow{
    background: #B3C517;
    border-radius: 50px;}


/*聯絡我們/＝＝＝＝＝*/
.contact_content {display: block !important}
.contact_editbox {    padding: 0;}
.contact_le_map a {    background: #e7e4df;}
.contact_form li.last cite {background: #B3C517;}
.contact_content {
    padding: 80px 10px 10px;
}
.contact_form li {display: flex;flex-direction: column;grid-gap: 0px;}
.form select {
  width: 100%;
  border-radius: 5px;
}
.captcha {width: 100%;}
.blank_letter:after {
    content: 'If you encounter any issues or have any questions while browsing our website, please fill out the form below with your valuable feedback. \A We will address your concerns and respond as soon as possible. Thank you！';
    font-size: 15px;
    font-weight: 400;
    font-family: "Kanit", sans-serif, "Noto Sans TC", serif;
    white-space: pre-wrap;
    top: 11px;
    position: relative;
    color: #717171;
}
.contact_form li input.noborder {
  border-radius: 5px;
}
.contact_form li textarea.noborder {
  border-radius: 5px;
}

/*表格排列版面*/
.contact_content .information_left{display: none;}
.red {color: #B3C517;}
.contact_content .information_right {    width: 90%;    padding: 0;    margin: 0 auto 100px;    max-width: 1400px;    display: block;}
.blank_letter {     padding: 0;    font-size: 20px;    color: #3a3a3a;text-align: center;}
.blank_letter .note{display: block;color: #B3C517;text-align: center;}
.contact_form {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(min(400px,100%), 1fr));    gap: 30px;    margin-top: 90px;}
.contact_form li{}
.contact_form li .form__label {display: block;width: 100%;text-align: start;margin: 0 0 5px;padding: 0;max-width: 100%;}
.contact_form li.last {text-align: center;grid-column: 1/-1;display: flex;flex-direction: row-reverse;justify-content: flex-start;gap: 20px;}
.contact_form li.last blockquote, .contact_form li.last cite{border-radius:50px;    border: 1px #B3C517 solid;    padding: 0px;}


@media screen and (max-width: 600px){
    .contact_form li .form__label {
        text-align: justify;
        background: transparent;
        font-weight: 400;
    }  
}

/*相簿/＝＝＝＝＝*/


  /*作品展示*/
  .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;
    text-align: center;
  }
    .show-list .item a .show_pic img {
    transition: all 0.5s;
}
  .show-list .item a:hover .show_pic img {
    transition: all 0.5s;
    transform: translate(-50%, -55%);
}
  /*版面*/
  ul.show-list, .other_subalbum {display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
  ul.show-list:before , ul.pic-list:before{content:none;}
  .overlay {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    left: 0;
    top: 0;
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: 1;
    transition: all 0.3s;
  }
  .overlay:hover {background: #b1bb51;opacity: 1;animation:tracking-in-expand-fwd .3s cubic-bezier(.215,.61,.355,1.000) both;border-radius: 20px;}
  .overlay:hover:after {
    content: '>';
    width: 37px;
    position: absolute;
    top: 46%;
    left: 46%;
    height: 37px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    color: white;
    border-radius: 50%;
  }
  @-webkit-keyframes tracking-in-expand-fwd {
    0% {
      letter-spacing: -0.5em;
      -webkit-transform: translateZ(-700px);
              transform: translateZ(-700px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand-fwd {
    0% {
      letter-spacing: -0.5em;
      -webkit-transform: translateZ(-700px);
              transform: translateZ(-700px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
.show-list .show_pic , .other_subalbum li a div , .pic-list .show_pic{    display: block;    position: relative;    overflow: hidden}
.show-list .show_pic, .other_subalbum li a div, .pic-list .show_pic {
    padding: 0;
    height: auto;
}.show-list .show_pic img , .other_subalbum li a img{
	display:block;
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	object-fit: contain;
	-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%);
	}
.pic-list .show_pic img{
	display:block;
	position: relative;
	transform: unset;
	left: 0;
	top: 0;
	height: 300px;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: unset;
	padding: 10px 0px;
}
.pic-list .show_pic {
    aspect-ratio: auto;
}

    /**/
  
  .show-list .item:hover .show_name {  color: #404040;}
  .other_album_choice li {    background: #b1bb51;}
  .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 {
    color: #b1bb51;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 500;
    background: #ffffff;
    padding: 8px 10px 8px 18px;
    border-left: 5px solid;
    display: none;
  }
  .other_subalbum li p {    margin-top: 10px;}
  
  .pic-list .item h6 {
    font-weight: 400;
    letter-spacing: 1px;
    padding-top: 13px;
    text-align: center;
  }
  .block {
    display: none;
  }

  .other_album {
    display: none;
}


.pic-list .item a {
    display: flex;
    justify-content: center;
}

.other_subalbum li a p {
    letter-spacing: 0.5px;
    text-align: center;
}

@media screen and (max-width: 650px) {
ul.show-list, .other_subalbum {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}

@media screen and (max-width: 500px) {
.other_subalbum li a p {
    font-size: 14px;
}
}

@media screen and (max-width: 450px) {
ul.show-list, .other_subalbum {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}

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


/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/


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


/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/


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


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

.stellarnav > ul > li > a {
        margin: 0px 8px;
}
}  


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

    .nav-header {
        width: 200px;
        padding-bottom: 10px;
    }
    .stellarnav > ul > li:after {
display: none;
}
}    


@media screen and (max-width: 768px) {
#bottom_menu li a {
    background: #939d13;
    color: #fff;
}
  .stellarnav a.dd-toggle .icon-plus:after,.stellarnav a.dd-toggle .icon-plus:before{border-bottom: solid 2px #777;}
/* 開啟手機板下方按鈕所需設定 */
.header_area.sticky {
    backdrop-filter: none;
}
.footer.with_shopping_mode { padding:30px 0 55px; }
#to_top { bottom:60px;}
.stellarnav > ul > li > a:before{display: none;}
.stellarnav.mobile li.open li.open {
    padding: 0px;
}
.stellarnav.mobile li.open {
    background: #f3f3f3;
    padding: 0px 10px 10px 10px;
}
.stellarnav > ul:hover > li > a {opacity: 1; }
.stellarnav > ul > li:hover > a {opacity: 1;  }

.stellarnav.mobile > ul > li > a b {display: grid}

.stellarnav > ul > li > a > b:nth-child(2) {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #b1bb51;
}

.stellarnav.mobile > ul > li > a {
    padding: 15px 43px 10px 10px;
}

    .stellarnav.mobile > ul > li > a.dd-toggle {
        padding-top: 12px;
    }

.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a{
margin-left: 0px;
}

.stellarnav.mobile li.open li a:not(.dd-toggle):not(.icon-plus) {
    margin-left: 30px;
    font-size: 15px;
    border-left: 1pt solid #bababa;
    padding: 10px 20px;
    color: #878787;
}
.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a {
    background: transparent;
    color: #444;
}
.stellarnav.mobile li.open {
    background: #fff;
}

.stellarnav li a {
    color: #444;
    background: transparent;
    border-radius: 0px;
}

.stellarnav > ul > li ul li a:hover {
    background: transparent;
}

.stellarnav.mobile ul ul {
    padding: 2px;
    box-shadow: none;
}

.stellarnav.mobile li.open li.open {
    background: #ffffff;
    padding: 0px;
}

.stellarnav.mobile ul ul ul {
    margin-left: 30px;
}

.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul {
    top: -1px;}


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

.stellarnav .icon-close:before,.stellarnav .icon-close:after{border-color: #fff;}





}


@media screen and (max-width: 600px) { 
    /*Footer/＝＝＝＝＝*/
.box_link {    text-align: center;}

.nav-brand img {
    max-width: 100%;
    margin: 0px 0px 0px 15px;
}

.nav-header {
    width: 150px;
    transition: all 0.4s ease-in-out;
}

.header_area {
    padding: 20px 10px 10px;
}

.header_area.sticky .nav-header{
    width: 120px;
    transition: all 0.4s ease-in-out;
}

.header_area.sticky {

    padding: 15px 10px 0px;  
}


.footer_info { padding-left: 10px;}

.contact_form li .form__label {
    background: transparent
}

.pageIndex .products-list {
    grid-gap: 50px;
}


.total_view {
    padding: 5px;
}

    .video-list {
        grid-template-columns: 1fr;
    }

}