/********************************************
	header
********************************************/
#headerBgOuter {
	background: url(../images/visual.jpg) no-repeat center 50px;
}
/********************************************
	#mainVisual
********************************************/
#mainVisualArea {
	background: #000;
	width: 100%;
	min-width: 1002px;
	height: 615px;
	margin-top: -350px;
	overflow: hidden;
	position: relative;
}
#introSWF {
	height: 615px;
	margin: 0 auto;
	width: 100%;
	min-width: 1002px;
	position: absolute;
	top: 0;
}
#mainVisualBg {
	background: #16161b;
	width: 100%;
	height: 615px;
	display: none;
	position: absolute;
	top: 0;
}
#mainVisual {
	background: url(../images/visual.jpg) no-repeat center top;
	min-width: 1002px;
	height: 615px;
	margin: 0 auto;
	display: none;
	position: relative;
}
/********************************************
	#mainArea
********************************************/
#mainArea {
	width: 992px;
	min-width: 980px;
	height: 1210px;
	position: relative;
	margin: 0 auto;
}
#mainArea .topCopy {
	position: absolute;
	text-align: center;
	left: 0;
	width: 100%;
	top: -100px;
	opacity:0;
	-moz-transition: all 0.45s ease-out;
	-o-transition: all 0.45s ease-out;
	-ms-transition: all 0.45s ease-out;
	transition: all 0.45s ease-out;
}
#mainArea .topCopy.show {
	opacity:1;
}
/********************************************
	#topArea
********************************************/
#topArea {
	width: 100%;
	height: 258px;
	margin-top: -25px;
	overflow: hidden;
	min-width: 1002px;
	position: relative;
}
#topAreaBg {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -690px;
	height: 258px;
	width: 1380px;
}
#topAreaBg .topAreaBgCenter {
	background: url(../images/topArea_bg.png) no-repeat right center;
	height: 258px;
	width: 1380px;
	margin: 0 auto;
}
#topAreaBg .topAreaBgLeft {
	background: url(../images/topArea_bg_re.png) repeat-x left center;
	position: absolute;
	top: 0;
	left: -500%;
	width: 500%;
	height: 258px;
}
#topAreaBg .topAreaBgRight {
	background: url(../images/topArea_bg_re.png) repeat-x left center;
	position: absolute;
	top: 0;
	right: -500%;
	width: 500%;
	height: 258px;
}
/********** #topBannerArea **********/

#topBannerAreaOver {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}
#topBannerArea {
	background: url(../images/banner_bg.png) no-repeat top left;
	width: 100%;
	min-width: 992px;
	height: 230px;
	margin-top: -420px;
	opacity: 0;
	/*-webkit-transition: all 0.45s ease-out;*/
	-moz-transition: all 0.45s ease-out;
	-o-transition: all 0.45s ease-out;
	-ms-transition: all 0.45s ease-out;
	transition: all 0.45s ease-out;
	/*-webkit-transform-style: preserve-3d;*/
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*-webkit-transform: rotate3d(1, 0, 0, 10deg);*/
	-moz-transform: rotate3d(1, 0, 0, 10deg);
	-o-transform: rotate3d(1, 0, 0, 10deg);
	-ms-transform: rotate3d(1, 0, 0, 10deg);
	transform: rotate3d(1, 0, 0, 10deg);
	/*-webkit-transform-origin: 50% 100%;*/
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
#topBannerArea.show {
	opacity: 1;
	/*-webkit-transform: rotate3d(0, 0, 0, 0);*/
	-moz-transform: rotate3d(0, 0, 0, 0);
	-o-transform: rotate3d(0, 0, 0, 0);
	-ms-transform: rotate3d(0, 0, 0, 0);
	transform: rotate3d(0, 0, 0, 0);
}
#topStartBtn {
	display: none;
	position: absolute;
	top: 1px;
	left: 8px;
}
#topStartBtn a {
	background: url(../images/start_btn.png) no-repeat center bottom;
	width: 208px;
	height: 218px;
	display: block;
}
#topStartBtn a span {
	background: url(../images/start_btn_on.png) no-repeat center bottom;
	width: 208px;
	height: 218px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#topStartBtn a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/* * * * * #topStartBtn01 * * * * */
#topStartBtn01 {
	display: none;
	position: absolute;
	height: 102px;
	top: 1px;
	left: 8px;
}
#topStartBtn01 a {
	background: url(../images/start_btn.png) no-repeat center bottom;
	width: 208px;
	height: 218px;
	display: block;
}
#topStartBtn01 a span {
	background: url(../images/start_btn_on.png) no-repeat center bottom;
	width: 208px;
	height: 218px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#topStartBtn01 a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/* * * * * #topStartBtn02 * * * * */
