/* ----------------------------------------------------------------
	Canvas: Car Demo
	Version: 1.1
-----------------------------------------------------------------*/

/* Runing Car
-----------------------------------------------------------------*/
.running-car {
	position: relative;
	top: 0px;
	left: 0;
	width: 628px;
	transform:scale(.5);

}

img.car,
img.wheel {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	transition: all 1s ease-out;
	margin-left: -760px;
}

img.wheel{position: absolute; bottom: 4px;z-index: 1;}

img.wheel1 { left:88px; }
img.wheel2 { left:380px;  }

.running-car.in-view img.car {
	-webkit-transform: translate(800px,0px) rotate(0deg);
	-moz-transform: translate(800px,0px) rotate(0deg);
	transform: translate(800px,0px) rotate(0deg);
}
.running-car.in-view img.wheel {
	-webkit-transform: translate(800px,0px) rotate(800deg);
	-moz-transform: translate(800px,0px) rotate(800deg);
	transform: translate(800px,0px) rotate(800deg);
}

.running-car.in-view img.car {
	-webkit-transform: translate(800px,0px) rotate(0deg);
	-moz-transform: translate(800px,0px) rotate(0deg);
	transform: translate(800px,0px) rotate(0deg);
}
.running-car.in-view img.wheel {
	-webkit-transform: translate(800px,0px) rotate(600deg);
	-moz-transform: translate(800px,0px) rotate(600deg);
	transform: translate(800px,0px) rotate(600deg);
}


.device-sm .running-car.in-view img.car {
	-webkit-transform: translate(500px,0px) rotate(0deg);
	-moz-transform: translate(500px,0px) rotate(0deg);
	transform: translate(500px,0px) rotate(0deg);
}
.device-sm .running-car.in-view img.wheel {
	-webkit-transform: translate(500px,0px) rotate(600deg);
	-moz-transform: translate(500px,0px) rotate(600deg);
	transform: translate(500px,0px) rotate(600deg);
}

.device-xs .running-car.in-view img.car {
	-webkit-transform: translate(540px,0px) rotate(0deg);
	-moz-transform: translate(540px,0px) rotate(0deg);
	transform: translate(540px,0px) rotate(0deg);
}
.device-xs .running-car.in-view img.wheel {
	-webkit-transform: translate(540px,0px) rotate(600deg);
	-moz-transform: translate(540px,0px) rotate(600deg);
	transform: translate(540px,0px) rotate(600deg);
}

.pdbomttom{ overflow:hidden; padding-bottom: 10rem; background: #f9d040  url('../../images/boyBg.png') no-repeat left bottom -1px; background-size: 100% auto; border-bottom: solid 1px #fff

 }

#bg1{  background-size:100% auto;  position: relative; padding-top: 9% }
.bg{ position: absolute; bottom: 0; left:0; }
#bg1 .row a{ background: #fff; border:solid 1px #d7d7d7;  text-align: center;  cursor: pointer; position:relative; margin-bottom: 80px}
#bg1 .row a .icon{ width: 126px; position: absolute; top:-71px; margin:0 auto; z-index: 100; left:0; right: 0;  background: #fff}
.flexCenter{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#bg1 .row a .info{ 
	height:200px;  
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding:0 20px;

     }
