修改反馈，添加走进中泽企业架构模块

src/pages/common/tpl/footer.tpl

         </div>
         <div class="footerCenter">
             <div class="footerClick">
-                <a class="h7" href=""><span>走进中泽</span></a>
+                <a class="h7" href="./intoZz.html"><span>走进中泽</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
-                <div class="footerShow show1"><a class="h7R" href=""><span>集团简介</span></a>
-                <a class="h7R" href=""><span>发展历程</span></a>
-                <a class="h7R" href=""><span>企业架构</span></a>
-                <a class="h7R" href=""><span>企业文化</span></a>
-                <a class="h7R" href=""><span>资质荣誉</span></a>
+                <div class="footerShow show1">
+                <a class="h7R" href="./intoZz.html#jtjj"><span>集团简介</span></a>
+                <a class="h7R" href="./intoZz.html#qywh"><span>企业文化</span></a>
+                <a class="h7R" href="./intoZz.html#qyjg"><span>企业架构</span></a>
+                <a class="h7R" href="./intoZz.html#fzlc"><span>发展历程</span></a>
+                <a class="h7R" href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
                 </div>
             </div>
             <div class="footerClick">
             </div>
             
             <div class="footerClick">
-                <a class="h7" href=""><span>新闻中心</span></a>
+                <a class="h7" href="./news.html"><span>新闻中心</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show2"><a class="h7R" href="./news.html#point"><span>集团新闻</span></a>
                 <a class="h7R" href="./news.html#point"><span>前沿资讯</span></a>
                 <a class="h7R" href="./news.html#point"><span>研发创新</span></a></div>
             </div>
             <div class="footerClick">
-                <a class="h7" href=""><span>党建工作</span></a>
+                <a class="h7" href="./partyBuilding.html"><span>党建工作</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
-                <div class="footerShow show2"><a class="h7R" href=""><span>企业党建</span></a>
-                <a class="h7R" href=""><span>学习文件</span></a></div>
+                <div class="footerShow show2"><a class="h7R" href="./partyBuilding.html#p1"><span>企业党建</span></a>
+                <a class="h7R" href="./partyBuilding.html#p2"><span>学习文件</span></a></div>
             </div>
             <div class="footerClick">
-                <a class="h7" href=""><span>社会责任</span></a>
+                <a class="h7" href="./socialResponsibility.html"><span>社会责任</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
-                <div class="footerShow show2"><a class="h7R" href=""><span>社会公益</span></a>
-                <a class="h7R" href=""><span>绿色转型</span></a></div>
+                <div class="footerShow show2"><a class="h7R" href="./socialResponsibility.html"><span>社会公益</span></a>
+                <a class="h7R" href="./socialResponsibility.html"><span>绿色转型</span></a></div>
             </div>
             <div class="footerClick">
                 <a class="h7" href="./join.html"><span>加入中泽</span></a>
             </div>
         </div>
         <div class="footerCenterM">
-            <a class="h7" href="">走进中泽</a>
+            <a class="h7" href="./intoZz.html">走进中泽</a>
             <div></div>
-            <a class="h7" href="">产业布局</a>
+            <a class="h7" href="./product.html">产业布局</a>
             <div></div>
-            <a class="h7" href="">新闻中心</a>
+            <a class="h7" href="./news.html">新闻中心</a>
             <div></div>
-            <a class="h7" href="">党建工作</a>
-            <a class="h7" href="">社会责任</a>
+            <a class="h7" href="./partyBuilding.html">党建工作</a>
+            <a class="h7" href="./socialResponsibility.html">社会责任</a>
             <div></div>
             <a class="h7" href="./join.html">加入中泽</a>
         </div>

src/pages/common/tpl/header.tpl

                 <a href="./intoZz.html">走进中泽</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
-                    <a href=""><span>集团简介</span></a>
-                    <a href=""><span>发展历程</span></a>
-                    <a href=""><span>企业架构</span></a>
-                    <a href=""><span>企业文化</span></a>
-                    <a href=""><span>资质荣誉</span></a>
+                    <a href="./intoZz.html#jtjj"><span>集团简介</span></a>
+                    <a href="./intoZz.html#qywh"><span>企业文化</span></a>
+                    <a href="./intoZz.html#qyjg"><span>企业架构</span></a>
+                    <a href="./intoZz.html#fzlc"><span>发展历程</span></a>
+                    <a href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
                 </div>
             </div>
             <div class="menuOne">
                 <div>
                     <div class="title"><a href="./intoZz.html">走进中泽</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
-                        <a href=""><span>集团简介</span></a>
-                        <a href=""><span>发展历程</span></a>
-                        <a href=""><span>企业架构</span></a>
-                        <a href=""><span>企业文化</span></a>
-                        <a href=""><span>资质荣誉</span></a>
+                        <a href="./intoZz.html#jtjj"><span>集团简介</span></a>
+                        <a href="./intoZz.html#qywh"><span>企业文化</span></a>
+                        <a href="./intoZz.html#qyjg"><span>企业架构</span></a>
+                        <a href="./intoZz.html#fzlc"><span>发展历程</span></a>
+                        <a href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
                     </div>
                 </div>
                 <div>