#topStartBtn02 {
	display: none;
	position: absolute;
	height: 102px;
	left: 8px;
	top: 140px;
}
#topStartBtn02 a {
	background: url(../images/start_btn_04.png) no-repeat center bottom;
	width: 208px;
	height: 82px;
	display: block;
}
#topStartBtn02 a span {
	background: url(../images/start_btn_04_on.png) no-repeat center bottom;
	width: 208px;
	height: 82px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#topStartBtn02 a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/* * * * * #topBannerSlide * * * * */
#topBannerSlide {
	position: relative;
	bottom: -19px;
	left: 238px;
	width: 723px;
}
#topBannerSlide ul.main {
	display: none;
	position: relative;
	background: #fff;
	height: 181px;
	width: 519px;
}
#topBannerSlide ul.main li {
	position: absolute;
	bottom: 0;
	display: none;
}
#topBannerSlide ul.main li:first-child {
	display: block;
}
#topBannerSlide ul.main li img {
	vertical-align: bottom;
}
#topBannerSlide ul.thum {
	position: absolute;
	right: 0;
	top: 0;
}
#topBannerSlide ul.thum li {
	display: none;
	margin-bottom: 5px;
	padding: 2px;
	height: 53px;
}
#topBannerSlide ul.thum li.current {
	border: 1px solid #00a0ff;
	padding: 1px;/*box-shadow: 0px 0px 5px 3px rgba(0,160,255,0.9);*/
}
#topBannerSlide ul.thum:hover li {
}
#topBannerSlide ul.thum:hover li:not(.none) {
	opacity: 0.6;
}
#topBannerSlide ul.thum li {
	opacity: 0.6;
}
#topBannerSlide ul.thum li.current,
#topBannerSlide ul.thum li:hover,
#topBannerSlide ul.thum:hover li.none {
	opacity: 1 !important;
}
/********** #impNewsArea **********/
#impNewsArea {
	background: url(../images/imp_list_bg.png) no-repeat top center;
	width: 736px;
	height: 205px;
	position: absolute;
	left: -5px;
	top: 250px;
}
#impNewsArea .impNewsAreaTitle {
}
/**********#impNewsArea .moreBtn **********/
#impNewsArea .moreBtn {
	position: absolute;
	top: 35px;
	right: 27px;
}
#impNewsArea .moreBtn a {
	background: url(../images/more_btn.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
}
#impNewsArea .moreBtn a span {
	background: url(../images/more_btn_on.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#impNewsArea .moreBtn a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/********** #impNewsArea **********/
#impNewsArea .impNewsList {
	color: #fff;
	position: absolute;
	top: 91px;
}
#impNewsArea .impNewsList a {
	color: #fff;
}
#impNewsArea .impNewsList li {
	height: 26px;
	width: 736px;
	line-height: 26px;
	margin-bottom: 4px;
	position: relative;
}
#impNewsArea .impNewsList li .category {
	position: absolute;
	left: 43px;
	width: 62px;
	height: 22px;
	top: 1px;
}
#impNewsArea .impNewsList li .category.imp {
	background: url(../images/common/category_icon_imp.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.event {
	background: url(../images/common/category_icon_event.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.update {
	background: url(../images/common/category_icon_update.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.mainte {
	background: url(../images/common/category_icon_mainte.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.topic {
	background: url(../images/common/category_icon_topic.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.bug {
	background: url(../images/common/category_icon_bug.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.trouble {
	background: url(../images/common/category_icon_trouble.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.etc {
	background: url(../images/common/category_icon_etc.png) no-repeat center center;
}
#impNewsArea .impNewsList li .category.recover {
	background: url(../images/common/category_icon_recover.png) no-repeat center center;
}
#impNewsArea .impNewsList li .text {
	position: absolute;
	left: 125px;
	width: 450px;
}
#impNewsArea .impNewsList li .text a {
	background: url(../images/common/list_icon.png) no-repeat left center;
	padding-left: 10px;
	display: block;
	height: 26px;
}
#impNewsArea .impNewsList li .text a:hover {
	color: #999;
}
#impNewsArea .impNewsList li .date {
	position: absolute;
	left: 580px;
	width: 120px;
	text-align: center;
}
/********** #impNewsArea **********/
#newsArea {
	background: url(../images/all_list_bg.png) no-repeat top center;
	width: 736px;
	height: 490px;
	position: absolute;
	left: -5px;
	top: 452px;
}
#newsArea .newsAreaTitle {
}
/**********#newsArea .moreBtn **********/
#newsArea .moreBtn {
	position: absolute;
	top: 20px;
	right: 27px;
}
#newsArea .moreBtn a {
	background: url(../images/more_btn.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
}
#newsArea .moreBtn a span {
	background: url(../images/more_btn_on.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#newsArea .moreBtn a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/********** #newsTab **********/
#newsTab {
	position: relative;
	left: 20px;
}
#newsTab li {
	position: absolute;
	height: 40px;
	top: 19px;
	cursor: pointer;
}
#newsTab li.all {
	background: url(../images/tab_all.png) no-repeat top center;
	width: 104px;
	left: 18px;
}
#newsTab li.all.on,
#newsTab li.all:hover {
	background: url(../images/tab_all_on.png) no-repeat top center;
}
#newsTab li.event {
	background: url(../images/tab_event.png) no-repeat top center;
	width: 123px;
	left: 123px;
}
#newsTab li.event.on,
#newsTab li.event:hover {
	background: url(../images/tab_event_on.png) no-repeat top center;
}
#newsTab li.update {
	background: url(../images/tab_update.png) no-repeat top center;
	width: 133px;
	left: 246px;
}
#newsTab li.update.on,
#newsTab li.update:hover {
	background: url(../images/tab_update_on.png) no-repeat top center;
}
#newsTab li.mainte {
	background: url(../images/tab_mainte.png) no-repeat top center;
	width: 184px;
	left: 380px;
}
#newsTab li.mainte.on,
#newsTab li.mainte:hover {
	background: url(../images/tab_mainte_on.png) no-repeat top center;
}
/********** #newsListArea **********/
#newsListArea {
	color: #fff;
	position: absolute;
	top: 71px;
}
#newsListArea>ul {
	display: none;
}
#newsListArea>ul.show {
	display: block;
}
#newsListArea a {
	color: #50505a;
}
#newsListArea li {
	height: 26px;
	line-height: 26px;
	margin-bottom: 4px;
	position: relative;
}
#newsListArea li .category {
	position: absolute;
	left: 43px;
	width: 62px;
	height: 22px;
	top: 1px;
}
#newsListArea li .category.imp {
	background: url(../images/common/category_icon_imp.png) no-repeat center center;
}
#newsListArea li .category.event {
	background: url(../images/common/category_icon_event.png) no-repeat center center;
}
#newsListArea li .category.update {
	background: url(../images/common/category_icon_update.png) no-repeat center center;
}
#newsListArea li .category.mainte {
	background: url(../images/common/category_icon_mainte.png) no-repeat center center;
}
#newsListArea li .category.topic {
	background: url(../images/common/category_icon_topic.png) no-repeat center center;
}
#newsListArea li .category.bug {
	background: url(../images/common/category_icon_bug.png) no-repeat center center;
}
#newsListArea li .category.trouble {
	background: url(../images/common/category_icon_trouble.png) no-repeat center center;
}
#newsListArea li .category.etc {
	background: url(../images/common/category_icon_etc.png) no-repeat center center;
}
#newsListArea li .category.recover {
	background: url(../images/common/category_icon_recover.png) no-repeat center center;
}
#newsListArea li .text {
	position: absolute;
	left: 125px;
	width: 450px;
}
#newsListArea li .text a {
	background: url(../images/common/list_icon.png) no-repeat left center;
	padding-left: 10px;
	display: block;
	height: 26px;
}
#newsListArea li .text a:hover {
	color: #999;
}
#newsListArea li .date {
	position: absolute;
	left: 580px;
	width: 120px;
	text-align: center;
}
/********** #sideArea **********/
#sideArea {
	background: url(../images/side_banner_bg.png) no-repeat center top;
	width: 262px;
	height: 675px;
	position: absolute;
	top: 270px;
	right: -5px;
}
#sideArea .largeBanner {
	margin: 20px 0 0 25px;
}
#sideArea .smallBanner {
}
#sideArea .smallBanner li {
	margin: 15px 0 0 25px;
}
#sideArea .movieThum {
	position: relative;
}
#sideArea .videoOverBtn {
	margin: -50px 0 0 -55px;
}
#sideArea .smallBanner01 {
	margin: 15px 0 0 25px;
}
#sideArea .twitter {
	width: 212px;
	height:260px;
	margin: 15px auto 0;
	position: relative;
}
#sideArea .twitter .objT {
	background: url(../images/side_tw_top.png) no-repeat left top;
	width: 212px;
	height: 15px;
	position: absolute;
	top: 0;
	right: 0;
}
#sideArea .twitter .objR {
	background: url(../images/side_tw_right.png) no-repeat right top;
	width: 5px;
	height: 230px;
	position: absolute;
	top: 15px;
	right: 0;
}
#sideArea .twitter .objB {
	background: url(../images/side_tw_bottom.png) no-repeat left bottom;
	width: 212px;
	height: 15px;
	position: absolute;
	bottom: 0;
	right: 0;
}
#sideArea .twitter .objL {
	background: url(../images/side_tw_left.png) no-repeat left top;
	width: 5px;
	height: 230px;
	position: absolute;
	top: 15px;
	left: 0;
}
#sideArea .smallBanner02 {
	margin: 15px 0 0 25px;
}
/********** #sideArea **********/
#aboutArea {
	position: absolute;
	top: 950px;
	left: -5px;
}
#aboutArea h1 {
	background: url(../images/about_game_title.png) no-repeat center top;
	height: 45px;
}
#aboutArea .blockList {
	margin-top: 5px;
	margin-right: -10px;
	background: url(../images/line.png) no-repeat center bottom;
	overflow: hidden;
	padding-bottom: 5px;
}
#aboutArea .blockList>li {
	float: left;
	line-height: 30px;
	position: relative;
}
#aboutArea .blockList>li h2 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#aboutArea .blockList>li>ul>li {
	width: 270px;
}
#aboutArea .blockList>li.first {
	background: url(../images/about_list_01_bg.png) no-repeat center top;
	width: 336px;
	height: 190px;
}
#aboutArea .blockList>li.first>ul {
	position: absolute;
	top: 50px;
	left: 36px;
}
#aboutArea .blockList>li.second {
	background: url(../images/about_list_02_bg.png) no-repeat center top;
	width: 329px;
	height: 190px;
}
#aboutArea .blockList>li.second>ul {
	position: absolute;
	top: 50px;
	left: 31px;
}
#aboutArea .blockList>li.third {
	background: url(../images/about_list_03_bg.png) no-repeat center top;
	width: 337px;
	height: 190px;
}
#aboutArea .blockList>li.third>ul {
	position: absolute;
	top: 50px;
	left: 31px;
}
#aboutArea .blockList>li a {
	background: url(../images/common/list_icon.png) no-repeat left center;
	padding-left: 10px;
}
/********************************************
	#bannerArea
********************************************/
#bannerArea {
	margin: 0 auto;
}

















