@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Amiri");

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

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

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

img {
  vertical-align: bottom;
}

li {
  list-style: none;
}

html {

}

body {
  background-color: #f0fcff;
  font-family: "Times New Roman", Times, serif;
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
 
}

.bg{
  width:100%;
  height:1600px;
/* top:-195px;*/
  top:-18.055555555%;
/*  top:-10.15625%;*/
  margin:0 auto;
 background-image: url("../img/back_event.png") ;
  position: fixed;
  background-position:50% 18.055555555%;
  background-repeat: repeat;
  background-size: auto;
}

@media (max-width: 1919px) {
  .bg{
    width:100%;
    margin:0 auto;
  background-image: url("../img/back_event.png") ;
    background-size: 100%;
    background-repeat: repeat;
  }
}

.wrapper {
  width:100%;
  max-width:1920px;
/*border:1px solid #F00;*/
  opacity: 0;
  margin:0 auto;
  position: relative;
  -webkit-animation: loading 1.2s ease-in forwards;
  -moz-animation: loading 1.2s ease-in forwards;
  -o-animation: loading 1.2s ease-in forwards;
  animation: loading 1.2s ease-in forwards;
}

.wrapper:before {
  content:"";
  display: block;
  padding-top: 56.25%; /*1080/1920;*/
}

.wrapper .main_contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes loading {
  100% {
    opacity: 1;
  }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■■■■■■■■■■■

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.header_nav {
  position: fixed;
  top:0;
  left:0;
  background: url("../img/bg.png") repeat-x center top;
  background-position: 0 0;
  height: 63px;
  width: 100%;
  z-index: 50;
}

.header_nav .main_menu a, .header_nav h1 a {
  display: block;
  width: 100%;
  height: 100%;
  float:left;
}

.header_nav h1, .header_nav ul, .header_nav li {
  display: inline-block;
}

.wrap_nav {
  width:100%;
  max-width:1920px;
  opacity: 0;
  margin:0 auto;
  position: relative;
  -webkit-animation: loading 1.2s ease-in forwards;
  -moz-animation: loading 1.2s ease-in forwards;
  -o-animation: loading 1.2s ease-in forwards;
  animation: loading 1.2s ease-in forwards;
}

.header_nav .wrap_nav .main_menu {
  position: relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
}

.header_nav .wrap_nav ul {
  width:100%;
}

.header_nav .wrap_nav li {
  height: 58px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}

.header_nav .wrap_nav .eventlogo {
  background: url("../img/eventlog_fgo.png") no-repeat;
  background-size: 100%;
  width: 130px;/* 1600px*/
/*margin-left: 129px;*/
  margin-left:8.1%;
}

.header_nav .wrap_nav .top_m {
  background: url("../img/m_top.png") no-repeat;
  background-size: 100%;
  width: 100px;
/*  margin-left: 62px;*/
  margin-left: 14.475%;
}
.header_nav .wrap_nav .top_m:hover {
  background: url("../img/m_top_h.png") no-repeat;
  background-size: 100%;
}

.header_nav .wrap_nav .campaign_m {
  background: url("../img/m_wallpaper.png") no-repeat;
  background-size: 100%;
  width: 159px;
/*  margin-left: 113px;*/
  margin-left: 7.7325%;
}
.header_nav .wrap_nav .campaign_m:hover {
  background: url("../img/m_wallpaper_h.png") no-repeat;
  background-size: 100%;
}


.header_nav .wrap_nav .appstore_m {
  background: url("../img/m_appstore.png") no-repeat;
  background-size: 100%;
  width: 120px;
/*  margin-left: 77px;*/
  margin-left: 16.8125%;
}
.header_nav .wrap_nav .appstore_m:hover {
  opacity: 0.6;
}

.header_nav .wrap_nav .googleplay_m {
  background: url("../img/m_googleplay.png")no-repeat;
  background-size: 100%;
  width: 135px;
/*  margin-left: 46px;*/
  margin-left: 2.855%;
}
.header_nav .wrap_nav .googleplay_m:hover {
  opacity: 0.6;
}



@media (max-width: 1450px) {
/*  80%*/

  .header_nav {
    height: 58px;
  }

  .header_nav .wrap_nav li {
    height: 46.4px;
    margin-top:5px;
  }

  .header_nav .wrap_nav .eventlogo {
    width: 104px;/* 80%*/
  }

  .header_nav .wrap_nav .top_m {
    width: 80px;
  }

  .header_nav .wrap_nav .campaign_m {
    width: 127.2px;
  }


   .header_nav .wrap_nav .appstore_m {
    width: 96px;
  }

  .header_nav .wrap_nav .googleplay_m {
    width: 108px;
  }
}

@media (max-width: 1200px) {

.header_nav .wrap_nav .top_m {
  margin-left: 2.9225%;
}

.header_nav .wrap_nav .campaign_m {
  margin-left: 3.3875%;
}


.header_nav .wrap_nav .appstore_m {
  margin-left: 3.0675%;
}

.header_nav .wrap_nav .googleplay_m {
  margin-left: 1.855%;
}

}

@media (max-width:700px) {
  .header_nav .wrap_nav .appstore_m {
    display: none;
  }
  .header_nav .wrap_nav .googleplay_m {
    display: none;
  }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■■■■■■■■■■■　　　　　■■■■■■■■■■■　　　　　　■■■■■■■■■■■

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top {
  z-index:3;
  margin-top:0px;

}

#top:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}

.top_img {
  position: absolute;
/*  top:-19px;*/
  top:58px;
  left:0;
  width: 100%;
  margin:0 0 0 0;
  padding:0 0 0 0;
  background-color:rgba(255,255,255,0.0);
}

.top_img img{
  width: 100%;
  max-width: 1920px;
  margin:0 auto;
  background-size:100%;
}



.event_info {
  position: absolute;
  top:70.0%;
  left:8.15%;
  width:28.125%;
  height:17.037037037%;
/*  top:596px;
  left:312px;
  width:600px;
  height:204px;*/
  background: url("../img/top_eventinfo.png") no-repeat;
  background-size: 100%;


}

.event_info:hover {
  position: absolute;
  top:70.0%;
  left:8.15%;
  width:28.125%;
  height:17.037037037%;
  background: url("../img/top_eventinfo_h.png") no-repeat;
  background-size: 100%;

}

#downloads {
  z-index:3;
  margin-top:0%;
}

#downloads:before {
  content:"";
  display: block;
  padding-top: 66.25%;
}


