body { overflow-x: hidden; }

#mtkContainer { margin:0; padding:0; position: relative;/*overflow-x: hidden;*/ }
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

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

.width1200 { margin:0 auto; position: relative; width: 100%; max-width: 1200px; }

header.header { margin:0; padding:0; height: 775px; background: url(../images/bgHeaderPc.jpg) top center no-repeat; }
.table {display: none;} 
.m {display: none;} 
header.header h1 {  padding:0; height: 100%; }
.timeBase { position: absolute; top: 82%;left: 15%; padding-top: 0.5%; font: bold 30px/1em "微軟正黑體"; color: #fff; 
  }
.timeBase span { font: bold 30px/1em "微軟正黑體"; color: #fff;  }
.timeBase span.typeYellow ,
.timeBase span.typeYellow span { color: #fff200; }


h2,h2 span { padding-top: 30px; text-align: center;font: 32px/1.4 "微軟正黑體"; color: #fff; letter-spacing: 12px; position: relative;}

h2::after{content: "";background: url(../images/h2bottom.png) top center no-repeat;width: 266px;height: 25px;position: absolute;bottom: -30px;left: calc(100% /2.6 );}


h2 span{color:#ecbd22;}

.content2 h2{color:#000;}
.content1 { background: #224463; padding: 10px 0;}
.content2 { background: #e3e3e3; padding-bottom:10px;}


.yellowline{width: 100%;height: 1px; background: #ecbd22;display: block;}

.c26Base { padding-top: 30px; }


.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 */ 
;margin: 20px 0;}

.group-type-ph .ph { position: relative; display: inline-block; margin: 0 1% 2% 1%; padding: 10px; width: 48%;
 letter-spacing: normal; background: #fff; box-shadow: 5px 5px 5px rgba(0,0,0,0.2); transition: .5s;}
.content2 .group-type-ph .ph  { box-shadow: 5px 5px 5px rgba(0,0,0,0.2); }
.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; }
.ph .viewBase { position: absolute; top:0; left: 0; padding:5px 5px; font: 16px/1em "arial","微軟正黑體"; 
color: #fff; background: rgba(0,0,0,0.8) }
.ph .viewBase i { margin-right: 2px; }

.line1 { height:40px; background: url(../images/line1.jpg) top center no-repeat; }
.line2 { height:40px; background: url(../images/line2.jpg) top center no-repeat; }



.fixMenu { position: fixed; bottom: 60%; left: 10px; padding:20px 10px; border-radius: 20px; background: rgba(0,0,0,0.8);text-align: center; }
.fixMenu ul {}
.fixMenu ul li { padding:5px 0; font: bold 20px/1em "微軟正黑體"; color: #fff;/* border-bottom: 1px dotted#dadada;*/
 transition: .5s; cursor: pointer; }
.fixMenu ul li:hover { color: #fff200; }

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

}


@media only screen and (max-width: 1200px) {
.fixMenu {   }
.fixMenu ul {}
.fixMenu ul li { padding:5px 0; font: bold 18px/1em "微軟正黑體";  }

}

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

header.header { height: auto; background: none; }
.table {display: block; width: 100%; margin:0;} 
.m {display: none;} 

.timeBase { top:81.5%; }
.timeBase,
.timeBase span { font: bold 2rem/1em "微軟正黑體"; color: #fff;  }





}


@media only screen and (max-width: 1200px) {
h2::after{;left: calc(100% /2.7 );}
}




@media only screen and (max-width: 1050px) {
.timeBase,
.timeBase span { font: bold 1.8rem/1em "微軟正黑體"; color: #fff;  }


.fixMenu { margin:0; padding:0; bottom: 0; width: 100%; border-radius: 0; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; left:0;}
.fixMenu ul { position:relative; width: 100%; z-index: 10; padding: 0 30px; white-space:nowrap; width:auto; border-radius: 0; }
.fixMenu ul li { display: inline-block; margin:0;padding:10px 20px;font: 20px/20px "arial","微軟正黑體";
 color:#fff; cursor: pointer; background: #000;  }

.fixMenu ul::before,
.fixMenu ul::after { content:""; display: inline-block; position: fixed;bottom:7px; width: 15px; height: 27px; background: url(../images/arrow.png) top center } 
.fixMenu ul::before {left: 0px;  } 
.fixMenu ul::after {right: 0px; transform: scaleX(-1);  } 



}

@media only screen and (max-width: 1010px) {
.timeBase,
.timeBase span { font: bold 1.6rem/1em "微軟正黑體"; color: #fff;  }
}

@media only screen and (max-width: 880px) {
.timeBase,
.timeBase span { font: bold 1.4rem/1em "微軟正黑體"; color: #fff;  }
}


@media only screen and (max-width: 900px) {
h2::after{;left: calc(100% / 3 );}
}




@media only screen and (max-width: 800px) {
 .group-type-ph { margin:0 auto; width: 95%; }
 .group-type-ph .ph { width: 98%; }
 .group-type-ph .addPhBox2 > div { display: inline-block; width: 50%; letter-spacing: normal; }


h2::after{;left: calc(100% / 3.1 );}


}

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

header.header { height: auto; background: none; }
.table {display:none;} 
.m {display: block; width: 100%;} 

.timeBase { position: static;  padding:2% 0; width: 100%; text-align: center; background: #000; }


}


@media only screen and (max-width: 700px) {
h2::after{;left: calc(100% / 3.5 );}

}


@media only screen and (max-width: 510px) {
 h2 span{display: block; padding-top: 5px;font:31px/1 "微軟正黑體";}
	}



@media only screen and (max-width: 500px) {
.timeBase,
.timeBase span { font: bold 20px/1em "微軟正黑體"; color: #fff;  }
.timeBase span.typeYellow ,
.timeBase span.typeYellow span { color: #fff200; }

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

 h2::after{;left: calc(100% / 5 );}


}

@media only screen and (max-width: 440px) {
 h2::after{;left: calc(100% / 5.5 );}

}


@media only screen and (max-width: 400px) {
 h2::after{;left: calc(100% / 6 );}
h2{margin-bottom: 10px;}

}
@media only screen and (max-width: 380px) {
 h2::after{;left: calc(100% /9  );}

}