#bg1 .row a .info h4{ margin-bottom: 10px; margin-top: 30px; font-size:18px }
#bg1 .row a .info p{ font-size: 16px; line-height: 20px }
#navg{ background: #f9d040; height: 130px; font-size:18px; color: #222222; text-align: center;-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	transition: all .5s ease-out;  position: relative; }
#navg span{-webkit-transition: all 1s ease-out .6s;
	-moz-transition: all 1s ease-out .6s;
	transition: all 1s ease-out .6s; }
	.down{ position: absolute; bottom: 15px; left: 0; right: 0; margin:0 auto; z-index: 100; width: 28px; text-align: center;  }
	.down i{ color: #fff; font-size: 28px; cursor: pointer; }

.au_text{ width: 80%; margin: 0 auto }
.au_text h2{ font-size: 25px; color:#fff; margin-bottom: 15px; }
.au_text p{ color:#fff;  line-height:28px; font-size: 18px; text-align: justify; margin-top:5px }
.boy1{ position: absolute; top:0; right: 0; z-index: 11; width:120%}
.aboutus .section h6.tag6 span{ font-size: 28px; background: #72256f; display: inline-block; color:#fff; border-radius: 30px; padding:0 10px; font-weight: normal; }
.aboutus .section h1.tag1{ font-size: 56px; color:#fff; line-height: 70px; margin-bottom: 15px; font-weight: normal; }
.aboutus .section p{ font-size: 20px; line-height: 30px; color:#fff; }
.bg4{ background:#fff url(../../images/bg_13.png) no-repeat top center; background-size:auto; padding-top:200px }
.photoBox{ background: #c2c1e4; padding:60px 0 20px 80px; border-radius: 10px; position: relative; z-index: 2; }
.videoBg{ position:absolute; top:500px; right: 0; width: 582px; height: auto } 
.videoBg a{ width: 536px;    height: 310px;  position: absolute;  top: -435px;  left: 23px;  
    z-index: 1;   }
.photoBox dl dt{ height: 90px; border-left:solid 20px #262545; margin-bottom: 40px; padding-left:24px; opacity: 0 ; overflow:hidden;}
.photoBox dl dt span{ display:block; font-size:25px; color:#262545; line-height: 30px; -webkit-transform: translate3d(-50%, 0, 0);  transform: translate3d(-50%, 0, 0); -webkit-transition: all 1s ease-out 1s;	-moz-transition: all 1s ease-out 1s;
	transition: all 1s ease-out 1s;  opacity: 0 }
.icon-play{ width: 10% }
.click{ background: #72256f;  width: 56px; height: 56px; border-radius:50%;margin:20px auto; cursor: pointer; }
.click i{ font-size: 20px; color:#fff; }
.au_box{ padding:0; }
.au_box .slider-parallax-inner{ position: absolute; top:0; left: 0; width: 100%;height: 100% }
.au_body{ height: 100% }
.topOne{ position: absolute; top: 0; left: 0; z-index: 100; background: #fff; width: 100%; height: 100% }

.ani dl dt{
     animation:fadeInDown .5s ease-out both;
    -webkit-animation:fadeInDown .5s ease-out both;
    -moz-animation:fadeInDown .5s ease-out both;
    -ms-animation:fadeInDown .5s ease-out both;

}

.ani dl dt span{ opacity:1;-webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);   }

.ani .row:nth-of-type(2) dl dt{
     animation:fadeInDown .5s ease-out .5s both;
    -webkit-animation:fadeInDown .5s .5s both;
    -moz-animation:fadeInDown .5s ease-out .5s both;
    -ms-animation:fadeInDown .5s ease-out .5s both

}




@media (max-width: 767px){
	#logo img{ margin-left: 0 }
	.au_text{ width: 90% }
	.au_text h2{ font-size:18px; margin-bottom: 8px }
	.au_text p{ font-size: 14px; line-height: 18px; }
	#copyrights .col_half{float: none;}
	#copyrights .copyright-links{ float: none; text-align: center; margin-top: 15px }
    .topOne{ padding:60px 0; }
	.click{ 	width: 30px; height: 30px; margin: 0 auto }
	.au_box{ background: url(../../images/aboutusbg.jpg) no-repeat center; background-size:cover; }
	.au_box .slider-parallax-inner{ position: static; }
	.au_box .asbg{ display: none; }
	.au_box  .au_text{ padding:30px 0; }
	.boy1{ position: static; width: 100% }
	.aboutus .section h1.tag1{ font-size: 20px; line-height: 26px; }
    .aboutus .section h6.tag6 span{ font-size: 16px }
     .aboutus .section p{ font-size: 14px }
     .videoBg{ position: relative; width:90%; height: 200px; top:0; margin:0 auto 40px;	 }
     .videoBg a{ top:0; width: 100%; left: 0; height: 150px }
     .bg4{ padding-top:30px;  }
     .aicon{ display: block; margin-bottom: 10px }
}

@media (min-width: 992px) {
	.running-car {
		position: absolute;
		top: 60px;
		left: 0;
		width: 628px;
		transform:scale(.8);
	}
    .content-wrap .htit{ font-size: 40px; position: relative;  }
    .content-wrap .htit:before{content: ""; width:40px; height: 1px; background: #000; position: absolute; bottom: -10px; left: 0; display: inline-block;}
	.pdbomttom{height: 773px; padding-bottom: 10rem;}
	.pdbomttom .container { padding-top:2%; padding-bottom: 5% }
	#bg1 .row a:nth-of-type(3n){ margin-right: 0 }
	#bg1 .row:nth-of-type(1){ margin-bottom: 100px }
	#bg1 .row a:hover{ transform: translate(0,-10px); }
	#bg1 .row a{margin:0 25px 25px 0;flex:1;transition: all .3s ease-out; }
	#bg1 .row a .info{	height:270px;  }
	#bg1 .row a .info h4{ font-size:28px }
	#bg1{padding:5rem 0;}
	#navg{ font-size: 37px;  height:10px; padding:0px; }
	#navg span{ opacity: 0 }

	#navg.height { height:230px; }
	#navg.height span{ opacity: 1 } 
	.pdtop100{ padding:80px 0 30px 20px; }
}

@media (min-width: 1680px) {
	.running-car {
		position: absolute;
		top: 60px;
		left: 0;
		width: 628px;
		transform:scale(1);
	}
	.pdbomttom{ height:1024px  }

	.running-car.in-view img.car {
	-webkit-transform: translate(900px,0px) rotate(0deg);
	-moz-transform: translate(900px,0px) rotate(0deg);
		transform: translate(900px,0px) rotate(0deg);
	}
	.running-car.in-view img.wheel {
		-webkit-transform: translate(900px,0px) rotate(900deg);
		-moz-transform: translate(900px,0px) rotate(900deg);
		transform: translate(900px,0px) rotate(900deg);
	}
}