@charset "utf-8";

/*
******************************************************************
* gundam fun top.css
******************************************************************
*/
html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
html {
	background-color: #000000;
}
body {
	min-width: 1000px;
	color: #ffffff;
	line-height: 1.6;
	word-wrap: break-word;
	background-image: url(../img/bg_02.gif);
	background-position: center top;
}
a:link, a:visited {
	color: #ffffff;
	text-decoration: none;
}
a:hover, a:active {
	color: #ffffff;
}
img {
	/*max-width: 100%;*/
}
#wrp-all {
	position: relative;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
	display: none;
}
a.anime {
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}


/*
******************************************************************
* #header
******************************************************************/
#header {
	position: fixed;
	z-index: 100;
	top: -80px;
	left: 0;
	width: 100%;
	height: 80px;
	background-color: rgba(0,0,0,0.45);
}
#header .mod-box-inr {
	width: 960px;
	padding: 0 20px;
}
#header ul li {
	float: left;
}
#header ul li a {
	position: relative;
	display: block;
}
#header ul li a:before {
	content: url(../img/nav_act.png);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#header ul li a:after {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#header ul li a:hover:before,
#header ul li a:hover:after,
#header ul li a.active:before,
#header ul li a.active:after {
	opacity: 1;
}
#header ul li.lit-01 a:after {
	content: url(../img/nav_01_o.png);
}
#header ul li.lit-02 a:after {
	content: url(../img/nav_02_o.png);
}
#header ul li.lit-03 a:after {
	content: url(../img/nav_03_o.png);
}
#header ul li.lit-04 a:after {
	content: url(../img/nav_04_o.png);
}
#header ul li.lit-05 a:after {
	content: url(../img/nav_05_o.png);
}
#header ul li.lit-06 a:after {
	content: url(../img/nav_06_o.png);
}


/*
******************************************************************
* #pre loader
******************************************************************/
#pre-loader {
	position: fixed;
	z-index: 1010;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg_01.gif);
	background-position: center top;
}
#pre-loader .box {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -400px;
}
#pre-loader .box ul li {
	float: left;
	margin: 0 1px;
	width: 158px;
	height: 280px;
}
#pre-loader .box ul li video {
	width: 158px;
	height: 280px;
}
#pre-loader .box .txt {
	text-align: center;
	margin-bottom: 5px;
}
#pre-loader .box .bar {
	border: 1px solid #434242;
	width: 100%;
	height: 3px;
}
#pre-loader .box .bar span {
	display: block;
	width: 0;
	height: 100%;
	background-image: url(../img/loader_bar.png);
}


/*
******************************************************************
* #contents
******************************************************************/
.section {
	width: 1000px;
	margin: 0 auto;
}
.mod-box-inr {
	position: relative;
	z-index: 2;
	width: 940px;
	margin: 0 auto;
}
.mod-box-pic {
	position: absolute;
	z-index: 1;
	top: 0;
	left: -300px;
	width: 1600px;
}
.mod-box-pic:after {
	content: url(../img/bg_05.png);
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 180px;
}
.mod-box-pic span {
	position: absolute;
	top: 0;
	left: 0;
}
.mod-box-pic.f:after {
	content: none;
}
.mod-panel {
	position: absolute;
	z-index: 4;
}
.mod-panel .f {
	position: relative;
	z-index: 1;
}
.mod-panel .b {
	position: absolute;
}
.mod-ttl {
	position: relative;
	width: 1600px;
	height: 154px;
	margin-left: -300px;
	margin-bottom: 35px;
}
.mod-ttl .box {
	position: relative;
	width: 100%;
	height: 0;
	background-image: url(../img/bg_03.png);
	overflow: hidden;
}
.mod-ttl .ttl {
	text-align: center;
}
.mod-ttl .lin-01 {
	position: absolute;
	top: 8px;
	left: 0;
	width: 1047px;
	height: 1px;
	background-image: url(../img/lin_01.png);
}
.mod-ttl .lin-02 {
	position: absolute;
	bottom: 8px;
	right: 0;
	width: 1100px;
	height: 1px;
	background-image: url(../img/lin_02.png);
}


/*
******************************************************************
* #visual
******************************************************************/
#visual {
	position: relative;
}
#visual .mod-box-pic {
	background-image: url(../img/vis_bg01.jpg);
	height: 2045px;
}
#visual .mod-box-inr {
	width: 960px;
	padding-top: 163px;
	padding-bottom: 630px;
}
#visual .logo {
	margin-left: -25px;
	margin-bottom: 15px;
}
#visual ul {
	width: 270px;
	text-align: center;
	margin-bottom: 20px;
	border-top: 1px solid rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
