/*页面通用设置*/

:root {
    /*通用颜色*/
    --black:  rgb(0, 0, 0);
    --white:  rgb(255, 255, 255);
    /*文本样式*/
    --text_navagation: Calibri;
    --text_top_lab_name: Andale Mono;
    --box_logo: 40px;  /*github、youtube、bilibili图标大小*/

    --box_whole_px: 1050px;   /* 整个页面的高度 */
    --center_middle_box_height: 1020px;   /* 中间盒子的整体高度 */
    --box_bottom_top: 1000px;   /* 底部信息栏距离顶部的高度 */
 }

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.box_whole {
    background-color: rgba(0, 0, 0, 0); 
    width: 100%;
    height: var(--box_whole_px); /* 固定高度为2000px   初始是1500px*/   
    padding: 0px; /* 可选：设置内边距 */
    position: absolute; /* 设置定位属性为绝对定位 */
    top: 0px; /* 设置距离顶部的偏移量 */
    left: 0px; /* 设置距离左侧的偏移量 */
    margin: 0; /* 移除默认的外边距 */
}

/* --------------------------------1.顶部大盒子-------------------------------- */
.box_top {
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度占满父容器的宽度 */
    height: 6%; /* 高度占整个盒子的10% */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
}

/* -----------------1.1顶部导航----------------- */
.top_header {
    position: fixed; /* 固定定位 */
    top: 0px; /* 距离顶部0px */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%); /* 通过transform居中 */
    width: 1100px; /* 示例宽度 */
    height: 50px; /* 示例高度 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景颜色 */
    backdrop-filter: blur(10px); /* 玻璃模糊效果 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
    display: flex; /* 设置为flex容器 */
    justify-content: space-around; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 1000; /* 确保导航栏在最上层 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 添加底部边框，增强玻璃效果 */
}

.header_text{
    text-decoration: none; /* 移除下划线 */
    color: rgb(0, 0, 0);
    font-family: var(--text_navagation); /*设置字体*/
    font-size: 30px; /*设置字体大小*/
}

/*鼠标悬停顶部导航栏变成橙色*/
.header_text:hover{
    color: rgb(255, 123, 0);
}

/* -----------------1.2顶部标题栏----------------- */
.top_1 {
    position: absolute; /* 绝对定位 */
    top: 50px; /* 距离顶部0px */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%); /* 通过transform居中 */
    width: 1100px; /* 示例宽度 */
    height: 100px; /* 示例高度 */
    background-color: rgb(255, 255, 255); /* 示例背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
    display: flex; /* 设置为flex容器 */
    justify-content: space-around; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.top_logo{
    position: absolute;
    top: 0px;
    left: 10px;
    width: 100px;
    height: 100px;
}

.text_1{
    color: rgb(0, 0, 0);
    text-align: center;
    top: 0px; /*距离div高10px*/
    font-size: 48px; /*设置字体大小*/
    font-family: var(--text_top_lab_name); /*设置字体*/
    line-height: 1; /*行高*/
    font-weight: bold;

}


/* --------------------------------2.中间大盒子-------------------------------- */
.box_center {
    position: absolute; /* 绝对定位 */
    top: 50px; /* 距离顶部的偏移量为10% */
    width: 100%; /* 宽度占满父容器的宽度 */
    height: 100%; /* 高度占整个盒子*/
    background-color: rgba(0, 0, 0, 0); /* 背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
}

/* 居中的盒子 */
.center_middle {
    position: absolute; /* 绝对定位 */
    top: 0px; /* 距离顶部0px */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%); /* 通过transform居中 */
    width: 1100px; /* 示例宽度 */
    height: var(--center_middle_box_height); /* 示例高度 */
    background-color: rgba(0, 0, 0, 0); /* 示例背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: flex-start; /* 内容从顶部开始 */
    align-items: center; /* 水平居中 */
}

/* 地图与联系信息容器 */
.map_and_info {
    background-color: #00000000;
    width: 100%; /* 占据整个宽度 */
    max-width: 1100px; /* 最大宽度 */
    margin-top: 5px; /* 顶部间距 */
}

/* 地图盒子 */
.map_box {
    width: 100%; /* 占据整个宽度 */
    height: 300px; /* 地图高度 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 地图 iframe */
.map_box iframe {
    width: 100%; /* 占据整个宽度 */
    height: 100%; /* 占据整个高度 */
    border: 0; /* 移除边框 */
}

/* 联系信息 */
.contact_info {
    width: 500px;
    padding: 20px;
    background-color: #00000000;
}

.contact_info h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000000;
    text-align: left; /* 标题靠左对齐 */
}

.contact_info h3 {
    font-size: 20px;
    color: #222;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact_info p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 10px;
}

.contact_info a {
    color: #007bff;
    text-decoration: none;
}

.contact_info a:hover {
    text-decoration: underline;
}


/* --------------------------------3.底部大盒子-------------------------------- */
.box_bottom {
    position: absolute; /* 绝对定位 */
    top: var(--box_bottom_top); /* 距离顶部的偏移量为 */
    width: 100%; /* 宽度占满父容器的宽度 */
    height: 100px; /* 高度占整个盒子的10% */
    background-color: rgb(54, 54, 54); /* 背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
}

/* -----------------3.1居中的盒子----------------- */
.bottom_middle {
    position: absolute; /* 绝对定位 */
    top: 0px; /* 距离顶部0px */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%); /* 通过transform居中 */
    width: 1100px; /* 示例宽度 */
    height: 100%; /* 示例高度 */
    background-color: rgba(255, 255, 255, 0); /* 示例背景颜色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 可选：设置内边距 */
    display: flex; /* 设置为flex容器 */
    justify-content: space-around; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}


.bottom_text_1{
    color: rgb(255, 255, 255);
    text-align: center;
    top: 0px; /*距离div高10px*/
    font-size: 18px; /*设置字体大小*/
    font-family: STfangsong; /*设置字体*/
    line-height: 1.5; /*行高*/
    font-weight: bold;
}