*{margin: 0 ; padding: 0;}


/* 预约弹窗样式 */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    z-index: 1001;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-content {
    position: relative;
}

.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}

#reservePhone {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-confirm {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.btn-confirm:hover {
    background: #45a049;
}


/* QQ群链接样式 */
#qq_group {
    margin: 20px 0;
    text-align: center;
}

#qq_group .qq-group-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #00a8ff 0%, #007acc 100%);
    border-radius: 25px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,120,204,0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;  /* 新增点击手势 */
}

/* 新增提示文字样式 */
#qq_group .qq-tip {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 5px;
    animation: tipFade 1.5s ease-in-out infinite;
}

@keyframes tipFade {
    0%,100% { opacity: 0.6; }
    50% { opacity: 1; }
}

#qq_group .qq-group-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
}

#qq_group .qq-group-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,120,204,0.4);
}

#qq_group .qq-group-btn:hover::before {
    animation: shine 1.5s;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

#qq_group .qq-group-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0,120,204,0.3);
}

#qq_group .qq-group-btn i {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: floatAnimation 10s ease-in-out infinite;
}


/* 新增预约图片尺寸调整 */
.reservation {
    width: 400px;
    height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

body{
	background-image:url(../img/bj.jpg); 
  	overflow: auto;/*增加滚动条*/
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top 84px;/* 属性设置背景图像的起始位置*/
}

li{list-style: none;}
header{
	min-height: 84px;
	background: rgba(0,0,0,1);
    z-index: 999;
    display: flex;
}
header .head{
  display: block;
  float: left;
  height: 84px;
  width: 1200px;
  margin: 0px auto;
}
/*logo*/
header .head .logo{
	position: relative;
	top: 15px;
	display: block;
	float: left;

}
@keyframes floatAnimation {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20%, 20%);
    }
    50% {
        transform: translate(0, 40%);
    }
    75% {
        transform: translate(-20%, 20%);
    }
    100% {
        transform: translate(0, 0);
    }
}

#floating-reservation {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: floatAnimation 10s ease-in-out infinite;
}

#floating-reservation p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}
/*导航*/
header .head .first_ul{
	height: 84px;
	width: 770px;
	display:flex ;
	float: left;

}
header .head .first_ul li {
	width: 110px;
	height: 85px;
	float: left;/*增加浮动使竖排列表横排*/
	display:inline-block ;
	list-style-type: none;/*取消列表前小点*/
}
header .head .first_ul li a{
	display: flex;
	flex-direction: column;/*设置为垂直排列*/
	align-items:center;        /* 文字水平居中*/
    sjustify-content:center;              /*文字垂直居中*/
    text-decoration:none;   /*取消a标签下划线*/
    height: 85px;
    font-size: 18px;
    color: rgba(201,201,221,1);
    font-family: "Microsoft YaHei", Tahoma, simsun, sans-serif;
 
}
    header .head .first_ul li:hover a{
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(228,182,83,0.4));/*设置背景颜色渐变且透明*/
	color: rgb(228,182,83,1);

} 


header .head .first_ul li a small{
	padding-top: 7px; 
	font-size: 12px;
    color: rgba(133,135,146,1);
}
header .head .first_ul li a  div{
	position: relative;
	bottom:-17px;
	width: 100%;
	height: 3px;
}	
header .head .first_ul li a:hover div{
	background-color: rgb(228,182,83,1);
}
/* 头部右侧登陆*/
header .head  .login1{
    float: right;
    padding-top: 21px;
    width: 182px;
    height: 45px;
}
header .head  .login1  .login3 {
	 float: left;
	 margin-right:10px; 
}
header .head  .login1  .login3 img{
	     border: 1px solid #d9ad50;
	     border-radius: 42px;	   
}
header .head  .login1 .login2 a{         
	 text-decoration:none;  
	 color: #ffffff;
     font-size: 16px;
}
header .head  .login1 .login2 p{
        font-size: 14px;
        color: #858792;
        padding-top:5px; 
	
}
/*二级导航*/
 header .head2{
  top: 84px;
	width: 100%;
  height: 360px;
	background: rgba(0,0,0,0.6);
	position: absolute;
    display: none;
	
}
header .head2{
    height: 280px; }
header .head2 ul{
	    width: 1000px;
	    height: 0px;
	    margin: 0 auto;
	    overflow: hidden;
	    padding-top: 15px;
	    padding-bottom: 30px;
	    padding: 15px 0px 30px 200px;
		}
header .head2 ul{
		  display: block;
		  height: 240px;
		 }
header .head2 ul li{
	float: left;
	display: block;
	width: 110px;
	align-items:center;        /* 文字水平居中*/
    justify-content:center;  

}
header .head2 ul li a{
	height: 30px;
	display: flex;
    align-items:center;        /* 文字水平居中*/
    justify-content:center; 
    text-decoration:none;   /*取消a标签下划线*/ 
    font-size: 14px;
    color: #c9c9dd;
}
/* 身体 */
#border{width: 1200px;
	height: 350px;
	margin-top: 450px;
	margin-left: auto;
	margin-right: auto;}
