/* CSS Document */

body{background: url(../images/dinner_bg.png) #333333; }

.dinnerfocus{ width:98%;  float: left; position: relative; margin: 1%; overflow: hidden; background: #000;}
.dinnerfocus .hd{overflow:hidden; position:absolute; right: 0; z-index:3; bottom: 20%; background: rgba(255, 255, 255, 0.8); }
.dinnerfocus .hd ul{ overflow:hidden; zoom:1; float:left;  }
.dinnerfocus .hd ul li{ margin:5px 5px; font-size: 1.4rem; width:98px; height:40px; line-height:40px; text-align:center; cursor:pointer; border: 1px solid #333333; color: #000; }
.dinnerfocus .hd ul li.on{ background:#333333; color:#fff; }
.dinnerfocus .bd{ height:100%; z-index:0; overflow: hidden; position: relative;}
.dinnerfocus .bd li{ zoom:1; vertical-align:middle; }
.dinnerfocus .bd img{ width:1880px; display:block; position: absolute; left: 50%; margin-left: -940px;}
/*.dinnerfocus .bd a{display: block; width: 14rem; height: 4rem; border: 0.1rem solid #000; text-align: center; line-height: 4rem; font-size: 1.4rem; color: #000; position: absolute; margin-top: 500px; -moz-margin-top: 530px; left: 50%; margin-left: -7rem; z-index: 10;}
.dinnerfocus .bd a:hover{background: black; color: #fff;}
.dinnerfocus .bd p{font-size: 1.5rem; line-height: 200%; position: absolute; z-index: 2; text-align: center; width: 1200px; left: 50%; margin-left: -600px; top: 350px; color: #000; font-weight: 400;}*/

.dinnerfocus .bd a{
	display: block; 
	width: 14rem; 
	height: 4rem; 
	border: 0.1rem solid #000; 
	text-align: center; 
	line-height: 4rem; 
	font-size: 1.4rem; 
	color: #000; 
}
.dinnerfocus .bd a:hover{background: black; color: #fff;}
.dinnerfocus .bd .view{
	font-size: 1.5rem; 
	line-height: 200%; 
	position: absolute; 
	z-index: 2; 
	width: 94%;
	left: 0; 
	color: #000; 
	font-weight: 400; 
	background: rgba(255, 255, 255, 0.7); 
	bottom: 0; 
	padding: 20px 3%; 
}
.dinnerfocus .bd .view .title{
	width: 20%;
	float: left;
}
.dinnerfocus .bd .view .title h3{
	font-size: 26px;
	font-weight: 100;
	line-height: 100%;
	padding-bottom: 10px;
}
.dinnerfocus .bd .view .text{
	width: 80%;
	float: left;
}
.dinnerfocus .bd .textBox{position: absolute; left: 0; bottom: -50px; background: red; z-index: 2;}

.dinnerfocus .bd .mask{width: 100%; height: 30%; position: absolute; bottom: 0; left: 0; background: rgba(255, 255, 255, .75); z-index: 2;}

/* 下面是前/后按钮代码，如果不需要删除即可 */
.dinnerfocus .prev,
.dinnerfocus .next{ position:absolute; top:50%; margin-top:-3rem; height: 6rem; line-height: 6rem; text-align: center; color: #673434; z-index: 999; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.dinnerfocus .prev i,.aboutfocus .next i{font-size: 2rem;}
.dinnerfocus .prev{ background: #fff; left: 0; width: 6rem;}
.dinnerfocus .next{ background: #fff; margin-top: -9rem; width: 6rem; }
.dinnerfocus .prev:hover,
.dinnerfocus .next:hover{ color: #fff; background: #cc9966; }
.dinnerfocus .prev:hover{padding-left: 5rem;}
.dinnerfocus .next:hover{padding-left: 5rem;}


/*body:nth-of-type(1) .dinnerfocus .hd{width: 880px; margin-left: -440px; bottom: 20%;}*/
body:nth-of-type(1) .dinnerfocus .hd ul li{margin: 5px 5px; width: 98px;}


.dinnerTxt{
	width: 50%; 
	text-align: center; 
	position: absolute; 
	bottom: 30%; 
	left: 50%; 
	margin-left: -25%; 
	z-index: 3; 
	color: black;
	text-shadow:#fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;
	-webkit-text-shadow:#fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;
	-moz-text-shadow:#fff 2px 0 0,#fff 0 2px 0,#fff -2px 0 0,#fff 0 -2px 0;
	*filter: Glow(color=#fff, strength=2);
}
.dinnerTxt h3{font-size: 4.8rem; letter-spacing: 1rem; text-indent: 1rem;  padding-bottom: 40px; font-weight: 500;}
.dinnerTxt h4{font-size: 2.4rem; font-weight: 500;}
.dinnerTxt .dinnerLine{width: 0.1rem; height: 30px; background-color: black; margin: 30px auto;}
@media screen and (max-width:1440px){	
	.dinnerTxt{width: 70%; margin-left: -35%;}
	.dinnerTxt p{font-size: 1.4rem; line-height: 200%; font-style: italic; margin: 20px 0;}
	.dinnerTxt .dinnerLine{display: none;}
	/*.dinnerfocus .bd a{margin-top: 560px;}*/
}
@media screen and (max-height:768px){
	.dinnerfocus .hd{bottom: 10%;}
	.dinnerTxt{display: none; width: 70%; margin-left: -35%; top: 22%;}
	/*.dinnerTxt p{font-size: 1.4rem; line-height: 200%; font-style: italic; margin: 20px 0;}*/
	.dinnerTxt .dinnerLine{display: none;}
	.dinnerfocus .bd a{}
	.dinnerfocus .bd p{font-size: 12px;}
	.dinnerfocus .bd img{width: 100%; margin-left: -50%;}
	.dinnerfocus .bd .view .text{width: 70%;}
}

@media (min-width: 1439px){
	.dinnerTxt{width: 70%; margin-left: -35%;}
}