#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
}

#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}

.wrapper {
    position: relative;
    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;
}









/*content*/
.content{    width: 92%; max-width: 1400px; margin: 200px auto; }
.content.first{ margin-top: 170px; }



/*content-poi*/
.content-poi{display: flex; margin-top: 30px;}
.content-poi-ph{     width: 87%; }
.content-poi-pic{ width: 13%; }
.content-poi-pic img{ width: calc(100% + 70px);  margin-left: -70px; }


/*content-intro*/
.content-intro{ display: flex;    flex-wrap: wrap;  font-size: 18px; letter-spacing: 0.3em; line-height: 1.5; }

.content-intro-info{ width: 36%; padding-right: 3%; }
.content-intro-info h2{display: inline-block; font-size: 220%;  font-weight: bold; color: white; background: #1e255d; padding:0 0.2em; }
.content-intro-info h3{font-size: 220%;   font-weight: normal; text-decoration: underline; text-underline-offset: 0.2em;     text-decoration-thickness: 1px;     }
.content-intro-info p{ margin-top: 1.8em;  line-height: 1.8; letter-spacing: 0.2em; }

.content-intro-pic{position: relative; width: 64%; }
.content-intro-pic-icon{position: absolute; left: 0; top: 0; width: auto;     transform: translate(5%, -62%);}
.content-intro-pic-link{display: inline-block; position: absolute; left: 0; bottom: 0; transform: translateX(-80%);}
.content-intro-pic-link a{position: relative; display: block; text-decoration: underline; padding: 0.5em 1.5em; margin: 0.8em 0;   color: black; background:#fbf056 url(../images/d-a.jpg) left bottom no-repeat; text-align: right; }
.content-intro-pic-link a:hover{ transform: translateX(5%); filter: brightness(1.05); }
.content-intro-pic-link a:after{content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.5em;
border-top: 7px solid transparent;  border-left: 7px solid black; border-bottom: 7px solid transparent;}


@media screen and (max-width:1400px) {
    .content-intro{ font-size: 16px; }
    .content-poi-ph{ width: 100%; }
    .content-poi-pic{ display: none; }
    .content-intro-pic-link{     transform: translateX(-8%);  }
    .content-intro-pic-icon{     width: 30%; }
}

@media screen and (max-width: 960px){
    .content.first{ margin-top:120px }
    .content-intro-info , .content-intro-pic{ width: 50%; }
    .content-intro-pic-link{position: relative;  left: inherit;   bottom: inherit;  transform: none;}
}

@media screen and (max-width: 720px){
    .content{     margin: 125px auto;  }
    .content.first{ margin-top:60px }
    .content-intro-info , .content-intro-pic{ width: 100%; }
    .content-intro-pic{    margin-top: 4%; }
    .content-intro-pic-icon{ left: inherit;  right: 0; transform: translate(-5%, -25%);  }
    .content-intro-info h2 , .content-intro-info h3{     font-size: 200%; }
    .content-intro-info h3 br{display: none;}
}










/*menuPC*/
#menuPC{font-size: 20px; transition: none; margin-top: 25px;}
#menuPC.fixed{position: fixed; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;  z-index: 99;  width: 100%; background: white;  margin-top: 0px; font-size: 16px; }
#menuPC .mobile-menu-header{display: none;}
#menuPC .tab{ display: flex;     justify-content: center;  max-width: 1400px;  margin: 0 auto; }
#menuPC .tablinks{position: relative; border:solid #808080 1px; border-radius: 5px; padding: 0.5em 1em;     margin: 0 0.5em;  background: white;  }
#menuPC .tablinks:hover{ background: #fbf056; border:solid #fbf056 1px; }
#menuPC .tablinks:hover:after{
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid #fbf056;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translate(-50%, 100%);
}
#menuPC .tablinks-img{display: none;}
#menuPC .tablinks a{color: black;     letter-spacing: 0.1em; }

@media screen and (max-width:1400px) {
    #menuPC{    font-size: 16px; }
}

@media screen and (max-width:1200px) {
    /* #menuPC{display: none;} */
    #menuPC .tab{flex-wrap: nowrap;gap: 4px;justify-content: left; overflow-x: scroll;padding: 16px;}
    #menuPC .tablinks{width: auto;flex-shrink: 0;margin: 0 0.2em;}
  
}




/*h1*/
h1{position: relative; display: block; background: url(../images/head20250819.jpg) center top no-repeat; height:450px;  }
h1 .head-m{display: none;}
.event-pc{display: inline-block; position: absolute; left: 50%; bottom: 0; margin: 0 0 80px -680px;   z-index: 98;  }
.event-pc:hover{  transform: scale(1.05); }
.event-pc img{ width: auto; }
.event-m{display: none;}


@media screen and (max-width:900px) {
    h1{   background: none; height: auto; }
    h1 .head-m{ display: block; }
    .event-pc{display: none;}
    .event-m{display: block; transform: translateY(-20%); }
}




/*wind*/
.wind img{position: absolute; left: 50%; top: 0; width: auto;  opacity: 0; }
.wind img.wind-1{   animation:wind-1 0.5s 0s   linear; animation-fill-mode: forwards; }
.wind img.wind-2{   animation:wind-2 0.6s 0.3s linear; animation-fill-mode: forwards; }
.wind img.wind-3{   animation:wind-3 0.5s 0.2s linear; animation-fill-mode: forwards; }
.wind img.wind-4{   animation:wind-4 0.5s 0.1s linear; animation-fill-mode: forwards; }
.wind img.wind-5{   animation:wind-5 0.5s 0s linear; animation-fill-mode: forwards; }
.wind img.wind-6{   animation:wind-6 0.4s 0.6s linear; animation-fill-mode: forwards; opacity: 1;  transform-origin: right bottom; transform: translate(-717px,365px) rotate(4deg); }

@keyframes wind-1 {
   from { opacity: 0; transform: translate(-585px,252px) rotate(-20deg); }
     to { opacity: 1; transform: translate(-985px,452px) rotate(0); }
}
@keyframes wind-2 {
   from { opacity: 0; transform: translate(-578px,111px) rotate(-20deg); }
     to { opacity: 1; transform: translate(-978px,311px) rotate(0); }
}
@keyframes wind-3 {
   from { opacity: 0; transform: translate(435px,150px) rotate(-10deg); }
     to { opacity: 1; transform: translate(335px,250px) rotate(0); }
}
@keyframes wind-4 {
   0% { opacity: 0; transform: translate(-779px,325px); }
   25% { opacity: 0.25; transform: translate(-829px,325px); }
   50% { opacity: 0.5; transform: translate(-879px,315px); }
   75% { opacity: 0.75; transform: translate(-929px,305px); }
   100% { opacity: 1; transform: translate(-979px,315px); }
}

@keyframes wind-5 {
   0% { opacity: 0; transform: translate(560px,310px); }
   50% { opacity: 0.5; transform: translate(550px,290px);  }
   100% { opacity: 1; transform: translate(540px,300px); }
}

@keyframes wind-6 {
   from { }
   to { transform: translate(-717px,365px) rotate(0deg); }
}


@media screen and (max-width:1400px) {
    .wind{display: none;}
}









/*event head*/
#event-head{ background:url(../images/event-head.jpg) center top no-repeat; height: 664px;}

@media screen and (max-width:1200px) {
    #event-head{ background-size: 180%;
    height: 58vw; }
}




