@charset "utf-8";
/* ==================== header ==================== */

body{
	overflow-x:hidden;
}





.productsTop {
	position: relative;
	margin: 0 auto 50px;
}

.productsTop figure ,
.productsTop figure img {
	width: 100%;
}

.productsTop li {
	position: absolute;
	width: 80px;
	height: 80px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}

.productsTop li a {
	display: block;
	width: 80px;
	height: 80px;
}

.productsTop li:nth-child(1)  { background-image: url(../images/products_top_list_1.png); top:  40%; left: 15%;} 	/*Engine related*/
.productsTop li:nth-child(2)  { background-image: url(../images/products_top_list_2.png); top:  62%; left: 30%;} 	/*Brake related*/
.productsTop li:nth-child(3)  { background-image: url(../images/products_top_list_3.png); top:  56%; left: 52%;} 	/*Drivetrain related*/
.productsTop li:nth-child(4)  { background-image: url(../images/products_top_list_4.png); top:  45%; left: 72%;} 	/*Others*/



@media screen and (min-width: 1025px) {
#products .indexMenu {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}
}

@media screen and (min-width: 769px) {
.productsTop {
	width: 640px;
}

.productsTop li {
	opacity: .9;
}

.productsTop li:hover {
	opacity: 1;
}
}


@media screen and (max-width: 768px) {
.productsTop li {
	width: 60px;
	height: 60px;
}

.productsTop li a {
	width: 60px;
	height: 60px;
}
}


@media screen and (max-width: 480px) {
.productsTop li {
	width: 50px;
	height: 50px;
}

.productsTop li a {
	width: 50px;
	height: 50px;
}
}





/* --------------------

maintenance


-------------------- */





@media screen and (max-width: 768px) {


.maintenanceMenu4 h3 {
 margin: 0;
}

}

.maintenanceMenu {
	margin-bottom: 50px;
	width: auto;
    padding-top: 20px;
}


.maintenanceMenu:after {
	content: "";
	clear: both;
	display: block;
}

.maintenanceMenu > ul > li {
	background: #FFF url(../images/index_menu_title_bg.gif) repeat-x 0 -2px;
	background-size: 9px 96px;
}

.maintenanceMenu > ul > li.chemicalMenu4 {
	background-position: 0 -48px;
}
.maintenanceMenu > ul > li.chemicalMenu5 {
	background-position: 0 -48px;
}

.maintenanceMenu1 {
	width: 48%;
	float: left;
}

/*.maintenanceMenu1 div.detail {
	width: 330px;
	float: left;
}*/
.maintenanceMenu1 .productsToolLibrary {
    border: none;
    margin-bottom: 0;
}
.maintenanceMenu1 .productsToolLibrary h3 {
    font-weight: bold;
    color: #001a72;
    border: none;
    width: 38%;
    background: none;
    padding: 0;
    margin: 0;
}
.maintenanceMenu1 .productsToolLibrary ul {
    padding: 0;
}
.maintenanceMenu1 dd p.fontS {
    font-size: 12px;
}
.maintenanceMenu1 dd p span.fontL {
    font-size: 15px;
}

.maintenanceMenu2 {
	width: 48%;
	float: right;
}

.maintenanceMenu h3 {
	margin: 0 0 10px;
	width: auto;
	border: 1px solid #CCC;
	background-repeat: no-repeat;
	background-position: 97% 50%;
	background-size: auto 90%;
}

/*.maintenanceMenu li:nth-child(1) h3 { background-image: url(../images/index_menu_img1.png); }*/
/* .maintenanceMenu2 h3 { background-image: url(../images/chemicalImg2.jpg); } */

.maintenanceMenu h3 span {
	display: block;
	width: 100%;
	height: 92px;
	text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 5px 50%;
	/*background-size: auto 21px;*/
	background-size: auto 16px;
}

.maintenanceMenu4 {
	width: 100%;
	float: left;
}

.maintenanceMenu5 {
	width: 100%;
	float: left;
}

.maintenanceMenu6 {
	width: 48%;
	float: right;
}

.maintenanceMenu li:nth-child(1) {
	margin-bottom: 30px;
}
.maintenanceMenu li:nth-child(2) {
	margin-bottom: 10px;
}
.maintenanceMenu li:nth-child(3) {
	margin-bottom: 0px;
}

.maintenanceMenu li:nth-child(1) h3 span { background-image: url(../products/maintenance/images/maintenanceText1.png); }
.maintenanceMenu li:nth-child(2) h3 span { background-image: url(../products/maintenance/images/maintenanceText2.png); }
.maintenanceMenu li:nth-child(3) h3 span { background-image: url(../products/maintenance/images/maintenanceText3.png); }
.maintenanceMenu li:nth-child(4) h3 span { background-image: url(../products/maintenance/images/maintenanceText4.png); }
.maintenanceMenu li:nth-child(5) h3 span { background-image: url(../products/maintenance/images/maintenanceText5.png); }
.maintenanceMenu li.maintenanceMenu4 h3 span { background-image: url(../products/atf/images/chemicalText4.png); }
.maintenanceMenu li.maintenanceMenu5 h3 span { background-image: url(../products/atf/images/chemicalText5.png); }

