@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&family=Huninn&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:  "Huninn",  "Freckle Face", system-ui;
}
.path p, .path p a{ display: none;}
.edit{ padding: 0px 0;}
.info_fix{   display: none;}



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



.swiper-fade .swiper-slide-active::before{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height:1000px ;
    top: 0;
    left: 0;
    z-index: 99;
    animation: bounceIn 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.swiper-fade .swiper-slide-active:nth-of-type(1):before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bantext1.png);}
.swiper-fade .swiper-slide-active:nth-of-type(2):before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bantext2.png);}



@keyframes bounceIn{
0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
}
20% {
    transform: scale3d(1.1, 1.1, 1.1);
}
40% {
    transform: scale3d(.9, .9, .9);
}

60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
}
80% {
    transform: scale3d(.97, .97, .97);
}
100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}
}

@media screen and (max-width: 768px) {
/* 行動裝置相容性調整 大圖調整 */
.swiper-slide img { animation-fill-mode: none; -webkit-animation-fill-mode: none;}
}

@keyframes banner-logo {
    0% {
       transform: rotate(-10deg) translate(-50%, -50%);
       opacity: 1;
       transform-origin: left top;
    }


    50%  {
       transform: rotate(0) translate(-50%, -50%);
       opacity: 1;
       transform-origin: left top;
    }


    100% {
      transform: rotate(-10deg) translate(-50%, -50%);
      opacity: 0;
      transform-origin: left top;
    }
}

@keyframes banner-bg {
    0% {}

    50% {}

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 600px) {
    .pageIndex #page::after{width: 120px;left: 53%;}
    body.pageIndex::before{top: 55%;left: 55.5%; font-size: 18px;}
    .pageIndex .swiper-banner .swiper-slide {
        height: auto;
        width: 100% !important;
        aspect-ratio: 500 / 650;
        background-size: cover;
    }
    .pageIndex .swiper-banner .swiper-slide img {height: auto;display: none;}
    .pageIndex .swiper-banner .swiper-slide:nth-child(1){
        background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bannerm1.jpg);
    }
    .pageIndex .swiper-banner .swiper-slide:nth-child(2){
        background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bannerm2.jpg);
    }
    .swiper-fade .swiper-slide-active::before{aspect-ratio: 500 / 650;}
    .swiper-fade .swiper-slide-active:nth-child(1):before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bantext-m1.png);}
    .swiper-fade .swiper-slide-active:nth-child(2):before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/bantext-m2.png);}
}

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


/*LOGO*/

.nav-brand { width:215px;  transition: all 0.4s;  position: absolute; margin-top: 7px;}
.navigation{ grid-template-columns:220px 1fr;}

/*HEADER*/


.pageIndex .header_area {  animation: show-nav 1.2s ease-in-out forwards;}

@keyframes fade-in-elegant {
    0% {
        opacity: 0;
        transform: translateY(20px); /* 從下方滑入 */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 最終位置 */
    }
}

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

.main_header_area .container {  max-width: 93%;}

.main_header_area {
    background: #7d961ef0;
    max-width: 1500px;
    margin: auto;
    width: 92%;
    border-radius: 70px;
    padding: 10px 40px;
    transition: 0.6s;
}

 .header_area.sticky .main_header_area {
    background: #7d961e;
    max-width: 100%;
    border-radius: 0;
    padding: 10px 20px;
    transition: 0.6s;
    width: 100%;
}

.header_area {  background: transparent;  transition: all .4s ease-in-out;   padding: 10px 0px;    position: absolute;
    z-index: 9999;
    top: 0.5%;
    width: 100%;
    transition: 0.6s; 
    /* position: fixed;  top: 20px;  border-radius: 120px; width: 96%;  margin: 0 2%;  */
 }
.header_area.sticky { background: transparent;   transition: all .4s ease-in-out;   border-radius: 0; margin: 0 0%; position: fixed;
    top:-11px;    left: 0;    width: 100%;    z-index: 9999;}
.me_tp_features {display: none;}

/*第一層*/

