/*------------------------------------------
	Gloomy
--------------------------------------------*/
.gloomy #header{
	width:980px;
	height:763px;
	background:url(../../../img/grani/collaboration/gloomy/title_bg.png) no-repeat;
	margin:0 auto;
	_filter:none;
}

.gloomy #header .hgroup{
	left:35px;
	position:relative;
}

.gloomy #header .hgroup h1{
	background:url(../../../img/grani/collaboration/gloomy/title_h1.png) no-repeat;
	width:528px;
	height:69px;
	overflow:hidden;
	position:absolute;
	text-indent:-9999px;
	top:80px;
}

.gloomy #header .hgroup h2{
	background:url(../../../img/grani/collaboration/gloomy/title_h2.png) no-repeat;
	width:910px;
	height:27px;
	overflow:hidden;
	position:absolute;
	text-indent:-9999px;
	top:35px;
}

.gloomy #header .hgroup h3{
	background:url(../../../img/grani/collaboration/gloomy/title_h3.png) no-repeat;
	width:240px;
	height:87px;
	right:63px;
	top:74px;
	overflow:hidden;
	position:absolute;
	text-indent:-9999px;
}

.gloomy #header .ss{
	width:509px;
	height:384px;
	margin:0 0 31px 31px;
	padding-top:170px;
}

.gloomy #header .download{
	width:348px;
	height:81px;
	margin-left:111px;
	text-indent:-9999px;
	overflow:hidden;	
}

.gloomy #header .download a{
	background:url(../../../img/grani/collaboration/gloomy/download.png) no-repeat;
	width:348px;
	height:81px;
	display:block;
}

.gloomy #header .download a:hover{
	background:url(../../../img/grani/collaboration/gloomy/download.png) no-repeat 0 -81px;
}

.gloomy #contents{
	width:980px;
	background:url(../../../img/common/grani/contents_mid.png) repeat-y 0 0;
	margin:0 auto;
	padding-top:82px;
}

.gloomy #contents #entry{
	width:980px;
	margin:0 auto 41px auto;
}

.gloomy #contents .about{
	width:890px;
	margin:0 auto 40px auto;
}

.gloomy #contents .about .read{
	width:353px;
	float:right;
	margin-bottom:24px;
	padding-right:3px;
}

.gloomy #contents .about .read h2{
	background:url(../../../img/grani/collaboration/gloomy/about_article.png) no-repeat;
	width:332px;
	height:52px;
	text-indent:-9999px;
	overflow:hidden;
	margin-bottom:4px;
}

.gloomy #contents .about .txt{
	color:#404040;
	font-size:123.1%;
	line-height:150%;
	min-height:120px;
	_height:auto !important;
	_height:120px;
}

.gloomy #contents .about .frm_top{
	background:url(../../../img/grani/collaboration/gloomy/about_frm_top.png) no-repeat;
	margin:0 auto;
	background-color:#C90211;
	width:890px;
	position:relative;
	padding-bottom:14px;
}

.gloomy #contents .about .frm_btm{
	background:url(../../../img/grani/collaboration/gloomy/about_frm_btm.png) no-repeat 0 bottom;
	padding-bottom:6px;
	margin:0 auto;
	width:890px;
	clear:both;
}

.gloomy #contents .about .browser01{
	height:384px;
	position:absolute;
	top:-240px;
	left:10px;
}

.gloomy #contents .about .browser02{
	height:168px;
	position:absolute;
	top:-17px;
	right:0;
}

.gloomy #contents .about .section{
	width:890px;
	margin:0 auto;
	color:#FFFFFF;
	font-size:108%;
	padding-top:163px;
}

.gloomy #contents .about .section p{
	line-height:155%;
}

.gloomy #contents .about .section h3{
	width:890px;
	height:59px;
	text-indent:-9999px;
	overflow:hidden;	
	margin:0 auto 11px auto;
	background:url(../../../img/grani/collaboration/gloomy/about_h1.png) no-repeat;
	
}

.gloomy #contents .about .section .box01,
.gloomy #contents .about .section .box02,
.gloomy #contents .about .section .box03,
.gloomy #contents .about .section .box04{
	float:left;
	margin-right:14px;
}

.gloomy #contents .about .section .img{
	margin-bottom:10px;
	position:relative;
}

.gloomy #contents .about .section .img img{
	display:block;
}

.gloomy #contents .about .section .anime01{
	position:absolute;
	left:69px;
	top:75px;	
}

.gloomy #contents .about .section .anime02{
	position:absolute;
	left:13px;
	top:45px;
}

.gloomy #contents .about .section .anime03{
	position:absolute;
	left:72px;
	top:79px;	
}

