@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto|Lato|Audiowide);
@font-face {
    font-family: 'Lastwaerk black';
    src: url('../fonts/lastwaerk-black.eot');
    src: url('../fonts/lastwaerk-black.woff');
}
@font-face {
    font-family: 'Lastwaerk Regular';
    src: url('../fonts/lastwaerk regular.eot');
    src: url('../fonts/lastwaerk regular.woff');
}
@font-face {
    font-family: 'Bloodwax';
    src: url('../fonts/bloodwax-italic.eot');
    src: url('../fonts/bloodwax-italic.woff');
}
*{
   box-sizing: border-box;
   -webkit-box-sizing:border-box;
}
html,body
{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  overflow-x:hidden;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

body{  
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  color:#ddd;
  background:#151515;
  font-size:16px;
}

a{
  color:#444;
  outline:none;
  text-decoration: none;
}

ul, li{
  list-style: none;
}

nav{
  position:fixed;
  top:0;left:0;
  width:180px;
  height:100%;
  background: #2c2c2c; /* Old browsers */
  background: -moz-linear-gradient(top,  #2c2c2c 0%, #353535 50%, #131313 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #2c2c2c 0%,#353535 50%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #2c2c2c 0%,#353535 50%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
  box-shadow:-1px 0px 2px rgba(0,0,0,0.4);
  z-index:999;
}

.clearfix{
 display: block;
}

.pos_mid{
  width:990px;
  margin:0 auto;
  padding:0px 10px 0px 190px;
  align-content: center;
}

.container{
 
  width: 100%;
  height:100%;
  padding: 0;
  margin:0;
  background:#dddddd;
  overflow-x:hidden;
}


.contents{
  position: relative;
  width:100%;
  background: #fff;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.container .content .x{ margin-left:55px !important}
.container .content .x label{color:#eee}

#nav{
  list-style: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  height: 100%;
  min-height: 700px;
  width: 100%;
  padding: 0;
  z-index:555;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
 }

/*
.nav-border{
  position: absolute;
  display:inline-block;
  background: url('../images/nav-border.png') repeat;
  top:0;
  height:100%;
  left:180px;
  width:15px;
  z-index: 5554;
}*/

#nav .logo{
  display:block;
  margin:30px auto 20px;
  width:100%;
  height:60px;
 /* background: url('../images/airRivalslogo.gif') no-repeat;*/
  background: url('../images/aceonlineeulogo.gif') no-repeat;
  background-size: contain;
  content: ('Aceonline Europe');
}


#nav ul{
/*  margin-top:50px;*/
}

#nav a.menu{
  cursor:pointer;
  display: block;
  height:80px;
  text-align: left;
  font-family: 'lastwaerk black', sans-serif;
  font-size:1em;
  color:#eee;
  padding-left:20px;
  outline:none;
  line-height: 80px;
  border-top:1px solid #414141;
  border-bottom:1px solid #111;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s;
  transition: .5s;
  text-shadow: 0 -1px 1px black,
                0 1px 1px white;
}

#nav li::after{
  position: absolute;
  left:0;
  top:0;
  color: white;
  text-shadow: -1px -1px -1px rgba(0,0,0,1);
  -webkit-mask-image: 
  -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.4));
}

#nav span{
  position: absolute;
  display: block;
  width: 100%;
  left:1em;
  bottom:2em;
  color:#bbb;
  font-family: 'Lato',helvetica,sans-serif;
  font-size:0.8em;
}

#nav .selected{
  color:#8aabd0;
  content: '';
  background:#141414;
}

.selected:after{
  position: absolute;
  left:250px;
  top:20px;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #131313;
}

#nav a.menu:after {
  position: absolute;
  -webkit-transition: .5s;
  transition: .5s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #131313;
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(15deg);
          transform: skewX(15deg);
  z-index: -1;
}


#nav a.menu:hover{
  color:#8aabd0;
  -webkit-animation: neon 1s ease-in-out infinite alternate;
  -moz-animation: neon 1s ease-in-out infinite alternate;
  animation: neon 1s ease-in-out infinite alternate;
}


@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px #fff, 0 0 9px #228DFF, 0 0 12px #228DFF, 0 0 35px #228DFF, 0 0 50px #228DFF, 0 0 100px #228DFF;
  }
  to {
    text-shadow: 0 0 0px #000;
  }
}

#nav a:hover:after {
  left: -10%;
  width: 125%;
}