.stellarnav li.has-sub > a:after{display: none;}
.stellarnav > ul > li > a { letter-spacing: 2px; color: #fff; font-weight: 400; font-size: 16px; padding: 30px 16px 0px;  margin: 0px; position: relative; z-index: 1; height: 59px;  transition: 0.5s ease-out;} 
.stellarnav > ul > li > a:hover{color: #A8C879; transform: translateY(-3px);  transition: 0.5s ease-out;}
.stellarnav > ul > li > a b:nth-of-type(2) {  font-size: 13px;}
.stellarnav > ul > li:nth-last-child(1):after{display:none}




/*選單icon*/
.stellarnav > ul > li > a:before {
     content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-01.png);
    position: absolute;
    display: inline-block;
    top: 32%;
    left: 47%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    }

.stellarnav > ul > li:nth-of-type(2) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-02.png);}
.stellarnav > ul > li:nth-of-type(3) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-03.png);}
.stellarnav > ul > li:nth-of-type(4) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-04.png);}
.stellarnav > ul > li:nth-of-type(5) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-05.png);}
.stellarnav > ul > li:nth-of-type(6) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-06.png);}
.stellarnav > ul > li:nth-of-type(7) > a:before {
    content: url(https://pic03.eapple.com.tw/shanjinghouse/nav-07.png);}



/*第二層*/
.stellarnav ul ul {  background: #7d961e; box-shadow: 5px 5px 25px rgb(0 0 0 / 6%); width: 205px; left: 4px;}
.stellarnav li li {border: none;}
.stellarnav li li > a, .stellarnav li li.has-sub > a {  padding: 10px 12px;  transition: all 0.3s;  border: none;  position: relative; letter-spacing: 1px; font-size: 15px; color: #fff;;}
.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a { color: #A8C879; padding: 12px 5px 12px 35px; background: transparent; border: none;}
.stellarnav li li > a:before { content: ''; position: absolute; left: -14px; opacity: 0; transition: all 0.8s; width: 0px; height: 1px; background: #A8C879;top: 19px;}
.stellarnav li li:hover > a:before{ opacity: 1; left: 10px; width: 14px;}
.stellarnav.desktop li.has-sub a{ color: #FFF;}
.stellarnav.desktop li.has-sub a:hover{  color: #A8C879; }
.stellarnav > ul > li.drop-left > ul{ right: unset; left: 4px;}


/* 漢堡條 */
.stellarnav .menu-toggle span.bars span {background: #345D43;}
.stellarnav .menu-toggle:after { color: #345D43;}

/* close menu 拉出來 */
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu{
    background:  #7D961E;
    color: #fff;
  }
  .stellarnav .icon-close:before{
    border-bottom: solid 3px #ECF0E5;
  }
  .stellarnav .icon-close:after{
    border-bottom: solid 3px #ECF0E5;
  }
  .stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul{
    background: #7D961E;
  }
  .stellarnav a.dd-toggle .icon-plus:before{
    border-bottom: solid 3px #F4D67A;
  }
  .stellarnav a.dd-toggle .icon-plus:after{
    border-bottom: solid 3px #F4D67A;
  }
  .stellarnav.mobile > ul > li > a.dd-toggle{
    padding: 11px;
    top: 7px;
  }
  .stellarnav.mobile > ul > li > a.dd-toggle:before{
      display: none;
  }
  .stellarnav.mobile li.open{
    background: transparent;
  }
  .stellarnav.mobile ul ul{
    width: 100%;
    position: relative;
    left: 0;
  }
  .stellarnav.mobile > ul > li{
    border-bottom: 1px rgba(224, 224, 224, 0.6) solid;
  }

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

  .stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul{max-width: 100%;}




@media screen and (max-width:1438px) {
    .stellarnav > ul > li > a{ padding: 30px 14px 0px;}
}
@media screen and (max-width:1308px) {
    .stellarnav > ul > li > a{padding: 30px 12px 0px; }
    .nav-brand{width: 200px; }
    .navigation{ grid-template-columns:200px 1fr;}
}
@media screen and (max-width:1204px) {
    .stellarnav > ul > li > a{  padding: 30px 9px 0px ;}
}
@media screen and (max-width:1134px) {
    .main_header_area{ width: 98%;}
    .stellarnav > ul > li > a{ font-size: 15px;  padding: 30px 6px 0px ;}
    .nav-brand{ width: 185px;}
}
@media screen and (max-width:1041px) {
    .main_header_area .container {  max-width: 98%;}
}

@media screen and (max-width: 1024px) {
.stellarnav ul {  text-align: center;    padding-top: 40px;   margin-bottom: -20px; }
.nav-brand { margin-top: 25px;  z-index: 99;}
.header_area{padding: 13px 0; top: 0%; position: relative; background: #7d961e;}
.nav-header{ z-index: 9999;}
.stellarnav > ul > li > a{ padding: 30px 12px 0px; }
.header_area.sticky .main_header_area{ padding: 25px 20px ; }
.header_area.sticky{ top: -15px; }
.main_header_area{ width: 100%; padding: 10px 0px; }
.header_area.sticky .main_header_area{ padding: 25px 0px; }
}

@media screen and (max-width: 768px) {
  .stellarnav ul {  padding-top: 0px;   margin-bottom: 0px; }
  .stellarnav > ul > li.drop-left > ul{ left: 0px;}
.header_area {    background: #7d961e;    transition: all .4s ease-in-out;    padding: 10px 0px;     position: relative;    top: 0;   border-radius: 0;    width: 100%;    margin: 0;   height: 65px;}
.header_area.sticky {  background: #7d961e; padding: 0px;  backdrop-filter: none;}
.nav-brand { width: 170px; }
.pageIndex .header_area {  animation: none;}
.header_area.sticky .main_header_area{padding: 31px 0px;}
.stellarnav.mobile > ul > li > a{ padding: 20px 43px 20px 10px; font-size: 15px;}
.stellarnav > ul > li:after{ width: 0px; height: 0px;}
.stellarnav > ul > li > a:before{ top: 48%; left: 22%;}
.stellarnav.mobile.left > ul{ top: 0px;}
.stellarnav.mobile{ top: -14px;}
.nav-header{ z-index: 9;}
.stellarnav.mobile ul{ background: transparent;}
.stellarnav li li > a, .stellarnav li li.has-sub > a{ padding: 10px 9px;}
}


@media screen and (max-width: 570px){
    .nav-brand{ width: 160px;}
    .stellarnav.mobile{ top: -6px;}
    .stellarnav > ul > li > a:before{  left: 57%;}
}

/* 商品下拉超過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*/
.site_logo > a img {
       max-width: 250px;
}
.site_endPart {
    padding-top: 55px;
    background-color:#7D961E; 
    
    /* 加入背景圖 */
    background-image: url('https://pic03.eapple.com.tw/shanjinghouse/grass.png');
    background-repeat: repeat-x; /* 讓圖片在水平方向重複 */
    background-position: 0 bottom; /* 靠下對齊 */
    background-size: contain; /* 或調整為具體高度，例如 auto 50px */
    
    /* 執行動畫：名稱 時長 線性速度 無限次數 */
    animation: grassScroll 66s linear infinite;
}
.site_copyRight {
    padding-bottom: 20px;
}
.site_reachOut p,.site_reachOut p:before {
     color:#def3b6; }
.site_reachOut a{ color: #fff;}

.site_reachOut p.add2:before{ display: none; }


/* 定義動畫內容：移動背景座標 */
@keyframes grassScroll {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -1400px bottom; /* 數值需根據圖片寬度調整，負號代表向左跑 */
    }
}

.For_CampUse a {
    display: inline-flex;
    width: calc(33.2% - 10px);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: transparent ;
    color: #628B4E;
    border: 2px dashed #A8C879 ;
    border-radius: 10px;
    padding: 10px 10px;
    margin: 5px;
    text-decoration: none; /* 移除超連結底線 */
    
    /* 動感核心：使用 cubic-bezier 產生彈性效果 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden; /* 為了後續可能的發光效果 */
}
.For_CampUse span{
     color: #fff;
}
.For_CampUse a:hover {
    background: transparent;
    border: 2px dashed #628B4E;
    
}

/* 進階：如果你的按鈕裡面有圖示 (i 標籤或 img) */
.For_CampUse a:hover i, 
.For_CampUse a:hover img {
    animation: simple-bounce 0.5s infinite alternate;
}

@keyframes simple-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

.box_link {
    display: flex;
    max-width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 0;
    width: calc(100% - 400px);
    align-items: center;
}
.box_link a i  {
    color: #345D43;
}
.box_link a {
    /* 靜態顏色調整 */
    color: var(--MainColor); 
    background: #e3eecb;    /* 初始背景白色 */
    border: none;
    margin: 15px;           /* 間隔加大一點點 */
    height: 45px;
    width: 45px;
    font-size: 18px;
    
    /* 初始形狀與過渡 */
    border-radius: 100% / 110% 120% 100% 88%; 
    transition: all 0.5s ease-in-out; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: border-radius, transform;
    text-decoration: none;

    /* 新增：平時就在動 (放慢到 5s 比較優雅) */
    animation: fluidShape 5s infinite alternate ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 給白色一點點陰影才看得見 */
}
a.me_tp_call:nth-child(4) {
    display: none !important;
}

.site_endPart li.site_reachOut:before { content: "民宿登記證：南投縣民宿1214號"; display: block; font-size: 17px; color: #fff; padding-right: 30px; }
.site_endPart li.site_reachOut{ display: flex; }

.site_reachOut p{ padding: 5px 20px 5px 0px; }
.site_reachOut p.tel{ order: 1;}
.site_reachOut p.line{ order: 2;}
.site_reachOut p.add{ order: 3;}
.site_reachOut p.add2{ order: 4;}


/* 讓每顆球動的時間點錯開，視覺更豐富 */
.box_link a:nth-child(1) { animation-delay: 0s; }
.box_link a:nth-child(2) { animation-delay: -1.5s; }
.box_link a:nth-child(3) { animation-delay: -3s; }

.box_link a:hover {
    background: #e3eecb;
    transform: translateY(-8px) scale(1.1); /* 向上跳動感 */
    
    /* Hover 時動畫變快，增加興奮感 */
    animation: fluidShape 1.5s infinite alternate ease-in-out;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.box_link a:hover i{ filter: none; }
.box_link a.me_tp_line:hover i{ color: #00B900; } 
.box_link a.me_tp_call:hover i{ color: #F2AC76; } 
.box_link a.me_tp_mail:hover i{ color: #c10101; } 


/* 延用你原本的動畫，但我們把 transform 加入讓它更動感 */
@keyframes fluidShape {
    0% { 
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; 
        transform: rotate(0deg);
    }
    50% { 
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 
        transform: rotate(3deg) translateY(-2px);
    }
    100% { 
        border-radius: 60% 40% 40% 60% / 40% 70% 30% 60%; 
        transform: rotate(-3deg);
    }
}

/* 以下為輔助線條，維持你原本的設定 */
.box_link:before {
    content: "";
    position: absolute;
    left: 90px;
    background: #f9faf824;
    height: 1px;
    width: calc(100% - 350px);
    display: none;
}


.site_copyRight p,.site_copyRight a ,.site_copyRight span  { color: #666666; }
.privacyLinks a+a{ border-left: 1px solid #666666 ; }


.site_bottomMenu a:nth-of-type(1) { display: none;}
.site_bottomMenu a{ background: #99b66e; color: #FFF; border: 0px; }
.site_bottomMenu a:hover{ background: #F2AC76; color: #FFF; }


@media screen and (max-width: 768px) {
    .site_endPart{ padding-top: 10px; padding: 25px 0 50px;}
    .box_link{ margin-top: 0px; }
}
@media screen and (max-width: 580px) {
    .site_logo > a img{ max-width: 210px;}
    .site_endPart li.site_reachOut{ flex-direction: column;}
    .site_reachOut p{ padding: 5px 0px 5px 0px; }
    .site_endPart li.site_reachOut:before{ padding-right: 0px;}
    .box_link { display: none; }
}
@media screen and (max-width: 430px) {
    .For_CampUse a{ width: 100%;}
}


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



/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 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-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:left; border-bottom:1px dotted #ccc; padding-bottom: 5px;}
.product-layer-two > li ul > li + li { margin-top:5px;}

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

.product-layer-two li li:hover{ margin-left: 15px;}
.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:#ad925e;}

.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: 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 .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}
.product_page .product_menu_list>h5{display: block;}

.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;}
}
@media screen and (max-width: 600px) {
}


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


/*預設解除背景輪播*/
#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 {
    padding: 240px 0;
    overflow: hidden;
    position: relative;
}

.banner h5 { font-family:   "Noto Serif TC",  sans-serif ;  font-size: 0px; color: #fff; letter-spacing: 2px; font-style: italic; display: flex; flex-wrap: wrap; justify-content: center ; align-items: center; z-index: 12;}
.banner::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/in-ban.jpg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    animation-name: oxxo;
    animation-duration: 5s;
    background-size: cover;
    background-position: bottom;

}

.banner h5::before{
    content: "";
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/ban-txt.png);
    width: 382px;
    height: 108px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: -1;
    animation: floatUp 1.2s ease-out both;
}
@keyframes floatUp {
  from {
    transform: translateY(30px);
    filter: blur(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.banner.banblog h5::before { background-image: url(https://pic03.eapple.com.tw/shanjinghouse/banblog-txt.png); }
.banner.banB h5::before { background-image: url(https://pic03.eapple.com.tw/shanjinghouse/banB-txt.png); }
.banner.banD h5::before { background-image: url(https://pic03.eapple.com.tw/shanjinghouse/banD-txt.png); }
.CampCalendarPage .banner h5::before,.CampOrderPage .banner h5::before { background-image: url(https://pic03.eapple.com.tw/shanjinghouse/reserve-txt.png); }
.CampIndexPage .banner h5::before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/room-txt.png); }
.Camp_recheck_page .banner h5::before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/check-txt.png); }
.map_page .banner h5::before{ background-image: url(https://pic03.eapple.com.tw/shanjinghouse/map-txt.png); }

@media screen and (max-width: 1024px) {
    .banner { padding: 100px 0 ; }
    .banner h5::before{ width: 280px; height: 72px; background-size: cover; top: 33%;}
}
@media screen and (max-width: 450px) {
    .banner {min-height: 120px; padding: 0px 0; }
    .banner h5::before{ width: 230px; height: 62px;  top: 25%;}
}


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

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



.blog_page #content,.blog_in_page #content{
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/in-bg.jpg);
    background-position: top ;
}
.blog_page .main_part{
    padding: 50px 20px 70px;
}
  
/*首頁文章*/
.module_i_news .title_i_box h4{ color: #475941 ; font-weight: bold; font-size: 32px; font-family: "Noto Serif TC",  cursive; }
.module_i_news .title_i_box h4::before { content: "NEWS"; display: block;  color: #d0dacb; font-size: 72px; font-weight: 400; margin-top: -18px; font-family: "Cinzel", serif; }

.i_blog_ri h5{ color: #475941 ; font-weight: bold;}
.i_blog_ri em{ color: #bac6b1 ;}
.i_blog_ri p{ color: #000;}

.module_i_news ul{ grid-gap:30px; }

.module_i_news li a:hover:after {
    opacity: 1;
    width: 100%;
    transition: all 500ms;
}

.module_i_news li a:after {
    background: rgba(0, 0, 0, 0.5);
}

.module_i_news li a:after {
    content: '';
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background: #ffffff45;
    opacity: 0;
    border: 1px dashed #d0dacb;
}

.module_i_news li a {
    border-bottom: 1px dashed #d0dacb ;
}

.module_i_news li a:before {
    content: 'MORE+';
    top: 93%;
    bottom: 0px;
    right:0px;
    width: 108px;
    height: 35px;
    text-align: center;
    background:#cdd8c3;
    font-size: 13px;
    color: #5f6f5b;
    transform: translate(-50%, -100%) scale(1);
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.module_i_news li a:hover:before {
    transform: scale(1);
    transition: all .5s ease-in-out;
}

.animated-arrow{ background: #cdd8c3 ; height: 40px; line-height: 41px;  width: 200px; border-radius: 12px; color: #5f6f5b;}


@media screen and (max-width: 768px) {
    .module_i_news li{ border-bottom: 0px; }
    .i_blog_ri{ padding: 22px;}
    .module_i_news li a:before{ top: 96%;}
}
@media screen and (max-width: 600px) {

}
@media screen and (max-width:500px) {
    .module_i_news .title_i_box h4::after{ font-size: 50px; }
}
@media screen and (max-width: 450px) {
    .module_i_news ul {
        grid-template-columns:1fr;
    }
}

/*側邊選單*/
.blog_search input[type=search]{ border-radius: 12px;}
h5.blog_le_t em {
    font-weight: 400;
}

.fa-circle-chevron-right::before {
    content: "\f105";
}

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

.accordion li .link a {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
    transition: all 1s;
    background: #fff;
    color: #7d961e;
    border-radius: 12px;
}

.blog_le .accordion>li:hover,
.blog_le .accordion>li.on_this_category {
    background: #FFF !important;
    transition: all 1s;
    border-radius: 12px;
}

.blog_le .accordion > li.on_this_category .link a {
    color: #fff !important;
    background: #7d961e !important;
}
.blog_le .accordion > li:hover .link a{
    background: #7d961e !important;
    color: #fff !important;
    border-radius: 12px;
}

.blog_le .accordion>li:hover .link i,
.blog_le .accordion>li.on_this_category .link i {
    color: #fff !important;
}

.submenu a {
    background: #eee;
}

.submenu li.on_this_category a,
.submenu a:hover {
    background: #7d961e;
    color: #fff;
    padding-left: 35px;
}

.submenu a i {
    left: -30px;
    transition: all 0.4s;
}

.submenu a:hover i {
    left: 10px;
    transition: all 0.4s;
}

.submenu a:hover i,
.submenu li.on_this_category a i {
    left: 10px;
    transition: all 0.4s;
}

h5.blog_le_t {
    margin-bottom: 15px;
    font-weight: 400;
    margin-left: 10px;
    font-family: "微軟正黑體", cursive;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    display: none;
}

h5.blog_le_t span {
    font-size: 16px;
    text-transform: uppercase;
}

/*文章內頁*/

h4.blog_category_title {
    color: #345d43;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.blog_box_edit * {
    line-height: 150%;
    color: #1e150d;
    letter-spacing: 0.04em;
    font-size: 15px;
}
.articel_mainPic{ display: none; }

.blog_back a.article_btn_next,
.blog_back a.article_btn_prev,
.blog_back a.article_btn_back {
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 8px;
    font-family:  "Huninn",  system-ui;
    transition: 0.5s;
}
.blog_back a:hover {box-shadow: 0px 0px 0px #c3d89e; }

/*相關文章*/

.news_related {
    background: transparent;
}

.news_related h6 span:before {
    font-size: 22px;
    color: #444;
    letter-spacing: 1px;
}

.news_related_list li figure{ border-radius: 24px ;}

.news_related_list li a {
    transition: all .5s;
    background: transparent;
}

.news_related_list li a:hover {
    transform: translateY(-20px);
    transition: all .5s;
}

.lastPage {
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui;
    transition: all .5s;
}
.lastPage:hover{
    box-shadow: 0px 0px 0px #c3d89e;
}
.news_related h6 {
    display: none;
}

@media screen and (max-width: 768px) {
    .news_related_list li a p {
        font-size: 14px;
    }
    .lastPage {
        font-size: 13px;
        padding: 5px 20px;
        margin: 40px auto 0px;
    }
}

/*文章A-外觀*/

.blog_page.article_a .main_part {
    max-width: 1500px;
}

.blog_page.article_a h4.blog_category_title {
    display: none;
}

.article_a .subbox_item a {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    background: #f3f0ec3d;
}

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

.article_a .subbox_item a:before {
    content: 'MORE';
    top: 93%;
    bottom: 0px;
    left: 50%;
    width: 108px;
    height: 35px;
    text-align: center;
    background: #7d961e;
    font-size: 12px;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui;
    border: 0px;
    transform: translate(-50%, -100%) scale(1);
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article_a .subbox_item a:hover:before {
    transform: translate(-50%, 60%) scale(1);
    transition: all .5s ease-in-out;
}

.article_a .subbox_item a:hover:after {
    opacity: 1;
    width: 100%;
    transition: all 500ms;
}

.article_a .subbox_item a:after {
    background: rgba(0, 0, 0, 0.5);
}

.article_a .subbox_item a:after {
    content: '';
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background: #ffffff45;
    opacity: 0;
    border:2px dashed #f4d67a;
    border-radius: 24px;
}

.article_a .blog_list_ri h5 {
    font-weight: 600;
    font-size: 18px;
    color: #345d43;
    -webkit-line-clamp:2;
}

.blog_list_ri em{
    color: #fff;
    background: #f2ac76;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 13px; 
    text-align: center;
}
.article_a .blog_list_ri p {
    font-size: 14px;
    color: #1e150d;
    letter-spacing: 0.5px;
}

.blog_list_le img{ border-radius: 24px;}

.i_blog_le, .blog_list_le {position: relative;padding-bottom: 70%;height: 0;border-radius: 30px;overflow: hidden;}/*文章縮圖長寬比例，100% →100:100 = 1:1 正方形 */
.i_blog_le img, .blog_list_le 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%);
}


/*文章B-外觀*/

.blog_page.article_b .main_part {
    max-width: 1500px;
}

.blog_page.article_b h4.blog_category_title {
    display: none;
}

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

.article_b .subbox_item a {
    border: 1px solid #d3d3d3;
    grid-gap: 15px;
    grid-template-columns: 250px 1fr;
}

.article_b .subbox_item a:before {
    content: '◄';
    background: #0c263d;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0px;
    right: 0px;
    opacity: 0;
}

.article_b .subbox_item a:hover:before {
    content: 'READ MORE';
    width: 100%;
    border-radius: 0px;
    font-size: 13px;
    opacity: 1;
}

.article_b .subbox_item a:after {
    content: '';
    background: #6c9ac224;
    transition: all .5s;
    width: 0%;
    z-index: -1;
}

.article_b .subbox_item a:hover:after {
    width: 100%;
}

.article_b .blog_list_ri p {
    font-size: 13px;
    color: #666;
    letter-spacing: 1px;
}

.article_b .blog_list_ri {
    padding: 15px;
}

@media screen and (max-width: 768px) {
    .blog_le .accordion{ display: block; }
    .subbox_item{ border-bottom: 0px ;}
    .article_b .subbox_item a {
        display: flex;
        flex-direction: column;
    }
    .blog_subbox {
        grid-template-columns: 1fr 1fr;
    }
    h5.blog_le_t span {
        display: none;
    }
    .article_a .blog_subbox {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .article_a .main_part {
        padding-top: 0px;
    }
    .article_a .blog_list_ri h5 {
        font-weight: 400;
        font-size: 16px;
    }
    .blog_list_ri em {
        font-size: 12px;
    }
    .article_a .blog_list_ri p {
        font-size: 13px;
        color: #7f7f7f;
        letter-spacing: 0.5px;
    }
    .edit {
        line-height: 170%;
        font-size: 14px;
    }
}

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


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



.album_page .main_part,.album_info_page .main_part { max-width: 1500px;}
.album_page .show_content,.album_info_page .show_content{ padding-top: 20px;}

.album_page #content,.album_class_page #content,.album_info_page #content {
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/in-bg.jpg);
    background-position: top ;
}
/* 相簿=== */
.show-list .item {
    width: 100%;
}
.album_page #content .show-list{
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:30px;
}
.show-list .show_pic {
    /* padding-bottom: 72%; */
    overflow: hidden;
    border-radius: 24px;
}

.show-list .show_pic img,.pic-list .show_pic img {
    transition: .7s ease-out;
    transform: scale(1);
    
}

.show-list .show_pic img:hover,.pic-list .show_pic img:hover {
    opacity: 0.75;
    transform: scale(1.2);
}

.show-list .show_name {
    text-align: center;
    margin: 20px;
    color: #2f6b4f;
}

.show-list .item:hover .show_name {
    color: #5f897e;
}

.show-list .item:hover .overlay {
    display: none;
}

/* 相簿內頁==== */
.pic-list {
    column-count: 2;
    column-gap: 10px;
}

.pic-list .item {
    width: 100%;
    margin: 0px;
    padding: 0;
}

.pic-list .show_pic {
    padding-bottom: 0;
    height: auto;
    border-radius: 20px;
}

.album_fixed_title{ 
    background: unset;
}
.subalbum-menu h2{
    color: #7d961e; display: none; 
}

.album_class_page #content .show-list { grid-template-columns:1fr 1fr 1fr; }

/* 相簿內頁文案 */
.album_class_page .other_subalbum li p { font-family:   "Huninn",  "Freckle Face", system-ui;   color: #345d43;  text-align: center; font-weight: 400 ; }
.other_subalbum li{ background: transparent ;}
.pic-list .show_pic img{  }

@media screen and (max-width:1200px) {
    .album_page #content .show-list{
    grid-template-columns:1fr 1fr;
    }       
    .show-list{
        grid-template-columns:1fr 1fr 1fr;
        grid-gap:35px;
    }
}

@media screen and (max-width: 768px) {
    .show-list{
        grid-template-columns:1fr 1fr;
        grid-gap:10px;
    }
    .album_class_page #content .show-list,.album_page #content .show-list{ grid-template-columns:1fr 1fr; }
}
@media screen and (max-width: 480px) {
    .album_class_page #content .show-list,.album_page #content .show-list{ grid-template-columns:1fr; }
    .pic-list { grid-template-columns:1fr 1fr; }
}

.other_album_choice li {
    background: #7d961e;
    box-shadow: 7px 7px 0px #c3d89e;
    border-radius: 16px;
}



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


/* 導覽圖 */
.map_page #content  {
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/in-bg.jpg);
    background-position: top ;
}


/* 營區房型 營區訂單管理 */
.CampIndexPage  #content, .CampCalendarPage  #content, .CampOrderPage #content ,.remit_page #content ,.Camp_recheck_page #content  {
    background-image: url(https://pic03.eapple.com.tw/shanjinghouse/in-bg.jpg);
    background-position: top ;
}
.camps_list .camp_pic{ border-radius: 24px; }
.camps_list .camp_pic img { transition: .7s ease-out;  transform: scale(1); } 
.camps_list .camp_pic img:hover {  opacity: 0.75;  transform: scale(1.2); }

.camps_list .camp_name{ color: #345d43 ; font-size: 22px; }
.camps_list .camp_price > p b{  color: #f2ac76 ; font-size: 1.2rem; }
.camps_list li a > b {
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui;
}
.camps_list li:hover a > b { background-color: #7d961e ; box-shadow: 0px 0px 0px #c3d89e;}

/* 內頁 */
.slick-initialized .slick-slide,.slick-list{ border-radius: 24px;}
.slider-nav .slick-slide img{ height: 100%; }
.camp_info_name{ font-size: 24px; color: #345d43 ; }
.camp_info .info_title{ background: #a8c879 ;}

#go_calendar{ 
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui;
    transition: 0.5s;
}
#go_calendar:hover { box-shadow: 0px 0px 0px #c3d89e; }

.camp_intro_setting dd{ border-radius: 12px;}
.camps_tabs ul.tabs li{ 
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui;}
.camps_tabs ul.tabs li.active,.camps_tabs ul.tabs li:hover{ 
    box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e;
}
.camps_tabs ul.tabs li.active:after{ border-color: #7d961e transparent transparent transparent; }


/* 訂單管理 */
.calendar h2.month .month_choice{
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 12px;
    font-family:  "Huninn",  system-ui; }
.calendar h2.month .month_choice:hover {  box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e; }
.calendar h2.month{ color: #345d43; font-size: 26px;  }
.calendar ol.days li .text_total p em{ color: #f2ac76 ; }
.calendar ol.days li a.event{
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 6px;
    font-family:  "Huninn",  system-ui; 
    border: 0px;
}
.calendar ol.days li a.event:hover{ box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e;}


/* 訂單查詢 */
.title_snd p span{ color: #345d43; }
.camp_lists h4.article_title { color: #345d43; }
.searchbox .button_cart,.searchbox .button_cart.next{
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 6px;
    font-family:  "Huninn",  system-ui; 
}
.searchbox .button_cart:hover{
    box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e;
}

.camporder_bottom_20201220 h5:not(.rule_txt2 h5){ color: #628b4e;}
.camporder_bottom_20201220 section.camp_b_info03 .button_cart,.camporder_bottom_20201220 section.camp_b_info03 .button_cart.next{
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 6px;
    font-family:  "Huninn",  system-ui; 
}
.form_btn .button_cart:hover{
     box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e;
}

/* 匯款通知 */
.rewrite_simple,.send_simple{
    transition: 0.5s;
    background: #7d961e;
    color: #fff;
    box-shadow: 5px 5px 0px #c3d89e;
    border-radius: 6px;
    font-family:  "Huninn",  system-ui; 
}
.rewrite_simple:hover,.send_simple:hover{
    box-shadow: 0px 0px 0px #c3d89e;
    background-color: #7d961e;
}

@media screen and (max-width: 450px) { 
    .slider-nav .slick-slide img{ height: unset;}
    .slick-initialized .slick-slide,.slick-list{ border-radius: 0px;}
}


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


.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 70px; }
#to_top { bottom:60px;}
}

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