@charset "utf-8";
/* CSS Document */

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.focus{height:880px;width:100%; background:url(../images/banner-index.jpg) no-repeat center center; background-size:cover; overflow: hidden; position: relative}
.focus video{min-height: 100%; min-width: 100%;}
.picbanner{position:absolute; width:660px; left: 50%; margin-left:-330px; top:50%;z-index:50; margin-top:-156px; text-align: center;}
.content_banner{text-align: center;}
.banner_title{color:#FFF;font-size:18px;}
.banner_line{border-bottom:1px solid #ffcc33; width:50px; height:20px; margin:0 auto;}
.banner_line1{width:50px; height: 20px; margin: 0 auto;}
.header-text.btns {padding:10px 0; height: 80px;}
.btns {text-align: center;}
#head-title {font-size: 36px;line-height: 80px; color: #fff; font-weight: bold;}

span.typed-cursor {top: -5px; position: relative;}
.typed-cursor { opacity: 1; padding: 10px 2px; background: #ffffff; margin-left: 5px; -webkit-animation: blink 0.5s linear infinite; -moz-animation: blink 0.5s linear infinite; animation: blink 0.5s linear infinite;}

.tis { margin-top: 30px; text-align: center; color: #fff}
.tis ul li{float: left; width: 33.33%; line-height: 18px; background: url(../images/tis_li_bg.png) no-repeat center right}
.tis ul li i{font-style:normal;}
.tis ul li p{margin-top: 20px;font-size: 16px;}
.tis ul li:nth-child(3){background: none}

@media screen and (max-width:1024px){
	#head-title {font-size:32px;}
}
@media screen and (max-width:768px){
	.focus{height:500px;width:100%;}
	#head-title {font-size:24px;}
}
@media screen and (max-width:414px){
	.focus video{display:none}
	#head-title {font-size:16px;}
	.banner_line1{height: 10px;}
	.picbanner{margin-top:-125px;width: 100%;left: 0; margin-left: 0;}
	.tis ul li p{font-size: 12px;}
}

.clearfix {zoom: 1;}
.clearfix:after, .clearfix:before {content: "";display: table;}

.reason{padding-top:6.25%;}
.reason .sec-tit span{margin:0 29px}
.container{padding: 0 80px;width: 100%;}
.sec-tit{text-align:center;color:#000034}
.sec-tit h3{position:relative;font-size:40px}
.sec-tit h3:before{content:'';display:block;width:27px;height:1px;background:#5910ae;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%)}
.sec-tit h4{font-size:16px;font-family:SourceLight;margin-top:44px}

.reason-list {margin-top: 4.72%;}
.reason-list .reason-left,.reason-list .reason-left-img{float:left;width:50%;text-align:right;position:relative}
.reason-list .reason-right,.reason-list .reason-right-img{float:right;width:50%;text-align:left;position:relative}
.reason-list li:first-child{margin-bottom:5.76%}
.reason-list li:first-child .reason-left-img{padding-right:65px}
.reason-list li:first-child .reason-left-img:after{content:'';display:inline-block;background:url(../images/process.png) no-repeat;width:141px;height:809px;position:absolute;top:-8px;right:-115px}
.reason-list li:first-child .reason-right-img{padding-left:65px}
.reason-list li:not(first-child){font-size:14px;line-height:28px;margin-bottom:116px}
.reason-list li:not(first-child) .reason-left{padding-right:184px}
.reason-list li:not(first-child) .reason-left:after{content:'';display:inline-block;width:165px;height:165px;position:absolute;top:-58px;right:-82px}
.reason-list li:not(first-child) .reason-left p{color:#69637c;position:relative}
.reason-list li:not(first-child) .reason-left p:after{content:'';display:inline-block;width:46px;height:46px;background:url(../images/cry.png);position:absolute;top:7px;right:-58px}
.reason-list li:not(first-child) .reason-right{padding-left:184px}
.reason-list li:not(first-child) .reason-right p{color:#0c003e;position:relative}
.reason-list li:not(first-child) .reason-right p:before{content:'';display:inline-block;width:46px;height:46px;background:url(../images/smile-m.png);position:absolute;top:7px;left:-58px}
.reason-list li:nth-child(2) .reason-left{padding-left:94px}
.reason-list li:nth-child(2) .reason-left:after{background:url(../images/reason3.png)}
.reason-list li:nth-child(2) .reason-right{padding-right:150px}
.reason-list li:nth-child(3){padding-left:204px}
.reason-list li:nth-child(3) .reason-left{padding-left:0}
.reason-list li:nth-child(3) .reason-left:after{background:url(../images/reason4.png)}
.reason-list li:nth-child(3) .reason-right{padding-right:0}
.reason-list li:nth-child(4){padding-right:100px}
.reason-list li:nth-child(4) .reason-left{padding-left:52px}
.reason-list li:nth-child(4) .reason-left:after{background:url(../images/reason5.png)}
.reason-list li:nth-child(4) .reason-right{padding-right:34px}
.reason-list li:nth-child(5){padding-left:255px}
.reason-list li:nth-child(5) .reason-left{padding-left:0}
.reason-list li:nth-child(5) .reason-left:after{background:url(../images/reason6.png)}
.reason-list li:nth-child(5) .reason-right{line-height:60px}
.reason-list li:nth-child(6){padding-right:106px;margin-bottom:0}
.reason-list li:nth-child(6) .reason-left{padding-left:64px}
.reason-list li:nth-child(6) .reason-left:after{background:url(../images/reason7.png)}
.reason-list li:nth-child(6) .reason-right{padding-right:52px}

.make{margin-top:5.58%; background: #fff; padding: 50px 0;}
.make-list{margin-top:30px}
.make-list ul{margin-left:-42px;margin-right:-42px}
.make-list ul li{float:left;display:inline-block;width:33.3333%;padding:0 42px;margin-top:86px;position:relative}
.make-list ul li:before{content:'';display:block;width:172px;height:57px;position:absolute;left:42px;top:-16px}
.make-list ul li .make-con{background:url(../images/make_list_bg.png);height:142px;margin-left:36px;padding:60px 34px 34px 34px;border-radius:16px;box-shadow:-1px 5px 10px 0 rgba(56,46,89,.1);-webkit-box-shadow:-1px 5px 10px 0 rgba(56,46,89,.1);-moz-box-shadow:-1px 5px 10px 0 rgba(56,46,89,.1)}
.make-list ul li .make-con p{font-size:14px;line-height:24px;color:#69637c;padding-left:38px;position:relative}
.make-list ul li .make-con p:before{content:'';display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;color:#fff;background:#0c5526;position:absolute;border-radius:50%;left:0;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%)}
.make-list li:first-child{position:relative}
.make-list li:first-child:before{background:url(../images/make1.png) no-repeat}
.make-list li:first-child p:before{content:'1'!important}
.make-list li:nth-child(2):before{background:url(../images/make2.png) no-repeat}
.make-list li:nth-child(2) p:before{content:'2'!important}
.make-list li:nth-child(3):before{background:url(../images/make3.png) no-repeat}
.make-list li:nth-child(3) p:before{content:'3'!important}
.make-list li:nth-child(4):before{background:url(../images/make4.png) no-repeat}
.make-list li:nth-child(4) p:before{content:'4'!important}
.make-list li:nth-child(5):before{background:url(../images/make5.png) no-repeat}
.make-list li:nth-child(5) p:before{content:'5'!important}
.make-list li:nth-child(6):before{background:url(../images/make6.png) no-repeat}
.make-list li:nth-child(6) p:before{content:'6'!important}

.solution{margin-top:4%}
.solution .solution-list{padding:4.6% 4.72% 0 4.72%}
.solution-list ul{margin-left:-2.28%;margin-right:-2.28%}
.solution-list ul li{display:inline-block;float:left;width:33.3333%;padding:0 2.28%;position:relative;}
.solution-list ul li .solution-con{padding:35% 55px;  background: #008d43}
.solution-list ul li .solution-con p{font-size:22px;line-height:28px;color:#fff;position:relative}
.solution-list ul li .solution-con p:before{content:'';display:block;width:49px;height:44px;position:absolute;left:0;top:-60px}
.solution-list ul li .solution-con div{font-size:12px;line-height:28px;color:#b2ddc6;margin-top:6.8%}
.solution-list li:first-child{margin-top:7%}
.solution-list li:first-child p:before{background:url(../images/solution4.png) no-repeat}
.solution-list li:nth-child(2) p:before{background:url(../images/solution5.png) no-repeat}
.solution-list li:nth-child(3){margin-top:7%}
.solution-list li:nth-child(3) p:before{background:url(../images/solution6.png) no-repeat}

.advantage{position:relative;background:url(../images/advantage_bg.jpg) no-repeat;padding-top:5.2%;padding-bottom:2.5%;margin-top:7.8%}
.advantage .advantage-con{width:42%}
.advantage .advantage-img{padding-bottom:42px;border-bottom:1px dashed #54be3a;margin-bottom:15%}
.advantage .advantage-list{margin-bottom:54px}
.advantage .advantage-list p{font-size:22px;color:#fff;padding-left:14px;margin-bottom:22px}
.advantage .advantage-list p:before{content:'';display:inline-block;width:6px;height:6px;background:#54be3a;border-radius:50%;position:relative;left:-14px;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%)}
.advantage .advantage-list p:after{content:'';display:inline-block;width:6px;height:6px;background:#54be3a;border-radius:50%;position:relative;right:-14px;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%)}
.advantage .advantage-list div{font-size:12px;line-height:30px;color:#ccc}
.advantage .rimg{position:absolute;top:100px;right:0;width:47%}


@media (max-width:1440px){
.sec-tit h3 {font-size: 36px;}
.advantage .advantage-img{padding-bottom:26px;margin-bottom:7%;padding-right:20%}
.advantage .advantage-list{margin-bottom:32px}
.advantage .advantage-list p{margin-bottom:8px}
}
@media (max-width:1366px){.reason-list li:nth-child(5) .reason-right{line-height:28px}
.reason-list li:not(first-child) .reason-left{padding-right:154px}
.reason-list li:not(first-child) .reason-right{padding-left:154px}
.solution-list ul li .solution-con p:before{height:35px;background-size:40px 35px;top:-40px}
.solution-list ul li .solution-con p{font-size:18px;line-height:24px}
.solution-list ul li .solution-con{padding:29% 50px}
.solution-list li:nth-child(2) .solution-con{padding-top:31%}
}
@media (max-width:1200px){
.container {padding: 0 36px;}
.reason{background:0 0}
.reason-list li:not(first-child){margin-bottom:102px}
.make-list ul{margin-left:-21px;margin-right:-21px}
.make-list ul li{padding:0 21px}
.solution .solution-list{padding:4.6% 0 0 0}
}
@media (max-width:1100px){.reason-list li:not(first-child) .reason-left:after{width:120px;height:120px;background-size:120px!important;top:-33px;right:-60px}
.reason-list li:not(first-child) .reason-left{padding-right:130px}
.reason-list li:not(first-child) .reason-right{padding-left:130px}
.reason-list li:nth-child(n) .reason-left{padding-left:0}
.reason-list li:nth-child(n) .reason-right{padding-right:0}
.reason-list li:nth-child(3){padding-left:154px}
.reason-list li:nth-child(4){padding-right:36px}
.reason-list li:nth-child(5){padding-left:152px}
.reason-list li:nth-child(6){padding-right:0}
.solution-list ul li{padding:0 1%}
.solution-list ul{margin-left:-1%;margin-right:-1%}
.solution-list ul li .solution-con div{line-height:24px}
.advantage .advantage-con{width:50%}
.advantage .advantage-img{padding-right:40%}
.advantage .advantage-list p{font-size:20px;margin-bottom:4px}
.advantage .advantage-list div{line-height:24px}
}
@media (max-width:1024px){
.sec-tit h4 {margin-top: 34px;}
.sec-tit h3 {font-size: 30px;}
.container {padding: 0 20px;}
.reason-list li:first-child .reason-left-img:after{display:none}
.reason-list li:nth-child(n){padding-left:0;padding-right:0}
.reason-list li:not(first-child){margin-bottom:68px}
.make-list ul{margin-left:-5px;margin-right:-5px}
.make-list ul li{padding:0 5px}
.make-list ul li .make-con{padding:60px 15px 34px 15px}
.make-list ul li:before{left:4px}
.solution-list ul li img{display:none}
.solution-list ul{margin:0}
.solution-list ul li{background:linear-gradient(to bottom right,#6c0fc1,#290786);background:-webkit-linear-gradient(left top,#6c0fc1,#290786);background:-o-linear-gradient(bottom right,#6c0fc1,#290786);background:-moz-linear-gradient(bottom right,#6c0fc1,#290786);border-radius:6px;padding:0;margin:0 10px;width:calc(33.33% - 20px)}
.solution-list li:first-child,.solution-list li:nth-child(3){margin-top:0}
.solution-list ul li .solution-con{padding:65px 20px 30px 20px!important}
.solution-list ul li .solution-con p:before{height:30px;background-size:33px 30px;left:50%;transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%)}
.solution-list ul li .solution-con p{font-size:16px;text-align:center}
.advantage .advantage-list{margin-bottom:22px}
}
@media (max-width:768px){
.sec-tit h4 {font-size: 14px;}
.sec-tit h3 {font-size: 26px;}
.container {padding: 0 15px;}
.reason-list li:not(first-child) .reason-left:after{width:60px;height:60px;text-align:center;font-size:14px;background:#008d43!important;border-radius:50%;top:0;right:-33px;color:#fff;padding:9px 14px;line-height:20px}
.reason-list li:nth-child(2) .reason-left:after{content:'企业形象'}
.reason-list li:nth-child(3) .reason-left:after{content:'用户体验'}
.reason-list li:nth-child(4) .reason-left:after{content:'开发成本'}
.reason-list li:nth-child(5) .reason-left:after{content:'后台维护'}
.reason-list li:nth-child(6) .reason-left:after{content:'网站排名'}
.reason-list li:not(first-child) .reason-right{padding-left:88px}
.reason-list li:not(first-child) .reason-left{padding-right:88px}
.reason-list li:not(first-child) .reason-right p:before{width:40px;height:40px;background-size:40px;left:-44px}
.reason-list li:not(first-child) .reason-left p:after{width:40px;height:40px;background-size:40px;right:-44px}
.reason-list li:first-child .reason-left-img{padding-right:46px}
.reason-list li:first-child .reason-right-img{padding-left:46px}
.make-list{margin-top:-20px}
.make-list ul li{width:50%}
.solution-list ul li{width:calc(33.33% - 10px);margin:0 5px}
.advantage .advantage-con{width:100%}
.advantage .advantage-img{padding-right:60%;padding-bottom:17px;margin-bottom:3%}
.advantage .rimg{position:unset;width:80%;margin:0 auto}
}
@media (max-width:640px){
.container {padding: 0 10px;}
.solution-list ul li{width:100%;margin:0;margin-bottom:2%}
.solution-list ul li .solution-con div{margin-top:1.8%}
}
@media (max-width:480px){
.sec-tit h4 {font-size: 12px;}
.sec-tit h3 {font-size: 18px;}
.reason-list li:first-child{margin-bottom:53px}
.reason-list li:not(first-child) .reason-left:after{top:-40px;left:0;width:88px;height:30px;line-height:30px;border-radius:4px;padding:0}
.reason-list .reason-left{width:100%}
.reason-list .reason-right{width:100%;margin-top:10px}
.reason-list li:not(first-child) .reason-left p:after{left:-44px}
.reason-list li:nth-child(n) .reason-left{padding-right:0;padding-left:45px;text-align:left}
.reason-list li:not(first-child) .reason-right{padding-left:45px}
.reason-list li:first-child .reason-left-img{padding-right:25px}
.reason-list li:first-child .reason-right-img{padding-left:25px}
.make-list{margin-top:6px}
.make-list ul li{width:100%;margin-top:40px}
.make-list ul li:before{background-size:140px!important}
.make-list ul li .make-con{height:auto;margin-left:24px}
.advantage .advantage-list p{font-size:16px;padding-left:6px}
.advantage .advantage-list p:before{left:-6px}
.advantage .advantage-list p:after{right:-6px}
}
@media (max-width:400px){.banner-txt{left:5.5%}
}