@charset "utf-8";

/*************************************
	base
*************************************/

@font-face
{
	font-family: 'coconoe';
	src: url(../font/coconoe.woff) format('woff'), url(../font/coconoefont001.ttf) format('truetype');
}

#container
{
	width: 100%;
	padding-top: 222px;
	position: relative;
	z-index: 1;
}

#content
{
	width: 100%;
	position: relative;
}

/*************************************
	years
*************************************/

#years
{
	width: 100%;
	overflow: hidden;
	padding-bottom: 18px;
	background: url(../img/news/line_parts_01.png) no-repeat 50% 100%, url(../img/common/line_base_gray.png) repeat-x 0 100%;
}

#years ul
{
	width: 980px;
	overflow: hidden;
	margin: 0 auto;
}

#years ul li
{
	width: 71px;
	float: left;
	list-style: none;
}

#years ul li a
{
	display: block;
	width: 71px;
	overflow: hidden;
	position: relative;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
	line-height: 47px;
	font-family: HelveticaNeue-Light, "aktiv-grotesk-std-n3", "aktiv-grotesk-std", Arial, sans-serif;
	letter-spacing: 0;
	font-weight: 300;
	color: #666666;
	text-decoration: none;
}

#years ul li a.select 	{ color: #000000; }

#years ul li a span
{
	display: block;
	width: 8px;
	height: 8px;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 31px;
	background: #666666;
	text-indent: 100%;
	white-space: nowrap;
	
	transition: height 50ms linear 50ms, width 100ms linear, left 100ms linear;
	-webkit-transition: height 50ms linear 50ms, width 100ms linear, left 100ms linear;
}

#years ul li a.select span 	{ background: #000; }

#years ul li a:hover span, #years ul li a.select span
{
	width: 71px;
	height: 2px;
	left: 0;
	
	transition: height 50ms linear, width 100ms linear, left 100ms linear;
	-webkit-transition: height 50ms linear, width 100ms linear, left 100ms linear;
}

/*************************************
	list
*************************************/

#list
{
	width: 100%;
	margin-bottom: 97px;
}

#list ul
{
	width: 100%;
}

#list ul.disp
{
	padding-bottom: 3px;
	background: url(../img/common/line_base_gray.png) repeat-x 0 0;
	background: url(../img/news/line_parts_02.png) no-repeat 50% 100%, none;
}

#list ul li
{
	width: 100%;
	height: 0;
	overflow: hidden;
	position: relative;
	background: url(../img/common/line_base_gray.png) repeat-x 0 100%;
	list-style: none;
	
	transition: height 150ms linear;
	-webkit-transition: height 150ms linear;
}

#list ul.disp li
{
	height: 71px;
	
	transition: height 200ms linear 200ms;
	-webkit-transition: height 200ms linear 200ms;
}

#list ul li a
{
	display: block;
	width: 100%;
	line-height: 71px;
	text-decoration: none;
}

#list ul li a:hover
{
	background-color: #bbbbbb;
	color: #FFFFFF;
}

#list ul li a div
{
	width: 980px;
	margin: 0 auto;
	text-indent: 40px;
	white-space: nowrap;
	background: url(../img/news/list_hover.gif) no-repeat 100% 71px;
}

#list ul li a:hover div
{
	background-position: 100% 0;
}

#list ul li span
{
	display: block;
	width: 71px;
	height: 29px;
	line-height: 29px;
	position: absolute;
	top: -29px;
	left: 50%;
	margin-left: -493px;
	font-family: coconoe;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: none;
	font-size: 16px;
	font-size: 1.6rem;
	letter-spacing: 0;
	text-align: center;
	
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

#list ul li span.new
{
	background: url(../img/common/list_new_bg.gif) no-repeat -4px 0;
	color: #767676;
}

#list ul li:hover span.new
{
	background-position: -82px 0;
	color: #767676;
}

#list ul li span.date
{
	background: url(../img/news/list_date_bg.gif) no-repeat -4px 0;
	color: #767676;
}

#list ul li:hover span.date
{
	background: url(../img/common/list_new_bg.gif) no-repeat -82px 0;
	color: #767676;
}