body {
    height: 24rem;
}
video {
    width: 100%; /* 视频宽度占据整个视口 */
    height: 100%; /* 根据宽度自动调整高度，保持原始宽高比 */
    position: fixed; /* 固定定位，使视频充满整个页面 */
    z-index: -1; /* 将视频放置在页面的背后，z-index设置为负值 */
}
 #ground{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: -1; /
} 

.full-background {
    /* Center the content */
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Take full size */
    height: 100vh;
    width: 100%;

    /* background: url('./image/1.png') center center / cover no-repeat; */
}
.parent {
    display: grid;
    /* grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 1fr repeat(2, 3fr); */  
    grid-template-columns: 9fr 8fr 3fr;
    grid-template-rows: 27% 40% 33%;
    grid-column-gap:  60px;
    grid-row-gap: 0px;
    position: relative;
    height: 100vh;
    width: 100%;
    

    
    }

    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; 
       
       }
    .div3 { grid-area: 1 / 3 / 2 / 4; }
    .div4 { grid-area: 2 / 1 / 3 / 2; }
    .mainbox { grid-area: 2 / 2 / 3 / 3;
        /* width:100%;*/
        height:100%; 
         background-color: rgba(136, 236, 123, 0);
        
        position: relative;
    }
    .div6 { grid-area: 2 / 3 / 3 / 4; }
    .div7 { grid-area: 3 / 1 / 4 / 2; }
    .div8 { grid-area: 3 / 2 / 4 / 3; }
    .div9 { grid-area: 3 / 3 / 4 / 4; }
    /* .mainbox{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        min-width:835px;
        width:55%;
        height:100px;
        margin:0 auto;
        display:flex;
        border: 13px solid #1b18c7;
        border-radius: 0px 0px 32px 32px;
        background-color: #e6e3ed;
        padding: 20px 20px;
    } */
    #renqibutton{ 
        /* position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%); */
        background: rgb(243, 3, 3);
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       margin-bottom: 10px;
    }
    #taifengbutton{ 
        /* position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%); */
        background: rgb(243, 3, 3);
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
    }
    #biaoyanbutton{ 
        /* position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%); */
        background: rgb(243, 3, 3);
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       
    }
    #result{ 
        /* width:100%; */
        height:100%;
        background-color: rgba(255, 0, 0, 0);
    
        display: none;
    }
 
    /* .list1{
        width:100%;
        height:100%;
        list-style: none;
        margin:0;
        padding: 0;
        display: grid;
        grid-template-columns: 25% 25% 25%;
        grid-column-gap: 10%;
        justify-items: center;
        align-items: center;
        margin-left:0%;
        list-style-type: none;
       

    } */

   #text1{
        position: absolute;
         top:40%; 
        left:50%; 
        transform: translate( -50%,-50%); 
        white-space: nowrap;
       /* text-align: center;  */
        font-size:4.5em;
        color:hsl(4, 97%, 49%);text-shadow:0 0 1px currentColor,
        /*highlight*/-1px -1px 1px hsl(0, 0%, 99%),0 -1px 1px hsl(0, 0%, 100%),1px -1px 1px hsl(0, 0%, 100%),
         /*light shadow*/1px 1px 1px hsl(0, 95%, 48%),0 1px 1px hsl(0, 0%, 100%),-1px 1px 1px hsl(0, 0%, 100%),
         /*outline*/-2px -2px 1px hsl(51, 91%, 55%),-1px -2px 1px hsl(51, 91%, 55%),0 -2px 1px
        hsl(51, 91%, 55%),1px -2px 1px hsl(51, 91%, 55%),2px -2px 1px hsl(51, 91%, 55%),2px -1px 1px
        hsl(51, 91%, 55%),2px 0 1px hsl(51, 91%, 55%),2px 1px 1px hsl(51, 91%, 55%),-2px 0 1px
         hsl(51, 91%, 55%),-2px -1px 1px hsl(51, 91%, 55%),-2px 1px 1px hsl(51, 91%, 55%),
    /*dark shadow*/2px 2px 2px hsl(0, 0%, 100%),1px 2px 2px hsl(0, 0%, 100%),0 2px 2px hsl(0, 0%, 100%),-1px 2px 2px hsl(0, 0%, 100%),-2px 2px 2px hsl(0, 0%, 100%)
    }
    #text2{
        position: absolute;
        top:55%;
        left:50%;
        white-space: nowrap;
        transform: translate(-50%, -55%);
        font-size:4.5em;
        color:hsl(4, 97%, 49%);text-shadow:0 0 1px currentColor,
        /*highlight*/-1px -1px 1px hsl(0, 0%, 99%),0 -1px 1px hsl(0, 0%, 100%),1px -1px 1px hsl(0, 0%, 100%),
         /*light shadow*/1px 1px 1px hsl(0, 95%, 48%),0 1px 1px hsl(0, 0%, 100%),-1px 1px 1px hsl(0, 0%, 100%),
         /*outline*/-2px -2px 1px hsl(51, 91%, 55%),-1px -2px 1px hsl(51, 91%, 55%),0 -2px 1px
        hsl(51, 91%, 55%),1px -2px 1px hsl(51, 91%, 55%),2px -2px 1px hsl(51, 91%, 55%),2px -1px 1px
        hsl(51, 91%, 55%),2px 0 1px hsl(51, 91%, 55%),2px 1px 1px hsl(51, 91%, 55%),-2px 0 1px
         hsl(51, 91%, 55%),-2px -1px 1px hsl(51, 91%, 55%),-2px 1px 1px hsl(51, 91%, 55%),
    /*dark shadow*/2px 2px 2px hsl(0, 0%, 100%),1px 2px 2px hsl(0, 0%, 100%),0 2px 2px hsl(0, 0%, 100%),-1px 2px 2px hsl(0, 0%, 100%),-2px 2px 2px hsl(0, 0%, 100%)
    }
    /* ul{
        list-style: none;
        display: block;
        margin-block-start:1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        
    } */
    /* @keyframes dropAnimation1 {
        0%{
			opacity: 1;
			transform: scale(.8);
			transform: translateY(10px);
			
		}
		100%{
			opacity: 1;
			transform: scale(1);
			transform: translateY(-10px);
		
		}
    } */
    .list {
        /* width:100%; */
        height:100%;
        list-style: none;
        margin:0;
        padding: 0;
        
    }
    
    /* .list {
        list-style-type: none;
        padding: 0;
       
    } */
    
    .item {
        height: 100%;
        /* width: 100%; */
        /* display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 75% 25%; */
         /* grid-column-gap: 20px;
        grid-row-gap: 20px; */
        /* justify-items: stretch;
        align-items: stretch;   */
        /* background-color: rgba(248, 98, 11, 0.5); */
        background-image: linear-gradient(to right, rgb(252, 1, 1,0), rgb(245, 191, 15,0));
         margin-bottom: 10px;
        padding: 10px; 
        border-radius: 5%; 
        	/* animation: huxi 1200ms ease-out infinite alternate; */
        opacity: 1;
        transition: all, 2s ,ease-in-out;  
        position: relative;
    }
   



     

     
    .picture{
        position: absolute;
        /* top: 50%; */
        left: 50%;
        transform: translate(-50%);
        color: rgb(5, 5, 5);
        border-radius:5%; 
        background-size:cover;
        /* width:100%; */
        height:100%; 
        text-align: center;
        box-sizing:border-box;/* 容器大小包括border和padding */
        padding: 0;
    }
     
    /* .mingz{ 
        width:100%;
        height:100%;
        position: relative;
    } */
     
    .resultname{
        width:100%;
        height:100%;
     
        color: #ff4921;
    font-family: 隶书;
        /* font:  sans-serif; */
        text-shadow:1px 0px #cd260f, 1px 2px #cd260f, 3px 1px #cd260f,
        2px 3px #cd260f, 4px 2px #cd260f, 4px 4px #cd260f;
		  
		   font-weight:500; 
		   /* text-shadow:1px 0px #aa1313, 1px 2px #a00606, 3px 1px #aa1313,
		            2px 3px #a00606, 4px 2px #aa1313, 4px 4px #a00606; */
		            /* 5px 3px #aa1313, 5px 5px #a00606, 7px 4px #aa1313; */
		            /* 6px 6px #a00606, 8px 5px #ff0000, 7px 7px #a00606,
		            9px 6px #ff0000, 9px 8px #a00606, 11px 7px #ff0000;                           */
         

       text-align: center; 
        font-size: 4em;
       
    }
   
    .name{ 
        height:100%;
        width: 100%;
    }
   
     
    #fixed{/* 固定容器 */
        position: fixed;
        right:0px;
        bottom: 50px;
        width:44px;
        height:89px;
    }
    .listtop{ 
        position: relative;
       
        height: 100%;
        width: 100%;
    }
    .drop-down{ 
        height: 100%;
        width: 100%;
        text-align: center;
    }
    .title{ 
        white-space: nowrap;
        position: absolute;
        top: 35%;
        height: 100%;
        text-align: center;
        width: 100%;
        color: #ff4921;
        font-size: 7em;
        /* font:  sans-serif; */
        font-family: 华文隶书;
		  
		   font-weight:600; 
           text-shadow:1px 0px #cd260f, 1px 2px #cd260f, 3px 1px #cd260f,
           2px 3px #cd260f, 4px 2px #cd260f, 4px 4px #cd260f,
           5px 3px #cd260f, 5px 5px #cd260f, 7px 4px #cd260f 
		   /* text-shadow:1px 0px #cd260f, 1px 2px #a00606, 3px 1px #cd260f,
           2px 3px #a00606, 4px 2px #aa1313, 4px 4px #a00606,
           5px 3px #aa1313, 5px 5px #a00606, 7px 4px #aa1313 */
		            /* 6px 6px #a00606, 8px 5px #aa1313, 7px 7px #a00606,
		            9px 6px #aa1313, 9px 8px #a00606, 11px 7px #aa1313 */

    }