@charset "utf-8";

/* CSS Document */
/* 娓呴櫎娴姩 */
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }

.banner{height:450px;}
.Homeleft {width: 50px;height: 50px;line-height: 50px;text-align: center;color: rgb(255, 255, 255);position: absolute;top: 45%;cursor: pointer;z-index: 899999;left: 100px;display: none;transition: all 0.2s ease;-ms-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;}
.Homeright {width: 50px;height: 50px;line-height: 50px;text-align: center;color: rgb(255, 255, 255);position: absolute;top: 45%;cursor: pointer;z-index: 899999;right: 100px;display: none;transition: all 0.2s ease;-ms-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;}
.banner:hover .Homeleft, .banner:hover .Homeright{display:block;}
.scroll_horizontal .plus, .scroll_horizontal .minus{display:none !important;}

.webappSpecial_white{background:#ffffff;}
.webappSpecial{width: 1400px;margin: 0 auto;padding-top: 62px;padding-bottom: 17px;}
.webappSpecial h1{color: #333333;font-family: 'Microsoft YaHei';margin-bottom: 58px;font-size: 30px;text-align: center;margin-top: 0;font-weight: normal;}

.contrast_left {padding-right: 200px;background: #7098fe;}
.contrast_left p{text-align: right;}
.contrast_right h2{text-align: left;}
.contrast_right p{text-align: left;}
.contrast_right{text-align: left;padding-left: 200px;position: relative;background: #8160f9;}
.webappSpecial_contrast{clear: both;;overflow: hidden;}
.contrast_con p{font-size: 16px;color: #ffffff;font-family: 'Microsoft YaHei';line-height: 43px;}
.contrast_right img{position: absolute;top: -53px;right: 22px;}

/* 搴曢儴杞挱鍥� */
.webappSpecial_template{width: 1300px;padding-bottom: 0;}
.webappSpecial_template h1{margin-bottom: 8px;}
.webappSpecial_template ul li{float: left;margin-right: 20px;}
.webappSpecial_template ul li .template{margin-bottom: 48px;box-shadow: 0px 0px 20px #cccccc;}
.webappSpecial_template ul{clear: both;overflow: hidden;padding: 50px 0 0;}

.webappSpecial_banner{height: 450px;background-repeat:no-repeat;background-size:cover;background-position: 50% 50%;}
.webapp-buy{background:#fff;padding-bottom:17px;clear: both;overflow: hidden;}
.webapp-package-href{display:block;background:#fff;margin-top:20px;color:#333333;font:14px/48px microsoft yahei;}
.webapp-package-href img{vertical-align: middle;margin: -2px 0 0 7px;}
#bottom .wName_new{margin-top:6px;}


.webapp_case{background-size:cover;padding:70px 0 54px;}
.webapp_case p{color:#ffffff;font-family:microsoft yahei;font-size:48px;}
.webapp_case a{display:block;background:#ffffff;color:#0066cc;width:240px;line-height:46px;font-family:microsoft yahei;font-size:18px;margin:43px auto 0;}
.webapp_case a:hover{color:#0066cc;}

/* 鑾峰彇鐢ㄦ埛鐨勬柟寮� */
.webappSpecial .baidu{background-color: #005bf2;color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.webappSpecial .weixin{background-color: #3cad37;color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.webappSpecial_bd_wx{/*background-color: #fff;*/font-family: 'Microsoft YaHei';/* font-weight: normal; */}
.webappSpecial_bd_wx .webappSpecial{padding-bottom: 80px;}
.webappSpecial_bd_wx h1{color: #333333;font-family: 'Microsoft YaHei';margin-bottom: 20px;font-size: 30px;text-align: center;margin-top: 0;font-weight: normal;}
.webappSpecial_bd_wx h3{font-size: 18px;color: #333333;margin-bottom: 45px;font-family: 'Microsoft YaHei';font-weight: normal;}
.webappSpecial_bd_wx .bd_wx{display: flex;justify-content: space-between;margin-bottom: 50px;}
.webappSpecial_bd_wx .bd_wx li{width: 49%;box-shadow: 5px 5px 5px #ccc;height: 205px;padding-top: 50px;box-sizing: border-box;transition: all .3s;}
.webappSpecial_bd_wx .bd_wx li img{margin-right: 10px;vertical-align: bottom;width: 100%;}
.webappSpecial_bd_wx .bd_wx li div{display: inline-block;line-height: 2;width: 74%;}
.webappSpecial_bd_wx .bd_wx li div .title1{font-size: 24px;text-align: left;}
.webappSpecial_bd_wx .bd_wx li div p{font-size: 16px;text-align: left;}
/* 鍏ュ彛 */
.webappSpecial_bd_wx .rukou {display: flex;-webkit-display: flex;justify-content: space-between;-webkit-justify-content: space-between;margin:-50px 0 120px;position: relative;}
.webappSpecial_bd_wx .rukou li{height: 369px;width: 50%;float:left;}
.webappSpecial_bd_wx .rukou li:nth-of-type(1){text-align: left;}
.webappSpecial_bd_wx .rukou li:nth-of-type(2){text-align: right;}
.webappSpecial_bd_wx .rukou li div{font-size: 16px;color: #fff;line-height: 1;margin-top: -30px;line-height: 1.5;}
.webappSpecial_bd_wx .rukou li .left_content{text-align: right;padding-right: 190px; }
.webappSpecial_bd_wx zfb_tp .rukou{
	-webkit-margin:0px;
	}
.webappSpecial_bd_wx .rukou li .right_content{text-align: left;padding-left: 190px;}
.webappSpecial_bd_wx .rukou li .left_content h1{text-align: right;}
.webappSpecial_bd_wx .rukou li .right_content h1{text-align: left;}
.webappSpecial_bd_wx .rukou li div h1{color: #fff;margin-bottom:5px;}
.webappSpecial_bd_wx .rukou li div p{line-height: 2.4;}
.webappSpecial_bd_wx .rukou .bd_yuan{position: absolute; left: 150px; bottom: 70px;transition: 1s all;-webkit-transition: 1s all;}
.webappSpecial_bd_wx .rukou .wx_yuan{position: absolute; right: 150px; bottom: 70px;transition: 1s all;-webkit-transition: 1s all;}
.webappSpecial_bd_wx .rukou .phone{position: absolute; top: -90px;left: 49%;  transform: translateX(-50%);-webkit-transform: translateX(-50%);width:263px;z-index:99;}
.webappSpecial_bd_wx .rukou .bd_yuan:hover,.webappSpecial_bd_wx .rukou .wx_yuan:hover{transform: rotate(360deg);-webkit-transform: rotate(360deg);transition: 1s all;-webkit-transition: 1s all;cursor: pointer;}
/* 璧嬭兘 */
.webappSpecial_bd_wx .funeng{display: flex;justify-content: space-between;}
.webappSpecial_bd_wx .funeng>div{width: 49%;box-shadow: 5px 5px 5px #ccc;height: 430px;box-sizing: border-box;overflow: hidden;transition: all .3s;-webkit-transition: all .3s;}
.webappSpecial_bd_wx .funeng .section1{padding: 10px;padding: 40px 55px 25px;position: relative;font-size: 22px;}
.webappSpecial_bd_wx .funeng ul{display: flex;justify-content: space-around;}
.webappSpecial_bd_wx .funeng ul li{position: relative;z-index: 2;cursor: pointer;}
.webappSpecial_bd_wx .funeng ul:before{content: '';border-top: 1px dashed #fff;position: absolute;top: 88px;width: 80%;}
.webappSpecial_bd_wx .funeng .section1 p{margin-top: 10px;}
.webappSpecial_bd_wx .funeng .section2{background-color: #fff;height: 60%;}
.webappSpecial_bd_wx .funeng .section2 h2{font-size: 24px;color: #333;padding: 45px 0 25px;font-weight: 500;}
.webappSpecial_bd_wx .funeng .section2 p{font-size: 16px;color: #666;line-height: 2;}
.webappSpecial_bd_wx .bd_wx li:hover,.webappSpecial_bd_wx .funeng>div:hover{transform: translate3d(0,-3px,0);transition: all .3s;-webkit-transform: translate3d(0,-3px,0);-webkit-transition: all .3s;} 

/*浠栦滑閮藉湪鐢ㄥ疂鐩掑皬绋嬪簭*/
.webappSpecial_use {background-color: #fff;font-family: "microsoft yahei";}
.webappSpecial_use .package_tab{display: flex;justify-content: space-between;width: 335px;margin:0 auto 60px;}
.webappSpecial_use .package_tab li{line-height: 42px;font-size: 18px;border-radius: 20px;width: 160px;box-shadow: 5px 5px 5px #ccc;cursor: pointer;}
.webappSpecial_use .package_con{position: relative;height: 250px;}
.webappSpecial_use .package_content{display: flex;justify-content: space-between;position: absolute;top: 0;left: 0;}
.webappSpecial_use .package_content li{border-radius: 10px;box-shadow: 5px 5px 5px #ccc;transition: all .3s;-webkit-transition: all .3s;cursor: pointer;width: 22.5%;transition: all .3s;-webkit-transition: all .3s;position: relative;}
.webappSpecial_use .package_content li:hover{transform: translate3d(0,-3px,0);-webkit-transform: translate3d(0,-3px,0);transition: all .3s;-webkit-transition: all .3s;} 
.webappSpecial_use .package_content li img{width: 100%;}
.webappSpecial_use .tabOne_bd{background-color: #005bf2;color: #fff;}
.webappSpecial_use .tabOne_wx{background-color: #3cad37;color: #fff;}
.webappSpecial_use .package_content li .pic_wx{position: absolute;top: 0;left: 0;opacity: 0; transition: 0.6s all ease-in-out;-webkit-transition: 0.6s all ease-in-out;}
.webappSpecial_use .package_content li:hover .pic_wx{opacity: 1;transition: 0.6s all ease-in-out;-webkit-transition: 0.6s all ease-in-out;}
.more{color:#333; font-size: 16px;line-height: 45px;width: 200px;border: 1px solid #333;display: block;margin: 40px auto;}
.more:hover{background: #c00;color: #fff;border: 1px solid #c00;}

/*娴烽噺妯℃澘*/
#templatelistBg { background:#f3f3f3; background-size: cover;padding:73px 0 94px;}
#templatelistBg .pro_title{color: #333333;font-family: 'Microsoft YaHei';margin-bottom: 20px;font-size: 30px;text-align: center;margin-top: 0;font-weight: normal;}
.moban {top: 190px; height: 530px; overflow: hidden;}
.moban_show li { width: 280px; height: 385px; overflow: hidden; float: left; margin: 45px 10px; padding: 10px; background:rgba(224, 224, 224, 1); -moz-transition: all 0.3s linear 0s; -webkit-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s;}
.moban_show li:hover { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}
.hImg { overflow: hidden; height: 100%; background: #fff;}
.hImg img {width:100%;}
.moban_mobile{display:none;}
.showall_btn{
  display: block;
  width: 200px;
  line-height: 45px;
  background: #fff;
  color: #333;
  border: 1px solid #333;
  margin: 0 auto;
  font-size: 16px;
  font-family: "microsoft yahei";
}
.showall_btn:hover{
  background:#c00;
  color:#fff;
  border:1px solid #c00;
}

/* 榧犳爣缁忚繃鐗规晥 */
.webappSpecial_bd_wx .bd_wx li .iconbg,
.webappSpecial_bd_wx .funeng li .iconbg,
.webappSpecial_bd_wx .rukou li .iconbg
{display: inline-block;width: 100px;height: 100px;border-radius: 200px;transition: 0.6s all ease-in-out;position: relative;cursor: pointer;}
.webappSpecial_bd_wx .bd_wx li .iconbg:before,
.webappSpecial_bd_wx .funeng li .iconbg:before,
.webappSpecial_bd_wx .rukou li .iconbg:before{transition: 0.6s all ease-in-out;content: "";display: block;width: 80%;height: 80%;
  background-color: #fff;opacity: 1;position: absolute;top: 7px;left: 7px;border-radius: 100px;z-index: -1;transition: 0.6s all ease-in-out;}
.webappSpecial_bd_wx .bd_wx li .iconbg:hover,
.webappSpecial_bd_wx .funeng li .iconbg:hover,
.webappSpecial_bd_wx .rukou li .iconbg:hover
{transition: 0.6s all ease-in-out;transform: scale(1.1);}
.webappSpecial_bd_wx .bd_wx li .iconbg:hover:before,
.webappSpecial_bd_wx .funeng li .iconbg:hover:before,
.webappSpecial_bd_wx .rukou li .iconbg:hover:before
{animation: ripples-out 1.2s ease-in-out infinite;}

@-webkit-keyframes ripples-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@-moz-keyframes ripples-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@-o-keyframes ripples-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes ripples-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}








@media screen and (max-width: 1182px){
	.webappSpecial{width: 100%;padding:5% 2%;box-sizing: border-box;}
	.webappSpecial_addvantage ul li{width: 23%;margin-right: 2%;}
	.webappSpecial h1{margin-bottom: 5%;}
	.webappSpecial_entrance{padding-bottom:0;padding-left:0;padding-right:0;}
	.webappSpecial_entrance ul{padding: 1% 2% 0;}
	.webappSpecial_entrance ul li{width: 18.4%;margin-right: 2%;height: 210px;}
	.webappSpecial_entrance ul li p{font-size: 16px;padding: 0 5%;}
	.webappSpecial_entrance ul li div{padding-top: 35px;}
	.webappSpecial_package ul{font-size:0;-webkit-adjust-text-size:none;text-align:center;}
	.webappSpecial_package li{width: 23.5%;margin:0 2% 2% 0;display:inline-block;float:none;}
	.webappSpecial_package li:nth-of-type(4n){margin-right:0;}
	.webappSpecial_package_top h2{font-size: 20px;}
	.webappSpecial_package_top p{font-size: 14px;line-height: 20px;}
	.webappSpecial_btn{display: block;float: left;width: 42.5%;}
	.webappSpecial_detail{margin: 0 5%;}
	.contrast_right{padding-left: 180px;}
	.contrast_left{padding-right: 180px;}
	.contrast_con p{font-size: 14px;}
	.webappSpecial_banner {height: 350px;}
	.webapp-buy{padding-bottom: 5%;}
	.webappSpecial_package li{width: 18.4%;}
	.webappSpecial_package li:nth-of-type(4n){margin-right: 2%;}
	.webappSpecial_package li:nth-of-type(5n){margin-right: 0;}
}

@media screen and (max-width: 1024px){
	.webappSpecial_package_top h2{font-size: 18px;}
	.webappSpecial_package_top p{font-size: 14px;}
	.webappSpecial_price{margin: 0 0 23px;}
	.contrast_con>img{display: none;}
	.contrast_right{padding-left: 0;}
	.contrast_left{padding-right: 0;}
	.contrast_con h2{text-align: center}
	.contrast_con p{text-align: center}
	.contrast_right img{top: -87px;right: 22px;}
	.contrast_con{overflow: visible;}
	.webappSpecial_banner {height: 300px;}
	.webappSpecial_package li{width: 32%;}
	.webappSpecial_package li:nth-of-type(3n){margin-right:0;}
	.webappSpecial_package li:nth-of-type(4n){margin-right:2%;}

	.webapp_case{padding:50px 0 34px;}
	.webapp_case p{font-size:36px;}
	.webapp_case a{width:200px;line-height:40px;font-size:16px;margin:30px auto 0;}
	
	.webappSpecial_bd_wx .rukou li .left_content{padding-right: 170px;}
	.webappSpecial_bd_wx .rukou li .right_content{padding-left: 170px;}
	.webappSpecial_bd_wx .bd_wx li{padding-top: 25px;}
	.webappSpecial_bd_wx .bd_wx li div{width: 65%;}
	.webappSpecial_bd_wx .rukou .bd_yuan{width: 170px;left: 20px;}
	.webappSpecial_bd_wx .rukou .wx_yuan{width: 170px;right: 20px;}
}

@media screen and (max-width: 800px) and (min-width: 600px){
	.webappSpecial_addvantage ul li:nth-of-type(4n){margin-right: 0;}
	.webappSpecial_entrance ul li:nth-of-type(4n){margin-right: 0;}
}

@media screen and (max-width: 850px){
	.webappSpecial_package_content p{font-size: 12px;}
}

@media screen and (max-width: 800px){
	.webappSpecial_addvantage ul li{width: 23.5%;margin-right: 2%;}
	.webappSpecial_addvantage ul li h3{font-size: 22px;}
	.webappSpecial_addvantage ul li:nth-of-type(5n){margin-right: 2%;}
	.webappSpecial h1{margin-bottom: 7%;font-size: 28px;}
	.webappSpecial{padding-top:7%;}
	.webappSpecial_entrance ul li{width: 23.5%;}
	.webappSpecial_entrance ul li:nth-of-type(5n){margin-right: 2%;}
	.webappSpecial_banner {height: 250px;}
	
	.webappSpecial_bd_wx .bd_wx li img{width: 80px;}
	.webappSpecial_bd_wx .bd_wx li div{width: 70%;}
	.webappSpecial_bd_wx .bd_wx li div p{font-size: 14px;}
	
/* 	.webappSpecial_bd_wx .rukou .phone{top: -40px;width: 280px;}
	.webappSpecial_bd_wx .rukou li .left_content{padding-right: 140px;} */
	.webappSpecial_bd_wx .rukou .bd_yuan,.webappSpecial_bd_wx .rukou .wx_yuan{display: none;}
	
	.webappSpecial_bd_wx .funeng>div{height: 400px;}
	.section1 li img{width: 70px;}
	.webappSpecial_bd_wx .funeng ul:before{top: 73px;}
	
	.webappSpecial_bd_wx .bd_wx li .iconbg:before, 
	.webappSpecial_bd_wx .funeng li .iconbg:before, 
	.webappSpecial_bd_wx .rukou li .iconbg:before{background-color: transparent;}
}

@media screen and (max-width: 800px) and (min-width: 700px){
	.webappSpecial_price{margin: 0 0 20px;}
	
}

@media screen and (max-width: 700px){
	.webappSpecial_package ul li{width: 48%;margin-right: 4%;margin-bottom: 4%;}
	.webappSpecial_package ul li:nth-of-type(3n){margin-right: 4%;}
	.webappSpecial_package ul li:nth-of-type(2n){margin-right: 0;}
	.webappSpecial_package_content p{line-height: 30px;}
	.webappSpecial_package_top p {  font-size: 16px;  margin-top: 10px; }
	.webappSpecial_package_content p{font-size: 14px;}
	.webappSpecial_package_top h2{font-size: 22px;}
	.contrast_con h2{margin: 40px 0 25px;font-size: 26px;}
	.contrast_con p{line-height: 30px;font-size: 12px;}
	.contrast_con div{padding-bottom:45px;}
	.contrast_con{padding: 0 0 20px;}

	.webapp_case{padding:40px 0 30px;}
	.webapp_case p{font-size:24px;}
	.webapp_case a{width:180px;line-height:35px;font-size:16px;margin:20px auto 0;}
}

@media screen and (max-width: 600px) and (min-width: 450px){
	.webappSpecial_addvantage ul li:nth-of-type(3n){margin-right: 0;}
	.webappSpecial_entrance ul li:nth-of-type(4n){margin-right: 2%;}
	.webappSpecial_entrance ul li:nth-of-type(3n){margin-right: 0;}
}


@media screen and (max-width: 600px){
	.webappSpecial_addvantage ul li{width: 32%;}
	.webappSpecial_addvantage ul li h3{font-size: 20px;}
	.webappSpecial h1{font-size: 26px;}
	.webappSpecial_addvantage ul li p{font-size: 12px;}
	.webappSpecial_entrance ul li{width: 32%;}
	.webappSpecial_entrance ul li div{padding-top: 30px;}
	.webappSpecial_entrance ul li{width: 32%;margin-right: 2%;height: 195px;}
	.webappSpecial_entrance ul li p{font-size: 14px;padding-top: 20px;padding-bottom: 0;}
	.webappSpecial_package_top h2{font-size: 20px;}
	.webappSpecial_package_top p {  font-size: 14px;}
	.webappSpecial_package ul li{margin-right: 2%;margin-bottom:2%;width: 49%;}
	.contrast_con div{width: 100%;}
	.contrast_con h2{margin: 40px 0 25px;}
	.contrast_con p{line-height: 30px;}
	.contrast_con>img.vs_mobile{display: block;width: 200px;top: 50%;margin-top: -172px;}
	.contrast_con{overflow: hidden;}
	.contrast_con .contrast_left{padding-bottom: 50px;}
	.contrast_con .contrast_right{padding-top: 0px;padding-bottom: 20px;}
	.contrast_right img {  top: 175px;  right: 2%;  width: 120px;  }
	.webappSpecial_banner {height: 200px;}
}





@media screen and (min-width:414px) and (max-width:767px){
	.see_all{width:100%;}
	.webappSpecial_gray{overflow: hidden;}
	.createDesign{display:none;}
}
@media screen and (min-width:320px) and (max-width:413px){
	.see_all{width:100%;}
	.webappSpecial_gray{overflow: hidden;}
	.createDesign{display:none;}
	
	.webappSpecial_bd_wx .bd_wx{margin-bottom: 20px;}
	.webappSpecial_use .package_tab{width: 290px;}
	.webappSpecial_use .package_tab li{font-size: 16px;width: 140px;}
	
	.webappSpecial_bd_wx .bd_wx li img{width: 78px;vertical-align: unset;}
	.webappSpecial_bd_wx .bd_wx li div{width: 60%;}
	
	.webappSpecial_bd_wx .rukou li .left_content{padding-right: 20px;}
	.webappSpecial_bd_wx .rukou li .right_content{padding-left: 20px;}
	
	.webappSpecial_bd_wx .funeng>div{height: 370px;}
	.webappSpecial_bd_wx .funeng .section2 p{font-size: 14px;}
}

.zhifubao{
	background:#000000;
	position:absolute;
	width:1400px;
	margin-top:-120px;
	border-radius:0 0 15px 15px;
	}
.zhifubao>div{
	float:left;
	color:#ffffff;
	line-height: 3;
	width:33%;
	height:320px;
	box-sizing:border-box;
	padding-top:50px;
	text-align:center;
	letter-spacing:6px;
	}
.zhifubao .webappSpecial_bd_wx{
	background:none !important;
	position:absolute;
	}
.zfb_tt{
	font-size:30px;
	margin-top:-70px;
	line-height:4.5;
	}
.zhifubao .rukou .bd_yuan{
	position:absolute;
	top:10px;
	left:128px;
	}