/*event*/
.event{display: flex; justify-content: center; flex-wrap: wrap; font-size: 20px; letter-spacing: 0.05em; width: 90%; max-width: 1220px;  margin: 0 auto; padding: 4em 0;  }
.event-section{width: 100%;}
.event-section-2{width: 50%;}
.eventBG{background:url(../images/bg-1.jpg) center top repeat-y;}

@media screen and (max-width:1220px) {
    .event{ font-size: 16px; }
}

@media screen and (max-width:960px) {
    .event-section-2{width: 100%;}
}





/*event-section*/
.event-section{text-align: center; padding-bottom: 4em; }
.event-icon{width: auto;}
.event-title{ font-size: 150%; font-weight: bold; letter-spacing: 0.5em; color: #518395;     padding: 0.5em 0; }
.event-title:after{content: ''; display: block; width: 9em; height: 2px; background-color:#518395; margin: 0.5em auto 0;}
.event-info{ line-height: 1.5;  }
.event-info b{display: block; font-weight: bold; font-size: 150%;}
.event-info small{ color: #808080; font-size: 90%; }
.event-info a{text-decoration: underline;}
.event-info a:hover{background-color: yellow;}
.event-info i{ font-style: normal; color: #007eff; }
.event-note{ background-color: #e5e5e5; border-radius: 10px;     text-align: left;     margin-top: -4em;  padding: 1.5em 6em; }
.event-official-website{ color: #595656; font-size: 160%; font-weight: bold; text-decoration: underline;  letter-spacing: 0.2em;  margin-top: 1em;  display: inline-block; }
.event-official-website:hover{text-decoration: none; color: #4fb0d4;}

.event-box-wrap{display: flex; justify-content: center; flex-wrap: wrap;}
.event-box{width: 50%; margin-bottom: 2em;}
.event-area-pic{padding: 0.5em 1em;}

@media screen and (max-width:1220px) {
    .event-title:after{ width: 80%; }
}


@media screen and (max-width:960px) {
    .event-icon{width: 4em;}
    .event-box{width: 100%;  }
    .event-area-pic{padding: 0.5em 0;}
    .event-note{ padding: 1.5em; }
}





/*event-btn*/
.event-btn{width: 100%; text-align: center; }
.event-btn a{position: relative; display: inline-block; width: 100%;  max-width:605px; }
.event-btn-ig:hover{ transform: scale(1.04); }
.event-btn-point{ position: absolute; right: 0; top: 0;      animation:event-btn-point 0.2s linear infinite alternate; width: auto; }
@keyframes event-btn-point {
   from { transform: translate(60%,20%); }
     to {     transform: translate(55%,15%); }
}

@media screen and (max-width:960px) {
    .event-btn-point{ width: 8%;  }
    @keyframes event-btn-point {
       from { transform: translate(60%,30%); }
         to {     transform: translate(55%,25%); }
    }
}




/*section-wind*/
.section-wind{display: flex; justify-content: center; flex-wrap: wrap;     margin-top: 3%;}
.section-wind span{width: 30%; margin: 1.5%;}

@media screen and (max-width: 960px){
  .section-wind span{width: 47%;  }
}






/*event-table*/
.event-table , .event-tbody{ display: block;  }
.event-tbody{border:solid 1px #518395; border-radius: 10px;}

.event-table tr{ display: flex; align-content:stretch; padding: 1em 0;  line-height: 1.5;  border-bottom: dotted 2px #518395;  }
.event-table tr:last-of-type{border-bottom: none;}
.event-tr-title{ background-color: #518395; color: white; }

.event-table th , .event-table td{display: inline-block;     }
.event-table th:nth-of-type(1) , .event-table td:nth-of-type(1){width: 35%;}
.event-table th:nth-of-type(2) , .event-table td:nth-of-type(2){width: 27%;}
.event-table th:nth-of-type(3) , .event-table td:nth-of-type(3){width: 40%;}


.event-table td{display:flex; align-items:center; justify-content:center; border-right: solid 1px #518395; padding: 0 1em; overflow-x: auto;}
.event-table td:last-of-type{border-right: none; font-size: 80%; }
.event-table td a{text-decoration: underline;}
.event-table td a:hover{text-decoration: none;}

@media screen and (max-width: 960px){
  .event-table td{ font-size: 85%;  justify-content: flex-start; text-align: left;  }
}






/*event-ex*/
.event-ex{ font-size: 90%; line-height: 1.5;text-align: left; }
.event-ex > li{list-style-type: decimal; padding: 0.5em 0;}
.event-ex ol li{text-indent: -1.7em; margin-left: 1.7em;}
.event-ex li a{text-decoration: underline;}
.event-ex li a:hover{text-decoration: none; }

@media screen and (max-width: 960px){
  .event-ex{     padding-left: 1em; }
}







/*essentail*/
.essentail{ position: relative;
font-size: 20px; 
background: rgb(255,255,255) ;
background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(110,182,210) 100%) ;
background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(110,182,210) 100%) ;
background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(110,182,210) 100%) ;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6eb6d2',GradientType=0 );
}
.essentail-bg{ background:url(../images/essentail-bg.png) center bottom no-repeat; }

.essentail section{width: 90%;  max-width: 1220px;  margin: 0 auto; padding-bottom: 3em;}
.essentail-image{    box-shadow: 10px 10px 0px white; }
.essentail h4{ font-size: 160%; font-weight: bold; color: black; text-align: center; letter-spacing: 0.4em; }

.essentail-introduction{display: flex; justify-content: space-around; text-align: center; letter-spacing: 0.5em;   }
.essentail-wrap{background:white; margin-right: 1em;}
.essentail-wrap:last-child{ margin-right: 0;}
.essentail-name{ border-radius: 5em; font-weight: bold; color: white; padding: 0.5em 0; margin: 0.8em; }
.essentail-effect{ width: 90%; margin: 0 auto; font-size: 80%; padding-bottom: 0.8em; border-bottom: 1px solid; }
.essentail-formula{ color: black; padding-top: 0.8em; font-weight: bold; }
.essentail-info{ font-size: 80%; color: black; letter-spacing: 0.1em; text-align: left; padding:0.8em; line-height: 1.5; }

.blue .essentail-name{ background-color: #4eaedf; }
.green .essentail-name{ background-color: #99cc70; }
.pink .essentail-name{ background-color: #ebabae; }
.orange .essentail-name{ background-color: #e8c467; }

.blue .essentail-effect{ color: #4eaedf; }
.green .essentail-effect{ color: #99cc70; }
.pink .essentail-effect{ color: #ebabae; }
.orange .essentail-effect{ color: #e8c467; }

.essentail-sale{text-align: center;}
.essentail-sale a{ display: inline-block; margin: 0 auto; color: #4b8db0; font-weight: bold; letter-spacing: 0.1em; background: white; padding: 0.8em 2.5em; border-radius: 5em; box-shadow: 0px 6px 0px #3c789a;}
.essentail-sale a:hover{ transform: translateY(2px);  box-shadow: 0px 4px 0px #3c789a;  }

.event-icon-essentail{     width: 9em;  }

@media screen and (max-width: 960px){
  .essentail{ font-size: 16px; }
  .essentail-bg{background: none;}
  .essentail section.essentail-introduction{width: 95%;}
  .essentail-introduction{flex-wrap: wrap;}
  .essentail-wrap{width: 45%; margin: 2.5%}
}


@media screen and (max-width: 640px){
  .essentail-wrap{width: 100%;}
  .event-table td {display: block;overflow: hidden;word-wrap: break-word;}





}





/*goTop*/

#goTop , #goTop * {transition: none;}

#goTop {
    display: none;
    position: fixed;
    z-index: 99;
    right: 10px;
    bottom: 10px;
    padding: 10px 10px 2px 10px;
    border-radius: 5em;
    font-size: 12px;
    line-height: 3em;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: padding-top 0.2s;
}

#goTop:hover {
    padding-top: 30px;
    background-color: rgba(0, 0, 0, 7);
}

#goTop::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 18px;
    width: 0;
    height: 0;
    border: 4px solid #000;
    border-color: transparent transparent #fff;
}