.nav-area {display: flex;left: -362px; top: -244px;position: absolute;width:586px;gap: 3px;overflow: hidden;border-radius: 10px;}
.nav-area .area-item{background:#ffffffd6;height: 178px;border:1px solid #a9a9a9;position:relative;flex: 1;}
.nav-area .area-item:hover{background:#fff1f1d6;}
.nav-area .area-item::after{content:"";width:30px;height:30px;background:url(../img/icon-2.webp) no-repeat center;position:absolute; left: 12px;bottom:  0px;}
.nav-area .area-item img{width: 100%;}
.nav-area .area-item a{text-decoration:none;color:#333;display:block;transition:all 0.5s linear}

.nav-area .area-item p{margin:2px;padding-left:12px;font-size: 15px;}
.nav-area .area-item p:nth-child(4){color:#cc0000;font-weight:bold;}
.nav-area .area-item:nth-child(1){border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.nav-area .area-item:nth-child(3){border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.nav-area .active,
.nav-area .active:hover{background-color:#cc0000d4;font-weight:bold;color:#fff}
.nav-area .active a{color:#fff}

.nav-area .active p:nth-child(4){color:#fff}
.nav-area .active::after{right:18px;background:url(../img/icon-3.webp) no-repeat; background-size: 14px; background-position: 3px;}