.gloomy #contents .about .section .box01{
	padding-left:20px;
	width:260px;
}

.gloomy #contents .about .section .box02{
	width:144px;
}

.gloomy #contents .about .section .box03{
	width:144px;
}

.gloomy #contents .about .section .box04{
	width:260px;
	margin:0 0 36px 0;
}

.gloomy #contents .about .section .other_frm_top{
	background:url(../../../img/grani/collaboration/gloomy/design_frm_top.png) no-repeat;	
	padding:12px 0 11px 32px;
}

.gloomy #contents .about .section .other_frm_mid{
	background:url(../../../img/grani/collaboration/gloomy/design_frm_mid.png) repeat-y;
	width: 850px;
	margin: 0 auto;
	clear:both;
}

.gloomy #contents .about .section .other_frm_btm{
	background:url(../../../img/grani/collaboration/gloomy/design_frm_btm.png) no-repeat 0 bottom;	
}

.gloomy #contents .about .section .other_frm_btm h4{
	background:url(../../../img/grani/collaboration/gloomy/design_h3.png) no-repeat;	
	width:272px;
	height:16px;
	text-indent:-9999px;
	overflow:hidden;
	margin-bottom:10px;
}

.gloomy #contents .about .section .other_frm_top div{
	float:left;
}

.gloomy #contents .about .section .other_box01{
	width: 309px;
	margin-top:10px;
	margin:10px 32px 0 0;
}

.gloomy #contents .about .section .other_box01 p{
	font-size:77%;
	color:#CD9B9F;
}

.gloomy #contents .about .section .other_box01 .info{
	font-size:100%;
	margin-bottom:16px;
	color:#F1BFC3;
	line-height: 156%;
}

.gloomy #contents .about .section .other_box02{
	width: 218px;
	margin-right:13px;
}

.gloomy #contents .about .section .other_box03{
	width: 218px;
}

.gloomy #contents .about .section .other_box02 .img{
	margin-left:0px;
}

.gloomy #contents .about .section .other_box02 p{
	margin:0 0 6px 8px;
	font-size:85%;
	color:#F1BFC3;
}

.gloomy #contents .about .section .other_box03 .img{
	margin-left:0px;
	margin-bottom:3px;
}

.gloomy #contents .about .section .other_box03 p{
	margin:0 0 6px 7px;
	font-size:85%;
	color:#F1BFC3;
}

.gloomy #contents .banner{
	width:890px;
	background:url(../../../img/grani/collaboration/gloomy/banner_frm_mid.png) repeat-y;
	margin: 0 auto;
}

.gloomy #contents .banner .frm_top{
	background:url(../../../img/grani/collaboration/gloomy/banner_frm_top.png) no-repeat;
	padding-top:26px;
	width:890px;
	margin-bottom:16px;
}

.gloomy #contents .banner .frm_btm{
	background:url(../../../img/grani/collaboration/gloomy/banner_frm_btm.png) no-repeat 0 bottom;
	padding-bottom:10px;
	width:890px;
}

.gloomy #contents .banner .banner01{
	float:left;	
	width:338px;
	padding-left:6px;
	margin-right:20px;
	position:relative;
}

.gloomy #contents .banner .banner01 h2{
	background:url(../../../img/grani/collaboration/gloomy/banner_01.png) no-repeat;
	width:338px;
	height:133px;
	text-indent:-9999px;
	overflow:hidden;
	position:relative;
	top:-20px;
}

.gloomy #contents .banner .banner01 p{
	font-size:108%;
	left:21px;
	width:316px;
	color:#383838;
	position:relative;
	top:-10px;
	line-height:150%;
}

.gloomy #contents .banner .banner_box{
	width:500px;
	float:left;
}

.gloomy #contents .banner .banner_box .banner02{
	float:left;
 	width:326px;
}

.gloomy #contents .banner .banner_box .box01 p{
	font-size:93%;
	line-height:130%;
	color:#6A6A6A;
}

.gloomy #contents .banner .banner_box .box01 .banner_img{
	width:150px;	
	float:left;
	margin-right:20px;
}

.gloomy #contents .banner .banner_box .box01 textarea{
	height:56px;
	margin-top:12px;
	width:326px;
}

.gloomy #contents .banner .banner_box .box02{
	margin-top:20px;
}

.gloomy #contents .banner .banner_box .box02 .banner_img{
	width:200px;	
	float:left;
	margin-right:20px;
}

.gloomy #contents .banner .banner_box .box02 textarea{
	float:left;
	height:56px;
	width:276px;
}

.gloomy #contents .banner .top{
	margin-bottom:1px;
}