:root {
  --fontSize: 20px;
  --gap: 50px;
  --padding: 20px;

  --mainColor: #008e6b;
  --orange: #ff8a00;
  --yellow: #ffe359;
  --blue: #ccf2ff;
  --green: #9fffe7;
  --red: #cd4d00;
  
}

@media screen and (max-width:1200px) {
  :root {
    --fontSize: 12px;
    --gap: 5%;
    --padding: 15px;
  }
}



#mtkContainer {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400;
  font-size: var(--fontSize);
  letter-spacing: 0.1em;
  text-align: left;
}

#mtkContainer * {
   transition: all 0.2s; 
}

img {
  width: 100%;
  border: 0;
  vertical-align: top;
}

.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img {
  width: auto;
}

a {
  text-decoration: none;
}











/*kv*/
.kv {
  position: relative;
}

.kv h1{
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

 .kv .flower-1 ,  .kv .flower-2 {
  display: none;
 }


@media screen and (min-width:1760px) {
  .kv .flower-1{
    display: inline-block;
    width: auto;
    position: absolute;
    left: 0; bottom: -100px;
      z-index: 100;
  }

  .kv .flower-2{
    display: inline-block;
    width: auto;
    position: absolute;
    right: 0; bottom: -100px;
    z-index: 100;
  }
}

@media screen and (min-width:1200px) {
  .kv {
    background: url(../images/kv20231212.jpg) center top no-repeat;
  }
}  




/*menuArea*/
.menuArea{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc( var(--fontSize)*1.2 );
  font-weight: 700;
  padding: var(--padding) 0;
  position: sticky;
  top:0;
  background: #e4e1e2;
  z-index: 99;
}
.menuArea.fixed{
  font-size: var(--fontSize);
}
.menuArea a{
  display: block;
  width: 20%;
  max-width: 12em;
  color: black;
  text-align: center;
  border-radius: 5em;
  padding:0.5em 1em;
}

.menuArea a.on{
    background: white;
    color: var(--orange);
  }

@media screen and (min-width:1200px) {
  .menuArea a:hover{
    background: white;
    color: var(--orange);
  }
}

@media screen and (max-width:1200px) {
  .menuArea{
        overflow-x: scroll;
  }
  .menuArea a{
    width: auto;
    flex-shrink: 0;
  }
}

@media screen and (max-width:768px) {
  .menuArea{
    justify-content: flex-start;
  }
}







/*poi通用*/
.item {
  padding: var(--gap) 0;
  background: white;
}

.item:first-child {
  padding-top: 0;
}

.item-blue {
  background: var(--poi-blue);
}

.item-green {
  background: var(--poi-green);
}

.item-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1020px;
  margin: 0 auto;
}

.section-gap {
  margin-top: calc(var(--gap)*0.5);
}








/*wrapper box*/

.wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: var(--gap) auto;
}
.wrapper-box{
  border: solid 2px var(--mainColor);
  padding: 0 var(--gap) var(--gap);
      text-align: center;
}

h4{
  display: inline-block;
  text-align: center;
  background:var(--mainColor);
  color: white;
  width: auto;
  border-radius: 0 0 1em 1em;
  font-size: calc( var(--fontSize)*1.75 );
  font-weight: 500;
      padding: 0.5em 2em;
  letter-spacing: 0.1em;   
      line-height: 1.2;
}

h4 br{
    display: none;
  }

h6{
  text-align: center;
  color: #355c85;
  width: 100%;
  font-size: 42px;
  font-weight: 500;
  padding-top: 0.4em;
  letter-spacing: 0.05em;   
}

@media screen and (max-width:768px) {
    h4{
      width: 100%;
          padding: 0.5em;
    }
    h4 br{
      display: block;
    }

    h6{
      font-size: 24px;
    }
}








/*logo*/
.logo{
  width: 60%;
  max-width: 419px;
  margin:var(--gap) auto 0;
}





