@charset "utf-8";
/* 全站設定 */
body {
	background-color: #FFFFFF;
	margin: 0;
	font-family: "Microsoft JhengHei", sans-serif;
}
a{
	text-decoration: none;
    [disabled]display: block; 
	display: block;
	text-align: center;
}
*{
	margin: 0;
}
.navbar {	margin-top: 0px;	background-color: #3C3E45;}
.nav-container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.logo {
	float: left;
	font-weight: bold;
	width: 30%;
}
.logo a{	width: 38%;	padding-top: 5px;}
.nav-links{	width: 60%;	float: right;}
.nav-links li {	float: right;	width: 16%;}
.nav-links li a {
	text-align: center;
	color: #F7F7F7;
	font-weight: bold;
	display: block;
	line-height: 50px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 26px;
}
ul,li,ol{	list-style: none;}
.QR-a{
	text-decoration: none;
    [disabled]display: block; 
	display: block;
	text-align: center;
	color: #FFBC3F;
	font-size: 29px;
	font-weight: bold;
	padding-top: 12px;
	padding-bottom: 12px;
}
p{}
h1   {	font-size: 0px;}
*:after {     
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
header 
.container {	background-color: #C3C3C3;	padding-bottom: 10%;	padding-top: 10%;}
/* ====== 價目表樣式 ====== */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.price-table thead {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}
.price-table th, 
.price-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}
.price-table tbody tr:nth-child(even) {
  background-color: #fafafa; /* 斑馬紋 */
}
.price-table tbody tr:hover {
  background-color: #e6f7ff; /* hover 高亮 */
  transition: 0.2s;
}
.price-list h2 {
	text-align: center;
	display: block;
	background-color: #FB8C00;
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
	height: 52px;
	line-height: 50px;
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
	-webkit-box-shadow: 0px 0px 5px #000000;
	box-shadow: 0px 0px 5px #000000;
	text-shadow: 0px 0px 5px #000000;
}
.Service {	width: 94%;	margin-left: auto;	margin-right: auto;}
.Service h2 {
	width: 100%;
	display: block;
	text-align: center;
	font-size: 33px;
	margin-top: 35px;
	margin-bottom: 35px;
}
.Service-4 {	width: 25%;	float: left;}
.S-4 {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 100px;
	border: 1px dotted #35393F;
	border-radius: 6px;
	text-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 5px #2B2B2B;
	box-shadow: 0px 0px 5px #2B2B2B;
	background-color: #B3B6B8;
}
.S-4 a {
	color: #F9E313;
	font-weight: bold;
	font-size: 24px;
	width: 100%;
	display: block;
	text-align: center;
	line-height: 100px;
}
.price-list {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 10%;
	margin-bottom: 7%;
}

.Remark h3 {
	width: 100%;
	display: block;
	text-align: center;
	color: #E91C1F;
}
.Remark {
	margin-top: 30px;
	background-color: #EDEDED;
	padding-top: 10px;
	padding-bottom: 10px;
}
.rm{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.rm p {
	width: 100%;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}
.illustrate {	width: 90%;	margin-left: auto;	margin-right: auto;}
.ils-1 {	width: 50%;	float: left;}
img {	width: 100%;}
.ils-2 {	margin-bottom: 12px;}
.il-a p {
	width: 100%;	background-color: #F9F9F9;	border-bottom: 1px dotted #4A4A4A;	padding-top: 3px;	padding-bottom: 3px;}
.il-a {
	width: 89%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #030303;
	-webkit-box-shadow: 0px 0px 6px #000000;
	box-shadow: 0px 0px 6px #000000;
	padding-top: 22px;
	padding-bottom: 22px;
}
h4 {
	color: #B42D24;
	text-align: center;
	background-color: #FFFECE;
	padding-top: 8px;
	padding-bottom: 8px;
}
.footer {
	background-color: #222527;
	margin-top: 22px;
}
.f-a1 {	width: 80%;	margin-left: auto;	margin-right: auto;	padding-top: 50px;}
.QRCode {	width: 40%;	margin-left: auto;	margin-right: auto;}
.QR-img {	width: 50%;	margin-left: auto;	margin-right: auto;}
.area {	width: 50%;	margin-left: auto;	margin-right: auto;}
h5 {	text-align: center;	font-size: 32px;	padding-top: 30px;	color: #DBFFBB;}
.area-1 p {
	display: block;
	width: 100%;
	color: #DCD9D9;
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
}
.footer small {
	padding-top: 30px;
	padding-bottom: 30px;
	width: 100%;
	color: #DFDEDE;
	text-align: center;
	display: block;
}
.line {	display: block;	padding-left: 0px;	width: 13%;	}
.line a{
	color: #FFFFFF;
	font-size: 22px;
	background-color: #22C010;
	font-weight: bold;
	position: fixed;
	right: 6%;
	bottom: 8%;
	padding-right: 6px;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
}

@media (min-width:768px) and (max-width:960px){
.logo a {	width: 52%;}
.Service-4 {	width: 50%;	margin-top: 34px;}
.price-list  {	width: 85%;}
.nav-links li {	width: 14%;}
.nav-links li a {	font-size: 20px;	line-height: 40px;}
.container {	margin-top: 20px;}
.ils-1 .il-a p {	padding-top: 6px;	padding-bottom: 6px;}
.QRCode {	width: 60%;}
.nav-links {	width: 55%;}
.line a{
	font-size: 20px;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	right: 4%;
}
}

@media (min-width:560px) and (max-width:767px){
.logo a {	width: 52%;}
.Service-4 {	width: 50%;	margin-top: 34px;}
.price-list  {	width: 85%;}
.nav-links li {	width: 14%;}
.nav-links li a {	font-size: 20px;	line-height: 40px;}
.container {	margin-top: 20px;}
.p-B {	font-size: 17px;}
.ils-1 .il-a p {	padding-top: 6px;	padding-bottom: 6px;}
.QRCode {	width: 60%;}	
.line a{
	font-size: 20px;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	right: 4%;
	bottom: 8%;
}
	}
@media (min-width:400px) and (max-width:559px){
.logo a {	width: 70%;}
.Service-4 {	width: 99%;	margin-top: 20px;}
.price-list  {	width: 90%;}
.nav-links li {	width: 22%;}
.nav-links li a {	font-size: 20px;	line-height: 30px;}
.container {	margin-top: 20px;}
.p-B {	font-size: 14px;	height: 30px;}
.ils-1 .il-a p {	padding-top: 6px;	padding-bottom: 6px;}
.QRCode {	width: 93%;}	
.QR-img   {	width: 60%;}
.p-A1 {	font-size: 18px;}
.p-Aa {	font-size: 18px;}
.p-Ab {	font-size: 18px;}
.p-b1 {	font-size: 15px;	height: 29px;}
.p-b2 {	font-size: 15px;	height: 30px;
}
.ils-1 {	width: 100%;	margin-bottom: 22px;}
.S-4   {	height: 70px;}
.S-4 a{	font-size: 28px;	line-height: 70px;}
.area {	width: 86%;}
.line {	width: 17%;}
.line a{
	font-size: 20px;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	right: 4%;
	bottom: 8%;
}
	}
	
@media (min-width:320px) and (max-width:399px){
.logo a {	width: 94%;}
.Service-4 {	width: 100%;	margin-top: 20px;}
.price-list  {	width: 95%;}
.nav-links{	width: 50%;	float: right;}
.nav-links li {	width: 28%;}
.nav-links li a {	font-size: 20px;	line-height: 30px;}
.container {	margin-top: 20px;}
.p-B {	font-size: 16px;	height: 30px;}
.ils-1 .il-a p {	padding-top: 6px;	padding-bottom: 6px;}
.QRCode {	width: 100%;}	
.QR-img   {	width: 60%;}
.p-A1 {	font-size: 16px;}
.p-Aa {	font-size: 15px;}
.p-Ab {	font-size: 15px;}
.p-b1 {	font-size: 16px;	height: 30px;}
.p-b2 {	font-size: 15px;	height: 30px;}
.ils-1 {	width: 100%;	margin-bottom: 22px;}
.S-4 {	height: 70px;}
.S-4 a{	line-height: 70px;}
.area {	width: 95%;}	
.line {	width: 17%;}
.line a{
	font-size: 20px;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	right: 4%;
	bottom: 8%;
}
	}
@media (max-width:319px){
.logo a {	width: 94%;}
.price-list h2 {
	font-size: 24px;
}
.Service-4 {	width: 100%;	margin-top: 20px;}
.price-list  {	width: 95%;}
.nav-links{	width: 50%;	float: right;}
.nav-links li {
	width: 32%;
}
.nav-links li a {
	font-size: 16px;
	line-height: 30px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.container {
	margin-top: 20px;
}
.p-B {	font-size: 16px;	height: 30px;}
.ils-1 .il-a p {	padding-top: 6px;	padding-bottom: 6px;}
.QRCode {	width: 100%;}	
.QR-img   {	width: 60%;}
.p-A1 {	font-size: 16px;}
.p-Aa {	font-size: 14px;}
.p-Ab {	font-size: 14px;}
.p-b1 {	font-size: 16px;	height: 30px;}
.p-b2 {	font-size: 15px;	height: 30px;}
.ils-1 {	width: 100%;	margin-bottom: 22px;}
.S-4 {	height: 70px;}
.S-4 a{	line-height: 70px;}
.area {	width: 100%;}	
h5 {	font-size: 26px;}
.QR-a {	font-size: 27px;}
.line {	width: 17%;}
.line a{
	font-size: 20px;
	padding-right: 3px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	right: 4%;
	bottom: 8%;
}
	}
