body { background: url(../images/background_repeat_1.jpg)  top center ; }
ul,li { text-decoration: none;list-style: none; }
a:hover { text-decoration: none; }

#mtkContainer { width: 100%; height: auto; background: url(../images/header_pc.jpg) #63e0f8 top center no-repeat; }
#mtkContainer * { vertical-align: top; }
header.header { padding: 0; margin: 0; width: 100%; height: 559px;  }
h1 img { display: none; }

nav.mainPage ul { padding-bottom:49px; text-align: center; }
nav.mainPage ul li { display: inline-block; position: relative; margin: 0 20px; width: 214px; z-index: 1}
nav.mainPage ul li img { position: relative; z-index: 1; width: 100%;transition: .5s }
nav.mainPage ul li a:hover img { transform: translateY(10px); }
nav.mainPage ul li p { font: 20px/1.4em "arial","微軟正黑體"; color: #000; }

.secButton { display: none ; position: absolute; top:55%; left: 0; margin: 0 15%; padding-top: 35%;  width: 70%; background: rgba(0,0,0,0.8) }
.secButton a { display: block; font: 16px/1.8em "arial","微軟正黑體"; color: #fff; transition: .5s }
.secButton a:hover { color: #fff200 }


.contentBase { background: url(../images/repeatBg1.jpg) top center repeat-y; }
.contentArea {}
.intro-anchors { display: none; }


.contentArea { margin: 0 auto; width: 90%; padding:0px 0; max-width: 1000px; /*border: 5px solid #000; border-radius: 30px ; background: #fff;*/}
.contentArea.oneItem { max-width: 1000px; }
.contentArea h4 {  font: 500 34px/1.8em "微軟正黑體";color: #903cf7; text-align: center;  }

.contentArea .c23Box2 > div { display: inline-block; letter-spacing: normal; }
.contentArea .c23Box2 .c26 { width: 300px; }
.contentArea .c23Box2 .information { width: 700px; }
.contentArea .c23Box2 .information img { width: 100%; }


.group-type-ph { text-align: center; }
.group-type-ph .ph { display: block; position: relative; margin:0 0 30px 0;  width: 100%; height: auto; background: #fff; vertical-align: top; 
	box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: .5s }
.group-type-ph .ph:hover { transform: translateY(-10px);box-shadow: 0 25px 20px rgba(0,0,0,0.1);  }	
.group-type-ph .ph-img { display:inline-block;width: 300px; overflow: hidden; }
.group-type-ph .ph img {  width: 100%;  transition: .5s }
.group-type-ph .ph-title { display:inline-block; float:right;width: calc(100% - 300px); height: 80px; vertical-align: top; padding: 0 5px;
 font: 500 26px/1.6em "微軟正黑體";color: #fff; letter-spacing: -1px; text-align: left; background: #303030; }
.group-type-ph .ph-detail {display:block; position: absolute; top:80px; left: 300px; float:right; width: calc(100% - 300px);
 vertical-align: top;padding: 0 5px; font: 500 20px/1.4em "微軟正黑體";color: #303030; letter-spacing: 0px; text-align:left; }
.group-type-ph .ph-feature { padding: 0 5px; font: 300 24px/1.4em "微軟正黑體";color: #303030; letter-spacing: 0px;text-align:left; }

.group-type-ph .price { display: block; position: absolute; bottom: 0; right: 20px; padding: 10px 0; font: 300 14px/14px "微軟正黑體";color: #f05961; text-align: center;}
.group-type-ph .price span { font-size: 26px; }
.group-type-ph .ph a:hover { text-decoration: none; }
.group-type-ph .ph:hover img { transform: scale(1.1); }


.c26Area > div { display: inline-block; letter-spacing: normal; }
.c26Area .photo { width: 300px; }
.c26Area .text { width:calc(100% - 300px); }

@media only screen and (max-width: 885px) {
	nav.mainPage ul li  { margin:0; width: 30%;}
}


@media only screen and (max-width: 768px) {
#mtkContainer { width: 100%; height: auto; background: #fede17 }	

header.header { height: auto; }
h1 img { display: block; width: 100%; }

nav.mainPage ul { padding:5% 0; text-align: center; }


.group-type-ph .ph { display: inline-block; width: 300px; }
.group-type-ph .ph-title { display:block; float:none;width:100%; height:auto; vertical-align: top; padding: 2% 5px;
    font: 500 2.8vw/4vw "微軟正黑體"; letter-spacing: 1px; }
.group-type-ph .ph-detail {display:block; position: static; top:0px; left: 0px; padding: 5% 5px; float:none; font: 300 2.4vw/4vw "微軟正黑體"; width: 100% ; }
.group-type-ph .ph-feature { padding: 0 5px; font: 300 2vw/3vw "微軟正黑體";color: #303030; letter-spacing: 0px;text-align:left; }
.group-type-ph .price { position: static; }
}