/* 产品详情页移动端优化样式 */
/* 专门针对hji.html等产品页面的移动端优化 */

@media (max-width: 768px) {
  
  /* 产品页面导航优化 */
  .subnav {
    position: sticky;
    top: 60px;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .pc_sub_nav {
    display: none !important;
  }
  
  .wep_sub_nav {
    display: block !important;
    padding: 15px;
  }
  
  .wep_sub_nav_center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .product_name {
    font-size: 18px !important;
    font-weight: 600;
    color: #333;
  }
  
  .product_name_link img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  
  .product_name_link img.rotated {
    transform: rotate(180deg);
  }
  
  .buy_now_link_btn a {
    background: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
  }
  
  .product_name_select {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .product_name_select.expanded {
    max-height: 300px;
  }
  
  .product_name_select p {
    padding: 12px 0;
    border-top: 1px solid #eee;
    margin: 0;
  }
  
  .product_name_select p:first-child {
    border-top: none;
  }
  
  .product_name_select a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    display: block;
  }
  
  .product_name_select a:hover {
    color: #007bff;
  }
  
  /* 产品概览区域移动端优化 */
  .overview {
    padding: 20px 0;
  }
  
  .block {
    margin-bottom: 30px;
    padding: 20px 15px;
  }
  
  .block.bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin: 20px 15px;
  }
  
  .block1 {
    text-align: center;
    padding: 40px 20px;
  }
  
  .block1 img {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
  }
  
  .title1 {
    font-size: 24px !important;
    font-weight: 600;
    margin-bottom: 15px;
  }
  
  .desc1 {
    font-size: 16px !important;
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .block2, .block3, .block4, .block5, .block6 {
    text-align: center;
    padding: 30px 20px;
  }
  
  .block2 .title1,
  .block3 .title1,
  .block4 .title1,
  .block5 .title1,
  .block6 .title1 {
    font-size: 20px !important;
    margin-bottom: 15px;
  }
  
  .block2 .desc1,
  .block3 .desc1,
  .block4 .desc1,
  .block5 .desc1,
  .block6 .desc1 {
    font-size: 14px !important;
    line-height: 1.6;
  }
  
  /* 产品特性展示移动端优化 */
  .block7 {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
  }
  
  .block7 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
  }
  
  .block7_svg_bg {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  
  .block7_svg {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  .block7 h6 {
    font-size: 18px !important;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .block7 p {
    font-size: 14px !important;
    opacity: 0.8;
  }
  
  /* 相机规格展示移动端优化 */
  .block8 {
    padding: 30px 20px;
  }
  
  .block8 .title1 {
    font-size: 20px !important;
    margin-bottom: 15px;
  }
  
  .block8 .desc1 {
    font-size: 14px !important;
    line-height: 1.6;
    margin-bottom: 25px;
  }
  
  .block8 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .block8 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
  }
  
  .block8_svg_bg {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  .block8 h6 {
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .block8 p {
    font-size: 12px !important;
    opacity: 0.8;
  }
  
  /* 产品尺寸信息移动端优化 */
  .block10 {
    padding: 30px 20px;
  }
  
  .block10 .text {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    text-align: center;
    margin-top: 20px;
    font-size: 12px !important;
    opacity: 0.8;
  }
  
  /* 交互功能展示移动端优化 */
  .block11 {
    padding: 30px 20px;
  }
  
  .block11 .title1 {
    font-size: 20px !important;
    margin-bottom: 20px;
  }
  
  .block11_list1 {
    margin-bottom: 30px;
  }
  
  .blovk11_ul1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .blovk11_ul1 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
  }
  
  .blovk11_ul1 img {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
  }
  
  .blovk11_ul1 p {
    font-size: 12px !important;
  }
  
  .block11_list2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .block11_list2 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
  }
  
  .block11_list2 p:first-child {
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 10px;
  }
  
  .block11_list2 p:last-child {
    font-size: 14px !important;
    opacity: 0.8;
    margin-bottom: 15px;
  }
  
  .block11_list2 img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  /* 按钮组移动端优化 */
  .btn_item {
    margin-bottom: 15px;
  }
  
  .btn_item .c_button {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  /* 视频播放器移动端优化 */
  .video_block {
    height: 50vh;
    min-height: 250px;
  }
  
  .video_item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 图片展示移动端优化 */
  .img_block {
    text-align: center;
  }
  
  .img_block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  /* 文字内容移动端优化 */
  .w_content2 {
    max-width: 100%;
    padding: 0 10px;
  }
  
  .mg_center {
    margin: 0 auto;
  }
  
  .title_top {
    margin-top: 0;
  }
  
  .desc_top {
    margin-top: 15px;
  }
  
  /* 响应式网格优化 */
  .d_flex {
    display: flex !important;
  }
  
  .overflow_hidden {
    overflow: hidden;
  }
  
  .position_relative {
    position: relative;
  }
  
  .position_absolute {
    position: absolute;
  }
  
  /* 触摸交互优化 */
  .block7 li,
  .block8 li,
  .blovk11_ul1 li,
  .block11_list2 li {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  
  .block7 li:active,
  .block8 li:active,
  .blovk11_ul1 li:active,
  .block11_list2 li:active {
    transform: scale(0.98);
    background-color: rgba(255,255,255,0.2);
  }
  
  /* 滚动优化 */
  .overview {
    overflow-x: hidden;
  }
  
  /* 加载状态优化 */
  .block img {
    transition: opacity 0.3s ease;
  }
  
  .block img[src=""] {
    opacity: 0;
  }
}

/* 小屏幕手机产品页优化 */
@media (max-width: 480px) {
  .block1 {
    padding: 30px 15px;
  }
  
  .block1 img {
    max-width: 150px;
  }
  
  .title1 {
    font-size: 20px !important;
  }
  
  .desc1 {
    font-size: 14px !important;
  }
  
  .block2, .block3, .block4, .block5, .block6 {
    padding: 25px 15px;
  }
  
  .block2 .title1,
  .block3 .title1,
  .block4 .title1,
  .block5 .title1,
  .block6 .title1 {
    font-size: 18px !important;
  }
  
  .block2 .desc1,
  .block3 .desc1,
  .block4 .desc1,
  .block5 .desc1,
  .block6 .desc1 {
    font-size: 13px !important;
  }
  
  .block7 {
    padding: 25px 15px;
  }
  
  .block7 li {
    padding: 15px;
  }
  
  .block7_svg_bg {
    width: 50px;
    height: 50px;
  }
  
  .block7_svg {
    width: 35px;
    height: 35px;
  }
  
  .block7 h6 {
    font-size: 16px !important;
  }
  
  .block8 ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .blovk11_ul1 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .product_name {
    font-size: 16px !important;
  }
  
  .buy_now_link_btn a {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 横屏手机产品页优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .block1 {
    padding: 20px;
  }
  
  .block1 img {
    max-width: 120px;
  }
  
  .block7 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .block7 li {
    flex: 1;
    min-width: 150px;
  }
  
  .block8 ul {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .blovk11_ul1 {
    grid-template-columns: repeat(6, 1fr);
  }
}