/********** #troubleArea **********/
#troubleArea {
	background: url(../images/trouble_list_bg.png) no-repeat top center;
	width: 734px;
	height: 185px;
	position: absolute;
	left: -5px;
	top: 761px;
}
#troubleArea .troubleAreaTitle {
}
/**********#troubleArea .moreBtn **********/
#troubleArea .moreBtn {
	position: absolute;
	top: 14px;
	right: 27px;
}
#troubleArea .moreBtn a {
	background: url(../images/more_btn.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
}
#troubleArea .moreBtn a span {
	background: url(../images/more_btn_on.png) no-repeat center bottom;
	width: 114px;
	height: 37px;
	display: block;
	position: absolute;
	left: 0;
	opacity: 0;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#troubleArea .moreBtn a:hover span {
	opacity: 1;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
/********** #troubleArea **********/
#troubleArea .troubleList {
	color: #fff;
	position: absolute;
	top: 67px;
    left: -1px;
}
#troubleArea .troubleList li {
	height: 26px;
	width: 736px;
	line-height: 26px;
	margin-bottom: 4px;
	position: relative;
}
#troubleArea .troubleList li .state {
	position: absolute;
	left: 43px;
	width: 62px;
	height: 22px;
	top: 1px;
	background-repeat: no-repeat;
	background-position: center center;
}
#troubleArea .troubleList li .state.state_1 {
	background-image: url(../images/common/trouble_icon_state1.png);
}
#troubleArea .troubleList li .state.state_2 {
	background-image: url(../images/common/trouble_icon_state2.png);
}
#troubleArea .troubleList li .state.state_3 {
	background-image: url(../images/common/trouble_icon_state3.png);
}
#troubleArea .troubleList li .state.state_4 {
	background-image: url(../images/common/trouble_icon_state4.png);
}
#troubleArea .troubleList li .text {
	position: absolute;
	left: 125px;
	width: 450px;
}
#troubleArea .troubleList li .text a {
	background: url(../images/common/list_icon.png) no-repeat left center;
	padding-left: 10px;
	display: block;
	height: 26px;
	overflow: hidden;
}
#troubleArea .troubleList li .text a:hover {
	color: #999;
}
#troubleArea .troubleList li .date {
	position: absolute;
	left: 580px;
	width: 120px;
	text-align: center;
}