//LESS

@import "base";

#subMenu{
	width: 100%;
	height: 60px;
	background: @red;
	margin: 60px 0 40px 0;
	
	ul{
		display: block;
		.width960;
		
		li{
			display: inline-block;
			height: 60px;
			position: relative;
			font-size: 16px;
			line-height: 60px;
			padding-right: 10px;
			margin-left: -5px;
			transition: 0.3s;
			-webkit-transition: 0.3s;
			
			a{
				color: white;
				height: 60px;
				display: block;
			}
			span{
				position: absolute;
				display: block;
				left: 5px;
				bottom: 5px;
			}
			
			&:hover,&.current{
				background: darken(@red,10%);
			}
			
			&#valveImpeller{
				padding-left: 70px;
				span{
					background: url(../images/productBtn1.png) no-repeat;
					width: 59px;
					height: 50px;
				}
			}
			
			&#nailGun{
				padding-left: 80px;
				span{
					background: url(../images/productBtn2.png) no-repeat;
					width: 70px;
					height: 70px;
				}
			}
			
			&#vehicle{
				padding-left: 85px;
				span{
					background: url(../images/productBtn3.png) no-repeat;
					width: 75px;
					height: 50px;
				}
			}
			
			&#machinery{
				padding-left: 75px;
				span{
					background: url(../images/productBtn4.png) no-repeat;
					width: 64px;
					height: 49px;
				}
			}
			
			&#medical{
				padding-left: 78px;
				span{
					background: url(../images/productBtn5.png) no-repeat;
					width: 73px;
					height: 58px;
				}
			}
		}
	}
}

#content{
	.intro{
		display: inline-block;
		vertical-align: top;
		width: 208px;
		height: 255px;
		margin: 0 27px 50px 0;
		line-height: 36px;
		font-size: 18px;
		overflow: hidden;
		letter-spacing: 0;
		border-top: 2px @red solid;
		padding-top: 7px;
		
		h1{
			display: inline-block;
			letter-spacing: 0;
			color: @red;
			font-size: 38px;
			line-height: 42px;
			font-weight: 600;
			width: auto;
			border: 0;
			margin: 0 10px 0 0;
		}

		p{
			font-size: 16px;
			color: black;
			line-height: 26px;
			margin-top: 10px;
		}
	}
	
	.box{
		display: inline-block;
		vertical-align: top;
		width: 208px;
		height: 255px;
		margin: 0 27px 50px 0;
		background: #eaeaea;
		transition: 0.3s;
		-webkit-transition: 0.3s;
		
		&:hover{
			background: darken(#eaeaea,10%);
		}
		
		img{
			margin: 0 auto;
			display: block;
		}
		
		.title{
			display: block;
			margin: 10px 15px 10px 15px;
			background: white;
			font-size: 18px;
			text-align: center;
			padding: 10px 0;
		}
	}
}