/* 设置整个页面的样式 */

.body_main {

    height: 100%; /* 高度随浏览器高度 */
    width: 100%; /* 宽度随浏览器宽度 */
    background-image: url('../images/pic-bg.jpg');
    background-size: cover;  /*让背景图片覆盖整个元素 */
    background-position: center; /* 让背景图片居中显示 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-attachment: fixed; /* 鼠标滚动时背景图片保持不动 */    
    margin-bottom: 0; /* 清除 元素的底部外边距 */
    padding-bottom: 0; /* 清除  元素的底部内边距 */
    margin-top: 0; /* 清除 元素的底部外边距 */
    padding-top: 0; /* 清除  元素的底部内边距 */
    margin-left:0;
    padding-left:0;
}

.body_other{

    height: 100%; /* 高度随浏览器高度 */
    width: 100%; /* 宽度随浏览器宽度 */
    background-image: url('');
    background-size: cover;  /*让背景图片覆盖整个元素 */
    background-position: center; /* 让背景图片居中显示 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-attachment: fixed; /* 鼠标滚动时背景图片保持不动 */    
    margin-bottom: 0; /* 清除 元素的底部外边距 */
    padding-bottom: 0; /* 清除  元素的底部内边距 */
    margin-top: 0; /* 清除 元素的底部外边距 */
    padding-top: 0; /* 清除  元素的底部内边距 */
}

.menu-link_shouye{
    padding-left:5px;
}

a,
a:visited {
        color: black; /* 字体颜色为黑色 */
        text-decoration: none; /* 去除下划线 */
    }
    
    /* 设置鼠标悬停时链接的样式 */
a:hover {
        
    
    }

    .menu-link_shouye  a,
    .menu-link_shouye  a:visited {
        color: #FFFFFF;
    }

/* ... 浮动菜单样式 开始 ... */


/* 定义淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0; /* 初始透明度为 0 */
        transform: translateX(20px); /* 初始位置向下偏移 20px */
    }
    to {
        opacity: 1; /* 最终透明度为 1 */
        transform: translateY(0); /* 最终回到原始位置 */
    }
}

/* 为图片应用动画 */
.menu-logo {
    animation: fadeIn 1s ease-out forwards; /* 应用 fadeIn 动画，时长 1 秒，缓出效果，动画结束后保持最终状态 */
}

.outer-menu-container-2 {
    width: 100%; /* 宽度随浏览器宽度 */
    /*background-color: #69B04C;  背景颜色与现有菜单栏一致 */
    background-color: rgba(105, 176, 76, 0.8); /* 背景颜色与现有菜单栏一致 */
    border-bottom: 5px solid #F09317; /* 下边框颜色与现有菜单栏一致 */
    position: fixed; /* 固定定位，方便滚动时显示 */   
    top: 0;
    left: 0;
    z-index: 998; /* 确保在其他元素之上 */
    display: flex;
    justify-content: center; /* 让内部的菜单居中显示 */
}

/* 让 menu-bar-firstpage2 和 menu-bar-floatmenu2 显示在同一行 */
.menu-bar-firstpage2,
.menu-bar-floatmenu2 {
    display: inline-block;
    vertical-align: middle; /* 垂直居中对齐 */

}

/* 清除浮动，防止父元素高度塌陷 */
.menu-bar-float2 {
    width: 1440px; /* 宽度随浏览器宽度 */;
    margin: 0 auto; /* 水平居中 */;
    font-size: 0; /* 消除 inline-block 元素间的间隙 */
}

.menu-bar-float2 > * {
    font-size: 18px; /* 恢复子元素的字体大小 */
    
}
/* ... existing code ... */



.menu-bar-firstpage2 .menu-link {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    background-color: rgba(105, 176, 76, 0); /* 背景颜色与现有菜单栏一致 */
}

.menu-bar-firstpage2 .menu-link:hover {
    background-color: rgba(225, 150, 29, 0.5);
}

/* ... existing code ... */



/* 设置 menu-bar-firstpage2 层 div 的字体样式 */
.menu-bar-firstpage2 .menu-item {
    font-size: 18px;
    color: white;
    text-decoration: none; /* 去除链接下划线 */
}

/* 一级菜单样式 */
.menu-bar-floatmenu2 .main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
}

.menu-bar-floatmenu2 .main-menu .dropdown {
    float: left;
    
}

.menu-bar-floatmenu2 .main-menu .dropdown .menu-link {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    background-color: rgba(105, 176, 76, 0); /* 背景颜色与现有菜单栏一致 */
}

.menu-bar-floatmenu2 .main-menu .dropdown:hover .menu-link {
    background-color: rgba(225, 150, 29, 0.5);
}

/* 二级菜单样式 */
.menu-bar-floatmenu2 .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(225, 199, 136, 0.5);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.menu-bar-floatmenu2 .dropdown-content li {
    list-style-type: none;
}

.menu-bar-floatmenu2 .dropdown-content li .sub-link {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}

.menu-bar-floatmenu2 .dropdown-content li .sub-link:hover {
    background-color: rgba(225, 177, 88, 0.5);
}

.menu-bar-floatmenu2 .dropdown:hover .dropdown-content {
    display: block;
}
/*... 浮动菜单样式 结束... */



/* 第一条  欢迎  欢迎光临辽宁古生物博物馆网站----文字样式 */



/* 新增的 div2 样式 */
.new-top-container-2 {
    width: 100%;
    height: 40px;
    background-color: #F5F5F5;
   margin:0;

}

/* 新增的 div3 样式 */
.new-top-container-3 {
    width: 1440px;
    margin: 0 auto;

    height: 40px; /* 确保容器有高度 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 将子元素分别排列在容器的两端 */
    align-items: center; /* 垂直居中对齐子元素 */
}


