@charset "utf-8";


.outer{width:100%;height:100%;  position: absolute; z-index:100;}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;

  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}

.loading {
	display:block;
	opacity:1;
	background-color: #fff;
    position:fixed;             /* position in the center of the screen */
	z-index:9999;
    left:0%;
    top:0%;
    height:100%;                   /* text area height */
    width:100%;                   /* text area width */
    text-align:center;
    padding:0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:0px;  /* offset vertical: half of image height and text area height */
}
.loading .logo{
position: absolute;
margin:0 auto;
margin-top: -110px;
text-align:center;
width:100%; 
top: 50%;
z-index:1001;
}
.loading .logo img{
max-height:100px;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height:100%;  
z-index:1000;
}
.lds-ellipsis div {
  position: absolute;
  top: 50%;
  margin-top: 0px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8989;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

@keyframes rattling {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.rattling{ 
 animation: rattling 1s infinite;
 }
.rotated { 
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
	color:#a9a9a9 !important;
}


.clipboardtxt{
    position:   absolute;
    top:        0;
    left:       0;
    width:      1px;
    height:     1px;
    margin:     0;
    padding:    0;
    border:     0;
	opacity:0;
}

.logos1 {
	display:none;
	transition: 3s;
}
.logos1 img{
	display:none;
}

.logos2 {
	display:none;
	transition: 3s;
}
.logos2 img{
	display:none;
}

.logos3 {
	display:none;
	font-family: 'BMJUA';
	font-size: 3.7em;
	color:#ffc72b;
}

.shadowOutline {
  text-shadow: 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00, 0 0 4px #441a00;
}

/* 가운데 정렬 */
.inner {
  position: absolute;
  z-index:100;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.inner img {
width:100%;
max-width:300px;
}

.opacity0{
opacity:0 !important;
}

.opacity1{
opacity:1 !important;
}

.main_s {
position:absolute;
z-index:1;
width:100%;
height:100%;
background:url('../images/bg_sky.png');
background-position: top;
background-size: cover;
text-align:center;
}

.gameoverbox_s{
position:absolute;
z-index:3;
width:100%;
height:100%;
margin:0px auto;
padding:30px 0;
overflow:hidden;
}
.gamefinishbox_s{
position:absolute;
z-index:3;
width:100%;
height:100%;
margin:0px auto;
padding:30px 0 0;
overflow-y:auto;
}

.inbox_s{
position:absolute;
z-index:3;
width:100%;
height:100%;
margin:0px auto;
padding:30px 0;

}

.inbox_s2{
position:absolute;
z-index:3;
width:100%;
height:100%;
margin:0px auto;
padding:70px 0;

}

.bottom_s{
position:absolute;
position:fixed;
bottom:0;
width:100%;
z-index:2;
transition: 1s;
}

.main_title_sss {
text-align:center;
height:50px;
transition: 1s;
}
.main_title_sss img{
max-width:200px;
transition: 1s;
}
.main_title_ss {
text-align:center;
height:100px;
transition: 1s;
}
.main_title_ss img{
max-width:200px;
transition: 1s;
}

.main_title_s {
text-align:center;
height:150px;
transition: 1s;
}
.main_title_s img{
max-width:200px;
transition: 1s;
}

.main_title_new {
text-align:center;
height:150px;
transition: 1s;
}
.main_title_new img{
max-width:280px;
transition: 1s;
}

.main_character_s {
text-align:center;
transition: 1s;
}
.main_character_s img{
max-width:200px;
transition: 1s;
}

.main {
position:absolute;
top:0;
z-index:1;
opacity:0;
width:100%;
height:100%;
background:url('../images/bg_sky.png');
background-position: top;
background-size: cover;
text-align:center;
}

.inbox{
display:none;
position:absolute;
z-index:3;
width:100%;
height:100%;
margin:0px auto;
padding:30px 0;
}

.main_title {
text-align:center;
}
.main_title img{
opacity:0;
max-width:0px;
transition: 1s;
}
.main_character {
text-align:center;
}
.main_character img{
opacity:0;
max-width:0px;
transition: 1s;
}
#map_s{
width:100%;
height:100%;
top:0;
left:0;
display:none;
z-index:7;
}

#openbox_s {
width:100%;
height:100%;
top:0;
left:0;
display:none; /* 삭제 요망 */
z-index:7;
overflow-x:hidden;
}

#inventory_s{
top:0;
left:0;
display:none;
z-index:10;
}
.inventory_bglight {
position:absolute;
top:-30px;
left:0;
}
.inventory_bglight img{
width:100%;
}

.inventory_bg{
position:relative;
margin:0 auto;
text-align:center;

}

.inventory_bg img{
margin:0 auto;
width:90%;
}

.openbox_bg{
position:relative;
margin:0 auto;
text-align:center;
margin-top:-70px;
}

.openbox_bg img{
margin:0 auto;
width:90%;
}

.diamond{
position:absolute;
width:100%;
top:0;
left:0;
margin:30% 0%;
text-align:center;
opacity:0;
}

.inventory_inside {
position:absolute;
top:0;
left:0;
margin:35% 10%;
}

.inventory_inside .phone {
color:#fff;
font-size:1.7em;
}
.inventory_inside ul {
position:relative;
width:85%;
margin:0 auto;
}
.inventory_inside ul li{
width:25%;
padding:8% 0 3%;
float:left;
}
.clear{
clear:both !impornat;
}


