/*设置为块级元素，因为行类元素不能改变高度、宽度、内外边距等属性
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
*/
/*页脚css*/
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
    /* margin-top: 65px; */
}

.fl-jus-center {
    display: flex;
    justify-content: center;
}

.bg-fff {
    background: #fff;
    border-radius: 0.2rem;
    /* width: 23.5%; */
}

#content #urlDiv {
    width: 52.08rem;
    height: 4.41rem;
    background: #FFFFFF;
    border-radius: 22px 22px 22px 22px;
    border: 2px solid #A2A2A2;
}

#content .url-search-box {
    display: flex;
    justify-content: center;
    /* margin-bottom: 3.8125rem; */
}

/* #downloadArea{
    margin-top: 3.8125rem;
} */

#content .url-search-box #urlInput {
    height: 100%;
    border-radius: 22px;
    border: 0px;
    padding-right: 20%;
    padding-left: 1.875rem;
    font-size: 1.41rem;
}

#content .url-search-box .jx-icon {
    position: absolute;
    left: 0.5rem;
    top: 35%;
    display: inline-block;
    width: 1.4775rem;
    height: 1.4775rem;
    z-index: 10;
}

#content .url-search-box .jx-btn {
    width: 20%;
    height: 4.41rem;
    background: #3F8BFE;
    border-radius: 22px 22px 22px 22px;
    position: absolute;
    right: -2px;
    top: -2px;
    font-size: 1.41rem;
    z-index: 10
}

#content .network-content {
    display: flex;
    flex-wrap: wrap;
    /* width: 63.75rem; */
    justify-content: space-between;
    padding: 0px;
    margin-top: 2.86rem;
}

#content .set-list {
    justify-content: space-between;
}

.nw-icon {
    display: inline-block;
    width: 90%;
    height: 1.875rem;
    margin-right: 5px;
}

.nw-icon-wrapper {
    display: inline-block;
    /* 或者 flex、inline-flex 取决于你要的效果 */
}

.nw-icon.icon {
    width: 4.64rem;
    height: 1.875rem;
}

.main-content {
    height: calc(100% - 65px);
}

#content #freqAaskedQuest {
    margin-top: 6.28125rem;
}

#content #freqAaskedQuest .freq-asked-quest {
    font-size: 2.0rem !important;
}

#content #freqAaskedQuest .tip {
    color: #8793AA;
    font-size: 0.75rem;
    margin-top: 1.03rem;
}

#content #freqAaskedQuest .quest-content {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0px;
    /* width: 85.0rem; */
    justify-content: space-between;
}

#content #freqAaskedQuest .quest-content a {
    color: #000 !important;
    text-decoration: none !important;
    padding: 0;
}

#content #freqAaskedQuest .quest-content .quest-item {
    display: flex;
    align-items: center;
    width: 25.25rem;
    height: auto;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    margin: 0 0 1.8125rem;
    padding: 0.75rem;
    text-align: left;
}

#content #freqAaskedQuest .quest-content .quest-item .title {
    font-size: 1.625rem;
    display: flex;
    /* align-items: center; */
    margin-bottom: 1.0rem;
}

#content #freqAaskedQuest .quest-content .quest-icon {
    display: inline-block;
    width: 1.9375rem;
    height: 1.9375rem;
    margin-right: 10px;
    margin-top: 4px;
}

.descript {
    color: #9E9E9E;
    font-size: 0.875rem;
}

.footer {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
}

/*全局css*/
.dropdown:hover .dropdown-menu {
    display: block;
}

p {
    text-indent: 0px;
    /* 设置段落首行缩进为20像素 */
}

/*设置去除所有a标签下划线*/
a {
    text-decoration: none
}

/*设置鼠标悬停背景颜色，并设置背景颜色圆角*/
.menu-item:hover {
    background-color: gainsboro;
    border-radius: 7%;
}

/*设置导航栏样式*/
#navigation {
    font-family: var(--theme-font-family);
    font-size: 14px;
    /*background-color: #20a0ff;*/
    height: 5.9375rem;
    /*border-bottom: 1px solid #cbc5c5;*/
    /* box-shadow: 0px 1px 10px #d2d1d1; */
}

/*设置导航栏字体颜色*/
#navigation a {
    color: #0a0a0a;
}

#navigationBar a {
    margin-left: 15px;
}

/*设置logo样式*/
#logo {
    padding-top: 8rem;
    /* 9.4375rem; */
}

#logo .inner-title {
    font-size: 1.406rem;
    font-weight: 500;
    margin-bottom: 2.86rem;
}

.main-container {
    background: url(./bg.png) no-repeat;
    background-size: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - 5.9375rem);
}