#nav li:active{
  background:rgba(255,255,255,0.5);
}
/*
select {
  -moz-appearance: window;
  -webkit-appearance: none;
  background: none;
  border: 0;
  display: inline-block;
  outline: none;
  position: relative;
  vertical-align: middle;
  z-index: 6000;
  cursor: pointer
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


select:before{
 content: 'Select Country';
 display:inline-block;
 float:left;
 position: relative;
 left:-100px;
 color:#eee;
 font-family:'Lastwaerk black';
 font-size:.9em;
}
	
.select-button {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top:0;
}

.select-button:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 6002;
}
*/
.nav-bottom{position:absolute; bottom:0; text-align:center;  padding-bottom:10px; margin-bottom:0px; z-index:556; background:#1b1b1b; vertical-align:top}
.nav-bottom img{height:30px; margin:15px auto 0;}
.nav-bottom #nav-bottom_copy{font-size:0.7em; color:#666;}
/*
.nav-bottom .language select{color: #eee;  background:#222; box-shadow:-5px -5px 5px rgba(100,100,100,.1); width:180px;  height:2.5em;   z-index: 6002;  padding-left:1em; transition:0.2s; -webkit-appearance: none; appearance: none; outline:none; }
.nav-bottom .language select:hover{  background:#122a4f; } */
/*.nav-bottom .language {
  width:180px;
  height:2.5em;
  display: inline-block;
  z-index:9000;
  outline: none;
  background: transparent;
  font-family:  'Lastwaerk black';
  font-size: 1.2em;
}
*/


/* ¾ð¾î ¼±Åà */
.language .select-button:after {
	position: absolute;
	top: 50%;
	right: 0;
    content:"\106f";
    font-size:1.2em;
   font-family:'fontAwesome';
	-webkit-transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
	transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
   color:#eee;  right: 15px;  top:10px;
   font-size:1.2em
}

.language-select {
	position:relative;
	width: 180px;
	height: 40px;
	cursor: pointer;
	background-color: #222;
	color:#eee;
	box-shadow: 0 2px 0 #222;
	border-radius: 2px;
	text-align:left;
	margin:0
}
.language-select .flag-icon{margin-right:5px; display:inline-block;}
.select_expand {
	width: 0;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
}

.select_options{padding:0; height:40px; margin-top:-320px } 
.select_option:hover{background-color: #88c1ff; color:#222; cursor:pointer}
.select_expand::after {
  content:"\003E";
  font-size:1.2em;
   font-family:'fontAwesome';	-webkit-transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
   transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
	position: absolute;
	top: 50%;
	right: 0;
	color: #eee;
	font-size: 20px;
	pointer-events: none;
	-webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
	transition: all 250ms cubic-bezier(.4,.25,.3,1);
	opacity: .6;
}

.select_expand:hover::after{
	opacity: 1
}
.select_expand:checked::after {
	-webkit-transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
	        transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
}

.select_expandLabel {
	display: block;
	width: 100%;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

.select_close {
	display: none
}

.select_closeLabel {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	color:#eee;
}

.select_items {
	width: 100%;
	height:40px;
	position: absolute;
	top: 0;
	left: 0;
	border: 0px solid #222;
	border-radius: 2px;
	padding-top: 40px;
}

.select_input {
	display: none
}

.select_label {
	-webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
	transition: all 250ms cubic-bezier(.4,.25,.3,1);
	display: block;
	height: 0;
	font-size: 14px;
	line-height: 40px;
	overflow: hidden;
	color: #eee;
	background-color: #222;
	cursor: pointer;
	padding-left: 10px;
}

.select_label-placeholder {
	height: 40px;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	opacity: .6;
	background-color: transparent;
}


.select_expand:checked + .select_closeLabel {
	display: block;
}

.select_expand:checked + .select_closeLabel + .select_options .select_label {
	height: 40px;
	
}
.select_expand:checked + .select_closeLabel + .select_options .select_label:hover{
	background-color: #122a4f
}
.select_expand:checked + .select_closeLabel + .select_options + .select_expandLabel {
	display: none;
}

.select_input:checked + .select_label {
	height: 40px;
    margin-top:280px
}

.flag-icon{width:180px !important; height:20px !important; background-position: 50% left !important; padding-left:30px}


/* ÆäÀÌÁö ¿ä¼Ò */
#p1{
  background:#d6d6d6;  background-size:cover;}

#p1 .mid{
  display: block;
  width:100%;
  height:inherit;
  min-width:500px;
  -webkit-min-width:500px;
  overflow:hidden;
  padding:0;
  margin-left:calc(180px+20%);
  margin-left:-webkit-calc(180px+20%);
}

#p1 .mid .navigator{
  z-index: 100;
  padding:0;
}

#p1 .mid > img{
  position: absolute;
  bottom:100px;
  margin-left:80px;
  z-index:997;
}

div .p1-float{
  position: absolute;
  right:-50px;
  bottom:60px;
  width:650px;
  height:300px;
  background:url('../images/p1_dl_bg.png') left top no-repeat;
  padding:30px;
  z-index:999;
}

.features{
  position: absolute;
  display: block;
  bottom:100px;
  width:100%;
  height:200px;
  background:rgba(14,27,47,1);
  z-index: 33;
}

.grid-group{
  position: absolute;
  top:0;
  left:180px;
  padding:0;
  margin:0;
  width:410px;
/*  height:100%;*/
  overflow-x:hidden;
  overflow-y:hidden;
  z-index: 998;
}

.grid-group2{
	width:350px;
	box-shadow: 2px 0px 5px rgba(0,0,0,0.3);
    background:rgba(255,255,255,0.7);
}

.grid-item, .grid-login{
  display:relative;
  width:100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  box-sizing:border-box;
  -webkit-box-sizing:-webkit-border-box;
  z-index:998;
  background: transparent;
}

.grid-login /*login */{
 width:390px;
  height:250px;
  overflow:hidden;
  background: url('../images/login-bg.png') right no-repeat;
}

.grid-item:first-child{ /* download */
  background:#141414;
  width:350px;
  height:10%;
  min-height:120px;
  padding:0;
  background:url('../images/nav_bg.png') no-repeat;
  background-size: cover;
  width:100%;
  border-bottom: 1px solid #141414;
}

.grid-item:nth-of-type(2){ /* NEWS & RANKING */
 /* background:rgba(233,233,233,0.7);*/
  width:350px;
  border: 0px;
  padding:0;
  margin:0;
}


