liting2017 6 роки тому
батько
коміт
3499009ace

BIN
img/newMenu/serves_29.png


BIN
img/newMenu/serves_30.png


BIN
img/newMenu/serves_31.jpg


BIN
img/newMenu/serves_33.jpg


BIN
img/newMenu/service_101.jpg


BIN
img/newMenu/service_102.png


BIN
img/newMenu/service_103.png


BIN
img/newMenu/service_104.png


BIN
img/newMenu/service_105.png


BIN
img/newMenu/service_106.png


BIN
img/newMenu/service_107.png


BIN
img/newMenu/service_108.png


BIN
img/newMenu/service_109.png


BIN
img/newMenu/service_110.png


BIN
img/newMenu/service_111.png


BIN
img/newMenu/service_112.png


BIN
img/newMenu/service_113.png


BIN
img/newMenu/service_114.png


BIN
img/newMenu/service_115.png


BIN
img/newMenu/service_116.png


BIN
img/newMenu/service_117.png


BIN
img/newMenu/service_118.png


BIN
img/newMenu/service_119.jpg


BIN
img/newMenu/service_120.png


BIN
img/newMenu/service_121.png


BIN
img/newMenu/service_122.png


BIN
img/newMenu/service_123.png


BIN
img/newMenu/service_124.jpg


+ 545 - 2
src/css/newMenu/services.css

@@ -404,14 +404,557 @@
 
 
 /* 右侧 */
