body,div,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,i,button,input,p,span{margin:0; padding:0; list-style:none;}
body{font:12px "微软雅黑",Helvetica,Arial,sans-serif; margin:0 auto;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
img{border:0;}

.flex{display:flex;}
.flex-col{justify-content:space-between;}
.flex-col-c{justify-content:center;}
.flex-row-c{align-items:center;}

.wrap{width:100%; max-width:1200px; margin:0 auto;}

.pc-head{height:88px;}
.pc-head .logo{}
.pc-head .logo img{width:224px; height:39px;}
.pc-head .menu{padding-left:50px;}
.pc-head .menu li{height:20px; padding:0 20px; border-left:1px solid #d2d2d2; display:flex; align-items:center;}
.pc-head .menu li:nth-child(1){border:none;}
.pc-head .menu li a{font-size:16px; color:#333; line-height:1;}
.pc-head .menu li.active a, .pc-head .menu li a:hover{font-size:16px; color:#217fe9}
.pc-head .head-tel{font-size:20px; color:#217fe9;}
.pc-head .head-search{}
.pc-head .head-search input{width:200px; height:30px; border:1px solid #217fe9; border-radius:4px 0 0 4px; background:#fff; padding-left:5px; font-size:14px;}
.pc-head .head-search button{width:50px; height:30px; background:#217fe9; border-radius:0 4px 4px 0; color:#fff; border:none; font-size:16px;}

.banner{width:100%; overflow:hidden; position:relative;}
.banner .hd{width:100%; overflow:hidden; position:absolute; bottom:20px; z-index:1;}
.banner .hd ul{display:flex; justify-content:center;}
.banner .hd ul li{margin:0 5px; width:15px; height:15px; line-height:14px; text-align:center; background:rgba(255,255,255,0.7); cursor:pointer; border-radius:50%;}
.banner .hd ul li.on{background:#fff; color:#fff;}
.banner .bd{position:relative; height:100%; z-index:0;}
.banner img{width:100%; display:block;}

.index-title-1{text-align:center; padding-top:55px;}
.index-title-1 h2{font-size:33px;}
.index-title-1 p{font-size:16px; color:#a1a1a1; margin-top:10px;}
.index-title-2{text-align:center; font-size:36px; color:#fff; padding-top:45px;}

/* 首页 */
.index-1{width:100%; background:url(../images/index-1-bg.jpg) center top no-repeat; background-size:100% auto;}
.index-1 ul li{background:#fff; border:1px solid #ddd; text-align:center;;}
.index-1 ul li img{width:84px; height:72px;}
.index-1 ul li dl dt{font-size:20px;}
.index-1 ul li dl dd{color:#818181;line-height:2;}
.index-1 ul li dl p{font-size:14px; font-weight:bold;}

.index-2{width:100%; background:url(../images/index-2-bg.jpg) no-repeat;  background-size:auto 100%;}
.index-2 ul{background:#fff; border-radius:10px;}
.index-2 ul li{display:flex; align-items:center; justify-content:center; padding:25px 0;}
.index-2 ul li img{width:56px; height:45px;}
.index-2 ul li dl{margin-left:20px;}
.index-2 ul li dl dt{font-size:16px;}
.index-2 ul li dl dd{color:#969696;}

.index-3{width:100%; background:url(../images/index-3-bg.jpg) repeat-x; background-size:auto 100%;}
.index-3 .owl-carousel{margin-top:50px;}
.index-3 .item{width:370px; height:258px;}
.index-3 .item h3{font-size:25px; color:#fff; font-weight:500;}
.index-3 .item i{width:50px; height:1px; background:#fff; display:block;}
.index-3 .item p{font-size:16px; color:#fff;}
.index-3 .owl-buttons{display:none;;}
.index-3-button{width:220px; height:46px; margin:35px auto 0; display:flex; justify-content:center; align-items:center; border-radius:40px; font-size:16px; color:#fff;
    background: -webkit-linear-gradient(left, #377ee0 , #3b9afd); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #377ee0, #3b9afd); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #377ee0, #3b9afd); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #377ee0 , #3b9afd); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(1) .item{
    background: -webkit-linear-gradient(left, #5870fb , #c577ff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #5870fb, #c577ff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #5870fb, #c577ff); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #5870fb , #c577ff); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(2) .item{
    background: -webkit-linear-gradient(left, #40acf7 , #737cff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #40acf7, #737cff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #40acf7, #737cff); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #40acf7 , #737cff); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(3) .item{
    background: -webkit-linear-gradient(left, #ed6281 , #f09d5e); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ed6281, #f09d5e); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ed6281, #f09d5e); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ed6281 , #f09d5e); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(4) .item{
    background: -webkit-linear-gradient(left, #5870fb , #c577ff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #5870fb, #c577ff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #5870fb, #c577ff); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #5870fb , #c577ff); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(5) .item{
    background: -webkit-linear-gradient(left, #40acf7 , #737cff); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #40acf7, #737cff); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #40acf7, #737cff); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #40acf7 , #737cff); /* 标准的语法 */
}
.index-3 .owl-wrapper .owl-item:nth-child(6) .item{
    background: -webkit-linear-gradient(left, #ed6281 , #f09d5e); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ed6281, #f09d5e); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ed6281, #f09d5e); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ed6281 , #f09d5e); /* 标准的语法 */
}

.index-4{display:flex; flex-flow:row wrap; padding:0 0 60px;}
.index-4 li{width:25%; text-align:center; margin-top:50px;}
.index-4 li p{font-size:16px; margin-top:15px;}

.index-5{width:100%;}
.index-5 ul{margin-top:40px;}
.index-5 li{width:205px; height:252px; background:#fff; border-radius:10px; text-align:center; padding-top:50px;}
.index-5 li p{margin-top:30px; font-size:14px;}

/* 产品中心 */
.goods-banner-d{width:100%; background:#f6f6f6;}
.goods-banner-d ul{padding:40px 0;}
.goods-banner-d ul li a{display:flex; justify-content:center; align-items:center;;}
.goods-banner-d ul li a p{color:#333; font-weight:bold;}

.goods-1{width:100%; background:url(../images/goods-1-bg.jpg) no-repeat; background-size:cover;}
.goods-1 ul{flex-flow:row wrap;}
.goods-1 ul li{background:#fff; border:1px solid #ddd; text-align:center; padding:40px 0;}
.goods-1 ul li dl dd{color:#666;}

.goods-2{width:100%; background:url(../images/goods-2-bg.jpg) center no-repeat; background-size:cover; padding-bottom:30px;}
.goods-2 ul{background:#fff; border-radius:10px; padding:30px 0; margin-top:30px;}
.goods-2 ul li{text-align:center;;}
.goods-3 img{display:block;}

/* 网站建设 */
.website-1 ul li{background:#fff; border:1px solid #ddd; text-align:center;;}
.website-1 ul li dl dt{font-size:20px;}
.website-1 ul li dl dd{margin-top:15px;}
.website-1 ul li img{width:80px; height:78px;}
.website-1 ul li p{border-top:1px dashed #ddd; display:flex; justify-content:center;}
.website-2{width:100%; background:url(../images/website-2-bg.jpg) center no-repeat; background-size:cover;}
.website-2 ul{}
.website-2 ul li{position:relative; color:#fff;}
.website-2-t{width:100%; display:flex; align-items:center; justify-content:center; position:absolute; top:-45px; left:0}
.website-2-t h2{font-family:Impact; font-size:75px;}
.website-2-t dl{margin-left:20px;}
.website-2-d{background:#1b78e7; display:flex; flex-flow:column; justify-content:center; align-items:center; padding-top:20px;}
.website-2-d p{font-size:18px; line-height:2;}

.website-3 ul li{display:flex; flex-flow:column; align-items:center; justify-content:center;}
.website-3-img{width:97px; height:97px; border:1px solid #4484fc; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.website-3-img img{width:39px; height:38px;}
.website-3 ul li p{font-size:14px;}

.contact{width:100%; padding:60px 0;}
.contact-t{text-align:center;}
.contact-t dt{font-size:30px; color:#666;}
.contact-t dd{font-size:14px; color:#666; margin-top:20px;}
.contact-d{text-align:center; margin-top:30px;}
.contact-d dt{display:flex; align-items:center; justify-content:center; font-size:26px;}
.contact-d dt img{margin-right:10px;}
.contact-d dd{font-size:40px; color:#e21e32; font-weight:bold; margin-top:10px;}

/* 模板 */
.wrap-1{width:1200px; margin:0 auto;}
.moban-list{background:#eee; padding:10px 0 20px;}
.moban-list-t{padding:20px 30px 10px; background:#fff; margin-bottom:20px;}
.moban-list-t ul{flex-flow:row wrap;}
.moban-list-t li{margin:0 12px 10px;}
.moban-list-t li a{padding:6px 10px; font-size:16px; color:#333; display:block; border-radius:4px;}
.moban-list-t li a:hover, .moban-list-t li a.active{background:#17A1FF; color:#fff;}
.moban-list-t ul:nth-child(1){justify-content:center;}
.moban-list-t ul:nth-child(1) li a{font-weight:bold; font-size:16px;}
.moban-list-d ul{flex-flow:row wrap;}
.moban-list-d li{width:285px; margin:0 20px 15px 0; padding:8px; border-radius:5px; border-radius:4px; background:#fff;}
.moban-list-d li .img{width:100%; height:200px; display:flex; justify-content:center; align-items:center; overflow: hidden;}
.moban-list-d li .img img{width:100%;}
.moban-list-d li p{margin-top:8px; font-size:14px; color:#666;}
.moban-list-d li:hover{box-shadow:0 0 10px 5px rgba(0,0,0,0.2);}

.moban-content-l{width:870px; background:#fff;}
.moban-content-l-t{border-bottom:1px solid #eee;}
.moban-content-l-t h2{font-size:20px; padding:20px; line-height:26px; font-weight:bold;}
.moban-content-l-t .case-url{display:flex; align-items:center;}

.moban-content-l-t a{margin-right:20px; font-size:14px; display:flex; align-items:center;}
.moban-content-l-t a span{font-size:16px; margin-right:4px;}
.moban-content-l-d{background:#fff; padding:20px;}
.moban-content-l-d img{width:100%;}
.moban-content-r{width:300px;}
.moban-content-r-1{background:#fff; padding:20px 30px; margin-bottom:30px;}
.moban-content-r-1 li{height:33px; line-height:33px; display:flex; justify-content:space-between; font-size:14px;}
.moban-content-r-1 li .r{color:#838383;}
.moban-content-r-2{background:#fff; padding:20px 30px; margin-bottom:30px;}
.moban-content-r-2-t{font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;}
.moban-content-r-2-d{flex-flow:row wrap;}
.moban-content-r-2-d li{margin:10px 5px 0;}
.moban-content-r-2-d li a{padding:6px 10px; font-size:14px; color:#333; display:block; border-radius:4px;}
.moban-content-r-2-d li a:hover{background:#17A1FF; color:#fff;}
.moban-content-r-3{background:#fff; padding:20px 10px 20px 0;}
.moban-content-r-3 .moban-content-r-2-t{width:260px; margin-left:20px;}
.moban-content-r-3-d{flex-flow:row wrap;}
.moban-content-r-3-d li{width:85px; margin:20px 0 0 10px;}
.moban-content-r-3-d li .img{width:100%; height:60px; display:flex; align-items:center; overflow: hidden;}
.moban-content-r-3-d li p{color:#333; margin-top:5px;}
.moban-content-r-3-d li:hover{box-shadow:0 0 4px 2px rgba(0,0,0,0.2);}


/* 底部 */
.index-foot{width:100%; background:#f6f7fb; padding:30px 0 40px;}
.index-foot-t{text-align:center;}
.index-foot-t dt{font-size:30px; color:#666;}
.index-foot-t dd{font-size:14px; color:#666; margin-top:20px;}
.index-foot-d{text-align:center; margin-top:30px;}
.index-foot-d dt{display:flex; align-items:center; justify-content:center; font-size:26px;}
.index-foot-d dt img{margin-right:10px;}
.index-foot-d dd{font-size:40px; color:#e21e32; font-weight:bold; margin-top:10px;}

.foot{width:100%; background:#282828;}
.foot-t{padding:40px 0 30px;}
.foot-t li{height:20px; padding:0 20px; border-left:1px solid #d2d2d2; display:flex; align-items:center;}
.foot-t li:nth-child(1){border:none;}
.foot-t li a{font-size:14px; color:#ddd; line-height:1;}
.foot-d{text-align:center; color:#ddd; font-size:14px; padding-bottom:30px;}

.m-page {width:100%; padding:20px 0;}
.dux-page{display:flex; justify-content:center; flex-flow:row wrap;}
.m-page a {padding:5px 10px; text-align:center; font-family:"Arial"; display:block; margin:0 5px 5px 0; color:#666; border:1px solid #ccc; border-radius:5px; text-decoration:none; font-weight:bold; background:#fff;}
.m-page span {width:37px; height:39px; line-height:39px; text-align:center; font-family:"Lucida Console"; display:block; margin-right:4px; color:#777;}
.m-page a:hover,.m-page a.active-page, .m-page a.page-num-current{border:1px solid #fff; background:#17A1FF; color:#fff;}
.m-page a.prePage,.m-page a.nextPage { font-family:"Tahoma";}
.m-page .hidden { display:none;}

/* PC端 */
@media screen and (min-width:721px) {
    .mobile-head, .mobile-foot-tel, .mobile-foot-tel-t{display:none;}
    .index-1 ul{display:flex; padding:80px 0;}
    .index-1 ul li{width:calc(33.33% - 20px); margin:0 10px; padding:35px 0 50px;}
    .index-1 ul li dl dt{padding:30px 0 20px;}
    .index-1 ul li dl dd{margin-bottom:30px;}
    .index-1 ul li dl p{margin-top:20px;}
    .index-2{height:430px;}
    .index-2 ul{display:flex; padding:50px 0; margin-top:60px;}
    .index-2 ul li{width:25%; border-left:1px solid #ddd;}
    .index-2 ul li:nth-child(1){border:none;}
    .index-3{height:642px;}
    .index-3 .item{padding:45px 25px;}
    .index-3 .item i{margin:35px 0 25px;}
    .index-4{display:flex; flex-flow:row wrap;}
    .index-5{height:440px; background:url(../images/index-5-bg.jpg) no-repeat; background-size:auto 100%;}
    .goods-banner-d ul{padding:40px 0;}
    .goods-banner-d ul li{width:25%; border-left:1px solid #7d7d7d;}
    .goods-banner-d ul li:nth-child(1){border:none;}
    .goods-banner-d ul li a img{width:63px; height:61px;}
    .goods-banner-d ul li a p{font-size:18px; margin-left:15px;}
    .goods-1 ul li{width:calc(33.33% - 20px); margin:20px 10px;}
    .goods-1 ul li img{width:83px; height:75px;}
    .goods-1 ul li dl dt{font-size:20px; margin-top:30px;}
    .goods-1 ul li dl dd{font-size:16px; margin-top:20px;}
    .goods-2 ul li{width:25%; border-left:1px solid #ddd; padding:0 10px;}
    .goods-2 ul li:nth-child(1){border:none;}
    .goods-2 ul li p{line-height:1.8; margin-top:20px;}
    .goods-3 img{margin:40px 0; width:100%;}
    .website-1 ul{padding:40px 0;}
    .website-1 ul li{width:calc(25% - 40px); margin:0 20px; padding-top:30px;}
    .website-1 ul li img{margin-top:30px;}
    .website-1 ul li p{height:78px; padding:15px 40px 0; line-height:2; margin-top:40px;}
    .website-2 ul{display:flex; padding:168px 0 130px;}
    .website-2 ul li{width:calc(50% - 40px); margin:0 20px; position:relative; color:#fff;}
    .website-2-t dl dt{font-size:30px;}
    .website-2-d{height:240px;}
    .website-3 ul{padding:50px 0 80px;}
    .website-3 ul span{font-size:30px; color:#a9a9a9;}
    .website-3 ul li p{margin-top:15px;}
    /* 模板 */
    .moban-list-d li:nth-child(4n){margin-right:0;}
}

/* 移动端 */
@media screen and (max-width:720px) {
    .pc-head{display:none;}
    .mobile-head{height:50px; padding:0 20px;}
    .mobile-head .logo img{height:30px;}
    .mobile-head-r{font-size:20px; color:#333;}
    .mobile-menu{padding-top:30px;}
    .mobile-menu li{text-align:center; padding:15px 0;}
    .mobile-menu li a{font-size:16px; color:#fff;}
    .index-title-1{padding-top:30px;}
    .index-title-1 h2{font-size:20px;}
    .index-title-1 p{font-size:12px;}
    .index-title-2{text-align:center; font-size:20px; padding-top:30px;}
    .index-1 ul li{margin:20px; padding:30px 0;}
    .index-1 ul li dl dt{padding:20px 0 10px;}
    .index-1 ul li dl dd{margin-bottom:20px;}
    .index-1 ul li dl p{margin-top:10px;}
    .index-2{padding-bottom:20px;}
    .index-2 ul{width:calc(100% - 40px); padding:10px 30px; margin:30px 20px;}
    .index-2 ul li{border-top:1px solid #ddd; justify-content:flex-start; padding:20px 10px;}
    .index-2 ul li:nth-child(1){border:none;}
    .index-3{padding:0 10px 40px;}
    .index-3 .item{padding:35px 25px;}
    .index-3 .item i{margin:25px 0 20px;}
    .index-5{background:url(../images/index-5-bg-m.jpg) no-repeat; background-size:cover; padding-bottom:30px;}
    .index-5 ul{flex-flow:row wrap; justify-content: center;;}
    .index-5 ul li{width:calc(50% - 20px); margin:10px;}
    .goods-banner-d ul{flex-flow:row wrap; padding:10px 0;}
    .goods-banner-d ul li{width:50%; border:none; padding:20px 0;}
    .goods-banner-d ul li a img{width:40px; height:39px;}
    .goods-banner-d ul li a p{font-size:14px; margin-left:10px;}
    .goods-1 ul{padding:30px 0;}
    .goods-1 ul li{width:calc(50% - 20px); margin:10px 10px;}
    .goods-1 ul li img{width:60px; height:54px;}
    .goods-1 ul li dl dt{font-size:16px; margin-top:20px;}
    .goods-1 ul li dl dd{font-size:12px; margin-top:10px;}
    .goods-2 ul{width:calc(100% - 40px); margin:30px auto 0; flex-flow:row wrap;}
    .goods-2 ul li{width:50%; padding:10px;}
    .goods-2 ul li img{width:40px; height:40px;}
    .goods-2 ul li p{line-height:1.5; margin-top:20px;}
    .goods-3 img{width:calc(100% - 40px); margin:30px auto;}
    .website-1 ul{flex-flow:row wrap; padding:20px 0;}
    .website-1 ul li{width:calc(50% - 10px); margin:10px 5px;}
    .website-1 ul li dl{margin:20px 0 30px;}
    .website-1 ul li p{height:70px; padding:15px 6px 0; line-height:1.5; margin-top:30px;}
    .website-2 ul{padding:60px 0 50px;}
    .website-2 ul li{ margin:60px 20px 0; position:relative; color:#fff;}
    .website-2-t dl dt{font-size:20px;}
    .website-2-d{height:180px;}
    .website-2-d p{font-size:14px;}
    .website-3 ul{padding:30px 0; flex-flow:row wrap; justify-content:center;}
    .website-3 ul li{width:50%; margin-top:20px;}
    .website-3 ul li p{margin-top:10px;}
    .website-3 ul span{display:none;}
    .foot-t li{padding:0 10px;}
    .foot-t li a{font-size:12px;}
    .mobile-foot-tel{width:100%; height:60px; background:#e21e32; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; position:fixed; bottom:0; left:0}
    .mobile-foot-tel span{margin-right:10px; font-size:24px;}
    .mobile-foot-tel-t{width:100%; height:60px;}
    /* 模板 */
    .wrap-1{width:100%;}
    .moban-list-t{padding:15px 15px 10px;}
    .moban-list-t li{margin:5px 10px;}
    .moban-list-d{padding:0 10px;}
    .moban-list-d ul{justify-content:space-between;}
    .moban-list-d li{width:calc(50% - 10px); margin:0 0 20px;}
    .moban-list-d li .img{ height:160px;}
    .moban-content-l{width:100%;}
    .moban-content-r{display:none;}
}