.all{
	width: 98%;
}

  .page {
    display: none;
    margin: 10px 0;
  }

.p1{
	
}
.p2{margin-top: 15px;font-size: 0.5em;padding-left: 25px;color:#fff;

width: auto;}


.y2{
	grid-template-columns: 70% 30%;
	
	display: grid;
}
.zebsw{
	margin-top: 25%;
	content : url("../images/zeb_smartrol.png");
	width: 80%;
	
}


.titlename{
	width: 97%;
	color : #fff;	background: linear-gradient(to right, #999, #ccc);	 background: linear-gradient(to right, rgba(#999, #ccc, 0, 1), rgba(255, 0, 0, 0));	box-shadow: 10px 10px 5px 0px #888888;padding: 12px;position: relative;	display: block;	font-size: 1.5em;	font-weight: bold;
	margin-bottom: 25px;
	text-align: left;;
	font-size: 2.2em;
}


.list{
	
	border : 1px #8E8E8E solid;
	margin-bottom: 25px;
	border-radius: 15px;
	
}

.list ul{
	margin-botton:25px;
	text-align: left;
	list-style:square;
	margin-bottom: 25px;

}



.title1{
	font-size: 2em;
	font-weight: bold;
	color: #190049;
	text-align: left;	margin-bottom: 25px;
}

.list li{
	font-size: 1.8em;	font-weight: bold;
		text-align: left;
		margin-left  : 20px;	margin-bottom: 25px;
	/*	line-height: 120%;*/
		width: 96%;
	margin-top :25px;
	color:cornflowerblue;
}

.list li > ul >li{

	color:#000;
}



.list li > ul >li> div{

	color:#000;
}



.list ul > li {

	margin-left  : 10px;
		font-size: 0.8em;	
	
		margin-bottom: 25px;

}

.list ul > li > ul >li{
	
	margin-left  : 20px;

		font-size: 0.8em;	

	list-style-type:square;
			margin-top: 25px;
		margin-bottom: 25px;
	
	
	

}






.title1{
	font-size: 2em;
	font-weight: bold;
	color: #190049;
	text-align: left;
}
.sub{
	text-align : center;
	font-size: 0.8em;
	
	
	
}

.y3{
grid-template-columns: 30% 30% 30%;
	grid-gap: 3%;
display: grid;

}
.tri{border : 4px solid #00B050;
color:#00B050;
text-align: center;
padding: 50px;
	font-size: 1.5em;
	font-weight: bold;
}
.tri2{
	border-color: #385D8A;
	color:#385D8A;
}
.tri3{border-color:#F79646;
	color: #F79646;
	
}
.st{
	font-size: 0.7em;
}

button{

	font-sze: 1em;
	padding : 5px;
	border : 1px solid #000;
	font-weight: bold;
}

.box{
	
	padding : 3%;
	background-color: #BBF3FF;
	border : 2px solid #0090F8;
	margin-bottom : 25px;
}



.zeb_img4{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb2.png");
	
}

.zeb_img5{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb3.png");
	
}
.zeb_img6{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb4.png");
	
}
.zeb_img7{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb5.png");
	
}
.zeb_img8{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb6.png");
	
}
.subt{	margin-bottom : 25px;
	font-size: 1.2em;
	color: red;
	
}

.zeb_img9{
	margin-top: 25px;
	width: 100%;
	content: url("../images/zeb7.png");
	
}

.z{
margin: 0px auto;
	width: 100%;
	text-align: center;
	grid-template-columns: 33.3% 33.3% 33.3%;

display: grid;


}

.z1{
	width: 100%;
	content : url("../images/z1.png");
	background-color:blue;

}
.z2{
	width: 100%;
	content : url("../images/z2.png");

}

