@charset "utf-8";
/* =======================================
URL		  : http://www.c21-online.com/
Copyright : CyberStep
Ver       : 1.00
name      : landing.css
File      : landing

-----------------------------------------
NOTE
-----------------------------------------


-----------------------------------------
INDEX
-----------------------------------------
00. layout
01. container
	01-01. flash_box
	01-02. landing_text
	01-03. shot_box
	01-04. facebook
02. footer
	02-01. footer_box
03. official_btn
05. info_mac

-----------------------------------------
FONT SIZE (13px = 100%)
-----------------------------------------

フォントサイズの一覧
------------------
09px = 69%
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 124%
17px = 131%
18px = 139%
19px = 147%
20px = 154%
21px = 162%
22px = 170%
23px = 177%
24px = 185%
25px = 193%
26px = 200%
---------------  
(計算式) 表示サイズ/13px * 100 (小数点以下切り上げ) 
========================================== */

/* ==========================================
	00. layout
========================================== */
html, body {
	background: #000000;
	font-size:92%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
	background: url(/landing/images/bg_landing.jpg) no-repeat 50% 0 #000000;
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0 auto;
}
	
/* ==========================================
	01. container
========================================== */
#container {
	width: 980px;
	margin: 0 auto 0;
	padding-top: 10px;
}

/* h1
========================================== */
#container h1 {
	width: 640px;
	height: 201px;
}

#container h1 a {
	display: block;
	margin: 0 auto;
	width: 263px;
	height: 201px;
	background: url(/landing/images/logo_c21_on.png) no-repeat;
}

#container h1 img {
	display: block;
	margin: 0 auto;
}

/* contents
========================================== */
#contents {
	position: relative;
	width: 980px;
	height: 387px;
	margin-top: 30px;
}

/* movie */
#movie {
	position: absolute;
	top: 0;
	left: 0;
	width: 640px;
	height: 387px;
	padding: 10px 0 0 20px;
	background: url(/landing/images/frame_movie.png) no-repeat;
}
#movie .over_frame {
	display: none;
}
#movie #youtube_player {
	position: absolute;
	left: 20px;	
}

#register {
	position: absolute;
	right: 164px;
	bottom: 40px;
	width: 170px;
	height: 173px;
	background: url(/landing/images/btn_register_on.png) no-repeat;
}

#download {
	position: absolute;
	right: 0;
	bottom: 40px;
	width: 164px;
	height: 123px;
	background: url(/landing/images/btn_download_on.png) no-repeat;
}

#official {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 334px;
	height: 36px;
	background: url(/landing/images/btn_official_on.png) no-repeat;
}

/* footer
========================================== */
#footer {
	padding: 10px 10px 0px 10px;
}

#footer #cyberstep {
	float: left;
	background: url(/landing/images/logo_cs.png) center center no-repeat;
}

#footer #copyright {
	float: right;
	color: #ffffff;
	font-size: 77% /* 10px */
}