#visual ul li {
	display: inline-block;
	vertical-align: top;
	margin: 10px 10px 6px;
}
#visual .btn {
	margin-left: -5px;
	margin-bottom: 40px;
}
#visual .btn a:hover {
	opacity: 0.8;
}
#visual .txt {
	line-height: 0;
	width: 270px;
	text-align: center;
}
#visual .panel-01 {
	top: 740px;
	left: 900px;
}
#visual .panel-01 .b {
	top: 0;
	left: -60px;
}
#visual .panel-02 {
	top: 1010px;
	left: 20px;
}
#visual .panel-02 .b {
	top: 93px;
	left: 45px;
}


/*
******************************************************************
* #about
******************************************************************/
#about {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	margin-top: -80px;
}
#about .mod-box-pic {
	top: 1911px;
	background-image: url(../img/abt_bg01.png);
	height: 1360px;
}
#about .mod-box-pic span {
	background-image: url(../img/abt_bg02.png);
	left: 267px;
	width: 1333px;
	height: 1360px;
}
#about .ttl-bg {
	position: absolute;
	opacity: 0;
	top: 234px;
	left: -300px;
	width: 1600px;
	height: 300px;
	background-image: url(../img/bg_04.png);
	background-repeat: no-repeat;
}
#about .mod-box-inr {
	padding-bottom: 1040px;
}
#about .pic-01 {
	margin-bottom: 40px;
}
#about .panel-01 {
	top: 2641px;
	left: 0;
}
#about .panel-01 .b {
	top: 0;
	left: -42px;
}
#about .panel-02 {
	top: 2574px;
	left: 30px;
}
#about .panel-02 .b {
	top: 68px;
	left: 100px;
}


/*
******************************************************************
* #gameflow
******************************************************************/
#gameflow {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	margin-top: -80px;
}
#gameflow .mod-box-pic {
	top: 2017px;
	background-image: url(../img/gam_bg01.png);
	height: 1360px;
}
#gameflow .mod-box-pic.f {
	background-image: url(../img/gam_bg02.png);
	top: 2017px;
	left: 86px;
	width: 1214px;
	height: 1186px;
	z-index: 3;
}
#gameflow .mod-box-inr {
	width: 800px;
	padding-bottom: 800px;
}
#gameflow .btn {
	position: absolute;
}
#gameflow .btn:hover {
	opacity: 0.8;
}
#gameflow .pic-01,
#gameflow .pic-02,
#gameflow .pic-03,
#gameflow .pic-04 {
	float: left;
	position: relative;
}
#gameflow .pic-01 .btn {
	top: 250px;
	left: 590px;
}
#gameflow .pic-02 .btn,
#gameflow .pic-03 .btn {
	top: 375px;
	right: 25px;
}
#gameflow .pic-04 .btn {
	top: 900px;
	left: 335px;
}
#gameflow .pic-04 .btn.hover {
	opacity: 0.8;
}
#gameflow .btn-front {
	position: absolute;
	z-index: 5;
	top: 2139px;
	left: 435px;
	width: 310px;
	height: 50px;
	cursor: pointer;
}
#gameflow .panel-01 {
	top: 2487px;
	left: 900px;
}
#gameflow .panel-01 .b {
	top: 0;
	left: -60px;
}
#gameflow .panel-02 {
	top: 2797px;
	left: 0;
}
#gameflow .panel-02 .b {
	top: 77px;
	left: 40px;
}


/*
******************************************************************
* #movie
******************************************************************/
#movie {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	margin-top: -80px;
}
#movie .mod-box-pic {
	top: 2127px;
	background-image: url(../img/mov_bg01.png);
	height: 1294px;
}
#movie .mod-box-pic.f {
	background-image: url(../img/mov_bg02.png);
	top: 2220px;
	left: -300px;
	width: 1122px;
	height: 1086px;
	z-index: 3;
}
#movie .mod-box-inr {
	padding-bottom: 860px;
}
#movie .pic-01,
#movie .pic-02,
#movie .pic-03 {
	margin-bottom: 40px;
}
#movie .panel-01 {
	top: 2745px;
	left: 900px;
}
#movie .panel-01 .b {
	top: 0;
	left: 99px;
}
#movie .panel-02 {
	top: 2960px;
	left: 715px;
}
#movie .panel-02 .b {
	top: 61px;
	left: -30px;
}


/*
******************************************************************
* #spec
******************************************************************/
#spec {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	margin-top: -80px;
}
#spec .mod-box-pic {
	top: 2838px;
	background-image: url(../img/spc_bg01.png);
	height: 1365px;
}
#spec .mod-box-pic.f {
	background-image: url(../img/spc_bg02.png);
	top: 3082px;
	left: -300px;
	width: 1255px;
	height: 1122px;
	z-index: 3;
}
#spec .mod-box-inr {
	padding-bottom: 1140px;
}
#spec .pic-01,
#spec .pic-02 {
	margin-bottom: 40px;
}
#spec .pic-03 {
	margin-left: 87px;
}
#spec .panel-01 {
	top: 3346px;
	left: 0;
}
#spec .panel-01 .b {
	top: 0;
	left: 110px;
}
#spec .panel-02 {
	top: 3656px;
	left: 690px;
}
#spec .panel-02 .b {
	top: 72px;
	left: 67px;
}


