/*header*/
.button-light {border-radius: 50px;border: 1px solid #F4AA3B;padding: 9px 31px;width: 139px;}
.button-dark {border-radius: 50px;padding: 9px 28px;background-color: #F4AA3B;width: 139px;}
.button-light a {color: #F4AA3B;}
.button-light:hover {background-color: #e4ca00;border: 0px;}
.button-dark:hover {background-color: #e4ca00;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: #e4ca00;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;}



:target {scroll-margin-top: 200px;}
body:target {scroll-margin-top: 200px;}
  

p{word-break:normal;color: #636363;letter-spacing: 0.1em;}
.row{gap: 0;}
.blog-item{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.blog-item .row{width:calc(95vw - 24px);}
.blog-item h1{margin-top: 104px;color: #333333;}
.title-drs{font-size: 18px;text-align: center;margin-top: 32px;margin-bottom: 64px;}
.carousel-indicators{margin-bottom: -3rem;}
.carousel-indicators [data-bs-target]{background-color: #bebebe;}
.carousel-indicators .active{background-color: #F4AA3B;}

.filter-buttons{padding: 32px 0 32px 0 ;}
.filter-buttons button{border: 0px transparent;background: transparent;font-size: 18px;padding: 0 32px;letter-spacing: 0.05em;transition: 0.5s;}
.filter-buttons button:hover{color: #F4AA3B;}



.article-container{display: flex;justify-content: center;}
.article-container img{width: 700px;height:calc(700px * 9 / 16);border-radius: 8px; }
.article-container .txt{max-width: 768px; display: flex;flex-direction: column;justify-content:space-around;padding: 24px 0 24px 64px;}
.article-container .txt p,.article-container .txt h2,.blog-container .txt h3,.blog-container .txt p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
.article-container .txt p { line-height: 1.6em;-webkit-line-clamp: 4; /* 顯示的最大行數 */ }
.article-container .txt h2{font-size: 28px;font-weight: 500;letter-spacing: 0.01em;color: #333333; line-height: 1.2em;-webkit-line-clamp: 3; /* 顯示的最大行數 */}
.article-container span{font-size: 14px;font-weight: bold;}
.article-container .article-btn{display: grid;grid-template-columns: 1fr auto; align-items: center;}
.article-container button{font-size: 14px;border: 0px; background-color: #ffffff;color: #636363;border-radius: 50px;letter-spacing: 0.1em;transition: 0.5s;}
.article-container button:hover{letter-spacing: 0.3em;color: #F4AA3B;}



.blog-container{border-radius: 8px; border:1px solid #E8E8E8;overflow: hidden;position: relative;}
.blog-container .txt{padding: 40px 32px;color: #333333;}
.blog-container .txt h3{font-size: 20px;margin: 16px 0;-webkit-line-clamp: 2;}
.blog-container .txt p{-webkit-line-clamp: 3;}
.blog-container .img{object-fit: fill;overflow: hidden;}
.blog-container:hover img{transform: scale(1.2);transition: .5s;}
.blog-container:hover .txt h3{color:#F4AA3B;transition: 0.3s;}
.image{padding: 0 12px;}
.image img{width: 100%;object-fit: cover;border-radius: 8px 8px 0 0 ;}


/* dropdown */
.dropdown{border: 1px solid #333333;border-radius: 4px;padding: 0px 0;margin: 16px 0;width: 100%;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.05em;}
#sticky-element {top: 75px;position: sticky;background-color: #fff;z-index: 994;width: 100vw;display: flex;justify-content: center;}


@media screen and (max-width:1200px){
.article-container img{width: 450px;height:calc(500px * 9 / 16);}
.article-container .txt{padding: 12px 0 12px 24px;}
.article-container .txt h2{font-size: 22px;}
.article-container .txt p { -webkit-line-clamp: 3; /* 顯示的最大行數 */}}
    
@media screen and (max-width:900px) {
.article-container{flex-direction: column;}
.article-container .img{border-radius: 8px;overflow: hidden;}
.article-container img{width: 100vw;height:calc(100vw * 9 / 16);}
.article-container .txt{padding: 24px 0;}
.article-container .txt h2{font-size: 20px;margin: 12px 0;}
.article-container .txt p{font-size: 14px;}}
    
@media screen and (max-width:800px) {
.blog-item h1{margin-top: 48px;font-size: 28px;}
.title-drs{font-size: 16px;margin: 32px 24px;}
.image{padding: 4px;}}

@media screen and (max-width:576px) {
.image{padding: 0px;}
.title-drs,.dropdown .btn,p,a{font-size: 15px;}
}
      