body { overflow-x: hidden; }

#mtkContainer { position: relative;overflow-x: hidden; background: url(../images/bgHeaderPc.jpg) top center no-repeat; }
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

a,
a:hover { text-decoration: none; }

.width1200 { margin: 0 auto; width: 90%; max-width: 1200px; text-align: center; }
.line1 { height:40px; background: url(../images/line1.jpg) top center no-repeat; }
.line2 { transform: scaleY(-1); height:40px; background: url(../images/line1.jpg) top center no-repeat; }
.line3 { height:40px; background: url(../images/line3.jpg) top center no-repeat; }

header.header {	height: 816px;}
.headerContent .box2 { padding-top: 85px; }
.headerContent .box2 > div { display: inline-block; letter-spacing: normal; }
.headerContent .box2 .h1Content { text-align: right; width: 57% }
.headerContent .box2 .lastNum { position: relative; width:43%; transform: translateX(-16px); }
.headerContent .lastNum .numBase { position: absolute; left: 57%; top:81%; font: 40px/1em "arial"; color: #fff200; }
.headerContent .lastNum  img { width: 100%; max-width: 449px; }
.h1Content h1 img { width: 100%; max-width: 597px; }

.content1 { background: url(../images/bgContent1.jpg) top center repeat; }
h2 { padding:20px 0 15px 0;  }
.content1 h3 { display: inline-block; margin:0px 0 20px 0; padding: 5px 20px;  font: 26px/1em "arial","微軟正黑體"; color: #00bbd6; background: #fff; border-radius: 99em; }


.group-type-ph { 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 */ }

.group-type-ph .ph { display: inline-block; margin: 0 1% 2% 1%; padding: 10px; width: 48%;
 letter-spacing: normal; background: #fff; box-shadow: 5px 5px 5px #009cb4; transition: .5s;}
.group-type-ph .ph:hover { transform: scale(0.95); }
.group-type-ph .addPhBox2 > div { display: inline-block; width: 50%; letter-spacing: normal; }
.group-type-ph .addPhBox2 img { width: 100%; }

.addPhBox2 .addText { position: relative; padding-left: 10px; padding-bottom: 0px; text-align: left; height: 100%; }
.addText .ph-title { font: bold 22px/1.2em "arial","微軟正黑體"; color: #000;  }
.addText .ph-detail { font:  18px/1.4em "arial","微軟正黑體"; color: #000;  }
.addText .price { position: absolute; bottom: 0; right: 0; font: bold 16px/2.2em "arial","微軟正黑體"; color: #ff305c;
letter-spacing: -2px; vertical-align: bottom;}

.addText .price span {font: bold 26px/1.2em "arial","微軟正黑體";   }

.ph .ph-feature { padding: 5px 0; font: 18px/1.4em "arial","微軟正黑體"; color: #000; text-align: left; background: #d5d5d5; }


.content2 { padding: 20px 0; background: url(../images/bgContent2.jpg) top center repeat; }
.content2 .box2 > div { display: inline-block; padding: 10px; width: 50%; letter-spacing: normal; transition: .5s; }
.content2 .box2 > div:hover { transform: scale(0.95); }
.content2 .box2 .img { position: relative; }
.content2 .box2 .colorMat { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.8) }
.content2 .box2 .text { position: absolute;top: 30%; left: 0; width: 100%; text-align: center; z-index: 3; color: #fff; }
.content2 .box2 .text h3 {font: 40px/1.4em "arial","微軟正黑體"; }
.content2 .box2 .text p {font: 24px/1.4em "arial","微軟正黑體"; }
.content2 .box2 img { width: 100%; }

.content3 { padding: 20px 0; background: url(../images/bgContent3.jpg) top center repeat; }
.content3 .box2 > div { display: inline-block; padding: 10px; width: 50%; letter-spacing: normal; }
.content3 .box2 .text p { padding-top: 10px; font: 18px/1.6em "arial","微軟正黑體"; color: #fff; text-align: left; }
.content3 .box2 .text p b { font-size: 24px; }
.content3 .box2 .text span { color: #fff200; }

.content4 { padding: 20px 0; background: url(../images/bgContent4.jpg) top center repeat; }

.noteBase { padding: 20px; border-radius: 20px; background: #fff; }
.noteBase ul li { padding-bottom:15px; font: 18px/1.6em "arial","微軟正黑體"; color: #000; text-align: left;  }




.informationBase { display: none; }
.informationBase  h3 { padding-bottom:15px; font: bold 24px/1.6em "arial","微軟正黑體"; color: #000;   }
.informationBase  ul li { padding-bottom:15px; font: 18px/1.6em "arial","微軟正黑體"; color: #000; text-align: left;  }
.informationButton { display: inline-block; padding: 6px 15px; font: 18px/1em "arial","微軟正黑體"; color: #fff;
background: #00bbd6; border-radius: 99em; cursor: pointer; }

.numDate { display: none; }




@media only screen and (max-width: 800px) {
body { background: url(../images/bgRepeat.jpg) top center repeat;  }
	

#mtkContainer { background: url(../images/bgHeaderM.jpg) top center no-repeat;  background-size:300vw auto ;  }	
header.header {	height: auto;}	
.headerContent .box2 { padding-top: 10%; }
.headerContent .box2 > div { display: inline-block;  }
.headerContent .box2 .h1Content { text-align: center; width: 100% }
.headerContent .box2 .lastNum {  position: relative; margin-bottom: 10%; width:auto; transform: translateX(0px); }
.headerContent .lastNum .numBase { position: absolute; left: 58%; top:81%; font: 2.4rem/1em "arial";}

 .group-type-ph .ph { width: 98%; }
 .group-type-ph .addPhBox2 > div { display: inline-block; width: 50%; letter-spacing: normal; }
}





@media only screen and (max-width: 768px) {
#mtkContainer { background-size: auto 105vh;  }	
.content2 .box2 > div  { width: 100%; }
.content3 .box2 > div  { width: 100%; }

}

@media only screen and (max-width: 700px) {
.headerContent .lastNum .numBase { top: 81%; }
}
@media only screen and (max-width: 600px) {

}

@media only screen and (max-width: 440px) {
.headerContent .lastNum img { width: 90% }
.h1Content h1 img  { width:90% }
.headerContent .lastNum .numBase { font: 2rem/1em "arial";}
}

@media only screen and (max-width: 415px) {
.headerContent .lastNum .numBase { font: 1.8rem/1em "arial";}

.group-type-ph .ph {  margin: 0 1% 10% 1%; }

.group-type-ph .addPhBox2 > div { display: inline-block; width: 100%; letter-spacing: normal; }
.addText .price { position: static; display: block; font: bold 16px/2.2em "arial","微軟正黑體";
 color: #ff305c; text-align: center;}

}

@media only screen and (max-width: 375px) {
.headerContent .lastNum .numBase { font: 1.8rem/1em "arial";}
}