/* //////////////////////////////////////////////////////////////////////////// */
/* JhuangPing v.1.4.0 [04.11.2020]                                              */
/* Github: https://jhuangping.github.io                                         */
/* //////////////////////////////////////////////////////////////////////////// */
/* Header ===================================================================== */
.hd { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 9999; background: #fff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0); box-shadow: 0 5px 10px rgba(0, 0, 0, 0); -webkit-transition: all 0.5s; transition: all 0.5s; }

.hd_wp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.hd_logo { max-width: 13.51351%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; animation: jello; animation-duration: 1s; animation-delay: 3s; animation-iteration-count: 2; }

.hd_toggle { position: fixed; top: 15px; right: 20px; width: 40px; height: 40px; }

.hd_toggle span { display: block; position: absolute; top: calc(50% - 1px); left: 25%; width: 50%; height: 2px; border-radius: 50px; background: #105e21; -webkit-transition: all 0.5s; transition: all 0.5s; }

.hd_toggle span:first-child { -webkit-transform: translateY(-5px); transform: translateY(-5px); }

.hd_toggle span:last-child { -webkit-transform: translateY(5px); transform: translateY(5px); }

.hd_nav { max-width: 86.48649%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.hd_nav_main { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.hd_nav_sub { max-width: 13.75%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; }

.hd.is-move { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

@media all and (min-width: 1367px) { .hd.is-move .menu_item { padding-top: 3.3rem; padding-bottom: 3.3rem; } }

@media all and (min-width: 1221px) { .hd_toggle { display: none; }
  .hd.is-move .menu_item { padding-top: 2.3rem; padding-bottom: 2.3rem; -webkit-transition: all 0.5s; transition: all 0.5s; } }

@media all and (max-width: 1366px) { .hd_logo { max-width: 13.17716%; }
  .hd_nav { max-width: 88.72621%; }
  .hd_nav_sub { max-width: 180px; } }

@media all and (max-width: 1220px) { .hd { padding-top: 1rem; padding-bottom: 1rem; }
  .hd.is-open { border-bottom: 1px solid #105e21; }
  .hd_logo { max-width: 180px; }
  .hd_toggle.is-active span:first-child { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
  .hd_toggle.is-active span:nth-child(2) { width: 5%; opacity: 0; }
  .hd_toggle.is-active span:last-child { -webkit-transform: translateY(0px) rotate(-45deg); transform: translateY(0px) rotate(-45deg); }
  .hd_nav_main { position: fixed; top: 76px; left: 0px; width: 100%; height: calc(100vh - 76px); background: #fff; overflow-y: auto; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); pointer-events: none; }
  .hd_nav_main.is-open { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); pointer-events: auto; }
  .hd_nav_sub { position: fixed; top: 20px; right: 60px; max-width: 165px; } }

@media all and (max-width: 575px) { .hd_logo { max-width: 80px; }
  .hd_toggle { top: 5px; }
  .hd_nav_main { top: 53px; height: calc(100vh - 53px); }
  .hd_nav_sub { top: 10px; } }

.menu_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.menu_item { padding-left: 1.5625vw; padding-right: 1.5625vw; padding-top: 4.3rem; padding-bottom: 4.3rem; position: relative; }

.menu_item:not(:last-child)::after { content: ''; position: absolute; top: calc(50% - 9px); right: 0px; width: 1px; height: 18px; background: #E7E7E7; }

.menu_dropdown { position: absolute; width: 100%; top: 100%; left: 0px; -webkit-transform: translateY(5%); transform: translateY(5%); opacity: 0; pointer-events: none; -webkit-transition: all 0.5s; transition: all 0.5s; }

.menu_dropdown_link { display: block; text-align: center; font-size: 1.7rem; font-family: "Noto Serif TC", Arial, "Microsoft JhengHei", sans-serif; color: #105e21; background: #fff; border: 2px solid #105e21; padding: 1rem 5px; position: relative; -webkit-transition: all 0.5s; transition: all 0.5s; }

.menu_dropdown_link::before { content: ''; position: absolute; top: 2px; left: 3px; width: calc(100% - 6px); height: calc(100% - 4px); border: 1px solid #105e21; -webkit-transition: all 0.5s; transition: all 0.5s; }

.menu_dropdown_link:not(:last-child) { margin-bottom: 0.2rem; }

.menu_link { font-size: 1.8rem; font-family: "Noto Serif TC", Arial, "Microsoft JhengHei", sans-serif; color: #384926; position: relative; }

.menu_link::before { content: ''; position: absolute; bottom: 0px; left: 50%; width: 0px; height: 1px; background: #105e21; -webkit-transition: all 0.5s; transition: all 0.5s; }

@media all and (min-width: 1221px) {
  .menu_link::after {
    content: '';
    position: absolute;
    display: block;
    transition: all 0.5s;
    background-repeat: no-repeat;
    left: 50%;
    top: -50%;
    transform: translateX(-50%);
    opacity: 0;
    margin-top: -4px;
  }

  .menu-icon.about::after { width: 19px; height: 23px; background-image: url(../img/menu/menu-about.png); }
  .menu-icon.address::after {width: 17px; height: 24px; background-image: url(../img/menu/menu-address.png);  }
  .menu-icon.contact::after { width: 25px; height: 20px; background-image: url(../img/menu/menu-contact.png); }
  .menu-icon.cuisine::after { width: 32px; height: 29px; background-image: url(../img/menu/menu-cuisine.png); }
  .menu-icon.member::after { width: 18px; height: 20px; background-image: url(../img/menu/menu-member.png); }
  .menu-icon.news::after { width: 29px; height: 26px; background-image: url(../img/menu/menu-news.png); }
  .menu-icon.oem::after { width: 26px; height: 23px; background-image: url(../img/menu/menu-oem.png); }
  .menu-icon.product::after { width: 28px; height: 24px; background-image: url(../img/menu/menu-product.png); }
  .menu_link:hover::after { top: -100%; opacity: 1; }
}

@media all and (min-width: 1221px) { .menu_item:hover .menu_dropdown { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; pointer-events: auto; }
  .menu_link:hover { color: #105e21; }
  .menu_link:hover::before { left: 0px; width: 100%; }
  .menu_dropdown_link:hover { color: #FED701; background: #105e21; border-color: #FED701; }
  .menu_dropdown_link:hover::before { border-color: #FED701; } }

@media all and (max-width: 1500px) { .menu_link { font-size: 1.6rem; }
  .menu_dropdown_link { font-size: 1.5rem; padding-top: 0.8rem; padding-bottom: 0.8rem; } }

@media all and (max-width: 1366px) { .menu_item { padding-top: 3.3rem; padding-bottom: 3.3rem; } }

@media all and (max-width: 1220px) { .menu { width: 100%; }
@media all and (max-width: 1220px) {
  .menu_dropdown_btn { position: absolute; top: 0; font-size: 33px; right: 10px; }
  .menu_dropdown_btn::before { content: '+'; }
  .menu_dropdown { position: static; display: none; opacity: 1; transition: initial; }
}
  .menu_list { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .menu_item { width: 100%; padding: 0px; }
  .menu_item::after { display: none; }
  .menu_item:not(:last-child) { border-bottom: 1px dotted #ccc; }
  .menu_item .menu_link { display: block; padding: 10px 15px; width: 100%; text-align: center; margin-bottom: 0; } }

.hd-tool { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 0.5rem; margin-right: 0.5rem; }

.hd-tool_item { padding-left: 0.5rem; padding-right: 0.5rem; }

.hd-tool [data-icon] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 45px; height: 45px; border-radius: 100%; border: 1px solid #95ba0d; color: #95ba0d; font-size: 2rem; position: relative; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; }

.hd-tool [data-icon]::before { z-index: 1; }

.hd-tool [data-icon]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0px; height: 0px; background: #95ba0d; border-radius: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; }

@media all and (min-width: 1221px) { .hd-tool [data-icon]:hover { color: #fff; border-color: #fff; }
  .hd-tool [data-icon]:hover::after { top: 0px; left: 0px; width: 100%; height: 100%; } }

@media all and (max-width: 1500px) { .hd-tool [data-icon] { width: 35px; height: 35px; font-size: 1.8rem; } }

@media all and (max-width: 1366px) { .hd-tool { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin-left: 0px; margin-right: 0px; }
  .hd-tool [data-icon] { width: 30px; height: 30px; font-size: 1.6rem; } }


/* custom */

.path { display: flex; justify-content: center; align-items: center; margin: 12px 0; }
.path li { display: flex; justify-content: center; align-items: center; }
.path li:not(:first-child)::before { content: '>'; margin: 0 6px; }

.lang,
.hd-search { position: relative; }

.lang_ctr,
.hd-search_ctr { padding: 4px; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #95ba0d; }

.lang_ctr a { color: #fff; padding: 2px; text-align: center; display: block; }

input.hd-search_ctr-input {
  padding: 4px;
  min-width: 100px;
  border: 0;
  border-bottom: 1px solid #fff;
  background: transparent;
  color: #fff;
}