.inlineBlockSpacing {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
    
}

#mtkContainer,
#mtkContainer * { box-sizing: border-box; }


header.header { position: relative; height: 867px; background:url(../images/header-pc.jpg) top center no-repeat; }
.tableHeader { display: none; }
.page { position: absolute; bottom: 50px; left: 0; width: 100%; text-align: right; }
.page ul { margin: 0 auto; width: 100%; max-width: 1400px; letter-spacing: -0.31em;  *letter-spacing: normal;  *word-spacing: -0.43em; text-rendering: optimizespeed;  }
.page li { margin: 0 5px; display: inline-block; letter-spacing: normal; border:1px solid #ffd844; transition: .5s;}
.page li a { display: block; padding: 5px 10px; font: 22px/1 "微軟正黑體"; color: #ffd844; text-decoration: none; }
.page li:hover { transform: translateY(-10px); }


.contentBase {  background:url(../images/bg-1.jpg) top center repeat-y; }
.content { margin: 0 auto; width: 100%; max-width: 1400px; }

.content-infor { margin-bottom:100px; letter-spacing: -0.31em;  *letter-spacing: normal;  *word-spacing: -0.43em; text-rendering: optimizespeed;  }
.content-infor .photo { position: relative; display: inline-block; width: 50%; letter-spacing: normal; }
.content-infor .text { display: inline-block; padding: 15px; width: 50%; letter-spacing: normal; vertical-align: top; }


.content-infor .photo img { width: 100%; }
.content-infor .photo::after,
.content-infor .photo::before { content: ""; position: absolute;z-index: 5; width: 110px; height: 110px; background: url(../images/dir-1.png) top center no-repeat; }
.content-infor .photo::after { top:-10px;left: -10px; }
.content-infor .photo::before { bottom:-10px;right: -10px; transform: rotate(180deg); }

.content-infor  h2 { font: bold 30px/1.4 "微軟正黑體"; color: #ffd844;  text-align: center; }
.content-infor .text p { font: 18px/1.6 "微軟正黑體"; color: #fff; letter-spacing: 1px;  }

.contentBase.gold {  padding:100px 0 20px 0; background:url(../images/bg-2.jpg) top center repeat-y; }
.contentBase.gold .content-infor .text p { color: #000; }
.contentBase.gold .content-infor  h2 { color: #d80621; }



.contentBase.gold .content-infor .photo::after, 
.contentBase.gold .content-infor .photo::before  {background: url(../images/dir-2.png) top center no-repeat;  }


.button { margin: 30px auto 0 auto; width: 100%; max-width: 80%; background: #d80621;border-radius: 99em; box-shadow: 0 10px 10px rgba(0,0,0,0.1); transition: .5s;}
.button a { display: block; padding: 15px 0; font: bold 30px/1.4 "微軟正黑體"; color: #fff;  text-align: center;  }
.button:hover { transform: translateY(-10px); }





.warn { position: fixed; bottom:0; left: 0; padding: 10px 0; width: 100%;  font: 7vh/1.2 "微軟正黑體"; color: #000; text-align: center; letter-spacing: normal; background: #fff; z-index: 10; }


@media only screen and (max-width: 1400px) {


header.header { position: relative; height:auto; background: none; }
.tableHeader { display: block; line-height: 0;}
.tableHeader img { width: 100%; }

}

@media only screen and (max-width: 800px) {
.page { position: static; bottom: 0px; left: 0; padding: 20px 0; width: 100%; text-align: center;background:url(../images/bg-1.jpg) top center repeat-y;
width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; 
 }
.page ul {position:relative; width: 100%; z-index: 10; padding: 0px; white-space:nowrap; width:auto;}
.content-infor .photo { margin:  0 auto; display: block; width: 95%; max-width: 80%; }
.content-infor .text {margin:  0 auto; display: block; padding: 1%; width: 95%; max-width: 80%; }

}


@media only screen and (max-width: 500px) {
   .content-infor .photo { margin-bottom:10%; }

   .contentBase.gold .content-infor .photo::after, 
.contentBase.gold .content-infor .photo::before
 .content-infor .photo::after,
.content-infor .photo::before { width: 80px; height: 80px; background-size: 100%; } 

.page li a {  font: 18px/1 "微軟正黑體"; }


.content-infor h2 { font: bold 24px/1.4 "微軟正黑體"; color: #ffd844;  text-align: center; }


.warn {  font: 5vh/1.2 "微軟正黑體";  }
.warn img { display: block; margin: 0 auto;width:100%; max-width: 350px;  }
}