.download_img {
  position: relative;
/*  top:-19px;*/

  width: 24%;
  margin:8% 38% 2% 38%;
  padding:0 0 0 0;
  background-color:rgba(255,255,255,0.0);
}




.download_img img{
  width: 100%;
  max-width: 1920px;
  margin:0 auto;
  background-size:100%;
}

.event_back {
  position: relative;
  
  left:50%;
  width:10.052083333%;
  height:17.037037037%;
  transform: translate(-50%, 0);
/*  top:596px;
  left:312px;
  width:600px;
  height:204px;*/
  background: url("../img/back_btn.png") no-repeat;
  background-size: 100%;


}

.event_back a{
  display: block;
  width:100%;
  height:100%;

}

.event_back:hover {
  position: relative;
  
  left:50%;
  width:10.052083333%;
  height:17.037037037%;
  transform: translate(-50%, 0);
/*  top:596px;
  left:312px;
  width:600px;
  height:204px;*/
  background: url("../img/back_btn_h.png") no-repeat;
  background-size: 100%;

}


@media (max-width: 1080px) {

#downloads:before {
  content:"";
  display: block;
  padding-top: 96.25%;
}


.download_img {
  position: relative;
/*  top:-19px;*/

  width: 40%;
  margin:15% 30% 2% 30%;
  padding:0 0 0 0;
  background-color:rgba(255,255,255,0.0);
}
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■■■■■■■■■■■　　　　　■■■■■■■■■■■　　　　　　■■■■■■■■■■■　　■■■■■■■■■■■

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#campaign {
  margin-top:0;
