@charset "utf-8";
.xiaochengx{background:url(../imges/xcx.png) no-repeat center 0/100% 100%;}

.xiaochengx::before{content:"";  display: table; 
background:url(../imges/xcx.png) no-repeat center 0/100% 100%;
opacity:0.3;
filter:"alpha(opacity=3)";
-ms-filter:"alpha(opacity=3)";
}


nav  .carousel-inner-fdc .banner{color: #FFFFFF; line-height:180%; font-size:34px;font-family: 'HanHei-SC';}
nav .carousel-inner-fdc .xcx { text-align:center}
.xcxbanner{ font-size:14px; font-family: "微软雅黑";line-height:100%; padding:60px 0px 0px}
.xcxbanner h3{ font-size:52px}
nav .carousel-inner-fdc .banner span{ color: #FFFFFF;font-family: '微软雅黑'; font-size:20px;}

.xcxys{ background:url(../imges/xcxline.png) no-repeat center bottom; text-align:center; padding:40px 0px 30px; overflow:hidden}
.xcxys figcaption{ font-size:20px; padding:15px 0px}
.xcxys p{ color:#6A6A6A; line-height:28px; padding:0px 15px;}
.xcxys img{ margin:0px auto}	
	
.xcxzz{background:#F8F8F8; padding:20px 0px 0px; overflow:hidden}	
	
.xcxan{ text-align:center; padding:0px 0px 30px}
.xcxan a{ padding:10px 30px; display:inline-block; border:1px solid #DADADA; margin:0px 5px 5px; background:#FFFFFF; color:#666666;}
.xcxan a.ona,.xcxan a:hover
{ color:#fff; text-decoration:none; transition:all .2s cubic-bezier(0.4,0,.2,1) 0s;background:#2087ed;border:1px solid #2087ed;box-shadow:3px 0 10px rgba(72,157,255,.3) }


.xcxlr{ background:#FFFFFF; padding:30px; margin-bottom:40px}
.xcxlr .left{ float:left; width:28%}
.xcxlr .right{ float:right; width:66%}
.xcxlr .right h3{ line-height:32px; font-weight:bold; text-align:center; font-size:20px; padding:0px; margin:0 0 10px;}
.xcxlr .right .lrjs{ height:149px; border-bottom:1px solid #CCCCCC; overflow:hidden; padding-top:20px;  position:relative;}
.xcxlr .right ul
{ margin:0; padding:0; overflow:hidden;}
.xcxlr .right ul li
{ float:left;list-style:none; width:25%; background:url(../imges/xcxtb2.png) no-repeat 26px center; line-height:40px; padding-left:8%}
.lrjsbox
{ width: 100%; height: 100%; line-height: 30px; font-size: 14px; color: #fff; text-align: center; padding:10px;
 position: absolute; top: 170px;  }
.xcxlr .right .lrjs:hover .lrjsbox
{  transition:all .3s cubic-bezier(0.4,0,.2,1) 0s;  background:#cdbdf8; padding-top:30px; top:0;}
.xcxlr .right .lrjs:hover .lrjsbox2
{  background:#b997ff }
.xcxlr .right .lrjs:hover .lrjsbox3
{  background:#ff9a97 }
.xcxlr .right .lrjs:hover .lrjsbox4
{  background:#ffb17a }
.xcxlr .right .lrjs:hover .lrjsbox5
{  background:#83d5ff }
.xcxlr .right .lrjs:hover .lrjsbox6
{  background:#83d5ff }

.xcxlr .right .bj{ padding:30px 0px 0px; line-height:30px}
.xcxlr .right .bj span{ font-size:24px; color:#FF6800}
.xcxlr .right .bj input{ margin-left:20px; margin-right:5px}
.xcxlr .right .bj a{ padding:5px 30px; display:inline-block; margin:0px 5px; background:#2087ED; color: #FFFFFF; float:right}

.xcxys figcaption{ font-size:16px; color:#666666; line-height:150%; padding-bottom:20px}
.nlrk img{ float:left; padding-right:20px}
.nlrk p{ color:#666666; font-size:16px}
.nlrk div{ padding:20px 0px}

/*小程序应用中心*/
.yyzx{ background:#F8F8F8; text-align:center}
.yyzxA div{ padding:20px 20px}
.yyzxA figcaption{ padding:20px 0px 10px; font-size:18px; font-weight:bold}
.yyzxA p{ color: #666666; padding:0px 15px}

.yyzxA .col-lg-4 img{
	display:block;
	margin:0 auto;
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
}
.yyzxA .col-lg-4:hover img{
	transform:translate(0,-10px);
	-webkit-transform:translate(0,-10px);
	-moz-transform:translate(0,-10px);
	-o-transform:translate(0,-10px);
	-ms-transform:translate(0,-10px);
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 30px rgba(0,0,0,0.2);
    box-shadow:0 0 30px rgba(0,0,0,0.2);
}
.yyzxA .col-lg-4:nth-of-type(3n+1) 
{ clear: both; }

.yyzxA .yyzxAmore
{ padding:10px 0 30px; clear:both;}
.yyzxAmore a
{ width:170px; height:50px; line-height:50px; border-radius:25px; color:#333333; border:1px solid #333333; margin:0px auto; text-align:center; display:block;  font-size:16px; clear:both; padding:0;}
.yyzxAmore a:hover
{ color:#ffffff; text-decoration:none; background:#333333}

/*小程序接入流程*/
.lct{ text-align:center; padding:50px 0px}
.lct img{ margin:0px auto}
.index_process_list
{ display:none !important; }

.index_process_list {
	position: relative;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	
	flex-direction: column;
	margin-left: 30px;
	margin-top: 10px;
	margin-bottom:10px;
}
.index_process_list:before {
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 15px; 
	height: 100%; 
	background: #d7e4ed; 
	border-left: 1px dashed #36bb81;
	z-index: -1;
}
.index_process_item {
	display: -webkit-flex;
	-webkit-flex-direction: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 15px 0;
}
.index_process_left {
	width: 30px;
	height: 30px;
	background: url('../imges/t17.png');
	background-size: 100%;
	background-position: center center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	margin-right: 10px;
}

/*小程序案例*/
.xcxanli
{ width:100%; height:900px; color:#fff; position:relative;}
.xcxanliA
{ width:100%; height:100%; position:absolute; left:0px; top:0px; opacity: 0; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; }
.xcxanliB
{ width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:20;}
.xcxanliB .wzfw
{ padding:50px 0;}
.xcxanliB .wzfw h2,.xcxanliB .wzfw p
{ color:#fff;}
.xcxanliB .wzfw p
{ font-size:18px;}
.xcxanliBs
{ padding-top:40px;}
.xcxanliBs .Lul
{ width:200px; padding:0; margin:0; float:left;}
.xcxanliBs .Lul li
{ height:60px; line-height:60px; background:rgba(240,240,240,0.15); border-bottom:1px solid rgba(255,255,255,0.05); list-style:none;}
.xcxanliBs .Lul li:hover,.xcxanliBs .Lul li.onli
{ background:url(../imges/t18.png); cursor:pointer}
.xcxanliBs .Lul li:hover h3,.xcxanliBs .Lul li.onli h3
{ font-weight:bold;}
.xcxanliBs .Lul li h3
{ height:60px; line-height:60px;  font-size:16px; color:#fff; font-weight:normal;  text-indent: 80px; margin:0; padding:0; background:url(../imges/xcxfa1.png) no-repeat 45px center; }
.xcxanliBs .Lul li .t2
{ background-image:url(../imges/xcxfa2.png); }
.xcxanliBs .Lul li .t3
{ background-image:url(../imges/xcxfa3.png); }
.xcxanliBs .Lul li .t4
{ background-image:url(../imges/xcxfa4.png); }
.xcxanliBs .Lul li .t5
{ background-image:url(../imges/xcxfa5.png); }
.xcxanliBs .Lul li .t6
{ background-image:url(../imges/xcxfa6.png); }
.xcxanliBs .Lul li .t7
{ background-image:url(../imges/xcxfa7.png); }
.xcxanliBs .Lul li .t8
{ background-image:url(../imges/xcxfa8.png); }

.xcxanliAs
{ padding-top:250px;}
.xcxanliA1
{ width:920px; float:right;}
.fangan_right5{
	overflow:hidden; padding:0; margin:0;}
.fangan_right5_1{
	width:170px;
	float:left;
	margin-left:50px;
	color:#FFF;
	text-align:center; list-style:none;}
.fangan_right5_1_1{
	border-radius:50%;
	background:#2f3545;
	width:170px;
	height:170px;
	margin-bottom:18px;
	overflow: hidden;}
.fangan_right5_1_1_1{
	border-radius:50%;
	background:#ffffff;
	width:150px;
	height:150px;
	overflow:hidden;
	margin:10px auto}
.fangan_ewm{
	width:120px;
	height:120px;
	display:block;
	margin:15px auto;  
    transition: all 0.6s;}
.fangan_right5_1_1:hover{
	cursor: pointer;}
.fangan_right5_1_1:hover .fangan_ewm{
	transform: scale(1.2);
	border-radius:50%}
.fangan_right6{
	margin-top:70px;
	text-indent:70px;
	font-size:24px;
	color:#FFF}
.fangan_right7{
	margin-top:20px;
	line-height:22px;
	color:#FFF;
	font-size:14px;
	padding-left:70px}
.fangan_right8{
	margin-top:62px;
	overflow:hidden;
	margin-left:70px;
	width:136px;
	height:36px;
	border:1px solid #FFF;
	border-radius:2px;
	color:#FFF;
	font-size:14px;
	text-align:center;
	display:block;
	line-height:36px}
.fangan_right8:hover{
	background:url(../imges/t19.png);
	cursor:pointer;
	color:#FFF;
	text-decoration:none;
	border:1px solid #27b4b3}

.fangan_right8.a1
{ display:none;}	


/*手机超小屏幕下的单独样式 xs < 768px */
@media (min-width: 300px) and (max-width: 766px){
	
.xcxan a{ padding:10px 0px; width:43%; display:inline-block; border:1px solid #DADADA; margin:0px 5px 5px; background:#FFFFFF; color:#666666; box-sizing:border-box; }
	
	
.xcxbanner,.xcxlr .left,.yyzx p,.lct{ display:none}
nav .carousel-inner-fdc .xcx h1{ font-size:40px}
nav .carousel-inner-fdc .xcx p{ font-size:18px}
.xcxys img{ margin:0px auto;}
.xcxys p{padding: 0}

/*怎么做小程序*/
.xcxlr .right { width:96%; margin:0px auto; float:none}
.xcxlr .right ul li{ float:left;list-style:none; width:33%; padding-left:26px; background:url(../imges/xcxtb2.png) no-repeat 0px center;}
.xcxlr .right .lrjs
{ height:auto;}
.xcxlr .right .bj a{ padding:5px 30px; display: inherit; margin:15px 5px 0px; background:#2087ED; color: #FFFFFF; float:none; text-align:center}
.xcxlr .right .bj{ padding:10px 0px 0px; line-height:30px}
.xcxlr .right .bj span{ font-size:16px; color:#FF6800}
.xcxlr .right .bj input{ margin-left:5px; margin-right:5px}

.xcxys figcaption{ font-size:12px; color:#666666; }
.nlrk div{ padding:5px 0px}

/*小程序应用中心*/
.yyzx div{ padding:5px 10px}
.yyzx figcaption{ padding:5px 0px 5px; font-size:14px; font-weight:bold}

.yyzxA .col-lg-4:nth-of-type(3n+1) 
{ clear: none; }

/*小程序接入流程*/

.index_process_list
{display: flex !important;}

/*小程序案例*/
.xcxanli
{ height:600px;}
.xcxanliB .wzfw
{ padding:30px 0;}
.xcxanliBs
{ padding-top:0px;}
.xcxanliBs .Lul
{ width:95px; padding:10px 0; border-left:1px solid rgba(255, 255, 255, 0.5); position:relative; z-index:300;}
.xcxanliBs .Lul li
{ height:50px; line-height:20px; padding:15px 0; display:block; background:none !important; border:none; }
.xcxanliBs .Lul li h3
{ height:20px; line-height:20px; font-weight:normal; text-indent:0px; padding-left:17px; background:none !important; position:relative;}
.xcxanliBs .Lul li.onli h3:before
{ height:20px; width:2px; background: #fff; content: ""; display: block; position: absolute;  left: 0; }



.xcxanliA1
{ width:auto; padding-left:105px; position: absolute; right:0px; }
.fangan_right5_1
{ width:50%; margin-left:0px; margin-top:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.fangan_right5_1_1
{ width:auto; height:auto; margin-bottom:10px; background:none; overflow: inherit; }
.fangan_right5_1_1_1
{ width:auto; height:auto; margin:0; background:none; overflow: inherit;  }
.fangan_right5_1_1_1 .fangan_ewm
{ width:97px; height:97px; margin:0 auto; border:5px; solid rgba(255, 255, 255, .1);border-radius: 50%;}

.fangan_right6,.fangan_right7
{ display:none;}
.fangan_right8
{ margin:30px auto 0; border-radius:17px; display:none;}
.fangan_right8.a1
{ display: block;}
.nlrk h4{font-size: 16px}
.nlrk p{font-size: 14px}
.xcxysa img{max-width: 60%}
	.xcxlr{padding: 30px 12px}

}
  

/*大于992px以上固定宽度为970px md >= 992px */
@media (min-width: 767px) and (max-width: 992px){
/*栏目*/
nav  .carousel-inner-fdc .banner{padding-top:14%;color: #FFFFFF; line-height:180%; font-size:34px;font-family: 'HanHei-SC';}
nav .carousel-inner-fdc .xcx h1{ font-size:40px}
nav .carousel-inner-fdc .xcx p{ font-size:18px}
.xcxbanner{ font-size:12px; font-family: "微软雅黑";line-height:150%; padding:30px 0px 0px}

.xcxbanner h3{ font-size:32px}
nav .carousel-inner-fdc .xcx .xcxbanner p{ font-size:12px;}

nav .carousel-inner-fdc .banner span{ color: #FFFFFF;font-family: '微软雅黑'; font-size:14px;}

/*小程序案例*/
.xcxanliA1
{ width:440px;  }
.fangan_right5_1
{ width:150px; margin-left:30px;}
.fangan_right5_1_1
{ width:150px; height:150px;}
.fangan_right5_1_1_1
{ width:130px; height:130px;}
.fangan_right6,.fangan_right7
{ display:none;}

}

/*大于992px以上固定宽度为970px md >= 992px */
@media (min-width: 992px) and (max-width: 1199px){
/*栏目*/

/*小程序案例*/
.xcxanliA1
{ width:720px; }
.fangan_right5_1
{ width:150px; margin-left:30px;}
.fangan_right5_1_1
{ width:150px; height:150px;}
.fangan_right5_1_1_1
{ width:130px; height:130px;}
.fangan_ewm
{ width:110px; height:110px; margin:10px  auto;}

}