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

/* ----- 基礎與置頂設定 ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font:400 1.2rem/2.5rem Noto Sans TC , sans-serif , "Font Awesome 5 Free" , FontAwesome , "Font Awesome 5 Pro", "Font Awesome 6 Free";
margin: 0 auto;
padding-top: 75px; /* 防止內容被固定選單遮擋 */
box-sizing: border-box;
color: #5f5f5f;
background:#fff;
}

a {text-decoration: none;color:#09e;}

img {max-width:100%;margin:0 auto;}

h1,h2,h3 {font:400 1.2rem/2rem Noto Sans TC , sans-serif ;color:#1CA4CB;text-align: center;}

h1 ,h3 {margin:1rem 0;border-bottom:3px solid #1CA4CB;padding:1rem 0;background:#F5F5F5;}
main h2 {margin:1rem 0;text-align:left;}

main ul, ol {
    padding-left: 20px; /* 恢復左側內縮，顯示項目符號或數字 */
    margin: 10px 0;     /* 恢復上下段落距離 */
}
.slogan {font-style: italic;text-align:center;color:#c49;font-size:1.5rem;margin:2% auto;}

main {
width:90%;
margin:1% auto 0;
overflow:hidden;
background:#fff;
}

.banner ,.photo {width:100%;text-align: center;margin:0.8rem auto 0;overflow:hidden;}
.banner img ,.photo img {box-sizing: border-box;}

/* 麵包屑 */
#breadcrumbs {width:100%;margin:0 auto;padding:;overflow:hidden;}
#breadcrumbs ul {margin:0;padding:0 0 0.8%;list-style:none;border-bottom:1px solid #ddd;overflow:hidden;}
#breadcrumbs li {float:left;margin:0  0 0;padding:0;background:;}
#breadcrumbs li:first-child {margin-left:0;padding:;}
#breadcrumbs li:first-child::before {content: "\f015";color:#ccc;margin-right:1rem;}
#breadcrumbs li a {color: #b3a396;}
#breadcrumbs li::before  {content: "　⁄　";color:#ddd;}

/* 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%;margin:0 2% 2% 0;padding:;box-sizing: border-box;border-radius:;background:;}
.goods li:nth-child(4n) {margin-right:0;float:right;}
.goods p {line-height:1.5em;
margin:0 auto;padding:0;
position:;
height:3em;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods p a:hover {background:#09e;color:#fff;}

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

.list ul {margin:0;padding:0;list-style-type:none;overflow:hidden;}
.list li {padding:0 0 20px 0;margin:0 0px 20px 0;background:;overflow:hidden;border-bottom:1px #ddd solid;}
.list li:last-child {margin-bottom:10px;}
.list h2 {padding:0;margin:0;border:none;background:;}
.list h2 i {margin-left:1rem;color:#aaa;}

/* ========================================== */
/* 響應式電腦版樣式斷點 */
/* ========================================== */
@media (min-width: 769px) {
.list li {padding:0 0 20px;background:;overflow:hidden;}
.list li img {float:left;margin:0 20px 0 0;width:250px;}
.list li:last-child {}
}


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

}

/* 按鈕 */

.button {
margin:0 auto 1.2rem;
width:;
overflow : hidden;
text-align: center;
border-radius: 5px;
background: #09e;
color:#fff;}

.button a {color:#fff;padding:20px;display: block;}

.button :hover {background:#6cf;}

/* 版權宣告 */
footer {width:100%;margin:2% auto 0;padding:2rem 0;text-align: center;overflow:hidden;font-size:1rem;background:#111;color:#eee;}
footer p {padding:0 5%;}
footer ul {list-style:none;text-align: center;padding:0;}
footer li {display: inline-block;margin:0;padding:0;}
footer li:first-child::before {content: '';}
footer li::before  {content: "　│　";color:#bca;}
footer a {color:#09e;}

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

.back-to-top:hover {
filter: alpha(opacity=70);opacity: 0.5;/* 滑鼠移上去時，反轉顏色(透明度) */
}