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



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

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

a {
    text-decoration: none;
}


/*goTop*/

#goTop {
    display: none;
    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: all 0.2s;
    text-decoration: none;
}

#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;
}


@media screen and (min-width:980px) {
    
}




/*media*/





/*menu*/
.poi-header {font-family: Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;}
.poi-header img{width: auto;}



/*kv*/
#kv{position: relative; height: 706px; background:url(../images/bg1.jpg) center top no-repeat;}
.separate7{ position: absolute; left: 50%; bottom: 0; margin-left: -50%;   }

@media screen and (max-width:1220px) {
   #kv{height: 52vw; background-size: 150%; background-position-x: 61%;}
}


/*game*/
#game{position: relative; height: 1118px; background:url(../images/bg2.png) center top no-repeat; margin-top: -225px;}

@media screen and (max-width:1220px) {
   #game{height: 120vw;  background-size: 218%; background-position-x: 49%; margin-top: -17vw;}
}









/*light*/
#lightBulbGroup {position: relative; height: 100%;  }
.lightBulbGroup-singleBulb{display: inline-block; position: absolute; left: 50%; top: 50%; transition: all 0.15s; }
.lightBulbGroup-singleBulb img{width: auto; }
.lightBulbGroup-singleBulb.on{filter: hue-rotate(15deg) brightness(1.2); }
.lightBulbGroup-singleBulb.bling{filter: none; animation:bling 0.1s linear infinite alternate;}
@keyframes bling {
   from { }
     to { filter: hue-rotate(15deg) brightness(1.2); }
}

#light1{transform: translate(-408px,-195px); z-index: 6;}
#light2{transform: translate(0px,-253px); z-index: 2;}
#light3{transform: translate(-162px,-12px); z-index: 4;}
#light4{transform: translate(-250px,-254px); z-index: 1;}
#light5{transform: translate(-404px,-13px); z-index: 5;}
#light6{transform: translate(-8px,-72px); z-index: 3;}

#lightBulbBtn {width: 358px; height: 89px; background: url(../images/btn_start.png) no-repeat; position: absolute; left: 50%; top: 50%; z-index: 7; transform: translate(-180px,-43px); cursor: pointer; border: none; border-radius: 5em; overflow: hidden; animation:lightBulbBtn 0.2s linear infinite alternate; transition: all 0.2s;}
#lightBulbBtn:hover{ animation-play-state: paused !important; }
@keyframes lightBulbBtn {
   from { }
     to { background-position: 0 3px; filter: brightness(1.1);}
}

@media screen and (max-width:1220px) {
    .lightBulbGroup-singleBulb img{width: 100%;}
    #light1 {transform: none; width: 43.5%; left: 6.5%; top: 32.3%;}
    #light2 {transform: none; width: 40%; left: 51.3%; top: 27.1%;}
    #light3 {transform: none; width: 33.8%; left: 33.5%; top: 48.5%;}
    #light4 {transform: none; width: 41%; left: 24%; top: 27.2%;}
    #light5 {transform: none; width: 42.5%; left: 7%; top: 48.5%;}
    #light6 {transform: none; width: 43%; left: 50.5%; top: 43.2%;}
    #lightBulbBtn {transform: none; background-size: 100%; width: 39%;  height: 8%; left: 32%; top: 46%;}
}




