/**
 * Base Styles - 公共样式文件
 * 成都音泰思广告传媒有限公司
 * 包含：字体定义、CSS变量、CSS重置、通用工具类
 * 版本：2.0
 * 更新日期：2026-02-07
 */

/* ==================== CSS变量定义 ==================== */
:root {
   /* 主题色 */
   --color-primary: #00c3ff;
   --color-primary-dark: #0099cc;
   --color-primary-light: #e8f8ff;

   /* 文字颜色 */
   --color-text: rgba(42, 42, 42, 1);
   --color-text-light: #666;
   --color-text-lighter: #999;
   --color-text-dark: #292929;

   /* 背景色 */
   --color-bg: #fff;
   --color-bg-gray: #f8f9fa;
   --color-bg-dark: #2c3e50;

   /* 边框颜色 */
   --color-border: #eee;
   --color-border-light: #f0f0f0;

   /* 字体大小 */
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 24px;
   --font-size-2xl: 28px;
   --font-size-3xl: 36px;

   /* 间距 */
   --spacing-xs: 5px;
   --spacing-sm: 10px;
   --spacing-md: 15px;
   --spacing-lg: 20px;
   --spacing-xl: 30px;
   --spacing-2xl: 40px;
   --spacing-3xl: 50px;
   --spacing-4xl: 60px;
   --spacing-5xl: 80px;

   /* 圆角 */
   --radius-sm: 5px;
   --radius-md: 10px;
   --radius-lg: 25px;
   --radius-full: 50%;

   /* 阴影 */
   --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.15);
   --shadow-primary: 0 2px 10px rgba(0, 195, 255, 0.3);
   --shadow-primary-lg: 0 5px 20px rgba(0, 195, 255, 0.5);

   /* 过渡 */
   --transition-fast: all 0.2s ease;
   --transition: all 0.3s ease;
   --transition-slow: all 0.5s ease;

   /* 断点 */
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;

   /* 容器宽度 */
   --container-sm: 540px;
   --container-md: 720px;
   --container-lg: 960px;
   --container-xl: 1200px;
   --container-2xl: 1400px;
}

/* ==================== 字体定义 ==================== */
@font-face {
   font-family: "AlibabaPuHuiTi";
   src: url("../fonts/SourceHanSans-Normal.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   /* 优化字体加载性能 */
}

/* ==================== CSS Reset ==================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: "AlibabaPuHuiTi", "Microsoft Yahei", "Hiragino Sans GB", sans-serif;
   line-height: 1.6;
   color: var(--color-text);
   font-size: var(--font-size-md);
   overflow-x: hidden;
   background-color: var(--color-bg);
}

/* 确保所有元素继承字体 */
input,
button,
textarea,
select {
   font-family: inherit;
   font-size: inherit;
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

ul,
ol {
   list-style: none;
}

/* ==================== 通用容器 ==================== */
.container {
   width: 100%;
   max-width: var(--container-xl);
   margin: 0 auto;
   padding: 0 var(--spacing-md);
}

@media (min-width: 1400px) {
   .container {
      max-width: var(--container-2xl);
   }
}

/* ==================== 响应式显示控制 ==================== */
.isPc {
   display: block;
}

.isSp {
   display: none;
}

@media (max-width: 991px) {
   .isPc {
      display: none;
   }

   .isSp {
      display: block;
   }
}

/* ==================== 通用Header样式 ==================== */
.main-header {
   background-color: #000000;
   /* 纯黑背景，参考图片 */
   height: 80px;
   width: 100%;
   display: flex;
   align-items: center;
   position: fixed;
   /* 固定在顶部 */
   top: 0;
   z-index: 1000;
   padding: 15px 0;
}

/* 容器布局 */
.header-container {
   max-width: 1200px;
   /* 标准网页宽度 */
   margin: 0 auto;
   width: 100%;
   display: flex;
   justify-content: space-between;
   /* 左右两端对齐 */
   align-items: center;
   padding: 0 20px;
}

/* Logo 样式 */
.logo-img {
   height: 55px;
   /* 根据图片比例调整 */
   display: block;
}

/* 导航菜单列表 */
.main-nav-ul {
   font-family: "AlibabaPuHuiTi", "Microsoft Yahei", "Hiragino Sans GB";
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 30px;
   /* 菜单项之间的间距 */
}

/* 导航链接文字 */
.main-nav-a {
   color: #ffffff;
   /* 白色文字 */
   text-decoration: none;
   font-size: 20px;
   font-weight: bold;
   transition: color 0.3s ease;
   /* 悬停过渡动画 */
}

/* header 必须允许下拉显示 */
.main-header,
.header-container,
.main-nav {
   overflow: visible;
}

/* 下拉父级 */
.nav-dropdown {
   position: relative;
}

/* 箭头 */
.nav-dropdown-arrow {
   margin-left: 6px;
   font-size: 12px;
}

/* 下拉菜单 */
.nav-dropdown-toggle {
   color: #ffffff;
   text-decoration: none;
   font-size: 20px;
   font-weight: bold;
   transition: color 0.3s ease;
}

.nav-dropdown-menu {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   background: #ffffff;
   border-radius: 6px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   display: none;
   z-index: 9999;
}

/* 子项 */
.nav-dropdown-menu li a {
   display: block;
   padding: 12px 18px;
   color: rgba(42, 42, 42, 1);
   font-size: 16px;
   font-weight: normal;
   white-space: nowrap;
   text-decoration: none;
}

/* hover 效果 */
.nav-dropdown-menu li a:hover {
   background: rgba(0, 195, 255, 0.1);
   color: rgba(0, 195, 255, 1);
}

.main-nav a:hover::after {
   width: 100%;
}

/* ==================== 返回顶部按钮 ==================== */
.back-to-top,
.sp-back-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   display: none;
   width: 100px;
   cursor: pointer;
   z-index: 999;
   background: transparent;
   border: none;
   padding: 0;
   transition: all var(--transition-base);
}

.back-to-top:hover,
.sp-back-to-top:hover {
   opacity: 0.8;
}

.back-to-top img,
.sp-back-to-top img {
   width: 100px !important;
   display: block;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
   transition: all var(--transition-base);
}

.back-to-top:hover img,
.sp-back-to-top:hover img {
   filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

@media (max-width: 768px) {

   .back-to-top,
   .sp-back-to-top {
      bottom: 20px;
      right: 20px;
   }

   .back-to-top img,
   .sp-back-to-top img {
      width: 70px !important;
   }
}

@media (max-width: 480px) {

   .back-to-top img,
   .sp-back-to-top img {
      width: 100px !important;
   }
}

/* ==================== 联系我们通用样式 ==================== */
.contact-section {
   padding: 80px 0;
}

.contact-header {
   text-align: center;
   margin-bottom: 50px;
}

.contact-header .en {
   font-size: 36px;
   font-weight: bold;
   color: #00c3ff;
   display: block;
   margin-bottom: 10px;
}

.contact-header .cn {
   font-size: 28px;
   color: rgba(42, 42, 42, 1);
   font-weight: 500;
}

.contact-content {
   display: flex;
   gap: 50px;
   align-items: center;
}

.contact-image {
   flex: 1;
   text-align: left;
}

.contact-info-list {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.info-item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 20px;
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
}

.info-item:hover {
   transform: translateX(10px);
   box-shadow: 0 5px 20px rgba(0, 195, 255, 0.2);
}

.info-item_log {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-light);
   border-radius: var(--radius-full);
}

.info-item_log img {
   width: 40px;
   height: 40px;
}

.info-item-h5 {
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: rgba(0, 195, 255, 1) !important;
}

.info-item-p {
   font-size: var(--font-size-lg);
   color: var(--color-text);
   font-weight: 500;
}

/* 移动端联系我们样式 */
.sp-contact {
   padding: var(--spacing-4xl) 0;
   background: var(--color-bg-gray);
}

.sp-contact-icon {
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-light);
   border-radius: var(--radius-full);
   flex-shrink: 0;
}

