@charset "utf-8";

body{
	background-image: url(../img/award5/bg.jpg);
	background-repeat: no-repeat;
}

/*-----------------------------------------------
 header
-----------------------------------------------*/

div#header{
	height: 64px;
	background-color: #cfb51d;
}

div#header div.inner{
	position: relative;
	z-index: 100;
	width: 1000px;
	margin: 0 auto;
}

div#header div.inner div.logo{
	position: absolute;
	top: 16px;
	left: 19px;
}

/*-----------------------------------------------
 content
-----------------------------------------------*/

div#content{
	position: relative;
	margin: 0 auto;
}

/*———————– top-column ———————–*/

div#content div.top-column{
	position: relative;
	width: 1000px;
	height: 1018px;
	margin: 0 auto;
}

div#content div.top-column h1{
    z-index: 10;
}

div#content div.top-column h1 span.title1{
	position: absolute;
	z-index: 3;
    top: -1px;
    left: 785px;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
}

div#content div.top-column h1 span.title2{
	position: absolute;
	z-index: 3;
    top: 189px;
    left: 775px;
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
}

div#content div.top-column h1 span.title3{
	position: absolute;
	z-index: 3;
    top: 156px;
    left: 39px;
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
}

div#content div.top-column h1 span.title4{
	position: absolute;
	z-index: 3;
    top: 60px;
    left: 698px;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}
div#content div.top-column p.name{
	position: absolute;
    z-index: 10;
    top: 408px;
    left: 713px;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

div#content div.top-column div.icon-logo{
	position: absolute;
	z-index: 4;
    top: 10px;
    left: 10px;
}

div#content div.top-column div.icon-award{
	position: absolute;
	z-index: 4;
    top: 22px;
    left: 149px;
}

div#content div.top-column div.main{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

/*———————– pickup-column ———————–*/

div#content div.pickup-column{
	position: relative;
	z-index: 2;
	height: 400px;
	background-color: rgba(255,255,255,0.76);
}

div#content div.pickup-column h2{
	position: absolute;
	z-index: 10;
    top: 0;
    left: 0;
}

div#content div.pickup-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content div.pickup-column div.inner p.txt{
	position: absolute;
    top: 157px;
    left: 49px;
}

div#content div.pickup-column div.inner div.pop{
	position: absolute;
    top: -57px;
    left: 580px;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

div#content div.pickup-column div.inner div.click{
	position: absolute;
    top: 254px;
    left: 480px;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
}

/*———————– outline-column ———————–*/

div#content div.outline-column{
	position: relative;
	z-index: 3;
	height: 674px;
	background-image: url(../img/award5/bg-outline.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

div#content div.outline-column h2{
	position: absolute;
    top: -16px;
    left: 0;
}

div#content div.outline-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content div.outline-column div.inner p.txt{
	position: absolute;
    top: 105px;
    left: 23px;
}

/*———————– character-column ———————–*/

div#content div.character-column{
	position: relative;
	z-index: 3;
	height: 835px;
	margin: 0 auto;
	background-image: url(../img/award5/bg-character.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

div#content div.character-column h2{
	position: absolute;
    top: -16px;
    left: 0;
}

div#content div.character-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content div.character-column div.inner div.c1{
	position: absolute;
    top: 120px;
    left: 21px;
}

div#content div.character-column div.inner div.comic{
	position: absolute;
	z-index: 3;
    top: 105px;
    left: 371px;
}

div#content div.character-column div.inner div.c2{
	position: absolute;
    top: 123px;
    left: 543px;
}


/*———————– dialogue-column ———————–*/

div#content div.dialogue-column{
	position: relative;
	z-index: 3;
	background-image: url(../img/award5/bg-dialogue.png);
	background-repeat: repeat-y;
	background-position: center bottom;
	background-attachment: fixed;
}

div#content div.dialogue-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding: 50px 0;
}

div#content div.dialogue-column div.inner div > div{
	margin-bottom: 10px;
	text-align: center;
}

/*———————– information-column ———————–*/

div#content div.information-column{
	position: relative;
	z-index: 4;
	height: 550px;
	margin: 0 auto;
	background-image: url(../img/award5/bg-information.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #fff;
}

div#content div.information-column h2{
	position: absolute;
    top: -16px;
    left: 0;
}

div#content div.information-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content div.information-column div.tmb{
	position: absolute;
    top: 135px;
    left: 0;
}

div#content div.information-column p.txt{
	position: absolute;
    top: 161px;
    left: 265px;
}

div#content div.information-column div.btn-buy{
	position: absolute;
    top: 333px;
    left: 265px;
}

div#content div.information-column div.btn-preview{
	position: absolute;
    top: 402px;
    left: 265px;
}

/*———————– other-column ———————–*/

div#content div.other-column{
	position: relative;
    z-index: 3;
	height: 318px;
	background-color: #7c6d11;
}

div#content div.other-column div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content div.other-column div.inner h2{
	padding: 20px 0 0;
	font-size: 30px;
	color: #fff;
	text-align: center;
}

div#content div.other-column div.inner ul.fnav{
	width: 963px;
	margin: 0 auto;
}

div#content div.other-column div.inner ul.fnav li{
	float: left;
	width: 187px;
	margin-right: 7px;
}

div#content div.other-column div.inner ul.fnav li:last-child{
	margin-right: 0;
}

/*-----------------------------------------------
 footer
-----------------------------------------------*/

div#footer{
	padding-top: 30px;
	background-color: #cfb51d;
	text-align: center;
}

div#footer div.logo{
	padding-bottom: 10px;
}

div#footer p.copyright{
	padding-bottom: 20px;
	color: #fff;
}