.bottom{
position:absolute;
position:fixed;
bottom:-70%;
width:100%;
z-index:2;
transition: 1s;
}

.w100{
width:100% !important;
}

.w50{
width:50% !important;
}

.w25{
width:25% !important;
}
.loginbox{
display:none;
}

#button_form {text-align:center;max-width:70%;margin:0 auto;}

.buttonbox{

}
#back_form2 {text-align:center;width:100%;margin:0 auto;
    padding-bottom: 10px;
    text-align: center;overflow:auto;z-index:10;position:absolute;bottom:10px;left:0px;transition: 1s;}

#back_form {text-align:center;max-width:70%;margin:0 auto;
    padding-bottom: 30px;
    text-align: center;overflow:auto;transition: 1s;}

#back_form3 {text-align:center;max-width:70%;margin:0 auto;
    padding-bottom: 30px;
    text-align: center;overflow:auto;transition: 1s;display:none;}

.addback_form {
	text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0px;
    text-align: center;
    overflow: auto;
    z-index: 1000;
    position: absolute;
    margin: 0 auto;
    left: 50%;
	bottom:0;
	opacity:1;
    transform: translate(-50%, 0%);
}

.addback_form2 {
	text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0px;
    text-align: center;
    overflow: auto;
    z-index: 1000;
    position: absolute;
    margin: 0 auto;
    left: 50%;
	bottom:50px;
	opacity:1;
    transform: translate(-50%, 0%);
}

.backbutton{
	display:none;
}
.backbuttons{
	
}
.textbox{
	display:none;
	width:90%;
/*	height:250px;*/
	overflow-y: auto;
    margin: 0 auto;
	border:3px solid #4b171b;
	border-radius:20px;
	background:#ffd48f;
	font-size:2.5em;
	padding:15px;
	overflow:auto;
	box-shadow: 0px 0px 2px 5px #fef5e4 inset;
	}

.txt_input {width:100%;font-size:16px;background:#467817;text-align:center;border:1px solid #30540e;border-radius:50px;box-shadow: 3px 3px 2px 2px #30540e inset;color:#fff;vertical-align:middle;padding:15px;}
#login_form {text-align:center;max-width:70%;margin:0 auto;}
input.txt_input::placeholder{color:#fff;}
.login_title{
font-size:2em;
padding:10px 0 3px 0;
color:#ffc72c;
}

.btn_submits {margin-top:10px;padding-bottom:30px;border:0;cursor:pointer;background:transparent;}
.btn_submits1 {margin-top:10px;padding-bottom:0px;border:0;cursor:pointer;background:transparent;opacity: 1;transition: 1s;}
.btn_submits2 {margin-top:0px;padding-bottom:0px;border:0;cursor:pointer;background:transparent;opacity: 1;transition: 1s;display:none;}

.float-left {float:left;}

.rattle {
  animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
   animation-iteration-count: 2;
}
.twist{
 animation: twist_turn 10s linear infinite;
}
.jump1{
 animation: updown 0.7s linear infinite;
}
.jump2{
 animation-delay: 0.1s;
 animation: updown 0.6s linear infinite;
}
.jump3{
 animation-delay: 0.1s;
 animation: updown 0.5s linear infinite;
}
.jump4{
 animation-delay: 0.1s;
 animation: updown 0.8s linear infinite;
}
.jump5{
 animation-delay: 0.1s;
 animation: updown 0.9s linear infinite;
}
@keyframes twist_turn {
   0% {
    transform: scale(1.4) rotate(0deg);
   }
  100% {
    transform: scale(1.4) rotate(360deg);
  }
}

@keyframes updown {
   0%{
   transform: translateY(0px);
   }
   50%{
   transform: translateY(5px);
   }
  100% {
   transform: translateY(0px);
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(0px, 0, 0);
    transform: rotate(0deg);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);;
    transform: rotate(2deg);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
    transform: rotate(-4deg);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
    transform: rotate(4deg);
  }
}

    @keyframes fadeInUp {
        from {
			visibility: visible;
			opacity: 0;
            transform: translate3d(0, 50%, 0);
        }
        to {
            opacity: 1;
			
            transform: translateZ(0);
        }
    }

    @keyframes fadeInDown {
        from {
            opacity: 1;
            transform: translateZ(0);
        }
        to {
            opacity: 0;
            transform: translate3d(0, 50%, 0);
			visibility: hidden;
        }
    }
 
   .fadeup {
        animation: fadeInUp 1s forwards;
    }

   .fadedown {
        animation: fadeInDown 1s forwards;
    }

    .buttonbox .fadeup:nth-child(1) {
        position: relative;
        animation: fadeInUp 1s forwards;
    }
    .buttonbox .fadeup:nth-child(2) {
		opacity: 0;
        position: relative;
        animation: fadeInUp 1s forwards;
/*		animation-direction: forwards;*/
		animation-delay: .1s;
    }

    .buttonbox .fadedown:nth-child(1) {
        position: relative;
        animation: fadeInDown 1s forwards;
		animation-delay: .1s;
    }
    .buttonbox .fadedown:nth-child(2) {
        position: relative;
        animation: fadeInDown 1s forwards;

    }

	.paddding0 {
	padding:0 !important;
	}


	.pinch-zoom-container{
	background:#000;
	}