.grid-item .plus{display:block; width: 100%; height: 30px; background: rgba(255,255,255,.7);  vertical-align:middle;}
.grid-item .plus:hover{background: rgba(255,255,255,0);}
.grid-item .plus a{
 color:#15385f;
 display: block;
 text-align: center;
 cursor:pointer;
 line-height:30px;
 font-size:0.9em;
 font-family: 'Lastwaerk Black',sans-serif;
 margin:0px auto;
 vertical-align:middle;
 background:transparent;
}
#sub .grid-item h3{
  display: inline-block;
  width:100%;
  height:50px;
  line-height: 50px;
  position: relative;
  font-family:'Audiowide',sans-serif;
  font-weight: 700;
  font-size: 1em;
  color:#8dadd1;
  padding:0px 15px 0px 15px;
  text-shadow: 1px 1px 0px rgba(0,0,0,1);
  margin:0;
  cursor:pointer;
  background:rgba(1,1,1,0.8);
  border-top: 1px solid #3c3e40;
  border-bottom: 1px solid #000;
}

.grid-item h3:hover{
  /*color:rgb(21,56,95);
  background: rgba(255,255,255,0.9);*/
  background: #000 url('../images/nav_bg-ani.gif') no-repeat;
  background-size: cover;
  color:#eee;
  transition: 0.5s;
}

.grid-login > h3{
   background: none;
   padding-top:0px;
   color:#eee;
   text-shadow: 1px 1px 0px rgba(0,0,0,1);
 }

.arrow_plus, .arrow_minus{
  position: absolute;
  float: right;
  top:0px;
  right: 20px;
  font-family:'fontAwesome';
  font-size:1em; z-index:10;

}
.arrow_plus:before{content:"\f067";}
.arrow_minus:before{content:"\f068";}
}
.grid-item h3:hover > span{
  color:#eee;
}

.grid-item ul, .grid-item > li{
  margin:0;
  padding:0;
  list-style: none;

}

/* DOWNLOAD */
.download{
  text-align: center;
  font-size: 2em;
  display: inline-block;
  height: inherit;
  line-height:120px;
  padding: 2em auto;
  width:350px;
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  color: #ffffff;
  font-family: 'Bloodwax', italic; 
  text-shadow: 3px 5px 5px rgba(0,0,0,1);
}

#fr a{
 font-family:'Audiowide' !important;
 text-transform: uppercase;
 }

.grid-item:first-of-child:hover{
  background:url('../images/nav_bg-ani.gif') no-repeat;
  background-size: cover;
  width:100%;
}

.download:hover {
  color:#ffffff;
  -webkit-animation: dl-ani 0.5s ease-in-out infinite alternate;
  -moz-animation: dl-ani 0.5s ease-in-out infinite alternate;
  animation: dl-ani 0.5s ease-in-out infinite alternate;
}


@-webkit-keyframes dl-ani {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #5190ff, 0 0 50px #5190ff, 0 0 60px #5190ff, 0 0 70px #5190ff, 0 0 100px #5190ff;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #5190ff, 0 0 25px #5190ff, 0 0 20px #5190ff, 0 0 30px #5190ff, 0 0 50px #5190ff;
  }
}

#p1-menu{
  margin:0; padding:0;
}
#p1-menu li {
  list-style-type: none;
}
/*links*/
#p1-menu li > div{
  display: none;
}
#p1-menu li.active div{
  display: block;
}

/* NEWS */
.news-wrap{
  display: block;
  padding: 10px 15px;
  width: 100%;
  height: inherit;
  vertical-align: middle;
  background:transparent;
  border-bottom:1px dotted #141414;
  background: rgba(255,255,255,0.6);
  overflow-y:auto;
}

.news-wrap:hover{
  background: rgba(255,255,255,0);
  cursor: pointer;
}

.news-wrap .title{
 position: relative;
 display: inline-block; 
 color: #15385f;
 font-family: 'Roboto', sans-serif;
 font-weight: 700;
 font-size:1em;
 width:100%;
 overflow:hidden; 
 white-space:nowrap;
 -webkit-text-overflow:ellipsis;
 text-overflow:ellipsis;
 margin-bottom:5px;
}

.news-wrap .summary{
 display:box;
 display:-webkit-box;
 color: #141414;
 font-family: 'Roboto',helvetica,sans-serif;
 font-weight: 400; 
 font-size:0.9em;
 line-height:1.5em;
 height:3em;
 overflow: hidden;
 text-overflow:ellipsis;
 -webkit-text-overflow:ellipsis;
 line-clamp:3;
 -webkit-line-clamp:3;
 -webkit-box-orient:vertical;
 margin-bottom:5px
}
 

@media screen and (max-height: 600px){
    .news-wrap .summary{
    height:3em;
    }
}


.news-wrap .date, .news-wrap .hour{
 position: relative;
 font-family: 'Roboto',sans-serif;
 margin:3px 0 2px 0;
 color:#15385f;
 font-size:0.7em;
 font-weight:900;
 width: 100%;
 right:0;
}


