@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

:root{ --yellow:#fff1c8;--orange:#f38e4a; --titlefont:900 38px/1.2 'Noto Serif TC';--titlecolor: #4e4141;}
* { box-sizing: border-box; transition: 0.2s; letter-spacing: 0.05em;}
#mtkContainer * {font-family: 'Noto Sans TC';vertical-align: top;}
body {background: url(../images/bg_repeat.jpg?v=20241226) top center repeat-y;}
a { text-decoration: none;}

@media screen and (max-width:800px) {
    :root{--titlefont:900 24px/1.2 'Noto Sans TC';}
    }

    
    
/*版頭*/
header.header { position: relative; height: 450px; background: url(../images/header250507.webp) top center no-repeat;position: relative ;}
/* #ticket header.header { background: url(../images/header240215-2.jpg) top center no-repeat;} */
header.header h1 img{ display: none;}

@media screen and (max-width:1024px) {
header.header { height: auto; background: none; }
header.header h1 img{ display: block; }
header.header h1 img {  width: 100%; }

}




/*選單*/    
.globalMenu {flex-wrap: nowrap;display: flex;justify-content: center;width: 100%;background: #57aaab;position: static;z-index: 6;}
.globalMenu.sticky{position: fixed;top: 0;}
.globalMenu a {font:500 20px/1.2 'Noto Sans TC'; color: var(--yellow);/*padding: 5px 20px; border-radius: 40px;*/position: relative;padding: 16px; }
.globalMenu a.on,.globalMenu a.on:hover{color:#fff;background:var(--orange);}
/* .globalMenu a.on{padding: 5px 20px 5px 40px;} */
/* .globalMenu a.on:before{content:"";background: url(../images/menu_left.png) top center no-repeat;width: 50px;height: 56px;position: absolute;left: -17px;top: -9px;} */
.globalMenu a:hover{background: var(--yellow);background: #36c6c9;}




@media screen and (max-width:1200px) {
/* .globalMenu a {font:400 16px/1.2 'Noto Sans TC';}
.globalMenu a.on,.globalMenu a.on:hover{font:400 16px/1.2 'Noto Sans TC';} */
}

@media screen and (max-width:992px) {
.globalMenu {justify-content: left;overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;/*padding:10px 15px;*/}
/* .globalMenu a.on:before{width: 30px;height: 34px;background-size: 100%;left: -10px; top: -2px;}
.globalMenu a.on { padding: 5px 10px 5px 25px;} */
/* .globalMenu a{padding: 5px 10px;} */

}


/*top*/
.topBtn { position: fixed;  width: 50px; height: 50px;  background: rgba(0, 0, 0, 0.8); color: #FFF;  font: 16px/1.2 "微軟正黑體"; right: 3%;  bottom: 10%;    border-radius: 99em;    padding-top: 22px;    text-align: center;    cursor: pointer;    z-index: 100;}
.topBtn::before { content: '▲';  position: absolute; top: 8px;  left: 19px;  font: 12px/1.2 "微軟正黑體";}

@media screen and (max-width:670px) {
.topBtn {  width: 38px;  height: 38px;  font: 14px/1.2 "微軟正黑體";  right: 0%;  bottom: 10%; border-radius: 99em; padding-top: 16px; }
.topBtn::before { content: '▲';   position: absolute;  top: 1px;  left: 14px;  font: 10px/1.2 "微軟正黑體";  }
}


/*選單第二層*/
.poiMenu { position: sticky;  width: 100%;  top: 54px;  left: 0;  background: var(--orange);  text-align: center;  height: auto;  z-index: 5;  padding: 10px 0;display: flex;flex-wrap: nowrap;justify-content: center;/*box-shadow: 0px 0px 10px rgba(31, 114, 93, 0.2);*/}
.poiMenu li {  font:400 16px/1.2 'Noto Sans TC'; margin: 0px 5px;   position: relative;padding: 5px 10px;color: var(--yellow);cursor: pointer;border-radius: 40px;}
.poiMenu li:hover { color: #fff;}

@media screen and (max-width:1200px) {
.poiMenu{
    padding: 5px 0;
}
.poiMenu li{
  font:400 16px/1.2 'Noto Sans TC';
  padding: 8px;
  /* margin: 0 auto; */
}
}



@media screen and (max-width:992px) {
.poiMenu { white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;top: 67px;}
/* .poiMenu li{flex-grow: 1;} */
.poiMenu li{  font:400 14px/1.2 'Noto Sans TC';}
}
@media screen and (max-width:768px) {
  .poiMenu { top: 53px;}
}

/*index選單*/
.indexPoiMenu { position: sticky;  width: 100%;  top: 54px;  left: 0;  background: var(--orange);  text-align: center;  height: auto;  z-index: 5;  padding: 15px 0;display: flex;flex-wrap: nowrap;justify-content: center;/*box-shadow: 0px 0px 10px rgba(31, 114, 93, 0.2);*/}
.indexPoiMenu-sec{display: flex;flex-wrap: nowrap;align-items: center;gap:0 5px;font-size: 20px;font-weight: 600;}
.indexPoiMenu-sec-text{display: flex;flex-wrap: nowrap;gap: 10px;margin: 0 10px;font-size: 20px;font-weight: 400;}
.indexPoiMenu-sec-text li {cursor: pointer;color: #FFF;font-size: 18px;}
.indexPoiMenu-sec-text li a {color: #FFF;display: block;}
.indexPoiMenu-sec-text li:hover{color: #fff3cd;}
.indexPoiMenu-sec-title{color: #a81900;padding: 0px 8px;border-left: 1px solid #a81900; border-right: 1px solid #a81900; cursor: pointer;}

@media screen and (max-width:1200px) {
  .indexPoiMenu{padding: 10px 0;}
}
@media screen and (max-width:992px) {
.indexPoiMenu{top: 67px;}
.indexPoiMenu-sec{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text li {font-size: 14px;}
.indexPoiMenu-sec-title{font:600 16px/1.2 'Noto Sans TC';}
}


@media screen and (max-width:768px) {
.indexPoiMenu{ white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;top: 53px;}
}


#expo {
  .globalMenu {
    background: #005da5;

     a.on{
      background: #ef0027;
     }
     a:hover{
      background: #0081e5;
     }
     
     a.on:hover{
      background: #ef0027;
     }
  }
  .poiMenu{
    background: #ef0027;
    li{
      color: #FFF;
      &:hover{
        color: #fff495;
      }
    }
  }
}