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

body {
font:400 1.2rem/2rem Noto Sans TC , sans-serif ;
margin:0 auto;
color:#5f5f5f;
background:#fcfcfc;
}

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

b {font-weight:bold;color:red;}

img {max-width:100%;}

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

h2 {
    margin:0 auto 2%;
    border-bottom: 3px solid #500;
    padding: 16px 20px 16px 20px;
    line-height: 28px;
    background: #eee;
    font-size: ;
    color: #500;
}

#wallpaper>h1 {text-align: center;}
#wallpaper>h1:before, h1:after {font-family: "Font Awesome 5 Free";font-weight: 700;color:#ccc;}
#wallpaper>h1:before {content: "\f10d";margin-right: 1rem;}
#wallpaper>h1:after {content: "\f10e";margin-left: 1rem;}

.slogan {text-align: center;font-style:italic;}
.slogan h1 {
display: flex;
    align-items: center;
    text-align: center;
    color: #c0c0c0;}
.slogan h1:before, .slogan h1:after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #c0c0c0;}
.slogan h1:before {margin-right: 0.3em;}
.slogan h1:after {margin-left: 0.3em;}


#wallpaper {
margin:2% auto 0;
overflow:hidden;
width:90%;
background:;
}


/* 麵包屑 */
#breadcrumb {width:100%;margin:0px auto 20px;padding:0;overflow:hidden;font: 1rem/1.8rem Noto Sans TC , sans-serif ;}
#breadcrumb ul {margin:0;padding:0;list-style-type:none;overflow:hidden;border-bottom:1px solid #ddd;}
#breadcrumb li {float:left;padding:0px 0.5rem 0.5rem 0;margin:0;}
#breadcrumb li:first-child:before {content: '\f015 ';font-family: "Font Awesome 5 Free";font-weight: 900;color:#ccc;margin-right: 0.5rem;}
#breadcrumb li:before {content: '\f105 ';font-family: "Font Awesome 5 Free";font-weight: 900;color:#ccc;margin-right: 0.5rem;}


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


/* 按鈕 */
.button {margin:0 auto;width:;overflow : hidden;box-sizing: border-box;text-align: center;}
.button a:before {margin-right: 10px;font-weight: 900;content: "\f002"; /* 圖標編號 */
font-family: "Font Awesome 5 Free";color:#fff;} 

.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: #803;
    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.5% 0;padding:;box-sizing: border-box;border-radius:8px;}
.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:hover {background:#500;color:#fff;}

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

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

.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: '$ ';}

/* column2 */
.column2 {overflow:hidden;margin:0;padding:0;}
.column2 ul {list-style:none;margin:0;padding:0;}
.column2 li{}

/* column4 */
.column4 {overflow:hidden;margin:0;padding:0;}
.column4 ul {list-style:none;margin:0;padding:0;}
.column4 li{}
.column4 li {float:left;width:23.5%;margin:0 2% 2.5% 0;padding:;box-sizing: border-box;text-align: center;}
.column4 li:nth-child(4n) {margin-right:0;float:right;}
.column4 img {max-width:100%;}

/* 列表 */
.list {overflow:hidden;margin:0;padding:0;}
.list ul {list-style:none;margin:0;padding:0;}
.list li {margin:0 0 1rem 0;padding:0 0 1rem 0;border-bottom:1px #ccc solid;}
.list li:last-child {border:none;padding:;margin-bottom:0;}

/* 版權宣告 */
footer {width:100%;margin:0px auto 0;padding:20px 0;text-align: center;overflow:hidden;font-size:1rem;background:#2f2f2f;color:#f2f2f2;}
footer p {padding:0 5%;}

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

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

@media (min-width: 75em) {
#wallpaper {width:1200px;}
#goods-header .big-img {float:left;width:40%;line-height:;margin:0 2% 0 0;text-align: center;}
.goods-info {float:right;width:57%;}

#goods-header .botton {text-align: left;}


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

}

@media (max-width: 64em) {
#wallpaper {}

nav img {display:none;}
.column4 li , .goods li {width:49%;margin:0 2% 2% 0;}
.column4 li:nth-child(2n) , .goods li:nth-child(2n) {margin-right:0;}

#goods-header {text-align: center;}
#goods-header h1 {display: inline-block;}
}