.z3{
	width: 100%;
	content : url("../images/z3.png");

}
.t1{text-align: center;color: #4476CD;}
.t2{text-align: center;font-size:0.5em;color:#000;}



.fun{
	grid-template-columns: 48% 48%;
	display: grid;
	grid-gap: 25px;
	
}
.cut{


	border : 1px solid #4476CD;
	border-radius: 7px;

	
	
}

.c_top{

	background-color: #ECF1FA;
		border-bottom : 1px solid #4476CD;
	padding : 10px;
		padding-left : 25px;
}
.c_bottom{
		padding : 10px;
	font-size: 0.8em;
}


.i1, .i2, .i3, .i4{
	
	width: 32px;;;
	margin-right: 16px;
}


.i1{
	
	content : url("../images/i1.png");
	display: inline-block;
	float: left;
	
	
}

.i2{
	content : url("../images/i2.png");
	display: inline-block;
	float: left;
	
	
}
.i3{
	content : url("../images/i3.png");
	display: inline-block;
	float: left;
	
	
}
.i4{
	content : url("../images/i4.png");
	display: inline-block;
	float: left;
	

	
}
.ds1{
	width: 100%;
	content : url("../images/d1.png");


	

	
}
.ds2{width: 100%;
	content : url("../images/d2.png");

	

	
}

.d11{
	background-color: #4476CD;
	border-radius: 15px;
	padding-left: 25px;
	color: #fff;
	font-weight: bold;
	
}
.d12{
	background-color: #1B2D49;
	border-radius: 15px;
	padding-left: 25px;
	color: #fff;
	font-weight: bold;	
	
	
	
}

.ds3{width: 100%;	content : url("../images/d3.png");}
.ds4{width: 100%;	content : url("../images/d4.png");}
.ds5{width: 100%;	content : url("../images/d5.png");}
.ds6{width: 100%;	content : url("../images/d6.png");}
.ds7{width: 100%;	content : url("../images/d7.png");}
.ds8{width: 100%;	content : url("../images/d8.png");}
.cuts{border : 0px;}
.sc1{width: 100%;	content : url("../images/sc.png");}
.sc2{width: 100%;	content : url("../images/sc2.png");}
.sc3{width: 100%;	content : url("../images/sc3.png");}
.sc4{width: 100%;	content : url("../images/sc4.png");}
.sp{width: 100%;	content : url("../images/sp.png");}
.green1{width: 100%;	content : url("../images/g1.png");}
.green2{width: 100%;	content : url("../images/g2.png");}
.report1{width: 100%;	content : url("../images/r1.png");}
.report2{width: 100%;	content : url("../images/r2.png");}
.report3{width: 100%;	content : url("../images/r3.png");}
.report4{width: 100%;	content : url("../images/r4.png");}
.report5{width: 100%;	content : url("../images/r5.png");}


.section2{
margin: 0px auto;
width: 100%;
display: grid;
grid-template-columns: repeat(7, 14%);
 border-collapse: collapse;
}


.roadmaps{
	content: url("../images/roadmaps.png");
	width: 100%;
	
	
}



.section3{
		grid-template-columns: 33% 33% 33%;
	
	display: grid;
margin-bottom: 100px;
	padding : 10px;
}

.dep1{
	width: 90%;

	padding : 10px;	padding-top: 20px;
	border : 1px solid #2badd2;
	color : #2badd2;
	font-weight: bold;
	text-align: center;
	
}
.deps2{
		border : 1px solid #0087df;
	color : #0087df;
}
.deps3{
		border : 1px solid #003f87;
	color : #003f87;
}

.dep2{
	margin-top: 10px;
	padding : 10px;
		width: 90%;
	background-color: #eff8fd;
	
	
}
.dep3{

	padding : 10px;
		width: 90%;

	
	
}

.flag{
	width: 50px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	margin-top: -45px;
	margin-left : -20px;
	padding : 10px;
	background-color : #2badd2
}
.flag2{
	background-color : #0087df
}
.flag3{
	background-color : #003f87
}
.zebsum{
	
	width: 50%;
	content: url("../images/zeb.png");
}


.section4{
	margin: 0px auto;
width: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
 border-collapse: collapse;
}

.table1{padding: 20px;background-color: #BBF3FF;;font-weight: bold;color:#fff;font-size:1em;
color:#002F6F;

}
.table2{padding: 20px;font-size: 0.8em;}
.table3{padding: 20px;font-size: 0.8em;}

        .table1, .table2, .table3 {
            border: 1px dotted black;
            padding: 10px;
            text-align: center;
        }


.zeb_img1{
	margin: 0px auto;
	width : 90%;
	content: url("../images/cheaklist.png")
}
.zeb_img2{
	margin: 0px auto;
	width : 90%;
	content: url("../images/systemsize.png")
}

.zeb_img3{
	margin: 0px auto;
	width : 90%;
	content: url("../images/systemdiagram.png")
}



.button{	margin-top : 5%;width: 100%;display: grid;  grid-template-columns: 33% 33% 33%;}

.item, .item a{	margin: 0px auto;	text-align: center;	height: 250px;	background-color: #F1F1F1;	border : 2px #3F3F3F solid;	background-repeat: no-repeat;	background-position: center center;	background-size: 80%;	color: #000; display: grid;    align-content: end;		transform: scale(0.8);	 transition: transform 0.5s ease-in-out;position: relative;}
.item:hover, .item a:hover{	transform: scale(0.9);	color:#960002;}
.item1{background-image:url(../../../../../../html2/product/images/zeb_screen.jpg);background-size: 100%;}
.item2{background-image:url(../../../../../../html2/product/images/dcu.png);}
.item3{background-image:url(../../../../../../html2/product/images/modem.png);}
.item4{background-image:url(../../../../../../html2/product/images/si_server_front.png);}
.item5{background-image:url(../../../../../../html2/product/images/meter2.png);}
.item6{background-image:url(../../../../../../html2/product/images/meter3.png);}




.tx{font-weight: bold;	font-size: 2.4em;	background-color: #313131;	color : #fff;	opacity: 0.8;}



.vd{
	
	
width : 100%; 
height :615px;

}













/****************pc_animation****************/

@media(max-width:600px){
.section1{
grid-template-columns: 100%;
display: grid;
}
.section3{
grid-template-columns: 100%;
display: grid;
}
		
	.dep21{
		grid-row-start: 2;
		
	}	
		.dep22{
		grid-row-start: 5;
		
	}	
		.dep23{
		grid-row-start: 8;
		
	}	
	
	.dep31{
			grid-row-start: 3;
		
	}	
		.dep32{
			grid-row-start: 6;
		
	}	
		.dep33{

					grid-row-start: 9;
	}	
	.button{	margin-top : 5%;width: 100%;display: grid;  grid-template-columns: 49% 49%;}
		
}