:root{ 
  --font-l:30px;    
  --font-m:25px;    
  --font-s:16px; 
  --color-red:#1ba5e7; 
  --color-blue:#7dd374; 
  --color-orange:#f99f52; 
}
@media screen and (max-width:1080px) {
    :root{
      --font-l:18px;    
      --font-m:16px;    
      --font-s:12px;       
    }
}
/*
Light 300
Regular 400
Medium 500
Bold 700
Black 900
*/




#mtkContainer {
    position: relative;
    text-align: left;
    /*font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;*/
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.07em;
}

#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}
#mtkContainer .menu-poi .slidecontain{
  transition: none;
}

.wrapper {
    position: relative;
    width: 94%; max-width: 1400px;
    margin: 0 auto;
}

img {
    width: 100%;
    border: 0;
    vertical-align: top;
}
.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img{width: auto;}

a {
    text-decoration: none;
}


/*header*/
.header{
  position: relative;
  height: 500px;
  background: url(../images/header2025.jpg?v=20250605) center top no-repeat;
}

#gfp .header{
  background: url(../images/header2025-gfp.jpg) center top no-repeat;
}
#trip .header{
  background: url(../images/header2025-gfp.jpg) center top no-repeat;
}



.header h1{opacity: 0;}
.header h1 img{
  display: none;
  max-width: 1400px;
  margin: 0 auto;
}
.header h2 img{
  display: none;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width:1000px) {


  .header,#gfp .header,#trip .header { background-size: 160%; height: 39vw; }
 


}

@media screen and (max-width:1200px) {

}





/*title*/
.title img{
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 0;
}
.title-1{
  width: auto;
  transform: translate(-674px, 166px);
  animation:titleA 0.9s linear;
}
.title-2{
  width: auto;
  transform: translate(198px, 165px);
  animation:titleB 0.9s 0.7s linear;
}
.title-vs{
  width: auto;
  transform: translate(-98px, 217px);
  opacity: 0;
  animation:titleVS 0.3s 0.7s linear;
  animation-fill-mode: forwards;
}
.blush{
  width: auto;
  transform: translate(-158px, 547px);
  mix-blend-mode: screen;
  animation:blush 0.5s linear infinite alternate;
}
@keyframes titleA {
   0% { transform: translate(-674px, 166px) scale(1); }
  30% { transform: translate(-674px, 166px) scale(1) rotate(0deg); filter: brightness(1);}
  50% { transform: translate(-674px, 166px) scale(1.1) rotate(5deg); filter: brightness(1.1);}
  70% { transform: translate(-674px, 166px) scale(1.1) rotate(-5deg); filter: brightness(1); }
  90% { transform: translate(-674px, 166px) scale(1.1) rotate(0deg); filter: brightness(1.1); }
 100% { transform: translate(-674px, 166px) scale(1); filter: brightness(1); }
}
@keyframes titleB {
   0% { transform: translate(198px, 165px) scale(1); }
  30% { transform: translate(198px, 165px) scale(1) rotate(0deg); filter: brightness(1);}
  50% { transform: translate(198px, 165px) scale(1.1) rotate(-5deg); filter: brightness(1.1);}
  70% { transform: translate(198px, 165px) scale(1.1) rotate(5deg); filter: brightness(1); }
  90% { transform: translate(198px, 165px) scale(1.1) rotate(0deg); filter: brightness(1.1); }
 100% { transform: translate(198px, 165px) scale(1); filter: brightness(1); }
}
@keyframes titleVS {
   0% { transform: translate(-98px, 217px) scale(3); opacity: 0; }
 100% { transform: translate(-98px, 217px) scale(1); opacity: 1; }
}
@keyframes blush {
   0% { opacity: 0; }
 100% { opacity: 1; }
}
@media screen and (max-width:1400px) {
    .title{ display: none; }
}





 #index .tabs-nav li:nth-of-type(1) a:hover, 
 #index .tabs-nav li:nth-of-type(1).on a{
    color: #eb3c3c;
    background: #ffef62;

}
#index .tabs-nav li:nth-of-type(1) a{
  color: #ffef62;
}


