add

Andy
1 parent 3dbf07af
Showing 3 changed files with 733 additions and 4 deletions
css/serslide.css
js/services.js
services.html
+*, *::after, *::before {
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    box-sizing:border-box
+}
+html {
+    font-size:62.5%
+}
+body {
+    font-size:1.6rem;
+    font-family:open sans, sans-serif;
+    color:#2c343b;
+    background-color:#f2f2f2
+}
+a {
+    color:#d44457;
+    text-decoration:none
+}
+img {
+    max-width:100%
+}
+.cd-header {
+    position:absolute;
+    z-index:2;
+    top:0;
+    left:0;
+    width:100%;
+    height:50px;
+    background-color:#21272c;
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale
+}
+@media only screen and (min-width:768px) {
+    .cd-header {
+        height:70px;
+        background-color:transparent
+    }
+}
+#cd-logo {
+    float:left;
+    margin:13px 0 0 5%
+}
+#cd-logo img {
+    display:block
+}
+@media only screen and (min-width:768px) {
+    #cd-logo {
+        margin:23px 0 0 5%
+    }
+}
+.cd-primary-nav {
+    float:right;
+    margin-right:5%;
+    width:44px;
+    height:100%;
+    /*background:url(../assets/cd-icon-menu.svg) no-repeat center center*/
+}
+.cd-primary-nav ul {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    -webkit-transform:translateY(-100%);
+    -moz-transform:translateY(-100%);
+    -ms-transform:translateY(-100%);
+    -o-transform:translateY(-100%);
+    transform:translateY(-100%)
+}
+.cd-primary-nav ul.is-visible {
+    box-shadow:0 3px 8px rgba(0, 0, 0, .2);
+    -webkit-transform:translateY(50px);
+    -moz-transform:translateY(50px);
+    -ms-transform:translateY(50px);
+    -o-transform:translateY(50px);
+    transform:translateY(50px)
+}
+.cd-primary-nav a {
+    display:block;
+    height:50px;
+    line-height:50px;
+    padding-left:5%;
+    background:#21272c;
+    border-top:1px solid #333c44;
+    color:#fff
+}
+@media only screen and (min-width:768px) {
+    .cd-primary-nav {
+        width:auto;
+        height:auto;
+        background:0 0
+    }
+    .cd-primary-nav ul {
+        position:static;
+        width:auto;
+        -webkit-transform:translateY(0);
+        -moz-transform:translateY(0);
+        -ms-transform:translateY(0);
+        -o-transform:translateY(0);
+        transform:translateY(0);
+        line-height:70px
+    }
+    .cd-primary-nav ul.is-visible {
+        -webkit-transform:translateY(0);
+        -moz-transform:translateY(0);
+        -ms-transform:translateY(0);
+        -o-transform:translateY(0);
+        transform:translateY(0)
+    }
+    .cd-primary-nav li {
+        display:inline-block;
+        margin-left:1em
+    }
+    .cd-primary-nav a {
+        display:inline-block;
+        height:auto;
+        font-weight:600;
+        line-height:normal;
+        background:0 0;
+        padding:.6em 1em;
+        border-top:0
+    }
+}
+.cd-hero {
+    position:relative;
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale
+}
+.cd-hero-slider {
+    position:relative;
+    height:360px;
+    overflow:hidden
+}
+.cd-hero-slider li {
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    -webkit-transform:translateX(100%);
+    -moz-transform:translateX(100%);
+    -ms-transform:translateX(100%);
+    -o-transform:translateX(100%);
+    transform:translateX(100%)
+}
+.cd-hero-slider li.selected {
+    position:relative;
+    -webkit-transform:translateX(0);
+    -moz-transform:translateX(0);
+    -ms-transform:translateX(0);
+    -o-transform:translateX(0);
+    transform:translateX(0)
+}
+.cd-hero-slider li.move-left {
+    -webkit-transform:translateX(-100%);
+    -moz-transform:translateX(-100%);
+    -ms-transform:translateX(-100%);
+    -o-transform:translateX(-100%);
+    transform:translateX(-100%)
+}
+.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
+    -webkit-transition:-webkit-transform .5s;
+    -moz-transition:-moz-transform .5s;
+    transition:transform .5s
+}
+@media only screen and (min-width:768px) {
+    .cd-hero-slider {
+        height:500px
+    }
+}
+@media only screen and (min-width:1170px) {
+    .cd-hero-slider {
+        height:680px
+    }
+}
+.cd-hero-slider li {
+    background-position:center center;
+    background-size:cover;
+    background-repeat:no-repeat
+}
+.cd-hero-slider li:first-of-type {
+    background-color:#2c343b
+}
+.cd-hero-slider li:nth-of-type(2) {
+    background-color:#3d4952;
+    /*background-image:url(../assets/tech-1-mobile.jpg)*/
+}
+.cd-hero-slider li:nth-of-type(3) {
+    background-color:#586775;
+    /*background-image:url(../assets/tech-2-mobile.jpg)*/
+}
+.cd-hero-slider li:nth-of-type(4) {
+    background-color:#2c343b;
+    /*background-image:url(../assets/video-replace-mobile.jpg)*/
+}
+.cd-hero-slider li:nth-of-type(5) {
+    background-color:#2c343b;
+    background-image:url(../assets/img.jpg)
+}
+.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
+    position:absolute;
+    width:100%;
+    height:100%;
+    z-index:1;
+    left:0;
+    top:0;
+    padding-top:100px;
+    text-align:center;
+    -webkit-backface-visibility:hidden;
+    backface-visibility:hidden;
+    -webkit-transform:translateZ(0);
+    -moz-transform:translateZ(0);
+    -ms-transform:translateZ(0);
+    -o-transform:translateZ(0);
+    transform:translateZ(0)
+}
+.cd-hero-slider .cd-img-container {
+    display:none
+}
+.cd-hero-slider .cd-img-container img {
+    position:absolute;
+    left:50%;
+    top:50%;
+    bottom:auto;
+    right:auto;
+    -webkit-transform:translateX(-50%) translateY(-50%);
+    -moz-transform:translateX(-50%) translateY(-50%);
+    -ms-transform:translateX(-50%) translateY(-50%);
+    -o-transform:translateX(-50%) translateY(-50%);
+    transform:translateX(-50%) translateY(-50%)
+}
+.cd-hero-slider .cd-bg-video-wrapper {
+    display:none;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    overflow:hidden
+}
+.cd-hero-slider .cd-bg-video-wrapper video {
+    display:block;
+    min-height:100%;
+    min-width:100%;
+    max-width:none;
+    height:auto;
+    width:auto;
+    position:absolute;
+    left:50%;
+    top:50%;
+    bottom:auto;
+    right:auto;
+    -webkit-transform:translateX(-50%) translateY(-50%);
+    -moz-transform:translateX(-50%) translateY(-50%);
+    -ms-transform:translateX(-50%) translateY(-50%);
+    -o-transform:translateX(-50%) translateY(-50%);
+    transform:translateX(-50%) translateY(-50%)
+}
+.cd-hero-slider h2, .cd-hero-slider p {
+    text-shadow:0 1px 3px rgba(0, 0, 0, .1);
+    line-height:1.2;
+    margin:0 auto 14px;
+    color:#fff;
+    width:90%;
+    max-width:400px
+}
+.cd-hero-slider h2 {
+    font-family:segoe ui, lucida grande, Helvetica, Arial, microsoft yahei, FreeSans, Arimo, droid sans, wenquanyi micro hei, hiragino sans gb, hiragino sans gb w3, fontawesome, sans-serif;
+    font-size:1.8rem
+}
+.cd-hero-slider p {
+    font-size:1.4rem;
+    line-height:1.4
+}
+.cd-hero-slider .cd-btn {
+    display:inline-block;
+    padding:1.2em 1.4em;
+    margin-top:.8em;
+    background-color:rgba(212, 68, 87, .9);
+    font-size:1.3rem;
+    font-weight:700;
+    letter-spacing:1px;
+    color:#fff;
+    text-transform:uppercase;
+    box-shadow:0 3px 6px rgba(0, 0, 0, .1);
+    -webkit-transition:background-color .2s;
+    -moz-transition:background-color .2s;
+    transition:background-color .2s
+}
+.cd-hero-slider .cd-btn.secondary {
+    background-color:rgba(22, 26, 30, .8)
+}
+.cd-hero-slider .cd-btn:nth-of-type(2) {
+    margin-left:1em
+}
+.no-touch .cd-hero-slider .cd-btn:hover {
+    background-color:#d44457
+}
+.no-touch .cd-hero-slider .cd-btn.secondary:hover {
+    background-color:#161a1e
+}
+@media only screen and (min-width:768px) {
+    .cd-hero-slider li:nth-of-type(2) {
+        background-image:none
+    }
+    .cd-hero-slider li:nth-of-type(3) {
+        background-image:none
+    }
+    .cd-hero-slider li:nth-of-type(4) {
+        background-image:none
+    }
+    .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
+        padding-top:150px
+    }
+    .cd-hero-slider .cd-bg-video-wrapper {
+        display:block
+    }
+    .cd-hero-slider .cd-half-width {
+        width:45%
+    }
+    .cd-hero-slider .cd-half-width:first-of-type {
+        left:5%
+    }
+    .cd-hero-slider .cd-half-width:nth-of-type(2) {
+        right:5%;
+        left:auto
+    }
+    .cd-hero-slider .cd-img-container {
+        display:block
+    }
+    .cd-hero-slider h2, .cd-hero-slider p {
+        max-width:520px
+    }
+    .cd-hero-slider h2 {
+        font-size:2.4em;
+        font-weight:300
+    }
+    .cd-hero-slider .cd-btn {
+        font-size:1.4rem
+    }
+}
+@media only screen and (min-width:1170px) {
+    .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
+        padding-top:220px
+    }
+    .cd-hero-slider h2, .cd-hero-slider p {
+        margin-bottom:20px
+    }
+    .cd-hero-slider h2 {
+        font-size:3.2em
+    }
+    .cd-hero-slider p {
+        font-size:1.6rem
+    }
+}
+@media only screen and (min-width:768px) {
+    .cd-hero-slider .cd-half-width {
+        opacity:0;
+        -webkit-transform:translateX(40px);
+        -moz-transform:translateX(40px);
+        -ms-transform:translateX(40px);
+        -o-transform:translateX(40px);
+        transform:translateX(40px)
+    }
+    .cd-hero-slider .move-left .cd-half-width {
+        -webkit-transform:translateX(-40px);
+        -moz-transform:translateX(-40px);
+        -ms-transform:translateX(-40px);
+        -o-transform:translateX(-40px);
+        transform:translateX(-40px)
+    }
+    .cd-hero-slider .selected .cd-half-width {
+        opacity:1;
+        -webkit-transform:translateX(0);
+        -moz-transform:translateX(0);
+        -ms-transform:translateX(0);
+        -o-transform:translateX(0);
+        transform:translateX(0)
+    }
+    .cd-hero-slider .is-moving .cd-half-width {
+        -webkit-transition:opacity 0s .5s, -webkit-transform 0s .5s;
+        -moz-transition:opacity 0s .5s, -moz-transform 0s .5s;
+        transition:opacity 0s .5s, transform 0s .5s
+    }
+    .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2), .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
+        -webkit-transition:opacity .4s .2s, -webkit-transform .5s .2s;
+        -moz-transition:opacity .4s .2s, -moz-transform .5s .2s;
+        transition:opacity .4s .2s, transform .5s .2s
+    }
+    .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type, .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
+        -webkit-transition:opacity .4s .4s, -webkit-transform .5s .4s;
+        -moz-transition:opacity .4s .4s, -moz-transform .5s .4s;
+        transition:opacity .4s .4s, transform .5s .4s
+    }
+    .cd-hero-slider .cd-full-width h2, .cd-hero-slider .cd-full-width p, .cd-hero-slider .cd-full-width .cd-btn {
+        opacity:0;
+        -webkit-transform:translateX(100px);
+        -moz-transform:translateX(100px);
+        -ms-transform:translateX(100px);
+        -o-transform:translateX(100px);
+        transform:translateX(100px)
+    }
+    .cd-hero-slider .move-left .cd-full-width h2, .cd-hero-slider .move-left .cd-full-width p, .cd-hero-slider .move-left .cd-full-width .cd-btn {
+        opacity:0;
+        -webkit-transform:translateX(-100px);
+        -moz-transform:translateX(-100px);
+        -ms-transform:translateX(-100px);
+        -o-transform:translateX(-100px);
+        transform:translateX(-100px)
+    }
+    .cd-hero-slider .selected .cd-full-width h2, .cd-hero-slider .selected .cd-full-width p, .cd-hero-slider .selected .cd-full-width .cd-btn {
+        opacity:1;
+        -webkit-transform:translateX(0);
+        -moz-transform:translateX(0);
+        -ms-transform:translateX(0);
+        -o-transform:translateX(0);
+        transform:translateX(0)
+    }
+    .cd-hero-slider li.is-moving .cd-full-width h2, .cd-hero-slider li.is-moving .cd-full-width p, .cd-hero-slider li.is-moving .cd-full-width .cd-btn {
+        -webkit-transition:opacity 0s .5s, -webkit-transform 0s .5s;
+        -moz-transition:opacity 0s .5s, -moz-transform 0s .5s;
+        transition:opacity 0s .5s, transform 0s .5s
+    }
+    .cd-hero-slider li.selected h2 {
+        -webkit-transition:opacity .4s .2s, -webkit-transform .5s .2s;
+        -moz-transition:opacity .4s .2s, -moz-transform .5s .2s;
+        transition:opacity .4s .2s, transform .5s .2s
+    }
+    .cd-hero-slider li.selected p {
+        -webkit-transition:opacity .4s .3s, -webkit-transform .5s .3s;
+        -moz-transition:opacity .4s .3s, -moz-transform .5s .3s;
+        transition:opacity .4s .3s, transform .5s .3s
+    }
+    .cd-hero-slider li.selected .cd-btn {
+        -webkit-transition:opacity .4s .4s, -webkit-transform .5s .4s, background-color .2s 0s;
+        -moz-transition:opacity .4s .4s, -moz-transform .5s .4s, background-color .2s 0s;
+        transition:opacity .4s .4s, transform .5s .4s, background-color .2s 0s
+    }
+}
+.cd-slider-nav {
+    position:absolute;
+    width:100%;
+    bottom:0;
+    z-index:2;
+    text-align:center;
+    height:55px;
+    background-color:rgba(0, 1, 1, .5)
+}
+.cd-slider-nav nav, .cd-slider-nav ul, .cd-slider-nav li, .cd-slider-nav a {
+    height:100%
+}
+.cd-slider-nav nav {
+    display:inline-block;
+    position:relative
+}
+.cd-slider-nav .cd-marker {
+    position:absolute;
+    bottom:0;
+    left:0;
+    width:60px;
+    height:100%;
+    color:#d44457;
+    background-color:#fff;
+    box-shadow:inset 0 2px 0 currentColor;
+    -webkit-transition:-webkit-transform .2s, box-shadow .2s;
+    -moz-transition:-moz-transform .2s, box-shadow .2s;
+    transition:transform .2s, box-shadow .2s
+}
+.cd-slider-nav .cd-marker.item-2 {
+    -webkit-transform:translateX(100%);
+    -moz-transform:translateX(100%);
+    -ms-transform:translateX(100%);
+    -o-transform:translateX(100%);
+    transform:translateX(100%)
+}
+.cd-slider-nav .cd-marker.item-3 {
+    -webkit-transform:translateX(200%);
+    -moz-transform:translateX(200%);
+    -ms-transform:translateX(200%);
+    -o-transform:translateX(200%);
+    transform:translateX(200%)
+}
+.cd-slider-nav .cd-marker.item-4 {
+    -webkit-transform:translateX(300%);
+    -moz-transform:translateX(300%);
+    -ms-transform:translateX(300%);
+    -o-transform:translateX(300%);
+    transform:translateX(300%)
+}
+.cd-slider-nav .cd-marker.item-5 {
+    -webkit-transform:translateX(400%);
+    -moz-transform:translateX(400%);
+    -ms-transform:translateX(400%);
+    -o-transform:translateX(400%);
+    transform:translateX(400%)
+}
+.cd-slider-nav ul::after {
+    clear:both;
+    content:"";
+    display:table
+}
+.cd-slider-nav li {
+    display:inline-block;
+    width:60px;
+    float:left
+}
+.cd-slider-nav li.selected a {
+    color:#2c343b
+}
+.no-touch .cd-slider-nav li.selected a:hover {
+    background-color:transparent
+}
+.cd-slider-nav a {
+    display:block;
+    position:relative;
+    padding-top:35px;
+    font-size:1rem;
+    font-weight:700;
+    color:#a8b4be;
+    -webkit-transition:background-color .2s;
+    -moz-transition:background-color .2s;
+    transition:background-color .2s
+}
+.cd-slider-nav a::before {
+    content:'';
+    position:absolute;
+    width:24px;
+    height:24px;
+    top:8px;
+    left:50%;
+    right:auto;
+    -webkit-transform:translateX(-50%);
+    -moz-transform:translateX(-50%);
+    -ms-transform:translateX(-50%);
+    -o-transform:translateX(-50%);
+    transform:translateX(-50%);
+    /*background:url(../assets/cd-icon-navigation.svg) no-repeat 0 0*/
+}
+.no-touch .cd-slider-nav a:hover {
+    background-color:rgba(0, 1, 1, .5)
+}
+.cd-slider-nav li:first-of-type a::before {
+    background-position:0 0
+}
+.cd-slider-nav li.selected:first-of-type a::before {
+    background-position:0 -24px
+}
+.cd-slider-nav li:nth-of-type(2) a::before {
+    background-position:-24px 0
+}
+.cd-slider-nav li.selected:nth-of-type(2) a::before {
+    background-position:-24px -24px
+}
+.cd-slider-nav li:nth-of-type(3) a::before {
+    background-position:-48px 0
+}
+.cd-slider-nav li.selected:nth-of-type(3) a::before {
+    background-position:-48px -24px
+}
+.cd-slider-nav li:nth-of-type(4) a::before {
+    background-position:-72px 0
+}
+.cd-slider-nav li.selected:nth-of-type(4) a::before {
+    background-position:-72px -24px
+}
+.cd-slider-nav li:nth-of-type(5) a::before {
+    background-position:-96px 0
+}
+.cd-slider-nav li.selected:nth-of-type(5) a::before {
+    background-position:-96px -24px
+}
+@media only screen and (min-width:768px) {
+    .cd-slider-nav {
+        height:80px
+    }
+    .cd-slider-nav .cd-marker, .cd-slider-nav li {
+        width:95px
+    }
+    .cd-slider-nav a {
+        padding-top:48px;
+        font-size:1.1rem;
+        text-transform:uppercase
+    }
+    .cd-slider-nav a::before {
+        top:18px
+    }
+}
+.cd-main-content {
+    width:90%;
+    max-width:768px;
+    margin:0 auto;
+    padding:2em 0
+}
+.cd-main-content p {
+    font-size:1.4rem;
+    line-height:1.8;
+    color:#999;
+    margin:2em 0
+}
+@media only screen and (min-width:1170px) {
+    .cd-main-content {
+        padding:3em 0
+    }
+    .cd-main-content p {
+        font-size:1.6rem
+    }
+}
+.no-js .cd-hero-slider li {
+    display:none
+}
+.no-js .cd-hero-slider li.selected {
+    display:block
+}
+/*
+.no-js .cd-slider-nav {
+     display:none
+ }*/
  
 //集团 tab 切换
