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

#mtkContainer {  background: url(../images/bg-header.jpg) #f8f0e9 top center no-repeat;  }
.footerBg { background: url(../images/bg-footer.jpg) bottom center no-repeat; }

header.header {height: 634px;   }
header.header h1 { display: none; }
.content { margin: 0 auto ; padding-bottom: 50px;  width: 100%; max-width: 1400px; text-align: center;  }
.content .box { display: inline-block; margin:0 20px 40px 20px ; padding: 0; width: calc(33.333% - 40px); max-width: 415px; letter-spacing: normal;
 border-bottom:3px solid #777; box-shadow: 0 6px 10px rgba(0,0,0,0.2) ;transition: .5s; background: #fff; }
.content .photo img { width: 100%; transition: .5s; }
.content .box a   { font: 24px/1.8 "微軟正黑體"; color: #777; text-decoration: none; }
.content .box .photo { line-height: 1; overflow: hidden; }
.content .box:hover { border-bottom:3px solid #000; box-shadow: 0 4px 4px rgba(0,0,0,0.3); transform: translateY(5px); } 
.content .box:hover a { color: #000; } 
.content .box:hover img { transform: scale(1.05); }
.content .text img { vertical-align: top; }


@media only screen and (max-width: 800px) {
	
.content .box {width: calc(50% - 40px);  }


}



@media only screen and (max-width: 500px) {
  #mtkContainer {  background:  #f8f0e9   }
  header.header {height: auto;  }
  header.header h1 { display: block; }
header.header h1 img { width: 100%; }
.content  { transform: translateY(-10%); }
.content .box {margin:0 1% 10% 1% ; width: calc(50% - 2%);  }

.content .box a   { font: 18px/1.8 "微軟正黑體"; color: #777; text-decoration: none; }
.content .text img { width: 35px; }
}