/* ====================== 全局样式 ====================== */
body {
    
    margin: 0px;
    padding: 0px;
}

#dingbu{
    width: 100%;
    height: 20px;
    background-color: rgb(14, 2, 83);
}









/* 时间输入 */

.main-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    font-family: "Segoe UI", sans-serif;
}

.panel {
    position: relative;
}

/* Tabs */
.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #d3b87f;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: bold;
    color: #7a5e3d;
    transition: all 0.3s ease;
}
.tab.active {
    border-color: #a67c52;
    color: #a67c52;
}

/* 表单容器居中 */
#wnl {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    position: relative;
}

.form-wrapper {
    position: relative;
    width: 700px;
    height: 70px;
}

/* 表单重叠显示 */
.form-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.form-container.active-form {
    opacity: 1;
    pointer-events: auto;
}

.form-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18%;
}

.sjz {
    margin-bottom: 5px;
    font-size: 16px;
    color: #7a5e3d;
}

.inp {
    width: 93%;
    padding: 6px;
    border: 1px solid #d3b87f;
    border-radius: 8px;
    background: rgba(255, 250, 240, 0.8);
    text-align: center;
    font-size: 16px;
    color: #5c4a31;
}



.inp:focus {
    outline: none !important; /* 强制去掉虚线 */
    box-shadow: 0 0 8px rgba(166,124,82,0.4); /* 可选聚焦光晕 */
}





.button-row {
    display: flex;
    flex-direction: column; /* 上下排列 */
    align-items: center;    /* 水平居中 */
  
}

#subjianxi {
    width: 100%;   /* 可以让间隔撑开，也可以不用 */
    height: 1px;   /* 不显示 */
}

.submit-btn {
    margin: 2px 0;
    width: 100%;  /* 固定宽度 */
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(to right, #d9b382, #a67c52);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: linear-gradient(to right, #a67c52, #d9b382);
    transform: translateY(-2px);
}










/*  */
.qimenwb {
    width: 100%;
    display: flex;          /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
}

#qimen{
    width: 100%;
    
    display: none; /* 初始隐藏 */
    flex-direction: column; /* 如果需要 */
}


#solu{
    width: 100%;
    height: 50px;
    /* background-color: red;   */
}


.shijian{
    width: 100%;
    height: 50%;
    /* background-color: blue; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}








.li{
    width: 15%;
    height: 100%;
    /* background-color: yellow; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    border-top: 2px solid #080808;
    /* border-bottom: 2px solid #0f0f0f; */
    border-left: 2px solid #0a0a0a;
}

#yangsj,#yinsj{
    width: calc(80% + 6px);
    height: 100%;
    border-top: 2px solid #080808;
    border-right: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    /* border-right: 2px solid #020202; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}






#bazi{
    width: 100%;
    height: 98px;
    /* background-color: red; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 子元素水平居中 */
}

#szbt{
    width: 15%;
    height: 95px;
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    font-size: 18px;         /* 设置文字大小 */
    color: #333;             /* 可选文字颜色 */
    border-top: 2px solid #080808;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;

}

#dyear{
    border-top: 2px solid #080808;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    /* border-right: 2px solid #fff; */


}
#dmonth{
    border-top: 2px solid #080808;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    /* border-right: 2px solid #020202; */
}
#dday{
    border-top: 2px solid #080808;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    /* border-right: 2px solid #020202; */
}
#dhour{
    border-top: 2px solid #080808;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    border-right: 2px solid #020202;
}

.bzd{
    width: 20%;
    height: 95px;
    
    /* background-color: blue; */
    /*display: flex;           开启弹性布局 */
    /*justify-content: center;  子元素水平居中 */
    /* border: 1px solid #fff; 这里设置边框，颜色和宽度可调 */
}

.sbt{
    width: 100%;
    height: 40%;
    border-bottom: 2px solid #0f0f0f;
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    font-size: 18px;         /* 设置文字大小 */
    color: #333;             /* 可选文字颜色 */
    
}

#nt,#yt,#rt,#st{
    
    position: absolute;
    padding-top: px;       /* 可调节下方间距 */
    /* background-color: darkblue; */

}
#nd,#yd,#rd,#sd{
    position: absolute;
    padding-top: 20px;       /* 可调节下方间距 */
    /* padding-bottom: 10%;       可调节下方间距 */
    /* background-color: red; */


}

