@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: #f5f5f5;
background:#111 url('../images/bg1.gif');
}

a {text-decoration: none;color:#e33;}

img {max-width:100%;}

h1,h2,h3 {font:500 1.6rem/2rem Noto Sans TC , sans-serif ;color:;}

h2 {
display: flex;
align-items: center;
text-align: center;
}
h2:before, h2:after {
content: '';
flex: 1;
border-bottom: 1px solid #c0c0c0;}
h2:before {margin-right: 0.3em;}
h2:after {margin-left: 0.3em;}

header {
text-align:center;
background:#111 url('../images/bg2.gif');
box-shadow: 0 0 1px rgba(255,255,255,0.1), inset 0 0 6px rgba(0,0,0,.75); 
color:#aaa;
padding:1.2% 0 1.2% 5%;
margin:0 0 2%;
}

header h1 a {padding:10px 0 10px 160px;background: url('../images/logo.png') no-repeat left center;color:#ddd;}

.slogan {text-align:center;font-style:oblique;}

main {
width:90%;
margin:0 auto 2%;
overflow:hidden;
}

article {}

section {}

.column1 {overflow:hidden;line-height:0;margin:0 0 2%;text-align: center;}

/* goods */
.goods {overflow:hidden;margin-bottom:;}
.goods ul {margin:0;padding:0;list-style:none;text-align:center;background:;overflow:hidden;box-sizing: border-box;}
.goods li {float:left;width:23.5%;border:1px solid #ccc;margin:0 2% 2.2% 0;padding:;box-sizing: border-box;border-radius:8px;background:#eee;box-shadow:;}
.goods li:nth-child(4n) {margin-right:0;float:right;}
.goods img {max-width:100%;border-radius:7px 7px 0 0;}
.goods p {line-height:;margin:0 auto 6%;padding:0 3%;
position:;
height:3.2em;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods p a , .goods p {color:#555;}
.goods p a:hover {background:#e33;color:#fff;}

.goods .price {padding:;margin:0 0 6%;color:#c00;display: inline-block;}
.goods .price::before  {content: '$ ';color:#aaa;}

@media (max-width: 64em) {
main {width:95%;}

.goods li {width:49%;margin:0 2% 2% 0;}
.goods li:nth-child(2n) {margin-right:0;}
}

.button {text-align: center;}

.btn {
    display: inline-block;
    padding: 0.8rem 1rem;
    margin: 0 auto;
    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: #e33;
    text-align: center;
}






/* 版權宣告 */
footer {width:100%;margin:0 auto;padding:2rem 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;}


/* 回頂部 */
.back-to-top {
display: none; /* 默認是隱藏的，這樣在第一屏才不顯示 */
position: fixed; /* 位置是固定的 */
bottom: 2%; /* 顯示在頁面底部 */
right: 2%; /* 顯示在頁面的右邊 */
z-index: 99; /* 確保不被其他功能覆蓋 */
outline: none; /* 不顯示外框 */
background-color: #e33; /* 設置背景背景顏色 */
color: #FFF; /* 設置文本顏色 */
text-align: center;
line-height:1.5rem;
cursor: pointer; /* 滑鼠移到按鈕上顯示手型 */
padding: 0.8rem 1rem; /* 增加一些內邊距 */
border-radius: 0.5rem; /* 增加圓角 */
filter: alpha(opacity=70);opacity: 0.7;
}

.back-to-top:hover {
background-color: #e33; /* 滑鼠移上去時，反轉顏色 */
color: #fff;
filter: alpha(opacity=100);opacity: 1.0;
}