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

body {
font:400 1.2rem/2rem Noto Sans TC , sans-serif ;
margin: 0;
box-sizing: border-box;
color: #1f1f1f;
}

h1,h2,h3 {font:400 1.6rem/2rem Noto Sans TC , sans-serif ;color:#555;}
h1 {text-align: center;}
.item>h1, h2 {
    margin-bottom: 20px;
    border-bottom: 3px solid #f39;
    padding: 16px 20px 16px 20px;
    line-height: 28px;
    background: #eee;
    font-size: ;
    color: #f39;
}
.item>h1 {background:#f39;color:#fff;border-color:#ccc;}


a {text-decoration:none;color:#069;}
a:hover{text-decoration:;color:;}

img {max-width:100%;}

.item {
margin: 0 auto;max-width: 70rem;
overflow:hidden;
}

article {border:1px solid #ccc;margin:0 auto 2%;padding:0 2%;overflow:hidden;}

/* goods */
.goods {overflow:hidden;margin-bottom:.8rem;}
.goods ul, .banner ul {margin:0;padding:0;list-style:none;text-align:center;background:#FFF;overflow:hidden;}
.goods li {float:left;width:23.875%;border:1px solid #ccc;margin:0 1.5% 1.5% 0;padding:;box-sizing: border-box;}
.goods li:nth-child(4n) {margin-right:0;}
.goods p {line-height:;margin:0;padding:0 3%;
position:relative;
margin:0;
height:3em;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods .price {padding:;margin:3% 0;color:#c00;display: inline-block;}
.goods .price::before  {content: '$ ';}

.banner {overflow:hidden;margin-bottom:0;}

.button {margin:0 auto 2%;width:;overflow : hidden;box-sizing: border-box;text-align: center;}

.btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 0 2%;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 5px;
}

.btn-info {
    color: #fff;
    background-color: #f39;
    text-align: center;
}

.photo-center {text-align: center;}

#goods-header {overflow:hidden;border-bottom:1px #ccc solid;padding:20px 0;}

.goods-info {line-height:2rem;padding:0;}
.goods-info h1 {text-align:left;margin:0;}
#goods-header .price {padding:;margin:3% 0;color:#c00;display: inline-block;}
#goods-header .price::before  {content: '$ ';}

@media (min-width: 75em) {
.item {}

#goods-header .big-img {float:left;width:49%;line-height:;margin:0 2% 0 0;}
.goods-info {float:right;width:49%;}

.banner li {float:left;width:49%;padding:0;margin-bottom:1.5%;}
.banner li:nth-child(2n) {float:right;}

}

@media (max-width: 64em) {
.item {margin:0 1rem;}

.goods li {width:49%;margin:0 2% 2% 0;}
.goods li:nth-child(2n) {margin-right:0;}
#goods-header {}
#goods-header h1 {display: inline-block;text-align:center;}

.goods-info  {text-align:center;}
.goods-info li  {text-align:left;}

.banner li {margin-bottom:1%;}

article {border:none;}
}

footer {width:100%;margin:0 auto;padding:20px 0;text-align: center;overflow:hidden;font-size:1rem;background:#111;color:#f2f2f2;}
footer p {padding:0 5%;}
footer ul {list-style:none;text-align: center;padding:0;}
footer li {display: inline-block;margin:10px;padding:0;}

#to-top {position:fixed;right:10px;bottom:50px;z-index:99;filter: alpha(opacity=100);opacity: 1.0;}
#to-top:hover{filter: alpha(opacity=70);opacity: 0.7;}