/* ==========================================
   1. 基础样式重置 (Normalize + 自定义重置)
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 22px;
  font-weight: Alibaba PuHuiTi 2.0-55 Regular;
}

h3 {
  font-size: 46px;
}

/* 继承父元素字体样式，避免表单元素默认样式不一致 */
html {
  font-size: 16px;
  /* 基础字体大小，1rem = 16px */
  line-height: 1.5;
  /* 基础行高 */
  font-family: 'Arial', sans-serif;
  /* 系统无衬线字体，兼顾多平台 */
  color: #333;
  /* 基础文本颜色 */
  background-color: #fff;
  /* 基础背景色 */
  -webkit-text-size-adjust: 100%;
  /* 禁止iOS横屏时字体放大 */
  -ms-text-size-adjust: 100%;
}

/* 移除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 移除链接默认样式 */
a {
  color: #2c3e50;
  text-decoration: none;
  background-color: transparent;
  /* 移除点击时的背景色 */
}

a:hover {
  color: #ff6600!important;
  text-decoration: none;
}

/* 图片自适应 */
img {
  max-width: 100%;
  height: auto;
  border-style: none;
  /* 移除IE下图片边框 */
}

/* 表单元素样式统一 */
input,
button,
select,
textarea {
  font-family: inherit;
  /* 继承父元素字体 */
  font-size: inherit;
  line-height: inherit;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  background-color: #fff;
}

button {
  cursor: pointer;
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.2s;
}


button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

/* 表格样式重置 */
table {
  border-collapse: collapse;
  /* 合并边框 */
  width: 100%;
}

th,
td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  font-weight: bold;
  background-color: #f8f9fa;
}


/* ==========================================
     2. 常用工具类
     ========================================== */
/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 隐藏元素（仍可被屏幕阅读器读取） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 显示/隐藏元素 */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

/* 文本对齐 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* 浮动 */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

/* 间距工具类 */
.m-0 {
  margin: 0 !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 16px !important;
}

.mt-4 {
  margin-top: 24px !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pt-3 {
  padding-top: 16px !important;
}

.pt-4 {
  padding-top: 24px !important;
}


/* ==========================================
     3. 响应式基础设置
     ========================================== */
/* 断点定义（参考 Bootstrap） */
@media (max-width: 575px) {

  /* 中等屏幕（小桌面） */
  .container {
    width: 95% !important;

    max-width: 95% !important;
    ;
    margin: 0 auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 55px!important;
  }

  body {
    font-size: 24px;
  }

  .word {
    width: 100% !important;
  }

  .navbar-nav {
    margin-left: 0 !important;
  }

  .video {
    width: 462.4px;
    height: 334.4px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {

  /* 中等屏幕（小桌面） */
  .container {
    width: 95%!important;;
    max-width: 95%!important;;
    margin: 0 auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 55px!important;
  }

  body {
    font-size: 24px;
  }

  .word {
    width: 100% !important;
  }

  .navbar-nav {
    margin-left: 0 !important;
  }

  .video {
    width: 462.4px;
    height: 334.4px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  /* 中等屏幕（小桌面） */
  .container {
    width: 95%!important;;
    max-width: 95%!important;;
    margin: 0 auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 55px!important;
  }

  body,.text-base {
    font-size: 24px!important;
  }

  .word {
    width: 100% !important;
  }

  .navbar-nav {
    margin-left: 0 !important;
  }

  .video {
    width: 462.4px !important;
    height: 334.4px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {

  /* 大屏幕（桌面） */
  .container {
    width: 960px!important;
    margin: 0 auto;
    padding: 0 15px;
  }
}

@media (min-width: 1200px) {

  /* 超大屏幕（大桌面） */
  .container {
    width: 1140px!important;
    margin: 0 auto;
    padding: 0 15px;
  }
}

@media (min-width: 1320px) {

  /* 超大屏幕（大桌面） */
  .container {
    width: 1280px!important;
    margin: 0 auto;
    padding: 0 15px;
  }

  .col-md-5-5 {
    width: 45%;
  }
}
@media (min-width: 1536px) {

  /* 超大屏幕（大桌面） */
  .container {
    width: 1280px!important;
    margin: 0 auto;
    padding: 0 15px;
  }

  .col-md-5-5 {
    width: 45%;
  }
}

@media (min-width: 1000px) {

  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  
  .dropdown-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    display: block;
    visibility: hidden;
  }
  
  .navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}



/* ==========================================
     4. 全局动画
     ========================================== */
/* 淡入动画 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.flex {
  display: flex;
}
.nav-link:hover{
  text-decoration: none!important;
}
.nav-link span:hover {
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 3px solid #e8e8e9;
}

.header.fixed .nav-item>a:hover{
  text-decoration: none;
}
.header.fixed .nav-item>a span:hover {
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 3px solid #FF000B;
  color: #FF000B;
}
.header.fixed .nav-item.active>a span {
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 3px solid #FF000B;
  color: #FF000B;
}
.header .nav-item.active>a span {
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 3px solid #e8e8e9;
  color: #e8e8e9;
}
.Toggle{
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px 15px;
}
.dropdown-menu{
  padding: 20px 0;
}