.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 */
    
}

a{text-decoration:none; }
#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

#mtkContainer { background:url(../images/header-bg-pc.jpg) #4cd4b9 top center no-repeat; }

.widthType1 { margin:0 auto; width: 90%; max-width: 1400px; }
.widthType2 { margin:0 auto; width: 100%; max-width: 1400px; }

.bg-white { background:url(../images/bg-white.jpg) #fff center bottom no-repeat; }


header { /*position: relative;*/ }
header .maclogo { position: absolute; right: 0; top: 60px; }
header h1 { padding: 97px 0 0 167px; }
h1 img.m{ display: none; }
.mainButtonBase { margin: 225px auto 82px auto; }
.mainButtonBase ul  { text-align: center; }
.mainButtonBase ul li {  display: inline-block; margin: 0 10px; letter-spacing: normal; border-radius: 99em; box-shadow: 0 5px 5px rgba(0,0,0,0.2); background: url(../images/bg-button-1.jpg) #fe0e7e top center repeat-x; transition: .5s; }
.mainButtonBase ul li a { display: block; padding: 8px 25px; font:24px/1 "arial","微軟正黑體" ; color: #fff;  }
.mainButtonBase ul li:hover { transform: translateY(5px);box-shadow: 0 2px 2px rgba(0,0,0,0.2); }


.fbBase { height: 324px; text-align: center; background:url(../images/bg-fbarea-1.png) top center no-repeat; }
.fbBase h2 { display: inline-block; padding-top: 65px; font:bold 46px/1 "arial","微軟正黑體"; color: #fff; }
.fbBase  .fbButton {  }
.fbBase  .fbButton a { display: inline-block; margin-top:20px; padding: 13px; font:bold 37px/1 "arial","微軟正黑體"; color: #fff; background:#2055b6; border-radius: 99em;box-shadow: 0 5px 5px rgba(0,0,0,0.2); transition: .5s; }
.fbBase  .fbButton a img{ vertical-align: middle; }
.fbBase  .fbButton a span { padding-right: 20px; line-height: 1.55em; }
.fbBase  .fbButton a b { color: #fff200; }
.fbBase  .fbButton a:hover { transform: translateY(5px);box-shadow: 0 2px 2px rgba(0,0,0,0.2);  }


.blogerBase { margin-top: 150px; padding-bottom: 80px; text-align: center; background:url(../images/bg-bloger.jpg) top center no-repeat; }
.manBox { display: inline-block; width: 50%; max-width: 325px; letter-spacing: normal; }
.manBox .photo { border-radius: 99em; overflow: hidden; }
.manBox .photo img { width: 100%; }
.manBox .name { padding: 20px 0; font: 20px/1 "arial","微軟正黑體"; color: #000; background:#fff; transform: translateY(-20px); }
.manBox .name strong { display: block; margin-top: 10px; font: bold 50px/1 "arial","微軟正黑體"; color: #1c846f; }
.manBox:first-child { margin-right: 170px; }
.blogerBase .information { margin: 0 auto; max-width: 810px; font: 18px/1.6 "arial","微軟正黑體"; color: #000; text-align: left; letter-spacing: normal; padding-bottom: 3%;}
.blogerBase iframe{width: 100%; max-width: 750px;}

.title { padding: 85px 0 0 0;  text-align: center; }
.title .tip { display: inline-block; font: bold 34px/40px "arial"; color: #4cd4b9; }
.title .tip span { position: relative; display: inline-block; width: 40px; height: 40px;  color: #fff; border-radius: 99em; background: #4cd4b9;}
.title h2 { position: relative; margin-top: 10px; font: bold 50px/1 "arial","微軟正黑體"; color: #4cd4b9; }
.title h2 small{display:block; line-height:1.2;}
.title .tip span::after { content: ""; position: absolute; top:0; right: -42px; width: 42px; height: 35px; background:url(../images/title-h2-dec-1.png) top center no-repeat; }


.cnotent2Box { margin-top: 28px; padding-bottom: 70px;}
.cnotent2Box .photo { position: relative; display: inline-block; width: 60%; float: left; cursor: pointer; overflow: hidden; }
.cnotent2Box .photo::after { position: absolute; content: ""; bottom:0; left: 0px; width: 65px; height: 100px; background: url(../images/cover-2.png) top center no-repeat   }
.cnotent2Box .photo img { width: 100%; transition: .5s; }
.cnotent2Box .photo:hover img { transform: scale(1.1); }
.cnotent2Box .text { display: inline-block; padding: 25px 0 0 25px; width: 40%; float: right;  }
.cnotent2Box .text2 {width: 100%;  }
.cnotent2Box .TextAlignCenter {text-align: center; }
.cnotent2Box .text h3 { font: bold 28px/1.3 "arial","微軟正黑體"; color: #4cd4b9; letter-spacing: normal;  }
.cnotent2Box .text p { font: 18px/1.8 "arial","微軟正黑體"; color: #000; letter-spacing: normal; }

.cnotent2Box .text .button { text-align: right; }
.cnotent2Box .text2 .button { text-align: center; }
.cnotent2Box .text .button a  { display: inline-block; padding: 5px 20px; font: 18px/1.8 "arial","微軟正黑體"; color: #fff; letter-spacing: normal;  border-radius: 99em; box-shadow: 0 5px 5px rgba(0,0,0,0.2); background: url(../images/bg-button-1.jpg) #fe0e7e top center repeat-x; transition: .5s; }
.cnotent2Box .text .button a:hover { transform: translateY(5px);box-shadow: 0 2px 2px rgba(0,0,0,0.2);  }

.cnotent2Box .box .button { text-align: center; }
.cnotent2Box .box .button a  { display: inline-block; padding: 5px 40px; font: 18px/1.8 "arial","微軟正黑體"; color: #fff; letter-spacing: normal;  border-radius: 99em; box-shadow: 0 5px 5px rgba(0,0,0,0.2); background: url(../images/bg-button-1.jpg) #fe0e7e top center repeat-x; transition: .5s; }
.cnotent2Box .box .button a:hover { transform: translateY(5px);box-shadow: 0 2px 2px rgba(0,0,0,0.2);  }
.cnotent2Box .box .button .full{ display: inline-block; padding: 5px 40px; font: bold 20px/1.8 "arial","微軟正黑體"; color: #fff; letter-spacing: normal;  border-radius: 99em; background: url(../images/bg-button-1.jpg) #fe0e7e top center repeat-x;  }


.cnotent2Box .text ul{font: 18px/1.8 "arial","微軟正黑體"; color: #000; letter-spacing: normal;}

hr{margin: 5px 0; }

.cnotent2Box .box{display: block; border:2px solid #4cd4b9; max-width: 1000px; margin: 0 auto; text-align: center; letter-spacing: normal; font: 18px/1.3 "arial","微軟正黑體";}
.cnotent2Box .box h5{ background-color: #4cd4b9; color: white; font: bold 28px/1.3 "arial","微軟正黑體"; padding: 10px 0; letter-spacing: normal; }
.cnotent2Box .box p{ font: 18px/1.3 "arial","微軟正黑體"; color: #000; letter-spacing: normal; padding: 20px;}
.cnotent2Box .box p b{ font: bold 24px/1.3 "arial","微軟正黑體"; color: #000; letter-spacing: normal;  }
.cnotent2Box .box p em{ font: bold 18px/1.3 "arial","微軟正黑體";  color:#27a78e; text-decoration: underline;}
.cnotent2Box .box ul{width: 92%; max-width: 500px; margin: 0 auto;}
.cnotent2Box .box li{display: inline-block; width: 49%; margin: 10px 0;}
.cnotent2Box .box li.con{border-left: solid 1px;}

.cnotent2Box .explanation{text-align: left; max-width: 1020px;
    margin: 0 auto;}
.cnotent2Box .explanation li{font: 15px/1.3 "arial","微軟正黑體"; padding: 5px 0; }

.cnotent3Box { padding-bottom: 0px;}




.text-white .title h2,
.text-white .title .tip { color: #fff;  }
.text-white .title .tip span { color: #4cd4b9; background:#fff; }
.text-white .cnotent2Box .photo { float: right; }
.text-white .cnotent2Box .text { padding: 25px 25px 0 0;   float: left;  }
.text-white .cnotent2Box .text h3 { color: #fff;  }

.bg-white .cnotent2Box .photo::after { background: url(../images/cover-1.png) top center no-repeat   } 


.c26Base { padding-bottom: 75px; }

.group-type-ph { margin-top: 25px; text-align: center; }
.ph { display: inline-block  ; margin: 0 20px 20px 20px; width: 30%; max-width: 300px; background: #fff;}
.ph a .ph-title { padding: 5px; font:18px/1.4 "arial","微軟正黑體"; text-align: left; color: #30a48d;}
.ph img { width: 100%; }
.ph a .ph-detail,
.ph a .ph-feature { padding: 0 5px 5px 5px; font:14px/1.4 "arial","微軟正黑體"; text-align: left; color: #000;}
.ph a .price  { padding: 0 5px 5px 5px; font:24px/1.4 "arial","微軟正黑體"; text-align: left; color: #ff5187;}
.ph a .price i { display: inline-block; text-decoration: none; font-size: 14px; /*transform: translateY(10px);*/ font-style: normal;}



.btnLinkBase { text-align: center; padding-bottom: 75px;
 }

.btnLink {display: inline-block;margin: 0 0.5%;background: #4cd4b9; border-radius: 99em; text-align: center;padding: 0.15%;transition: all .3s;-webkit-transition: all .3s;}



@media only screen and (max-width: 1366px) {
header h1 {padding: 97px 0 0 5%;}
}


@media only screen and (max-width: 800px) {
#mtkContainer {background-position-x: 10%;  }
header h1 {padding: 10% 0 0 0; text-align: center;}
.manBox:first-child {margin-right: 0px;}
.manBox { display: inline-block; margin:  0 5%; width: 40%; max-width: 40%; letter-spacing: normal; }
.cnotent2Box .photo { display: block; margin: 0 auto; width: 100%;  }
.cnotent2Box .text { display: block; margin: 5% auto 0 auto; padding: 0; width: 100%;  }

.ph {  margin: 0 1% 20px 1%; width: 30%; max-width: 300px; }

.title h2{font-size: 36px;}

}


@media only screen and (max-width: 600px) {
#mtkContainer { background: #4cd4b9  }
header .maclogo { display: none; }
header h1 {padding: 0; }

h1 img.pc{ display: none; }
h1 img.m{ display: block; width: 100%; height: auto; }

.mainButtonBase { position: fixed; left: 0; bottom: 0; margin: 0; z-index: 10; }
.mainButtonBase ul {
	overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.mainButtonBase ul li {  display: inline-block; margin: 0; width: 25%;  border-radius: 0em; }
.mainButtonBase ul li a { display: block; padding: 8px; font:18px/1 "arial","微軟正黑體" ; color: #fff;  }
.mainButtonBase ul li:hover { transform: translateY(5px);box-shadow: 0 2px 2px rgba(0,0,0,0.2); }


.fbBase { height: auto; }
.fbBase h2 { padding-top: 0; font: bold 30px/1 "arial","微軟正黑體"; }
.fbBase .fbButton a { font: bold 24px/1 "arial","微軟正黑體"; }
.fbBase .fbButton a img { width: 40px; }

.manBox,
.manBox:first-child { display: block; margin:  0 auto; width: 80%; max-width: 100%; letter-spacing: normal; }

.cnotent2Box .text .button { text-align: center; }

.cnotent2Box .photo,
.cnotent2Box .text ,
.text-white .cnotent2Box .photo,
.text-white .cnotent2Box .text { float:none; }

.cnotent2Box .text,
.text-white .cnotent2Box .text { padding: 5% 0; }
.cnotent2Box .text p,
.text-white .cnotent2Box .text p { padding-bottom: 5%; }

.cnotent3Box .text,
.text-white .cnotent3Box .text { padding: 0; }


.blogerBase{margin-top: 50px;}


.ph {  margin: 0 1% 20px 1%; width: 100%; max-width: 300px; }


h2.fl { margin-bottom:20px; font-size: 30px; }
.btnLink { width: 12%; }
.btnLink img { width: 100%; }

}