/*coupon*/
.coupon{
  overflow-x: hidden;
  background: white;
}
.couponticket{
  position: relative;
  background: var(--orange);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--padding) 0px;
  margin: var(--padding) 0;
  color: white;
}
.couponticket:before{
  content: '';
  width: 1.5em;
  height: 1.5em;
  background: white;
  border-radius: 5em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-65%,-50%);
}
.couponticket:after{
  content: '';
  width: 1.5em;
  height: 1.5em;
  background: white;
  border-radius: 5em;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(65%,-50%);
}
.coupon-d{
  width: auto;
  position: absolute;
}
.coupon-d-1{
  left: 27px;
  top: 13px;
}
.coupon-d-2{
  right: 22px;
  bottom: 7px;
}
.couponticket section{
  padding: var(--padding);
  text-align: center;
}
.couponticket-code{  width: 45%;  position: relative; 
  font-size: calc( var(--fontSize)*1.2 );
}
.couponticket-price{  width: 55%; border-left: dotted 5px white; }
.couponticket-code strong{ letter-spacing: 0.05em;  line-height: 1.2;}
.couponticket-code p{
  background: white;
  border-radius: 10px;
  margin: 0.5em auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  width: 80%;
  color: black;
}
.couponticket-code p span{
      background: var(--yellow);
    padding: 0.3em 0;
    font-size: calc( var(--fontSize)*1.5 );
    display: block;
    font-weight: 700;
    width: 30%;
    text-align: center;
}
.couponticket-code p b{
  display: block;
  width: 70%;
  font-weight: 900;
  font-size: calc( var(--fontSize)*1.75 );
  text-align: center;
}
.couponticket-price p{
  position: relative;
  background: white;
  font-size: calc( var(--fontSize)*3.5 );
  letter-spacing: 0.1em;
  color: black;
  font-weight: 900;
  padding: 0.3em 0;
    line-height: 1em;
}
.couponticket-price p b{
  font-size: calc( var(--fontSize)*4 );
      position: relative;
    bottom: -0.05em;
    font-weight: 900;
}

@media screen and (max-width:960px) {
  .coupon-d-1 {
    left: 3vw;
    top: 2vw;
    width: 4vw;
  }
  .coupon-d-2 {
    right: 2vw;
    bottom: 1vw;
    width: 6vw;
  }
}

@media screen and (max-width:768px) {
  .couponticket-code{
    width: 100%;
  }
  .couponticket-code p{
    width: 100%;
  }
  .couponticket-price{
    width: 100%;
    border-left: none;
    border-top: dotted 4px white;
  }
}

@media screen and (max-width:480px) {
  .couponticket-price p { font-size: 40px; }
  .couponticket-price p b { font-size: 54px; }
  .couponticket-price p small {
      top: 0.3em;
      transform: translateX(-6.5em);
  }
}




/*step*/
.step-title{
  text-align: center;
  font-size: var(--font-m);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: solid 1px;
  margin-bottom: 0.5em;
}
.step-title span{
  display: inline-block;
  background: white;
  transform: translateY(50%);
  padding: 0 1em;
}
.step{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-r);
  letter-spacing: 0.1em;
  padding: var(--padding) 0;
}
.step article{
  max-width: 192px;
  align-self: flex-start;
}
.step article img{
  display: block;
}
.step article p{
    background: var(--mainColor);
    border-radius: 0 0 10px 10px;
    text-align: center;
    color: white;
    padding: 0.5em 0 1em;
    min-height: 4em;
    line-height: 1.2;
}
.step article p span{
  color: #ffe566;
}
.step section{
  text-align: center;
}
.step section img{
  max-width: 37px;
}

@media screen and (max-width:960px) {
  .step{
    flex-wrap: wrap;
    justify-content: center;
  }
  .step article{
    width: 45%;
  }
  .step section{
    width: 5%;
    margin: 2.5%;
  }
  .step section.break{
    width: 100%;
  }
  .step section.break img{
    display: none;
  }
}

@media screen and (max-width:360px) {
  .step article { width: 48%; }
  .step section { width: 4%; margin: 2% 0; }
  .step section img{ display: none; }
}








/*info*/
.info{
  background: #e4e1e2;
  padding: var(--padding);
  font-size: var(--fontSize);
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: black;
  text-align: left;
    margin-top: var(--padding);
}
.info li{
  padding: 0.2em;
}
.info ol{
  padding-left: 1em;
  font-size: calc( var(--fontSize)*0.75 );
  color: #4c4c4c;
}




/*poi通用*/
.item {
  padding: var(--gap) 0;
  background: white;
}

.item-blue {
  background: var(--poi-blue);
}

.item-green {
  background: var(--poi-green);
}





/*itemTitle*/
.itemTitle {
  width: 100%;
  text-align: center;
  font-size: calc( var(--fontSize)*1.75 );
  margin: var(--gap) auto;
}

.itemTitle b{
  position: relative;
  font-size: calc( var(--fontSize)*3.25 );
}

.itemTitle , .itemTitle b{
  font-weight: 900;
  letter-spacing: 0.2em;
      text-shadow: 0.05em 0.05em 0px var(--yellow);
}