/* Ranking */
.ranking_wrap{display:inline-block; background:#000}
.ranking_banner1,.ranking_banner2,.ranking_banner3,.ranking_banner4,.ranking_banner5,.ranking_banner6,.ranking_banner7,.ranking_banner8{
	display:inline-block; 
	width:100%; 
	height:100%;
	opacity:0.7;
	}

.ranking_wrap span{
	position: relative;
    top: -70px;
    display: inline-block;
    width: 175px;
    height: 70px;
    left: 0;
    line-height: 70px;
    font-size:18px;
	color:#fff;
	font-family: 'Roboto',sans-serif;
	text-shadow:0px 0px 5px #000;
	text-align:center;
	}

.ranking_wrap a{float:left; width:50%; height:70px}
.ranking_wrap a:hover > div{opacity:1;}


.ranking_banner1{background:url('../images/ranking_banner1.png') center center;}
.ranking_banner2{background:url('../images/ranking_banner2.png') center center;}
.ranking_banner3{background:url('../images/ranking_banner3.png') center center;}
.ranking_banner4{background:url('../images/ranking_banner4.png') center center;}
.ranking_banner5{background:url('../images/ranking_banner5.png') center center;}
.ranking_banner6{background:url('../images/ranking_banner6.png') center center;}
.ranking_banner7{background:url('../images/ranking_banner7.png') center center;}
.ranking_banner8{background:url('../images/ranking_banner8.png') center center;}



/* TRAILER */

.trailer{
  position: relative;
  content:'';
  width:300px;
  height:200px;
  background: url('../images/trailer-preview.png') center center no-repeat; 
  background-size:cover;
  margin: 30px 40px;
  z-index:9999;
}
.trailer > span{
  position: absolute;
  color:#fff;
  font-size:1.3em;
  font-family:'Audiowide',sans-serif;
  margin:30px 32%;
  text-align: center;
}
.video-play-button {
  position: absolute;
  z-index: 10;
  top:55%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: inline-block;
  width: 32px;
  height: 44px;
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

.video-play-button:hover:before {
  content:'';
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  box-shadow:-2px -2px 5px rgba(255,255,255,0.8),-2px 2px 5px rgba(255,255,255,0.8), 2px -2px 5px rgba(255,255,255,0.8), 2px 2px 5px rgba(255,255,255,0.8);;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: rgba(220,220,220,0.1);
  box-shadow: -2px -2px 3px rgba(255,255,255,0.8), 2px 2px 2px rgba(0,0,0,0.8);
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#8aabd0, 50%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span{
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid rgba(255,255,255,0.7);
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.video-play-button:hover span{
  border-left: 32px solid #fff;
}

@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.video-overlay {
  position: fixed;
  z-index:-1;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  width: 100%;
  height:100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  -webkit-transition: all ease 500ms;
  transition: all ease 500ms;
}

.video-overlay.open {
  position: fixed;
  z-index: 1000;
  opacity: 1;
}

.video-overlay-close {
  position: absolute;
  z-index: 1000;
  top: 15px;
  right: 20px;
  font-size: 4em;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #8aabd0;
}

.video-overlay iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  /* width: 90%; */
  /* height: auto; */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
}

/* LOGIN */
button {
  outline: none;
  border: none;
  color:#141414;
}

.login-wrap {
  position: relative;
  width:355px;
  height: 100%;
  overflow: hidden;
}

.login {
  vertical-align: middle;
  display: block;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  -webkit-transform: scale(1);
          transform: scale(1);
  padding-top: 30px;
}
.login.inactive{
 transform:scale(1.1,1.1);
}
.login_form {
  float:left;
  width: 65%;
  margin:10px 0px 0px 15px;
  padding-top: 10px;
  padding-left: 10px;
}

.login_form input{
 width: 200px; height:45px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  outline: none;
  padding: 10px;
  font-size: 1em;
  color: #fff;
  font-family:'Audiowide'; font-weight:100;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
  -webkit-transition: box-shadow .5s ease;
  -moz-transition: box-shadow .5s ease;
  -o-transition: box-shadow .5s ease;
  -ms-transition: box-shadow .5s ease;
  transition: box-shadow .5s ease;
}
.login_form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #8dadd1;}
.login_form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #8dadd1;   opacity:  1;}
.login_form input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #8dadd1;   opacity:  1;}
.login_form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #8dadd1;}
.login_form input:focus {  transition:0.3s; box-shadow: inset 0 -5px 45px rgba(0,0,0, 0.4), 0 1px 1px rgba(121, 185, 255, 0.8);}
.login_form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #222 inset;
	-webkit-text-fill-color:#eee !important;
	border:#222;
}
.login_input {
  display: inline-block;
  width: 80%;
  padding-left: 1em;
  font-size: 1em;
  background: none;
  border-bottom:1px solid #141414;
  color: #141414;
}
.login .incorrect{color:#ffd200; font-size:13px; letter-spacing:-1px;  margin-left:10px; font-family: 'Roboto',sans-serif; width:250px;}

.login_submit {
  float:right;
  width: 87px;
  height: 100px;
  background:url('../images/login-btn.png') center no-repeat;
  margin: 20px 20px 0px 0px;
  color: #eee;
  font-family: 'Audiowide',sans-serif;
  font-size: 1rem;
  border-radius:0;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
  transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
}

.login_submit:hover{
  color:#8aabd0;
  -webkit-animation: neon 1s ease-in-out infinite alternate;
  -moz-animation: neon 1s ease-in-out infinite alternate;
  animation: neon 1s ease-in-out infinite alternate;
 }
.login_submit:after {
  content: "";
  position: absolute;
  margin-left: -2rem;
  margin-top: -2rem;
  width: 4rem;
  height: 4rem;
  border: 3px dotted #fff;
  border-radius: 50%;
  border-left: none;
  border-bottom: none;
  -webkit-transition: opacity 0.1s 0.4s;
  transition: opacity 0.1s 0.4s;
  opacity: 0;
}
.login_submit.processing {
  border-radius: 3rem;
  width: 5rem;
  height: 5rem;
  font-size: 0;
  margin-top:35px;
}
.login_submit.processing:after {
  opacity: 1;
  -webkit-animation: rotate 0.5s 0.4s infinite linear;
          animation: rotate 0.5s 0.4s infinite linear;
}
.login_submit.success {
  -webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
  transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  -webkit-transform: scale(30);
          transform: scale(30);
  opacity: 0.9;
}
.login_submit.success:after {
  -webkit-transition: opacity 0.1s 0s;
  transition: opacity 0.1s 0s;
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}

.login_submit:hover{
  opacity:0.8;
}

.svg-icon {
  cursor: pointer;
}
.svg-icon path {
  stroke: rgba(255, 255, 255, 0.9);
  fill: none;
  stroke-width: 0.1;
}
.login h3, .login_username, .login_title{font-family:'Audiowide',sans-serif;  font-weight: 700;  font-size: 1.2em;  color:#eee;}
.login .welcome{font-family:'bloodwax',sans-serif;  color:#88c1ff;  font-size: 1.3em; margin-left:30px}
.login .pilot{font-family:'Audiowide',sans-serif;  font-weight: 400;  font-size: 1em;  color:#ddd; margin-left:30px}
.login_title{margin:0 25px;}
.login .cash{width:100%; height:60px; background:rgba(0,0,0,.3); padding-left:30px; margin:20px auto 10px;}
.login .cash img{margin:10px 0;  vertical-align:middle}
.login .cash span{ font-size:16px; font-family:'lastwaerk black'; margin-left:5px; }
.login .cash span:nth-of-type(2){ font-size:14px; font-family:'lastwaerk black'; color: #88c1ff; margin-left:10px; }
.login .cash a span{font-size:13px; color:#88c1ff; padding:10px 10px; background:rgba(0,0,0,.6); border-radius:3px; font-family:'bloodwax'; position:absolute; right:20px; margin-top:12px; }
.login .cash a span:hover{background:rgba(0,0,0,1); color:#fec349; -webkit-animation: neon 1s ease-in-out infinite alternate;} 
.login .copy a {
  display: inline-block;
  padding-left:25px;
  font-size: .9em;
  color: #6495ca;
  font-family:'lastwaerk black';
  text-shadow: 0 0 0px #000;
  text-transform:uppercase;
}
.login .buttons{margin:0 auto; text-align:center}
.login .logout_btn, .login .member_btn{display:inline-block; border-radius:50%; background:rgba(0,0,0,.5); width:50px; height:50px; margin:0 auto; vertical-align:middle; margin-right:5px; }
.login .logout_btn:hover, .login .member_btn:hover{ background:rgba(0,0,0,.7); transition:0.3s; }
.login .logout_btn:before, .login .member_btn:before{position:relative; font-family:fontAwesome; color:#88c1ff; font-size:1.5em; top:14px; }
.login .logout_btn:before{content:"\f011"; }
.login .member_btn:before{content:"\f013"; }
.login .buttons a{color:#88c1ff; font-family:'lastwaerk black'; vertical-align:middle;}
.login a:nth-of-type(2){ padding-left:30px}
.login a:hover, .login a:hover > .logout_btn:before, .login a:hover > .member_btn:before {color:#eee;  -webkit-animation: neon 1s ease-in-out infinite alternate;}
.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: none;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25), -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.app.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app.active .app_logout {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app_logout {
  position: absolute;
  bottom: 3.3rem;
  right: 3.3rem;
  width: 1.8em;
  height: 1.8em;
  margin-right: -2.3rem;
  margin-bottom: -2.3rem;
  background: #eee;
  color: #fff;
  font-size: 2rem;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.app_logout.clicked {
  bottom: 50%;
  right: 50%;
  -webkit-transform: scale(30) !important;
          transform: scale(30) !important;
  opacity: 0.9;
}
.app_logout.clicked svg {
  opacity: 0;
}
.app_logout-icon {
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}
.app_logout-icon path {
  stroke-width: 1px;
  stroke-dasharray: 64.36235046386719;
  stroke-dashoffset: 64.36235046386719;
  -webkit-animation: animatePath 0.5s 0.5s forwards;
          animation: animatePath 0.5s 0.5s forwards;
}

.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: #2a4a6d;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: animRipple 0.4s;
          animation: animRipple 0.4s;
  border-radius: 50%;
}

@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}


/* FULL SCREEN NAVIGATOR */

.navibtn {
  position: absolute;
  top: 2rem;
  left:460px;
  font-size: 0;
  list-style-type: none;
  z-index: 3;
  bottom: 2rem;
  font-size: 0;
}
.navibtn a {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.8rem;
  border-radius: 50%;
  border: 2px solid #2d4d85;
  cursor: pointer;
}
.slider-pagi_elem:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(45,77,133,0.6);
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.slider-pagi_elem.active:before, .slider-pagi_elem:hover:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.navigator, .navigator:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 180px;
    margin:0; 
    padding:0;
    z-index: 0; 
}
.navigator_pattern{ 
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    content: '';
    background: transparent url('../images/pattern.png') top left repeat; 
}
.navigator li{
  width:100%;
}
.navigator li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin:0;
    padding:0;
    color: transparent;
    background-size: cover;
    background-repeat: none;
/*    opacity: 0;
    z-index: 0;

    backface-visibility: hidden;
   -webkit-backface-visibility: hidden;

    -webkit-animation: imageAnimation 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    -o-animation: imageAnimation 24s linear infinite 0s;
    -ms-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s; 
*/
}
.navigator li div{ 
    z-index: 1000;
    position: absolute;
    top: 100px;
    left: 450px;
    text-align: left;
/*    opacity: 0;

    -webkit-animation: titleAnimation 24s linear infinite 0s;
    -moz-animation: titleAnimation 24s linear infinite 0s;
    -o-animation: titleAnimation 24s linear infinite 0s;
    -ms-animation: titleAnimation 24s linear infinite 0s;
    animation: titleAnimation 24s linear infinite 0s; 
*/
}

.navigator li div > a{ 
    z-index: 1000;
    position: absolute;
    top: 300px;
    left: 0px;
    text-align: left;
    display:none;
/*	opacity: 0;
    -webkit-animation: titleAnimation 24s linear infinite 0s;
    -moz-animation: titleAnimation 24s linear infinite 0s;
    -o-animation: titleAnimation 24s linear infinite 0s;
    -ms-animation: titleAnimation 24s linear infinite 0s;
    animation: titleAnimation 24s linear infinite 0s; */

}


.navigator li:nth-child(1) > span { 
    /*backgrund: url('../images/halloween.jpg') left top no-repeat; */
	
	background: url('http://web-files-cdn.masangsoft.com/common/20171219/1513652336/images/587/570/660/73788a1d3dbd8c47f1a2d671a5b14747.jpg') right top no-repeat;
	/*background: url('http://web-files-cdn.masangsoft.com/common/20160715/1468568699/images/341028/112/341/3cd53deafb6eef991700f14c556e8049.jpg') left top no-repeat;*/
    background-size:cover;
}

.navigator li:nth-child(2) > span { 
	/*background: url('http://web-files-cdn.masangsoft.com/common/20171219/1513652336/images/587/570/660/73788a1d3dbd8c47f1a2d671a5b14747.jpg') left top no-repeat;*/
	background: url('http://web-files-tokyo-cdn.masangsoft.com/common/20171025/1508904454/5755cc7efb71a9f020b32e3611d47376.jpg') right top no-repeat;

    background-size:cover;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.navigator li:nth-child(3) > span { 
/*    background: url('http://web-files-cdn.masangsoft.com/common/20170822/1503386622/images/587/160/629/f158cbe19f13ecdb6e8c37e54ecdd64d.jpg') left top no-repeat; */
    background: url('http://web-files-tokyo-cdn.masangsoft.com/common/20171025/1508904454/5755cc7efb71a9f020b32e3611d47376.jpg') right top no-repeat;
	background-size:cover;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.navigator li:nth-child(4) > span { 
/*  background: url('http://web-files-cdn.masangsoft.com/common/20170822/1503386622/images/587/160/629/f158cbe19f13ecdb6e8c37e54ecdd64d.jpg') left top no-repeat;*/
    background: url('http://web-files-tokyo-cdn.masangsoft.com/common/20171025/1508904454/5755cc7efb71a9f020b32e3611d47376.jpg') right top no-repeat;
	background-size:cover;
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
/*
.navigator li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.navigator li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.navigator li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }              0
    17% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1; display:inline-block; }
    17% { opacity: 1; display:inline-block; }
    30% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1; display:inline-block;}
    17% { opacity: 1; display:inline-block; }
    30% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1;display:inline-block; }
    17% { opacity: 1;display:inline-block;}
    30% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1;display:inline-block; }
    17% { opacity: 1;display:inline-block; }
    30% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1;display:inline-block; }
    17% { opacity: 1;display:inline-block; }
    17% { opacity: 1;display:inline-block; }
    17% { opacity: 1 ;display:inline-block;}
    30% { opacity: 0 }
    100% { opacity: 0 }
}

.navigator li img{display:block}

.banner_btn{
	position:absolute;
	display:inline-block;
	background: #255a79;
	padding: 10px 20px; 
	font-size:1em;
	color:#fff;
	font-family:'Audiowide';
	cursor:pointer;
	margin-left:15px;
	opacity:0.8;
	z-index:10;
}

.banner_btn:hover{
	opacity:1;
}

/* Show at least something when animations not supported */
.no-cssanimations .navigator li span{
  opacity: 1;
}

/* Paginaion */
   .swiper-container {
        width:500px; height:100px;
        margin-left: auto;
        margin-right: auto;
		z-index:10;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
         /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

.swiper-pagination-bullet-active{
  background-color:#fff;
}
.swiper-pagination-bullet{

  width:20px;
  height:20px;
  background:#aaa;
}
.swiper-pagination-bullets{
position:absolute;
width:500px; height:100px;
 left:50%;
}


.slider-container {
  position: relative;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: all-scroll;
}

.slider-control {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  will-change: opacity;
  opacity: 0;
}
.slider-control.inactive:hover {
  cursor: auto;
}
.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: pointer;
}
.slider-control.left {
  left: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
  right: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}


.slider-pagi__elem {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}
.slider-pagi__elem:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.slider {
  z-index: 1;
  position: relative;
  height: 100%;
}
.slider.animating {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}
.slider.animating .slide__bg {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slide.active .slide__overlay,
.slide.active .slide__text {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slide__bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
  will-change: transform;
}
.slide:nth-child(1) {
  left: 0;
}
.slide:nth-child(1) .slide__bg {
  left: 0;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-3.jpg");
}
.slide:nth-child(1) .slide__overlay-path {
  fill: #e99c7e;
}
@media (max-width: 991px) {
  .slide:nth-child(1) .slide__text {
    background-color: rgba(233, 156, 126, 0.8);
  }
}
.slide:nth-child(2) {
  left: 100%;
}
.slide:nth-child(2) .slide__bg {
  left: -50%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-2.jpg");
}
.slide:nth-child(2) .slide__overlay-path {
  fill: #e1ccae;
}
@media (max-width: 991px) {
  .slide:nth-child(2) .slide__text {
    background-color: rgba(225, 204, 174, 0.8);
  }
}
.slide:nth-child(3) {
  left: 200%;
}
.slide:nth-child(3) .slide__bg {
  left: -100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-1.jpg");
}
.slide:nth-child(3) .slide__overlay-path {
  fill: #adc5cd;
}
@media (max-width: 991px) {
  .slide:nth-child(3) .slide__text {
    background-color: rgba(173, 197, 205, 0.8);
  }
}
.slide:nth-child(4) {
  left: 300%;
}
.slide:nth-child(4) .slide__bg {
  left: -150%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-4.jpg");
}
.slide:nth-child(4) .slide__overlay-path {
  fill: #cbc6c3;
}
@media (max-width: 991px) {
  .slide:nth-child(4) .slide__text {
    background-color: rgba(203, 198, 195, 0.8);
  }
}
.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-height: 810px;
  -webkit-transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  will-change: transform, opacity;
  -webkit-transform: translate3d(-20%, 0, 0);
          transform: translate3d(-20%, 0, 0);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__overlay {
    display: none;
  }
}
.slide__overlay path {
  opacity: 0.8;
}
.slide__text {
  position: absolute;
  width: 25%;
  bottom: 15%;
  left: 12%;
  color: #fff;
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  will-change: transform, opacity;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__text {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20rem;
    text-align: center;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    padding: 0 1rem;
  }
}
.slide__text-heading {
  font-family: "Polar", Helvetica, Arial, sans-serif;
  font-size: 5rem;
  margin-bottom: 2rem;
}
@media (max-width: 991px) {
  .slide__text-heading {
    line-height: 20rem;
    font-size: 3.5rem;
  }
}
.slide__text-desc {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .slide__text-desc {
    display: none;
  }
}
.slide__text-link {
  z-index: 5;
  display: inline-block;
  position: relative;
  padding: 0.5rem;
  cursor: pointer;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 2.3rem;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
@media (max-width: 991px) {
  .slide__text-link {
    display: none;
  }
}
.slide__text-link:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-85deg);
          transform: rotateX(-85deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  will-change: transform;
}
.slide__text-link:hover:before {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}


.menubar {width:100%; height:85px; margin:0; background:#282828; font-size:2em;  color:#eee; font-family: 'Bloodwax'; text-shadow:1px 1px 3px #111; padding-left:55px;  line-height:85px; }
.menubar svg{padding-left:40px; width:100%}
.menubar:before {position:absolute; display:inline-block; content:"\f101"; color:#ddd; font-size:1.2em; font-family:fontAwesome;}
.menubar:before {position:absolute; display:inline-block; content:"\f101"; color:#ddd; font-size:1.2em; font-family:fontAwesome;}
.sub00 { margin:0 auto; text-align:center; max-width:900px; }
section.content{position:absolute; padding-left:530px; width:100%; min-height:100%; background:#000 url('../images/sub_bg.png') no-repeat;background-attachment: fixed; word-break:break-word; }

/* the game*/
#sub{/*background:url('../images/sub_bg.png'); background-size:cover;*/}
#sub p{font-size:1.1em; max-width:90%; line-height:1.5em; font-weight:300; color:#eee; padding:0px; font-family:'Roboto',helvetica,sans-serif; line-height:1.68em}
#sub h2,#sub h3,#sub h4{font-family:'Bloodwax'; color:#fff; line-height:1.4em}
#sub h2{font-size:3em; padding-top:10px}
#sub h3{font-size:2em;}
#sub .subtitle{font-family:'roboto','helvetica',sans-serif; font-weight:700; background-color:#282828; font-size:1.3em; color:#fff; padding:5px 10px;}
#sub .game06, #sub .game07{width:50%; min-height:400px; display:inline-block; padding-top:20px; padding-left:55px; text-shadow:1px 1px 3px #111; border-top:1px dotted rgba(233,233,233,.3); border-right:1px dotted rgba(233,233,233,.3);  float:left ; }
#sub .game01, #sub .game02, #sub .game03, #sub .game04{width:100%; height:330px; display:inline-block; padding-left:55px; text-shadow:1px 1px 3px #111; border-top:1px dotted rgba(233,233,233,.3); }
#sub .game01:hover > h2, #sub .game02:hover > h2, #sub .game03:hover > h2, #sub .game04:hover > h2, #sub .game06:hover > h3, #sub .game07:hover > h3{  -webkit-animation: neon 1s ease-in-out infinite alternate;}
#sub .game01:hover{background:url('/images/p1_dl_bg.png')  center; background-size:cover; transition:0.3s;}
#sub .game02:hover{background:url('../images/thegame02.png') center center; background-size:cover; transition:0.3s}
#sub .game03:hover{background:url('../images/thegame03.png') center; background-size:cover; transition:0.3s}
#sub .game04:hover{background:url('../images/thegame04.png') center; background-size:cover; transition:0.3s}
#sub .game06:hover{background:url('../images/thegame06.png') center; background-size:cover; transition:0.3s}
#sub .game07:hover{background:url('../images/thegame07.png') center; background-size:cover; transition:0.3s}
#sub .game05 {display:inline-block; width:100%; height:130px; padding-right:55px; text-align:center;  border-top:1px dotted rgba(233,233,233,.3)}
#sub .game05 a{color:#eee; font-size:0.9em; text-shadow:1px 1px 5px #111} 
#sub .game05 a:hover{ -webkit-animation: neon 1s ease-in-out infinite alternate; animation: neon 1s ease-in-out infinite alternate;}
.download_bg, .download_bg2{padding-top:80px;  width:100%; min-height:300px; text-align:center}
.download_bg {background:url('../images/download_bg.png') no-repeat; background-size:cover; }
.download_bg2 {background:url('../images/download_bg2.png') no-repeat; background-size:cover;}
.download_btn {cursor:pointer; margin:10px 15px 60px; transition:0.3s; text-align:center; display: inline-block; border:1px solid rgba(233,233,233,0.4); border-radius:5px; padding:30px 100px 30px; box-shadow:2px 2px 5px rgba(0,0,0,.4); background:rgba(0,0,0,.6);}
.download_btn a{font-family:'Bloodwax'; font-size:2em; color:#fff; }
.download_btn:hover { background:rgba(233,233,233,.3);}
.download_btn:hover > a { -webkit-animation: neon 1s ease-in-out infinite alternate; animation: neon 1s ease-in-out infinite alternate; }
#sub .lefttb{margin-right:20px; vertical-align:top; width:400px; display:inline-block}
#sub .righttb{ width:400px; vertical-align:top; display:inline-block}
#hit{ cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}

/*table */
.tg  {border-collapse:collapse;border-spacing:0; margin:40px auto 0; vertical-align:top;}
.tg td{font-size:14px;padding:12px 15px;border:1px solid rgba(255,255,255,.1);overflow:hidden;word-break:normal;}
.tg:hover{background:rgba(0,0,0,.4); transition:.3s}
.tg th{font-size:14px;font-weight:normal;padding:3px 15px; border:1px solid rgba(255,255,255,.1);overflow:hidden;word-break:normal; height:80px}
.tg .tg-2bzu{background-color:rgba(0,0,0,.5);color:#efefef;text-align:center;vertical-align:middle; padding:5px auto;}
.tg .tg-gagq{font-size:14px;color:#efefef;vertical-align:middle}


/* FOOTER */
#footer{
  position: fixed;
  height:50px;
  right:20px;
  bottom:0;
  margin:0;
  display: block;
  z-index:1001;
  overflow:hidden;
}

#footer a {color:#bbb; font-size:12px; cursor:pointer}
#footer > img{
  display: inline-block;
  position: relative;
  width:110px;
  margin:0 20px;
  vertical-align: middle;
}

#footer > span{
  display: inline-block;
  position: relative;
  font-size:0.9em;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color:#ddd;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
  vertical-align: middle;
}

.subnav_banner{height:200px}

#sub .game01{height:415px}


@media screen and (max-width: 1300px){
	nav{width:150px}	
	.grid-group{width:330px; left:150px}
	#sub .grid-item h3{
	  height:40px;
	  line-height: 40px; 
	  font-size: 0.9em;
	}
	.news-wrap .title{font-size:0.8em;}
	.news-wrap .summary{font-size:0.7em;}
	.navigator li div { left:320px; top:50px; width:600px }
	.navigator li div img{width:530px}
	div .p1-float{padding:30px 5px; width:500px; right:0;}
		
	#footer span{text-align:right}
	#footer a {color:#bbb; font-size:9px; cursor:pointer;}

	.ranking_wrap span{width: 150px;}

	.trailer{width:265px;}
	.p1-content img{width:290px}
	.login-wrap{width:300px}
	.login-submit{width:80px}
	.login_form{width:50%}
	.login_form input {width:155px}
	.grid-group2{width:290px}
	.download{width:290px; font-size:1.7em}
	.grid-item:nth-of-type(2){width:290px}
	.grid-login{width:330px}
	.login-wrap{width:295 !important}
	.login .buttons a{font-size:12px}
	.login .logout_btn, .login .member_btn{width:40px; height:40px; }
	.login .logout_btn:before, .login .member_btn:before{top:12px}
	.login-wrap{width:295px}
	.language-select{width:150px; }
	.language-select .flag-icon{font-size:11px; line-height:20px}
	.navigator:after{left:100px}
	.navigator {left:150px}
	.subnav_banner{height:166px}
	section.content{padding-left:470px}
	#sub .game01, #sub .game02, #sub .game03, #sub .game04{height:360px}
}

@media screen and (max-width: 950px){
	
	body{overflow-x:auto}
	nav{width:100px}
	.language-selector{display:none}
	.nav-bottom{display:none}
	.grid-group, .video-overlay, .p1-float{display:none !important; visibility:none;}
	section.content{padding-left:100px}
	.navigator{left:100px}
	.navigator li div{left:10px; width:80%}
	.navigator li div img{width:100%}
	#dn, .xe_mobile{display:none !important;}

		
	#footer {}
	#footer a {color:#bbb; font-size:9px; cursor:pointer;}


	.menubar{font-size:13px; padding-left:10px}
	#nav .logo{margin: 20px auto 0px; height: 50px;}
	#nav a.menu{padding-left:10px; font-size:14px; height:60px; line-height:60px}
	#sub p{font-size:12px}
	#sub h2{font-size:16px; padding-top:10px}
	#sub h3{font-size:14px;}
	#sub .subtitle{font-size:14px}
    #sub .game06, #sub .game07{width:100%; display:block; padding-left:10px; min-height:initial;}
	#sub .game01, #sub .game02, #sub .game03, #sub .game04, #sub .game05 {
	padding-left:10px;
	min-width:initial;
	height:auto;
	}
}