/*设置首页字体*/
@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.woff2) format("woff2"), url(../fonts/fontawesome-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

/*@font-face {*/
/*    font-family: 'FZZhengDaHeiJ';*/
/*    src: url('../fonts/FZZhengDaHeiJ.ttf') format('truetype');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

.main-container .logo-title {
    font-family: 'FZZhengDaHeiJ';
    font-size: 2.8125rem;
    /* font-weight: 600; */
}

/*解析按钮样式3e86ee*/
#downloadButton {
    height: 50px;
    border-radius: 30px;
    background-color: #3e86ee;
    border: 1px solid #3e86ee;
}

#batchAnalysis {
    height: 50px;
    border-radius: 6px;
    background-color: #3e86ee;
    border: 1px solid #3e86ee;
    width: 40% !important;
    margin: 0 30%;
}

/*输入框样式*/
#urlDiv {
    height: 50px;
}

/*底部小logo样式*/
.brand-log {
    width: 80%;
}

/*缩略图样式*/
.preview-image {
    width: 115%;
    border-radius: 3%;
}

/*设置h6字体*/
#set-list-bk h6 {
    font-weight: bold;
    color: black;
}

/*设置整个内容页样式*/
#main-content {
    margin-top: 8%;
}

/*设置预览的图片样式*/
#preview img {
    max-width: 300px;
    /* 最大宽度为父容器宽度 */
    min-width: 100px;
    /* 最小宽度为50像素 */
    max-height: 600px;
    min-height: 100px;
}

/*设置成功图标大小*/
#successIcon,
#failIcon {
    font-size: 40px;
}

#downloadSuccess,
#downloadFail span {
    font-size: 22px;
}

/*选择框样式*/
#results-display input[type="checkbox"] {
    width: 20px;
    /* 设置复选框的宽度 */
    height: 20px;
    /* 设置复选框的高度 */
}


.selected {
    border: 2px solid #3e86ee;
    /* 添加选中时的样式 */
}


/*调整小logo*/
#logoLink {
    /* margin-left: 5%; */
}

.login-register .btn-primary {
    background-color: #3F8BFE !important;
    border-color: #3F8BFE !important;
}

/*.navbar-toggler {*/
/*    border-color: #d90d0d;*/
/*}*/


/*页脚样式*/
#footerArea {
    font-size: 1.125rem;
    color: #d0cbcb;
}

#footerArea a {
    font-size: 1.125rem;
    color: #d0cbcb;
}

#footerArea p {
    font-family: "Poppins", sans-serif;
    font-size: 1.125rem;
}


/*导航下拉样式*/
#nav-drop-down {
    border: none;
    border-radius: 10px;
}

#navigation {
    position: relative;
    /* 或 absolute, fixed, sticky */
    z-index: 100;
}


/*设置列表组样式*/
.custom-list-group .list-group-item {
    background-color: #ffffff;
    /* 白色背景 */
    border: 1px solid transparent;
    /* 透明边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 浅色阴影 */
    border-radius: 10px;
    /* 圆角边框 */
    margin-bottom: 10px;
    /* 调整间距 */
}

.custom-list-group .list-group-item:hover {
    background-color: #f8f9fa;
    /* 鼠标悬停时背景色 */
}

.download_success {
    display: none;
    color: green;
}

@media (max-width: 575px) {
    .navbar-nav .dropdown-menu {
        position: absolute !important;
    }

    .main-container {
        background: url(./bg_app.png) no-repeat center;
        background-size: 100% 100%;
    }

    #logo {
        padding-top: 8rem;
    }

    #content .url-search-box .jx-btn {
        width: 30%;
    }

    #content .url-search-box #urlInput {
        padding-right: 30%;
    }

    #logo .inner-title {
        font-size: 1.03rem;
    }

    .main-container .logo-title {
        font-size: 2.25rem;
    }
}

.text-danger-self {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500 !important;
    font-size: 19px;
    color: #FF383C !important;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.text-success {
    color: #28a745 !important;
}

#batchParse #batchParseText::placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

#button-addon2 {
    background: #EEEEEE;
    border-radius: 0px 10px 10px 0px;
    border: 1px solid #C7C7C7;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    padding: 0 20px;
}

.custom-text-center {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 1rem;
}

#chooseButton .btn {
    background: #10B359;
    border-radius: 6px 6px 6px 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
    border: 1px solid #10B359;
    padding: 6px 20px;
}#promptText{
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
}
/* 8点圆形加载动画（小圆点版本） */
.spinner-dots-8-small {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
        margin-right: 10px;
}