src/pages/index/index.html

             <div class="swiper-slide">
               <img
                 class="lazy"
-                data-src="./static/images/index/society.jpg"
+                data-src="./static/images/index/banner2.jpg"
                 data-srcM="./static/images/index/banner1m.jpg"
                 alt=""
               />
               <div class="slideCon">
-                <div class="title">投资并购与企业2<br>运营双轮驱动</div>
+                <div class="title">清洁能源与高载<br>能产业协同发展</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <img
+                class="lazy"
+                data-src="./static/images/index/banner3.jpg"
+                data-srcM="./static/images/index/banner1m.jpg"
+                alt=""
+              />
+              <div class="slideCon">
+                <div class="title">实业为本 <br>产业报国</div>
+              </div>
             </div>
+            <div class="swiper-slide">
+              <img
+                class="lazy"
+                data-src="./static/images/index/banner4.jpg"
+                data-srcM="./static/images/index/banner1m.jpg"
+                alt=""
+              />
+              <div class="slideCon">
+                <div class="title">科技联通未来 <br>创新达成梦想</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <img
+                class="lazy"
+                data-src="./static/images/index/banner5.jpg"
+                data-srcM="./static/images/index/banner1m.jpg"
+                alt=""
+              />
+              <div class="slideCon">
+                <div class="title"></div>
+              </div>
             </div>
           </div>
           <!-- 如果需要分页器 -->

src/pages/intoTime/index.less

     padding-right: 15px;
     box-sizing: border-box;
     &>.title{
-      margin-top: 80px;
+      margin-top: 40px;
       margin-bottom: 40px;
-      font-size: 24px;
+      font-size: 32px;
     }
     &>.title2 {
       font-size: 19px;

src/pages/intoZz/App.js

                 slideChange: function(){
                     let index0=this.realIndex;
                     nowNum.textContent=index0+1;
-                    let name=honorsRis[index0].querySelector(".text").textContent;
-                    nowName.textContent=name;
+                    // let name=honorsRis[index0].querySelector(".text").textContent;
+                    // nowName.textContent=name;
                 },
             },
         });
         
-        allNum.textContent=honorsRis.length;
+        
         honorsRis.forEach((item, index) => {
             item.addEventListener("click", (e) => {
-                mySwiper.slideTo(index, 1000, false);
+                let lists=item.querySelectorAll(".swiper-slide");
+                lists.forEach((item2,index2)=>{
+                    let newSlide=item2.cloneNode(true);
+                    mySwiper.appendSlide(newSlide);
+                });
+                allNum.textContent=lists.length;
+                let name=item.querySelector(".text").textContent;
+                nowName.textContent=name;
+                nowNum.textContent=1;
                 pop.classList.add("popShow");
             });
         });
         guanbi.addEventListener("click", (e) => {
             pop.classList.remove("popShow");
+            mySwiper.removeAllSlides(); //移除全部
         });
+
+        //企业架构
+        if(!isMob){
+            let fourMores=document.querySelectorAll(".fourMore");
+            let threeDivs=document.querySelectorAll(".threeDiv");
+            
+            let moresList=[];
+            fourMores.forEach((item, index) => {
+                let sonList=[];
+                let lists=item.querySelectorAll(".fours");
+                lists.forEach((item2,index2)=>{
+                    let newSlide=item2.cloneNode(true);
+                    sonList.push(newSlide);
+                });
+                moresList.push(sonList);
+                item.addEventListener("click", (e) => {
+                    moresList[index].forEach((item2,index2)=>{
+                        item.parentElement.appendChild(item2);
+                    });
+                    item.parentElement.parentElement.classList.add("fourMoreShow");
+                    item.remove();
+                });
+            });
+
+            function doFun() {
+                let fourMoress=document.querySelectorAll(".fourMore");
+                fourMoress.forEach((item, index) => {
+                    item.addEventListener("click", (e) => {
+                        moresList[index].forEach((item2,index2)=>{
+                            item.parentElement.appendChild(item2);
+                        });
+                        item.parentElement.parentElement.classList.add("fourMoreShow");
+                        item.remove();
+                    });
+                });
+            }
+
+            threeDivs.forEach((item, index) => {
+                item.addEventListener("click", (e) => {
+                    if(item.parentElement.classList.contains("fourMoreShow")){
+                        item.parentElement.classList.remove("fourMoreShow");
+                        item.parentElement.querySelectorAll(".fours").forEach((item2,index2)=>{
+                            if(index2>3){
+                                item2.remove();
+                            }
+                            
+                        });
+                        let newDiv = document.createElement('div');
+                        newDiv.className = 'fours fourMore';
+
+                        let innerDiv = document.createElement('div');
+                        innerDiv.className = 'fourDiv';
+                        innerDiv.textContent = '展开更多';
+
+                        newDiv.appendChild(innerDiv);
+                        item.parentElement.querySelector(".threeSon").appendChild(newDiv);
+                        doFun();
+                    }
+                });
+            });
+        }
+        else{
+            let fourMores=document.querySelectorAll(".fourMore");
+            fourMores.forEach((item, index) => {
+                let lists=item.querySelectorAll(".fours");
+                lists.forEach((item2,index2)=>{
+                    let newSlide=item2.cloneNode(true);
+                    item.parentElement.appendChild(newSlide);
+                });
+                item.remove();
+            });
+            let twoDivs=document.querySelectorAll(".twoDiv");
+            twoDivs.forEach((item, index) => {
+                item.addEventListener("click", (e) => {
+                    if(item.parentElement.querySelectorAll('.three').length>0){
+                        if(item.parentElement.classList.contains("openDiv")){
+                            item.parentElement.classList.remove("openDiv");
+                        }else{
+                            item.parentElement.classList.add("openDiv");
+                        }
+                    }
+                    
+                });
+            });
+            let threeDivs=document.querySelectorAll(".threeDiv");
+            threeDivs.forEach((item, index) => {
+                item.addEventListener("click", (e) => {
+                    if(item.parentElement.querySelectorAll('.fours').length>0){
+                        if(item.parentElement.classList.contains("openDiv")){
+                            item.parentElement.classList.remove("openDiv");
+                        }else{
+                            item.parentElement.classList.add("openDiv");
+                        }
+                    }
+                    
+                });
+            });
+        }
     }
 
 }

