:root{
  --padding: 35px;
  --word-padding: 10px;
  --font-l:36px;    
  --font-m:24px;    
  --font-r:18px;    
  --font-s:15px;
}
@media screen and (max-width:1220px) {
    :root{
      --padding: 5%;
      --font-l:24px;    
      --font-m:18px;
      --font-r:15px;    
      --font-s:12px;       
    }
}

#mtkContainer {
    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.2;
}
#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}
.wrapper {
    position: relative;
    width: 94%;
    font-size: var(--font-r);
    margin: 0 auto;
    padding: 70px 0;
}
img {
    width: 100%;
    border: 0;
    vertical-align: top;
}
.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img{width: auto;}

a {
    text-decoration: none;
}

@media screen and (max-width:1220px) {
  .wrapper {
       padding: 10% 0;
  }
}





/*header*/
.header{
  position: relative;
  background: url(../images/header.jpg) center top no-repeat;
  height: 880px;
}
.header h1{
  display: none;
}
.header .light{
  position: absolute;
  left: 50%;
  top: 0;
  width: auto;
}
.header .light-1{
  transform: translate(-496px,95px);
  filter: drop-shadow(0px 0px 5px #9580ff);
  animation:lightBlue 0.5s ease-in-out infinite alternate;
}
.header .light-2{
  transform: translate(-122px,94px);
  filter: drop-shadow(0px 0px 5px #00dcde);
  animation:lightGreen 0.5s 0.5s ease-in-out infinite alternate;
}
.header .light-3{
  transform: translate(-352px,192px);
  filter: drop-shadow(0px 0px 5px #9580ff);
  animation:lightBlue 0.5s 1s ease-in-out infinite alternate;
}
.header .light-4{
  transform: translate(-495px,257px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s ease-in-out infinite alternate;
}
.header .light-5{
  transform: translate(-188px,183px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s 0.5s ease-in-out infinite alternate;
}
.header .light-6{
  transform: translate(-41px,183px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s 1s ease-in-out infinite alternate;
}
.header .light-7{
  transform: translate(107px,183px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s ease-in-out infinite alternate;
}
.header .light-8{
  transform: translate(254px,183px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s 0.5s ease-in-out infinite alternate;
}
.header .light-9{
  transform: translate(414px,269px);
  filter: drop-shadow(0px 0px 5px #ffea80);
  animation:lightYellow 0.5s 1s ease-in-out infinite alternate;
}
.header .light-10{
  transform: translate(-244px,420px);
  filter: drop-shadow(0px 0px 5px #00dcde);
}
.header .light-11{
  transform: translate(344px,51px);
  animation:lighten 0.5s 0.5s ease-in-out infinite alternate;
}
@keyframes lightYellow {
   from { filter: drop-shadow(0px 0px 5px #ffea80); }
     to { filter: drop-shadow(0px 0px 3px #ffea80) drop-shadow(0px 0px 2px #ffea80); }
}
@keyframes lightBlue {
   from { filter: drop-shadow(0px 0px 5px #9580ff); }
     to { filter: drop-shadow(0px 0px 3px #9580ff) drop-shadow(0px 0px 2px #9580ff); }
}
@keyframes lightGreen {
   from { filter: drop-shadow(0px 0px 5px #00dcde); }
     to { filter: drop-shadow(0px 0px 3px #00dcde) drop-shadow(0px 0px 2px #00dcde); }
}
@keyframes lighten {
   from { filter: brightness(1); }
     to { filter: brightness(1.2); }
}

@media screen and (max-width:1200px) {
  .header{
    background:none;
    height: auto;
  }
  .header h1{
    display: block;
  }
  .header .light{
    display: none;
  }
}



/*fireworks*/
.fireworks{
  position: fixed;
  left: 50%;
  width: auto;
  transform: scale(0);
}
.fireworks-1{
  top: 10px;
  margin-left: -880px;
  filter: drop-shadow(0px 0px 5px #939afe);
  mix-blend-mode: screen;
}
.fireworks-2{
  top: 170px;
  margin-left: 550px;
  filter: drop-shadow(0px 0px 5px #edfff1);
  mix-blend-mode: screen;
}
.fireworks-3{
  top: 110px;
  margin-left: -1050px;
  filter: drop-shadow(0px 0px 5px #fcf8d6);
}
.fireworks-4{
  top: 750px;
  margin-left: 820px;
  filter: drop-shadow(0px 0px 5px #fcf8d6);
}
.fireworks-5{
  top: 100px;
  margin-left: 820px;
}
.fireworks-6{
  top: 600px;
  margin-left: -900px;
}
.fireworks-7{
  top: 10px;
  margin-left: -1070px;
  filter: drop-shadow(0px 0px 5px #939afe);
  mix-blend-mode: screen;
  z-index: 99;
}
.fireworks-8{
  top: 500px;
  margin-left: 770px;
  filter: drop-shadow(0px 0px 5px #edfff1);
  mix-blend-mode: screen;
  z-index: 99;
}
@media screen and (max-width:1400px) {
  .fireworks-skrollr , .fireworks{
    display: none;
  }
}

.fireworksanimation{
  animation:fireworksanimation 0.7s ease-in-out;
}
@keyframes fireworksanimation {
   0% { transform: scale(0); }
   80% { opacity: 1;  filter: brightness(1); }
   100% { opacity: 0; transform: scale(1); filter: brightness(1.5); }
}





.nav{
  position: relative;
  text-align: center;
  font-size: var(--font-m);
  font-weight: 500;
  height: 0;
}
.nav ul{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  background: rgba(0,0,0,0.7);
  transform: translateY(-100%);
}
.nav ul li{
  position: relative;
}
.nav ul li:after{
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background: white;
}
.nav ul li:last-child:after{
  display: none;
}
.nav ul li a{
  display: inline-block;
    color: white;
    padding: 0 1em;
    margin: 1em 0;
}
.nav ul li:last-child a{
  border-right: none;
}

.nav ul li a:hover{
  text-shadow: 0px 0px 5px #9580ff, 0px 0px 5px #9580ff, 0px 0px 5px #9580ff;
}
.nav ul li.on a{
  text-shadow: 0px 0px 5px #9580ff, 0px 0px 5px #9580ff, 0px 0px 5px #9580ff;
}
.nav ul li a br{ display: none; }
#mtkContainer .nav ul li a span{
  transition: none;
}

.nav.fixed{
  font-size: var(--font-r);
}
.nav.fixed ul{
  position: fixed;
  transform: none;
}

@media screen and (max-width:1070px) {
  .nav{
    height: 3em;
  }
  .nav ul{
    background: rgba(0,0,0,1);
    transform: none;
  }
  .nav.fixed ul{
    background: rgba(0,0,0,0.7);
  }
}
@media screen and (max-width:768px) {
  .nav{
     font-size: var(--font-r);
  }
  .nav ul li{
    width: 20%;
  }
  .nav ul li a{
        padding: 0 0.5em;
  }
  .nav ul li a:hover{
    text-shadow: none;
  }
  .nav ul li.on a {
      text-shadow: 0px 0px 5px #9580ff, 0px 0px 5px #9580ff, 0px 0px 5px #9580ff;
  }
  .nav ul li a span{
    display: none;
  }
}
@media screen and (max-width:640px) {
  .nav{
     font-size: var(--font-s);
     height: 4.5em;
  }
  .nav.fixed {
    font-size: var(--font-s);
  }
  .nav ul li a br{ display: block; }
}



/*.wrapper-box*/
.wrapper-box{
  border: solid 2px #355c85;
  max-width: 1200px;
  padding: 0 70px;
  margin: 70px auto;
}
@media screen and (max-width:1220px) {
  .wrapper-box{
    padding: 0 3%;
    margin: 10% auto;
  }
}



/*h2*/
h2{
  text-align: center
}
h2 img{
  max-width: 885px
}


/*h4*/
h4{
  text-align: center;
  background:#355c85;
  color: white;
  width: 100%;
  max-width: 800px;
  border-radius: 0 0 40px 40px;
  margin: 0 auto;
  font-size: 42px;
  font-weight: 500;
  padding: 0.4em;
  letter-spacing: 0.05em;   
}
h4 br{
    display: none;
  }
@media screen and (max-width:1220px) {
  h4{
    font-size: 24px;
    border-radius: 0;
    width: 107%;
    margin-left: -3.5%;
    max-width: inherit;
  }
}
@media screen and (max-width:768px) {
    h4 br{
      display: block;
    }
}

/*h6*/
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:1220px) {
  h6{
    font-size: 24px;
  }
}




/*yt*/
.yt{
  max-width: 1200px;
}
.yt .iframe{
    position: relative;
    padding-bottom: 56.25%;
    margin-top: var(--padding);
    overflow: hidden;
}

.yt .iframe iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*flight*/
.poi-flight{
  margin-top: var(--padding);
}



/*bank*/
.bank-content{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.bank-section{
  position: relative;
  width: 48%;
  padding: var(--padding) 0;
  text-align: center;
}
.bank-section > *{
  margin: var(--word-padding) 0;
}
.bank-line{
  width: 4%;
  padding: var(--padding) 0;
}
.bank-line span{
  display: block;
  border-right: solid 1px #355c85;
  width: 2px;
  height: 100%;
  margin: 0 auto;
}
.bank-st{
  display: inline-block;
  background: #355c85;
  color: white;
  font-size: var(--font-m);
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.3em 0.6em;
}
.bank-title{
  font-size: var(--font-m);
  font-weight: 400;
  line-height: 1.5;
}
.bank-title span{
  color: #ff1500;
}
.bank-title mark{
  display: inline-block;
  border-radius: 5em;
  padding: 0 0.5em;
  margin: 0 0.1em;
}
.bank-strong{
  font-size: var(--font-l);
  font-weight: 700;
}
.bank-strong strong{
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
}
.bank-pic{
  padding: var(--word-padding) 0;
}
.bank-pic img{
  max-width: 400px;
}
.bank-note{
  font-size: var(--font-r);
}
.bank-article-info a{
  display: inline-block;
  font-size: var(--font-m);
  color: #355c85;
  padding: 0.3em 0.6em;
  border:solid 1px;
  border-radius: 5px;
  letter-spacing: 0.1em;
  margin-right: 0.6em;
  margin-bottom: 0;
}
.bank-article-info a:hover{
  background: #355c85;
  color: white;
}

section.bank-note{
  padding:0;
}
.bank-note ul{
  padding: var(--word-padding) 0;
}
.bank-note ul li{
  list-style-type: decimal;
  margin-left: 1em;
  padding: 0.3em 0;
}
.bank-note ul li span{
  color: #ff1500;
}
.bank-link a{
    display: inline-block;
    font-size: var(--font-m);
    font-weight: 500;
    color: #355c85;
    padding: 0.2em 1em;
    border: solid 2px;
    border-radius: 5em;
    margin-top: var(--word-padding);
}
.bank-link a:hover{
  background: #355c85;
  color: white;
}

@media screen and (max-width:1220px) {
  .bank-title br{ display: none; }
  .bank-strong strong{ font-size: 36px; }
}
@media screen and (max-width:768px) {
  .bank-section{ width: 100%; }
  .bank-line { display: none; }
  .bank-content{
    border-bottom: solid 1px;
    margin-bottom: var(--word-padding);
  }
  .bank-content:last-child{
    border-bottom:none;
    margin-bottom:0;
  }
}



/*note*/
.note{
  max-width: 1200px;
  margin: 0 auto;
  font-size: var(--font-r);
  letter-spacing: 0.05em;
}
.note-title{
  display: inline-block;
  background: #355c85;
  color: white;
  letter-spacing: 0.1em;
  padding: 0.3em 0.6em;
}
.note-content{
  padding: var(--word-padding) 0;
}
.note-content li{
  list-style-type: decimal;
  margin-left: 1.5em;
  padding: 0.3em 0;
}
.warning {
    background: #e5e5e5;
    font-size: var(--font-s);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
}
.warning-1{
  font-size: var(--font-m);
  font-weight: 400;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.warning-2{
  padding-left: 1em;
  border-left: solid 1px;
  margin-left: 1em;
}
@media screen and (max-width:600px) {
  .warning-2 br{ display: none; }
}




/*blog*/
.blog{
  background: #23466b;
  width: 100%;
}
.poi-blog{
  margin-top: var(--padding);
}







/*coupon*/
.coupon{
  overflow-x: hidden;
}
.couponticket{
  position: relative;
  background: #ffc859;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--word-padding);
  margin: var(--padding) 0;
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 1;
}
.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: 0 var(--padding);
  text-align: center;
}
.couponticket-code{  width: 41%;  position: relative; }
.couponticket-price{  width: 55%; border-left: dotted 5px white; }
.couponticket-code strong{}
.couponticket-code p{
  font-size: var(--font-m);
  font-weight: 700;
  background: white;
  border:solid 2px #355c85;
  border-radius: 10px;
  max-width: 13.5em;
  margin: 0.5em auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.couponticket-code p span{
  width: 5em;
  background: #355c85;
  color: white;
  padding: 0.2em 0;
}
.couponticket-code p b{
  width: calc(100% - 5em);
  font-weight: 900;
  color: #355c85;
  letter-spacing: 0.1em;
}
.couponticket-price p{
  position: relative;
  background: white;
  font-size: 56px;
  color: #ff1500;
  font-weight: 900;
  padding-bottom: 0.2em;
}
.couponticket-price p b{
  font-size: 110px;
  display: inline-block;
  vertical-align: sub;
  letter-spacing: -0.02em;
}
.couponticket-price p small{
  position: absolute;
  left: 50%;
  top: 1em;
  transform: translateX(-11.5em);
  font-size: var(--font-r);
  color: black;
  font-weight: 400;
  letter-spacing: 0.2em;    
}

@media screen and (max-width:1220px) {
  .couponticket-price p{ font-size: 36px; }
  .couponticket-price p b{ font-size: 70px; }
  .couponticket-price p small {
    top: 0.5em;
    transform: translateX(-8.7em);
  }
}

@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-price{
    width: 100%;
    border-left: none;
    border-top: dotted 4px white;
  }
  .couponticket section.couponticket-price{
    margin-top: var(--word-padding);
    padding-top: var(--word-padding);
  }
  .coupon-d-1 {
    width: 8vw;
  }
  .coupon-d-2{
    width: 10vw;
  }
}

@media screen and (max-width:480px) {
  .couponticket-price p { font-size: 24px; }
  .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: #355c85;
    border-radius: 0 0 10px 10px;
    text-align: center;
    color: white;
    padding: 0.5em 0 1.5em;
    min-height: 80px; 
}
.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:400px) {
.step article p{min-height: 66px;}
}


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




/*logo*/
.logo{
  width: 94%;
  max-width: 320px;
  margin: 70px auto -35px;
}
@media screen and (max-width:1220px) {
  .logo{
    margin: 10% auto -5%;
  }
}