.sp-contact-icon img {
   width: 35px;
   height: 35px;
}

@media (max-width: 1024px) {
   .main-nav-a {
      font-size: 18px;
   }

   .logo-img {
      width: 80%;
   }
}

@media (max-width: 576px) {
   .sp-contact-icon {
      width: 50px;
      height: 50px;
   }

   .sp-contact-icon img {
      width: 28px;
      height: 28px;
   }
}

/* sp  header*/
.hero-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   padding: 10px 32px;
   background: #000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1000;
}

.hero-header .logo {
   text-decoration: none;
   cursor: pointer;
}

.hero-header .logo img {
   width: auto;
   display: block;
   width: 80%;
}

.menu-btn {
   font-size: 28px;
   cursor: pointer;
   line-height: 1;
   color: #fff;
}

/* ==================== Footer样式 ==================== */
.section-footer {
   background: #2c3e50;
   color: #fff;
   padding: 30px 0;
   text-align: center;
}

.sigma_footer-copyright {
   font-size: 14px;
   color: #bdc3c7;
}

.sigma_footer-copyright a {
   color: #00c3ff;
   margin-left: 10px;
}

.sigma_footer-copyright a:hover {
   text-decoration: underline;
}

/* ==================== 通用标题样式 ==================== */
.title-box {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   margin-bottom: 20px;
}

.title-line {
   width: 80px;
   height: 3px;
   background: linear-gradient(90deg, #00c3ff, #0099cc);
   margin: 0 auto 40px;
}

/* ==================== 通用按钮样式 ==================== */
.btn-primary {
   display: inline-block;
   padding: 12px 30px;
   background: #00c3ff;
   color: #fff;
   border-radius: 5px;
   font-size: 16px;
   font-weight: 500;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
}

.btn-primary:hover {
   background: #0099cc;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 195, 255, 0.3);
}

.btn-more-blue {
   display: inline-block;
   padding: 12px 30px;
   background: #00c3ff;
   color: #fff;
   border-radius: 25px;
   font-size: 16px;
   transition: all 0.3s ease;
   white-space: nowrap;
}

.btn-more-blue:hover {
   background: #0099cc;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 195, 255, 0.3);
}

/* 查看详情按钮通用样式 */
.business_button,
.btn-detail,
.sp-business-btn {
   white-space: nowrap;
}

/* ==================== 移动端菜单 ==================== */
.menu-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
}

.menu-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
}

.side-menu {
   position: absolute;
   right: 0;
   top: 0;
   width: 190px;
   height: 100%;
   background: #fff;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
}

.menu-header {
   padding: 20px;
   border-bottom: 1px solid #eee;
}

.menu-logo {
   height: 40px;
}

.menu-content {
   padding: 20px 0;
}

.menu-list {
   list-style: none;
}

.menu-item {
   border-bottom: 1px solid #f0f0f0;
}

.menu-link {
   display: block;
   padding: 15px 20px;
   color: rgba(42, 42, 42, 1);
   font-size: 16px;
   transition: all 0.3s ease;
}

.menu-link:hover {
   background: #f8f9fa;
   color: #00c3ff;
   padding-left: 30px;
}

/* ==================== 性能优化 ==================== */
/* 使用GPU加速 */
.back-to-top,
.sp-back-to-top,
.info-item,
.menu-link {
   will-change: transform;
}

/* ==================== 打印样式 ==================== */
@media print {

   .main-header,
   .back-to-top,
   .sp-back-to-top,
   .menu-overlay {
      display: none;
   }
}