/*
******************************************************************
* #footer
******************************************************************/
#footer {
	position: relative;
}
#footer .box-anime {
	position: absolute;
	top: 0;
	left: -300px;
	width: 1600px;
	height: 1151px;
	background-image: url(../img/footer_bg01.jpg);
	background-repeat: no-repeat;
}
#footer .box-anime .txt {
	position: absolute;
	top: 560px;
	left: 330px;
	opacity: 0;
}
#footer .box-anime .shine {
	position: absolute;
	top: 400px;
	left: 750px;
	opacity: 0;
}
#footer .box-anime .earth {
	position: absolute;
	top: 350px;
	left: 860px;
}
#footer .box-anime .plane {
	position: absolute;
	top: 180px;
	left: 940px;
	width: 300px;
	opacity: 0;
}
#footer .box-anime .plane img {
	width: 100%;
}
#footer .mod-box-inr {
	width: 960px;
	padding-top: 1035px;
	padding-bottom: 30px;
}
#footer .pagetop {
	text-align: center;
	margin-bottom: 70px;
}
#footer .pagetop a {
	position: relative;
	display: inline-block;
}
#footer .pagetop a:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 70px;
	height: 81px;
	background-image: url(../img/footer_btn_arw.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#footer .pagetop a:hover:after {
	background-position: 0 -10px;
}
#footer .copy-01 {
	float: left;
}
#footer .copy-02 {
	float: left;
	margin-left: 274px;
}
#footer ul {
	float: right;
}
#footer ul li {
	float: left;
	margin-left: 15px;
}


/*
******************************************************************
* #modal game
******************************************************************/
.mfp-game.mfp-bg {
	background: url(../img/modal_bg.png);
	opacity: 1;
}
.mfp-game.mfp-bg.mfp-fade {
	-webkit-transition: all 0.25s ease-out;
	    -ms-transition: all 0.25s ease-out;
	        transition: all 0.25s ease-out;
}
.mfp-game.mfp-bg.mfp-fade.mfp-removing {
	opacity: 0;
}
.mfp-game.mfp-wrap.mfp-fade.mfp-removing .mfp-content {
	opacity: 0;
}
.mfp-game .mod-box-inr {
	width: 960px;
	padding-top: 100px;
	padding-bottom: 50px;
}
.mfp-game .mfp-close {
	width: 63px;
	height: 63px;
	top: 20px;
	opacity: 1;
	text-indent: -9999px;
	background-image: url(../img/v_close.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
.mfp-game .mfp-close:hover {
	opacity: 0.8;
}


/*
******************************************************************
* #modal video
******************************************************************/
#mdl-box {
	position: fixed;
	z-index: 1100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mdl-box .mdl-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/modal_bg.png);
}
#mdl-box #mdl-plr {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -270px;
	margin-left: -480px;
}
#mdl-box .btn {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -345px;
	margin-left: 417px;
}
#mdl-box .btn a {
	display: block;
	width: 63px;
	height: 63px;
	text-indent: -9999px;
	background-image: url(../img/v_close.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .btn a:hover {
	opacity: 0.8;
}


/*
******************************************************************
* .video.js
******************************************************************/
#pre-loader .vjs-loader-skin {
	width: auto !important;
	height: auto !important;
}
#pre-loader .vjs-loader-skin .vjs-control-bar {
	display: none;
}
#pre-loader .vjs-loader-skin .vjs-loading-spinner {
	display: none !important;
}
#mdl-box .vjs-default-skin .vjs-slider-handle {
	background: #0a104a;
}
#mdl-box .vjs-default-skin .vjs-play-control {
	background: url(../img/v_ply.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin .vjs-play-control:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin .vjs-big-play-button {
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin .vjs-big-play-button:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin.vjs-playing .vjs-play-control {
	background: url(../img/v_rsm.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin.vjs-playing .vjs-play-control:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin .vjs-play-progress {
	background: #0a104a;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-0 {
	background: url(../img/v_vol1.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-0:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-1 {
	background: url(../img/v_vol2.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-1:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-2 {
	background: url(../img/v_vol3.png);
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#mdl-box .vjs-default-skin .vjs-mute-control.vjs-vol-2:hover {
	opacity: 0.8;
}
#mdl-box .vjs-default-skin .vjs-volume-level {
	background: #0a104a;
}