@charset "UTF-8";
/* CSS Document */

body {background:#000; min-width:1000px; max-width:1920px;}
#wrapper {position: relative; overflow:hidden; min-width:1000px; max-width:1920px;}

.inner {width:1000px; margin:0 auto; position:relative;}

/* ANIMATION */
#animation {}
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* TOP */
#sec01 {background:url(../images/bg01.jpg) top center no-repeat; height:734px;}
#sec01 .share {position:absolute; top:14px; left:0;}
#sec01 .share li {float:left;}
#sec01 .share li.fb {margin-right:10px;}
#sec01 h1 {width:362px; margin:0 auto; padding-top:56px;}
#sec01 h2 {width:550px; margin:0 auto; padding-top:37px;}
#sec01 .btn {width:320px; margin:0 auto; padding-top:37px;}

/* PROLOGUE */
#sec02 {background:url(../images/bg02.jpg) top center no-repeat; height:740px;}
#sec02 h3 {padding:199px 0 0 13px;}
#sec02 .txt {position:absolute; top:602px; left:521px;}

/* STORY */
#sec03 {background:url(../images/bg03.jpg) top center no-repeat; height:1221px;}
#sec03 h3 {padding:245px 0 0 490px;}
#sec03 .txt01 {padding:25px 0 0 490px;}
#sec03 .txt02 {position:absolute; top:121px; left:57px;}
#sec03 .txt03 {position:absolute; top:372px; left:-69px;}
#sec03 .img {position:absolute; top:613px; left:487px;}
#sec03 .txt04 {padding:270px 0 0 18px;}

/* MOVIE */
#sec04 {background-color:#9a9a9a; height:308px;}
#sec04 .movie01 dt {position:absolute; top:-99px; left:559px;}
#sec04 .movie01 dd {position:absolute; top:-147px; left:-25px;}
#sec04 .movie02 dt {position:absolute; top:214px; left:236px;}
#sec04 .movie02 dd {position:absolute; top:44px; left:565px;}

/* WORLD */
#sec05 {background:url(../images/bg04.jpg) top center no-repeat; height:1101px;}
#sec05 h3 {padding:197px 0 0 300px;}
#sec05 .txt {position:absolute; top:160px; left:11px;}
#sec05 .img01 {position:absolute; top:315px; left:315px; z-index:9;}
#sec05 .img02 {position:absolute; top:712px; left:638px; z-index:10;}
#sec05 .img03 {position:absolute; top:770px; left:-120px; z-index:11;}

/* CHARACTERS */
#sec06 .bg01 {background:url(../images/bg05.jpg) top center no-repeat; height:747px;}
#sec06 .bg01 h3 {padding:123px 0 0 24px;}
#sec06 .bg01 .txt {padding:21px 0 0 24px;}

#sec06 .bg02 {background-color:#002c57; height:210px;}
#sec06 .bg02 .chara01 dt {position:absolute; top:-307px; left:175px; z-index:10;}
#sec06 .bg02 .chara01 .img {position:absolute; top:-611px; left:481px; z-index:9;}
#sec06 .bg02 .chara01 .movie {position:absolute; top:-207px; left:174px; z-index:10;}
#sec06 .bg02 .chara01 .catch {position:absolute; top:-587px; left:890px; z-index:10;}

#sec06 .bg03 {background:url(../images/bg06.png) top center no-repeat; height:725px;}
#sec06 .bg03 .chara02 dt {position:absolute; top:31px; left:560px; z-index:10;}
#sec06 .bg03 .chara02 .img {position:absolute; top:-157px; left:139px; z-index:9;}
#sec06 .bg03 .chara02 .movie {position:absolute; top:130px; left:560px; z-index:10;}
#sec06 .bg03 .chara02 .catch {position:absolute; top:-115px; left:69px; z-index:10;}

#sec06 .bg04 {background-color:#002c57; height:212px;}
#sec06 .bg04 .chara03 dt {position:absolute; top:-200px; left:60px; z-index:10;}
#sec06 .bg04 .chara03 .img {position:absolute; top:-313px; left:415px; z-index:9;}
#sec06 .bg04 .chara03 .movie {position:absolute; top:-100px; left:60px; z-index:10;}
#sec06 .bg04 .chara03 .catch {position:absolute; top:-305px; left:862px; z-index:10;}

#sec06 .bg05 {background:url(../images/bg07.png) top center no-repeat; height:525px;}
#sec06 .bg05 .chara04 dt {position:absolute; top:115px; left:587px; z-index:10;}
#sec06 .bg05 .chara04 .img {position:absolute; top:-3px; left:169px; z-index:9;}
#sec06 .bg05 .chara04 .movie {position:absolute; top:212px; left:587px; z-index:10;}
#sec06 .bg05 .chara04 .catch {position:absolute; top:13px; left:60px; z-index:10;}

/* BATTLE */
#sec07 {background:url(../images/bg08.png) top center no-repeat; height:777px; position:relative; z-index:1;}
#sec07 h3 {padding:121px 0 0 26px;}
#sec07 .txt {padding:43px 0 0 31px;}

/* PRIVATE ACTION */
#sec08 {background:url(../images/bg09.jpg) top center no-repeat; height:603px;}
#sec08 h3 {padding:235px 0 0 21px;}
#sec08 .txt {padding:36px 0 0 21px;}

/* ITEM CREATION */
#sec09 {background:url(../images/bg10.jpg) top center no-repeat; height:625px;}
#sec09 h3 {padding:184px 0 0 24px; position:relative; z-index:10;}
#sec09 .txt {padding:36px 0 0 24px; position:relative; z-index:10;}
#sec09 .img {position:absolute; top:17px; left:397px; z-index:9;}

/* RESERVE */
#sec10 {background:url(../images/bg11.png) top center no-repeat; height:553px;}
#sec10 h3 {margin-bottom:149px;}
#sec10 .txt {width:560px; padding:25px; margin-bottom:75px; border: 8px solid rgba(255, 255, 255, 0.12); background-color: rgba(15, 41, 206, 0.6); position:relative; z-index:9;}
#sec10 .movie {position:absolute; top:129px; left:538px; z-index:10;}

/* FIN */
#sec11 {background:url(../images/bg12.jpg) top center no-repeat; height:838px;}
#sec11 .btn {padding:297px 0 0 82px; margin-bottom:33px;} 
#sec11 .txt {width:819px; margin:0 auto 33px;}
#sec11 ul.banner {width:720px; margin:0 auto;}
#sec11 ul.banner .left {float:left;}
#sec11 ul.banner .right {float:right;}