
/*header*/
.button-light {border-radius: 50px;border: 1px solid #8FC31F;padding: 9px 31px;width: 139px;}
.button-dark {border-radius: 50px;padding: 9px 28px;background-color: #8FC31F;width: 139px;}
.button-light a {color: #8FC31F;}
.button-light:hover {background-color: #96d117;border: 0px;}
.button-dark:hover {background-color: #96d117;border: 0px;}
.nav-items a {padding: 0 21px;font-size: 16px;line-height: 20px;height: 20px;display: block;color: #333333;}
.nav-items a:hover{padding-top: 20px;display: inline-block;transition: all 0.5s;color: #333333;}
.nav-item-button a::before{content: attr(data-chinese);opacity: 0;position: absolute;background-color: #96d117;border-radius: 25px;width: 139px;height: 44px; color: #ffffff;font-weight: bold;transform:rotate3d(1,0,0,-90deg);transition: 0.5s;text-align: center;padding: 11px 13px 11px 19px;}



p{word-break:break-all;letter-spacing: 0.1em;color: #333333;}
.material-item{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.material-btn:hover {color:#8FC31F;font-weight: bold;}
.filter-container {overflow-x: auto;white-space: nowrap;}
.filter-buttons button{margin: 0 8px;border-radius: 50px; border: 0px transparent;background: transparent;font-size: 16px;padding: 8px 32px;letter-spacing: 0.1em;transition: 0.5s;}
.filter-buttons button:hover{border-radius: 50px;; background-color: #8FC31F;color: #fff;}
.material-btn{font-size: 16px;color:#333333;border: 0px transparent;padding: 13px 48px;background-color: #fff;}


/* dropdown */
.dropdown{border: 1px solid #333333;border-radius: 4px;padding: 0;margin: 16px 0;width: 600px;max-width: calc(95vw - 24px);}
.dropdown .btn{width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 8px 24px;}
.dropdown .btn:focus{border: 0px transparent;}
.dropdown-menu{width: 100%;}
.dropdown-item{padding: 24px 24px;font-size: 16px;letter-spacing: 0.1em;}
#sticky-element {top: 75px;position: sticky;background-color: #fff;z-index: 996;width: 100vw;display: flex;justify-content: center;padding:0;}
#sticky-element-filter {top: 75px;position: sticky;background-color: #fff;z-index: 995;width: 100vw;display: flex;justify-content: center;padding: 24px 0 24px 0;}
@media screen and (max-width:1400px) {.filter-buttons{margin: 0;}
#sticky-element-filter {top: 195px;padding: 32px 0 32px 0;}
.dropdown{margin: 30px 0 12px 0;}}

@media screen and (max-width:800px) {
.dropdown{margin:23px 0;}
.material-item .filter-container{align-items:flex-start;}
.filter-buttons {margin: 0px 0px 12px 24px;}
.filter-buttons button{margin: 0;padding: 6px 20px;}
#sticky-element-filter {top: 195px;padding: 16px 0 8px 0;}
}


@media screen and (max-width:576px) {
.filter-buttons {margin: 0px 0px 12px 24px;}
.dropdown .btn,.filter-buttons button,p,.gallery-item span{font-size: 15px;}
}

/* 下方gallery */
.gallery-item .row{width: 95vw;margin: 0 auto;}
.gallery-item img{ width: 100%;border-radius: 4px;overflow: hidden;transition: 0.5s;}
.gallery-img{overflow: hidden;position: relative;}
.gallery-item span{font-size: 16px;font-weight: bold;letter-spacing: 0.1em;line-height: 160%;}
.gallery-item p{ margin-top: 24px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;line-height: 1.4em;-webkit-line-clamp: 3;}


.gallery-img::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(150, 209, 23,0.4); opacity: 0;transition: opacity 0.3s ease-in-out;border-radius: 8px;}
.gallery-img:hover::before {opacity: 1;}
img[alt="zoomIn"]{width: 50px;height: 50px;opacity: 0;position: absolute;top:calc(50% - 25px);left:calc(50% - 25px) ;}
.gallery-img:hover img[alt="zoomIn"]{opacity: 1;z-index: 994;}




  