.maintenanceMenu4 h3 span {
	display: block;
	width: 100%;
	height: 46px;
	text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: auto 18px;
}

.maintenanceMenu5 h3 span {
	display: block;
	width: 100%;
	height: 46px;
	text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: auto 18px;
}

.maintenanceMenu dt {
	font-size: 15px;
	font-weight: bold;
}

.maintenanceMenu dd {
	margin-bottom: 15px;
	width: auto;
    height: 120px;
}

.maintenanceMenu dd:after {
	content: "";
	clear: both;
	display: block;
}

.maintenanceMenu dd figure {
	margin-right: 10px;
	padding: 3px;
	width: 120px;
	line-height: 82px;
	float: left;
	border: 1px solid #CCC;
    text-align: center;
}

.maintenanceMenu dl.imgL figure {
	width: 220px;
}
.maintenanceMenu dl.imgL p {
    padding-top: 40px;
}
.maintenanceMenu dd figure img {
	vertical-align: middle;
}

.maintenanceMenu dd p {
	overflow: hidden;
	line-height: 1.5;
}

.maintenanceMenu4 dt {
 width:100%
 height: auto;
 padding: 3px 10px;
 margin-bottom: 10px;
 color: #fff;
 background: #06479b;
}

.maintenanceMenu4 dd {
 font-size: 110%;
}

.maintenanceMenu4 dd.mrg {
 margin-top: -2em;
}


.maintenanceMenu5 dt {
 width:100%
 height: auto;
 padding: 3px 10px;
 margin-bottom: 10px;
 color: #fff;
 background: #06479b;
}

.maintenanceMenu5 dd {
 font-size: 110%;
}

.maintenanceMenu5 dd.mrg {
 margin-top: -2em;
}


/******/
.james {
 text-align: center;
 margin-top: 50px;
}

.james img {
 width: 100%;
 max-width: 400px;
}

.maintenanceBtn  {
	margin-top: 15px;
}

.maintenanceBtn p {
	text-align: center;
}

.maintenanceBtn p img {
	width: 180px;
	height: auto;
}

@media screen and (max-width: 1024px) {
.maintenanceMenu {
	margin-left: 10px;
	margin-right: 10px;
}
}


@media screen and (max-width: 768px) {
.maintenanceMenu li {
	width: auto;
	float: none;
}
.maintenanceMenu li:nth-child(1) {
	margin-bottom: -30px;
}
.maintenanceMenu li:nth-child(2) {
	margin-bottom: -5px;
}
.maintenanceMenu li:nth-child(3) {
	margin-bottom: -62px;
}

.maintenanceMenu h3 {
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: contain;
}

.maintenanceMenu h3 span {
	height: 46px;
}
.maintenanceMenu1 div.detail {
    width: 100%;
}

.maintenanceMenu > ul > li {
	background-position: 0 -48px;
}
.maintenanceMenu .maintenanceMenu2 {
    margin-top: 85px;
}
.maintenanceMenu .maintenanceMenu6 {
    margin-top: 45px;
}
.cmr_l {
 width: 100%;
 margin-top: 0px;
}

.cmr_r {
 margin-top: 50px;
 width: 100%;
}
}



@media screen and (max-width:1024px){
.productsBox figure img{
	width:100%;
}
.maintenanceBox .productsBox figure img{
	width:100%;
}

.maintenanceBox .productsBox figure {
	width:50%;
	margin:10px auto;
}
}

@media screen and (max-width:480px){

.productsBox figure img{
	width:100%;
}

.maintenanceBox .productsBox figure img{
	width:100%;
}

.maintenanceBox .productsBox figure {
	width:80%;
	margin:10px auto;
}
    
.productsBox1 .productsBoxImg.stabImg {
    width: 88%;
    margin: 0 auto;
    padding-top: 20px;
}

.maintenanceMenu li:nth-child(1) {
	margin-bottom: 93px;
}
.maintenanceMenu li:nth-child(2) {
	margin-bottom: 65px;
}
.maintenanceMenu li:nth-child(3) {
	margin-bottom: -40px;
}

.maintenanceMenu dd figure,
.maintenanceMenu dl.imgL figure{
    width: 44%;
}
.maintenanceMenu dd figure img,
.maintenanceMenu dl.imgL figure img{
    width: 100%;
}

.maintenanceMenu1 div.detail {
	width: 50%;
	float: left;
}
/*.maintenanceBtn p img {
    width: 100%;
}*/
.maintenanceBtn p img {
    width: 50%;
	margin-top: 10px;
}
}


/*****======= maintenanceMovieBox ===========*****/
.maintenanceMovieBox{
    margin-top: 0px;
	margin-bottom: 30px;
}

@media screen and (max-width: 1024px) {
.maintenanceMovieBox {
    padding-right: 0px;
	padding-left: 0px;
}
}