.sdata{
    position: relative;
    width: 100%;
    height: 55%;
    /* border-bottom: 2px solid #0f0f0f; */
    display: flex;           /* 开启弹性布局 */
    /*  justify-content: center; 垂直居中 */
    align-items: center;    /* 水平居中 */

    font-size: 18px;         /* 设置文字大小 */
    color: #333;           /* 可选文字颜色 */

    
    flex-direction: column;    /* 上下排列 */
            /* 每行文字间距，可调整 */

}



/* 空亡 */

#kongw{
    width: 100%;
    height: 25px;
    /* background-color: green; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center;/*   水平居中 */
    /* align-items: center;     垂直居中*/
    

}


#kwbt{
    width: 15%;
    height: 100%;
    /* background-color: yellow; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    font-size: 18px;         /* 设置文字大小 */
    color: #333;             /* 可选文字颜色 */
    /* border-top: 2px solid #080808; */
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
}

.kwdz{
    width: 20%;
    height: 100%;
    /* background-color: blue; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center;  /* 子元素水平居中 */
    /* border-top: 2px solid #080808; */
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
}

#sk{
    /* border-top: 2px solid #080808; */
    border-bottom: 2px solid #0f0f0f;
    border-right: 2px solid #0a0a0a;
}

#zhishi{
    width: 100%;
    height: 25px;
    /* background-color: red; */
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    font-size: 18px;         /* 设置文字大小 */
}

#jqbt{

    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    font-size: 18px;         /* 设置文字大小 */

    width: 15%;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
}

#jq{


    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    font-size: 18px;         /* 设置文字大小 */

    /* width: 80% + 2px; */
    width: calc(80% + 6px);
    border-right:2px solid #0f0f0f;
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;

}

#xjzsm{
    width: 100%;
    height: 50px;
    /* background-color: red; */
    /* display: flex;           开启弹性布局 */
    /* justify-content: center; 水平居中 */
    /* align-items: center;     垂直居中 */
    
    font-size: 18px;         /* 设置文字大小 */
}

#xjbt{
    width: 100%;
    height: 25px;
    /* background-color: yellow; */


    display: flex;        /*    开启弹性布局 */
    justify-content: center;    /*水平居中*/
    align-items: center;  /*   垂直居中 */


}




.scx{
    width: 15%;
    height: 100%;
    /* background-color: yellow; */
    /* border-right:2px solid #0f0f0f; */
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    display: flex;        /*    开启弹性布局 */
    justify-content: center;    /*水平居中*/
    align-items: center;  /*   垂直居中 */

}


.xzmm{
    width: 20%;
    height: 100%;
    /* background-color: blue; */
    border-bottom: 2px solid #0f0f0f;
    border-left: 2px solid #0a0a0a;
    display: flex;        /*    开启弹性布局 */
    justify-content: center;    /*水平居中*/
    align-items: center;  /*   垂直居中 */


}
#mxd1,#mxd{
     border-right: 2px solid #0a0a0a;
}














#xjbtd{
    width: 100%;
    height: 25px;
    /* background-color: yellow; */


    display: flex;        /*    开启弹性布局 */
    justify-content: center;    /*水平居中*/
    align-items: center;  /*   垂直居中 */

    
}

















.gcs{
    width: 130px;
    height: 130px;
    /* background-color: yellow; */
    display: flex;                    /* 开启弹性布局 */
    flex-direction: row;              /* 横向排列（默认就是 row） */
    border: 0px solid black;   /* 添加边框：2px 宽，实线，黑色 */

}


.an{
    width: 15px;
    height: 100%;
    /* background-color: aqua; */
    display: flex;                  /* 关键！必须开启 flex */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    font-size: 15px;                /* 文字大小，可自行调整 */
    font-weight: 350;               /* 加粗 */
    /* background-color: #080808; */

}




.sxm{

    width: calc((100% - 15px)/2 + 5px);
    height: 100%;
    background-color: rebeccapurple;


}


.skdiv{
    height: 10px;

}