/* 欢迎文字样式 */
.welcome-text {
    color: #949494;
    margin-left: 0px;
    padding-left: 15px; 
    
}

/* 右侧文字容器样式 */
.right-texts {
    display: flex;
    align-items: center;
  
   
}

/* 关于我们文字样式 */
.about-us {
    color: #333333;
    
}

/* 联系我们文字样式 */
.contact-us {
    color: #333333;
    margin-left: 60px;
    margin-right:0px;
    padding-right: 25px; 
}



/* 第二条  网站-logo 样式 */
.new-top-container-1{
    width: 100%;
    height:120px;
    background-color: #FFFFFF;

}
.inner-new-container-logo{
    width: 1440px;
     height: 120px; 
    margin: 0 auto;  
    background-color: #FFFFFF; 
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 将子元素分别排列在容器的两端 */
    align-items: center; /* 垂直居中对齐子元素 */
}
.new-logo {
/* 将子元素分别排列在容器的两端 */
   
}

/* 咨询热线文字样式 */
.hotline-text {
    float:right;
    color: #59A739;
    font-style: italic;
    margin-right: 0px; /* 可以根据需要调整右侧间距 */
    align-items: center; /* 垂直居中文字 */
    padding-right: 25px; 
}


/* 第三条  外层菜单容器样式 */
.outer-menu-container-1 {
    width: 100%; /* 宽度随浏览器宽度 */
    height:70px;
    background-color: #69B04C; /* 背景颜色与现有菜单栏一致 */
    border-bottom: 5px solid #F09317; /* 下边框颜色与现有菜单栏一致 */
    display: flex;
    justify-content: center; /* 让内部的菜单居中显示 */
    align-items: center; /* 垂直居中文字 */
}

/* 菜单栏样式 */
.menu-bar-fix {
    width: 1440px;
    height: 100%;
    background-color: #F09317;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    background-color: transparent; 
    border-bottom: none;
}
/* ... 固定菜单样式开始... */

/* ... existing code ... */

/* 一级菜单样式，包含首页链接 */
.menu-link {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    background-color: #69B04C;
}

.menu-link:hover {
    background-color: rgba(225, 150, 29, 0.5);
}

/* ... existing code ... */
/* 让 menu-bar-fix 内的元素水平排列 */
.menu-bar-fix {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

/* 去掉 ul 列表的默认样式 */
.menu-bar-fixmenu .wp-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* 让菜单项水平排列 */
}

/* 调整菜单项的样式 */
.menu-bar-fixmenu .wp-menu .menu-item {
    margin: 0;
}

/* 确保链接的显示方式 */
.menu-bar-fix .menu-link {
    display: inline-block;
    white-space: nowrap; /* 防止文字换行 */
}


/* 设置 menu-bar-fix 层 div 的宽度 */
.menu-bar-fix {
    width: 1440px;
}

/* 设置 menu-bar-firstpage 层 div 的字体样式 */
.menu-bar-firstpage .menu-item {
    font-size: 18px;
    color: white;
    text-decoration: none; /* 去除链接下划线 */
}

/* 一级菜单样式 */
.menu-bar-fixmenu .main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menu-bar-fixmenu .main-menu .dropdown {
    float: left;
}

.menu-bar-fixmenu .main-menu .dropdown .menu-link {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    background-color: #69B04C;
}

.menu-bar-fixmenu .main-menu .dropdown:hover .menu-link {
    background-color: rgba(225, 150, 29, 0.5);
}

/* 二级菜单样式 */
.menu-bar-fixmenu .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(225, 199, 136, 0.5);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.menu-bar-fixmenu .dropdown-content li {
    list-style-type: none;
}

.menu-bar-fixmenu .dropdown-content li .sub-link {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}

.menu-bar-fixmenu .dropdown-content li .sub-link:hover {
    background-color: rgba(225, 177, 88, 0.5);
}

.menu-bar-fixmenu .dropdown:hover .dropdown-content {
    display: block;
}

/* ... 固定菜单样式结束 ... */



/* 外层容器样式 */
.outer-slider-container {
    width: 100%; /* 宽度随浏览器宽度 */
    height: 500px; 
    background-color: #FFFFFF; /* 背景颜色为白色 */
    display: flex;
    justify-content: center; /* 让内部元素水平居中 */
}



/* 容器样式 */
.slider-container {
    width: 1440px; 
    height: 500px; 
    overflow: hidden;
    position: relative;
}

/* 图片列表样式 */
.slider {
    display: flex;
    width: 500%; /* 5 张图片，所以宽度为 500% */
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* 单张图片样式 */
.slide {
    width: 20%; /* 每张图片占总宽度的 20% */
    height: 100%;
}

/* 图片样式 */
/* 设置轮播图片的宽度和高度 */
.slide img {
    width: 1440px;
    height: 500px;
    /* 强制缩放图片，可能会导致图片变形 */
    object-fit: fill; 
}
/* 图片标题样式 */
/* 图片标题层样式 */
.image-title {
    width: 550px;
    height: 75px;
    background-color: rgba(0, 0, 0, 0.25); /* 黑色背景，透明度 25% */
    color: #ffffff;
    text-align: left;
    font-size: 20px;
    padding-left: 30px;
    margin-left: 200px;
    margin-bottom: 60px;
    position: absolute;
    bottom: 0; /* 标题层位于图片底部 */
    left: 0;
    display: flex;
    align-items: center; /* 垂直居中文字 */
}

/* 鼠标悬停时标题层的背景颜色 */
.image-title:hover {
    background-color:  rgba(105, 176,76, 0.25); /* 黑色背景，透明度 25% */
}

/* 导航按钮样式 */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}







