@charset "utf-8";
  
body {font-size: 16px;color: #666;background: #fff;font-family: "Huninn", sans-serif;}
	
 :root {
    --main-color: #8B6248;/* 品牌主色咖啡棕 */
    --vh: 1vh;
}

a {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus  { text-decoration: none; outline: none;}
a:focus, a:hover  {text-decoration: none;}
a:hover {color: #666;}
a,
button {
    color: #666;
    outline: medium none;
    cursor: pointer;
}
button {
	padding: 0px;
	border: none;
	outline: none;
	background: none;
	display: inline-block;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;


}

/*--- Button Style ---*/
 button  {
  cursor: pointer;
  border: 0;
  padding: 10;
  background-color: transparent;
}

.thm_btn {  color: #ffff;background: var(--main-color);  }
.thm_btn:hover { color: var(--main-color);background-color: #eee;}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {outline: 0}
h1,
h2,
h3,
h4,
h5,
h6 {color: #333;margin-top: 0px;  }
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {color: inherit;}
h1,
h2{color: var(--main-color); }
ul {margin: 0px;padding: 0px;}
li {list-style: none}
img {max-width: 100%;height: auto;}
p {line-height: 25px;margin-bottom: 15px; }
hr {
    border-bottom: 1px solid #999;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}
 
i,
span,
a {display: inline-block;}
a {text-decoration: none;}    

 
.material-symbols-outlined {
     vertical-align: -8px;
     font-size:35px;
}
      
.header_area{
	background: #fff;
	height:105px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
	z-index:999;
	-webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
	position: relative;
}

.header_area .brand img{width:247px;}

.main_menu_list .nav-link { 
	position: relative;
	padding-left:50px!important;

}
.main_menu_list .nav-link .material-symbols-outlined {
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
}
 

.main_menu_list .nav-link small {
    display: block;
    font-size: 11px;
    line-height: 1.1;
    margin-top: -3px;
}

.mobile-nav .nav-link { font-size:12px;}
.mobile-nav .nav-link .material-symbols-outlined { display:block; font-size:26px;}
.mobile-nav .nav-link small {
    display: block;
    font-size: 10px;
    line-height: 1.1;
    margin-top: -3px;
}


.main_menu ul li {
	display: inline-block;
	margin-right:40px;
	position: relative;
}
.main_menu ul li:last-child {margin-right: 0;}
.main_menu ul li a {font-size:20px; padding: 25px 0;display: inline-block;position: relative;}

.main_menu ul li:hover > a::before, .main_menu ul li.active > a::before {
	width: 100%;
    right: auto;
    left: 0;
}
.main_menu ul li:hover > a,  .main_menu ul li.active > a {
	color: var(--main-color);
}
.main_menu ul li ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	padding: 15px 0;
	border-radius: 3px;
	z-index: 99;
	transform-origin: 50% 0;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
}
.main_menu ul li:hover > ul.sub-menu {
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
}
.main_menu ul li ul.sub-menu li {margin: 0;display: block;padding: 6px 25px;}
.main_menu ul li ul.sub-menu li a {color: #666;display: block;font-size:16px; padding: 0;}
.main_menu ul li ul.sub-menu li:hover > a, .main_menu ul li ul.sub-menu li.active > a {
	color: #73634d;
}
.main_menu ul li ul.submenu li a::before {
    background: none;
}
.main_menu ul li ul.sub-menu li ul.sub-menu {
	top: 10%;
	left: 100%;
	transform-origin: 50% 0;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
}
.main_menu ul li ul.sub-menu li:hover > ul.sub-menu {
	top: 0;
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
}

 
 
    
.sticky .main_menu ul li a { padding:15px 0; }
.sticky .brand img{width:200px;} 
.sticky {height:80px;
	background: #fff;
	left: 0;
	margin: auto;
	position: fixed;
	top: 0;
	width: 100%;
	border-bottom: 0;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
	z-index: 44;
	-webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
}
 
  
 
@media (max-width: 991.98px) {
.header_area{background: #fff;height:73px;}
 .border-end { border-right: 0 !important;}
       
    
 
.footer-area{margin-bottom:80px;}
 .footer-area {text-align: center;}
 .mobile-brand{  }
.mobile-brand img{width:230px;  }
.sticky .mobile-brand img{width:180px;  }
.sticky {height:55px;}

 .mobile-nav{display:block!important;align-items: center;
box-shadow: 0 -3px 3px -0px rgba(0,0,0,0.15);
	width:100%;
	height:80px;
	position: fixed;
	bottom: 0px;
	background-color: #FFF;z-index:1000}
 .mobile-nav ul li{display:block;padding:15px;width:25%;text-align:center;float:left}
 
  .poster-ad { 
     height: calc(100% - 153px)!important;
	height: calc(100dvh - 153px)!important;
	height: calc(100vh - 153px)!important;
 	height: calc(100svh - 153px)!important;
 
}
   
.Specialty {     height: auto !important;
	height:auto !important;
        background-image: url(../img/art2.jpg) !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
    }
	
.drop-container {
    height: 180px!important;	
}	
	
} 

.Specialty {
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
    height: 100svh ;
	height: 100vh ;
    background-image:
      url(../img/Specialty-bg.png),
       url(../img/art.jpg);     
    background-repeat:
        no-repeat,
        no-repeat;
    background-position:
       left bottom,
	   right center;
    background-size:
        auto,
        auto;
}
.specialty-img {
    position: relative;
}

.specialty-img img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.drop-container {
    position: absolute;
    z-index: 2;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    height: 250px;
    margin: 0;

    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
}

        /* 水滴容器，用來定位起點 */
  

        /* 水滴主體 */
        .water-drop {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            
            /* 初期形狀：正圓形（懸掛在頂部準備掉落） */
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            
            /* 利用陰影營造立體高光與通透感 */
            box-shadow: 
                inset -3px -3px 5px rgba(0, 0, 0, 0.3),
                inset 3px 3px 5px rgba(255, 255, 255, 0.6),
                0 4px 6px rgba(0, 0, 0, 0.2);
            
            /* 綁定下落動畫 */
            animation: fallw 2.5s cubic-bezier(0.4, 0, 0.8, 0.3) infinite;
        }

        /* 下落與拉伸動畫關鍵影格 */
        @keyframes fallw {
            0% {
                top: 0;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                opacity: 0;
            }
            /* 10% - 20%: 水滴逐漸聚集、變大並準備分離 */
            15% {
                top: 0;
                width: 38px;
                height: 45px;
                /* 逼真的淚珠狀：上方尖、下方圓 */
                border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
                opacity: 1;
            }
            /* 20% - 60%: 瞬間拉長並向下快速墜落 */
            40% {
                top:90px;
                width: 18px;
                height: 65px;
                border-radius: 50% 50% 50% 50% / 15% 15% 75% 75%;
                opacity: 1;
            }
            /* 60% - 75%: 接近底部，速度極快，形狀拉到最長 */
            65% {
                top: 150px;
                width: 12px;
                height: 75px;
                border-radius: 50% 50% 50% 50% / 10% 10% 85% 85%;
                opacity: 0.8;
            }
            /* 75% - 100%: 落地消失（可視為砸中地面散開或淡出） */
            75%, 100% {
                top: 250px;
                width: 40px;
                height: 5px;
                border-radius: 50%;
                opacity: 0;
            }
        }

   
  .poster-ad {
	width:100%;
	overflow:hidden;
	height: calc(100% - 105px);
	height: calc(100dvh - 105px);
	height: calc(100vh - 105px);
	background-repeat: repeat-x;
	background-position: center bottom;
  background-size: auto!important;
	background-image: url(../img/bg.jpg);
}
 
 .alarm-swing {
    display: inline-block;
    transform-origin: top center;
    animation: alarmSwing 6s infinite;
}

@keyframes alarmSwing {
    0%       { transform: rotate(0deg); }
    2.78%    { transform: rotate(15deg); }
    5.56%    { transform: rotate(-12deg); }
    8.33%    { transform: rotate(10deg); }
    11.11%   { transform: rotate(-7deg); }
    13.89%   { transform: rotate(4deg); }
    16.67%   { transform: rotate(0deg); }
    100%     { transform: rotate(0deg); }
}

.widget_category li a {
	padding:20px 50px 20px 20px;
	line-height: 1;
	background-color: #eee;
	display: block;
	 
	position: relative;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	border-radius: 10px;
	overflow: hidden;
}
.widget_category li a:hover {background-color: #f8f8f8;}
.widget_category .icon {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.widget_category li:not(:last-child) {margin-bottom: 15px;}
/*隱私權 */
.accordion-box .block {position: relative;	/*overflow: hidden;*/margin-bottom: 15px;}
.accordion-box .block:last-child {margin-bottom: 0;}
.accordion-box .block .acc-btn {
	color: #000;background:#f8f8f8;padding:15px;
	position: relative;border-radius:10px;
	
	font-size: 16px;
	cursor: pointer;
	padding-left: 35px;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}
.accordion-box .block .acc-btn::before {
    top: 20px;
    left: 15px;
    line-height: 1;
    font-size: 14px;
    content: "menu";
    position: absolute;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.accordion-box .block.active-block .acc-btn::before {
    font-family: 'Material Symbols Outlined';
	 content: "keyboard_arrow_up";
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.accordion-box .block .acc-content {position: relative;display: none;padding:20px;}
.accordion-box .block .acc-content.current {display: block;}
.accordion-box .block.active-block {margin-bottom: 20px;}

 
/* 咖啡豆、咖啡粉、濾掛咖啡 */
.contact_info {
    background: #eee;
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    margin-bottom: 20px;
}

.contact_info .Item {
    padding: 20px;
    border-right: 1px solid #fff;
    width: 33.3%;
    text-align: center;
}
 .contact_info .Item:last-child {
    border-right: 0 !important;
}
 .contact_info .Item h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: left;
}
 .contact_info .Item h4 .material-symbols-outlined {
    font-size:60px;
    line-height: 1;
    flex-shrink: 0;
}
 .contact_info .Item p {
    line-height: 25px;
    margin-bottom: 0;
}
  
/* farmer LIST */
.oval {margin-top:30px;text-align:center; width:100%;overflow:hidden}
.oval img {aspect-ratio: 1 / 1;
	border-radius:50px;width: 90%;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.oval div:hover img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}
 
  
/* footer */
.footer-area h4{margin-bottom:10px; }
.footer-area { background-color: #eaeaea;padding:100px 0 30px 0;}
.footer-area .Copyright{  font-size:12px}	
 .footer-area img{  width:100px;height:100px;}
 
/* 上方圖片和標題 */
.page_banner {
	background-size:cover;
	height:150px;
	background: var(--main-color);
	background-repeat: repeat;
	background-position: center center;
	background-image: url(../img/common.jpg);
}

  
/* 手機版 */
@media (max-width: 767.98px) {
 
.contact_info{display:block!important;}
 .contact_info .Item {border-bottom-width:1px!important;width:100%!important;border-bottom-style: solid;text-align: center;border-bottom-color: #fff;border-right-width:0px!important;}
 .bean-container {
  	 height: calc(100dvh - 155px)!important;
	height: calc(100vh - 155px)!important;
 }

}
 

/* 滿版容器，隱藏超出範圍的豆子 */
.bean-container {
	position: absolute;
	width: calc(100vw - (100vw - 100%));
 z-index:998;
	overflow: hidden;
 	 height: calc(100dvh - 105px);
	height: calc(100vh - 105px);
 }

/* 豆子的基礎樣式（這裡以咖啡豆形狀為例） */
.bean {z-index:800;
  position: absolute;
  top: -20px; /* 初始位置在畫面外 */
  width: 100px;
  height: 70px;
  background: var(--main-color); /* 豆子的顏色（咖啡色） */
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; /* 捏出稍微橢圓的豆子形狀 */
  box-shadow: inset -2px -2px 0px rgba(0,0,0,0.2); /* 增加一點立體陰影 */
  animation: fall linear infinite;
}

/* 定義下落與旋轉動畫 */
@keyframes fall {
  0% {
    top: -20px;
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    top: 105svh; /* 掉落到畫面底部以下 */
    transform: translateX(100px) rotate(360deg); /* 邊掉邊往右飄並旋轉 */
    opacity: 0.3; /* 接近底部時稍微變透明 */
  }
}

/* 使用 nth-child 打散每顆豆子的位置、大小與速度 */
.bean:nth-child(1)  { left: 0%; width: 40px; height: 30px; animation-duration: 4s;  animation-delay: 0s; }
.bean:nth-child(2)  { left: 25%; width: 30px; height: 25px; animation-duration: 3.5s; animation-delay: 1.5s; }
.bean:nth-child(3)  { left: 40%; width: 40px; height: 30px; animation-duration: 5s;  animation-delay: 0.5s; }
.bean:nth-child(4)  { left: 55%; width: 35px; height: 30px; animation-duration: 4.2s; animation-delay: 2s; }
.bean:nth-child(5)  { left: 90%; width: 40px; height: 35px; animation-duration: 3.8s; animation-delay: 1s; }
.bean:nth-child(6)  { left: 85%; width: 30px; height: 40px; animation-duration: 4.7s; animation-delay: 2.5s; }
.bean:nth-child(7)  { left: 15%; width: 12px; height: 18px; animation-duration: 4.1s; animation-delay: 3s; }
.bean:nth-child(8)  { left: 48%; width: 50px; height: 40px; animation-duration: 3.2s; animation-delay: 1.2s; }
.bean:nth-child(9)  { left: 65%; width: 25px; height: 18px; animation-duration: 5.5s; animation-delay: 0.2s; }
.bean:nth-child(10) { left: 70%; width: 13px; height: 19px; animation-duration: 3.9s; animation-delay: 1.8s; }



/* 主圖 */
.details-main-img{
    width:100%;
    aspect-ratio: 1 / 1;   
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    cursor:zoom-in;
    position:relative;
    margin-bottom:15px;
    touch-action: pan-y;
}
.details-main-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.details-main-img:hover img{
    transform:scale(1.12);
}
/* 放大鏡 ICON */
.details-main-img .zoom-icon{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    pointer-events: none; /* 不阻擋點擊 */
}
.details-main-img .zoom-icon i{
    color: #fff;
    font-size: 25px;
}
/* 縮圖區 */
.product-thumb-wrapper{
    position:relative;
    margin-top:10px;
	margin-bottom:50px;
}

/* 縮圖箭頭 */
.product-thumb-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:28px;
    background:rgba(0,0,0,.4);
    color:#fff;
    width:38px;
    height:38px;
    text-align:center;
    line-height:38px;
    border-radius:50%;
    cursor:pointer;
    z-index:3;
}
.product-thumb-arrow.left{ left:-10px; }
.product-thumb-arrow.right{ right:-10px; }

/* 縮圖列表 */
.details-thumb-list{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-behavior: smooth;
    padding:0 30px;
    -webkit-overflow-scrolling: touch;
}
.details-thumb-list img{
    width:25%;               
    aspect-ratio: 1 / 1;      
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    opacity:.6;
    border:2px solid transparent;
    transition:.25s;
}
.details-thumb-list img.active{
    opacity:1;
    border:2px solid var(--main-color);
}

.details-thumb-list::-webkit-scrollbar { display: none; }
 #details-fullscreen{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

#details-fullscreen img{
    max-width:90%;
    max-height:85%;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    animation:fadeIn .35s ease;
}

#details-fullscreen .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:48px;
    color:#fff;
    cursor:pointer;
    user-select:none;
    padding:20px;
}

#details-fullscreen .arrow.left{ left:30px; }
#details-fullscreen .arrow.right{ right:30px; }
 #details-fullscreen .closeBtn{
    position:absolute;
    top:25px;
    right:35px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

@keyframes fadeIn{
    from{opacity:0;transform:scale(.96);}
    to{opacity:1;transform:scale(1);}
}

/* 固定目前頁面的選單顏色 */
.main_menu .main_menu_list > li > a.nav-link.act,
.main_menu .main_menu_list > li:hover > a.nav-link.act,
.main_menu .main_menu_list > li > a.nav-link.act:hover,
.main_menu .main_menu_list > li > a.nav-link.act:focus,
.main_menu .main_menu_list > li > a.nav-link.act:active,
.mobile-nav a.nav-link.act,
.mobile-nav a.nav-link.act:hover,
.mobile-nav a.nav-link.act:focus,
.mobile-nav a.nav-link.act:active {
    color: #8B6248 !important;
}

/* 固定目前選單的圖示顏色 */
.main_menu .main_menu_list > li > a.nav-link.act .material-symbols-outlined,
.mobile-nav a.nav-link.act .material-symbols-outlined {
    color: #8B6248 !important;
}