//LESS

@import "base";

.product{
	background: @red;
	width: 100%;
	height: 223px;
	margin: 70px 0;
	
	.wrap{
		.width960;
		position: relative;
		
		.p1,.p2,.p3,.p4,.p5,.p6{
			position: absolute;
			cursor: pointer;
			display: block;
		}
		.p1t,.p2t,.p3t,.p4t,.p5t,.p6t{
			position: absolute;
			display: block;
			background: url(../images/arrowWhite.png) no-repeat center right;
			color: white;
			cursor: pointer;
			font-size: 1.4em;
			padding: 0 15px 2px 0;
			letter-spacing: 0;
		}
		
		.p1t{
			top: 42px;
			left: 0;
		}
		.p1{
			top: -23px;
			left: 130px;
		}
		.p2t{
			top: 42px;
			left: 290px;
		}
		.p2{
			top: -50px;
			left: 440px;
		}
		.p3t{
			top: 42px;
			right: 190px;
		}
		.p3{
			top: -16px;
			right: 5px;
		}
		.p4t{
			top: 155px;
			left: 30px;
			z-index: 2;
		}
		.p4{
			top: 111px;
			left: 120px;
		}
		.p5t{
			top: 155px;
			left: 320px;
		}
		.p5{
			top: 124px;
			left: 464px;
		}
		.p6t{
			top: 155px;
			right: 175px;
		}
		.p6{
			top: 119px;
			right: 36px;
		}
	}
}

.wraper{
	.width960;
	.news{
		display: inline-block;
		vertical-align: top;
		width: 580px;
		height: 200px;
		margin: 0 50px 0 0;
		position: relative;
		display: none;
		
		h2{
			display: block;
			position: absolute;
			top: -10px;
			left: 45%;
			padding: 0 10px;
			background: white;
			color: @red;
			font-size: 18px;
			font-weight: bold;
		}
		
		ul{
			border-top: 1px @red solid;
			border-bottom: 1px @red solid;
			li{
				padding: 16px 0 15px 10px;
				height: 19px;
				border-bottom: 1px gray dashed;
				font-size: 15px;
				
				&:last-child{
					border: 0;
				}
				
				a{
					overflow:hidden;
					display: block;
					width: 100%;
					height: 19px;
					
					.date{
						color: gray;
						font-size: 12px;
						margin-right: 10px;
					}
				}
			}
		}
	}
	.btn{
		display: inline-block;
		vertical-align: top;
		width: 100%;
		text-align: center;

		a{
			display: inline-block;
			border: 3px @red solid;
			width: 360px;
			height: 78px;
			padding: 5px;
			margin: 0 0 17px 0;

			span{
				border: 1px @red solid;
				display: block;
				width: 99%;
				height: 98%;
				color: @red;
				font-size: 30px;
				line-height: 78px;
				text-align: center;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}

			&:hover span{
				background: #f4f2ee;
			}

			&:first-child{
				margin-right: 25px;
			}
		}
	}
}