-$('#services-soft-wrap li').on('click',function () {
+$('.cd-primary-nav').on('click', function (event) {
+    if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
+});
+uploadVideo($('.cd-hero-slider'));
+$('.cd-slider-nav li').on('click', function (event) {
+    event.preventDefault();
+    var selectedItem = $(this);
+    if (!selectedItem.hasClass('selected')) {
+        var selectedPosition = selectedItem.index(),
+            activePosition = $('.cd-hero-slider .selected').index();
+        if (activePosition < selectedPosition) {
+            nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
+        } else {
+            prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
+        }
+        updateNavigationMarker(selectedPosition + 1);
+    }
+});
+
+function nextSlide(container, pagination, n) {
+    var visibleSlide = container.find('.selected'),
+        navigationDot = pagination.find('.selected');
+    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one(
+        'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
+            visibleSlide.removeClass('is-moving');
+        });
+    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
+    navigationDot.removeClass('selected')
+    pagination.find('li').eq(n).addClass('selected');
+    checkVideo(visibleSlide, container, n);
+}
+
+function prevSlide(container, pagination, n) {
+    var visibleSlide = container.find('.selected'),
+        navigationDot = pagination.find('.selected');
+    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one(
+        'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
+            visibleSlide.removeClass('is-moving');
+        });
+    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass(
+        'move-left');
+    navigationDot.removeClass('selected');
+    pagination.find('li').eq(n).addClass('selected');
+    checkVideo(visibleSlide, container, n);
+}
+
+function uploadVideo(container) {
+    container.find('.cd-bg-video-wrapper').each(function () {
+        var videoWrapper = $(this);
+        if (videoWrapper.is(':visible')) {
+            var videoUrl = videoWrapper.data('video'),
+                video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' +
+                    videoUrl + '.webm" type="video/webm" /></video>');
+            video.appendTo(videoWrapper);
+        }
+    });
+}
+
+function checkVideo(hiddenSlide, container, n) {
+    if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause();
+    if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0)
+        .play();
+}
+
+function updateNavigationMarker(n) {
+    $('.cd-marker').removeClassPrefix('item').addClass('item-' + n);
+}
+$.fn.removeClassPrefix = function (prefix) {
+    this.each(function (i, el) {
+        var classes = el.className.split(" ").filter(function (c) {
+            return c.lastIndexOf(prefix, 0) !== 0;
+        });
+        el.className = $.trim(classes.join(" "));
+    });
+    return this;
+};
+/*$('#services-soft-wrap li').on('click',function () {
     var _index = $(this).index();
  
     $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)')
@@ -9,7 +85,7 @@ $(&#39;#services-soft-wrap li&#39;).on(&#39;click&#39;,function () {
     $('#services-soft-wrap li').eq(_index).children('div').removeClass('displaynone');
     // $('.ai-success-stories-list-bar').css('left',100*_index);
     $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
-});
+});*/
  
 //车场 tab 切换
 $('#services-park-wrap li').on('click',function () {
@@ -29,6 +29,7 @@
     <link type="text/css" rel="stylesheet" href="style.css?a=2">
     <link type="text/css" rel="stylesheet" href="css/responsive.css">
     <link type="text/css" rel="stylesheet" href="css/services.css">
+    <link type="text/css" rel="stylesheet" href="css/serslide.css">
  
     <!-- Color CSS -->
     <link type="text/css" rel="stylesheet" href="css/color/color7.css">
@@ -68,7 +69,43 @@
 <!--banner end-->
 <div class="services-content">
     <!--集团 sta-->
-    <section  class="section">
+    <section class="cd-hero">
+        <div class="cd-slider-nav">
+            <nav>
+                <span class="cd-marker item-3"></span>
+                <ul>
+                    <li class=""><a href="#0">1</a></li>
+                    <li class=""><a href="#0">2</a></li>
+                    <li class="selected"><a href="#0">3</a></li>
+
+
+                </ul>
+            </nav>
+        </div>
+
+        <ul class="cd-hero-slider">
+            <li class="move-left">
+                <div class="cd-full-width">
+                    23
+                </div>
+            </li>
+            <li class="move-left">
+                <div class="cd-half-width">
+                    <p>23</p>
+                </div>
+                <div class="cd-half-width cd-img-container">
+                </div>
+            </li>
+            <li class="selected from-right">
+                <div class="cd-half-width cd-img-container">
+                    3r3
+                </div>
+                <div class="cd-half-width">
+                </div>
+            </li>
+        </ul>
+    </section>
+    <!--<section  class="section">
         <div class="container">
             <ul class="row servicessection-wrap">
                 <li class="text-center col-md-6 services-wrap-left-1" id="services-wrap-sass"></li>
@@ -119,7 +156,7 @@
                 </li>
             </ul>
         </div>
-    </section>
+    </section>-->
     <!--集团 end-->
     <!--车场 sta-->
     <section class="section">