/*-----------------------image -link内容上方左部分-start----------------------------------------------------*/
        .page-container{
            margin-top: 1em;
            width: 100%;
            font-family:Arial, Helvetica, sans-serif;
            font-weight: normal;
            color: #003300;
            display: flex;
            flex-wrap: wrap;
        }
        /* 导航链接--面包屑 */
            .link-tittle-box {width: 100%;letter-spacing: 2px;}
            .link-tittle-box p {margin-top: 1em;padding: 1em 2em;font-size:1em;}
            .link-tittle-box a {margin-right: 1em;opacity: 0.8;color: #003300;text-decoration: none;}
            .link-tittle-box span {margin-right: 1em;}

    /*-----------------------image -link内容上方左部分-end----------------------------------------------------*/
        .move-left{
            width: 50%;
            margin-top: 1em;
            border-right: 1px solid #ccc;
            overflow-y: auto;
            scroll-behavior: smooth;
            position: sticky;
            top: 0;
        }
        .left-box-ul{
            width: 100%;
            padding:0 1.5em;
            display: flex;
            flex-flow:row wrap;
            gap: 1em;
            overflow: hidden;
        }
        .left-box-ul li{
            width: 100%;
        }

        .left-box-ul li img{
            width: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .left-box-ul li img:hover {
            transform: scale(1.02);
        }
         /* 小圆点默认隐藏，仅小屏展示 */
        .dot-group {
            display: none;
            text-align: center;
            margin-top: 0.5em;
        }
        .dot {
            width: 0.6em;
            height: 0.6em;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: inline-block;
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.3s ease; /* 状态切换动画 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .dot.active { 
            background-color: #333; 
            transform: scale(1.1); /* 激活时放大，更醒目 */
        }
        .dot:hover { 
            background-color: #ccc; 
        }
        .dot:active { 
            transform: scale(0.95); 
        } /* 点击按压反馈 */
        /*-----------------------image -link内容上方右侧部分-start----------------------------------------------------*/
        .right-fixed-container{
            width: 50%;
        }
        .fix-right{
            width: 100%;
            height: 100vh;
            padding: 2em 3em;
            overflow-y: auto;
            -webkit-scrollbar:none;
            scrollbar-width: none;
            -ms-overflow-style:none;
            position: sticky;
            top: 0;
            display: flex;
            flex-direction: column;
        }
        .fix-right h1{
            font-size: 2.8em;
            line-height: 1.2em;
            letter-spacing: 3px;
        }
        .fix-right .discribe{
            line-height: 2em;
            font-size: 1.1em;
            border-bottom: 1px solid #ccc;
        }
        .fix-right .Material{
             line-height: 2.5em;
             margin-top: 2em;
             border-bottom: 1px solid #ccc;
        }
         .Material span:first-child{
            padding: 0.5em;
            background: #003300;
            color: #fff;
         }
         .link-region h3{
            text-align: center;
         }
     
         .icon-box{
            margin-top: 2em;
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            gap: 0.1em;
         }
         .add-to-favorites,.you-may-also-like{
            display: block;
            width:calc((100% - 0.1em) / 2) ;
            height: 3.5em;
            padding: 0 1em;
            background:  #003300;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap:0.5em;
         }
     
        .add-to-favorites .btn-text{
            white-space: nowrap;
            background: transparent;
            color: inherit;
        }
        .you-may-also-like .you-text{
            white-space: nowrap;
            color: inherit;
        }
         .iconfont{
            font-size:1.5em;
        }
        .you-may-also-like .you-text:hover{
            color:#fff;
        }
         .you-may-also-like:hover{
            background: #99cc00;
         }
        /* 已收藏状态样式 */
        .add-to-favorites.favorited {
            background: #ccc;
        }

        /* 悬停效果 */
        .add-to-favorites:not(.favorited):hover{
            background: #ff3300;
        }

        .add-to-favorites.favorited:hover {
            background: #ff3300;
        }
        .add-to-favorites:hover .btn-text {
            background:transparent;
        }


        /* 折叠面板 */
         .product-detail{
            margin-top: 2em;
            display: flex;
            flex-flow: row wrap;
         }
          .product-detail li{
            width: 100%;
          }
          .product-detail-box span{
            width: 100%;
            color: #003300;
            cursor: pointer;
            line-height: 2.5em;
            padding: 0 3em;
            border-bottom: 1px solid #ccc;
            display: flex;
            position: relative;
          }
      
         .product-detail-box span::before{
            content: "+";
            font-size: 1.5em;
            display: block;
            position: absolute;
            top: 0;
            left:1em;
        }
        .product-detail-box span.active::before{
            content:"-";
        }

         .detail-sub{
            padding: 0.5em 1em;
            line-height: 1.5em;
            display: flex;
            flex-flow: row wrap;
            display:none;
         }
     
         .detail-sub ul{
            padding: 1.5em  0 0.5em 3em;
         }
         .detail-sub ul li{
            width: 100%;
            list-style: disc;  
         }
        .detail-sub p{
            width: 100%;
            line-height: 1.5em;
            text-indent: 2em;
            margin-top: 1em;
        }
        /*-----------------------image -link内容上方右侧部分-end----------------------------------------------------*/

        /* image -link内容下方部分*/
        /*-----------------------image -link内容下方部分-start----------------------------------------------------*/
        .link-region{
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            margin-top: 2em;
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
        .link-region h3{
            width: 100%;
            font-size: 1.5em;
            letter-spacing: 2px;
            line-height: 22vh;
            box-shadow:none;
            position: relative;
        }
         .link-region h3 .line {
            width: 3.5em;
            height: 1px;
            background:#003300;
            position: absolute;
            left: 50%;
            transform: translateX(-50%); 
            top: 70%;
        }
        .link-box{
            width: 60%;
            margin: 0 auto;
            display: flex;
            flex-flow: row wrap;
            gap: 1em;
        }
        .link-box li{
            width: calc((100% - 3em) / 4);
            height: 2.2em;
            line-height: 2.2em;
        
        }
        .link-box li a{
            display: block;
            color:#003300;
            width: 100%;
            height: 100%;
            font-size: 1.1em;
            text-align: center;
            border: 1px solid #ccc;
            transition: border-color 0.3s ease-in-out;
        }
        .link-box li:hover a{
            border: 1px solid #003300; 
        }


        /*-----------------------image -link内容下方部分-end----------------------------------------------------*/
          /* 开启媒体查询1：屏幕：小于 1156px */
             @media (max-width: 1400px) and (min-width: 1156px){
                .icon-box{gap:1em;}
                .icon-box span{width:80%;margin: auto;}
            }
        
        
          /* 开启媒体查询2：屏幕：小于 1156px */
             @media (max-width: 1156px) {
                .link-box{width: 80%;}
                .icon-box{gap:1em;}
                .icon-box span{width:100%;margin: auto;}
            }
        
          /* 开启媒体查询3：屏幕：小于 992px */
            @media (max-width: 992px) {
                .fix-right h1{font-size: 1.8em;letter-spacing: normal;}
                .icon-box{font-size: 0.8em;}
                .link-box{width: 90%;}
                .link-img-wrap .size {top: 15em;}
            }
        
             /* 开启媒体查询4：屏幕：小于 768px */
            @media (max-width: 768px) {
                .link-tittle-box p{display: none;}
                .link-tittle-box p a,.link-tittle-box p span{margin-right: 0.3em;} 
                .move-left{
                    width: 100%;
                    margin-top: 1.5em;
                    border: none;
                    position: static !important;
                }
                .left-box-ul{padding:0.5em ;}
                .left-box-ul li img:hover {transform: scale(1);}
                .dot-group {display: block;}
        
                 /* 关键：仅屏幕<768px时，显示圆点+单图切换逻辑 */
                .left-box-ul li {display: none;margin-bottom: 0;}
                .left-box-ul li.active {display: block;}
                .dot-group {display: block;} 
                .right-fixed-container{width: 100%;margin-top: 2em;}
                .fix-right{position: static !important;height: 60vh;}
        
                .link-region h3{line-height: 3em;}
                .link-box{width: 80%;gap: 0.5em;}
        
                .link-box li{width: calc((100% - 1em) / 2);}
                .icon-box{gap:1em;}
        
                .icon-box span{width:80%;margin: auto;}
                .line{opacity:0;}
        }