/* 目录设置 */
 .wrap {
    position: relative;
    background: #ffffff;
    max-width: 100% ;
    height: 100vh;
    z-index: 3;
}
.table-context {
    height: 100%;
    width: 100%;
    position: relative;
}

.right {
    position: absolute;
    top: 50%; /* 设置元素顶部距离父元素顶部的距离为50% */
    right: 33%; /* 设置元素右边距离父元素右边的距离为50% */
    background-color: #33ff00;
    transform: translate(50%, -50%); /* 使用transform将元素向右移动自身宽度的一半，向上移动自身高度的一半 */
    max-width: 100%; /* 确保不超出父元素宽度 */
    max-height: 100%; /* 确保不超出父元素高度 */
    overflow: hidden; /* 确保图片不溢出容器 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    /* 其余样式保持不变 */
}


.right img {
    width: auto; /* 设置图片的实际宽度 */
    height:90vh ; /* 根据宽度自适应高度 */
    display: block; /* 让图片作为块级元素 */
    margin: auto; /* 居中图片 */
}



.gif-image {
    width: 100%; /* 图片宽度与容器宽度相匹配 */
    height: 100%; /* 图片高度与容器高度相匹配 */
    object-fit: cover; /* 按比例填充容器 */
}

.left {
    padding-top: 12vh;
    height: 90%;
    transition: all 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    position: relative;
}
.titleArea {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0;
    margin-top: 0;
    transition: all 0.5s ease-in-out;
    background: linear-gradient(to bottom, rgb(255, 145, 0) 4px, transparent 4px);
}
.titleArea:hover {
    background: linear-gradient(to bottom,  rgb(255, 145, 0) 100%, transparent 100%); 
}
#t1{
    top: 15%;
    height: 30%;
}
#t2{
    top: 35%;
    height: 30%;
}
#t3{
    top: 60%;
    height: 30%;
}
.dropdown-content {
    position: relative;
    top: 4vh;
    left: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; /* 修改动画时间和速度曲线 */
    /* 移除阴影和其他装饰效果 */
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    max-height: 0; /* 初始时设置为0 */
    font-size: 2vw;
    display: inline-block;
    width: auto;
}
.dropdown-content a {
    width:auto;
    color: black;
    padding: 2vh 148px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.5s ease-in-out;
    font-variation-settings: "RONG" 0, "CHON" 0; 
   

}
.dropdown-content a:hover{
    font-size: 2vw;
    font-variation-settings: "RONG" 1000, "CHON" 0; 
    letter-spacing: 2px;
    text-decoration:underline;
    color: rgb(17, 255, 0)
}
.dropdown-content a:active {
    position: relative;
    transition: all 0.05s ease-in-out;
    font-variation-settings: "RONG" 1000, "CHON" 1000; 
    font-size: 3vw;
    letter-spacing: -5px;
}

/* .ad:hover {
    background-image: linear-gradient(to top, rgba(0, 255, 0, 0) 28%, rgb(215,215,215) 28%, rgb(215, 215, 215) 72%, rgba(0, 255, 0, 0) 72%);
} */


.title {
    position: relative;
    top: 24px;
    left: 86px;
    font-size: 2vw;
    font-variation-settings: "RONG" 0, "CHON" 0, "ROWT" 0; 
    color: black; /* Set default color to black */
    text-decoration: none; /* Remove default underline */
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    line-height: 0;
    letter-spacing: 0px;

}
.title:hover {
    position: relative;
    font-size: 2vw;
    font-variation-settings: "RONG" 1000, "CHON" 0, "ROWT" 350; 
    letter-spacing: 2px;
    text-decoration:underline ;
    color: rgb(17, 255, 0) 
}



.title:active {
    position: relative;
    transition: all 0.05s ease-in-out;
    font-variation-settings: "RONG" 1000, "CHON" 1000,"ROWT" 350; 
    line-height: 0;
    font-size: 3vw;
    letter-spacing: -5px;
    
}
/* 目录设置 */