/*public*/
body{font-size: 16px; color: #555; line-height: 1.6em; background-color: #f9f9f9}
body,ul,li,h1,h3{margin: 0; padding: 0;}
li{list-style: none;}
a{color: #333;text-decoration: none;}
a:hover{text-decoration: underline;}
.fl{float: left;}.fr{float: right;}.cf::after{clear: both; content: '';display: block;}
/*general*/
header,nav,main,footer {width: 100%; max-width:970px; margin: 0 auto; box-sizing: border-box;}
header,nav,main,footer {padding: 4px;}
/*header*/
header{height: 90px; overflow: hidden;}
header h1{line-height: 1.3em; margin: 15px 4px; font-size: 22px;font-weight: normal;color: #333;}
header a {padding: 4px; color: #789;}
/*nav*/
nav ul li{float: left; margin: 1px 6px 1px 4px;}
nav ul li .current{font-weight: bold;}
/*list*/
section {float: left;font-size: 14px ;box-sizing: border-box; padding: 4px; margin-top: 5px; text-align: center; width: 240px; height: 185px; overflow: hidden;}
section img{width: 100%; height: 150px; border-radius: 8px; overflow: hidden; transition: all 0.3s;}
section img:hover{box-shadow: 1px 2px 3px #555;cursor: pointer;}
.wide {width: 480px; text-align: left; position: relative;}
.wide .box{background: #ffe; border-radius: 8px}
.wide img {float: left; margin-right: 5px; border-radius: 8px; width: 230px; height: 170px}
.wide p {margin: 5px; max-height: 80px; overflow: hidden;}
.wide .price {color: red; font-size: 18px; position: absolute; bottom: 5px}
.wide .price::before{content: "￥"}
/*article*/
article {padding: 4px;}
article p:first-child {margin-top: 0}
article img {max-width: 100%;}
article details{margin-bottom: 20px}
article a {color: #15c; text-decoration: underline;}
article .service{text-align: center;border: 1px dotted #ccc; padding: 5px 0;position: relative; border-radius: 4px}
article .service label {position: absolute; left: 8px; top: -8px;font-size: 12px; line-height: 14px;color: #abd; background: #eee; padding:0 2px; border-radius: 4px}
/*footer*/
footer{text-align: center; height: 90px;color: #999;margin-top: 10px;background: #ddd;}
footer .company a{margin: 0 8px; line-height: 1em; color: #666}
footer .copyright{line-height: 20px; font-size: 14px;}
/*screen*/
@media screen and (max-width:510px) {
    section{width: 50%; height: 155px}
    section img{height: 120px}
    .wide {width: 100%; height: 128px}
    .wide p {max-height: 50px}
    .wide img {height: 120px; width: 130px}
}