/* dialog */

.service-dialog,
.data-dialog {
    /* max-width: 144rem; */
    width: 100%;
    /* height: 32.2rem;*/
    /* padding: 0 10rem; */
    background: #ffffff;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* display: none; */
    /* display: block; */
    /* 改为 block，用 opacity/transform 控制显隐（更灵活） */
    opacity: 0;
    transform: translateY(-1rem);
    transition: all 0.3s ease;
    /* 合并 opacity、transform、width 等过渡 */
    visibility: hidden;
    /* 防止未动画时闪现 */
    position: absolute;
    top: 5rem;
    /* left: 0; */
    left: 50%;
    transform: translateX(-50%) !important;
}

.nav-project:hover .service-dialog,
.service-dialog:hover,
.data-project:hover .data-dialog,
.data-dialog:hover {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.nav-project:not(:hover) .service-dialog,
.data-project:not(:hover) .data-dialog {
    /* 鼠标离开父元素且未悬停在对话框上时，延迟隐藏 */
    transition-delay: 0.3s;
    /* 等待 0.3 秒再执行隐藏动画 */
    opacity: 0;
    transform: translateY(-1rem);
}

.nav-project>svg,
.data-project>svg,
.nav-project>span,
.data-project>span {
    display: inline-block;
    transition: transform 0.3s ease;
    /* SVG 旋转过渡效果 */
}
#icon-arrow-down-s-line {
    transform: rotate(0deg);
}

.nav-project:hover>svg,
.data-project:hover>svg,
.nav-project:hover #icon-arrow-down-s-line,
.data-project:hover #icon-arrow-down-s-line {
    display: inline-block;
    transform: rotate(180deg);
}

/* .service-dialog >img,
.data-dialog >img {
    width: 25.8rem;
    height: 25.8rem;
    aspect-ratio: 1/1;
    position: absolute;
    left: 0rem;
    top: 0rem;
    opacity: 0.5;
    background: #F9F9FB;
    z-index: -1;
} */

.service-context {
    /* width: 38.5rem; */
    display: flex;
    padding: 40px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.33rem;
    align-self: stretch;
    background: #F9F9FB;
    position: relative;
}

.service-context img {
    position: absolute;
    left: 0;
    bottom: 0;
    aspect-ratio: 1/1;
    opacity: 0.5;
}

.service-context>p:first-child {
    color: #000;
    font-family: "PingFang SC";
    font-size: var(--text-fontse-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.service-context>p:last-of-type {
    /* margin-left: 10rem; */
    color: #000;
    font-family: "PingFang SC";
    font-size: var(--text-fontse-14);
    font-style: normal;
    font-weight: var(--font-weight-300);
    line-height: normal;
    opacity: 0.5;
}

.service-menu {
    flex: 1;
    display: flex;
    display: flex;
    padding: 3.33rem 4rem;
    align-items: flex-start;
    gap: 2rem;
    flex: 1 0 0;
}

.service-menu-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* width: 25.8rem; */
}

.data-dialog .service-menu-item {
    /* width: 19.4rem; */
}

.service-menu-item>p {
    margin-bottom: 2rem;
    color: #000;
    font-family: "PingFang SC";
    font-size: var(--text-fontse-16);
    font-style: normal;
    font-weight: var(--font-weight-400);
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 0.83rem;
}

.service-menu-item>p:first-child,
.service-menu-item>p:hover a,
.service-menu-item>p:hover .icon-arrow-right {
    color: #ED6620;
}

.service-menu-item>p:first-child {
    cursor: auto;
}