/* CSS 样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    nav li a {
        font-size: .8rem;
        padding: 7px 8px;
    }
}

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

.bannerbox {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.banner {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: auto;
    display: none;
}

.banner img.active {
    display: block;
}

.banner-nav {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.banner-nav button {
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
}

.banner-nav button.active {
    background-color: rgba(255, 0, 0, 0.5);
}

.tutorial {
    margin: 20px;
}



.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.index-about {
    background-color: #f5f5f5;
    padding: 40px 0;
}

.index-about-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.index-about-text {
    flex: 1;
    margin-left: 30px;
}

.index-about-text h1 {
    font-size: 24px;
    line-height: 1.3;
    color: #333;
}

.index-about-text h1 span {
    font-weight: bold;
}

.index-about-text p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.index-about-text sup {
    font-size: 12px;
    vertical-align: top;
}

.index-about-text .learn-more {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

.index-about-pic {
    flex: 1;
    max-width: 500px;
}

.index-about-pic img {
    width: 100%;
    height: auto;
    display: block;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .index-about-main {
        flex-direction: column;
    }

    .index-about-text,
    .index-about-pic {
        width: 100%;
        max-width: 100%;
    }

    .index-about-pic img {
        margin-top: 20px;
    }
}

/* 其他可能需要的样式 */
.learn-more:hover {
    background-color: #0056b3;
    text-decoration: none;
}

/* 清除默认的margin和padding */
h1,
p,
a {
    margin: 0;
    padding: 0;
}

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

/* 清除图片默认的边距 */
img {
    border: none;
}

