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

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

a {
    text-decoration: none;
}





.inlineBlockSpacing {
    letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;  text-rendering: optimizespeed;     
}
* { box-sizing: border-box; }




.main{position: relative; background:#010f29 url(../images/main.jpg) center top no-repeat; height: 1130px;}
.mainM{display: none;}

@media screen and (max-width:1280px) {
	.main{background:#010f29; height: auto; }
	.mainM{display: block;}
}




#view { position: absolute; width: 430px; height: 500px; overflow: hidden; left: 50%; top: 60px;  margin-left: 310px;}
#view-content { position: absolute; top:0px; left: 0; width: 100%; height: auto;  }
.userMessage { display: block; position: relative; margin:20px auto; padding: 1em 1.5em 2.5em; background: rgba(255,255,255,0.8); font-size: 16px; color: #414141; font-weight: bold; }
.userMessage p { letter-spacing: 0.05em;  line-height: 1.5; overflow: hidden;}
.userMessage span { display: inline-block; position: absolute; bottom: 1em; right:9em; text-align: right; max-width: 16em; height: 1em; overflow: hidden;     font-size: 85%;}
.userMessage span:before{content: '- ';}
.userMessage i { display: inline-block; position: absolute; bottom: 1em; right:1.5em; text-align: right; font-style: normal; border-left: solid 1px; padding-left: 1em;    font-size: 85%;}

@media screen and (max-width:1580px) {
    #view{ left: inherit;  right: 2%; }
}
@media screen and (max-width:1280px) {
    #view{ position: relative; right: inherit; top: inherit; width: 90%; margin: -10% auto 0; height: 300px;}
    .userMessage{ font-size: 16px; margin: 10px auto; }
}




a.more{display: block; position: absolute; font-size: 16px; font-weight: bold; letter-spacing: 0.05em; color: white; padding: 1em 0; left: 50%; top: 570px;  margin-left: 516px; width: 14em; text-align: center;}
a.more span{display: block; border-bottom: solid 1px;     position: relative; margin-top: 0.7em; }
a.more span:after{content: ''; border-right: solid 1px;  transform: rotate(-45deg);  height: 10px; position: absolute;  right: 3px; bottom: -2px;}
a.more:hover span{ animation:moreAnimate 0.3s linear infinite alternate; }
@keyframes moreAnimate {
   from {  }
     to { transform: translateX(5px); }
}

@media screen and (max-width:1580px) {
    a.more{ left: inherit;  right: 2%; }
}
@media screen and (max-width:1280px) {
	a.more{ position: relative; top: inherit; right: inherit; margin: 0 auto; margin-top: 0.5em; }
}





.goodbye{background: black; padding: 130px 0;}
@media screen and (max-width:1280px) {
    .goodbye{padding: 65px 0;}
}



#allMessage {width: 90%; margin: 65px auto; height: 80vh; overflow-x: hidden; overflow-y: scroll; }
#allMessage-content { display: flex;  justify-content: flex-start; flex-wrap: wrap;   }
#allMessage .userMessage {  width: calc(92%/4); margin: 1%; background: white;   }

@media screen and (max-width:1280px) {
    #allMessage .userMessage {  width: calc(96%/2); }
}


@media screen and (max-width:960px) {
    #allMessage{    margin: 10vw auto;}
    #allMessage .userMessage{  width: 98%; }
}




#addMessage{ position: relative; margin: 100px auto 0; font-size: 20px; width: 100%; max-width: 810px;  }
.addMessage-Wrap {padding: 3em;  background: white; }
.addMessage-title{ display: inline-block;  font-size: 150%; color: white; background: #6b4f9f; border-radius: 5em; padding: 0.4em 2.3em; position: absolute; left: 50%; top: -1em; transform: translateX(-50%);     text-align: center; }
#addMessage-content { width: 100%; height: 170px; resize: none; border:none; }

#addMessage-button { display: flex; justify-content: center; padding-top: 1em; }
#addMessage-button li { display: inline-block; width: 60%; background: #ff7757; transition: all 0.2s; }
#addMessage-button li a { display: block; padding: 1em 0; letter-spacing: 0.05em; color: white; text-align: center; }
#addMessage-button li:nth-child(2),
#addMessage-button li:nth-child(3) { display: none; }
#addMessage-button li:hover { filter: brightness(1.1); transform: translateY(5px); }
#addMessage-button.act{ justify-content: space-between; }
#addMessage-button.act li{width: 32%;}
#addMessage-button.act li:nth-child(2),
#addMessage-button.act li:nth-child(3) { display: inline-block; }

#addMessage-nickname { display: flex; margin-bottom: 2em; }
#addMessage-nickname span {    width: 3.5em; line-height: 1.2; }
#addMessage-nickname-content { width: calc(100% - 3.5em);  height: 1.4em; line-height: 1.2; resize: none; border:0; }

@media screen and (max-width:960px) {
    #addMessage{width: 90%;     margin: 65px auto 0; font-size: 18px;}
    .addMessage-Wrap{     padding: 2.5em 1.5em; }
    .addMessage-title{width: 60%;  left: 20%; transform:none;     padding: 0.4em 0;}
}






.start{display: inline-block; margin-top: 836px; width: 100%; }
.start img{display: block; margin: 0 auto; width: auto;     max-width: 920px;}

@media screen and (max-width:1280px) {
   .start{    margin: 11vw 0; }
   .start img{width: 95%;}
   .start br{display: none;}
}




.introWrap{padding: 65px 0;}
.intro{text-align: center; color: white; font-size: 25px; line-height: 1.8em;  letter-spacing: 0.2em; padding: 0 1em;}
.intro span{font-size:160%; color: #ffe9d3; letter-spacing: 0; }
@media screen and (max-width:1280px) {
    .introWrap{padding: 25px 0;}
    .intro{font-size: 16px;   }
    .introWrap br{display: none;}
    .introWrap br.m{display: block;}
}






.section-all{ position: relative;}
.section-all .gradual{
    background: #010f29;
    background: -moz-linear-gradient(top,  #010f29 0%, #858c92 100%);
    background: -webkit-linear-gradient(top,  #010f29 0%,#858c92 100%);
    background: linear-gradient(to bottom,  #010f29 0%,#858c92 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010f29', endColorstr='#858c92',GradientType=0 );
}
.section-all .gradual2{
    background: #858c92;
    background: -moz-linear-gradient(top,  #858c92 0%, #959c9f 50%, #959c9f 100%);
    background: -webkit-linear-gradient(top,  #858c92 0%,#959c9f 50%,#959c9f 100%);
    background: linear-gradient(to bottom,  #858c92 0%,#959c9f 50%,#959c9f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#858c92', endColorstr='#959c9f',GradientType=0 );
}
.section-all section {padding: 130px 0;}
.section-all h3{text-align: center;}
.section-all h3 img{width: auto; max-width: 750px;}
.bglight{position: relative; background:url(../images/bglight.jpg) center bottom no-repeat; }
/*.bglight:after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100px;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}*/

.flexWrap{display: flex; justify-content: center;}
.blog{width: calc(50% - 50px); max-width: 460px; margin-right: 100px; transition: all 0.2s;}
.blog p{background: white; color: black;     height: 72px; font-size: 18px; padding: 0 1em; display: flex;
    position: relative; align-items: center;}
.blog p b{line-height: 72px; letter-spacing: 0.05em; position: absolute; background: white;
    left: 0; top: 0; padding: 0 1em; z-index: 2;}
.blog p span{border-bottom: solid 1px; width: 50%; position: absolute;right: 0; z-index: 1; margin-right: 1em;}
.blog p span:after{content: '';border-right: solid 1px;transform: rotate(-45deg); height: 10px; position: absolute; right: 3px; bottom: -2px;}
.blog a:hover span{animation:moreBlog 0.3s linear infinite alternate;}
@keyframes moreBlog {
   from {  }
     to { transform: translateX(5px); }
}
.video{position: relative; width: 828px; height: 446px;}
.video.videoCenter{margin: 0 auto;}
.video iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.boxLeft{width: auto; margin-right: 65px; transition: all 0.2s;}
.boxRight{width: auto; transition: all 0.2s;}
.boxLeft a , .boxRight a{display: block; transition: all 0.2s; }

.swiperWrap img , .blog img{transition: all 0.2s;}
.swiperWrap:hover img , .blog:hover img{ filter: brightness(1.1);}
.swiperWrap{ width: calc(50% - 50px); max-width: 520px; }
.swiper-button-prev, .swiper-button-next{color: white;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 0;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left:0;}
.swiper-pagination-bullet{background: white;}

.blog:hover a , .ph:hover a , .boxLeft:hover a , .boxRight:hover a{ filter: drop-shadow(5px 5px 2px rgba(0,0,0,0.5));     transform: translate(-2px,-2px); }

@media screen and (max-width:1600px) {
    .section-all section{padding-left: 100px; }
    .video{ width: 570px; }
}

@media screen and (max-width:1280px) {
    .flexWrap{ flex-wrap: wrap; max-width: 520px; margin: 0 auto;}
    .section-all section{    padding: 65px 0 65px 35px; }
    .section-all h3 img{width: 100%;}
    .blog{width: calc(100% - 40px);  margin: 0 auto 25px;}
    .video{width: 100%;   margin:0 auto 25px auto; height: 0; padding-bottom: 56.25%; }
    .swiperWrap{ width: 100%;     margin-top: 25px; }
    .swiper-button-prev:after, .swiper-button-next:after{font-size: 20px; transform: scaleY(1.5);}
    .swiper-button-prev, .swiper-button-next{width: 1em;}
    .boxLeft{   width: calc(100% - 40px);  max-width: 480px; height: auto;  margin:25px auto;}
    .boxRight{   width: calc(100% - 40px);  max-width: 480px; height: auto; margin-top: 25px;  }
}


@media screen and (max-width:960px) {
    .bglight {
        background-size: 200%;
    }
    .bglight:after{display: none;}
}

@media screen and (max-width:460px) {
    .blog p{font-size: 16px;}
}









.stitle{font-size: 20px; color: #ffe9d3; text-align: center; letter-spacing: 0.1em; padding-bottom: 1em;}
.loadGif{position: relative; max-width: 1400px; margin: 65px auto;  }
/*.loadGif #reloadGif{position: absolute; left: 0; top:0;}*/
.fbiframe{background: white; width: 480px; height:630px; display: block; margin: 0 auto;} 

@media screen and (max-width:1280px) {
    .stitle{font-size: 16px;}
    .loadGif{margin: 25px auto;}
}

@media screen and (max-width:580px) {
    .fbiframe{ width: 380px; height:540px; }
}
@media screen and (max-width:480px) {
    .fbiframe{ width: 280px; height:480px; }
}
@media screen and (max-width:380px) {
    .fbiframe{ width: 240px; height:450px; }
}






.ScrollBarWrap{
    position: absolute;
    left: 1.5em;
    top: 82px;
    font-size: 24px;
    z-index: 100;
}
.ScrollBarWrap.fixed{
    position: fixed;
    top: 4vh;
}
.ScrollBarWrap.fixedBottom{
    position: absolute;
    top: inherit;
    bottom: 4vh;
}

.scrollBar{
    display: block;
    position: relative;
    width: 2em;
    height: 16vh;
    margin: 2vh 0;
    cursor: pointer;
    z-index: 101;
}

.percentBarNull , .percentBar{
    position: absolute;
    right: 0.5em; top: 0;
    width: 2px;
}

.percentBarNull{
    height: 100%;
    z-index: 102;
    background: white;
}

.percentBar{
    width: 4px;
    transform: translateX(1px);
    height: 0;
    max-height: 100%;
    background: #ff0000;
    z-index: 103;
}


.scrollText{
    position: absolute;
    font-weight: bold;
    color: #ffe9d3;
    top: 50%;
    right: 3em;
    width: 1em;
    text-align: center;
    line-height: 1.1;
    transform: translateY(-50%);
    opacity: 0;
}

.scrollText.now , .scrollBar:hover .scrollText{
    transition: all 0.3s;
    opacity: 1;
    right: 1.5em;
}

.scrollText span{
    display: inline-block;
    transform: translateX(-25%) scale(0.8);
}

@media screen and (max-width:1280px) {
    .ScrollBarWrap{
        font-size: 14px;
        left: 0.8em;
    }
    .scrollText.now, .scrollBar:hover .scrollText{     right: 1.2em; }
    .percentBar{width: 2px; transform: none;}
}







.goodbye h2{text-align: center;}
.goodbye h2 img{max-width: 750px;}
.goodbye .hello{font-size: 20px; text-align: center; color: white; line-height: 1.8; letter-spacing: 0.05em; margin: 2.5em auto 0; width: 90%;}
.goodbye .hello b{font-size:150%; }

@media screen and (max-width:960px) {
    .goodbye .hello{font-size: 16px;}
    .goodbye .hello br{display: none;}
}





.ex{color: white;   background: black; color: white; font-size: 16px; letter-spacing: 0.05em; padding-bottom: 65px;}
.ex h5{text-align: center; font-size: 187.5%; width: 90%; max-width: 920px; margin: 0 auto; padding-top: 100px; border-top: solid 1px; }
.ex ul{display: block; width: 90%; max-width: 920px; margin: 0 auto;  padding: 1.2em 0; line-height: 1.5; }
.ex ul li{padding: 1.2em 0;     margin-left: 1em; list-style-type: decimal;}

@media screen and (max-width:960px) {
    .ex{ font-size: 14px;     padding: 10vw 0;}
    .ex h5{    padding-top: 20vw;}
}






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



table.award {width:100%; border-collapse: collapse; margin:10px auto;font-size: 16px;font: 16px/1.4 "微軟正黑體";text-align: center;}
table.award th{background-color: #bf0912;color:#FFF; width:40%;text-align: center;}
table.award td{text-align: justify;text-align: center;background: #FFF;}
table.award th,table.award td{border:1px solid #333;padding: 5px;}