@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");
@import url("font-awesome.min.css");

/* Reset */
	html {
		overflow-x:hidden;
	}

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		text-decoration:none;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Desktop + Tablet */

	@media screen and (min-width: 737px) {
				

		.container {
			background: #333333;
			width:100%; height:70em;
		}


	.sd_01 {
		position:absolute;
		display:scroll;
		position:fixed;
		background: #333333;
		top:0%;
		left:0%;
		width:100%; height:4em; z-index:99;		
		box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.25);
	}
	.sd_01 ul {
		position:absolute;
		width:60%; 
		height:8em;
		left:23%;
		top:0.5em;
	}
	.sd_01 li {
		display:inline-block;
		border-bottom:0.1em solid gray;
		padding: 0.2em;
		margin-right:2em;
		text-align:center;
		width:20%;
	}
	.sd_01 a {
		color:#ffffff;
		font-size:80%;
	}
	.sd_01 li:hover a {
		color:#fffaaa;
	}

	.sd_02 {
		position:relative;
		width:55%;
		height:100%;
		top:8em; left:23%;
	}
	.text {
		position:absolute;
		top:0px; left:0px;
		color:#ffffff;
		font-size:1.5em;
		font-weight:500;
		text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:3%; left:0px;		
	  	width:48%;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.2em;
	  	color:#ffffff;
	}
	.img {
		width:100%;
	  	position:absolute;
	  	top:2em; left:0px;
	  	border:0.15em solid #b0b0b0;

	}
	.tit {
		position:absolute;
		top:2.5em; left:105%;
	  	width:100%;
	  	border:0.15em solid #b0b0b0;
	  	color:#ffffff;
	  	text-align:justify;
	  	font-size:0.8em;
	  	padding:0.5em 0.5em;
	  	line-height:1.5em;
	}

	.sd_02 table {
	  	position:absolute;
	  	width:100%;
	  	top:9em; left:105%;
	  	border-top:0.1em solid #ffffff;  
	}
	.sd_02 td {
	  	text-align:center;
	  	color:#ffffff;
	  	font-size:75%;
	  	padding:0.01em 0;
	  	border-bottom:0.1em  solid #ffffff;
	}
	.ta {
	  	border-left:0.1em  solid #ffffff;
	}

	.floor {
		position:relative;
		top:26em;
	}

	.cosmo {
		position:absolute;
		width:50%;
	  	top:45%;left:0%;
	}
	.s_title_01 {
	 	font-size:1em;
	  	font-weight:600;
	  	color:#ffffff;
	}
	.icon_0{
	  	position:absolute;
	  	width:100%;
	}
	.icon_0 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_0 img{
		width:100%;
	}
	.icon_0 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.icon_1{
	  	width:100%;
	  	padding-top:25%;
	}
	.icon_1 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_1 img{
		width:100%;
	}
	.icon_1 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.icon_2{
	  	position:absolute;
	  	width:100%;
	  	padding-top:2%;
	}
	.icon_2 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_2 img{
		width:100%;
	}
	.icon_2 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.boger {
		position:absolute;
		width:50%;
	  	top:16.5%;left:50%;
	}
	.s_title_02 {
	 	font-size:1em;
	  	font-weight:600;
	  	color:#ffffff;
	}
	.icon_3{
	  	position:absolute;
	  	width:100%;
	}
	.icon_3 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_3 img{
		width:100%;
	}
	.icon_3 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.icon_4{
	  	width:100%;
	  	padding-top:25%;
	}
	.icon_4 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_4 img{
		width:100%;
	}
	.icon_4 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.icon_5{
	  	position:absolute;
	  	width:100%;
	  	padding-top:2%;
	}
	.icon_5 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_5 img{
		width:100%;
	}
	.icon_5 p{
	  	text-align:center;
	  	margin-top:-1em;
	}

	.icon_6{
	  	position:absolute;
	  	width:100%;
	  	padding-top:27%;
	}
	.icon_6 li{
	  	display:inline-block;
	  	color:#ffffff;
	  	font-size:0.8em;
		width:18%;
	}
	.icon_6 img{
		width:100%;
	}
	.icon_6 p{
	  	text-align:center;
	  	margin-top:-1em;
	}
	}

/* Tablet Only */

	@media screen and (min-width: 737px) and (max-width: 1200px) {



		.container {
			background: #333333;
			position:relative;
			width:100%; height:120em;
		}

	.sd_01 {
		position:absolute;
		display:scroll;
		position:fixed;
		background: #333333;
		top:0%;
		left:0%;
		width:100%; height:4em; z-index:99;		
		box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, 0.25);
	}
	.sd_01 ul {
		position:absolute;
		width:70%; 
		height:4em;
		left:30%;
		top:0.5em;
	}
	.sd_01 li {
		display:inline-block;
		border-bottom:0.1em solid gray;
		padding: 0.2em;
		margin-right:2em;
		text-align:center;
		width:20%;
	}
	.sd_01 a {
		color:#ffffff;
		font-size:0.8em;
	}
	.sd_01 li:hover a {
		color:#fffaaa;
	}

	.sd_02 {
		position:relative;
		width:80%;
		height:100%;
		top:8em; left:30%;
	}
	.text {
		position:absolute;
		top:0px; left:0px;
		color:#ffffff;
		font-size:1.5em;
		font-weight:500;
		text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.floor {
		position:relative;
		top:29em;
	}
	.cosmo {
		position:absolute;
		top:0em;width:70%
	}
	.boger {
		position:absolute;
		top:33em; left:0em;
		width:70%;
	}

	}