src/pages/intoZz/index.html

     
     <div class="main">
       <div class="intoCon">
-        <div class="intoTop">
+        <div class="intoTop" id="jtjj">
           <div class="wow fadeInUp title">集团简介</div>
           <div class="wow fadeInUp">
             <div class="text">中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。</div>
         <div class="wow fadeInUp intoTopImg">
           <img class="lazy" data-src="./static/images/intoZz/banner.jpg" data-srcM="./static/images/intoZz/banner.jpg" alt="" />
         </div>
-        <div class="four">
+        <div class="four" id="qywh">
           <div class="wow fadeInUp title">企业文化</div>
           <div class="wow fadeInUp fourCon">
             <div class="fourL">
             </div>
           </div>
         </div>
-        <div class="enterprise">
+        <div class="enterprise" id="qyjg">
           <div class="enterpriseCon">
             <div class="title">企业架构</div>
             <div class="enterList">
-
+              <div class="one">
+                <div class="oneDiv">中泽控股集团股份有限公司</div>
+                <div class="oneSon">
+                  <div class="two">
+                    <div class="twoDiv hasThree">集团总部<div class="zk"><div class="mTxt iconfont iconfont icon-xiala"></div></div></div>
+                    <div class="twoSon">
+                      <div class="three">
+                        <div class="threeDiv">办公室</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">法务部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">财务部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">审计部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">经营部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">综合部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">投资部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">国际事业部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">新能源事业部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv">证券部</div>
+                        <div class="threeSon"></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="two">
+                    <div class="twoDiv hasThreeFour">旗下企业<div class="zk"><div class="mTxt iconfont iconfont icon-xiala"></div></div></div>
+                    <div class="twoSon hasfourThree">
+                      <div class="three">
+                        <div class="threeDiv hasFour">实体产业<div class="zk"><div class="mTxt iconfont iconfont icon-xiala"></div></div></div>
+                        <div class="threeSon">
+                          <div class="fours">
+                            <div class="fourDiv">北京中泽控股集团有限公司</div>
+                            <!-- <div class="fourSon"></div> -->
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">吉林中泽昊融集团有限公司</div>
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">内蒙古中泽控股集团有限责任公司</div>
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">新疆中泽控股集团有限责任公司</div>
+                          </div>
+                          <!-- 超出的元素加到下面fourMoreList中，如果有更多就加上 fourMore -->
+                          <div class="fours fourMore">
+                            <div class="fourDiv">展开更多</div>
+                            <div class="fourMoreList">
+                              <div class="fours">
+                                <div class="fourDiv">吉林中泽控股有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林铁合金股份有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉铁铁合金有限责任公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉铁（天津）国际贸易有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">瑞志现代煤化工科技有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">新疆吉铁铁合金有限责任公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">辽阳铁合金责任有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林炭素有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉蒙炭素有限责任公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林吉恩镍业股份有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林卓创新材料有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林博研新材料有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林亚融科技股份有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">通化吉恩镍业有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">新乡吉恩新能源材料有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">重庆吉恩冶炼有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">长春中科昊融新材料研究有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">四平昊融银业有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林大黑山钼业股份有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林天池钼业有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林中泽钼业有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">黑龙江新瑞石油化工有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">丹化化工科技股份有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">通辽金煤化工有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">万联易达物流科技有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">朝阳重型机器有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">辽宁省机械研究院有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">辽宁中泽地产有限公司</div>
+                              </div>
+                              <div class="fours">
+                                <div class="fourDiv">吉林哈达湾开发建设股份有限公司</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="three">
+                        <div class="threeDiv hasFour">金融产业<div class="zk"><div class="mTxt iconfont iconfont icon-xiala"></div></div></div>
+                        <div class="threeSon">
+                          <div class="fours">
+                            <div class="fourDiv">中泽商贸集团</div>
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">北京中睿元同投资管理有限公司</div>
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">北京金山岭私募基金管理有限公司 </div>
+                          </div>
+                          <div class="fours">
+                            <div class="fourDiv">君奇资本管理（深圳）有限公司</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="history">
+        <div class="history" id="fzlc">
           <div class="historyUp">
             <div class="wow fadeInUp title">发展历程</div>
             <div class="wow fadeInUp pcTxt"><a class="btn" href="./intoTime.html"><span>了解我们的历程</span></a></div>
           <img class="wow fadeInUp" src="./static/images/intoZz/fzlc.jpg" alt="">
           <div class="wow fadeInUp mTxt"><a class="btn" href="./intoTime.html"><span>了解我们的历程</span></a></div>
         </div>
