@import url('/css/globals.css');

/********************************************
CONTENT-UPPER
********************************************/
#content-upper {
	position: relative;
	width: 960px;
	height: 476px;
}

	#banner {
		position: relative;
		float: left;
		width: 719px;
		height: 475px;
	}

/********************************************
CONTENT-MIDDLE
********************************************/
#content-middle {
	position: relative;
	width: 960px;
	height: 238px;
}

	#content-middle-left {
		position: relative;
		float: left;
		width: 719px;
		height: 237px;
		background-color: #fff;
	}
	
		#content-middle-left-img {
			position: relative;
			width: 239px;
			height: 237px;
			float: left;
		}
		
		#content-middle-left-text {
			position: relative;
			float: left;
			width: 480px;
			height: 237px;
		}
		
			#content-middle-left-text h3 {
				color: #c45402;
			}
			
			#content-middle-left-text h4 {
				position: absolute;
				left: 0;
				bottom: 0;
			}
		
			#content-middle-left-text h4 a {
				padding: 10px 20px 0 19px;
				background: transparent url("/images/btn-arrow-orange.png") no-repeat 431px 0;
				height: 33px;
				width: 441px;
				display: block;
			}
			
			#content-middle-left-text h4 a:hover {
				color: #c45402;
			}
	
	#content-middle-right {
		position: relative;
		float: right;
		width: 240px;
		height: 237px;
		background-color: #edefc5;
	}
	
		#content-middle-right h4 {
			position: absolute;
			left: 0;
			bottom: 0;
		}
		
		#content-middle-right h4 a {
			padding: 10px 20px 0 19px;
			background: transparent url("/images/btn-arrow-orange.png") no-repeat 191px 0;
			width: 201px;
			height: 33px;
			display: block;
		}
		
		#content-middle-right h4 a:hover {
			color: #c45402;
		}
	
/********************************************
CONTENT-LOWER
********************************************/
#content-lower {
	position: relative;
	width: 960px;
	height: 275px;
}

	#content-lower-left {
		position: relative;
		float: left;
		width: 719px;
		height: 275px;
		background-color: #31332b;
	}
	
		#content-lower-left h2 {
			color: #fff;		
		}
		
/********************************************
SLIDER
********************************************/
#infiniteCarousel {
	position: relative;
	margin-bottom: 20px;
}

#infiniteCarousel .wrapper {
	width: 719px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 209px;
	overflow: auto;
	position: absolute;
	top: 0;
}

#infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

#infiniteCarousel ul li {
	display:block;
	float:left;
	position: relative;
	width: 239px;
	height: 209px;
	border-right: 1px solid #31332b;
}

#infiniteCarousel ul li a img {
	display: block;
	position: relative;
	width: 239px;
	height: 151px;
	margin-bottom: 10px;
	border: none;
	float: left;
}

.scrollContainer-title {
	position: relative;
	float: left;
	width: 239px;
	height: 48px;
}

#infiniteCarousel ul li .scrollContainer-title p a {
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	line-height: 15px;
}

#infiniteCarousel ul li .scrollContainer-title p a:hover {
	color: #c6c6c6;
}

#infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(images/arrow.png) no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

#infiniteCarousel .forward {
	position: absolute;
	background: transparent url("/images/btn-left-white.png") no-repeat 0 0;
	top: -62px;
	right: 48px;
	width: 27px;
	height: 43px;
	z-index: 999;
	cursor: pointer;
	border: none;
	border-right: 1px solid #fff;
}

#infiniteCarousel .back {
	position: absolute;
	background: transparent url("/images/btn-right-white.png") no-repeat 0 0;
	top: -62px;
	right: 15px;
	width: 27px;
	height: 43px;
	z-index: 999;
	cursor: pointer;
	border: none;
}

#infiniteCarousel .forward:hover,
#infiniteCarousel .back:hover {
	background-position: 0 -43px;
	cursor: pointer;
}

/**********************************************************************/
	
	#content-lower-right {
		position: relative;
		float: right;
		width: 240px;
		height: 275px;
		background-color: #c45402;
	}
	
		#content-lower-right h2 {
			color: #fff;
		}
		
		#content-lower-right h3 {
			color: #fff;
			font-size: 19px;
			line-height: 21px;
		}
		
		#content-lower-right h4 {
			position: absolute;
			left: 0;
			bottom: 0;
		}
		
			#content-lower-right h4 a {
				color: #fff;
				padding: 10px 20px 0 19px;
				background: transparent url("/images/btn-arrow-white.png") no-repeat 191px 0;
				width: 201px;
				height: 33px;
				display: block;
			}
			
			#content-lower-right h4 a:hover {
				color: #333333;
			}
			
			#content-lower-right p {
				color: #fff;
			}
			
			#content-lower-right p a {
				color: #fff;
				text-decoration: underline;
			}
			
			#content-lower-right p a:hover {
				text-decoration: none;
			}