@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap');

.edit_part {padding: 0;}
/* header商品下拉超過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;}


.pageIndex .header_area {
  
    position: fixed;
    background: linear-gradient(to bottom, rgb(177 91 0) 0%, rgba(0, 0, 0, 0) 100%);
}


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


 /* 開啟手機板下方按鈕所需設定 */
@media screen and (max-width: 768px) {
    .footer.with_shopping_mode { 
        padding:30px 0 70px; 
    }
    #to_top { bottom:60px;}
    #bottom_menu {
        display: none;
    }
    #bottom_menu li:nth-child(1) {
        background: ;
    }
    #bottom_menu li:nth-child(2) {
        background: ;
    }
    #bottom_menu li:nth-child(3) {
        background: ;
    }
    #bottom_menu li a {
        color: #fff;
    }
}
    
@media screen and (max-width: 600px) { 
}

.header_area {position: fixed;}

 /*首頁大圖*/    
.swiper-banner .swiper-slide img {animation: none;}
.bannerindex { position:sticky; height:auto;}/*custom原本有寫*/
.bannerindex .swiper-banner { position:static; margin:0; height:auto;}/*custom原本有寫*/
.bannerindex .swiper-slide img { height:auto;}/*custom原本有寫*/
.bannerindex .swiper-slide {position: relative;}/*因為偽元素，所以要加的*/
.bannerindex .swiper-slide:before ,.bannerindex .swiper-slide:after { content: ""; position: absolute;  z-index: 999; pointer-events:none;}

/*大圖動畫*/
.swiper-slide {position: relative;}/*因為偽元素，所以要加的*/
.swiper-slide:before ,.swiper-slide:after { content: ""; position: absolute;  z-index: 999; pointer-events:none;}/*before+after依樣要寫的內容拆出來寫一起，要寫在個別下方也可以*/

