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

body {
font-family: Noto Sans TC , 微軟正黑體 , sans-serif ;
margin: 0;
background:#f8f8f8;
font-size:1.2rem;
line-height:2rem;
}

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

a:hover {color:#900;}

b {color:#f00;}

img {max-width:100%;}

h1 {text-align: center;}

#wallpaper {width:95%;margin:5rem auto 2rem;background:;}

#slogan , .slogan {text-align: center;overflow:hidden;color:#fff;background:#988;padding:0 3%;}

/* 麵包屑 */
#breadcrumb {width:100%;margin:20px auto 20px;padding:0;overflow:hidden;}
#breadcrumb ul {margin:0;padding:0 0 0 10px;list-style-type:none;overflow:hidden;border-bottom:1px solid #ddd;}
#breadcrumb li {float:left;padding:0px 10px 10px 15px;margin:0;background: url('../images/style/breadcrumb-li.png') no-repeat left 10px;}
#breadcrumb li:first-child {background: url('../images/style/breadcrumb-home.png') no-repeat left 10px;padding-left:23px;}
#breadcrumb a {color: ;}

/* 列表 */
.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;}

.column1 {overflow:hidden;line-height:0;margin:0 auto;padding:0;background:;text-align: center;}
.column1 p {margin:1% 0;}

.column2 {overflow:hidden;line-height:0;margin:0 auto;padding:0;text-align: center;background:#cdd;}
.column2 ul {list-style:none;margin:0;padding:0;overflow:hidden;}
.column2 li {margin:0 0 1.5rem 0;padding:0;}
.column2 li:last-child {margin-bottom:0;}




.column4 {overflow:hidden;line-height:;margin:0;background:;}
.column4 ul {margin:0;padding:0;list-style-type:none;overflow:hidden;text-align: center;}
.column4 li {width:49%;float:left;margin-bottom:2%;}
.column4 li:nth-child(2n) {float:right;}
.column4 h2 {color:#5f5f5f;text-align: center;background:;}
.column4 h2{
font-size:1.2rem;
font-weight:normal;
position:relative;
line-height:1.5em;
margin:0;
height:3em;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}

.price {
    padding: ;
    margin: 3% 0;
    color: #c00;
    display: inline-block;
	}
	
.column4 .price::before {
    content: '$ ';
	color:#555;
}

#wallpaper>h2 {
    margin-bottom: 20px;
    border-bottom: 3px solid #900;
    padding: 16px 20px 16px 20px;
    line-height: 28px;
    background: #e8dfd7;
    font-size: 1.5rem ;
    color: #900;
	font-weight:500;
}

#wallpaper>h1 {
    font-size: 1.8rem;
    color: #900;
	font-weight:500;
}

.btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 auto 1%;
    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: #900;
    text-align: center;
}

footer {width:100%;margin:0 auto 0;padding:20px 0;text-align: center;overflow:hidden;font-size:;background:#2f2f2f;color:#f2f2f2;}
footer p {padding:0 5%;}

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


@media (min-width: 75em) {

.drawer-menu {float:right;}

#slogan , .slogan {padding:100px 0;background: url(../images/style/slogan.jpg) repeat 50%;background-size:100% auto;font-size:2rem;color:#222;text-shadow:0px 0px 5px #fff;}
#slogan h1  {-webkit-text-fill-color:#900;}
.slogan {background:none;padding:0;text-shadow:none;}

#wallpaper {width:90%;margin:6% auto 2%;background:;}

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

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


}