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

body {
font-family: Noto Sans TC , 微軟正黑體 , sans-serif ;
margin:0 auto;
color:#5f5f5f;
background:#f5f5f5;
font-size:1.2rem;
}

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

img {max-width:100%;}

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

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 {
margin:0 auto;
padding:0;
overflow:hidden;
width:100%;
text-align: center;
}

header section {
padding:5% 0 0;
}





article {
margin:0 auto;
overflow:hidden;
width:95%;
background:;
}

section 
{padding:0 2%;}


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

.column2 {overflow:hidden;line-height:0;margin:0 0 2%;}
.column2 ul {margin:0;padding:0;list-style-type:none;overflow:hidden;}
.column2 li {width:49%;float:left;text-align: center;}
.column2 li:nth-child(2n) {float:right;}

.column3 {overflow:hidden;line-height:0;margin:0 0 2%;}
.column3 ul {margin:0;padding:0;list-style-type:none;overflow:hidden;}
.column3 li {width:100%;margin:0 auto 2%;text-align: center;}
.column3 li:last-child {margin-bottom:0;} 

.column4 {overflow:hidden;line-height:0;margin:0;background:;}
.column4 ul {margin:0;padding:0;list-style-type:none;overflow:hidden;}
.column4 li {width:49%;float:left;margin-bottom:2%;text-align: center;}
.column4 li:nth-child(2n) {float:right;}
.column4 p{
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;
}


.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: #603;
    text-align: center;
}


footer {width:100%;margin:0 auto 0;padding:3% 0;text-align: center;overflow:hidden;font-size:1rem;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: 50em) {
header {background-image: url('../images/header.jpg');background-size: cover;box-shadow:0px 1px 10px 0px rgba(0,0,0,.5);margin-bottom:1%;}
header a {color:#fff;}

header section {
background: rgba(102,0,51,0.8);
backdrop-filter: blur(5px);
}

header section p{margin:0;padding:2%;}

header img {border-radius:.5rem;box-shadow:0px 1px 10px 0px rgba(255,255,255,.5);}

article {}


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

.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;}

}