.shen{
    width: 100%;
    height:calc(calc(100% - 10px)/4 + 5px ) ;
    /* background-color: aliceblue; */
   
    display: flex;                  /* 关键！必须开启 flex */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    font-size: 18px;                /* 文字大小，可自行调整 */
    font-weight: 500;               /* 加粗 */

    background-color: red;

}



.xing{
    width: 100%;
    height:calc(calc(100% - 30px)/2 ) ;
    background-color: rgb(9, 47, 80);
    

}

.xclass{
  
    align-items: center;             /*  垂直居中 */
    justify-content: center;          /* 水平居中 */

    height: 50%;                    /* 每个占一半高度 */
    display: flex;                  /* 关键！必须开启 flex */
    /*align-items: center;             垂直居中 */
    justify-content: center;        /* 水平居中 */
    font-size: 18px;                /* 文字大小，可自行调整 */
    font-weight: 500;               /* 加粗 */
    padding: 0;                    /* 移除所有内边距 */
    margin: 0;
    line-height: 1;                /* 关键：让文字上下更紧凑 */
    

}


.men{
    width: 100%;
    height:calc(calc(100% - 10px)/4 + 5px );
    /* background-color: rgb(130, 177, 218); */
    margin-top: px;
    display: flex;                  /* 关键！必须开启 flex */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    font-size: 20px;                /* 文字大小，可自行调整 */
    font-weight: 500;               /* 加粗 */

}


.tdg{
    height: 100%;
    width:calc((100% - 15px)/2 - 5px) ;
    /* background-color: #020202;    */
}



.gzsk{
    width: 100%;
    height: 40%;
    display: flex;           /* 开启弹性布局 */
    flex-direction: row;     /* 横向排列（默认就是 row，可以省略） */
    
    

}

.gzsk1{
    width: 20%;
    height: 100%;

    

}

.gzsk2{

    width: 80%;
    height: 50%;
    /* background-color: #333; */
    display: flex;           /* 开启弹性布局 */
    flex-direction: row;     /* 横向排列（默认就是 row，可以省略） */
    justify-content: flex-start; /* 水平起点对齐，改成 center 可居中 */
    align-items: center;     /* 垂直方向居中子元素 */
    
}

.mk{
    width: 50%;
    height: 100%;
    /* background-color: gold; */
}


.tian{
    /* margin-top: 30px; */
    display: flex;                    /* 开启弹性布局 */
    flex-direction: row;              /* 横向排列（默认就是 row） */
    width:100%;
    height: 30%;
    /* background-color: black; */
    /* align-items: center;              垂直居中 */
    justify-content: center;          /* 水平居中 */

}

.tian1{
    width: 50%;
    height: 100%;
    /* background-color: brown; */
}
.tian2{
    width: 50%;
    height: 100%;
    /* background-color: aqua; */
}




.cszt{
    font-size: 8px;           /* 修改这里调整大小 */
    font-weight: 350;         /* 可选：加粗 */
    /* color: #333;               可选：文字颜色 */
    width: 100%;
    height: 8px;
    text-align: center;        /* 左右居中（水平居中） */
    display: flex;
    align-items: center;       /* 垂直也居中（推荐） */
    justify-content: center;   /* 水平居中 */
}

.gdzt{
    width: 100%;
    height: 20px ;
    font-size: 18px;           /* 修改这里调整大小 */
    text-align: center;        /* 左右居中（水平居中） */
    display: flex;
    align-items: center;       /* 垂直也居中（推荐） */
    justify-content: center;   /* 水平居中 */
}




.di{
    
    display: flex;                    /* 开启弹性布局 */
    flex-direction: row;              /* 横向排列（默认就是 row） */
    width:100%;
    height: 30%;
    /* background-color: rgb(240, 234, 234); */

    /* margin-top: 30px; */

    /* align-items: center;              垂直居中 */
    justify-content: center;          /* 水平居中 */

}

.di1{
    width: 50%;
    height: 100%;
    /* background-color: rgb(19, 72, 94); */
}
.di2{
    width: 50%;
    height: 100%;
    /* background-color: rgb(185, 19, 74); */
}







#dae{
    width: 100%;
    height: 200px;
    background-color: rgb(14, 2, 83);
}