/* Mobile Only */

	#navPanel, #titleBar {
		display: none;
	}


	@media screen  and (min-width: 401px) and (max-width: 736px) {

		/* Wrappers */

			.container {
				background: #333333;
				position:relative;
				width:100%; height:60em;
				overflow:hidden;
			}

		/* Logo */
			#logo {
				z-index: 200
				width: 100%;
				text-align: center;
				padding:1em;
				background: #333333
			}

	#nav {
		display:none;
	}
	.sd_01 ul {
		display:none;
	}
	.sd_02 {
	  	position:relative;
	  	width:88%;
	  	height:100%;
	  	top:1em; left:1em;
	}
	#t_info {
		display:none;
	}
	.text {
	  	position:absolute;
	  	top:0px; left:0px;
	  	color:#ffffff;
	  	font-size:1.5em;
	  	font-weight:500;
	  	text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:3%; left:0px;		
	  	width:100%;
	  	height:37em;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.2em;;
	  	color:#ffffff;
	}
	.img {
	  	position:absolute;
	  	width:100%;
	  	top:1.7em; left:0px;
	  	border:0.15em solid #b0b0b0;

	}
	.tit {
	  	width:100%;
	  	margin-top:78.8%;
	  	border:0.15em solid #b0b0b0;
	  	color:#ffffff;
	  	text-align:justify;
	  	font-size:0.8em;
	  	padding:0.5em 0.5em;
	  	line-height:1.5em;
	}

	.sd_02 table {
	  	position:absolute;
	  	width:100%;
	  	margin-top:2em; left:0px;
	  	border-top:0.1em solid #ffffff;  
}
	.sd_02 td {
	  	text-align:center;
	  	color:#ffffff;
	  	font-size:75%;
	  	padding:0.01em 0;
	  	border-bottom:0.1em  solid #ffffff;
	}
	.ta {
	  	border-left:0.1em  solid #ffffff;
	}
	.s_title_01 {
	  display:none;	
	}
	.s_title_02 {
	  display:none;	
	}
	.s_title_03 {
	  display:none;	
	}

	.icon_0 {
	  display:none;
	}
	.icon_1 {
	  display:none; 
	}
	.icon_2 {
	  display:none; 
	}
	.icon_3 {
	  display:none; 
	}
	.icon_4 {
	  display:none; 
	}
	.icon_5 {
	  display:none; 
	}
	.icon_6 {
	  display:none; 
	}
	.icon_7 {
	  display:none; 
	}
	.icon_8 {
	  display:none; 
	}
	.icon_9 {
	  display:none; 
	}
	.icon_10 {
	  display:none; 
	}
}



/* 360*/

	@media screen  and (max-width: 400px) {

		/* Logo */
			#logo {
				z-index: 200
				width: 100%;
				text-align: center;
				padding:1em;
				background: #333333;
			}

		/* Wrappers */

			.container {
				background: #333333;
				position:relative;
				width:100%; height:50em;
			}

	#nav {
		display:none;
	}
	.sd_01 {
		display:none;
	}
	.sd_02 {
	  	position:relative;
	  	width:90%;
	  	height:100%;
	  	top:2em; left:1em;
	}
	#t_info {
		display:none;
	}
	.text {
	  	position:absolute;
	  	top:0px; left:0px;
	  	color:#ffffff;
	  	font-size:1.5em;
	  	font-weight:500;
	  	text-shadow:0.2em 0.2em 0.2em #000000;
	}

	.m_01 {
		position:absolute;
		top:3%; left:0px;		
	  	width:100%;
	  	height:37em;
	}
	.ti {
		position:absolute;
	  	width:100%;top:0;
	  	font-size:1.2em;;
	  	color:#ffffff;
	}
	.img {
	  	position:absolute;
	  	width:100%;
	  	top:1.7em; left:0px;
	  	border:0.15em solid #b0b0b0;

	}
	.tit {
	  	width:100%;
	  	margin-top:85%;
	  	border:0.15em solid #b0b0b0;
	  	color:#ffffff;
	  	text-align:justify;
	  	font-size:0.8em;
	  	padding:0.5em 0.5em;
	  	line-height:1.5em;
	}

	.sd_02 table {
	  	position:absolute;
	  	width:100%;
	  	margin-top:2em; left:0px;
	  	border-top:0.1em solid #ffffff;  
}
	.sd_02 td {
	  	text-align:center;
	  	color:#ffffff;
	  	font-size:75%;
	  	padding:0.01em 0;
	  	border-bottom:0.1em  solid #ffffff;
	}
	.ta {
	  	border-left:0.1em  solid #ffffff;
	}
	.s_title_01 {
	  display:none;	
	}
	.s_title_02 {
	  display:none;	
	}
	.s_title_03 {
	  display:none;	
	}


	.icon_0 {
	  display:none;
	}
	.icon_1 {
	  display:none; 
	}
	.icon_2 {
	  display:none; 
	}
	.icon_3 {
	  display:none; 
	}
	.icon_4 {
	  display:none; 
	}
	.icon_5 {
	  display:none; 
	}
	.icon_6 {
	  display:none; 
	}
	.icon_7 {
	  display:none; 
	}
	.icon_8 {
	  display:none; 
	}
	.icon_9 {
	  display:none; 
	}
	.icon_10 {
	  display:none; 
	}
}