/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* 字体 */
    user-select: none; /* 阻止用户选择文本 */
}


/* 页面主体样式 */
html, body {
    height: 100%; /* 确保 html 和 body 元素占满整个视口 */
}

body {
    line-height: 1.6;
    font-size: 16px;
    background: url(https://cdn.9ywk.com/2024/01/540fae10e13bc.png);
    /*background-color: #f4f4f4;*/
    color: #333;
    display: flex;
    flex-direction: column; /* 让内容区和底部垂直排列 */
}


/* 页面内容样式 */
main {
    flex: 1; /* 让内容部分占据剩余的空间 */
    padding: 0px 20px 20px 20px;
}


/* 定义计算结果动态效果 */
@keyframes highlight {
    0% { background-color: #28a745; } /* 起始颜色 */
    25% { background-color: #4caf50; } /* 中间颜色1 */
    50% { background-color: #00c853; } /* 中间颜色2 */
    75% { background-color: #4caf50; } /* 中间颜色3 */
    100% { background-color: #28a745; } /* 结束颜色 */
}

.highlight {
    animation: highlight 1s ease-in-out infinite;
}



    /* 计算结果图片自适应 */
#result1 img,#zxcda-zx img,#zxcdb-zx img,#resultXb img,#qjbresult img {
    width: 100%; /* 设置图片宽度 */
    height: auto; /* 让高度自适应 */
    /*border: 2px solid #000; /* 设置边框为2像素宽的黑色边框 */
    /*border-radius: 10px; /* 设置边框圆角为10像素 */
    display: block; /* 让图片显示为块级元素，以便设置宽度 */
    margin: 0 auto; /* 居中显示图片 */
}

.bbbbbolang {
    margin: 0!important;
    padding: 0!important;
    /* 设置背景图片 */
    background-image: url('https://cdn.9ywk.com/2024/02/2cea1f162b89d.svg');    /* 将背景图片置于底部 */
    background-position: bottom;    /* 设置背景图片不重复 */
    background-repeat: no-repeat;    /* 设置背景图片覆盖整个屏幕 */
    background-size: cover;    /* 让背景填满整个屏幕 */
    height: 20vh;
}

.title-img {
    position: relative;
    width: 88px; /*定义块元素区域*/
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.hover-img {
    position: absolute;
    display: none; /* 初始时隐藏悬浮图片 */
    max-width: 500px; /* 图片最大宽度 */
    max-height: 500px; /* 图片最大高度 */
    background-color: rgb(255 255 255 / 86%);
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin: 150% 0;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.titleh3:hover + .hover-img {
    display: block; /* 当鼠标悬浮在目标元素上时显示悬浮图片 */
}

.x2-background-svg {
    position: relative; /* 将容器设置为相对定位 */
    background-image: url('https://cdn.9ywk.com/2024/02/f3b9213b3fed8.svg')!important;
    background-size: 100px auto!important; /* 调整背景大小，宽高 */
    background-repeat: no-repeat!important; /* 防止背景图像重复 */
    background-position: right -2.8px top!important; /* 将背景图像定位在右上角 */
}

.x90-background-svg {
    position: relative; /* 将容器设置为相对定位 */
    background-image: url('https://cdn.9ywk.com/2024/02/850f07ded4c5c.svg')!important;
    background-size: 100px auto!important; /* 调整背景大小，宽高 */
    background-repeat: no-repeat!important; /* 防止背景图像重复 */
    background-position: right -2.8px top!important; /* 将背景图像定位在右上角 */
}

#tip {
    text-align: center; /* 将 #tip 内容水平居中 */
}

#tip h3,button {
    display: inline-block;
    text-align: center; /* 居中显示 */
}

#tip button {
    color: red;
    padding: 5px 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.tip_image img {
    width: 100%;
    height: auto;
}

.error {
    color: #fff; /* 黑色文字 */
    background-color: #000; /* 橙色背景 */
    text-align: center; /* 文本居中 */
    border-radius: 4px; /* 边框圆角 */
    padding-block: 10px;
    background-color: rgba(0,0,0,.6);
   /* margin-top: 50%; /* 上边距 */
   /* 使div弹出 */
    position: fixed; /* 固定定位 */
    top: 50%; /* 距离顶部50% */
    left: 50%; /* 距离左侧50% */
    transform: translate(-50%, -50%); /* 居中定位 */
    z-index: 1000; /* 高z-index确保在其他内容之上 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}


/* 初始状态隐藏工具二 */
#tool1b, #tool2 {
    display: none;
}

/* 模拟按钮样式 */
.tool-btn {
    cursor: pointer; /*表示鼠标可点击*/
    padding: 5px 10px;
    background-color: #c2c2c2;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    border-radius: 4px; /*边框圆角*/
}

.top-container {
    display: flex;
}

.selected-tool {
    background-color: #3498db;
    color: #fff;
}

img {
    pointer-events: none; /* 阻止鼠标事件，慎用 */
}


/* 顶部居中容器 */
.top-container {
    max-width: 700px; /* 设置容器最大宽度 */
    margin: 10px auto;  /* margin: 40px（上下），auto（左右）用于水平居中 */
    padding: 10px; /* 在容器内部添加20px内边距 */
    background: #fff;  /* 设置容器的背景颜色 */
    border-radius: 8px; /* 为容器添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*容器四周阴影*/
}

/* 居中容器 */
.container {
    max-width: 700px; /* 设置容器最大宽度 */
    margin: 20px auto;  /* margin: 40px（上下），auto（左右）用于水平居中 */
    padding: 20px; /* 在容器内部添加20px内边距 */
    background: #fff; /* 设置容器的背景颜色 */
    border-radius: 8px; /* 为容器添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*容器四周阴影*/
}
        


/* 标题样式 */
h3 {
    color: #2f363c;
    margin-bottom: 20px;
    text-align: center;
}

        /* 表单组样式 */
.form-group {
    margin: 1px 0; /*输入框上下间距*/
    margin-bottom: 15px;
}

/* 标签样式-输入框标题 */
.form-group span {
    display: block;
    margin-bottom: 5px;
    margin-right: 5px; /* 给文字右边添加一些间距 */
    font-weight: bold;
}

/* 输入框容器样式 */
.input-container {
    position: relative;
    width: 100%; /* 容器宽度 */
}
    

/* 输入框样式 */
input {
    padding: 5px;
    padding-right: 30px; /* 给清除按钮留出空间 */
    width: 100%;
    border: 1px solid #ccc; /* 输入框边框粗细及颜色 */
    border-radius: 4px; /*边框圆角*/
    font-size: 16px; /*输入框输入文字大小*/
    color: black;
    box-sizing: border-box; /* 确保padding不影响宽度 */
}
       
/* 禁用状态下的输入框样式 */
input:disabled {
    background-color: #f0f0f0; /* 更浅的背景色 */
    color: #888888; /* 修改文字颜色 */
    border: 1px solid #cccccc; /* 修改边框颜色 */
    opacity: 1; /* 确保不会被降低透明度 */
}


/* 清除按钮样式-由js控制 */
.clear-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 28px; /*大小*/
    color: #e26161; /*颜色*/
    display: none; /* 默认隐藏 */
}

/* 增加按钮的点击区域 */
.input-container .clear-btn::before {
    content: '';
    position: absolute;
    top: 7.5px;
    right: -10px;
    width: 35px; /* 增大点击区域宽度 */
    height: 30px; /* 增大点击区域高度 */
    /*background: transparent; /* 背景透明 */
    background: #0f0f0f85; /* 背景透明 */
    border-radius: 4px; /*边框圆角*/
}


/*表单内容同一行显示*/
.input-tonghang {
    display: flex;
    align-items: center; /* 确保文字和输入框在垂直方向居中 */
}

.input-tonghang span {
    white-space: nowrap; /* 禁止文字换行 */
}
  
  
/* 输入框点击后的样式 */
input:focus {
    outline: none; /* 移除默认的聚焦时的边框 */
    border-color: #3498db; /* 设置聚焦时的边框颜色 */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* 添加一些阴影效果 */
}       

/* 伪元素-输入框内提示文字 */
input::placeholder {
    font-size: 12px; /* 设置输入框提示字体大小 */
    color: #ccc; /* 设置输入框提示文字颜色为灰色 */
}        
       
       
/*qjia上下坡按钮*/    
.slope-btn {
    padding: 6px 12px;
    border-radius: 4px; /* 边框圆角 */
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    transition: 0.3s;
}

.slope-btn.selected {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}     
       
       
       
       
/* 角度按钮样式 */
.jd-an span {
    display: inline-block; /*2个标签内容同一个显示*/
}

.jd-an button {
    padding: 1px;
    margin-right: 10px; /*间距*/
    border: 1px solid #ccc; /*边框粗细及颜色*/
    border-radius: 4px; /*边框圆角*/
    cursor: pointer;
    background-color: #393e46;
    color: #fff;
}

.jd-an button:hover {
    background-color: #2980b9; /*点击颜色*/
}
        
        
        
        
/* 预选框样式 */
select {
    width: 50%;
    border: 1px solid #ccc; /* 输入框边框粗细及颜色 */
    border-radius: 4px; /*边框圆角*/
    font-size: 16px; /*输入框输入文字大小*/
    cursor: pointer; /* 鼠标悬停表明该元素可以被点击或交互 */
    background-color: #fff;
}

/* 预选框点击后的样式 */
select:focus {
    outline: none; /* 移除默认的聚焦时的边框 */
    border-color: #3498db; /* 设置聚焦时的边框颜色 */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* 添加一些阴影效果 */
}


        
        
/* 计算按钮样式 */
.calculate button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    /*background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);*/
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.calculate button:hover {
    background-color: #0056b3;
}




/* 结果显示样式 */
.result-container {
    margin-top: 10px;
    font-size: 18px;
    color: black;
}

.dinwei {
    /*position: relative; /* 将容器设置为相对定位,此行放在父元素内。与.dinwei关联 */
    position: absolute;
    right: 0px;
    top: 0px;
  /* z-index: -1; */
}














/* 导航栏样式 */
#navtop {
    margin-top: 60px; /*给导航栏留出空间*/
}

nav {
    background-image: linear-gradient(120deg, #232526, #414345);
    padding: 10px 0;
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 确保导航栏在其他内容之上 */
    transition: top 0.3s ease; /* 为导航栏位置变化添加过渡效果 */
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: block;
    white-space: nowrap;
}

nav ul li a.active {
    background-color: #555; /* 当前页面的背景颜色 */
    color: #ffcc00; /* 当前页面的字体颜色 */
}

nav ul li a:hover {
    background-color: #555;
}



/* 底部样式 */
footer {
    background-color: #333;
    color: #9f9f9f;
    text-align: center;
    padding: 10px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav ul {
        justify-content: space-around;
    }

    nav ul li {
        margin: 0 5px;
    }

    nav ul li a {
        padding: 10px 10px;
        font-size: 14px;
    }
}

/* 左右排序容器 */
.LR-container {
    display: flex;
    align-items: flex-start;
    width: 100%; /* 确保父容器占满宽度 */
}

.left {
    flex: 5; /* 左边占4份（40%） */
    margin-right: 10px; /* 右边间距 */
}

.right {
    flex: 5; /* 右边占6份（60%） */
}


/*计算结果和公式 同一行显示*/

.results-mathjax {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
}

.results-mathjax h5 {
    margin-left: 10px; /* 为h5添加左边距，避免贴近p */
}