/*nav*/
.nav{
  display: flex;
  justify-content: space-between;
  background: #e6e6e6;
}
.nav a{
  display: block;
  width: 100%;
  color: #a6a6a6;
  font-size: var(--font-m);
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 0.3em 0.25em;
}

.nav a.nav-index.on , .nav a.on{

  background: var(--color-red);
  color: white;

}

@media screen and (max-width:500px) {
    .nav{
      flex-wrap: nowrap;
      overflow-x: scroll;
      justify-content: flex-start;
      -webkit-overflow-scrolling: touch; 
      overflow-scrolling: touch; 
    }
    .nav a{
      width: auto;
      flex-shrink: 0;
      padding: 0.3em 1em;
    }
}

@media screen and (max-width:300px) {
    .nav a{
        font-size: 18px;
    }
}





/*.poi-wrap*/
.poi-wrap{
  display: none;
}
.poi-wrap.on{
  display: block;
}



/*tabs-nav*/
.tabs-nav{
    display: flex;
    justify-content: center;
    background: var(--color-red);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.tabs-nav li{
  display: inline-block;
  text-align: center;
  flex-shrink: 0;
}
.tabs-nav li a{
  display: inline-block;
    width: auto;
    color: white; 
    border-radius: 5em;
    padding: 0.15em 1.5em;
    margin: 0 0.2em;
   font-size: 20px;
}
.tabs-nav li a:hover , .tabs-nav li.on a{
  color: var(--poi-blue); 
  background: white;
}

@media screen and (max-width:1080px) {
    .tabs-nav{
        font-size: 18px;
        justify-content:left;
    }
}

@media screen and (max-width:960px) {
    .tabs-nav{
        justify-content: flex-start;
    }
    .tabs-nav li{
        flex-shrink: 0;
    }
    .tabs-nav li a{
      margin: 0;
      padding: 0.15em 1em;
      font-size: 16px;
    }
}


/*fixed*/

#index .navArea{
  position: relative;
  height: 127px;
}

.navArea{
  position: relative;
  height:95px;
}


.navArea .navWrap{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
}
.navArea.sticky .navWrap{
  position: fixed;
}
.navArea.sticky .nav a{
  /* font-size: 20px !important; */
  font-weight: 700;
}
.navArea.sticky .tabs-nav{
  font-size: 18px !important;
  padding: 10px 0px;
}


.menu-poi{
  position: relative;
  height: 78px;
}
.menu-poi .slidecontain{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  width: 100%;
}
.menu-poi.sticky .slidecontain{
    position: fixed;
    top: 94px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
    padding: 7px 0;
}
.menu-poi.sticky .slidecontain li a{
    font-size: 18px !important;
    text-shadow: none;
    /* color: #01afca; */
}
.menu-poi.sticky .slidecontain li:hover a , .menu-poi.sticky .slidecontain li.on a{
  /* color: white; */
}
.menu-poi.sticky .slidecontain li a::after{
  opacity: 0;
}
.menu-poi.sticky .slidecontain li:hover a::after , .menu-poi.sticky .slidecontain li.on a::after{
    opacity: 1;
}

@media screen and (max-width:1080px) {

  #index .navArea{
   height: 113px;
  }

  .navArea .navWrap span{
    display: block;
  }
  .menu-poi.sticky .slidecontain{
    top:96px;
  }
  .menu-poi .slidecontain{
    padding: 14px 0;
  }
  .navArea{
    height:79px;
    
  }
  .menu-poi{
    height: 67px;
  }
}



/*vs*/
.vs-title{
  display: block;
  width: 94%;
  max-width: 591px;
  margin: 40px auto;
}
@media screen and (max-width:1080px) {
    .vs-title{
      margin: 20px auto;
    }
}


.content{padding-bottom: 5%;}