@charset "utf-8";


/*FB留言板API*/
.fb-comments-api { margin-bottom:20px;}

.btn-wrap  { -webkit-justify-content:flex-start; justify-content:flex-start; }

.service-detail { width:100%; height:auto; overflow:hidden; text-align:center;}
.service-detail * { padding:0; margin:0; list-style:none; text-decoration:none;}
.service-detail h2 { float:none; text-align:center; padding:20px 0; color:#ef857d; height:auto; overflow:hidden; border-bottom:2px solid #eee; margin:0 auto; margin-bottom:20px; display:inline-block; width:auto;}
.service-detail h2 + p { margin-bottom:20px;}
.service-detail > ul { display:block; width:100%; height:auto; overflow:hidden; max-width:1120px; padding:0; margin:0 auto;
-webkit-flex-display:flex; display: flex;
-webkit-justify-content:center; justify-content:center;
flex-wrap:wrap;}
.service-detail > ul > li { width:25%; height:auto; overflow:hidden; float:left; margin-bottom:20px; font-size:16px; color:#333; padding:0 10px;}
.service-detail > ul > li span { display:block; width:100%; max-width:235px; height:auto; overflow:hidden; text-align:center; margin:0 auto;}
.service-detail > ul > li span.list-photo { margin-bottom:10px; max-width:235px; margin:0 auto; margin-bottom:10px;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.2);
box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.2);}
.service-detail > ul > li span.list-photo img { display:block; max-width:100%; height:auto; float:left;}
.service-detail > ul > li span.list-title { font-size:20px; color:#ef857d; font-weight:bold;}

.service-detail.food > ul > li { width:50%;}
.service-detail.food > ul > li span { max-width:none;}

.page-title { width:100%; height:auto; overflow:hidden; color:#f29c97; font-size:24px; font-weight:bold; margin-bottom:20px;}

@media only screen and (min-width:0px) and (max-width:768px) {
	.service-detail > ul > li { width:33.33%;}
	}
@media only screen and (min-width:0px) and (max-width:512px) {
	.service-detail > ul > li { width:50%;}
	}
@media only screen and (min-width:0px) and (max-width:430px) {
	.service-detail > ul > li { width:100%;}
	.service-detail.food > ul > li { width:100%;}
	}