/*content*/
.content {margin: 0 auto; }
h2{text-align: center;}
h2 img{    width: 94%;  max-width: 1054px; }
.area1 , .area3 , .area5{background:url(../images/bgBlue.png) 115% 400px no-repeat;}
.area2{background:#fff266 url(../images/bgYellow.png) -15% 400px no-repeat;}
.area4{background:#31ffb9 url(../images/bgGreen.png) -15% 400px no-repeat;}
.area6{background:#ffd3f5 url(../images/bgPink.png) -15% 400px no-repeat;}

@media screen and (max-width:1220px) {
    .content{background-image: none;}
    .separate{ width: 200%;     transform: translateX(-25%); }
}








/*link*/
.link {background: url(../images/bg3.png) center center no-repeat;}
.link span{ color: #caf6e5; font-size: 158px; }
.link ul{display: flex; flex-wrap: wrap; justify-content: center; padding: 100px 0;}
.link a{display: inline-block; width: 50px; height: auto; background:#463076; border-radius: 5em; transition: all 0.2s; margin: 10px;}
.link a:hover{background:#248ee7;}

@media screen and (max-width:1040px) {
    .link {background-size: 90%; background-position: 50%;}
    .link ul{       padding: 35px 0; margin-bottom: 50px;}
}
@media screen and (max-width:640px) {
    .link a{ width: 40px;     margin: 5px; }
}





/*fixed*/
.fixed{display: none; position: fixed; left: 0; top: 50%; transform:translate(-25%,-50%); z-index: 10;}
.fixed a{display: inline-block; transition: all 0.2s;}
.fixed a:hover{transform: translateX(10%);}

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







/*randomContentGroup*/
#randomContentGroup { display: none; position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background:#ffdcdc;     z-index: 11; } 
#randomContentGroup .xx{display: inline-block; position: absolute; right: 0.5em; top: 0.5em; font-size: 40px; font-weight: bold; background: black;  color: white; border-radius: 5em; width: 1.4em; height: 1.4em; text-align: center; padding: 0.2em; transition: all 0.2s; z-index: 12; }
#randomContentGroup .xx:hover{transform: scale(1.2);}
.randomContentGroup-single { display: none; width: 1166px; height: 754px; background:url(../images/bgPopup.png) center center no-repeat; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.randomContentGroup-single h3{width:100%; max-width: 520px; margin: -30px auto 0;}
.randomContentGroup-single > p{text-align: center; font-size: 24px; line-height: 1.5; padding: 30px 0px;}
.randomContentGroup-single > p span{position: relative; display: inline-block; background: white; font-weight: bold; margin-top: 0.5em; padding-left: 1em;}
.randomContentGroup-single > p span .mascot{width: auto; position: absolute; left: -2em; bottom: 0;}
.randomContentGroup-single > p span a{background: #326e9e; color: white; display: inline-block; padding: 0 1em; margin-left: 1em; transition: all 0.2s;}
.randomContentGroup-single > p span a:hover{padding: 0 2em;}
.randomContentGroup-single > p span a img{width: 1em; vertical-align: middle;}
.randomContentGroup-single .goods{display: flex; justify-content: center; padding: 0 7%; }
.randomContentGroup-single .goods .recommendation{width: 60%;  text-align: center;}
.randomContentGroup-single .goods .recommendation p{font-size: 28px; font-weight: bold; padding: 1.5em 0 1em;}
.randomContentGroup-single .goods .recommendation p b{background:black; color: white; padding: 0 0.5em; margin-right: 0.5em;}
.randomContentGroup-single .goods .picture{position: relative; width: 40%;   text-align: center; }
.randomContentGroup-single .goods .picture img{position: absolute; left: 50%; top: 50%; width: auto;}
.randomContentGroup-single .goods .picture img.illustration1{transform: translate(-45%,-60%); }
.randomContentGroup-single .goods .picture img.illustration2{transform: translate(-42%,-60%); }
.randomContentGroup-single .goods .picture img.illustration3{transform: translate(-42%,-60%); }
.randomContentGroup-single .goods .picture img.illustration4{transform: translate(-42%,-60%); }
.randomContentGroup-single .goods .picture img.illustration5{transform: translate(-40%,-55%); }
.randomContentGroup-single .goods .picture img.illustration6{transform: translate(-42%,-60%); }
.randomContentGroup-single .goods .picture button{width: 70vw; max-width: 360px; height: 17.5vw;  max-height: 90px; background: url(../images/btn_goto.png) center top no-repeat; border:none; border-radius: 5em; overflow: hidden; cursor: pointer; position: absolute; right: 0;  bottom: 0; animation:gotoBtn 0.2s linear infinite alternate; transition: all 0.2s;     z-index: 1;}
.randomContentGroup-single .goods .picture button:hover{ animation-play-state: paused; background-position: 0 3px; }
@keyframes gotoBtn {
   from { }
     to { background-position: 0 3px; filter: brightness(1.1);}
}


@media screen and (max-width:1080px) {
    .randomContentGroup-single{width: 94%; height: auto; max-height: 94%; overflow-y: scroll;  background: white; border: solid 3px; border-radius: 2em; padding: 4%;}
    .randomContentGroup-single h3{ margin: 0 auto; }
    .randomContentGroup-single > p{ font-size: 16px; padding: 0.5em 0px; }
    .randomContentGroup-single > p span{margin:1em 0;}
    .randomContentGroup-single > p span .mascot{ position: inherit; vertical-align: bottom; left: auto; top: auto;}
    .randomContentGroup-single .goods{    flex-wrap: wrap; padding: 0;}
    .randomContentGroup-single .goods .recommendation{width: 100%;}
    .randomContentGroup-single .goods .recommendation p{ font-size: 20px; padding:0; line-height: 1.2; }
    .randomContentGroup-single .goods .recommendation img{margin:5% auto;}
    .randomContentGroup-single .goods .picture{width: 100%;}
    .randomContentGroup-single .goods .picture img{display: block; position: inherit; left: inherit; top: inherit; transform: none !important; width: 90%;   margin: 5% auto 0; }
    .randomContentGroup-single .goods .picture button{position: inherit;  right: inherit; bottom: inherit;  background-size: 100%; }
}

@media screen and (max-width:640px) {
    #randomContentGroup .xx{font-size: 24px;}
}





/*video*/
#video{padding: 0 3% 3%; font-size: 22px;}
#video h2 img{ max-width: 800px;  }
#video .iframeBox{position: relative; width: 1060px; margin: 1em auto; padding-bottom: 595px;}
#video .iframeBox iframe{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
#video p{ text-align: center; font-weight: bold; line-height: 1.5;}

@media screen and (max-width:1220px) {
    #video{font-size: 18px;}
    #video .iframeBox{width: 100%; padding-bottom: 56.25%;}
}




/*bank*/
#bank{padding: 3%; background: #ffdcdc; font-size: 22px; }
#bank .logo{text-align: center; padding: 1em 0;}
#bank .logo img{width: 65%; max-width: 360px; }
#bank .bankBox{ background: white; border-radius: 15px;     margin: 2em auto 3em; max-width: 1220px;}
#bank .bankBox.blue{background:#463076;}
#bank .bankBox h3{background:#39d19d; color: white; font-weight: bold; font-size: 136%; text-align: center; width: 60%; margin: 0 auto; padding: 1em 0; border-radius: 0 0 15px 15px;}
#bank .bankBox.blue h3{background:#6b49b3;}
#bank .bankBox.redred h3{background:#e2211c;}
#bank .bankBox .btn{display: block; width: 100%; font-weight: bold; text-align: center; padding: 1em 0; border-radius: 15px; color: black; background:#64e8bb; box-shadow: 0 9px 0 #449e80; transition: all 0.2s;}
#bank .bankBox .btn.red{ background:#e2211c; box-shadow: 0 9px 0 #9e1813; color: white;}
#bank .bankBox .btn1{ padding: 0 2em 2em; }
#bank .bankBox .btn2 .btn{ background: #553b8f; box-shadow: 0 9px 0 #342457; color: white;}
#bank .bankBox .btn:hover{ transform: translateY(5px); }
#bank .bankBox .btn1 .btn:hover{  box-shadow: 0 5px 0 #449e80;  }
#bank .bankBox .btn1 .btn.red:hover{  box-shadow: 0 5px 0 #9e1813;  }
#bank .bankBox .btn2 .btn:hover{  box-shadow: 0 5px 0 #342457;  }
#bank .bankBox h5{text-align: center; font-size: 180%; line-height: 1.2; font-weight: bold; letter-spacing: 0.05em; padding: 1em 1em 0;}

#bank .bankBox-2 , #bank .bankBox-c26{display: flex; justify-content: center; padding: 2em;}
#bank .bankBox-2 dl{width: 50%; font-weight: bold; padding: 0 2em; display: flex; flex-wrap: wrap;}
#bank .bankBox-2 dl:first-child{border-right:solid 2px #00b476; }
#bank .bankBox.redred .bankBox-2 dl:first-child{border-right:none;}
#bank .bankBox-2 dt{width: 100%; color: #00b476; font-size: 300%; text-align: center;     letter-spacing: 0.1em;   padding-bottom: 0.5em;}
#bank .bankBox-2 dt.cardName{ font-size: 180%; color: #e2211c;  }
#bank .bankBox-2 dd{  padding: 1em 0;  line-height: 1.5; width: 100%; }
#bank .bankBox-2 dd p.inlineBlock{display: inline-block;}
#bank .bankBox-2 dd.btn2{  align-self: flex-end;}
#bank .bankBox-2 dd b{background:#e2211c; color: white; padding: 0 0.5em; margin: 0 0.2em; border-radius: 5em;}
#bank .bankBox-2 dd .mark{display: inline-block; font-size: 180%; line-height: 1; background: url(../images/bg_mark.jpg) left bottom repeat-x;}
#bank .bankBox-2 dd .mark span{font-size: 160%;}
#bank .bankBox-2 dd small{ color: #4c4c4c; font-weight: normal; }
#bank .bankBox-2 dd p img{margin-bottom: 0.5em;}

#bank .info{display: flex; justify-content: center; align-items: center;   line-height: 1.2;}
#bank .info .left{   font-size: 170%; padding-right: 1em; margin-right: 1em; border-right:solid 1px; }
#bank .info .right{font-size: 110%;}

#bank .ex{ padding: 2em; color: gray;}
#bank .ex h6{text-align: center;     font-size: 100%;     padding: 1em 0;}
#bank .ex ul{    padding-left: 1em;}
#bank .ex li{font-size: 70%; line-height: 1.5; list-style-type: decimal; }


@media screen and (max-width:980px) {
    #bank{font-size: 18px;}
    #bank .bankBox h3{width: 80%;}
    #bank .bankBox-2 , #bank .bankBox-c26{padding: 2em 0;}
    #bank .bankBox-2 dl:first-child{ padding: 0 2em; }
    #bank .info .left{   font-size: 120%; padding-right: 0.5em; margin-right: 0.5em;  }
    #bank .info .right{font-size: 80%;}
}

@media screen and (max-width:640px) {
    #bank .bankBox h3{width: 100%; border-radius: 0;}
    #bank .bankBox-2 , #bank .bankBox-c26{flex-wrap: wrap; padding: 1em;}
    #bank .bankBox-2 dl{width: 100%; padding: 0 !important; text-align: center;}
    #bank .bankBox-2 dl:first-child{    border-right: none;     padding: 1em 0 !important;}
    #bank .bankBox .btn1{    padding: 0 1em 2em;}
    #bank .bankBox-2 dt{    font-size: 250%; }
    #bank .bankBox h5{font-size: 140%;}
    #bank .ex{padding: 1em;}
}