-        <div class="honors">
+        <div class="honors" id="ryzz">
           <div class="wow fadeInUp title">资质荣誉</div>
           <div class="honorsCon">
             <div class="wow fadeInUp honorsL">
             </div></div>
             <div class="honorsR">
               <div class="wow fadeInUp honorsRi">
-                <div class="img"><img src="./static/images/intoZz/1.png" alt=""><div class="imgHover">+</div></div>
+                <div class="img"><img src="./static/images/intoZz/a1.jpg" alt=""><div class="imgHover">+</div></div>
                 <div class="text">国家高新技术企业</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a1.jpg" data-srcM="./static/images/intoZz/a1.jpg" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a2.jpg" data-srcM="./static/images/intoZz/a2.jpg" alt="" />
+                    </div>
+                    <div class="text">吉林炭素</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a3.jpg" data-srcM="./static/images/intoZz/a3.jpg" alt="" />
+                    </div>
+                    <div class="text">吉蒙炭素</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a4.jpg" data-srcM="./static/images/intoZz/a4.jpg" alt="" />
+                    </div>
+                    <div class="text">吉林神舟炭纤维</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a5.jpg" data-srcM="./static/images/intoZz/a5.jpg" alt="" />
+                    </div>
+                    <div class="text">吉林高科特炭</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a6.jpg" data-srcM="./static/images/intoZz/a6.jpg" alt="" />
+                    </div>
+                    <div class="text">吉恩镍业</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/a7.jpg" data-srcM="./static/images/intoZz/a7.jpg" alt="" />
+                    </div>
+                    <div class="text">大黑山2023证</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img"><img src="./static/images/intoZz/2.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">国家级企业技术中心</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img"><img src="./static/images/intoZz/3.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">中国驰名商标</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img img2"><img src="./static/images/intoZz/4.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">国家认可实验室</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img"><img src="./static/images/intoZz/5.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">国家级绿色矿山</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img"><img src="./static/images/intoZz/6.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">国家级绿色工厂</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
               <div class="wow fadeInUp honorsRi">
                 <div class="img"><img src="./static/images/intoZz/7.png" alt=""><div class="imgHover">+</div></div>
                 <div class="text">专精特新企业</div>
+                <div class="honorsList">
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="img">
+                      <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                    </div>
+                    <div class="text">吉铁铁合金有限责任公司1</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         <div class="popSw">
           <div class="swiper productSwiper">
             <div class="swiper-wrapper">
-              <div class="swiper-slide">
+              <!-- <div class="swiper-slide">
                 <div class="img">
                   <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
                 </div>
                   <img class="lazy" data-src="./static/images/intoZz/77.png" data-srcM="./static/images/intoZz/77.png" alt="" />
                 </div>
                 <div class="text">吉铁铁合金有限责任公司7</div>
-              </div>
+              </div> -->
             </div>
             <!-- 如果需要分页器 -->
             <div class="btn-prev btn-prevP1 pcTxt"><span class="icon iconfont icon-jiantou"></span></div>

