@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');	
*{font-family:Microsoft JhengHei,serif,sans-serif,cursive,fantasy,monospace;}
a{ text-decoration:none}
body{ background-image: url(../images/header.jpg); background-repeat:repeat-x; background-position:center top}
#web{ width:1200px; margin:0px auto; padding:100px 0px 80px 0px }
h1{ font-size:3em; color:#ff8400; text-align:center; line-height:1.2em}
ul{ margin:30px 0px; list-style:none; width:100%; text-align:center}
ul li{ display: inline-block; vertical-align:top; margin:0px 10px}
ul#page01 li h4{ display:block; text-indent:-99999px; width:274px; height:300px;}
ul#page01 li h4.pg01pic01{ background-image:url(../images/page01_pic01.gif)}
ul#page01 li h4.pg01pic02{ background-image:url(../images/page01_pic02.gif)}
ul#page01 li h4.pg01pic03{ background-image:url(../images/page01_pic03.gif)}

ul#page02 li h4{ display:block; text-indent:-99999px; width:275px; height:300px;}
ul#page02 li h4.pg01pic01{ background-image:url(../images/page02_pic01.gif)}
ul#page02 li h4.pg01pic02{ background-image:url(../images/page02_pic02.gif)}
ul#page02 li h4.pg01pic03{ background-image:url(../images/page02_pic03.gif)}
ul#page02 li h4.pg01pic04{ background-image:url(../images/page02_pic04.gif)}

ul li p{ display:block; text-align:left; padding:8px 5px 0px 55px; font-size:1em; width:214px; line-height:1.5em}
ul li p a{ color:#FF3333; text-decoration:underline; clear:both}
#web .shoppingcart{  display:block; margin:10px auto;width:303px; height:69px;}
#web .shoppingcart span{ display:block; background-image:url(../images/button01.gif); width:303px; height:43px;  text-indent:-999999px; position:relative;}
#footer{background-color:#000000; background-image:url(../images/footer.jpg); color: #000000; font-weight:bolder; text-align:center; font-size:1em; line-height:50px; letter-spacing:0.3em; padding:0px; height:50px; position: fixed; margin:0px; width:100%;background-position:center top; bottom:0px}

@media screen and ( max-width:736px ){

#web{width:100%; margin:0px auto; padding:90px 0px 5em 0px }
h1{ font-size:2em; color:#ff8400; text-align:center}
ul{ margin:0px auto; list-style:none; width:95%; text-align:center}
ul li{ display: block; vertical-align:top; margin:0em; padding:3em 0em 0em 0em; width:100%; clear:both}
ul#page01 li h4{ display:block; text-indent:-99999px; width:50%; height:0px; padding-bottom:54.744525547%; background-size:cover; float:left;}
ul#page02 li h4{ display:block; text-indent:-99999px; width:50%; height:0px; padding-bottom:54.545454545%; background-size:cover; float:left;}
ul li p{ display: block; text-align:left; padding: 0px; margin-top:1em; font-size:1em; width:45%; margin-left:55%; line-height:1.5em;}
#web .shoppingcart{ background-color:#ff8400; position:fixed; bottom:0px; display:block; width:100%;height: auto;}
#web .shoppingcart span{ display:block; background-image: none; width: auto;height: auto;  font-size:1.8em; line-height:1.8em; text-indent:0px; text-align:center; color:#fff; font-weight:bolder}
#footer{ display:none}
}