@import url("reset.css");
/*@import url(https://fonts.googleapis.com/css?family=Cabin);
@import url(https://fonts.googleapis.com/css?family=Changa+One);*/
*{ margin: 0; padding: 0; -webkit-box-sizing:border-box;}
html,body{ width: 100%; min-width:320px; height: 100%; -webkit-text-size-adjust:none; font-size:16px;}

body {font-family:Arial, Helvetica, sans-serif, "微軟正黑體";}


@font-face {font-family: 'Sosa Regular'; src: url(../fonts/sosa.ttf);}
#gotop {display: none; position:fixed; right:10px;bottom: 10px;   padding: 25px 10px 10px 10px;   font-size: .9em; text-align:center;background:url(../images/gotop.png) center 10px no-repeat #333; color: white; cursor: pointer; font-family:Verdana, Geneva, sans-serif; font-weight:bold; opacity:.8; background-size:20px 14px}
.clear { clear:both}


table {
	border-spacing: 0;
	border-collapse: collapse;
}

td, th {
	padding: 0;
}

.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

	.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
		padding: 8px;
		line-height: 1.42857143;
		vertical-align: top;
		border-top: 1px solid #ddd;
	}

	.table > thead > tr > th {
		vertical-align: bottom;
		border-bottom: 2px solid #ddd;
	}

	.table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
		border-top: 0;
	}

	.table > tbody + tbody {
		border-top: 2px solid #ddd;
	}

	.table .table {
		background-color: #fff;
	}

.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
	padding: 5px;
}

.table-bordered {
	border: 1px solid #ddd;
}

	.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
		border: 1px solid #ddd;
	}

	.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
		border-bottom-width: 2px;
	}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
	background-color: #f5f5f5;
}

table col[class*=col-] {
	position: static;
	display: table-column;
	float: none;
}

table td[class*=col-], table th[class*=col-] {
	position: static;
	display: table-cell;
	float: none;
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
	background-color: #f5f5f5;
}

.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover {
	background-color: #e8e8e8;
}

.table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
	background-color: #dff0d8;
}

.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
	background-color: #d0e9c6;
}

.table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info {
	background-color: #d9edf7;
}

.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover {
	background-color: #c4e3f3;
}

.table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning {
	background-color: #fcf8e3;
}

.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
	background-color: #faf2cc;
}

.table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
	background-color: #f2dede;
}

.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
	background-color: #ebcccc;
}

.table-responsive {
	min-height: .01%;
	overflow-x: auto;
}