#container {
  width: 422px;
  height: 422px;
  display: flex;
  flex-wrap: wrap;           /* 自动换行 */
  border: 1px solid black;   /* 九宫格外围边框 */
}


#ssws{
    height: 10px;
}






#gwb{
    width: 430px;
    height: 430px;
    display: none;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    /* background-color: yellow; */
    position: relative;

}


.sedz{
    position: absolute;

}
#dzz{
    /* top: 0px;     */
    left: calc(50% - 10px);
    bottom:-5px;
}
#dzc{
    left: calc(20% - 10px);
    bottom:-5px;

}
#dzy{
    left: 0;
    bottom: calc(20% - 10px);


}
#dzm{
    left: 0;
    bottom: calc(50% - 10px);

}


#dzch{

    left: 0;
    bottom: calc(80% - 10px);

}


#dzs{
    top: -5px;
    left: calc(20% - 10px);
    
}


#dzw{
    top: -5px;
    left: calc(50% - 10px);
}


#dzwi{
    top: -5px;
    left: calc(80% - 10px);
}


#dzsh{
    top:calc(20% - 10px) ;
    right: 0;
}


#dzyo{
    top:calc(50% - 10px) ;
    right: 0;
}


#dzx{
    top:calc(80% - 10px) ;
    right: 0;
}


#dzh {
    left: calc(80% - 10px);
    bottom:-5px;
}






#grid-container {
  display: none; /* 初始隐藏，后续通过 JavaScript 显示 */
  grid-template-columns: repeat(3, 130px);  /* 三列，每列130px */
  grid-template-rows: repeat(3, 130px);     /* 三行，每行130px */
  gap: 0;                                 /*   格子间距，如果想留白可以设置大于0 */
  justify-content: center;                  /* 整个九宫格水平居中页面 */
  align-content: center;                    /* 整个九宫格垂直居中页面 */
  padding: 0px;                            /* 可选：外围留白 */
}

.cell {
  width: 130px;                  /* 固定宽度 */
  height: 130px;                 /* 固定高度 */
  border: 2px solid black;      /* 边框在外面 */
  box-sizing: content-box;     /*  边框不占格子内容尺寸 */
  display: flex;
  justify-content: center;       /* 水平居中内容 */
  align-items: center;           /* 垂直居中内容 */
  font-weight: bold;
  /* font-size: 20px; */
  background-color: #f0f0f0;     /* 可选：背景色 */
}











#dwnl1{
    display:none;
}
















































.main-container1 {
    /* margin-left: 2%; */
    max-width: 95%;
    margin: 0px auto;
    padding: 0px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    font-family: "Segoe UI", sans-serif;
}

.panel1 {
    position: relative;
}

/* Tabs */
.tabs1 {
    display: flex;
    margin-bottom: 0px;
    border-bottom: 1px solid #d3b87f;
}
.tab1{
    flex: 1;
    text-align: center;
    padding: 0px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: bold;
    color: #7a5e3d;
    transition: all 0.3s ease;
}
.tab1.active1 {
    border-color: #a67c52;
    color: #a67c52;
}

/* 表单容器居中 */
#wnl1 {
    width: 95%;
    display: flex;
    justify-content: center; /* 水平居中 */
    position: relative;
}

.form-wrapper1 {
    margin-left: 5%;
    position: relative;
    width: 100%;
    height: 70px;
}

/* 表单重叠显示 */
.form-container1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.form-container1.active-form1 {
    opacity: 1;
    pointer-events: auto;
}

.form-row1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18%;
}

.sjz1 {
    margin-bottom: 5px;
    font-size: 16px;
    color: #7a5e3d;
}

.inp1 {
    width: 93%;
    padding: 6px;
    border: 1px solid #d3b87f;
    border-radius: 8px;
    background: rgba(255, 250, 240, 0.8);
    text-align: center;
    font-size: 16px;
    color: #5c4a31;
}



.inp1:focus {
    outline: none !important; /* 强制去掉虚线 */
    box-shadow: 0 0 8px rgba(166,124,82,0.4); /* 可选聚焦光晕 */
}





.button-row1 {
    display: flex;
    flex-direction: column; /* 上下排列 */
    align-items: center;    /* 水平居中 */
  
}


