*{
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	list-style: none;
}
a{
	text-decoration: none;
}
.t{
	border: 1px solid #CCC;
}

.lg{
	width: 1140px;
	margin: 0px auto;
}
.com_center{
	text-align: center;
}
.h2Title{
	font-size: 30px; font-weight: 700; line-height: 50px;
}
.pTitle{
	font-size: 14px; color: #abacae; margin: 20px 0px 50px 0px;
}

.header{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 999;
	transition: 1s;
}
.headerFly{
	background-color: #FFF;
	box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
}
.nav{
	height: 56px;
	display: flex;
	align-items: center;
}
.logo{
	font-size: 32px;
	font-weight: 700;
	width: 600px;
	letter-spacing: 1px;
}
.nav_link{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	position: relative;
}
.nav_link>li{
	display: list-item;
	padding: 8px 10px;
	color: #585b60;
	font-weight: 400;
	line-height: 40px;
	cursor: pointer;
}
.nav_link:hover .login_drop{
	display: block;
}
.login_drop{
	position: absolute;
	top: 50px;
	right: 0px;
	width: 200px;
	background-color: #FFF;
	display: none;
	box-shadow:
	2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
	6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
	12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
	22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
	41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
	100px 100px 80px rgba(0, 0, 0, 0.07);
	border-radius: 5px;
}
.login_drop a{
	color: #585b60;
	font-weight: bold;
	padding: 10px 20px;
	display: block;
}
.login_drop img{
	margin-right: 10px;
	border-radius: 5px;
	width: 25px;
}
.login_drop li:hover{
	background-color: #EEE;
	cursor: pointer;
}

.banner{
	width: 100%;
	padding-top: 200px;
	background: url(hero-bg.png) no-repeat center;
	background-size: cover;
}
.banner_title{
	line-height: 48px;
	font-size: 30px;
	font-weight: 700;
	color: #585b60;
	margin-bottom: 30px;
	letter-spacing: 2px;
}
.banner_btn{
	background-color: #3d60f4;
	font-size: 14px;
	font-weight: 700;
	color: #FFF;
	padding: 10px 30px;
	border-radius: 30px;
	display: inline-block;
	margin-bottom: 30px;
	cursor: pointer;
	transition: 1s;
}
.banner_btn:hover {
	background-color: #222222;
}
.mation_left{
	flex: 0 0 50%; padding: 100px 20px 100px 160px;
}
.mation_left h1{
	font-size: 38px;
	font-weight: 700;
	color: #222222;
	letter-spacing: 3px;
	line-height: 60px;
}
.mation_left p{
	font-size: 14px;
	font-weight: 400;
	color: #abacae;
	line-height: 25px;
	margin-top: 10px;
}
.mation_right_div{
	padding: 30px;
    color: #FFF;

}
.mation_right_div:hover .mation_right_div_icon{
	background-color: #FFF;
	color: #007bff;
}
.mation_right_div_icon{
	float: left;
    border: 2px solid #fff;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;
    line-height: 80px;
    font-weight: 300;
    font-size: 40px;
    transition: 0.5s;
}
.mation_right_div_body{
	margin-left: 100px;
}
.mation_right_div_body h3{
	font-size: 18px;
}
.mation_right_div_body p{
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	margin-top: 10px;
}
.count{
	width: 100%;
	background: url(count-bg.jpg) no-repeat center;
	background-size: cover;
	position: relative;
}
.overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(15, 17, 27, 0.8);
	z-index: 1;
}
.countBody{
	padding: 50px 0px;
	display: flex;
	justify-content: center;
}
.countFlex{
	background-color: rgba(255, 255, 255, 0.3);
	color: #FFF;
	text-align: center;
	padding: 20px 0px;
	z-index: 2;
}

.patener{
	width: 100%;
	background-color: #f9f9f9;
	padding: 60px 10px;
}
.patenerFlex{
	flex:0 0 23%;
	margin: 10px;
}
.serviceFlex{
	flex:0 0 30%;
	margin: 15px;
	padding: 30px;
	border-radius: 4px;
	text-align: left;
	background-color: #FFF;
	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
	transition: 1s;
}
.serviceFlex:hover {
	box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
}
.serviceFlex_icon{
	color: #3d60f4;
	font-size: 42px;
}
.serviceFlex h3{
	font-weight: 600;
	margin: 10px 0px;
	font-size: 22px;
	color: #222222;
}
.serviceFlex p{
	font-weight: 400;
    font-size: 14px;
    color: #abacae;
    line-height: 25px;
}

.connectUs{
	display: flex;
	padding: 90px 0px 60px 0px;
}
.connectUs_left{
	flex: 0 0 50%;
}
.texting{
	border: 1px solid #F7F7F7;
	border-radius: 4px;
	width: 90%;
	padding: 8px 20px;
}
.texting:focus {
	outline: 0px;
	border: 1px solid #007bff;
	transition: 1s;
}
.textingArea{
	width: 542px;
	height: 200px;
}
.connectUs_right{
	flex: 0 0 50%;
	color: #abacae;

}
.connectUs_right h1,.connectUs_right h2{
	font-size: 22px;
	color: #222222;
	font-weight: 700;

}
.connectUs_right p{
	font-size: 12px;
	padding: 10px 0px 20px 0px;
}
.connectTags{
	padding: 10px 15px;
	border-radius: 3px;
	margin-right: 20px;
	color: #FFF;
	font-weight: bold;
	background-color: #3d60f4;
}
.footer{
	background-color: #34363a;
	padding: 15px;
	color: #FFF;
	font-size: 10px;
}
.in-self{
	width: 100%;
	display: flex;
}

@media screen and (max-width: 600px){
	.header{ width: 100%;}
	.lg{ width: 100%; }
	.nav_link{ display: none; }
	.serviceFlexHead{ flex-direction: column; }
	.serviceFlex{ flex: none; }
	.connectUs{ display: block; }
	.com_center img{ width: 60%; }
	.textingArea{ width: 90%; }
	.in-self{ display: none; }
}