body { font-size: 15px; color: #333; line-height: 1.8em; font-family: Arial, Helvetica, Microsoft JhengHei, sans-serif; }
.header, .footer { width: 950px; margin: auto; }
header, footer { display: none; }
main { width: 920px; margin: auto; border: 1px solid #eee; margin-bottom: 20px; padding: 15px; position: relative; }
h3 { background: #fee6f1; color: #ee51a6; font-size: 30px; font-weight: bold; text-align: center; padding: 20px 10px; margin-bottom: 15px; letter-spacing: 0.4em; }
p { margin: 15px 0; }
h4 { background: #e3e3e3; color: #000; font-size: 18px; padding-left: 15px; line-height: 30px; letter-spacing: 0.2em; }
.prod_type_block { margin: 15px 0; border: 1px solid #eee; padding: 10px; margin-bottom: 10px; }
.pack { border-color: #ee51a6; }
.pack h4 { background: #fee6f1; color: #ee51a6; }
.pack p { margin: 0; }
.pack ul { margin: 10px 0; }
.pack ul li { width: 25%; float: left; text-align: center; color: cornflowerblue; }
.pack ul li img { width: 90%; }
.pack ul li.NG { color: red; }
.pack ul:after { content: ''; display: table; clear: both; }
.pro_type_menu { height: 100px; }
.pro_type_menu ul { display: table; table-layout: fixed; width: 100%; }
.pro_type_menu ul li { display: table-cell; width: 9%; text-align: center; padding: 3px; }
.pro_type_menu a { background-color: lavender; display: block; height: 100px; text-decoration: none; padding-top: 5px; cursor: pointer; }
.pro_type_menu i { font-style: normal; line-height: 20px; color: slateblue; font-weight: bold; padding-top: 5px; }
.pro_type_menu img { width: 80%; }
.pro_type_menu ul.fixed { position: fixed; width: 920px; background: #fff; top: 0px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
.pro_type_menu .menu_pack a{ background: #fee6f1;}
.pro_type_menu .menu_pack i{ color: #ee51a6;}
.gotop { position: fixed; bottom: 150px; }
.gotop a { display: inline-block; background: url(//www.payeasy.com.tw/pezlib/images/icon_top.png) no-repeat; width: 40px; height: 40px; position: absolute; left: 950px; z-index: 500; cursor: pointer; }

@media (max-width:736px) {
	*{box-sizing: border-box;}
.header, .footer { display: none; }
header, footer { display: block; }
	main{width:100%;padding:8px; box-sizing: border-box; margin-bottom: auto;}
	.pro_type_menu{ height:180px; font-size: 14px;}
	.pro_type_menu ul{ display: block;}
	.pro_type_menu ul li{ display:inline-block; float:left; width: 16.6%; padding: 2px;}
	.pro_type_menu:after{ content: ''; display: table; clear: both; }
	.pro_type_menu ul.fixed { width:100%; left: 0; padding: 8px;}
	.pro_type_menu a{ height:80px;}
	.pro_type_menu img { width: 55%; }
	.pro_type_menu i{display:block;}
	.pack ul li{ width:50%; height: 270px; font-size: 14px; line-height: 20px;}
	.gotop a{ left: calc( 100vw - 55px); opacity: 0.8;}
}