/* margin-top:-8.706329113%;*/
  z-index: 2;

}

@media (min-width: 1920px) {
  #campaign {
    margin-top:0px;
 /* margin-top:246px;*/
  }
}

@media (max-width: 1000px) {
  #campaign {
    margin-top:5%;
 /* margin-top:246px;*/
  }
}
@media (max-width: 600px) {
  #campaign {
    margin-top:8%;
 /* margin-top:246px;*/
  }
}


#campaign:before {
  content:"";
  display: block;
  padding-top: 303.241666666%;/*1324 */
}


.campaign_title{
  position: relative;
  /*  top:-169px;*/
  width:100%;
  max-width: 1920px;
  margin-top:2.2%;
  margin-bottom:2.8%;
  background-image:url("../img/title.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.campaign_title:before {
  content:"";
  display: block;
  padding-top: 18.541666666%;
}

.campaign_txt{
  position: relative;
  width:100%;
  max-width: 1920px;
  margin-bottom: 3.7%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.campaign_txt img{
  position: relative;
  width:100%;
}

.campaign_txt:before {
  content:"";
  display: block;
  padding-top: 30.572916666%;/*1324 */
}

.wall1{
  background-image:url("../img/wall1.png");
}




.wall2{
  background-image:url("../img/wall2.png");
}

.wall3{
  background-image:url("../img/wall3.png");
}

.wall4{
  background-image:url("../img/wall4.png");
}

.wall5{
  background-image:url("../img/wall5.png");
}

.wall6{
  background-image:url("../img/wall6.png");
}

.wall7{
  background-image:url("../img/wall7.png");
}
.wall8{
  background-image:url("../img/wall8.png");
  padding-top: 36.458333333%;
  margin-bottom: 0%;
}

.download_rbtn {
  position: absolute;
  width:16.927083333%;
  height:18.833333333%;
  top:52.8%;
  left:63.4%;
  background-image:url("../img/download_btn.png");
  background-size:100%;
}

.download_rbtn:hover {
  background-image:url("../img/download_btn_h.png");
}

.download_rbtn a {
  display: block;
  width:100%;
  height:100%;
}

.download_r2btn {
  position: absolute;
  width:16.927083333%;
    height:18.833333333%;
  top:55.4%;
  left:63.4%;
    background-image:url("../img/download_btn.png");
  background-size:100%;
}

.download_r2btn:hover {
  background-image:url("../img/download_btn_h.png");
}

.download_r2btn a {
  display: block;
  width:100%;
  height:100%;
}


.download_lbtn {
  position: absolute;
  width:16.927083333%;
    height:18.833333333%;
  top:55.8%;
  left:19.9%;
      background-image:url("../img/download_btn.png");
  background-size:100%;
}

.download_lbtn:hover {
  background-image:url("../img/download_btn_h.png");
}

.download_lbtn a {
  display: block;
  width:100%;
  height:100%;
}

.download_l2btn {
  position: absolute;
  width:16.927083333%;
    height:9.833333333%;
  top:25.8%;
  left:19.9%;
      background-image:url("../img/download_btn.png");
  background-size:100%;
  background-repeat: no-repeat;
}

.download_l2btn:hover {
  background-image:url("../img/download_btn_h.png");
}

.download_l2btn a {
  display: block;
  width:100%;
  height:100%;
}

  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■■■■■■■■■■■　　　　　■■■■■■■■■■■

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

nav,footer{
  width:100%;

  height:100%;
}

footer {
  width:100%;
  position: relative;
/*  margin-top:-90px;*/
   margin-top:0%;
   z-index: 2;

}

@media (min-width: 1386px) {
    footer {
      width:100%;
      margin-top:-42px;
      margin-top:140px;
    }
}


footer .game_info {
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
  padding-top: 65px;
  position: relative;
}
footer .game_info:after {
  content: '';
  display: block;
  width: 100%;
  z-index:1000000;
  height: 2px;
  background: url("../img/line.png") repeat-x center;
  position: absolute;
  top: 1px;
}
footer .game_info .info dl {
  font-size: 14px;
  display: table;
  margin-bottom: 10px;
}
footer .game_info .info dl dt {
  background: url("../img/item_mark_white.png") no-repeat left top;
  -webkit-background-size: 11px;
  -o-background-size: 11px;
  background-size: 11px;
  padding-left: 20px;
  display: table-cell;
  width: 92px;
  line-height: 1.65;
  color: #d9d6bd;
}
footer .game_info .info dl dd {
  display: table-cell;
  line-height: 1.65;
}
footer .game_info .info dl dd .note {
  font-size: 12px;
  margin: 0.5em 0;
}
footer .game_info .app .logo {
  margin-bottom: 25px;
}
footer .game_info .app .btn_app {
  letter-spacing: -0.4em;
}
footer .game_info .app .btn_app li {
  display: inline-block;
}
footer .game_info {
  background: url("../img/footer/bg.jpg") no-repeat center;
  padding-bottom: 70px;
}
footer .game_info .wrap {
  width: 1280px;
  margin: auto;
}
footer .game_info .info {
  float: left;
  width: 660px;
}
footer .game_info .app {
  float: right;
  padding-left: 51px;
  background: url("../img/footer/line.png") no-repeat left center;
  width: 360px;
}
footer .game_info .app .logo img {
  width: 100%;
}
footer .game_info .app .btn_app li {
  width: 170px;
}
footer .game_info .app .btn_app li img {
  width: 100%;
}
footer .game_info .app .btn_app li a {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}
footer .game_info .app .btn_app li a:hover {
  opacity: 0.6;
}
footer .game_info .app .btn_app .ios {
  margin-right: 12px;
}

footer .footer {
  background: #000;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 47px 0 65px;
  position: relative;
}
footer .footer ul {
  letter-spacing: -.4em;
}
footer .footer li {
  display: inline-block;
}
footer .footer .share {
  margin-bottom: 38px;
}
footer .footer .share li {
  margin: 0 4px;
}
footer .footer .share li a {
  display: block;
  width: 100%;
  height: 100%;
}
footer .footer .bnr {
  letter-spacing: -.4em;
  margin-bottom: 35px;
}

footer .footer .bnr li {
  width: 300px;
  margin: 10px;
}

footer .footer .notes {
  margin-bottom: 16px;
}
footer .footer p {
  font-size: 11px;
  color: #fff;
}

footer .footer:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: url("../img/line.png") repeat-x center;
  position: absolute;
  top: -1px;
  z-index: 0;
}
footer .footer .pagetop {
  position: absolute;
  top: -50px;
  right: 40px;
  z-index: 3;
  background: url("../img/btn_pagetop.png");
  width: 100px;
  height: 52px;
  cursor: pointer;
}
footer .footer .share li {
  width: 67px;
  height: 68px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}
footer .footer .share li:hover {
  opacity: 0.6;
}
footer .footer .share .tw {
  background: url("../img/share_twitter.png");
}
footer .footer .share .fb {
  background: url("../img/share_facebook.png");
}
footer .footer .bnr img {
  width: 100%;
}
footer .footer .bnr li {
  width: 300px;
  margin: 0 20px;
}
footer .footer .bnr a {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
}
footer .footer .bnr a:hover {
  opacity: 0.6;
}
footer .footer .other {
  margin-bottom: 25px;
}
footer .footer .other li {
  letter-spacing: 0;
  background: url("../img/item_mark_gold.png") no-repeat right center;
  -webkit-background-size: 11px;
  -o-background-size: 11px;
  background-size: 11px;
  padding: 5px 28px 5px 14px;
}
footer .footer .other li a {
  color: #FFF;
  text-decoration: none;
  font-size: 12px;
  padding: 4px 0;
  position: relative;
}
footer .footer .other li a:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background: #FFF;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
footer .footer .other li a:hover:after {
  width: 100%;
}
footer .footer .other li:last-child {
  background: none;
  padding: 5px 14px 5px 14px;
}