@charset "UTF-8";

/*--------------------------------------------------------------
Common Style
--------------------------------------------------------------*/
body {
	padding: 0;
	background-color: #000000;
	color: #FFF;
	font-size: 100%;
	line-height: 1.6;
	letter-spacing: .05em;
	text-align: center;
}
a {
	color: #ff6900;
	text-decoration: none;
}

a:hover,
a:active {
	text-decoration: underline;
}

.clear { clear: both; }

/* clearfix */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix { zoom: 1; }

/* overflow */
.of {
	overflow: auto;
}

/* img */
img {
	vertical-align: bottom;
	max-width: 100% !important;
/*	height: auto !important;*/
	line-height: 0;
}

.left { float: left; }
.right { float: right; }
.tl { text-align: left !important; }
.tc { text-align: center !important; }
.tr { text-align: right !important; }
.btm20 {margin-bottom:20px;}
.btm25 {margin-bottom:25px;}
/*--------------------------------------------------------------
Layout Style
--------------------------------------------------------------*/
ul, li {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
li {
	margin: 0;
}

/* Header */
#header {
/*
	margin-bottom: 22px;
*/
}

/* Main Image */
#main {
	position: relative;
	width: 100%;
	padding-top: 30px;
	}
#mainImage {
	top: 0;
	left: 0;
}
#main #play_btn{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;

}

/* List Image */
#image {
	margin-bottom: 2.5%;
	text-align: center;
}

/* Button */
#button,
.button_box{
    text-align: center;
	max-width:974px;
    margin: auto;
}

#button li,
.button_box li {
	display: inline-block;
}


#button .linkbtn a,
.button_box .linkbtn a{
	display: block;
}
/*--------------------------------------------------------------
PC
--------------------------------------------------------------*/
#contents {
	max-width: 974px;
	padding: 0 15px;
	margin: 0 auto;
	background-image:url('../IMAGES/background.png');
	background-position:center  top;
	background-repeat:no-repeat;
}

/* Header */
#header .left {
	min-width: 88px;
}
#header .right {
	min-width: 420px;
	margin: 35px 6px 0 0;
}

/* Main Image */
#main {
	/*height: 480px;*/
}
#main a{
	display: block;
}

#main a img {
	top: 190px;
	right: 432px;
}

/* Button */
#button ul,
.button_box ul {
	max-width: 974px;
    margin:20px 0 0 -5px;
}

.tw{
	width:57px !important;
}
.tw_ie8{
	width:56px !important;
    position: relative !important;
    top: -11px !important;
    left:0px !important
}
#twitter-widget-0,#twitter-widget-1{
	height:25px !important;
}
.fb{
	width:57px !important;
	height:65px !important;
}
.fb_iframe_widget iframe {
	top:-5px;
}

/*caption*/
.cap{
	text-align:left;
	font-size:12px;
	margin:10px 57px;
}

.f10{
	font-size:11px !important;
	font-weight:bold !important;
}
.related{
background: #000000;
border-top: none !important;
/*width: 974px;*/
text-align: center;
margin: auto;
}
.related-links li{
	margin: 0 10px 0 0;
}

.related .related-links a:after,
.related .related-links a .after{
	display:none !important;
}

.related .restrict .container {
    border-top: 1px solid #4c4c4c !important;
}

@media screen and (max-width:280px) {
    #header .right {
		max-width: 120px;
		min-width: 0;
		margin: 13px 4px 0 0;
	}
	#header .left {
		max-width: 27px;
		min-width: 0;
	}
	#contents {
		background-position:center bottom;
	}
	#button li.linkbtn img,
	.button_box li.linkbtn img {
		max-width: 150px;
		min-width: 0;
	}
}

@media screen and (min-width:281px) and (max-width:480px) {
    #header .right {
		max-width: 210px;
		min-width: 0;
		margin: 25px 6px 0 0;
	}
	#header .left {
		max-width: 44px;
		min-width: 0;
	}
	#contents {
		background-position:center bottom;
	}
}

@media screen and (min-width:481px) and (max-width:730px) {
    #header .right {
		max-width: 336px;
		min-width: 0;
	}
	#header .left {
		max-width: 70px;
		min-width: 0;
	}
}

@media screen and (max-width:730px) {
    #button li,
    .button_box li {
	    display:block;
	}
	#button li.tw,
	.button_box li.tw {
	    margin:5px auto 10px;
	}
	#button li.fb,
	.button_box li.fb {
	    margin:0 auto;
	}
	.cap {
		margin:10px 15px;
	}
	.related {
		text-align:left;
	}
	.related .related-links {
		float:none;
	}
	.related .related-links ul {
		float:none;
	}
	.related .related-links li {
		float:none;
		margin:0;
		border-bottom: 1px solid #4c4c4c;
		padding:5px 0;
	}
	.related .related-links li.last {
		border-bottom:0;
	}
	.related .related-links li:before, .related .related-links li .before {
		content: "";
	}
	.related .related-links a {
		padding:0;
	}
}