-.wrapperRight div{
-   
+.wrapperRight {
+   float: right;
+   width: 224px;
+}
+.wrapperRight .memo>div{
+    width: 100%;
+    height: 58px;
+    line-height: 58px;
+    text-align: center;
+    font-size: 22px;
+    color: #ffffff;
+    background: url(../../../img/newMenu/serves_29.png) no-repeat;
+    background-size:100% 100%; 
+    margin-bottom: 12px;
+}
+.wrapperRight .memo{
+    border: 1px solid #efefef;
+    padding-bottom: 38px;
+}
+.wrapperRight .memo h4{
+    font-size: 18px;
+    color: #393838;
+    text-align: center;
+    line-height: 30px;
+    height: 30px;
+}
+.wrapperRight .memo h4 strong{
+    font-size: 24px;
+    color: #ff580e;
+    vertical-align: top;
+    margin-top: 6px;
+    font-weight:550
+}
+.wrapperRight .memo ul{
+    padding:20px 12px 0;
+}
+.wrapperRight .memo ul li{
+    overflow: hidden;
+    white-space:nowrap; 
+    text-overflow:ellipsis; 
+    -o-text-overflow:ellipsis;
+    margin-top: 4px;
+}
+.wrapperRight .memo ul li a{
+    color: #7a7878;
+    font-size: 14px;
+}
+.wrapperRight .memo ul li a::before{
+    content: '';
+    border-radius: 50%;
+    width: 4px;
+    height: 4px;
+    margin-right: 10px;
+    vertical-align: middle;
+    display: inline-block;
+    background: #666666;
+}   
+
+.wrapperRight .memo ul li a:hover{
+    color: #1797e9;
+}
+
+/* 政策放榜 */
+.policy{
+    border: 1px solid #efefef;
+    padding-bottom: 20px;
+    margin-top: 50px;
+}
+.policy>div{
+    width: 100%;
+    height: 100px;
+    background: url(../../../img/newMenu/serves_30.png) no-repeat;
+    background-size:100% 100%; 
+}
+.policy ul li {
+    overflow: hidden;
+    white-space:nowrap; 
+    text-overflow:ellipsis; 
+    -o-text-overflow:ellipsis;
+}
+.policy ul{
+    padding-left: 12px;
+    padding-top: 15px;
+
+}
+.policy ul li{
+    margin-top: 5px;
+}
+.policy ul li a{
+    color: #7a7878;
+    font-size: 14px;
+}
+.policy ul li:hover a{
+    color: #1797e9;
+}
+
+/* 今日快讯 */
+.newFlash{
+    padding-top: 30px;
+}
+.newFlash h4{
+    font-weight: normal;
+    font-size: 14px;
+    color: #393838;
+    margin-bottom: 10px;
+}
+.newFlash h4 img{
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: top;
+}
+.newFlash>div{
+    width: 100%;
+    position: relative;
+    height: 80px;
 }
+.newFlash>div img{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 99;
+}
+.newFlash>div p{
+    width: 100%;
+    height: 0px;
+    line-height: 0px;
+    background: rgba(0, 0, 0, .3);
+    position: absolute;
+    color: #ffffff;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    text-align: center;
+    overflow: hidden;
+    white-space:nowrap; 
+    text-overflow:ellipsis; 
+    -o-text-overflow:ellipsis;
+    transition: all .5s;
+}
+.newFlash>div:hover p{
+    height:24px;
+    line-height:24px;
+    transition: all .5s;
+}
+.newFlash ul{
+    padding-top: 10px;
+}
+.newFlash ul li{
+    border-bottom: 1px dashed #eeeeee;
+    padding:6px 0;
+}
+.newFlash ul li a{
+    color: #686868;
+    height: 24px;
+    line-height: 24px;
+}
+.newFlash ul li a:hover{
+    color: #1797e9;
+}
+.newFlash ul li img{
+    margin-right: 5px;
+    display: inline-block; 
+}
+/* 技淘百科 */
+.encyclopedias h5{
+    text-align: center;
+    font-size: 18px;
+    color: #000000;
+    padding-top: 50px;
+    padding-bottom: 20px;
+}
+.encyclopedias ul li{
+    clear: both;
+    overflow: hidden;
+    margin-bottom: 18px;
+}
+.encyclopedias ul li img{
+    width: 58px;
+    float: left;
+    transition: all .2s ease-out;
+}
+.encyclopedias ul li p{
+    width:150px;
+    height: 36px; 
+    margin-top: 12px;
+    float: left;
+    font-size: 14px;
+    margin-left: 10px;
+    border-bottom:1px solid #e7e7e7;
+    overflow: hidden;
+    white-space:nowrap; 
+    text-overflow:ellipsis; 
+    -o-text-overflow:ellipsis;
+}
+.encyclopedias ul li p a{
+    color: #686868;
+}
+.encyclopedias ul li:hover p a{
+    color: #1797e9;
+}
+.encyclopedias ul li:hover img{
+    transform: scale(0.9);
+    transition: all .2s ease-in;
+}
+
 .overBj{
     clear: both;
     margin-top: 18px;
 }
+.overBj img{
+    width: 100%;
+}
+/* p品牌通 */
+.brand{
+    height: 620px;
+    width: 100%;
+    background: url(../../../img/newMenu/service_101.jpg)no-repeat;
+    background-size:100% 100%; 
+    padding-top: 44px;
+}
+.branTtitle{
+    text-align: center;
+}
+.branTtitle h4{
+    font-weight: normal;
+    width: 630px;
+    margin: 0 auto;
+    height: 26px;
+    font-size: 26px;
+    color: #ef7b43;
+    background: url(../../../img/newMenu/service_102.png) no-repeat;
+    background-size:100% 100%; 
+}
+.branTtitle p{
+    font-size: 18px;
+    color: #c98e62;
+    margin-top: 12px;
+}
+.brand .brandList{
+    display: flex;
+    display: -webkit-flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 434px;
+}
+.brand .brandList li{
+    text-align: center;
+    width: 214px;
+    vertical-align: bottom;
+    background: #ffffff;
+    box-shadow: 0 5px 15px #c98e62;
+    border-radius: 15px 15px 0 0 ;
+} 
+.brand .brandList li img{
+    width: 100%;
+    height: 142px;
+    border-radius: 10px 10px 0 0 ;
+}
+.brand .brandList li:nth-child(1){
+    height: 355px;
+}
+.brand .brandList li:nth-child(1) div{
+    height: 160px;
+    padding-top: 16px;
+}
+.brand .brandList li:nth-child(1) div span{
+    margin-top: 10px;
+}
+.brand .brandList li:nth-child(2) div span{
+    margin-top: 22px;
+}
+.brand .brandList li:nth-child(3) div span{
+    margin-top: 38px;
+}
+.brand .brandList li:nth-child(4) div span{
+    margin-top: 54px;
+}
+.brand .brandList li:nth-child(5) div span{
+    margin-top:70px;
+}
+.brand .brandList li:nth-child(2){
+    height: 375px;
+}
+.brand .brandList li:nth-child(2) div{
+    height: 178px;
+    padding-top: 24px;
+}
+.brand .brandList li:nth-child(3){
+    height: 395px;
+}
+.brand .brandList li:nth-child(3) div{
+    height: 198px;
+    padding-top: 28px;
+}
+.brand .brandList li:nth-child(4){
+    height: 415px;
+}
+.brand .brandList li:nth-child(4) div{
+    height: 218px;
+    padding-top: 32px;
+}
+.brand .brandList li:nth-child(5){
+    height: 435px;
+}
+.brand .brandList li:nth-child(5) div{
+    box-sizing: border-box;
+    height:238px;
+    padding-top:35px;
+}
+.brand .brandList li p{
+    font-size: 16px;
+    color: #7a7878;
+    line-height: 32px;
+    height: 32px;
+}
+.brand .brandList li div{
+    padding-top: 30px;
+}
+.brand .brandList li div span{
+    width: 148px;
+    height: 46px;
+    line-height: 46px;
+    display: inline-block;
+    background: linear-gradient(left, #ff580e ,#ff8041);
+    background: -webkit-linear-gradient(left, #ff580e ,#ff8041); /* Safari 5.1 - 6.0 */
+    background: -o-linear-gradient(left, #ff580e ,#ff8041); /* Opera 11.1 - 12.0 */
+    background: -moz-linear-gradient(left, #ff580e ,#ff8041); /* Firefox 3.6 - 15 */
+    background: linear-gradient(left, #ff580e ,#ff8041); /* 标准的语法 */
+    font-size: 18px;
+    color: #ffffff;
+    border-radius: 10px;
+    vertical-align: bottom;
+}
+/* 科技通 */
+.scienceTtitle{
+    clear: both;
+    text-align: center;
+    padding-top: 56px;
+}
+.scienceTtitle h4{
+    font-weight: normal;
+    width: 630px;
+    margin: 0 auto;
+    height: 26px;
+    font-size: 26px;
+    color: #ff5d1d;
+    background: url(../../../img/newMenu/service_108.png) no-repeat;
+    background-size:100% 100%; 
+}
+.scienceTtitle p{
+    font-size: 18px;
+    color: #7a7878;
+    margin-top: 12px;
+}
+.scienceLeft>.imgt{
+    float: left;
+    width: 246px;
+    height: 286px;
+    position: relative;
+    margin-top: 68px;
+    z-index: 111;
+}
+.scienceLeft>.imgt img{
+    width: 246px;
+    height: 286px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 222;
+}
+.scienceLeft>.imgt span{
+    width: 246px;
+    height: 286px;
+    display: inline-block;
+    position: absolute;
+    background: rgba(0, 0, 0, .5);
+    top:0;
+    left:0;
+    z-index: 300;
+}
+.scienceLeft>.imgt>div{
+    width: 210px;
+    height: 70px;
+    top: 87px;
+    left: 20px;
+    background: url(../../../img/newMenu/service_110.png)no-repeat;
+    background-size:100% 100%;
+    text-align: center;
+    position: absolute;
+    top: 90px;
+    left: 50%;
+    margin-left: -105px;
+    z-index: 444;
+} 
+.scienceLeft>.imgt a{
+    color: #ffffff;
+    width: 86px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    box-shadow: 0 5px 10px #333;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    margin-left: -43px;
+    background: #1d1d1d;
+    z-index: 999;
+    border-radius: 10px;
+    transition: all .5s ease-in; 
+}
+.scienceLeft:hover>.imgt a{
+    transform: scale(1.2);
+    box-shadow: 0px 0px 55px #e7e7e7;
+    transition: all .5s ease-in; 
+}
+.scienceLeft>.imgt>div p{
+    font-size: 24px;
+    color: #ffffff;
+}
+.scienceList{
+    float: left;
+    overflow: hidden;
+    width: 660px;
+    height: 284px;
+    margin-top: 68px;
+}
+.scienceLeft ul{
+    overflow: hidden;
+    box-sizing:border-box; 
+}
+.scienceLeft ul li {
+    display: inline-block;
+    margin-left: 10px;
+    margin-bottom: 22px;
+}
+.scienceRight{
+    float: right;
+    width: 290px;
+}
+.scienceRight h4{
+    font-weight: normal;
+    font-size: 18px;
+    color: #444444;
+}
+.scienceRight h4 img{
+    margin-right: 12px;
+}
+.scienceRight>div{
+    width: 290px;
+    height: 364px;
+    background: url(../../../img/newMenu/service_109.png)no-repeat;
+    background-size:100% 100%;
+    padding-top: 56px;
+    padding-left: 50px;
+}
+.scienceRight>div p{
+    width: 190px;
+    text-align: justify;
+    line-height:26px;
+    color: #444444;
+}
+.scienceRight div a{
+    width: 94px;
+    height: 34px;
+    line-height: 34px;
+    display: inline-block;
+    text-align: center;
+    border: 1px solid #ff580e;
+    font-size: 14px;
+    color: #ff580e;
+    border-radius: 12px;
+    float: right;
+    margin-right: 50px;
+    margin-top: 10px;
+    transition: all .2s ease-in-out;
+}
+.scienceRight div a:hover{
+    background: #ef7b43;
+    color: #ffffff;
+    transition: all .2s ease-in;
+}
+/* 科技项目 */
+.project{
+    clear: both;
+    overflow: hidden;
+}
+.project .projectImg{
+    float: left;
+    width: 266px;
+    height: 300px;
+} 
+.project .projectImg img{
+    width: 100%;
+    height: 100%;
 
+    
+}
+.project .projectMid{
+    float: right;
+    width: 920px;
+} 
+.project .projectMid img{
+    margin-bottom: 12px;
+}
+.projectMid >div>div{
+    float: left;
+}
+.projectMid .imgLeft {
+    width: 432px;
+}
+.projectMid .imgLeft ul li {
+    float: left;
+    width: 214px;
+    height: 57px;
+    background: #f8f8f8;
+    font-size: 14px;
+    color: #393838;
+    line-height: 57px;
+    text-align: center;
+    margin-right: 2px;
+    margin-bottom: 2px;
+}
+.projectMid .imgRight{
+    width: 214px;
+    text-align: center;
+    margin-right: 16px;
+} 
+.projectMid .imgRight ol li {
+    height: 57px;
+    font-size: 14px;
+    color: #393838;
+    line-height: 57px;
+    margin-bottom: 2px;
+    background: #f8f8f8;
+}
+.projectMid .imgRight ol li:nth-child(2){
+    height: 116px;
+    line-height: 24px;
+    padding-top: 34px;
+}
+.advertisementBj{
+    height: 92px;
+    width: 100%;
+    margin-bottom: 24px;
+}
+.advertisementBj img{
+    width: 100%;
+    height: 100%;
+}
 
 
 

+ 212 - 1
template/newMenu/services.html

@@ -391,7 +391,69 @@
                 </div>
                 <!-- 管理体系 -->
                 <div class="wrapperRight">
-                    
+                    <div class="memo">
+                        <div>服务大事记</div>
+                        <h4><strong>17年</strong>科技服务</h4>
+                        <h4><strong>23455</strong>家企业伙伴</h4>
+                        <ul>
+                            <li><a href="#">关于部分营销推广类项目分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                        </ul>
+                    </div>
+                    <div class="policy">
+                        <div></div>
+                        <ul>
+                            <li><a href="#">关于部分营销推广类项目分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                            <li><a href="#">关于部分营销推广类项目</a></li>
+                        </ul>
+                    </div>
+                    <div class="newFlash">
+                        <h4><img src="../../img/newMenu/serves_31.jpg" alt="">今日快讯</h4>
+                        <div>
+                            <img src="../../img/newMenu/demand-9.png" alt="">
+                            <p>巨头涌入"游戏功能等待崛起"</p>
+                        </div>
+                        <ul>
+                            <li><img src="../../img/newMenu/serves_33.jpg" alt="" srcset=""><a href="#">3月21号,新余市科技局曹局长一行到访技淘...</a></li>
+                            <li><img src="../../img/newMenu/serves_33.jpg" alt="" srcset=""><a href="#">3月21号,新余市科技局曹局长一行到访技淘...</a></li>
+                            <li><img src="../../img/newMenu/serves_33.jpg" alt="" srcset=""><a href="#">3月21号,新余市科技局曹局长一行到访技淘...</a></li>
+                            <li><img src="../../img/newMenu/serves_33.jpg" alt="" srcset=""><a href="#">3月21号,新余市科技局曹局长一行到访技淘...</a></li>
+                            <li><img src="../../img/newMenu/serves_33.jpg" alt="" srcset=""><a href="#">3月21号,新余市科技局曹局长一行到访技淘...</a></li>
+                        </ul>
+                    </div>
+                    <div class="encyclopedias">
+                        <h5>技淘百科</h5>
+                        <ul>
+                            <li>
+                                <img src="../../img/newMenu/achievement_21.jpg" alt="">
+                                <p><a href="#">高新服务流程如何</a></p>
+                            </li>
+                            <li>
+                                <img src="../../img/newMenu/achievement_22.jpg" alt="">
+                                <p><a href="#">高新服务流程如何321313123</a></p>
+                            </li>
+                            <li>
+                                <img src="../../img/newMenu/achievement_23.jpg" alt="">
+                                <p><a href="#">高新服务流程如何</a></p>
+                            </li>
+                            <li>
+                                <img src="../../img/newMenu/achievement_21.jpg" alt="">
+                                <p><a href="#">高新服务流程如何</a></p>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
@@ -399,6 +461,155 @@
             <img src="../../img/newMenu/service_28.png" alt="">
         </div>
     </div>
+    <!-- 品牌通 -->
+    <div class="brand">
+        <div class="container">
+            <div class="branTtitle">
+                <h4>品牌通</h4>
+                <p>企业品牌逐级打造&nbsp;&nbsp;行业影响力持续提升</p>
+            </div>
+            <ul class="brandList">
+                <li>
+                    <img src="../../img/newMenu/service_103.png" alt="">
+                    <div>
+                        <p>树立品牌意识</p>
+                        <p>构建品牌框架</p>
+                        <p>获取基础资质</p>
+                        <span>基础品牌建设</span>
+                    </div>
+                </li>
+                <li>
+                    <img src="../../img/newMenu/service_104.png" alt="">
+                    <div>
+                        <p>培育品牌内功</p>
+                        <p>落地管理标准</p>
+                        <p>取得权威认证</p>
+                        <span>企业品牌提升</span>
+                    </div>
+                </li>
+                <li>
+                    <img src="../../img/newMenu/service_105.png" alt="">
+                    <div>
+                        <p>对标认证规范</p>
+                        <p>严格产品过程</p>
+                        <p>增值产品价值</p>
+                        <span>产品质量提升</span>
+                    </div>
+                </li>
+                <li>
+                    <img src="../../img/newMenu/service_106.png" alt="">
+                    <div>
+                        <p>特殊行业限制</p>
+                        <p>实施安全规范</p>
+                        <p>突破行业门槛</p>
+                        <span>行业限制许可办理</span>
+                    </div>
+                </li>
+                <li>
+                    <img src="../../img/newMenu/service_107.png" alt="">
+                    <div>
+                        <p>政府机构认定</p>
+                        <p>建立科技中心</p>
+                        <p>打造品牌城墙</p>
+                        <span>企业品牌升级奖励</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 科技通 -->
+    <div class='science'>
+        <div class="container">
+            <div class="scienceTtitle">
+                <h4>科技通</h4>
+                <p>企业发展全程陪伴&nbsp;&nbsp;科技服务高参</p>
+            </div>
+            <div class="contant">
+                <div class="scienceLeft">
+                    <div class="imgt">
+                        <span></span>
+                        <img src="../../img/newMenu/service_117.png" alt="">
+                        <div>
+                            <p>客户面对面</p>
+                            <p>需求分析</p>
+                        </div>
+                        <a href="#">查看详情</a>
+                    </div>
+                    <div class="scienceList">
+                        <ul>
+                            <li><img src="../../img/newMenu/service_111.png" alt=""></li>
+                            <li><img src="../../img/newMenu/service_112.png" alt=""></li>
+                            <li><img src="../../img/newMenu/service_113.png" alt=""></li>
+                            <li><img src="../../img/newMenu/service_114.png" alt=""></li>
+                            <li><img src="../../img/newMenu/service_115.png" alt=""></li>
+                            <li><img src="../../img/newMenu/service_116.png" alt=""></li>
+                        </ul>
+                    </div>
+                    <div class="scienceRight">
+                        <h4><img src="../../img/newMenu/service_118.png" alt="">科技通</h4>
+                        <div>
+                            <p>科技通在服务周期内针对企发展不同阶段深入分析与规划进行科技项目量身定制,对企业所属行业所属阶段展开分析、国家优惠政策推送并针对性监控,就政府项目规划培育申报等提供全方位、前瞻性的咨询顾问服务,帮助企业享受政策红利,减低产业升级成本...</p>
+                            <a href="#">我想了解</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="scienceTtitle">
+                <h4>科技项目</h4>
+                <p>企业发展&nbsp;&nbsp;政策扶持</p>
+            </div>   
+            <div class="project">
+                <div class="projectImg"><img src="../../img/newMenu/service_119.jpg" alt=""></div>
+                <div class="projectMid">
+                    <img src="../../img/newMenu/service_120.png" alt="">
+                    <div>
+                        <div class="imgLeft">
+                            <ul>
+                                <li>科技计划</li>
+                                <li>科技创新小巨人企业认定</li>
+                                <li>制造强省专项资金项目</li>
+                                <li>移动互联网产业发展专项资金</li>
+                                <li>众创空间</li>
+                                <li>科技企业孵化器</li>
+                                <li>企业技术中心</li>
+                                <li>工程技术研究中心</li>
+                            </ul>
+                        </div>
+                        <div class="imgRight">
+                            <ol>
+                                <li>中小企业发展专项资金</li>
+                                <li>战略性新兴产业科技攻关<br />与重大科技成果转化项目</li>
+                                <li></li>
+                            </ol>
+                        </div>
+                        <div class="projectRight encyclopedias">
+                            <ul>
+                                <li>
+                                    <img src="../../img/newMenu/service_121.png" alt="">
+                                    <p><a href="#">高新服务流程如何</a></p>
+                                </li>
+                                <li>
+                                    <img src="../../img/newMenu/service_122.png" alt="">
+                                    <p><a href="#">高新服务流程如何321313123</a></p>
+                                </li>
+                                <li>
+                                    <img src="../../img/newMenu/service_123.png" alt="">
+                                    <p><a href="#">高新服务流程如何</a></p>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="advertisementBj">
+                <img src="../../img/newMenu/service_124.jpg" alt="">
+            </div>
+            <div class="scienceTtitle">  
+                <h4>合作客户</h4>
+                <p>我们不只是客户&nbsp;&nbsp;更是一起发展的伙伴</p>
+            </div>  
+        </div>
+    </div>
     <footer>
         <div id="bottom">
             <div class="bottom">