/* 全局样式 */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #ff7e5f;
            --accent-color: #6bd3db;
            --light-color: #f8f9fa;
            --Morelight-color: white;
            --dark-color: #343a40;
            --success-color: #28a745;
            --text-color: #333;
            --text-light: #6c757d;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
/* 布局样式 */
body>section{  width: 100%;
    box-sizing: border-box;
            margin: 0 auto;
            padding: 30px 15px;
          
        }

 body>section:nth-child(2n-1){  background-color: var(--light-color);}           
 body>section:nth-child(2n){ background-color:var(--Morelight-color);}   
 
.hero-container{background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
 
    text-align: center;
         width: 100%;
            margin: 0 auto;
            padding: 20px ;
              display: flex;
            justify-content:center;
            align-items: center;
            padding: 15px 0;
            flex-wrap: wrap;
}

 .hero-subtitle {
                font-size: 1rem;    
                padding: 0 20px; line-height:30px;
                
            }

 /* 预约方式区域 */
  
        .section-title {
            text-align: center;
            
            font-size: 2rem;
            color: var(--dark-color);
            position: relative;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--secondary-color);
            margin: 15px auto 0;
            border-radius: 2px;
        }
        
        .booking-methods {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(12,1fr);
            gap: 10px;
        
 height: 700px;
        }
        .booking-methods>.section-title{
            grid-column: 2 / span 10;
            grid-row: 1/span 1;
          
        }
        .booking-methods>.method-card:nth-child(2){
            grid-column: 2 / span 5;
            grid-row: 2/span 5;
           
      
        }
           .booking-methods>.method-card:nth-child(2) a,.booking-methods>.method-card:nth-child(2) span{
           font-size:1.4rem;
      
        }
         .booking-methods>.method-card:nth-child(3){
            grid-column:2 / span 5;
            grid-row: 7/span 6;
           
        }
        .booking-methods>.method-card:nth-child(4){
            grid-column: 7 / span 5;
            grid-row: 2/span 11; 
             
        }
        .method-card {
            background-color: var(--light-color);
            border-radius: var(--border-radius);
            padding: 10px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: var(--box-shadow);
         
        }
        
        .method-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .method-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 10px;

        }
          .method-icon img {
             height: 40px;
        } 
        .method-title {
            font-size: 1.5rem;
            margin: 0 auto;
            color: var(--dark-color);
        }
        
        .method-description {
            color: var(--text-light);
           margin: 0 auto; margin-top: 10px;
     
        }
     .jiajiao-tel{ margin: 30px auto;}   
        .wxJiaojiao{ margin: 0 auto; margin-top: 20px; display: flex; height: 100px; width: 100px;	
            justify-content: center;
	/* 水平居中 */
	align-items: center;

}
.tel-tip{font-size: 1.2rem; color: #a750e0; display: inline-block;}
    .wxJiaojiao img{max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */}
	
 .booking-methods>.method-card:nth-child(3) .method-description{
            
            text-indent:0;
     
        }
.yuyueDiv
{
width:80%;
 margin:20px auto;
	
	text-align:center;
	background-color:#f5f6f2;
	border:solid 1px #c3c3c3;
  border-radius:10px;
	box-shadow: 1px 1px rgba(3, 3, 0, .1);
    height: 260px;
display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 5px;

}
   .yuyueDiv dt, .yuyueDiv dd {
             display: flex;
              justify-content:end;
	/* 水平居中 */
	align-items: center;
    padding: 0;
        }
        
  .yuyueDiv  dt { grid-column: 1 / span 3;  } 
   .yuyueDiv  dd { grid-column: 4 / span 5; } 
  .yuyueDiv  dd input{ width: 100%; border:solid 1px #DCDCDC;border-radius:5px;}
    .yuyueDiv  dd input:focus{ outline: none; border:solid 1px #77f5a5;}
   .yuyueDiv dd:nth-of-type(3) {justify-content:start; grid-column: 9 / span 4; }
 


#njkm{ display: inline-block; width:100%; height:20px; border-radius:5px; background-color:White; line-height:20px;  border:solid 1px #DCDCDC; }
 
#second{ cursor: pointer; background-color:White;border-radius:5px; line-height:20px; height:20px;border: none; }

 
        .method-btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 8px;
            border-radius: var(--border-radius);
            font-weight: 500;
            transition: background-color 0.3s ease;
           border: none;
           text-decoration: none;
        }
        
        .method-btn:hover {
            background-color: var(--secondary-color);
            color: white;
        }
   

         /* 响应式设计 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                text-align: center;
            }
           
            .hero-title {
                font-size: 2rem; letter-spacing: 14px;
            }
            
          .hero-container  .hero-subtitle {
                font-size: 1.6rem;  width: 100%;
                text-align: left;   line-height:25px;
            }
           
            


            
  .booking-methods {
            display: grid;
             grid-template-columns: 1fr;
           
            gap: 10px;
            margin: 40px auto;
  grid-template-rows: auto; 
   height: auto;
        }
        .booking-methods > * {
        grid-column: 1 !important; /* 所有子元素占满单列 */
        grid-row: auto !important; /* 自动行高 */
    }
 

.yuyueDiv
{
width:96%;
 margin:10px auto;
	padding:5px;
 
    height: 200px;
 
            gap: 0;

}
   .yuyueDiv dt, .yuyueDiv dd {
            
	/* 水平居中 */
	  margin: 0;
    padding: 0;
        }
  .yuyueDiv  dt { grid-column: 1 / span 3; } 
   .yuyueDiv  dd { grid-column: 4 / span 5; } 
 
   .yuyueDiv dd:nth-of-type(3) {justify-content:end; grid-column: 9 / span 4; }

 
 
.yuyueDiv  dt label,.yuyueDiv  dt span,.yuyueDiv  dd input,#njkm,#second{  line-height:1.5rem; height:1.5rem; font-size:1.5rem; }
        }
     .yuyueDiv  dd input,#njkm {  padding:4px;
        }
        
        @media (max-width: 480px) {
 
            .hero {
                padding: 60px 0;
            }
            
            .hero-title {
                font-size: 1.8rem;
            }
        }