src/pages/intoZz/index.less

   .text{
     text-align: justify;
     font-size: 20px;
-    line-height: 32px;
+    line-height: 40px;
   }
   .title{
-    font-size: 60px;
+    font-size: 56px;
   }
 }
 .intoCon{
             // overflow-y: auto;
             .fourSon{
               opacity: 0.3;
+              min-height: 500px;
               &:first-child{
                 opacity: 1;
               }
     background: #F5F5F6;
     padding: 120px 0px;
     text-align: center;
+    overflow: hidden;
     .enterpriseCon{
       width: 100%;
       max-width: 1300px;
       text-align: left;
       .enterList{
         margin-top: 45px;
+        width: 100%;
+        .one{
+          width: 100%;
+          display: flex;
+          .zk{
+            width: 24px;
+            height: 24px;
+            background: #BBBEC0;
+            border-radius: 50%;
+            color: #fff;
+            position: absolute;
+            top: 50%;
+            right: -12px;
+            transform: translateY(-50%);
+            &::before{
+              content: '';
+              width: 14px;
+              height: 2px;
+              background: #ffffff;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%,-50%);
+            }
+            &::after{
+              content: '';
+              width: 2px;
+              height: 14px;
+              background: #ffffff;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%,-50%);
+            }
+          }
+          .oneDiv{
+            width: 112px;
+            height: 456px;
+            background: #B81C25;
+            border-radius: 10px;
+            font-size: 30px;
+            color: #fff;
+            writing-mode: vertical-rl;
+            text-align: center;
+            line-height: 112px;
+            margin-top: 353px;
+          }
+          .oneSon{
+            width: calc(100% - 112px);
+            padding-left: 90px;
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-around;
+            position: relative;
+            &::before{
+              content: '';
+              width: 0px;
+              height: calc(100% - 560px);
+              position: absolute;
+              top: 136px;
+              left: 53px;
+              border-left: 1px solid #BBBEC0;
+            }
+            .two{
+              width: 100%;
+              display: flex;
+              margin-bottom: 100px;
+              position: relative;
+              &:first-child{
+                .twoDiv{
+                  &::before{
+                    background: url('./images/twoUp.jpg') no-repeat;
+                    background-size: 44px 18px;
+                  }
+                }
+              }
+              &:last-child{
+                margin-bottom: 0px;
+                &::after{
+                  content: '';
+                  width: 2px;
+                  height: 100%;
+                  position: absolute;
+                  left: -37px;
+                  top: 277px;
+                  background: #F5F5F6;
+                }
+                .twoDiv{
+                  &::before{
+                    background: url('./images/towDw.jpg') no-repeat;
+                    background-size: 44px 18px;
+                  }
+                }
+              }
+              .twoDiv{
+                width: 288px;
+                height: 70px;
+                background: #E2E3E4;
+                border-radius: 10px;
+                border: 1px solid #BBBEC0;
+                font-size: 24px;
+                line-height: 70px;
+                padding-left: 28px;
+                box-sizing: border-box;
+                position: relative;
+                &::before{
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  left: -45px;
+                  width: 44px;
+                  height: 18px;
+                  background: url('./images/twoC.png') no-repeat;
+                  background-size: 44px 18px;
+                  transform: translateY(-50%);
+                }
+              }
+              .hasThree{
+                margin-top: 110px;
+              }
+              .hasThreeFour{
+                margin-top: 234px;
+              }
+              .twoSon{
+                width: calc(100% - 288px);
+                padding-left: 60px;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                align-content: space-around;
+                position: relative;
+                &::before{
+                  content: '';
+                  width: 0px;
+                  height: calc(100% - 60px);
+                  position: absolute;
+                  top: 30px;
+                  left: 26px;
+                  border-left: 1px dashed #BBBEC0;
+                }
+                .three{
+                  width: 100%;
+                  display: flex;
+                  margin-bottom: 20px;
+                  &:last-child{
+                    margin-bottom: 0px;
+                    .threeDiv{
+                      &::before{
+                        background: url('./images/jtDw.jpg') no-repeat;
+                        background-size: 24px 18px;
+                      }
+                    }
+                  }
+                  &:first-child{
+                    .threeDiv{
+                      &::before{
+                        background: url('./images/jtUp.jpg') no-repeat;
+                        background-size: 24px 18px;
+                      }
+                    }
+                  }
+                  .threeDiv{
+                    width: 290px;
+                    height: 60px;
+                    background: rgba(197,199,201,0.2);
+                    border-radius: 10px;
+                    border: 1px dashed #D8DADB;
+                    font-size: 24px;
+                    line-height: 60px;
+                    padding-left: 20px;
+                    box-sizing: border-box;
+                    position: relative;
+                    &::before{
+                      content: '';
+                      position: absolute;
+                      top: 50%;
+                      left: -35px;
+                      width: 24px;
+                      height: 18px;
+                      background: url('./images/jt.png') no-repeat;
+                      background-size: 24px 18px;
+                      transform: translateY(-50%);
+                    }
+                  }
+                  .hasFour{
+                    margin-top: 126px;
+                  }
+                  .threeSon{
+                    width: calc(100% - 290px);
+                    padding-left: 60px;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-content: space-around;
+                    position: relative;
+                    &::before{
+                      content: '';
+                      width: 0px;
+                      height: calc(100% - 60px);
+                      position: absolute;
+                      top: 30px;
+                      left: 26px;
+                      border-left: 1px dashed #BBBEC0;
+                    }
+                    .fours{
+                      width: 100%;
+                      margin-bottom: 20px;
+                      &:last-child{
+                        margin-bottom: 0px;
+                        .fourDiv{
+                          &::before{
+                            background: url('./images/jtDw.jpg') no-repeat;
+                            background-size: 24px 18px;
+                          }
+                        }
+                      }
+                      &:first-child{
+                        .fourDiv{
+                          &::before{
+                            background: url('./images/jtUp.jpg') no-repeat;
+                            background-size: 24px 18px;
+                          }
+                        }
+                      }
+                      // display: flex;
+                      .fourDiv{
+                        width: 396px;
+                        height: 60px;
+                        background: rgba(216,218,219,0.2);
+                        border-radius: 10px;
+                        border: 1px dashed #D8DADB;
+                        font-size: 24px;
+                        line-height: 60px;
+                        padding-left: 20px;
+                        box-sizing: border-box;
+                        position: relative;
+                        &::before{
+                          content: '';
+                          position: absolute;
+                          top: 50%;
+                          left: -35px;
+                          width: 24px;
+                          height: 18px;
+                          background: url('./images/jt.png') no-repeat;
+                          background-size: 24px 18px;
+                          transform: translateY(-50%);
+                        }
+                      }
+                      .fourMoreList{
+                        display: none;
+                      }
+                    }
+                    .fourMore{
+                      .fourDiv{
+                        font-size: 20px;
+                        color: #666666;
+                        cursor: pointer;
+                      }
+                    }
+                  }
+                }
+                .fourMoreShow{
+                  .threeDiv{
+                    cursor: pointer;
+                    .zk{
+                      &::after{
+                        opacity: 0;
+                      }
+                    }
+                  }
+                }
+              }
+              .hasfourThree{
+                &::before{
+                  height: calc(100% - 290px);
+                  top: 150px;
+                }
+                .three{
+                  margin-bottom: 100px;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
               color: #B81C25;
             }
           }
+          .honorsList{
+            display: none;
+          }
         }
       }
     }
   }
   .main{
     padding-top: 61px;
+    overflow: hidden;
     .title{
-      font-size: 24px;
+      font-size: 32px;
       line-height: normal;
     }
     .text{
-      font-size: 14px;
-      line-height: 24px;
+      font-size: 16px;
+      line-height: 28px;
     }
   }
   .intoCon{
-    padding-top: 80px;
+    padding-top: 40px;
     box-sizing: border-box;
     padding-left: 15px;
     padding-right: 15px;
       margin-top: 70px;
       padding: 110px 0px;
       position: relative;
+      overflow: inherit;
       &::before{
         content: '';
         position: absolute;
       }
       .enterpriseCon{
         position: relative;
+        .enterList{
+          margin-top: 35px;
+          .one{
+            flex-wrap: wrap;
+            .zk{
+              width: 16px;
+              height: 24px;
+              background: transparent;
+              border-radius: 0;
+              color: #101010;
+              top: 50%;
+              right: 8px;
+              line-height: 24px;
+              transform: translateY(-50%);
+              div{
+                transition: all 0.3s ease-in-out;
+              }
+              &::before,&::after{
+                display: none;
+              }
+            }
+            .oneDiv{
+              width: 100%;
+              height: 55px;
+              border-radius: 4px;
+              font-size: 20px;
+              writing-mode: inherit;
+              line-height: 55px;
+              margin-top: 0px;
+            }
+            .oneSon{
+              width: 100%;
+              padding-left: 0px;
+              &::before{
+                display: none;
+              }
+              .two{
+                margin-bottom: 0px;
+                flex-wrap: wrap;
+                &:last-child{
+                  &::after{
+                    display: none;
+                  }
+                }
+                .hasThree{
+                  margin-top: 0px;
+                }
+                .hasThreeFour{
+                  margin-top: 0px;
+                }
+                .twoDiv{
+                  width: 100%;
+                  height: auto;
+                  background: #F5F5F6;
+                  border-radius: 0px;
+                  border: 0px solid #BBBEC0;
+                  font-size: 16px;
+                  line-height:normal;
+                  padding-left: 20px;
+                  padding: 40px 8px 40px 20px;
+                  border-bottom: 1px solid #BBBEC0;
+                  &::before{
+                    display: none;
+                  }
+                }
+                .twoSon{
+                  width: 100%;
+                  padding-left: 0px;
+                  padding: 0px 27px;
+                  background-color: #fff;
+                  display: none;
+                  &::before{
+                    display: none;
+                  }
+                  .three{
+                    margin-bottom: 0px;
+                    flex-wrap: wrap;
+                    border-bottom: 1px solid #BBBEC0;
+                    &:last-child{
+                      border-bottom: 0px solid #BBBEC0;
+                    }
+                    .hasFour{
+                      margin-top: 0px;
+                    }
+                    .threeDiv{
+                      width: 100%;
+                      height: auto;
+                      background: #fff;
+                      border-radius: 0px;
+                      border: 0px dashed #D8DADB;
+                      font-size: 16px;
+                      line-height: normal;
+                      padding-left: 0px;
+                      padding: 30px 0px;
+                      &::before{
+                        display: none;
+                      }
+                      .zk{
+                        right: 0px;
+                      }
+                    }
+                    .threeSon{
+                      width: 100%;
+                      padding-left: 0px;
+                      display: none;
+                      &::before{
+                        display: none;
+                      }
+                      .fours{
+                        width: 100%;
+                        margin-bottom: 0px;
+                        padding-bottom: 20px;
+                        &:last-child{
+                          padding-bottom: 30px;
+                        }
+                        .fourDiv{
+                          width: 100%;
+                          height: auto;
+                          background: #fff;
+                          border-radius: 0px;
+                          border: 0px dashed #D8DADB;
+                          font-size: 14px;
+                          line-height: normal;
+                          padding-left: 13px;
+                          &::before{
+                            display: none;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          .openDiv{
+            &>.twoSon{
+              display: flex !important;
+            }
+            &>.threeSon{
+              display: flex !important;
+            }
+            &>div{
+              &>.zk{
+                div{
+                  transform: rotate(-180deg);
+                }
+              }
+            }
+          }
+        }
       }
 
     }
               img{
                 max-height: 75px;
               }
+              .imgHover{
+                line-height: 125px;
+                font-size: 36px;
+              }
             }
             .img2{
               img{

src/pages/join/index.html

               <div class="wow fadeInUp title contactUsTit">联系我们</div>
               <div class="wow fadeInUp text text1">如您有任何疑问或想了解更多关于我们的服务，请联系我们。</div>
               <div class="wow fadeInUp title contactType">联系方式</div>
-              <div class="wow fadeInUp text">总机:024-31875997</div>
-              <div class="wow fadeInUp text">传真:024-31875999</div>
-              <div class="wow fadeInUp text">邮箱:hr@lnzzgroup.com</div>
-              <div class="wow fadeInUp text">总部地址:辽宁省沈阳市皇姑区北陵大街56号</div>
+              <div class="wow fadeInUp text">电话:010-65008562</div>
+              <div class="wow fadeInUp text">邮编:100020</div>
+              <div class="wow fadeInUp text">总部地址:北京市朝阳区金河东路正大中心北塔28层</div>
+              <div class="wow fadeInUp text">邮箱:zzjt@lnzzgroup.com</div>
             </div>
             <div><img class="wow fadeInUp lazy" data-src="./static/images/join/joinC.jpg" data-srcM="./static/images/join/joinC.jpg" alt="" /></div>
           </div>

src/pages/join/index.less

             box-sizing: border-box;
             margin-right: 80px;
             cursor: pointer;
+            position: relative;
+            &::after {
+                content: "";
+                width: 0;
+                height: 2px;
+                background: #B81C25;
+                position: absolute;
+                left: 0;
+                bottom: -2px;
+                right: 0;
+                margin: auto;
+                transition: all 0.4s ease;
+            }
             &:hover{
                 color: #B81C25;
+                &::after {
+                    width: 100%;
+                }
             }
         }
         .ck{
-            border-bottom: 1px solid #B81C25;
+            // border-bottom: 1px solid #B81C25;
             color: #B81C25;
+            &::after {
+                width: 100%;
+            }
             .h5R{
                 font-weight: bold;
             }
                     .h4{
                         margin-top: 50px;
                         font-size: 24px;
+                        font-family: 'MyFont1';
+                        font-weight: bold;
                         &:first-child{
                             margin-top: 0;
                             color: #B81C25;
             .text{
                 font-size: 24px;
                 color: #9FA3A5;
-                margin-bottom: 8px;
+                margin-bottom: 26px;
             }
             .text1{
                 font-size: 20px;
             .contactType{
                 font-size: 40px;
                 margin-top: 200px;
-                margin-bottom: 20px;
+                margin-bottom: 43px;
             }
             img{
                 width: 750px;
     }
   }
   .desCon{
-    padding-top: 80px;
+    padding-top: 40px;
     box-sizing: border-box;
     // .text{
     //   font-size: 14px;
       .title{
         text-align: center;
         margin-bottom: 30px;
-        font-size: 24px;
+        font-size: 32px;
       }
       &>div{
         width: 100%;
         .typeCon2 {
             .infoul{
                 &>.title{
-                    font-size: 25px;
+                    font-size: 32px;
                     padding: 40px 0px 15px;
                 }
                 .newsType {
                         margin-right: 12px;
                         top: 0px;
                     }
+                    a{
+                        color: #fff;
+                    }
                 }
             }
         }
                 .contactUsTit{
                     font-size: 60px;
                     margin-bottom: 38px;
-                    font-size: 24px;
+                    font-size: 32px;
                     line-height: normal;
                 }
                 .text{

src/pages/joinList/index.html

           </a>
         </div>
       </div>
-      <div class="pages">
+      <!-- <div class="pages">
           <a class="item prev disableBtn iconfont icon-jiantou" href="./news_012.html#newsPos"></a>
           <div class="pageList">
               <a class="item pageItem" href="./news_011.html#newsPos">1</a>
           <span class="item space">...</span>
           <a class="item last" href="./news_0135.html#newsPos">35</a>
           <a class="item next iconfont icon-jiantou" href="./news_014.html#newsPos"></a>
+      </div> -->
+      <div class="news_paging">
+          <a id="previousPage" class="previousPage">
+            <span class="icon iconfont icon-jiantou"></span>
+          </a>
+          <div id="paging" style="display: flex;align-items: center;">
+              <a class="pageNum pageNumActive">1</a>
+              <a class="pageNum">2</a>
+              <a class="pageNum">3</a>
+              <a class="pageNum pageNums">...</a>
+              <a class="pageNum">300</a>
+          </div>
+          <a id="nextPage" class="nextPage">
+              <span class="icon iconfont icon-jiantou"></span>
+          </a>
       </div>
-      <a class="pageNext mTxt">加载更多<span class="iconfont icon-jiantou"></span></a>
+      <!-- <a class="pageNext mTxt">加载更多<span class="iconfont icon-jiantou"></span></a> -->
     </div>
     <%= require('../common/tpl/footer.tpl') %>
     <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->

src/pages/joinList/index.less

       }
   }
   
-  .partContent h2 {
-    color: white;
-    border-bottom: 1px solid #fff;
-    font-size: 60px;
+.partContent h2 {
+  color: white;
+  border-bottom: 1px solid #fff;
+  font-size: 60px;
+}
+.news_paging{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 0 120px;
+  box-sizing: border-box;
+  .previousPage{
+      width: 40px;
+      height: 40px;
+      color: #041954;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #041954;
+      margin-right: 20px;
+      cursor: pointer;
+      transition: all 0.2s;
+      span{
+          font-size: 26px;
+          transform: rotate(-90deg);
+      }
+      &:hover{
+          background: #B81C25;
+          border: 1px solid #B81C25;
+          color: #fff;
+      }
+  }
+  .nextPage{
+      width: 40px;
+      height: 40px;
+      color: #041954;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #041954;
+      margin-left: 20px;
+      cursor: pointer;
+      transition: all 0.2s;
+      span{
+          font-size: 26px;
+          transform: rotate(90deg);
+      }
+      &:hover{
+          background: #B81C25;
+          border: 1px solid #B81C25;
+          color: #fff;
+      }
+  }
+  .pageNum{
+      min-width: 40px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 18px;
+      color: #000;
+      transition: all 0.2s;
+      padding: 0 5px;
+      box-sizing: border-box;
+      cursor: pointer;
+      text-align: center;
+      border: 1px solid #DDE2E6;
+      border-radius: 2px;
+      &:hover{
+          background: #B81C25;
+          border: 1px solid #B81C25;
+          color: #fff;
+      }
+  }
+  .pageNumActive{
+      color: #fff;
+      background: #B81C25;
+  }
+  .pageNums{
+      pointer-events: none;
+  }
+  .pageNum+.pageNum{
+      margin-left: 10px;
   }
 
+  .ellipsis{
+      font-weight: bold;
+      font-size: 22px;
+      padding: 10px 15px;
+      color: #333333;
+      // cursor: pointer;
+      transition: all 0.2s;
+      // &:hover{
+      //     color:#48A038
+      // }
+  }
+}
+
 
 @media screen and (min-width: 801px) and (max-width: 1400px) {
   
   .main{
     padding-top: 61px;
     &>.title{
-        padding-top: 80px;
+        padding-top: 40px;
         box-sizing: border-box;
-        font-size: 24px;
+        font-size: 32px;
         line-height: normal;
     }
+    .news_paging{
+      // padding-top: 16vw;
+      padding-bottom: 60px;
+      .previousPage{
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+          box-sizing: border-box;
+      }
+      .nextPage{
+          width: 40px;
+          height: 40px;
+          margin-left: 3.25vw;
+          transition: all 0.2s;
+          box-sizing: border-box;
+      }
+      .pageNum{
+          font-size: 3.5vw;
+      }
+      .ellipsis{
+          font-size: 3.5vw;
+          padding: 1.875vw 2.5vw;
+          // &:hover{
+          //     color:#48A038
+          // }
+      }
+  }
   }
   .list {
         width: 100%;

src/pages/productDec1/index.less

     padding-top: 61px;
   }
   .desCon{
-    padding-top: 50px;
+    padding-top: 40px;
     box-sizing: border-box;
     padding-left: 15px;
     padding-right: 15px;