@charset "utf-8";
/* CSS Document */
html, body { height: 100%; }
body {
	background-color:#FFF;
	background:url(../images/background.jpg) center;
	padding:0;
	font-family: "Microsoft YaHei","微軟正黑體", Arial, sans-serif;
	font-size:13px;
	color: #333;
}
a{text-decoration:none;color:#693}
a:hover{color:#CC0}
.wrap {
 min-height: 100%;
 *display: table; /* For IE7 Hack */
 *height: 100%; /* For IE7 Hack */
}
.logo{ width:200px;height:60px;display:block;margin:0 auto; overflow:hidden; text-indent:-300px;}
#header {width:100%;height:100px;margin:0 auto; text-align:center;z-index:102;}
#sticker {z-index:102;width:100%;height:100px;background:url(images/header_bg.png) center;}
#sticker .menu{ width:760px; height:50px; padding-top:65px; margin:0 auto;display:block;}
#sticker .menu li{ width:150px; height:30px; line-height:30px; text-align:center;float:left; display:block;}
#sticker .menu li a{ color:#CCC}
#sticker .menu li a:hover{ color: #FC0}
.container{width:100%;height:auto; margin:0 auto;}
.content{
	overflow: hidden;
	width: 1000px;
	height: auto;
	border-top: 1px dashed #ccc;
	margin: 10px auto;
	/* [disabled]padding:20px 0 50px 0; */
	position: relative
} /* must be same height as the footer */
.container .content {
}

/*新聞區域*/
.news{ width:250px; float:left; padding-right:20px;}
.news h1{font-size:16px; font-weight:bolder; color:#999; line-height:30px; background:url(../images/newsh1.jpg) left  no-repeat; width:220px; height:30px; overflow:hidden; text-indent:-300px; margin:5px 0 5px 0}
.news ul{ width:230px;}
.news ul li{width:230px;line-height:20px;font-size:14px;overflow:hidden;float:left;background:url(../images/li.png) left top no-repeat; padding:0px 0px 0px 20px; margin:0px 0px 5px 0px; border-bottom:1px dashed #ccc ;letter-spacing:1px}
.newsimg{ width:250px; height:180px; overflow:hidden;list-style:none;}
.more_btn{ width:50px; height:19px; display:block; background:url(../images/more_btn.jpg); float:right; text-indent:-100px; overflow:hidden}
.more_btn:hover{ background-position:0 -18px;}

/*品牌*/
.brandbox{width:730px; height:380px; float:right; background:url(../images/brand_bg.jpg) no-repeat}
.brand{width:220px; height:370px; margin:5px 4px 5px 15px;_margin:5px 2px 5px 14px;float:left}
.brand ul{width:205px; padding:5px 0 0 15px;}
.brand li{width:95px;line-height:20px; font-size:14px; padding-left:5px;font-weight:bolder; color: #666; float:left}
.petpark{display:block; width:220px; height:300px; background:url(../images/petpark.jpg) bottom}
.petpark:hover{width:220px; height:300px; background:url(../images/petpark.jpg) top}
.cuddlepat{display:block; width:220px; height:300px; background:url(../images/cuddlepat.jpg) bottom}
.cuddlepat:hover{background:url(../images/cuddlepat.jpg) top}
.captainpets{display:block; width:220px; height:300px; background:url(../images/captainpets.jpg) bottom}
.captainpets:hover{ background:url(../images/captainpets.jpg) top}


.footer{
	width:100%;
	padding-top:30px;
	background:#f6f6f6;
	height:80px;
	font-size:12px;
	line-height:20px;
	letter-spacing:0.2em;
	text-align:center;	
	position: relative;
	clear:both;
	}
.wrapper{ width:960px; margin:0 auto; overflow: hidden; }
.left{ float:left; }
.right{ float:right; }



/*下拉選單*/
nav {
	display: block;
	padding-top:2px;
	width:850px;
	margin:0 auto;
	z-index:101;
	_z-index:101;
}
.nav ul {
	z-index:101;
	_z-index:1011;
	*z-index:1011;
	margin: 0;
	padding: 0;
}
.nav li {
	position: relative;
	float: left;
	color: #ccc;
	list-style: none;
	_background:#999;
	*background:#999;
	background:rgba(0, 0, 0, .02);
}
.nav li a {
	display: block; font-size:1.2em;
	margin:0px 20px;
	padding:12px 30px 9px 30px;
	color: #FFF;
	text-decoration: none;
	}
.nav li:hover {
	font-color:#FC0;
	_background:#333;
	background:#333\9;
	*background:#333;
	background:rgba(0, 0, 0, .8) ;
}
.nav li ul {
	background-color:rgba(0, 0, 0, .6);
	_background:#999;
	background:#999\9;
	*_background:#999;
	display: none;
	position: absolute;
	top: 100%;
}
.nav li:hover ul {
	
	display: block;
	right: 0;
	left: 0;
	top: 100%;
}
.toggle {
	display: none;
}
.arrow-bottom {
	position: absolute;
	top: 25px;
	right: 13px;
	margin-left: 5px;
	border-top: 4px solid #FFF;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	width: 1px;
	height: 1px;
}


/*DM*/
.online_dm{ padding:10px 60px 100px 60px; font-family:"微軟正黑體"}
.dm_img{
	width: 240px;
	height: 390px;
	margin: 0px 20px 10px 20px;
	float: left;
}
.dm_img span{}
.dm_img span a{ color: #65573A;width:220px;height:25px; display:block; padding:10px; margin:0; line-height:25px; font-size:1.2em; font-weight:bolder;text-align:center;border-bottom:2px solid #85B416;}
.dm_img span a:hover{ color: #666; margin:0 0 0 0;border-bottom:5px solid #85B416;}
.dm_img img a{ width:50px;} 
.dm_img a img{} 
.dm_img a:hover img{ padding:5px 0 0 0}


.copyright { color: #5a7e0b;}

article { padding-top: 20px; margin-bottom: 50px; letter-spacing: 0.1em; line-height: 2em; overflow: hidden; }
article h1 {
	line-height: 55px;
	background-image: url(../images/page_h1_bg.png);
	background-repeat: no-repeat;
	height: 55px;
	display: block;
	width:880px;
	color: #FFF;
	font-size: 1.8em;
	font-weight: bold;
	padding-left:80px;
	margin-bottom:30px;
	
}
article h2 { font-size: 1.5em;  margin-bottom: 30px;  font-weight: bold; color:#283709; }
article p {	font-size:1.3em; line-height:25px; margin-bottom: 30px;  }
article span { color:#73a533;  font-weight: bold; }
article h3 {
	font-size: 1.4em;
	margin-bottom: 15px;
	font-weight: bold;
	line-height: 1.6em;
	color:#73a533;
	display: block;
}
article h4{ padding:5px; background:#ddd; font-size:1.3em; color:#666; margin:0; line-height:20px;}
article ul { display: block; padding-left: 2em;	margin-bottom: 30px; }
article ul li {	font-size:1.2em; margin-bottom:20px; line-height:18px; padding-left:20px;
background: url(../images/li.png) left top no-repeat;}

.page-company {	background-image: url(../images/page-company_bg.jpg);	background-repeat: no-repeat;	background-position: 112px 75px;}
.page-company .main { width: 745px;	padding-right: 30px; }
.page-company nav {	width: 135px; }
.page-company nav a { 
	display: block;
	text-align: right;
	font-size: 1.5em;
	line-height: 1.8em;
	letter-spacing: 0.35em;
	margin-bottom: 10px;
	font-weight: bold;
	color: #376105;
}
.page-company nav a:hover { color: #ad4511; }
.page-about .main { width:920px;padding:0px 20px;}
.page-about nav {
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.1em;
	color: #999;
	clear: both;
}
.page-about .services {
	overflow: hidden;
}
.page-about .services img {
	margin-right:2px;
}



.page-company .author {
	position: absolute;
	width: 15em;
	font-size: 1.1em;
	margin-left: 560px;
}

.page-company .author a {
	text-decoration: underline;
	font-size: 1.25em;
}
.page-company .pic {
	padding: 10px;
	border: 1px solid #CCC;
}


.share {
	height: 21px;
	width: 95px;
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 55px;
	padding-top: 6px;
	z-index: 1;
	background-image: url(../images/share/share_bg.jpg);
}

.share a {
	display: block;
	margin-right: 5px;
	height: 16px;
	width: 16px;
	float: left;
}

.careersP1 {
	width: 38em;
}


.store {
	margin-bottom: 40px;
	clear: both;
}
.store-title {
	background-image: url(../images/store_icon.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 52px;
	padding-left: 64px;
	display: block;
	line-height: 52px;
}

.store table tr td {
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	font-size:1.1em;
}
.store .title {
	background-color: #F5F5EF;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #376105;
	font-size: 1.2em;
	line-height: 30px;
	font-weight: bold;
	border-bottom-width: 0px;
}
.store .column {
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #FFF;
	background-color: #E8E8E8;
	border-bottom-width: 0px;
}
.store .newwindow {
	background-image: url(../images/newwindow.png);
	background-repeat: no-repeat;
	background-position: left center;
	display: block;
	padding-left: 26px;
	text-decoration: underline;
	width: 25%;
	margin:0 auto;
}
.sort dd {
	display: block;
	overflow: hidden;
	font-size: 1.2em;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.sort dd a { color: #360; text-decoration:none; text-align:left}
.sort dd a:hover { color: #390; }
.sort dd a.text_cuddlepat{color:#f08200;}
.sort dd a:hover.text_cuddlepat{color: #4E3221}
.sort dd a.text_captainpets{color:#e4007f}
.sort dd a:hover.text_captainpets{color:#731A40}
.sort dd span {
	background-image: url(../images/sort.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 55px;
	width: 150px;
	display: block;
	float: left;
}
.store-page dl dt {
	line-height:2em;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 25px;
	font-size:1.1em;
}
.store-page dl dd {
	padding-left: 70px;
	text-indent:;
	font-size:1.1em;
}

.store-page h4 {
	display: inline;
	color: #44444;
	font-size: 1.2em;
	font-weight: bold;
	background:none;
}
.store-page h3 {
	display: inline;
	color: #87A426;
	font-size:1.5em;
	font-weight: bold;
	background:none;
	letter-spacing:0em;
}
.store-page table tr td table tr td {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	padding: 5px;
	font-size:1.1em;
}
.store-page .pic-box {
	overflow: hidden;
	width: 845px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.store-page .pic {
	height: 265px;
	width: 395px;
	border: 1px solid #CCC;
	padding: 10px;
	margin-bottom: 10px;
}
.store-page iframe {
	float: right;
	padding-left: 50px;
}
.store-page small {
	display: block;
	clear: both;
	padding-left: 50px;
}
.contact {
	border: 1px solid #E0DFC2;
	border-radius:20px;
	padding: 10px 5px;
}
.contact table tr td {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	vertical-align: top;
}
.contact #text {
	border: 1px solid #C4C9AD;
	background-color: #F5F4F1;
	height: 20px;
}

.contact #text:hover {
	border: 2px solid #8fc31f;
	background-color: #EBEDE4;
	height: 18px;
}
.btn-box { margin:0 auto; }

.ui-button {
	display: block;
	height: 45px;
	color: #FFF;
	overflow: hidden;
}
.ui-button span {
	display: block;
	background-image: url(../images/button.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 45px;
	padding-left: 20px;
}
.ui-button span:hover { background-position: 0px -45px; }
.ui-button span span {
	display: block;
	background-image: url(../images/button.png);
	background-repeat: no-repeat;
	background-position: right -90px;
	height: 45px;
	color: #FFF;
	padding-left: 0px;
	padding-right: 20px;
	line-height: 45px;
	font-weight: bold;
	letter-spacing: 0.2em;
	font-size: 1.15em;
}

.ui-button span span:hover { color: #484800; background-position: right -135px; }

.text01{ font-weight:500;font-size:1em; color:#666}
.text02{ font-size:1.4em; color:#FFF;background:#CCC; width:100%; display:block}
.text_petpark{ color:#90c31f; margin:0px;}
.text_cuddlepat{color:#f08200; margin:0px;}
.text_captainpets{color:#e4007f; margin:0px;}
.text_gray { color:#666; }
.text_red {	color:#F00; }
.clear{ clear:both}
.guide{width:1000px; height:50px; line-height:50px; padding-left:20px;margin:0 auto}
.top{ width:50px; height:50px; display:block;position: fixed;right:10px; bottom:5px; background: url(../images/top_btn.png) top; text-indent:-50px; overflow:hidden;z-index:103;}
.top:hover{ background: url(../images/top_btn.png) bottom;bottom:10px;}
.banner{width:1000px; height:150px; margin:10px auto 0px auto; background:#ccc; text-align:center; vertical-align: middle}