/* === ceag menu — 客製板：完整獨立選單（不載 common_menuBase）=== */
@media all and (min-width: 0) {
  div.menuColumn_odd {
    height: 3em;
  }
  div.CusArchiveObject_odd {
    width: 100%;
    display: none;
  }
  div.CusArchiveObject_odd h4 {
    width: 100%;
    font-size: 1.1em;
  }
  div.CusArchiveObject_odd iframe {
    width: 100%;
    height: 70vh;
  }
  div.CusArchiveControl_odd {
    width: 100%;
  }
  div.CusArchiveControl_odd a {
    cursor: pointer;
  }
  div.CusArchiveControl_odd a[data-id='controlPrev'] {
    float: left;
    display: none;
  }
  div.CusArchiveControl_odd a[data-id='controlNext'] {
    float: right;
  }
}
@media all and (min-width: 1000px) {
  div.menuColumn_odd {
    position: relative !important;
    width: 95% !important;
    height: auto;
    padding: 3px 2.5%;
    border: 0;
    text-align: center;
  }
  div.menuColumn_odd div#menu_odd {
    width: auto !important;
    position: static !important;
    transition: none !important;
    height: 2em;
    float: none !important;
  }
  div.menuColumn_odd div#menu_odd ul#menu {
    width: 100% !important;
  }

  /* ceag 是固定高選單列（menu_odd 2em）、靠 --menu-toplevel-extra-bottom 把項目撐滿，與其他板
     「內容撐高」設計不同。此規則已從共用層 common_menu 移除（會與內容撐高板打架），故在 ceag
     自家保留，只影響 ceag。 */
  ul#menu > li > a,
  ul#menu > li > button {
    padding-bottom: calc(5px + var(--menu-toplevel-extra-bottom, 0px));
  }
  div.menuColumn_odd div#menu_odd ul#menu li a {
    color: #F8F8F8;
  }
  div.menuColumn_odd[data-set='1'] {
    background: white !important;
    padding-top: 0;
    padding-bottom: 0;
  }
  div.menuColumn_odd[data-set='1'] div#menu_odd {
    position: fixed !important;
    /* fixed+left:50% 的 shrink-to-fit 可用寬只有半個視窗，選單會提早換行；改內容寬、由 translateX 置中 */
    width: max-content !important;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  ul#menu {
    margin: 0 !important;
    text-align: center !important;
  }
}
@media all and (min-width: 1000px) and (max-width: 1280px) {
  /* 窄桌機容器不夠寬，縮小頂層項目留白與字級讓整條選單塞進單行 */
  ul#menu > li > a,
  ul#menu > li > button {
    padding-left: 8px;
    padding-right: 8px;
    font-size: .9em;
  }
}
@media all and (min-width: 1281px) {
  div.menuColumn_odd {
    width: 1200px !important;
    padding-left: calc((100% - 1200px) / 2);
    padding-right: calc((100% - 1200px) / 2);
  }
}
@media all and (min-width: 0) {
  div.menuColumn_odd {
    width: 100%;
    float: left;
    left: 0;
    top: 0;
    z-index: 3;
    transition: linear 200ms;
    background: #740000;
    position: fixed;
  }
  button[data-id="menu_btn_odd"] {
    display: none;
  }
  button#menu_btn_odd {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #CCC;
    box-shadow: 0 0 4px #CCC;
    float: right;
    position: absolute;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    background: #740000;
  }
  button#menu_btn_odd > img {
    width: 100%;
    height: 100%;
    float: left;
  }
  div#menu_odd {
    width: 300px;
    position: absolute;
    top: 100%;
    right: -100%;
    background: rgba(0, 0, 0, 0.8);
    transition: linear 250ms;
    color: #F8F8F8;
  }
  div#menu_odd.menuActive {
    right: 0 !important;
  }
  ul#menu {
    width: 100%;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
  }
  ul#menu li {
    width: 100%;
    float: left;
    transition: linear 100ms;
  }
  ul#menu li::before {
    content: none;
  }
  ul#menu li:hover > a,ul#menu li:hover > button {
    background: rgba(255, 255, 255, 0.4);
  }
  ul#menu li ul {
    width: calc(100% - 2em);
    padding-left: 2em;
    display: none;
  }
  ul#menu a,ul#menu button {
    width: calc(100% - 30px);
    padding: 5px 15px;
    float: left;
  }
  ul#menu a:focus,ul#menu button:focus {
    background: rgba(255, 255, 255, 0.4);
  }
}
@media all and (min-width: 1000px) {
  div.menuColumn_odd {
    position: fixed;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
  }
  button#menu_btn_odd,
  div.menu_btn_odd,
  span#menu_local_odd {
    display: none;
  }
  div#menu_odd {
    width: 100%;
    bottom: 0;
    right: 0;
    top: initial;
    float: left;
    background: rgba(0, 0, 0, 0);
  }
  ul#menu {
    width: 95%;
    height: auto !important;
    margin: 0 2.5% 0 2.5%;
    overflow: visible;
    text-align: right;
  }
  ul#menu a,ul#menu button {
    white-space: nowrap;
  }
  ul#menu > li {
    width: auto;
    float: none;
    display: inline-block;
    position: relative;
    text-align: left;
  }
  ul#menu > li:last-child > ul {
    left: auto;
    right: 0;
  }
  ul#menu > li > ul {
    display: none;
    position: absolute;
    padding: 0;
    width: auto;
    top: 100%;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
    text-align: left;
    z-index: 1;
    font-size: 0.9em;
  }
  ul#menu > li > ul > li {
    float: left;
    min-width: 100%;
  }
  ul#menu > li > ul > li > ul {
    display: none;
    position: absolute;
    padding: 0;
    width: auto;
    left: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
    text-align: left;
  }
  ul#menu > li > ul > li > ul > li {
    float: left;
    min-width: 100%;
  }
  ul#menu > li > ul > li > ul > li > a {
    min-width: 4em;
  }
  ul#menu:not(.menuDisable) > li:hover > ul,
  ul#menu:not(.menuDisable) > li > a:hover + ul,
  ul#menu:not(.menuDisable) > li > a:focus + ul,
  ul#menu:not(.menuDisable) > li > ul > li:hover > ul,
  ul#menu:not(.menuDisable) > li > ul > li > a:hover + ul,
  ul#menu:not(.menuDisable) > li > ul > li > a:focus + ul {
    display: inline-block;
  }
  ul.otherSide {
    left: inherit !important;
    right: 100% !important;
  }
}
@media all and (min-width: 0) {
  div.menuSummary_odd {
    display: none;
  }
}
@media all and (min-width: 1000px) {
  div.menuSummaryContent_odd {
    width: calc(50% - 15px);
    float: left;
    max-height: 100%;
    overflow: hidden;
  }
  div.menuSummaryContent_odd p {
    margin: 0;
    max-height: calc(4 * 1em * 1.7);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  div.menuSummaryTitle_odd {
    font-size: 1.4em;
    color: white;
  }
  div.menuSummaryDescription_odd {
    font-size: 0.9em;
    margin-top: 0.2em;
  }
  div.menuSummaryDescription_odd a {
    font-size: 0.8em;
    color: white;
    float: right;
  }
  div.menuSummary_odd {
    /* display   : inline-block; */
    float: left;
    width: calc(50% - 1px);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  div.menuSummaryImg_odd {
    width: calc(50% - 15px);
    margin-right: 15px;
    position: relative;
    overflow: hidden;
    float: left;
  }
  div.menuSummaryImg_odd::before {
    content: "";
    display: block;
    padding-top: 75%;
  }
  div.menuSummaryImg_odd img {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media all and (min-width: 1281px) {
  div.menuSummaryContent_odd p {
    max-height: calc(5 * 1em * 1.7);
    -webkit-line-clamp: 5;
  }
}
@media all and (min-width: 1367px) {
  div.menuSummaryContent_odd p {
    max-height: calc(6 * 1em * 1.7);
    -webkit-line-clamp: 6;
  }
}
@media all and (min-width: 1600px) {
  div.menuSummaryContent_odd p {
    max-height: calc(7 * 1em * 1.7);
    -webkit-line-clamp: 7;
  }
}

@media only screen and (max-width: 999px) {
  /* 漢堡選單列與 header 重疊(top 由 ceag.js 設 0、height 設 header 高)，透明化不再自成一條深紅 bar；漢堡靠 bottom 落在 header 右下 */
  div.menuColumn_odd {
    background: transparent;
  }

  /* 漢堡點開的選單面板高度填滿視窗 */
  div#menu_odd {
    min-height: 100vh;
  }
}