/* v3/page/index.css — Homepage */
/* --- 3.0 Homepage Rules --- */
/* calendarbox: screen.prefixer.css 的 calendar 規則因 @keyframes 解析異常被瀏覽器忽略，
   這裡僅補上關鍵布局規則。注意：不可加 `.cal__cell:after {
 padding-bottom:100% }
`，
   否則 cell 高度會異常（與 screen.prefixer.css 的 `: after` 帶空格版行為不同）。 */
.calendarbox .cal__thead { display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 14px; justify-content: space-between; }
.calendarbox .cal__thead > div { text-align: center; font-size: 12px; width: calc((100% / 7) - 6px); white-space: nowrap; }
.calendarbox .cal__tbody { display: flex; flex-wrap: wrap; justify-content: space-between; }
.calendarbox .cal__tbody.hide .cal__cell { transform: translate(-10px, -10px); opacity: 0; transition: all 0.5s cubic-bezier(0.48, 1.64, 0.71, 1.51); }
.calendarbox .cal__tbody.show .cal__cell { transform: translate(0px, 0px); opacity: 1; transition: all 0.5s cubic-bezier(0.48, 1.64, 0.71, 1.51); }
.calendarbox .cal__tbody .cal__cell { position: relative; background-color: #F2F2F2; width: calc((100% / 7) - 6px); aspect-ratio: 1; margin-bottom: 6px; }
.calendarbox .cal__tbody .cal__cell .cal__content { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; margin: auto; padding: 9px; z-index: 1; font-size: 14px; font-weight: 400; display: flex; flex-direction: column; justify-content: space-between; }
.calendarbox .cal__tbody .cal__cell .cal__date { text-align: center; }
.calendarbox .cal__tbody .cal__cell.noday { background-color: #fff; text-indent: -9999px; }
.calendarbox .cal__tbody .cal__cell.offday { color: #fff; background-color: #3D9738; }
.calendarbox .cal__tbody .cal__cell.today { color: #fff; background-color: #D1AA6D; }
.calendarbox .cal__tbody .cal__cell.showmsg::before { transform: scaleX(1); }
.calendarbox .cal__tbody .cal__cell.showmsg .calendar_msgbox { opacity: 1; transform: translate(0, 0px); }
.calendarbox .cal__tbody .cal__cell.rightside .calendar_msgbox { left: auto; right: 0; }
.calendarbox .cal__tbody .cal__cell.leftside .calendar_msgbox { left: 0; right: auto; }
#owlcarousel1.owl-carousel.owl-theme .owl-nav { margin:0 auto }
#owlcarousel1.owl-carousel.owl-theme .owl-nav>.owl-prev { outline:none; position:absolute; left:50px; top:50%; bottom:0; right:auto; margin:0 auto; border:1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.2); height:58px; width:58px; margin-top:-29px }
#owlcarousel1.owl-carousel.owl-theme .owl-nav>.owl-next { outline:none; position:absolute; left:auto; top:50%; bottom:0; right:50px; margin:0 auto; border:1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.2); height:58px; width:58px; margin-top:-29px }
#owlcarousel1.owl-carousel.owl-theme .owl-dots { display:block; width:1200px; position:relative; margin:-20px auto 0; bottom:30px; text-align:left; padding-left:50px; }
#owlcarousel1.owl-carousel.owl-theme .owl-dots>.owl-dot>span { width:6px; height:6px; margin:5px 6px; background:#869791; margin:5px 3px }
#owlcarousel1.owl-carousel.owl-theme .owl-dots>.owl-dot:hover>span,#owlcarousel1.owl-carousel.owl-theme .owl-dots>.owl-dot.active>span { background:#D6D6D6 }
#owlcarousel1 .owl-item { opacity:1; transition:all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) }
#owlcarousel1 .owl-item .item { overflow:hidden }
#owlcarousel1 .owl-item .item .bg-image { background-size:cover; background-position:center; background-repeat:no-repeat; height:inherit }
#owlcarousel1 .owl-item.in .bg-image { animation-name:slideIn; animation-duration:2s; animation-fill-mode:both }
#owlcarousel1 .owl-item.in.active { z-index:2 !important }
#owlcarousel1 .owl-item.out .bg-image { animation-name:slideOut; animation-duration:2s; animation-fill-mode:both }
.owlcarousel_availproduct.owl-theme .owl-nav { margin-top:0 }
.owlcarousel_availproduct.owl-theme .owl-nav button.owl-prev { width:23px; height:27px; background:url(../../../images/icon/arrowleft.png) no-repeat center center !important; background-size:100% !important; left:0; top:50%; transform:translate(0px, -50%); position:absolute }
.owlcarousel_availproduct.owl-theme .owl-nav button.owl-next { width:23px; height:27px; background:url(../../../images/icon/arrowright.png) no-repeat center center !important; background-size:100% !important; right:0; top:50%; transform:translate(0px, -50%); position:absolute }
.index__filteroptions_outer .index__filteroptions_flex>div:first-child { border-left:0px; border-top:0px }
.index__filteroptions_outer .index__filteroptions_flex .sizeoption .print_input_flex>div:not(.addbox) { width:auto }
.index__filteroptions_outer .index__filteroptions_flex .deviation .selectStyleBox:after { right:0px }
.index__category_flex .index__category_linkimg img { height: 100%; object-fit: cover; }
.index__category_flex .index__category_linkbox>a:hover .index__category_linkimg img { transform:scale(1.1) }
.index__category_flex .index__category_linkbox>a:hover .index__category_linkimg:before { transform:scale(0.95); opacity:1 }
.index__category_flex .index__category_linkbox>a:hover .index__category_linkimg:after { opacity:.5 }
.index__category_flex .index__category_linkimg:before { content:"view"; position:absolute; left:0; top:0; right:0; transform:scale(1); bottom:0; border:2px solid #3D9738; z-index:1; opacity:0; transition:all 0.3s cubic-bezier(0.17, 0.7, 0.47, 0.96); display:-ms-flexbox; display:flex; -ms-flex-pack:center; justify-content:center; -ms-flex-align:center; align-items:center; color:#3D9738 }
.index__category_flex .index__category_linkimg:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:0; opacity:0; background-color:#ffffff; transition:all 0.3s cubic-bezier(0.17, 0.7, 0.47, 0.96) }
.index__subcategory_flex .index__category_linkbox:hover { z-index:99 }
.index__subcategory_flex .index__category_linkbox>a:hover { box-shadow:0px 14px 20px 4px #00000017; -webkit-box-shadow:0px 14px 20px 4px #00000017; -moz-box-shadow:0px 14px 20px 4px #00000017; -o-box-shadow:0px 14px 20px 4px #00000017 }
.index__subcategory_flex .index__category_linkbox>a:hover .index__category_linkimg img { transform:scale(1.1) }
.index__subcategory_flex .index__category_linkbox>a:hover .index__category_linktext { color:#3D9738 }
.index__subcategory_flex .index__category_linkbox>a:hover:before { transform:scale(1); opacity:1 }
.index__subcategory_flex .index__category_linkbox>a:before { content:"view"; position:absolute; left:0; top:0; right:0; transform:scale(1); bottom:0; border:2px solid #3D9738; z-index:1; opacity:0; transition:all 0.3s cubic-bezier(0.17, 0.7, 0.47, 0.96); display:-ms-flexbox; display:flex; -ms-flex-pack:center; justify-content:center; -ms-flex-align:center; align-items:center; color:#3D9738 }
.index__newsEachbox>a:after { content:""; position:absolute; width:80%; height:100%; left:0; top:0; bottom:0; margin:auto; background-color:transparent; z-index:1; transition:all 0.4s cubic-bezier(0.15, 0.38, 0, 0.86) }
.index__newsEachbox>a:hover { padding:18px 28px 18px 56px; color:#ffffff !important; padding:14px 18px 14px 26px }
.index__newsEachbox>a:hover:after { width:calc(100% + 20px); height:calc(100% + 20px); background-color:#D1AA6D; box-shadow:8px 8px 20px 0 rgba(32,33,36,0.08); width:100%; height:calc(100% + 10px) }
.index__newsEachbox>a:hover .index_nEbox_date { color:#ffffff !important }
.index__newsEachbox>a:hover .index_nEbox_title { padding-right:28px }
.index__newsEachbox>a:hover .index_nEbox_title h1 { font-weight:500 }
.index__newsEachbox>a:hover .arrow { -ms-flex:0 0 38px; flex:0 0 38px }
/* 我們的客戶：單張圖片滿版（覆蓋 screen.prefixer 的 12.5%） */
.index__clientsbox .index__subbox>a { flex: 1 1 100%; }
.index__clientsbox .index__subbox>a:hover { transform:rotateZ(1deg); filter:grayscale(0); opacity:1 }
.index__clientsbox .index__subbox>a img { padding: 0; }
/* #owlcarousel_other_purchase — moved to base.css (shared across product + blog detail pages) */
.index__filteroptions_outer .index__filteroptions_flex .searchbtnbox .btn-search_style1:before,.index__filteroptions_outer .index__filteroptions_flex .searchbtnbox .btn-search_style1:after { display:none }
.index__bannerflex .index__banner_right:after { content:""; display:block; padding-bottom:116.279% }
.index__knowledgebox .index__knowledgeflex a:hover { box-shadow:0px 26px 29px -23px #DEDEDE; -webkit-box-shadow:0px 26px 29px -23px #DEDEDE; -moz-box-shadow:0px 26px 29px -23px #DEDEDE; -o-box-shadow:0px 26px 29px -23px #DEDEDE }
.index__knowledgebox .index__knowledgeflex a:hover .index__knowledgeimgbox img { transform:scale(1.1) }
.index__knowledgebox .index__knowledgeflex a:hover .index__knowledgedesbox { background:#333333; color:#ffffff }
.index__knowledgebox .index__knowledgeflex a:hover .index__knowledgedesbox h3 { color:#3D9738 }
.index__knowledgebox .index__knowledgeflex a:hover .index__knowledgedesbox p { color:#ffffff }
#owlcarousel2 .owl-nav button:hover { background-color:transparent }
.index__knowledgebox .index__knowledgeflex .index__knowledgeimgbox:after { content:""; display:block; /* padding-bottom:63.14%; */ }
.knowledgetype_dropdown_flex .icon:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotateZ(-45deg); transform-origin:center; width:6px; height:6px; background-color:transparent; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; z-index:1; transition:all 0.3s cubic-bezier(0.15, 0.38, 0, 0.86) }
.knowledgetype_dropdown_flex .icon:after { content:""; position:absolute; left:0; top:0; bottom:0; right:0; z-index:-1; background-color:#3D9738 }
.knowledgetype_dropdown_flex ~ .options>label span:after { content:""; position:absolute; left:0; bottom:0; height:1px; background-color:#3D9738; width:100%; transform-origin:center center; transform:scaleX(0); transition:all 0.3s cubic-bezier(0.22, 0.86, 0.37, 0.97) }
.knowledgetype_dropdown_flex ~ .options>label input[type=radio]:checked ~ span { color:#3D9738 }
.knowledgetype_dropdown_flex ~ .options>label input[type=radio]:checked ~ span:after { transform:scaleX(1) }
/* 首頁部落格分類 active 底線（透明底線常駐佔位：owl 會把 .owl-stage-outer 高度鎖在初始值且 overflow:hidden，active 才長出的 2px 會被裁掉） */
.index__knowledgetyle_sliderbox a.index__knowledgetype_link.active,
.index__knowledgetype_btn_whole a.knowledgetype_btn_whole.active { color: #3D9738 !important; border-bottom-color: #3D9738; font-weight: bold; }
/* 首頁部落格分類文字不換行（owl autoWidth：item 依文字寬度自動收縮，不折行也不重疊） */
#owlcarousel3 .item { display: inline-block; width: auto; }
.index__knowledgetyle_sliderbox a.index__knowledgetype_link,
.index__knowledgetype_btn_whole a.knowledgetype_btn_whole { white-space: nowrap; display: inline-block; border-bottom: 2px solid transparent; }
.news-index-section .index__newsEachbox>a:before { content:""; position:absolute; width:100%; height:100%; left:0; top:0; bottom:0; margin:auto; background-image:linear-gradient(-90deg, #ffffff 70%,rgba(255,255,255,0) 100%); z-index:2; transition:all 1.5s cubic-bezier(0.24, 0.74, 0.3, 0.89); transform:translate(75px, 0) scaleX(1.9) skew(-30deg); transform-origin:right center }
.news-index-section .index__newsEachbox>a:after { content:""; position:absolute; width:100%; height:100%; left:0; top:0; bottom:0; margin:auto; background-color:#3D9738; background-image:linear-gradient(90deg, #3d9738 25%,#d1aa6e 100%); z-index:1; transition:all 0.6s cubic-bezier(0.15, 0.59, 0.3, 0.89) }
.news-index-section .index__newsEachbox>a:hover { box-shadow:0px 5px 10px 0 rgba(32,33,36,0.16) }
.news-index-section .index__newsEachbox>a:hover .arrow { background:url(../../../images/icon/arrow2.png) no-repeat right center; background-size:37px }
.news-index-section .index__newsEachbox>a:hover:before { transform:translate(100%, 0); transition:all 0.6s cubic-bezier(0.15, 0.59, 0.3, 0.89) }
.news-index-section .index__newsEachbox>a:hover:after { transform:translate(0px, 0); box-shadow:8px 8px 20px 0 rgba(32,33,36,0.08) }
.index__filteroptions_flex .selectCustomBox .options_innerbox>div>label:hover { background-color:#F5F5F5 }
/* .pro_custom_dots — moved to product.css (shared across product detail pages) */
.aboutbanner_inner .banner_slogan:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#1b6f2d; background-image:linear-gradient(60deg, #1b6f2d 0%,#3d9738 46%,#b3d201 100%); z-index:0; opacity:.9 }
.aboutbanner_inner .banner_slogan .s_box:first-child { margin-top:0px }
.aboutbanner_inner .banner_slogan .s_box .title:after { content:""; height:2px; width:21px; background-color:#ffffff; margin-left:5px; content:""; height:1px; width:11px }
.search-index-section .index__subcategory_flex .index__category_linkbox>a:hover .btn__style5 { color:#ffffff; background-color:#3D9738 }
@media (max-width: 1024px) {
#owlcarousel1.owl-carousel.owl-theme .owl-dots { bottom: 0; padding-left: 10px; }
 }
@media (max-width: 769px) {
 .index__category_content { padding: 20px 0 0px 0; }
 }
 @media (max-width:500px){
   .calendarbox .cal__thead > div{
       width: calc((100% / 7) - 2px);
   }
   .calendarbox .cal__tbody .cal__cell{
       width: calc((100% / 7) - 2px);
       margin-bottom: 2px;
   }
   .calendarbox .cal__tbody .cal__cell .cal__content{
       padding: 6px 2px;
   }
 }