.bannerindex .swiper-slide:nth-child(1)::after {
   content: "";
  position: absolute;
  width: 70vw;
  height: 45vw;
  background: url(https://pic03.eapple.com.tw/asyongshih/title01.png) no-repeat top;
  background-size: contain;
  top: 10%;
  right:15%;

  animation-fill-mode: both;
  animation-delay: 0.5s;
  z-index: 10;
}

.bannerindex .swiper-slide:nth-child(2)::after {
    content: "";
  position: absolute;
  width: 45vw;
  height: 55vw;
  background: url(https://pic03.eapple.com.tw/asyongshih/title.png) no-repeat top;
  background-size: contain;
  top: 25%;
  left: 10%;

  animation-fill-mode: both;
  animation-delay: 0.5s;
  z-index: 10;
}


.swiper-banner:before {

   content: "";
  position: absolute;
 
  background: url(https://pic03.eapple.com.tw/asyongshih/bn02.png) no-repeat top;
  background-size: contain;
  top: 25%;
  left: 10%;

  animation-fill-mode: both;
  animation-delay: 0.5s;
  z-index: 10;
  
  animation: jump 0.8s ease-in-out infinite;
  position: relative;
}

@keyframes jump {
  0%, 100% {
    top: 0;
  }
  50% {
    top: -5px;
  }
}





.swiper-slide.swiper-slide-active:nth-child(1):after { animation: slide-right  1s 0.5s both;}
.swiper-slide.swiper-slide-active:nth-child(2):after { animation: slide-left  1s 0.5s both;}

/*往右特效*/
@keyframes slide-right {
  0% {-webkit-transform: translateX(-100%);  /* 一開始的位置 在X-100*/
            transform: translateX(-100%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateX(0);/* 跑到最後終止的位置 在X-0*/
            transform: translateX(0);
            opacity:1;/*透明度顯示*/}
}
/*往左特效*/
@keyframes slide-left {
  0% {-webkit-transform: translateX(100%);  /* 一開始的位置 在X-100*/
            transform: translateX(100%);
            opacity:0;/*透明度0*/}
  100% {-webkit-transform: translateX(0);/* 跑到最後終止的位置 在X-0*/
            transform: translateX(0);
            opacity:1;/*透明度顯示*/}
}






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


/*--------頁碼設定----------*/
ul.page { 
    width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 600;}

.page strong {background: #6a3906;}
/* 其他頁 */
.page li {margin: 0;}
.page li a, .page li strong {width: 35px;height: 35px;}
.page li a {color: #4C5259;}

/* hover-點擊其他頁 */
.page a,.page a:hover { transition: all .2s;}
.page a:hover { color: #aacc03;background: transparent;}


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


/* 麵包屑導覽--隱藏 */
.path {display: none;}
.header_area {background: none;padding: 0;}
.navigation {display: block;}
.nav-header {
    max-width: 300px;
	height: 120px;
    transition: all .3s;}

.nav-brand { z-index: 9999999;}
.me_tp_features {display: none;}


/* .stellarnav */
.stellarnav {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    }
    
.stellarnav ul {
    display: flex;
    max-width: 1500px;
    justify-content: space-between;}

.stellarnav > ul:before {
    content: "";
    display: block;
    width: 200px;}

.stellarnav > ul > li > a {
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 2px;
    color: #ffffff;}


.stellarnav > ul > li.has-sub > a {padding-right: 0;}
.stellarnav li.has-sub > a:after {display: none;}
/*.stellarnav > ul > li:nth-of-type(1) {order: -3;}
.stellarnav > ul > li:nth-of-type(2) {order: -2;}
.stellarnav > ul > li:nth-of-type(3) {order: -1;}*/
.stellarnav ul ul {background: #0000006e;}
.stellarnav li li {border: 0;}
.stellarnav li a { color: #ffffff;}
.stellarnav li li > a, 
.stellarnav li li.has-sub > a { padding: 12px 15px 12px 10px;}
.stellarnav > ul > li.drop-left > ul {right: unset;}


.main_header_area {    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); }

/* 下滑設定 */
.header_area.sticky { background: #000000;}
.header_area.sticky .nav-header { max-width: 180px;transition: all .3s; height: 80px;}
.header_area.sticky .stellarnav {top: 47%;}

/* hover */
.stellarnav *,
.stellarnav > ul > li > a::before,
.stellarnav > ul > li > a:hover:before {transition: all .3s;}
.stellarnav > ul > li.has-sub > a:hover:after,
.stellarnav > ul > li.has-sub:hover > a:after{border-top: 6px solid ;}
.stellarnav li li:hover > a,
.stellarnav li li.has-sub:hover > a,
.stellarnav li li.drop-left:hover > a  {padding-left: 15px;}
.stellarnav li li.has-sub > a:hover:after,
.stellarnav li li.has-sub:hover > a:after{border-left: 6px solid;}

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

@media screen and (max-width: 1024px) {
    .stellarnav > ul:before {width: 100px; }}

@media screen and (max-width: 768px) {
    .stellarnav li a {color: #555;}
    .header_area {background: #d3af79;}
    .nav-header {max-width: 60px; margin: 0 15px 0 auto;}
    .header_area.sticky .nav-header {max-width: 60px;}
    .stellarnav .menu-toggle span.bars span {background: #fff;}
    .stellarnav .menu-toggle:after {color: #fff;}

    .stellarnav.mobile.right .close-menu, 
    .stellarnav.mobile.left .close-menu {
        color: transparent;
        background: transparent;
        padding-top: 20px;
        padding-left: 15px;}

    .stellarnav .icon-close {display: block;}
    .stellarnav .icon-close:before, 
    .stellarnav .icon-close::after {width: 25px;border-bottom: ;}
    .stellarnav.mobile { transform: unset;}
    .stellarnav.mobile.right > ul, 
    .stellarnav.mobile.left > ul {border: 0;}

    /* 選單設定--開始 */
    .stellarnav.mobile > ul > li { border-bottom: 1px #231815 solid;}
    .stellarnav > ul > li > a::before {display: none;}
    .stellarnav.mobile li li.has-sub a {padding: 10px 43px 10px 40px;}
    .stellarnav li li > a { padding: 10px 10px 10px 40px;}
    .stellarnav a.dd-toggle .icon-plus:before,
    .stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 2px #777;}
    .stellarnav.mobile li.open {background: transparent; padding: 0;}
    .stellarnav.mobile ul ul { background: transparent;}
    .stellarnav.mobile li.open li.open {background: transparent;padding: 0;}
    .stellarnav.mobile li.open li.open > a {background: #000000;}
    .stellarnav.mobile li.open li.open > a.dd-toggle { background: transparent;}
    .stellarnav.mobile ul ul ul { background: transparent;}
    .stellarnav.mobile li li.has-sub li a {padding: 10px 43px 10px 55px;}
}
@media only screen and (max-width: 570px) {
    .stellarnav .menu-toggle {padding: 15px 10px;}}

/* = = = 大圖 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 3%;
} /* 大圖點點 */


/* = = = footer = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.footer {
    font-family: 'Noto Sans TC', sans-serif;
    background: url(https://pic03.eapple.com.tw/asyongshih/background.jpg) no-repeat;
    padding: 80px 0 0 !important;}

.footer_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;}

.footer_logo {max-width: 120px;}
.box_link {display: none;}
.footer_info ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: solid 1px #ffffff;
    padding: 30px 10px 10px;
    margin-top: 20px;}

.footer_info li p, 
.footer_info li p a,
.footer_menu a { color:#ffffff;}
.footer_info li p {line-height: 250%;}
.footer_menu a {
    letter-spacing: 2px;
    border: 0;
    background: transparent;
    margin: 0 8px 8px 0;}

.copy, 
.copy a {color: #000000;}
.copy {
    background: #4f0101;
    letter-spacing: 1px;
    text-align: right;
    border: 0;}


p.add { display: none;}
.footer_info li p.tel:before {content: '加盟專線：';}
/* hover */
.box_link a,
.box_link a:hover,
.footer_menu a,
.footer_menu a:hover,
.copy a,
.copy a:hover {transition: all .3s;}
.box_link a:hover { opacity: .7;}
.box_link a,
.box_link a:hover { transition: all .2s;}
.footer_menu a:hover {
    background: #d3af79;
    color: #ffffff;}
.copy a:hover {color: #fbcd4f;}
.footer_menu a:first-child {display: none;}

@media screen and (max-width: 920px) {
    .footer_menu {
        display: grid;
        grid-template-columns: repeat(4,1fr);}}

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

@media screen and (max-width: 680px) {
    .footer_info ul {flex-direction: column;}}

@media screen and (max-width: 400px) {
    .footer_menu { grid-template-columns: repeat(2,1fr);}}

/* TOP按鈕 */
#to_top {
    background: #d3af79;
    font-family: "Comme", serif, 'Noto Sans TC', sans-serif;
    color: #fff;
    border-radius: 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);}
#to_top i.top {width: 15px;height: 15px;}
#to_top i.top:before, 
#to_top i.top:after {height: 10px; background: #fff;}
#to_top i:before {transform: rotate(-45deg);}
#to_top i:after {transform: rotate(45deg);}

@media screen and (max-width: 768px) {
    #to_top { bottom:65px;}}


/*BANNER */


/*----------*/
.banner.banC h5::after{content: "CONTACT";}
.banner.banblog h5::after{content: "NEWS";}
.banner.banA h5::after{content: "MENU";}

.banner {
    background-image: url(https://pic03.eapple.com.tw/hejiangrice/A-01.jpg );
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center ;
    position: relative;
    background-position:center;
    background-repeat: no-repeat;}

  .banner h5 {
    color: #422517;
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-weight: 400;
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 50px;
    letter-spacing: .3em;
    padding: 10px 0;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-direction: column-reverse;}
  
  .banner h5::after {
    content: "";
    display: block;
    font-size: 16px;
    color: #000400;
    letter-spacing: .2em;
    padding-bottom: 5px;}
  
.banner.banB {display: none;}


  @media screen and (max-width: 670px) {
  .banner h5 {font-size: 30px;}}

    @media screen and (max-width:550px) {
    .banner {background-image: url(https://pic03.eapple.com.tw/hejiangrice/A-03.jpg );
    background-size: cover;}}

/*文章設定*/
.blog_le .accordion > li.on_this_category .link a {color: #fff !important;background: #d3af79;}
.blog_list_le,
.i_blog_le,
.news_related_list li figure{
    border-radius: var(--br);
    overflow: hidden;}

.blog_list_le img,
.i_blog_le img,
.news_related_list li a img {
    transform: scale(1);
    filter: saturate(1);
    -webkit-filter: saturate(1);
    transition: var(--tr);}

.subbox_item:hover img,
.module_i_news li:hover img,
.news_related_list li:hover img{
    transition: var(--tr);
    transform: scale(1.05);
    filter: saturate(1.5);
    -webkit-filter: saturate(1.5);}

/* 文章標題 */
.blog_list_ri h5,
.i_blog_ri h5,
.news_related_list li a p{color: var(--f1-color);}
.subbox_item:hover h5,
.module_i_news li:hover h5,
.news_related_list li:hover p{color: var(--ac-color);transition: var(--tr);}


.blog_le {padding: 0 7px;}

/* 文章文字區塊 ---------- */
h5.blog_le_t {text-align: center;margin-bottom: 0;}

/* 隱藏-文章文字 */
h5.blog_le_t em,
h5.blog_le_t span {display: none;}

/* 搜尋欄位 */
.blog_search input[type=search] {border-radius: 4px;}
.accordion li .link a:hover {background: #d3af79;}
/* 分類區塊外框 ---------- */
.blog_le .accordion {border-radius: 4px;}

/*隱藏-分類副標*/
.blog_page h4.blog_category_title {display: none;}
.articel_mainPic img {display: none;}
.blog_subbox {grid-template-columns: 1fr;}

.subbox_item a {
    background: #fff;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 50px;}

.subbox_item a:before {
    content: 'READ MORE >>';
    font-size: 12px;
    padding: 5px 20px;
    color: var(--ac-color);}

/* 隱藏-原遮罩 */
.subbox_item a:after {display:  none;}

/* 時間 */
.blog_list_ri em {font-size: 12px;color: var(--f2-color);}

/* 概述 */
.blog_list_ri p {
    font-weight: 400;
    letter-spacing: .2rem;
    line-height: 160%;
    font-size: 12px;
    margin-top: 20px;
    color: var(--f2-color);}


/* 隱藏-原遮罩 */
.module_i_news li a:after{display: none;}
.module_i_news li a:before{content: 'READ MORE >>'; color: var(--ac-color);}


/* 文字區塊 ---------- */
.i_blog_ri{ padding: 2rem 1rem;}

/* 日期 */
.i_blog_ri em{color: var(--f2-color);}

/* 概述 */
.i_blog_ri p{color: var(--f2-color);}



h4.blog_category_title {
    color: #422517;
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-weight: 400;
    padding: 0;
    font-size: 25px;
    letter-spacing: .4rem;
    margin-bottom: 0;}

.blog_shareData {justify-content: flex-end;padding-top: 10px;}

/* 分享到 */
.toShareNews b {font-size: 12px;font-weight: 400;}

/* sns icon */
.toShareNews a object {max-width: 20px;}
.blog_box_edit * {line-height: 200%;letter-spacing: 2px;}

/*按鈕 ---------- */
.blog_back {gap: 0;}
.blog_back a.article_btn_prev,
.blog_back a.article_btn_next {
    background: transparent;
    color: var(--f2-color);
    border: 1px solid var(--f2-color);
    font-size: 14px;
    padding: 12px;}

.blog_back a.article_btn_back {
    color: #000;
    background: var(--f2-color);
    padding: 12px;}

/* 相關文章 ---------- */
.news_related {background: #fff;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {background: #d3af79;}
.news_related {padding: 70px 15px 30px;}
/* "相關文章"文字 */
.news_related h6 span:before {
    font-size: 30px;
    letter-spacing: 5px;
    color: #422517;
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-weight: 400;}
.news_related h6 {margin: 0 auto 50px;}
/* 上一頁按鈕 */
.lastPage {
    background: #d3af79;
    font-size: 16px;}

.lastPage:hover{
    filter: grayscale(1);
    transition: var(--tr);}
    
.blog_page #content {background: #F9F8F3;}

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

    /*側邊*/
    .blog_le {padding: 0;}

    /*分類頁*/
    .subbox_item a {
        grid-template-columns: 100px 1fr;
        align-items: start;
        gap: 30px ;
        padding: 15px 0;}

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

    /*文章頁*/
    .blog_le,
    .blog_ri {margin-bottom: 50px;}

    .blog_back a.article_btn_prev,
    .blog_back a.article_btn_next,
    .blog_back a.article_btn_back {font-size: 12px;}

    .lastPage {font-size: 12px;}}

/*聯絡我們*/
li.info_ADD { display: none;}
.contact_le_map a {display: none;}

.blank_letter {
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-weight: 400;
    letter-spacing: 5px;
    color: #422517;}

.contact_form li.last blockquote{border: none;}

@media screen and (max-width:600px) {
.contact_form li .form__label {background: #F9F8F3;}}