.spinner-dots-8-small::before,
.spinner-dots-8-small::after,
.spinner-dots-8-small .dot {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #0881E3;
    /* 使用与text-info相同的颜色 */
    border-radius: 50%;
    transform-origin: 50% 50%;
    opacity: 0;
    animation: dots-8-fade 1.4s infinite ease-in-out both;
}

/* 8个小圆点的位置 - 圆形排列 */
.spinner-dots-8-small .dot:nth-child(1) {
    top: 0px;
    left: 12.5px;
        display: none;
    /* animation-delay: 0s; */
}

.spinner-dots-8-small .dot:nth-child(2) {
    top: 6px;
    left: 21.5px;
    /* animation-delay: 0.175s; */
}

.spinner-dots-8-small .dot:nth-child(3) {
    top: 15px;
    left: 25.5px;
    animation-delay: 0.35s;
}

.spinner-dots-8-small .dot:nth-child(4) {
    top: 24px;
    left: 21.5px;
    animation-delay: 0.525s;
}

.spinner-dots-8-small .dot:nth-child(5) {
    top: 28px;
    left: 12.5px;
    animation-delay: 0.7s;
}

.spinner-dots-8-small .dot:nth-child(6) {
    top: 24px;
    left: 3.5px;
    animation-delay: 0.875s;
}

.spinner-dots-8-small .dot:nth-child(7) {
    top: 15px;
    left: -0.5px;
    animation-delay: 1.05s;
}

.spinner-dots-8-small .dot:nth-child(8) {
    top: 6px;
    left: 3.5px;
    animation-delay: 1.225s;
}
.spinner-dots-8-small::before,
.spinner-dots-8-small::after,
.spinner-dots-8-small .dots {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #0881E3;
    /* 使用与text-info相同的颜色 */
    border-radius: 50%;
    transform-origin: 50% 50%;
    opacity: 0;
        left: 9px !important;
    top: 4.5px !important;
    animation: dots-8-fade 1.4s infinite ease-in-out both;
}



/* 动画效果保持不变 */
@keyframes dots-8-fade {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}
.downImg{
    width: 60px !important;
    height: 50px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.main-bng-cor{
    background: #edf2f8 !important;
}
/* 首页文案样式（替换原 logo 图片的文字区域） */
.hero-text {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a; /* 深色标题，更醒目 */
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.hero-subtitle {
  font-size: 1rem;
  color: #475569; /* 次级文字颜色 */
  line-height: 1.7;
  margin: 0;
}

/* 响应式调整，随屏幕增大而增大标题字号 */
@media (min-width: 576px) {
  .hero-title { font-size: 1.875rem; }
}
@media (min-width: 768px) {
  .hero-title { font-size: 2.125rem; }
}
@media (min-width: 992px) {
  .hero-title { font-size: 2.375rem; }
  /* 桌面端：导航菜单靠右对齐，缩小间距 */
  .navbar-nav.ml-auto {
    margin-left: auto;
    justify-content: flex-end;
    gap: 22px; /* 菜单之间的间距，可按需微调 */
  }
}
@media (min-width: 1200px) {
  .hero-title { font-size: 2.5rem; }
}
/* Section Heading above feature cards */
.feature-heading {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
  color: #0b1620; /* 与卡片标题深色一致 */
  margin: 40px 0 16px; /* 与图标区和卡片区间距 */
}

@media (max-width: 992px) {
  .feature-heading {
    font-size: 32px;
    margin: 28px 0 12px;
  }
}
.feature-block {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.feature-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.feature-desc {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}
/* 使用方法模块 */
.usage-section { margin-top: 40px; margin-bottom: 24px; }
.usage-heading { font-size: 36px; line-height: 1.3; font-weight: 800; text-align: center; color: #0b1620; margin: 8px 0 10px; }
.usage-subtitle { text-align: center; color: #64748B; font-size: 0.95rem; margin-bottom: 18px; }

.usage-card { background: #FFFFFF; border-radius: 12px; padding: 28px 22px 26px; text-align: left; border: 1px solid #eee; box-shadow: 0 8px 24px rgba(0,0,0,0.06); position: relative; }
.usage-card-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
.usage-card-desc { font-size: 0.95rem; color: #6b7280; margin: 0; }

/* 步骤数字圆徽 */
.usage-step-badge { position: absolute; top: -14px; left: 18px; width: 36px; height: 36px; border-radius: 50%; background: #3F8BFE; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 6px 16px rgba(63,139,254,0.35); }

@media (max-width: 992px) {
  .usage-heading { font-size: 30px; margin: 6px 0 8px; }
  .usage-card { padding: 24px 18px 22px; }
}