.itemTitle .itemTitle-bg{
  position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 254px;
    transform: translate(-15%,13%);
}

@media screen and (max-width:480px) {
  .itemTitle .itemTitle-bg{
    display: none;
  }
  .itemTitle b{
        display: block;
    padding-bottom: 0.3em;
  }
}




/*itemMore*/
.itemMore{
  text-align: center;
}
.itemMore a{
  position: relative;
      display: inline-block;
    font-size: calc( var(--fontSize)*1.1 );
    font-weight: 700;
    border-radius: 5em;
    border: solid 2px black;
    padding: 0.5em 2em;
    color: black;
    background: white;
    box-shadow: 2px 2px 0px var(--yellow);
        margin: var(--padding);
}

.itemMore a:hover{
  transform: translate(3px,3px);
}

.itemMore a img{
  position: absolute;
  right: 0;
  bottom: 0;
      width: 27%;
      max-width: 58px;
  transform: translate(39%, 30%);
}







/*bank-info*/
.bank-info{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.bank-detail{
  width: 65%;
  text-align: left;
  line-height: 1.2;
  padding: var(--padding);
}

.bank-detail article{
  padding-bottom: var(--padding);
}

.bank-card{
  width: 35%;
  padding: var(--padding);
}

.bank-detail article *{
  margin: var(--padding) 0 calc( var(--padding)/2 );
}

.bank-detail i{
      display: inline-block;
  font-size: calc( var(--fontSize)*1.1 );
  font-weight: 700;
  font-style: normal;
  background: var(--yellow);
  padding: 0.5em 1em;
  border-radius: 5em;
}

.bank-detail strong{
  display: block;
  font-size: calc( var(--fontSize)*1.75 );
  font-weight: 700;
  color: var(--red);
}

.bank-detail p {
  font-size: calc( var(--fontSize)*1.1 );
}

.bank-detail small{
  font-size: calc( var(--fontSize)*0.7 );
  color: #595959;
}

.bank-detail small em{
  color: red;
  font-style: normal;
}

.bank-card img{
      width: 80%;
  max-width: 286px;
}
.bank-card p{
  font-size: calc( var(--fontSize)*1.75 );
  font-weight: 700;
  color: var(--red);
  padding: var(--padding) 0;
}

.bank-more a{
  display: block;
  border-radius: 5em;
  background: var(--red);
  color: white;
  font-size: calc( var(--fontSize)*1.1 );
  font-weight: 700;
  letter-spacing: 0.5em;
  padding: 0.7em;
  box-shadow: 4px 6px 0px #933700;
}

.bank-more a:hover{
  transform: translate(3px,3px);
  box-shadow: 1px 3px 0px #933700;
}


@media screen and (max-width:640px) {
  .bank-detail , .bank-card{
    width: 100%;
    padding: var(--padding) 0;
  }
}





/*blog*/
.blog{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.blog section{
  width: 50%;
  padding:  calc( var(--padding)*2 ) var(--padding);
}

.blog a {
  display: block;
  color: black;
}
.blog a:hover img{
  filter: brightness(1.1);
  transform: scale(1.02);
}
.blog strong{
  font-size: calc( var(--fontSize)*1.1 );
    font-weight: 700;
    display: block;
    padding: var(--padding) 0;
    line-height: 1.2;
}
.blog p{
  font-size: calc( var(--fontSize)*0.9 );
  color: #595959;
  line-height: 1.5;
}

.blog iframe{
  display: block;
      width: 100%;
    aspect-ratio: 16 / 9;
}

@media screen and (max-width:640px) {
  .blog section{
    width: 100%;
    padding: var(--padding) 0;
  }
}








/*ex*/
.ex{
  font-size: calc( var(--fontSize)*0.9 );
}

.ex h5{
  color: white;
    background: var(--mainColor);
    padding: 0.5em 1em;
    display: inline-block;
}

.ex ul li{
  line-height: 1.2;
  padding:0.5em 0;
  list-style-type: auto;
    margin-left: 1.5em;
}

.ex .warning{
  text-align: center;
  padding: var(--padding);
}
.ex .warning img{
  max-width: 1000px;
}








/*goTop*/

#goTop {
    position: fixed;
    z-index: 99;
    right: 30px;
    bottom: 30px;
    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);
    transition: none;
    text-decoration: none;
}

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

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

@media screen and (max-width:960px) {
    #goTop {
      right: 5px;
      bottom: 5px;
    }
}