/* ==================== Mobile =======================  */
/* header  */
header { width:100%; height:40px; background-color:#4589CE; position:fixed; top:0; text-indent:-9999px; box-shadow:0 1px 3px #555; z-index:8; }
header a h1, header a .logo{ display:block; width:180px; height:40px; margin:0 0 0 10px; background-image:url(../images/logo.png); background-size:180px auto; background-repeat:no-repeat; text-indent:-9999px;}
header a.search{ display:block; position:absolute; right:50px; top:7px; width:30px; height:30px; background-image:url(../images/search_bg.png); background-repeat:no-repeat; background-size:28px 28px; text-indent:-9999px;}
header .menu{ display:block; position:absolute; right:10px; top:4px; width:30px; height:30px; background-image:url(../images/3.png); background-repeat:no-repeat; background-size:30px 30px; text-indent:-9999px; cursor:pointer}
/* 主選單 */
#MENU { width:100%; height:100%; background:rgba(0,0,0,.8); position:fixed; left:0; top:0; z-index:9; display:none; overflow:auto; padding-bottom:25px;}
	#MENU .ttl { width:85%; height:40px; margin:25px auto 0 auto; background-color:#4589CE; text-align:center; color:#FFF; font-size:1.1em; line-height:40px; position:relative;}
	#MENU .ttl #close_btn { display:block; width:40px; height:40px; position:absolute; right:0; top:0; font-family:'Sosa Regular'; font-size:1.2em; color:#4589CE; background-color:#FFF; text-align:center; line-height:40px; cursor:pointer}
	#MENU .cate_list { width:85%; background-color:#FFF; margin:0 auto; padding-bottom:20px;}
	#MENU .cate_list ul{ margin-left:15px; background:url(../images/icon_1.png) 5px 15px no-repeat; background-size:10px 10px; font-size:1.2em; font-weight:bold; text-indent:20px; border-bottom:#E1E1E1 1px solid; line-height:40px;}
	
	#MENU .cate_list li{ display:block; width:103%; margin-left:20px; margin-right:0;}
	#MENU .cate_list li a{ display:block; width:90%; height:36px; line-height:34px; color:#666; text-align:left; text-decoration:none; font-size:.9em; border-top:#E1E1E1 1px solid; margin-top:-1px; font-weight:normal; text-indent:0;}
	#MENU .cate_list li a:hover, #MENU .cate_list li.current{ background-color:#4589CE; border-color:#4589CE; color:#FFF; text-indent:8px; }
		#MENU .cate_list li.current{ width:inherit; }
	

/* 搜尋 */
#SRCH { width:100%; display:inline-block; background-color:#E8E8E8; z-index:6;  margin-top:40px; padding:10px 0 5px 0; position:relative; }
	#SRCH .t1{ width:94%; height:38px; display:block; background:#FFFFFF; box-shadow:1px -1px 3px #000000; box-shadow:5px 5px 5px #333 inset; -webkit-box-shadow:1px -1px 3px #000000; -webkit-box-shadow:5px 5px 5px #999 inset; color:#333; border:1px solid #D7D7D7; font-size:1em; border-radius:2px; color:#999; text-indent:10px; margin:0 auto;z-index:7;}
	#SRCH .button { text-align:center; width:24px; height:24px; box-shadow:1px -1px 3px #000000; border:none; position:absolute; right:20px; top:18px; background:url(../images/icon_2.png) center center no-repeat; background-size:24px 24px; box-shadow:none; text-indent:-9999px; z-index:8;}
	
	#SRCH .button:hover {box-shadow:2px 2px 4px #555 inset; background-color:#000;}
#SRCH .hot_kw { width:94%; color:#666; font-size:.9em; margin:5px auto; line-height:18px;}
#SRCH .hot_kw a { color:#666; text-decoration:none;}
#SRCH .hot_kw a:hover {color:#4589CE;}

/* article */
/* index */
article { background:white;}
article .ads { width:100%; background:gray; text-align:center; font-size:2em; color:#CCCCCC; line-height:100px;}
.hot_cate {}	
	.hot_cate h2, .hot_cate .box a{ display:block; width:33.5%; height:100px; background-color:#4589CE; color:#FFFFFF; font-size:1.8em; font-weight:bold; float:left; border:#FFFFFF 1px solid; padding:10px; text-align:center; text-decoration:none; line-height:1em; margin:-1px -1px 0 0;}
	.hot_cate .box a:hover { border:#4589CE 4px solid; background-color:#FFF; color:#4589CE;}
	.hot_cate .box a span{ display:block; font-size:.8em; font-family: 'Changa One', cursive; color:#D9DF00; margin-top:-2px}
	.hot_cate h2 { border:#4589CE 4px solid; background-color:#FFF; color:#4589CE; padding-top:5%; position:relative;}
	.hot_cate h2 .tri { position:absolute; right:-5px; top:35px;}

.map_list { margin-top:5px;}
	.map_list h2 {width:100%; height:40px; background:url(../images/icon_h2.png) no-repeat 3px 6px; color:#4586CC; font-size:1.6em; line-height:45px; text-indent:38px; font-weight:normal; background-size:32px 32px;}
	.map_list h2 b{ font-weight:600}
	.map_list h3 {padding:0 20px; margin:2px 0; background:url(../images/icon_4.png) 96% 6px no-repeat; background-size:8px}
	.map_list h3 a{ font-size:.9em; color:#333333; text-decoration:none; }
	.map_list ul { margin:0 0 8px 0; }
	.map_list .map { }
	.map_list li { width:89%;color:#555; font-size:.9em; padding:1px 5px 6px 18px; line-height:1.3em; margin-left:22px;}
	.map_list li.add { background:url(../images/icon_pin.png) left 2px no-repeat; background-size:15px;}
	.map_list li.tel {background:url(../images/icon_phone.png) left center no-repeat; background-size:15px; border-bottom:#E1E1E1 1px solid;}

.hot_store {}
article .big_ttl { width:100%; height:40px; background:url(../images/icon_h2.png) no-repeat 3px 6px; color:#4586CC; font-size:1.6em; line-height:45px; text-indent:38px; font-weight:normal; background-size:32px 32px;}
article .big_ttl b{ font-weight:600}
.hot_store a, .hot_category a{ display:block; width:95%; height:35px; overflow:hidden; color:#333333; font-size:16px; border-bottom:#DBDBDB 1px solid; margin-left:38px; text-decoration:none;  }
.hot_store a li, .hot_category a li { line-height:35px; padding-right:35px; background:url(../images/icon_4.png) 90% 11px no-repeat; background-size:8px} 
.hot_store a:hover, .hot_category a:hover{ color:#FFFFFF; text-decoration:none;}
.hot_store a li:hover, .hot_category a li:hover {background-color:#4589CE; -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;
  transition: all .3s ease-in-out; transition-delay: 0s, 0.5s, 1s, 1.5s; border-bottom:#FFF 1px solid; text-indent:5px;}
  

/* list */
.selectstyle { background: transparent; -webkit-appearance: none;}
	.selectstyle select { width:100%; display:block; border-top:#CCC 1px solid; background:url(../images/icon_drop.png) 80% center no-repeat #E8E8E8; background-size:19px; font-size:1.1em; color:#333; line-height:45px;  border-radius:0; border-bottom:none; border-left:none; border-right:none; padding-left:28%}
.srch_result { width:100%; height:40px; text-align:center; color:#666; line-height:38px; font-size:1em}	
	.srch_result span { color:#4589CE; font-size:1.3em; font-weight:bolder; font-family:"Changa One";}

.store_list {}
	.store_list h2, .branches h1 {width:100%; min-height:40px; background:url(../images/icon_h2.png) no-repeat 3px 6px; color:#4586CC; font-size:1.4em; line-height:26px; padding:7px 0 0 35px; font-weight:normal; background-size:32px 32px;}
	.store_list h2 b, .branches h1 b{ font-weight:600}
	.store_list h3 {padding:7px 20px 5px 0; margin:2px 0 2px 22px; background:url(../images/icon_4.png) 96% 12px no-repeat; background-size:8px; border-top:#E1E1E1 1px solid;}
	.store_list h3 a{ font-size:1em; color:#333333; text-decoration:none; }
	.store_list ul { margin:0 0 8px 0; }
	.store_list .pic img { width:100%; height:auto;}
	.store_list li { width:95%;color:#555; font-size:.9em; padding:1px 5px 3px 18px; line-height:1.3em; margin-left:22px;}
	.store_list li.add { background:url(../images/icon_pin.png) left 2px no-repeat; background-size:15px;}
	.store_list li.tel {background:url(../images/icon_phone.png) left center no-repeat; background-size:15px;}
	.store_list li.host {background:url(../images/icon_host.png) left center no-repeat; background-size:15px;  }
	.store_list li.desc { padding:1px 30px 3px 0;}

.cate_list2 { width:100%;}
.cate_list2 h1, .cate_list2 .ttl { width:100%; min-height:33px; background:url(../images/icon_h2-2.png) left bottom no-repeat #4589CE; background-size:75px 35px; color:#FFF; padding:7px 0 7px 50px; line-height:1empx; font-size:1.3em; font-weight:normal}
.cate_list2 h1 b, .cate_list2 .ttl b { font-weight:bold}
	.cate_list2 .box { width:85%; background-color:#FFF; margin:0 auto; padding-bottom:20px;}
	.cate_list2 .box ul{ margin-left:15px; background:url(../images/icon_1.png) 5px 15px no-repeat; background-size:10px 10px; font-size:1.2em; font-weight:bold; text-indent:20px; line-height:40px;}
	
	.cate_list2 .box li{ display:block; width:103%; margin-left:20px; margin-right:0; border-bottom:#E1E1E1 1px solid; }
	.cate_list2 .box li a{ display:block; width:90%; height:36px; line-height:34px; color:#666; text-align:left; text-decoration:none; font-size:.9em; border-top:#E1E1E1 1px solid; margin-top:-1px; font-weight:normal; text-indent:0;}
	.cate_list2 .box li a:hover{ background-color:#4589CE; border-color:#4589CE; color:#FFF; text-indent:8px;}	

.route { width:100%; height:40px; position:relative}	
	.route em{ width:60%; position:absolute; left:3px; top:5px; color:#4589CE; background:url(../images/icon_5.jpg) 4px 15px no-repeat; background-size:5px; padding:4px 0 0 15px; font-weight:bolder; font-size:1.2em;}  
	.route p{width:40%; position:absolute; right:3px; top:0; color:#555; text-align:right;} 

/* detail */	
.detail { margin-top:10px;}
.detail h1{ width:94%; margin:5px auto; color:#4589CE; }
.detail .social_icons { width:93%; margin:0 auto; padding:7px 0 2px 0;border-bottom:#CCCCCC 1px solid; border-top:#CCCCCC 1px solid; }
.detail .info { width:100%; padding:3px 12px; color:#222; font-size:.9em; line-height:1.4em}	
	.detail .info p a { color:#4589CE;}	
	.detail .info p a:hover { font-weight:bold}
	.detail h2, .detail .ttl {width:100%; min-height:33px; background:url(../images/icon_h2-3.png) right bottom no-repeat #4589CE; background-size:75px 35px; color:#FFF; padding:7px 50px 7px 5px; line-height:1empx; font-size:1.3em}

	.detail .intro p { width:100%; padding:8px 10px; font-size:1em; line-height:1.4em; color:#222}
	.detail .service ul{ padding:8px 15px;}
	.detail .service ul li{ background:url(../images/icon_1.png) left 7px no-repeat; padding-left:15px; background-size:10px; margin:5px 0;}
	.detail .service ul li a{ text-decoration:none; color:#4589CE; line-height:1.1em;}
	.detail .service ul li a:hover{ text-decoration:underline;}

/* map */	
.branches .selectstyle {}
.branches .selectstyle select {padding-left:36px; background-position:90% center; border-top:none; border-bottom:#FFF 1px solid; color:#FFFFFF; background:url(../images/icon_drop2.png) 80% center no-repeat #4589CE; background-size:19px;}
.grn select{ background-color:#C5CA00!important}
	

/*pager style*/
.pager { width:100%; padding: 5px;margin: 25px auto 25px auto;color:#7F7F7F;font-size:80%;text-align:center; position:relative;}
.pager ul{ display:inline-block}
.pager li { display:block; float:left; margin-right:8px; padding:12px 15px; font-family:Verdana, Geneva, sans-serif; font-weight:600; background-color:#999; font-size:1.1em}
.pager a li{ text-decoration: none; color:#FFF; font-family:Verdana, Geneva, sans-serif; font-weight:600;}
.pager a:hover li, .pager a:active li, .pager a:visited li { color:#FFF; font-size:1em }
.pager li.current { margin-right:8px; padding:12px 15px; background-color:#4589CE; font-weight: bold; color:#FFF; font-size:1.1em}
.pager li.current a{ color:#FFFFFF;}
.pager li.current a:hover{ color:#333333}

.pager .numeric{ font-family:Verdana, Geneva, sans-serif; font-weight:600; cursor: pointer; }
.pager .prev { background:url(../images/icon_prev.png) center center no-repeat #999; background-size:13px; text-indent:-9999px; padding:12px 20px;}
.pager .nxt { background:url(../images/icon_nxt.png) center center no-repeat #999; background-size:13px; text-indent:-9999px; padding:12px 20px;}
/* footer */
footer { width: 100%; text-align:center; margin-top:15px; font-size:.9em; color:#CCC; line-height:30px;} 
footer a { padding:5px; font-size:1em; color:#999; text-decoration:none; } 
footer a:hover{ color:#333; text-decoration:underline }
 
footer p{ display:block; color:#E1E1E1; background-color:#999; font-size:.8em; padding:5px; text-align:center; line-height:1.3em} 

/* ==================== 404 =======================  */
.error_page { widows:212px; height:400px; margin:1.5em auto; background:url(../images/bg_404.png) center top no-repeat; background-size:212px; padding-top:300px; padding-left:75px}

.error_page p { color:#555;}


/* ==================== Slider =======================  */
@media only screen and (min-width: 768px) and (max-width: 959px){
	img{ max-width:100%}}
	@media only screen and (max-width: 767px){
	img{ max-width:100%}}
	figure,form,fieldset{border:0;margin:0;padding:0}
	
	article{margin:0 auto;overflow:hidden}
	.page-swipe { margin-bottom:30px;}	

	.page-swipe .wrap #slider{ width:100%;height:0; padding-bottom:56.3%; overflow:hidden}

@media only screen and (max-width: 767px){
	.page-swipe .wrap #slider figure div.wrap{ width:100%;height:0; padding-bottom:56.3%; overflow:hidden}}
	.page-swipe .wrap #slider figure div.image{display:block; width:100%;height:0; padding-bottom:56.3%; overflow:hidden; float:left;}

	.page-swipe .wrap nav{position:relative;max-width:680px;margin:25px auto -15px auto;}
	.page-swipe .wrap nav a{font-style:normal;color:#555!important}
	.page-swipe .wrap nav #position{text-align:center;list-style:none;margin:-60px 0 0 0;padding:0}.page-swipe .wrap nav #position li{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:#141414;box-shadow:inset 0 1px 3px black;margin:0 2px;cursor:pointer}
	.page-swipe .wrap nav #position li.on{box-shadow:inset 0 1px 3px -1px #FE4E4E,0 1px 2px rgba(0,0,0,.5);background-color:#FE6868;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FE4E4E),color-stop(100%,#FE6868));background-image:-webkit-linear-gradient(top,#FE4E4E,#FE6868);background-image:-moz-linear-gradient(top,#FE4E4E,#FE6868);background-image:-ms-linear-gradient(top,#FE4E4E,#FE6868);background-image:-o-linear-gradient(top,#FE4E4E,#FE6868);background-image:linear-gradient(top,#FE4E4E,#FE6868)}
.swipe {overflow: hidden;visibility: hidden;position: relative;}
.swipe-wrap { overflow: hidden; position: relative;}
.swipe-wrap > figure { float: left; width: 100%; position: relative;}		
	

/* ==================== Slider end =======================  */


/* Portrait */
@media screen and (orientation:portrait){
}

/* Landscape */
@media screen and (orientation:landscape){

}

.month_add_h3 {padding:7px 20px 5px 0; margin:2px 0 2px 22px; background:url(../images/icon_4.png) 96% 12px no-repeat; background-size:8px; border-top:#E1E1E1 1px solid;}



.table-borderless th, .table-borderless td, .table-borderless thead th, .table-borderless tr th, .table-borderless tbody + tbody{
    border: 0 !important;
}
.table-col-thin th, .table-col-thin td, .table-col-thin thead th, .table-col-thin tr th, .table-col-thin tbody + tbody{
    padding-left: 1px !important;
	padding-right: 1px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}
.table-th-weight th{
	font-weight: bold !important;
}