* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;}
body {color: #333;line-height: 1.6;}
.container {width: 100%;max-width: 740px;margin: 0 auto;padding: 0 15px;}
.container2 {width: 100%;max-width: 1100px;margin: 0 auto;padding: 0 15px;}
.navbar {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;}
.nav {display: flex;justify-content: space-between;align-items: center;padding-left: 20px;}
.nav a {padding: 0 15px;}
.logo {display: flex;align-items: center;}
.logo img {height: 40px;}
.nav-links {display: flex;list-style: none;}
.nav-links li {margin-left: 30px;}
.nav-links a {text-decoration: none;color: #666;font-size: 14px;transition: color 0.3s;}
.nav-links a:hover {color: #333;}
.nav-links a.active {color: #333;font-weight: bold;}
.contact {display: flex;align-items: center;color: #4080ff;font-size: 14px;}

.home-bg {background: url(../imgs/banner-bg.png);background-size: 100% 100%;position: relative;overflow: hidden;}
.y-1 {position: absolute;right: 0;bottom: 0;transform: translate(21%, 31%);}
.y-2 {position: absolute;right: 160px;top: 150px;}
.y-3 {position: absolute;left: 150px;top: 220px;}

/* 主要内容 */
.hero {padding: 80px 0;text-align: center;position: relative;overflow: hidden;height: 470px;}
.hero .container{margin-top: 55px;}
.hero-content {position: relative;z-index: 1;}
.hero-content img {margin-bottom: 25px;}
.hero h1 {font-size: 48px;margin-bottom: 20px;color: #222;}
.hero h1 span {color: #ffc107;}
.hero p {font-size: 18px;margin-bottom: 15px;color: #555;}

.hero-description {max-width: 700px;margin: 0 auto;font-size: 14px;color: #666;}

/* 技术优势 */
.advantages {padding: 80px 0;text-align: center;background-color: #e8ecf1;}
.section-title {font-size: 32px;margin-bottom: 30px;color: #333;font-family: MiSans;font-size: 32px;font-weight: 600;line-height: normal;text-align: center;letter-spacing: normal;/* 正文色/正文色 */color: #1A1A1A;letter-spacing: 1px;}
.advantages-description {max-width: 800px;margin: 0 auto 50px;font-size: 14px;color: #666;position: relative;bottom: 10px;letter-spacing: 1px;}
.advantages-grid {display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 50px;}
.advantage-item {flex: 0 0 22%;margin-bottom: 30px;}
.advantage-item img {transform: scale(1.3);margin-bottom: 20px;margin-top: 20px;}
.advantage-title {font-size: 16px;margin-bottom: 10px;color: #333;}
.advantage-description {font-size: 14px;color: #888;line-height: 1.6;}

/* 功能特点 */
.features {padding: 80px 0;background-color: #f0f0f0;text-align: center;}
.features-description {max-width: 800px;margin: 0 auto 40px;font-size: 14px;color: #666;}
.features-grid {display: flex;justify-content: center;gap: 30px;margin-top: 30px;}
.feature-item {width: 240px;height: 243px;text-align: center;position: relative;border: 1px solid #bdbdc0;}
.feature-item .textBg {height: 100%;}
.feature-item .textImg {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -70%);z-index: 1;}
.feature-title {font-size: 14px;margin-bottom: 5px;color: #333;}
.feature-description {font-size: 15px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 20px;white-space: nowrap;}

/* 覆盖领域 */
.coverage {padding: 80px 0;text-align: center;}
.coverage-subtitle {font-size: 14px;margin-bottom: 70px;text-align: center;color: #9E9E9E;}
.coverage-grid {display: flex;flex-direction: column;align-items: center;}
.coverage-item-top {display: flex;}
.coverage-item {position: relative;height: 140px;border-radius: 8px;margin-bottom: 20px;}
.coverage-item img {object-fit: cover;height: 100%;margin: 0 10px 10px 10px;}
.coverage-title {position: absolute;bottom: -28px;left: 0;width: 100%;padding: 5px 10px;font-size: 14px;color: #333;z-index: 99;}

/* 页脚 */
footer {background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);padding: 50px 0 20px;color: #666;}
.footer-content {display: flex;justify-content: space-between;margin-bottom: 30px;}
.footer-column {flex: 0 0 22%;}
.footer-logo {text-align: center;margin-bottom: 20px;}
.footer-logo img {height: 40px;}
.footer-title {font-size: 16px;margin-bottom: 20px;color: #333;}
.footer-links {list-style: none;}.footer-links li {margin-bottom: 10px;}
.footer-links a {text-decoration: none;color: #666;font-size: 14px;transition: color 0.3s;}
.footer-links a:hover {color: #4080ff;}

.qr-code {text-align: center;}
.qr-code img {width: 100px;height: 100px;margin-bottom: 10px;}
.qr-text {font-size: 12px;color: #888;}

.copyright {text-align: center;padding-top: 20px;border-top: 1px solid #eee;font-size: 12px;color: #888;}

.video-box {display: flex;justify-content: center;align-items: center;height: 660px;}
.video {width: 620px;border-radius: 20px;overflow: hidden;}
.video video {width: 100%;height: 100%;object-fit: contain;}

/* 播放器控件颜色适配 */
video::-webkit-media-controls-play-button {background-color: #409EFF;border-radius: 50%;}

/* 加载状态指示 */
@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

video:not([poster])::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid #409EFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

/* 视频容器 */
.video-container {position: relative;max-width: 800px;height: 450px;border-radius: 15px;overflow: hidden;}


/* 控制按钮 */
.play-btn {position: absolute;width: 80px;height: 80px;border: none;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;left: 50%;top: 50%;transform: translate(-50%, -50%);background: transparent;opacity: 0;}
.video-container:hover .play-btn {opacity: 1;}
.play-btn:hover {background: rgba(223, 223, 223, 0.5);opacity: 1;}

/* 图标样式 */
.play-btn svg {fill: white;width: 36px;height: 36px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.icon-pause {display: none;}

/* 默认显示播放图标 */

/* 播放状态切换 */
.video-playing .icon-play {display: none;}
.video-playing .icon-pause {display: block;}
#demoVideo {width: 100%;height: 100%;object-fit: cover;}


@media(max-width:1200px){

}

@media(max-width:1024px){
.nav{ display: none;}
.phone{transform: scale(1);}
.logo img{transform: scale(1);}
.hero .container{margin-top: 30px;}
.video-box{padding: 0 15px;height: 420px;}
.video-container {height: 360px;}
.features,
.advantages{padding: 60px 0;}
.section-title{ font-size: 28px;}
.advantages-description{margin: 0 auto 30px;}
.advantage-item{flex: 0 0 48%;}
.advantage-item img{ margin-top: 0;transform: scale(1);}
.features-grid{gap: 10px;}
.feature-item{ width: 49%;height: auto;}
.feature-item .textBg{ max-width: 100%;height: auto;}
.feature-description{ position: initial;white-space: inherit;transform: translateX(0%);font-size: 14px;}
.coverage-item-top{ flex-wrap: wrap;justify-content: space-between;}
.coverage-item{width: 48%;height: auto; }
.coverage-item img{max-width: 100%;height: auto;margin: 0 ; margin-bottom: 10px;}
.footer-content{flex-wrap: wrap;}
.footer-column{flex: 0 0 48%; margin-bottom: 20px;}
.footer-title{margin-bottom: 15px;}
.footer-logo{ margin-bottom: 0;}
}

@media(max-width:768px){
.hero{padding: 50px 0;height: 420px;}
.features,
.advantages{padding: 50px 0;}
.section-title{ font-size: 26px;}
}

@media(max-width:640px){
.hero{padding: 40px 0;height: 320px;}
.features,
.advantages{padding: 40px 0;}
.section-title{ font-size: 24px;}
}