/* 清除链接默认的下划线 */
a {
    text-decoration: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.product-intro {
    padding: 20px;
    margin: 20px;
}

.title {
    text-align: center;
}

.product-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.feature {
    flex: 0 0 calc(50% - 10px);
    /* 适应手机端每行2个 */
    margin-bottom: 20px;
    background-color: #f5f5f5;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* 电脑端样式 */
@media (min-width: 768px) {
    .feature {
        flex: 0 0 calc(25% - 10px);
        /* 适应电脑端每行4个 */
    }
}

/* 添加一些交互效果 */
.feature:hover {
    cursor: pointer;
    background-color: #534040;
    color: #fff;
}



body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.tutorial {
    padding: 20px;
}

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

.tutorial-header h1 {
    color: #333;
}

.tutorial-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tutorial-item {
    flex: 1 0 calc(50% - 20px);
    /* 适应手机端 */
    margin-bottom: 20px;
    background-color: #f5f5f5;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.tutorial-item:hover {
    transform: scale(1.15);
    cursor: pointer;
}

.title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.description {
    font-size: 0.9em;
    color: #666;
}

/* 电脑端样式 */
@media (min-width: 768px) {
    .tutorial-item {
        flex: 1 0 calc(33.33% - 20px);
        /* 适应电脑端每行3个 */
    }

    .title {
        font-size: 1.4em;
    }

    .description {
        font-size: 1em;
    }
}


body {  
font-family: Arial, sans-serif;  
margin: 0;  
padding: 0;  
}  

footer {  
background-color: #333;  
color: #fff;  
padding: 20px;  
text-align: center;  
}  

.footer-container {  
display: flex;  
flex-wrap: wrap; /* 允许在必要时换行 */  
justify-content: space-between;  
padding: 10px; /* 添加内边距以适应更小的屏幕 */  
}  

.footer-section {  
flex: 1 1 300px; /* 允许收缩，但不小于300px */  
padding: 0 10px;  
text-align: left; /* 文本左对齐以改善可读性 */  
}  

.footer-section h3 {  
font-size: 18px;  
margin-bottom: 10px;  
}  

.footer-section ul {  
list-style-type: none;  
padding: 0;  
}  

.footer-section ul li {  
margin-bottom: 5px;  
}  

.footer-section ul li a {  
color: #fff;  
text-decoration: none;  
}  

.footer-section ul li a:hover {  
text-decoration: underline;  
}  

.contact-icons {  
display: flex;  
justify-content: center;  
margin-top: 10px;  
}  

.qrcode {  
width: 100px; /* 稍微增大二维码大小以提高可识别性 */  
height: auto; /* 高度自适应以保持比例 */  
margin: 0 5px;  
}  

/* 媒体查询，用于定义小于600px屏幕下的样式 */  
@media (max-width: 600px) {  
.footer-container {  
flex-direction: column; /* 改为垂直方向堆叠 */  
}  

.footer-section {  
flex: 1 0 100%; /* 每个部分占据整行 */  
margin-bottom: 20px; /* 添加底部间距以分隔各个部分 */  
}  

.qrcode {  
width: 80px; /* 在小屏幕上减小二维码大小 */  
}  
}
.user-reviews-carousel {  
    background-color: #ddd;
width: 100%;  
margin: 0 auto; /* 水平居中 */  
overflow: hidden; /* 隐藏溢出的内容 */  
position: relative; /* 为按钮定位 */  
}  

.carousel-container {  
position: relative;  
height: 300px; /* 轮播图高度 */  
max-width: 1200px; /* 限制最大宽度，以适应小屏幕 */  
margin: 0 auto;
overflow: hidden; /* 隐藏溢出的内容 */  
font-size: 1.2rem;
}  

.carousel-inner {  
display: flex;  
transition: transform 0.5s ease-in-out; /* 平滑过渡 */  
align-items: center;
height: 300px;
}  

.carousel-item {  
flex: 0 0 100%; /* 默认每个项目占满整个宽度 */  
max-width: 100%;  
overflow: hidden;  
text-align: center;  
padding: 20px 60px;  
box-sizing: border-box;  
}  

.carousel-item.active {  
display: block; /* 激活的项目显示 */  
}  

.carousel-control {  
position: absolute;  
top: 50%;  
transform: translateY(-50%);  
background-color: rgba(0,0,0,0.5);  
color: white;  
border: none;  
outline: none;  
cursor: pointer;  
font-size: 2em;  
z-index: 1;  
}  

.carousel-control.prev {  
left: 10px;  
}  

.carousel-control.next {  
right: 10px;  
}  


.showerweima{
    max-width: 500px;
    height: 200px;
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    width: 50%;
    padding: 10px;
    border-radius: 5px;
    border:1px solid #000;
    background-color: #fff;
    display: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    z-index: 1001; 
}

.showerweima div{
    width: 50%;
    float: left;
}
#anderweima,#apperweima{
    width: 100%;
    float: left;
}
#anderweima img{
    margin: 0 auto;
    
}
#apperweima img{
    margin: 0 auto;
    
}
#androidspan,#applespan{
    width: 100%;
    text-align: center;
}

/* 根据屏幕大小调整字体和按钮大小 */  
@media (max-width: 600px) {  
.carousel-control {  
font-size: 1.5em;  
}  
.review-content {  
font-size: 0.9em;  
}  
}


/* 隐藏视频容器 */  
.video-container {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: rgba(0,0,0,0.7); /* 半透明背景 */  
    display: none; /* 初始隐藏 */  
    z-index: 9999; /* 确保在最顶层 */  
    align-items: center;  
    justify-content: center;  
    display: flex;  
    overflow: auto; /* 允许滚动 */  
  }  
    
  /* 视频样式 */  
  #videoPlayer {  
    max-width: 90%; /* 限制最大宽度，防止过大 */  
    max-height: 90vh; /* 限制最大高度，防止过高 */  
    box-shadow: 0 0 10px rgba(0,0,0,0.9); /* 添加阴影 */  
  }  
    
  /* 关闭按钮样式 */  
  #closeButton {  
    position: absolute;  
    top: 10px;  
    right: 10px;  
    background-color: white;  
    border: none;  
    cursor: pointer;  
    padding: 5px 10px;  
    border-radius: 5px;  
  }
@media (max-width: 600px) {
  .banner{
    width: 160%;
    max-width: 200%;
    margin-left: -30%;

  }
}