/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); cwTeXYen*/
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);

/*以下為共用*/
.setop { display: none }
/*.footer * { vertical-align: baseline; }*/

.pageContainer { width: 100%; overflow: hidden; }

nav.mainButton { position: sticky; position: -webkit-sticky; top:0; width: 100%; background:#000 ; z-index: 10}
nav.mainButton ul { text-align: center; }
nav.mainButton ul li { display: inline-block; margin: 10px 0; padding: 0px 20px; font: 100 16px/16px "cwTeXYen"; color: #fff ; cursor: pointer; border-right: 1px solid #fff;
transition: .5s; -webkit-transition: .5s; }
nav.mainButton ul li:hover,
nav.mainButton ul li:hover a{ color: #fff200 }
nav.mainButton ul li img { vertical-align: top }
nav.mainButton ul li a,
nav.mainButton ul li a:link { font: 100 16px/16px "cwTeXYen"; color: #fff; }


.width1440px { margin: 0 auto; width: 90%;max-width: 1440px; }
.width50 { margin: 0 auto; width: 100%;}
.width1200px { margin: 0 auto; width: 90%;max-width: 1200px; }

.box2 > div {display: inline-block; position: relative; margin: 0; width: 50%; height: auto; letter-spacing: normal; overflow: hidden; }
.box3 > div {display: inline-block; position: relative; margin: 0.5%; width: 32%; height: auto; letter-spacing: normal; overflow: hidden; }
.box4 > div {display: inline-block; position: relative; padding: 1%; width: 25%; height: auto; letter-spacing: normal; }
.box5 > div {display: inline-block; position: relative; padding: 1%; width: 20%; height: auto; letter-spacing: normal; }

.box3 img,
.box4 img,
.box5 img { width: 100% }

.height100 { min-height: 100vh }
.bgWhite { background: #fff }

.hoverHide .thisHide,
.hoverHide.thisHide {-webkit-transition: .5s; transition: .5s; }

.hoverHide:hover .thisHide,
.hoverHide:hover.thisHide { opacity: 0; }



.buyButtonBase { position: fixed; top:40%; right: 0; width: 140px; text-align: center; /*background: #d80056*/; transition: .5s;-webkit-transition: .5s; z-index: 99; }
.buyButtonBase a,
.buyButtonBase a:link { width: 100%; font: 100 20px/1.4em "cwTeXYen"; color: #fff; text-align: center; letter-spacing: -1px; vertical-align: baseline; }


.buyButtonBase:hover { background:#0000d8 }

h1 { text-align: center; }
h2 { display: inline-block; margin-bottom: 30px; padding: 3px 20px 3px 20px; font: 500 26px/26px "cwTeXYen"; color: #256adc; text-align: center; border:1px solid #256adc;}
p { margin-top:30px; font: 500 20px/1.8em "cwTeXYen"; color: #000; text-align: left;}

.text { padding: 10%; text-align: center; border:1px solid #ddd; background: rgba(255,255,255,1) }
.text img { width: 100% }

/*
.contentBase.paddingTop { padding-top: 100px; }
.contentBase.paddingBottom { padding-bottom: 100px; }
*/


/*C26 use*/
.group-type-ph{ display: none;}

.ph { display: block; position: relative; margin: 30% auto 0 auto; width: 300px; height: auto; vertical-align: top;  letter-spacing: normal; /*background: #fff*/;}
.ph .ph-img {  margin: 0 0px 0 0 ; overflow: hidden; }
.ph .ph-img img {  height: auto; width:100%; min-width: 300px; height: auto; min-height: 200px; display:block;margin:0 auto; }
.ph .ph-title {padding:10px 10px 0 10px; font: bold 18px/24px "arial","微軟正黑體"; color: #2a2a2a; vertical-align: middle; background: rgba(255,255,255,0.8);}
.ph .ph-detail,
.ph .ph-feature { margin:0;padding:10px;font: 14px/20px "arial","微軟正黑體"; color: #2a2a2a; text-align: left; vertical-align: middle; background: rgba(255,255,255,0.8);}
.ph .price { display: block; width: 100%; margin: 0; padding-bottom: 15px; font: bold 18px/26px "arial","微軟正黑體"; text-align: center; color:#ff9900; background: rgba(255,255,255,0.8);}
.ph .price span {margin: 0; padding: 0; font: bold 26px/26px "arial","微軟正黑體";color:#ff9900; }





@media only screen and (max-width: 768px) {
nav.mainButton { position: sticky; position: -webkit-sticky; top:0; z-index: 10; width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
nav.mainButton ul {position:relative; z-index: 10; padding: 0 0px; white-space:nowrap; width:auto; }	
.buyButtonBase { position: fixed; top: calc(100vh - 60px) ; right: 0; width: 100%; height: 60px} 
}

@media only screen and (max-width: 500px) {
.box2 > div {display: block; position: relative; margin: 0 auto; width: 90%; height: auto; }
.text { margin: 5% 0;  background: rgba(255,255,255,0.8) }
}