#bl{
    display: flex;           /* 弹性布局 */
    flex-direction: row;     /* 横向排列，默认就是 row，可省略 */
    justify-content: flex-start; /* 水平起点对齐，可改为 center / space-between */
    align-items: center;     /* 垂直居中对齐子元素 */
    gap: 10px;              
    width: 100%;
}


#subjianxi {
    width: 100%;   /* 可以让间隔撑开，也可以不用 */
    height: 1px;   /* 不显示 */
}

.submit-btn1 {
    margin: 2px 0;
    width: 100%;  /* 固定宽度 */
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(to right, #d9b382, #a67c52);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn1:hover {
    background: linear-gradient(to right, #a67c52, #d9b382);
    transform: translateY(-2px);
}




#rqjz{


    display: none;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
    /* align-items: center;           垂直居中（推荐） */
    justify-content: center;        /*水平居中 */
}


#qimenwbx{
    width:95% ;
    max-width: 860px;
    aspect-ratio: 1 / 1;
    background-color: #020202;
    

}


#sje{
    width: 100%;
    /* aspect-ratio: 3 / 1; */
    height: calc((100% - 30px)  / 3 + 15px);
    background-color: rgb(232, 232, 33);

    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
    /* align-items: center;           垂直居中（推荐） */
    /*justify-content: center;        水平居中 */
}

#sdzc{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}





#g4s{
    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #d9b382;
}

#sdzs{
    
    width: 100%;
    height: 15px;
    background-color: coral;
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */

}

/* box-sizing: border-box;
border-bottom: 2px solid red; */

#g4{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */



}






#g9s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;
}

#dzwu{
    width: 100%;
    height: 15px;
    background-color: rgb(236, 194, 179);
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}




#g9{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */



}


#g2s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;
}


#g2{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
}

#dzwei{
    width: 100%;
    height: 15px;
    background-color: rgb(230, 219, 215);
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}




#sdzshen{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}




#swq{
    width: 100%;
    height: calc((100% - 30px)  / 3);
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
    /* align-items: center;           垂直居中（推荐） */
    /*justify-content: center;        水平居中 */
    background-color: rgb(242, 242, 165);
}

#sdzmao{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */

    writing-mode: vertical-rl;
    text-orientation: mixed;

    overflow: hidden;

}


#g3s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;

}

#g3{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */

}



#g5s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;

}

#g5{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */

}


#g7s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;

}

#g7{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */

}

#sdzyou{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */

}

#sdzyin{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */

}




#byl{
    width: 100%;
    /* aspect-ratio: 3 / 1; */
    height: calc((100% - 30px)  / 3 + 15px);
    background-color: rgb(232, 232, 33);

    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
    /* align-items: center;           垂直居中（推荐） */
    /*justify-content: center;        水平居中 */
}



#g8s{
    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #d9b382;
}

#sdzchou{
    
    width: 100%;
    height: 15px;
    background-color: coral;
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */

}

/* box-sizing: border-box;
border-bottom: 2px solid red; */

#g8{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */



}













#g1s{
    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #d9b382;
}



/* box-sizing: border-box;
border-bottom: 2px solid red; */

#g1{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */



}


#dzzi{
    width: 100%;
    height: 15px;
    background-color: rgb(236, 194, 179);
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}







#g6s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;
}


#g6{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
}

#dzwei6{
    width: 100%;
    height: 15px;
    background-color: rgb(230, 219, 215);
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}






#g6s{

    width: calc( calc(100% - 30px)/3 ) ;
    height: 100%;
    background-color: #e28915;
}


#g6{
    box-sizing: border-box;
    border-left: 1px solid rgb(6, 6, 6);
    border-top:  1px solid rgb(6, 6, 6);
    width: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: #fff; */
    display: flex;                 /* 开启弹性布局 */
    flex-direction: row;           /* 横向排列（默认就是 row，可省略） */
}

#dzhai{
    width: 100%;
    height: 15px;
    background-color: rgb(230, 219, 215);
    font-size: 12px;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}




#dzxu{
    font-size: 12px;
    width: 15px;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center; /* 左右居中 */
    align-items: center;     /* 上下居中 */
}