@charset "utf-8";
/* 全站 header / 主選單（原 index.css，內頁也需載入） */
.menuInner{padding:0px 50px;}
.menuTopLink{padding:20px 0;transition: all .5s;width: 100%;}
.menuTopLink>.menuInner{display: flex;align-items: center;justify-content: space-between;}
.menuLogo img{max-width:250px;}
.menuSocial__item{color: #1c4925;}
.menuSocial__item i{width: 40px;height: 40px;display: inline-block;border: 1px solid;text-align: center;line-height: 31px;border-radius: 100%;margin-right: 10px;padding: 3px;}
.menuSocial__item:first-child i{font-size:1.4rem;padding-left: 3px;}
.menuSocial__item+.menuSocial__item{margin-left:10px;}
.menuTop__outer{transition:all .5s;}
.menuTop__outer.fixed{position:fixed;top:0;left:0;width:100%;background: #fff;z-index: 999;}
.menuTop__outer.fixed .menuTopLink{padding:5px 0;}
header .topMenu .menuBtn{display:none}
header .topMenu .menuOuter{display:flex;align-items:center;justify-content: center;position: relative;background: #1c4925;}
header .topMenu .menuOuter .menuList{display: block;/* position: relative; */}
header .topMenu .menuOuter .menuList:not(:last-child) .menuLink:before{content:'';position:absolute;right:0;bottom: 13px;width:1px;height: 20px;background: rgb(255 255 255 / 50%);}
header .topMenu .menuOuter .menuLink{position:relative;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;display: flex;align-items: center;justify-content: center;width: 100%;padding: 10px 15px;color: #fff;}
header .topMenu .menuOuter .menuLink input::placeholder{color:#bebebe;}
header .topMenu .menuOuter .menuLink.active{background:#e2ede7}
.searchZone{position:relative;}
.searchZone input{padding-left:30px;}
.searchBtn{position:absolute;left: 25px;color: #555;top: 2px;}
.menuList .dropMenu{position:absolute;left:0;top: 53px;width:100%;padding: 30px 50px;background: rgb(0 0 0 / 80%);display:none;box-shadow: 0px 20px 10px rgb(0 0 0 / 15%);z-index: 99;}
.menuList .dropMenu .dropMenuTitle{font-size:1.8rem;font-weight:700;width:250px;position:relative;margin-bottom:35px}
.menuList .dropMenu .dropMenuTitle:before{content:"";position:absolute;left:0;bottom:-20px;width:40px;height:5px;background:#21a059}
.menuList .dropMenu .dropList{max-width: 1325px;margin: 0 auto;display: grid;grid-template-rows: repeat(5, 1fr);grid-column-gap: 1em;grid-row-gap: 1em;align-items: start;grid-auto-flow: column;}
.menuList .dropMenu .drop-item{transition: all .5s;}
.menuList .dropMenu .drop-pic{height:80px}
.drop-name{font-weight:bold;padding: 10px;color: #fff;font-size: 1.1rem;margin-bottom: 0;position: relative;display: flex;align-items: center;}
.drop-name:after{content:'\f054';margin-left: auto;font-family: 'Font Awesome 5 Free';margin-left: auto;}
.drop-name span{font-size:.9rem;font-weight: 400;margin-left: 3px;}
.drop-name p{margin-bottom:0;}
.drop-name:hover{color:#fff;}
.drop-list-item{padding-left:10px;display: none;height: 350px;overflow-y: auto;}
.menuList .dropMenu .drop-item .drop-list-item a{display: flex;align-items: center;color: #fff;font-size: 1rem;padding-bottom: 8px;}
.drop-list-item a:last-child{padding-bottom:0;}
.menuList .dropMenu .drop-item:hover{box-shadow: 0px 10px 15px rgb(0 0 0 / 0.25);}
.menuList .dropMenu .drop-item .drop-list-item a:hover:before{padding-left:10px}
.menuList .dropMenu .dropList .drop-item-list{display:flex;width: 100%;flex-wrap: wrap;}
.menuList .dropMenu .dropList .drop-item-list .drop-sec{width:25%}
.menuList .dropMenu .dropList .menuItem{display:flex;align-items:center;margin-right:45px;position:relative}
.menuList .dropMenu .dropList .menuItem:after{content:"";font-family:bootstrap-icons!important;font-size:.9rem;position:absolute;right:-25px;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.menuList .dropMenu .dropList .menuItem:hover{color:#21a059}
.menuList .dropMenu .dropList .menuItem:hover:after{right:-35px}
.dropList_item ul{display: none;}
.drop-sec.back{display:none;}

@media (max-width: 991px) {
    .menuLogo img{max-width: 220px;}
    header .topMenu .menuOuter .menuList:last-child .menuLink{display: block;}
    .menuList .dropMenu{top: 78px;}
    .searchZone input.ml-3{margin-left: 0 !important;}
    .searchBtn{left: 8px;}
    .menuList .dropMenu .dropList{grid-template-rows: repeat(8, 1fr);}
}

@media (max-width: 768px) {
    .menuInner {padding: 0px 20px;}
    header .topMenu .menuOuter .menuLink:hover{color:#FFF}
    header .topMenu{flex-wrap:wrap;display: flex;width: 100%;justify-content: space-between;align-items: center;}
    header .topMenu .menuOuter .menuLink:after{display:none;}
    header .menuLogo img{width: 180px;}
    header .topMenu .menuBtn{display:block;background: #1c4925;color:#fff;border:none;height:40px;width: 40px;line-height:40px;font-size:1.5rem;text-align:center;cursor: pointer;}
    header .topMenu .menuOuter{display:none;width:100%;justify-content:center;text-align:center;}
    header .topMenu .menuOuter .menuLink{padding:10px;width:100%;border-top:1px solid #eee;border-bottom:1px solid #eee;margin-top:-1px;text-align:left;color:#fff}
    .menuSocial{display:none;}
    .menuTopLink{padding:10px 0;}
    .menuList:last-child{display:none}
    .menuList .dropMenu{position:relative;top:0;padding: 0;font-weight:700;}
    .menuList .dropMenu .dropMenuTitle{display:none}
    .menuList .dropMenu .dropList{width:100%;height: 350px;overflow-y: auto;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(10, 1fr);}
    .menuList .dropMenu .dropList .menuItem{flex-wrap:wrap;width:100%;padding:10px 0;font-size:.9rem;padding-left:20px;border-bottom:1px solid #eee}
    .menuList .dropMenu .dropList .drop-r{width: 100%;position: absolute;right: 0;top: 0;background: #fff;padding-left: 0;}
    .menuList .dropMenu .dropList .drop-l{width:100%;padding-right: 0;}
    .menuList .dropMenu .dropList .drop-l a{background:#eee;margin-bottom: 0;padding: 10px;border-bottom: 1px solid #d5d5d5;display: flex;align-items: center;font-size: .9rem;}
    .menuList .dropMenu .dropList .drop-l a.active:after, .menuList .dropMenu .dropList .drop-l a:hover:after{bottom:10px;right: 10px;}
    .menuList .dropMenu .drop-item{width:100%;}
    .menuList .dropMenu .drop-pic{width: 25%;height: 100%;}
}

@media screen and (max-width:640px) {
    .drop-name{font-size:.9rem}
    .menuList .dropMenu .dropList{grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(12, 1fr);}
}