html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
img{border:0 none;}
ul, li{list-style-type:none}
body{font-family:"微软雅黑";color: #666;}
a{ text-decoration: none; outline: none;display:block ; color: #666;}
.fn-clear{zoom:1}
.clear{ clear:both;}
em,i{ font-style: normal;}
/*样式开始*/
.web-nav{width: 1200px;margin: 25px auto 0px; overflow: hidden;}
.web-nav img{ float: left; width: 140px;}
.web-banner{width: 100%;overflow: hidden;background: url(/files/image/web-ban.jpg) no-repeat center;text-align: center;position: relative;}
.web-banner .chu-dns-banner-width01{position: absolute;color: #fff;top: 288px;width: 100%;margin: 0 auto;z-index: 1;}
.web-banner .chu-dns-banner-width01 div{width: 100%;margin: 0 auto;}
.web-banner .chu-dns-banner-width01 h2{font-size: 70px;color: #fff;line-height: 80px;}
.web-banner .chu-dns-banner-width01 p{font-size: 28px;color: #fff;line-height: 40px;padding: 42px 0 0 0;}
.web-banner .chu-dns-banner-width01 .ck-more{width: 156px; height: 46px; line-height: 46px; text-align: center;color: #fff; margin-top: 56px;  background: #c2a07b; font-size: 16px; border-radius: 40px;}
.web-banner .chu-dns-banner-width01 .ck-more a{color: #fff;display: block;}
.web-banner .chu-dns-banner-width01 .ck-more a:hover{color: #fff; background: #b08f6a; display: block; border-radius: 50px;}
    .web-banner .chu-dns-banner-width01 .move-btn {
        width: 68px;
        height: 68px;
        position: relative;
        margin-top: 59px;
        animation: change 1.5s infinite;
        animation-delay: 0s;
    }

        .web-banner .chu-dns-banner-width01 .move-btn span {
            position: absolute;
            display: block;
            border: 1px solid #fff;
            border-radius: 50%;
            width: 68px;
            height: 68px;
            margin: 120px auto 0px auto;
            background: url(/files/image/banner-next1.png) no-repeat center center;
            cursor: pointer;
            animation: downico 1.5s ease-out infinite;
        }

@keyframes downico {
    0% {
        top: 0;
        opacity: 1;
    }

    35% {
        top: 50%;
        opacity: 0;
    }

    65% {
        top: -50%;
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}


.web-banner .chu-dns-banner-width01 .move-btn img{ width: 100%}
.web-banner .chu-dns-banner-width02{background: url(/files/image/web-ban.jpg) no-repeat bottom;height: 880px;}


/*六大优势*/
.web-ys{ width: 100%; height: auto; background: #272727;}
.web-ys-weap{ width: 1200px; margin: 0 auto;}
.web-ys-weap .ys-tit{ margin: 0 auto; text-align: center; color: #fff; font-size: 30px; padding: 69px 0  77px  0;}
.web-ys-contain{ width: 100%;overflow: hidden;}
.web-ys-contain ul{margin: 0; padding: 0; overflow: hidden;}
.web-ys-contain ul li{width: 33.3%; float: left; list-style: none; margin-bottom: 55px; }
.web-ys-contain ul li .top-tb{width: 66px;height:  66px; margin: 5px auto;}
.web-ys-contain ul li .top-tb img{width:100%}
.web-ys-contain ul li .top-dongtai{width: 66px;height:  66px; margin: 5px auto; display: none;}
.web-ys-contain ul li .top-dongtai img{width:100%}
.web-ys-contain ul li:hover .top-tb{display: none;}
.web-ys-contain ul li:hover .top-dongtai{display: block; visibility: visible !important; animation-name: swing !important;}
.web-ys-contain ul li .bot-wz{width:100%}
.web-ys-contain ul li .bot-wz h3{text-align: center; line-height: 30px; color: #fff; font-size: 16px; font-weight: normal;}
.web-ys-contain ul li .bot-wz h5{text-align: center; line-height: 30px;color: #fff; font-size: 14px; font-weight: normal;}
.web-more{ width: 166px; height: 40px; line-height: 40px; text-align: center; color:#fff; font-size: 14px; background: #c2a07b; border-radius: 40px; margin: 0px auto 60px auto;}
.web-more a{ color:#fff; display: block;}
.web-more a:hover{ color:#fff; display: block; background: #b08f6a; border-radius: 40px;}

/*标准环节*/
.web-huanj{ width: 100%; height: auto; overflow: hidden; background: #fff;}
.web-huanj-weap{ margin: 0 auto;}
.web-huanj-weap h3{ margin: 0 auto; text-align: center; color: #222222; font-size: 30px; padding: 69px 0  78px  0;}
.cl_box{ position: relative;}
.p_f_03 .cl_con03{position: fixed;z-index:3; left:0; top:0; right:0; margin-top:0 !important;}
.c03_bottom_line{width: 23%;height: 1px;background: #acacac;position: absolute;}
.commer_con03 .c03_bottom_line{bottom: 180px;}
.brand_con03 .c03_bottom_line{bottom: 180px;}
.cl_c03_bottom{margin:20px auto 90px auto;position: relative;}
.cl_c03_bottom .c03_lay{width: 990px;margin:0 auto; background: #fff;}
.cl_c03_bottom dl{width: 220px;float: left;position: relative;display: inline-block;}
.cl_c03_bottom dl dt{height: 100px;line-height: 51px;width:100px;margin-left: 4px;position: relative; border: 1px solid #c5c5c5; border-radius: 50px;}
.cl_c03_bottom dl dt img{vertical-align:middle; margin: 25px auto; display: block;}
.cl_c03_bottom dl dt em{position: absolute;left: 22px;top:0;width: 0px;overflow: hidden;}

.cl_c03_bottom dl dd.dian{border:1px solid #acacac;width: 100px;height: 100px;
  border-radius: 100%;position: relative;
  margin:20px 0 20px 18px;
}
.cl_c03_bottom dl dd.dian img { width: 60%; margin: 20px auto; vertical-align: middle; }
.cl_c03_bottom dl dd.line{width: 54%;height: 1px;background: #acacac;
  position: absolute;top: 50px;left: 106px;
}
.cl_c03_bottom dl dd.line span{position: absolute;background: #c2a07b;display: inline-block;width: 0%;height: 1px;}
.cl_c03_bottom dl dd.text{width: 110px; text-align: center; line-height: 40px;}
.cl_c03_bottom dl:last-child{width: auto;}
.cl_c03_bottom dl:last-child dd.line{display: none;}

.p_f_03 .cl_con03{position: fixed;z-index:3; left:0; top:0; right:0; margin-top:0 !important;}
.left_line{left: 0px;}
.left_line span{display: inline-block;background: #c2a07b;width: 0%;height: 100%;position: absolute;}
.right_line{right: 0px;}
.right_line span{display: inline-block;background: #c2a07b;width: 0%;height: 100%;position: absolute;}



/*网站策划建设*/
.web-ceh{ width: 100%; height: 713px; background:url(/files/image/web-dt-1.jpg) no-repeat center;}
.web-ceh-weap{ width: 1200px; height: 713px; margin: 0 auto;}
.web-ceh-weap h3{ margin: 0 auto; text-align: center; color: #222222; font-size: 30px; padding: 69px 0  78px  0;}
.web-ceh-weap-fl{ width: 750px; height: 486px; float: left; }
.web-ceh-weap-fl img{ width:100%; }
.web-ceh-weap-fr{ width: 430px; height: 486px; float: right;  }
.web-ceh-weap-fr ul{margin: 0; padding: 0; }
.web-ceh-weap-fr ul li{width: 100%; float: left; margin-bottom: 18px;}
.web-ceh-weap-fr ul li .fltb{width: 66px; height: 62px; float: left;}
.web-ceh-weap-fr ul li .fltb img{width: 100%;}
.web-ceh-weap-fr ul li .frwz{ float: right; width: 360px; }
.web-ceh-weap-fr ul li .frwz h5{  font-size: 16px; color: #333333 !important; text-align: left; line-height: 30px;}
.web-ceh-weap-fr ul li .frwz p{ float: left; font-size: 14px; color: #666666;text-align: left; line-height: 24px;}


/*案例*/
.web-anli{ width: 100%; height: auto; background: #fff;}
.web-anli-weap{ width: 1200px; margin: 0 auto; height: auto;}
.web-anli-weap h3{ margin: 0 auto; text-align: center; color: #222222; font-size: 30px; padding: 69px 0  78px  0;}
.web-anli-weap-bot{ width: 1200px; margin: 0 auto; height: auto; overflow: hidden;}
.web-anli-weap-bot ul{ margin: 0; padding: 0; overflow: hidden;}
.web-anli-weap-bot ul li{ width: 380px; height: auto; float: left; margin-bottom:30px; margin-right: 30px;    position: relative;}
.web-anli-weap-bot ul li:nth-child(3n){ margin-right: 0 !important;}
.web-anli-weap-bot ul li .tt-tp{ width: 380px; height: 255px; float: left;}
.web-anli-weap-bot ul li .tt-tp img{ width: 100%;}
.web-anli-weap-bot ul li .wz-ny{ width: 378px; border: 1px solid #e5e5e5; float: left; border-top: none;}
.web-anli-weap-bot ul li .wz-ny h3{ margin: 10px 20px 5px 20px; text-align: left; color: #333333; font-size: 16px; padding: 0;}
.web-anli-weap-bot ul li .wz-ny p{ margin:5px 20px 10px 20px; color: #666666; font-size: 14px; text-align: left; line-height: 30px;}
.web-anli-weap-bot ul li .tt-tp-bg{ width: 380px; height: 255px; float: left;display: none;background: rgba(0,0,0,.7);     position: absolute; top: 0;}
.web-anli-weap-bot ul li .tt-tp-bg .show-more{ width: 146px; height: 36px; color:#fffefe; line-height: 36px; border: 1px solid #9a9b9d; text-align: center; margin: 109px auto; border-radius: 40px; background: url(/files/image/web-tp-more.png) no-repeat left 16px center;}
.web-anli-weap-bot ul li:hover .tt-tp-bg{display: block;}
.web-anli-weap-bot ul li:hover .tt-tp-bg .show-more{display: block;}
.web-anli-weap-bot ul li .tt-tp-bg .show-more a{ color:#fffefe; cursor: pointer; margin-left: 20px;}
.web-anli-more{ width: 166px; height: 40px; border-radius: 40px; margin: 30px auto 60px auto;  line-height: 40px; box-shadow: 0 5px 15px rgba(189,108,104,.36); color: #fff; text-align: center; background: #c2a07b; font-size: 14px;}
.web-anli-more a{color: #fff;}


/*悬浮效果样式*/
.side {
    position: fixed;
    width: 48px;
    height: 275px;
    right: 0;
    top: 500px;
    z-index: 100
}

    .side ul li {
        width: 48px;
        height: 48px;
        float: left;
        position: relative;
    }

        .side ul li .sidebox, .side ul li .sidebox-kf {
            position: absolute;
            width: 48px;
            height: 48px;
            top: 0;
            right: 0;
            transition: all .3s;
            background: #282f3d;
            color: #fff;
            font: 14px/54px "微软雅黑";
            overflow: hidden;
            line-height: 48px;
        }

.gl-show {
    background: #c2a07b !important;
}

.side ul li .sidetop {
    width: 48px;
    height: 48px;
    line-height: 48px;
    display: inline-block;
    background: #282f3d;
    transition: all .3s
}

    .side ul li .sidetop:hover {
        background: #c2a07b;
        opacity: 1;
        filter: Alpha(opacity=100)
    }

.side ul li img {
    float: left;
    margin: 9px;
}

.side ul li .sidebox-1 {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 0;
    right: 0;
    transition: all .3s;
    background: #282f3d;
    color: #fff;
    font: 14px/54px "微软雅黑";
    overflow: hidden;
    line-height: 48px;
}

.ctrl_qrcode {
    position: relative !important;
}

.wxtp-bg {
    width: 170px;
    display: none;
    position: absolute;
    right: 62px;
    top: -60px;
    height: 194px;
    z-index: 9999 !important;
    border-radius: 10px;
    background: linear-gradient(80deg,#323a4e,#282f3e);
    background: -webkit-linear-gradient(10deg,#323a4e,#282f3e);
    background: -webkit-linear-gradient(80deg,#323a4e,#282f3e);
}

.wxtp-bg-wx {
    width: 146px;
    height: 146px;
    margin: 10px;
}

.wxtp-bg-wz {
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 14px;
}

.wxtp-bg-wx img {
    margin: 0 !important;
    float: none !important;
    padding-left: 2px;
}

.ctrl_qrcode:hover .wxtp-bg {
    display: block;
    transition: all .3s
}

.wx-xftb {
    display: none;
    width: 10px;
    height: 11px;
    position: absolute;
    right: 60px;
    top: 10px;
}

.ctrl_qrcode:hover .wx-xftb {
    display: block;
    transition: all .3s
}

.ctrl_qrcode:hover .sidebox-1 {
    background: #c2a07b !important;
    transition: all .3s
}