#image{	width: 604px;
		height: 342px;
		float: left;
			}
		#text{
			width: 640px;
			height: 48px;
			position: relative;
			 top:-7px; 
		}
		#text>li{
			width: 118.5px;
			line-height: 47.5px;
			float: left;
			text-align: center;
			background-color: #2D2F38;
			color: #B1B2BE;
		}
		#text>li.active{
			background-color: #4E5058;
			color: #E19456;
		}
		#image1>div{
			display: none;
		}
		#image1>div.select{
			display: block;
		}
		  .news{/*新闻*/
		   display:block; 
		   float: left;
		   width: 325px;
		   height: 342px;
		   padding-left:17px;
		   padding-right: 17px; 
		   background: #323235;
		}
		.news .news1{
		   width: 328px;
		   height: 48px;
		   border-bottom: 1px solid #000;
		}
		.news1 li{
		   width: 54.5px;
		   height: 45px;
		   display: block;
		   list-style-type: none;
		   text-align: center;
		   line-height: 45px;
		   float: left; 
		   color: #b8b9c5;
		}
		.news1 a{
		   width: 54.5px;
		   height: 45px;
		   display: block;
		   list-style-type: none;
		   text-align: center;
		   line-height: 45px;
		   float: left; 
		  color: #b8b9c5;
		}
		.news1 li:hover{
		  border-bottom: 3px solid #f3c258;
		  color: #f3c258;
		}
		.news2{
		  width: 325px;
		  height: 287.6px;
		}
		.news2 li{
		  list-style-type: none;/*超出长度省略*/
		  overflow:hidden;
		  text-overflow: ellipsis; 
		  white-space: nowrap;
		  width: 325px;
		  height: 20.8px;
		  margin-bottom: 11px;
		  color: #b1b2be;
		  font-size: 14px;
		    
		}
		.news2 li span{
		  float: right;
		  font-size: 12px;
		}
		.news2 li:hover{
		 text-decoration:underline;   /*字体浮动出现下划线*/
		}
		.news2 .wen{
		  background: #414046;
		  color: #f3c258;
		  line-height: 36px;
		  width: 294px;
		  height: 36px;
		  padding: 0 15px;
		  margin-top: 18px;
		  margin-bottom: 11px;
		  font-size: 18px;
		} 
		#selet>div{display:none}
		#selet>div.selet1{display:block}
		#main{float: left;width: 236px;height: 350px;}
		#main img{display:block;margin:0px;}
		.main-4{
			width: 1200px;
			height: 200px;
			margin: 0 auto;
			overflow: hidden;
		}
		.main-4>ul{
			width: 1200px;
			height: 200px;
			line-height: 200px;
			margin-top:20px;
		}
		.main-4>ul>li{
			float: left;
			width: 390px;
			height: 134px;
			overflow: hidden;
		}
		.main-4>ul>li>img{
			width: 290px;
			height: 134px;
			display: block;
			transition: all 500ms;
		}
		.main-4>ul>li>img:hover{
			transform: scale(1.1);
		}
		.main-4>ul>#main-4{
			width: 290px;
			margin-right: 13px;
		}
		.main-4>ul>#main-4-1{
			width: 290px;
		}
		.main-5{
			width: 1200px;
			height: 70px;
		}
		.main-5>ul{
			width: 800px;
			height: 70px;
			font-size: 12px;
			display:block;
			margin: 0 auto;
		}
		.main-6{
			background-color:white;
			width: 1200px;
			display:block;
			margin: 0 auto;
		}
		/*固定菜单位置*/
		#gdcd{
			width:300px;
			position:fixed;
			right: 0;
			top:100px;
			z-index:999;
			background: url(../img/r_navBg.png) no-repeat;
			background-size: 360px;
			
		}
		 .fox{
		  display: block;
		    position: absolute;
		    top: 15px;
		    left: 24px;
		    width: 165px;
		    height: 145px;
		
		
		}
		 .fox span{
		    display: block;
		    position: absolute;
		    top: 37px;
		    left: 12px;
		    width: 88px;
		    height: 36px;
		    font-size: 14px;
		    text-indent: 14px;
		    font-weight: bold;
		    line-height: 18px;
		    color: #62401b;
		    overflow: hidden;
		}
		#gdcd ul{
			width:120px;
			height:566px;
			margin-left: 90px;
		}	
		#first{
			width: 120px;
			height: 36px;
		}
		#gdcd>ul>li>a{
			text-decoration: none;
			color: #F0F8FF;
			display: block;
			width: 120px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			background-color: rgba(0,0,0,0.4);
			overflow:hidden;
		}
		#gdcd>ul>li>a:hover{
			background-color: rgba(223, 178, 83, 0.9);
		}
		#gdcd-1{
			display: none;
		}
		#gdcd-1>li{
			width: 120px;
			height: 150px;
			margin-left: -215px;
			margin-top: -80px;
			background: rgba(0,0,0,0.4);
			border: 1px solid yellow;
		}
		#gdcd-1>li>span{
			font-size: 12px;
			color: #F0F8FF;
			margin-left: 8px;
		}
		#gdcd-1>li>span>a{
			text-decoration: none;
			color: #F3C258;
		}
		#gdcd-1>li>img{
			margin-left: 8px;
		}
		#gdcd-2{
			display: none;
		}
		#gdcd-2>li{
			width: 120px;
			height: 150px;
			margin-left: -215px;
			margin-top: -80px;
			background: rgba(0,0,0,0.4);
			border: 1px solid yellow;
		}
		#gdcd-2>li>span{
			font-size: 12px;
			color: #F0F8FF;
			margin-left: 8px;
		}
		#gdcd-2>li>img{
			margin-left: 8px;
			width: 100px;
			width: 100px;
		}
		.logo{
			float: left;
		}