body { background:#e5e5e5;overflow-x: hidden; }
#mtkContainer { position: relative; padding-bottom: 20px; width: 100%;background: url(../images/headerBg.jpg) top center no-repeat;  }
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

header.header { height: 550px; }
header.header h1 img { display: none; }
.contentBase { margin: 0 auto; width: 95%; max-width: 1440px; }

.note { padding-bottom: 20px; background: #fff; }
.note h2 { padding: 10px 0; font:28px/1em "微軟正黑體"; color: #fff; text-align: center; letter-spacing: 2px; background: #4f4f4f; }
.note p { padding: 10px; font:18px/1.8em "微軟正黑體"; color: #4f4f4f; text-align: left; letter-spacing: 2px;  }
.note .hide { padding: 10px; font:18px/1.8em "微軟正黑體"; color: #4f4f4f; text-align: left; letter-spacing: 2px;  display: none; }

.box3 { margin-top: 20px; }
.box3 .aBox { display: inline-block; width: 32% ; letter-spacing: normal; background: #fff;}
.box3 .aBox:nth-child(2) { margin: 0 2%;  }

.box3 h2 {padding: 10px 0;  font:28px/1em "微軟正黑體"; color: #fff; text-align: center; letter-spacing: 2px; }


.intro-anchors,
.box-head ,
.carrier h4 { display: none; }
.carrier h4 {font:20px/1.8em "微軟正黑體"; color: #4f4f4f; text-align: center;   }
.carrier ul,
.carrier ul li { list-style: none; }
.carrier ul li {position: relative; margin: 10px 10px 20px 10px; padding-bottom: 20px; transition: .5s;
 border-bottom: 1px solid #dedede;  }
 .carrier ul li:hover { background: #e5e5e5; }
.carrier ul li a { font:16px/1.6em "微軟正黑體"; color: #4f4f4f;  }
.carrier ul li a strong { display: block; font-size: 18px; }
.carrier ul li .price { position: absolute; bottom: 0px; right: 0; font:16px/1.6em "微軟正黑體"; color: #ee1e1e; }
.carrier ul li .price span { font:16px/1em "微軟正黑體"; color:#ee1e1e; font-size: 20px; }


.note .app {padding: 5px 10px; border-radius: 50px;background:#9537e4;color:#FFF;white-space:nowrap; }

.showButton { margin: 0 auto; padding: 5px 10px; width: 90%; max-width: 250px; font:24px/1em "微軟正黑體" ;color: #f85754;
text-align: center; border-radius: 99em; background: #fccf26; cursor: pointer; transition: .5s; }
.showButton:hover { transform: translateY(-5px); }

.box3 .aBox:first-child h2 {background:#9537e4; }
.box3 .aBox:first-child .carrier ul li a strong{color:#9537e4;}
.box3 .aBox:nth-child(2) h2 {background:#e437b9; }
.box3 .aBox:nth-child(2) .carrier ul li a strong{color:#e437b9;}
.box3 .aBox:last-child h2 {background:#e4a337; }
.box3 .aBox:last-child .carrier ul li a strong{color:#e4a337;}



/*
.aBox:nth-child(3) .carrier ul li {  padding-bottom: 20px; }
.aBox:nth-child(3) li a strong { display: block; margin-bottom: 0px; font-size: 26px; }
*/
/*.aBox:nth-child(3) li .price { transform: translateY(-10px); }*/
/*
.aBox:nth-child(1) .carrier .box-head { display: none; }
.aBox:nth-child(1) h4  { font-weight: bold; color:#9537e4}

.aBox:nth-child(2) .carrier .box-head { display: none; }
.aBox:nth-child(2) .carrier h4 { display: none; }
.aBox:nth-child(2) .carrier strong { text-align: center; }

.aBox:nth-child(3) .carrier h4 { display: none; }
.aBox:nth-child(3) .carrier strong { text-align: center; }

*/




@media only screen and (max-width: 1400px) {
#mtkContainer {background: none;  }	
header.header { height: auto; }
header.header h1 img { display: block;  width: 100%;}

}


@media only screen and (max-width: 768px) {

.note h2 { font-size: 20px; }

.box3 .aBox { display: block; width: 100% ; letter-spacing: normal; background: #fff;}
.box3 .aBox:nth-child(2) { margin: 0;  }

}











