/* CSS Document */


* {
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
	font-family:微軟正黑體;
}

a {
	color:#b1b1b2;
}

a img{border: none;}

a:hover {
	color:#000;
}

#warp {
	background:url(../images/allbackc.jpg) repeat-x;
	width:100%;
}

#header, #center {
	width:900px;
	margin:0 auto;
	background: url(../images/cenback.png);
}

#headnav ul, #indexTitle,#profile,#meterials,#cupCake,#equipment,#iceCreamBars {width: 800px; margin:0 auto;}

#gotop {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 35%;    
	background: url(../images/gotop.png);
	cursor: pointer;
	height:42px;
	width:42px;
	z-index:9999;
}

/*header*/

#header {padding: 0 0 17px;}

#logobar {
	background:url(../images/titlebar.jpg) top no-repeat;
	width:900px;
	margin:0 auto;
	height:50px;
	
}

#logo {width:900px; text-align: center;}

#headnav ul{
	text-align: center;
	margin: 17px auto 0;
	border: 1px solid #000;
}

#headnav li {
	display: inline-block;
	*display: inline;
	*zoom:1;
	margin: 5px 20px;
	font-size: .9em;
	text-align: center;
	font-weight: normal;
}

/*center*/

#center {text-align:center;}

/*profile*/

#indexTitle, #profile, #meterials,.cupItem{
	padding: 0 0 25px;
	margin: 0 auto;
}

#proTitle, #metTitle, #cupTitle, #equTitle {
	border-top:5px solid #000;
	padding:30px 0 0;
}

#profile div{margin:10px auto;}

#proTitle, #metTitle ,#meterials div, #cupTitle, #equTitle{
	margin:30px auto  25px!important; 
	color: #858585;
	font-size: .9em;
}

#proText {margin:10px 0  30px!important;}

#profile table{
	position: relative;
	left: 25px;
	*left:0;
	font-size: .9em;
}

#profile table td {
	text-align: right;
	vertical-align: top;
	width: 80px;
	padding: 0 10px 0 0;
	line-height: 20px;
}

.protwo{
	color:#9b9b9c;
}

/*materials*/

.metItem{
	border:2px solid #000;
	width:335px;
}

.metItem td {
	padding: 10px 70px 10px 15px;
	text-align: left;
	vertical-align: bottom;
	color:#717071;
}

.metItem td:nth-child(even) {
	text-align: right !important;
	padding: 10px 0px 10px 90px;
}

#meterials div:nth-child(3) { letter-spacing:3px;}

#metDetail01 ul,#metDetail02 ul {
	text-align: left;
	width: 800px;
}

#metDetail01 ul {
	background:url(../images/met01.png) no-repeat;
	height: 285px;
}

#metDetail02 ul {
	background:url(../images/met02.png) no-repeat;
	height: 280px;
}

#metDetail01 li, #metDetail02 li {
	display: inline-block;
	*display: inline;
	*zoom:1;
	position: relative;
	text-align: right;
	vertical-align: text-top;
}

#metDetail01 li{
	top: 135px;
	width: 54px;
	left: 30px;
	*width: 58px;
	*left: -13px;
	
}

#metDetail02 li {
	top: 100px;
	width: 69px;
	left: 50px;
	*width: 73px;
	*left: -7px;
}

#metDetail01 p, #metDetail02 p {
	width:16px;
	font-size:.9em;
}


/*cupcake*/

.cupItem ul {
	width:800px;
	background:url(../images/cup05.png) no-repeat;
	height:580px;
	text-align: left;
	margin: 0 auto 40px;
}

.cupItem li {
	display: inline-block;
	color: #717071;
	width: 87px;
	height: 580px;
	position: relative;
	writing-mode: vertical-rl;
}

.metone {
	word-spacing: 2px;
}

.metone p{
	position: absolute;
	bottom: 20px;
}

.metone p.twoline{
	top: 0;
}

.mettwo p{
	position: absolute;
	top: 20px;
}

.cupItem p{
	width: 16px;
	text-align:center;
	font-size: .8em;
}

/*iceCreamBars*/

#iceCreamBars{
	position: relative;
}

#iceCreamBars #chttitle{
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: #717071;
}

#iceCreamBars .barstep{
	display: inline-block;
	width: 45%;
	height: 210px;
	vertical-align: top;
	position: relative;
	margin: -35px auto 0;
}

.barstep .icetext{
	width: 240px;
	height: 60px;
	border: 2px solid #b1b1b2;
	position: absolute;
	bottom: 25px;
	color: #717071;
	line-height: 60px;
	padding: 0 10px;
}

.barstep .icepic{
	width: 260px;
	position: relative;
	z-index: 1;
}

.step1{
	text-align: left;
}

.step2{
	text-align: right;
	text-align: -webkit-right;
	text-align: -moz-right;
	text-align: -ms-right;
	text-align: -o-right;
}

.step2 .icetext{
	right: 0;
}

.step1 .icepic{
	text-align: right;
	width: 260px;
}

.step2 .icepic{
	text-align: left;
}

/*equipment*/

#equItem {
	margin: 50px 0 30px;
}

#equItem span {
	border:2px solid #717071;
	padding: 20px 50px;
	letter-spacing: 3px;
	font-size: .8em;
	margin: 0 15px;
}

#equDetail {
	font-size: .9em;
	text-align: left;
	position: relative;
	left: 80px;
	top:-50px;
	letter-spacing: 1px;
	margin: 0 0 15px;
}

#equDetail td {
	width: 255px;
	line-height: 22px;
}

#equDetail td p{
	background: #c5c6c7;
	width: 65px;
	position: relative;
	left: -5px;
	padding: 0 0 0 5px;
	color:#fff;
}

.equlast p{
	width: 120px !important;
}

/*footer*/

#footer {
	background:#000;
}

#footer a{
	color:#c5c6c7;
}

#footer a:hover{
	color:#fff;
}

#footer h5{
	font-size: 1.3em;
	font-weight: normal;
}

#footword, #footbar {
	width:900px;
	position:relative;
	margin:0 auto;
	color:#c5c6c7;
	font-size:.8em;
}

#footword span , #footerbar span{
	display: inline-block;
	*display: inline;
	*zoom:1;
	margin: 35px 0 80px 60px;
	line-height: 30px;
	vertical-align: text-top;
}

#footbar span {
	font-size: 1.1em;
	border: 1px solid #fff;
	padding: 5px 20px;
	letter-spacing: 5px;
	left: 55px;
	position: relative;
}

#footbar p {
	position: relative;
	text-align: right;
	top: -10px;
	font-size: .9em;
	padding: 0 0 20px;
	width: 400px;
	left: 500px;
}