@font-face{
  src:url("../fonts/neodgm.woff");
  font-family : "Neodgm";
 }
 
/* 캐릭터 커스터마이징 로딩 애니메이션 */
@keyframes ldio-5kptqcaie38 {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-5kptqcaie38 div {
  position: absolute;
  width: 25px;
  height: 25px;
  /* border: 7px solid rgba(255, 255, 255, 0.75); */
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-top-color: transparent;
  border-radius: 50%;
  display: block;
  z-index: 3;
  animation: ldio-5kptqcaie38 1s linear infinite;
  top: 72%;
  left: 50%;
}

.ldio-5kptqcaie38.loadingAnimationHide{ animation: smallingHide 0.2s ease forwards; }

@keyframes smallingHide{
  0%{ zoom: 0.9; }
  10%{ zoom: 0.8;}
  20%{ zoom:0.7; }
  30%{ zoom:0.6; }
  40%{ zoom:0.5; }
  50%{ zoom:0.4; }
  60%{ zoom:0.3; }
  70%{ zoom:0.2; }
  80%{ zoom:0.1; display: none; }
  100%{ zoom: 0.1; display: none; }
}

 
 body{
  padding:0px !important;
  font-family: "Neodgm";
  background-color: rgb(70, 71, 66); 
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none 
}

/* body 뒷 배경 다크모드 */
.body_dark-mode{
  background-color: rgb(42, 42, 42);
}
/* 다크모드 시 게임 디스플레이 다크필터 */
.display_darkModeFilter{
  border-radius: 7px 7px 7px 7px;
  position: absolute;
  height: 200px;
  width: 800px;
  background-color: rgb(0, 0, 0, 0.3);
  display: none;
}

/* 인게임 로그아웃 버튼 ================================================================================================== */
.IngameUserProfile{
position: absolute;
width: 60px;
height: 60px;
transform: scale(0.45);
border-radius: 5px;
margin-top: -16px;
margin-left:-36px;
background-image: url('../img/costumeImg.png'); background-position: 0px 0;

}

.IngameLogoutButton{
  padding:0px 20px;
  width: 150px;
  height: 28px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: rgb(51, 53, 51);
  border-radius: 3px;
  box-shadow: 1px 3px 4px rgba(0,0,0,0.7);
  z-index: 2;
  transition: all 0.1s;
}
.IngameLogoutButton.show{ animation: show_slide 1s ease forwards; }
.IngameLogoutButton.hide{ display: none; }
.IngameLogoutButton:hover{ transform: scale(1.02); }
.IngameLogoutButton:active{ opacity: 0.5;}
.IngameLogoutButton .IngameUserName{
  position: absolute;
  width: 105px;
  height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-left: 16px;
  margin-top: 3px;
  color:#ffffff;
}

@keyframes show_slide{
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }

}

/* 타이핑에 따른 경험치 캡슐 바 ========================================================================== */
#expGageBar{
  position: absolute;
  width: 730px;
  height: 4px;
  margin-top: -20px;
  border: none;
  display: none;
}
#expGageBar::-webkit-progress-bar {
  background-color: rgba(255, 255, 255, 0);
}
/* 몬스터 HP 불러오기 */
#expGageBar::-webkit-progress-value {
  background-color: rgba(147, 180, 139, 0.7);
}
/* ======================================= 캐릭터 스프라이트 시트 ======================================= */


#characterImg {
  /* zoom: 0.7; */
  /* transform: scale(1.1); */
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  background-image: url('../img/costume/skin/SK1001/idle_SK1001.png');
  z-index: 1;
  transform: scale(0.7);
  /* zoom: 0.7; */
}
#hair{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/hair/HR1001/idle_HR1001.png');
  transform: scale(0.7);
}
#pants{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/pants/PT1001/idle_PT1001.png');
  transform: scale(0.7);
}
#shirt{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/shirt/ST1001/idle_ST1001.png');
  transform: scale(0.7);
}
#face{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 2;
  background-image: url('../img/costume/face/FC1001/idle_FC1001.png');
  transform: scale(0.7);
}
#helmet{
    position: absolute;
    margin-top: 47px;
    margin-left: 320px;
    width: 160px;
    height: 160px;
    z-index: 2;
    /* background-image: url('../img/costume/hat/HT1002/idle_HT1002.png'); */
    transform: scale(0.7);
  }

#characterHealMotionImg{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  background-image: url('../img/costume/skin/SK1001/heal_SK1001.png');
  z-index: 1;
  transform: scale(0.7);
  opacity: 0;
}
#weaponHealMotionImg{
  position: absolute;
  margin-top: 47px;
  margin-left: 308px;
  width: 240px;
  height: 160px;
  background-image: url('../img/weapon/W1002/heal_W1002.png');
  z-index: 1;
  transform: scale(0.7);
  opacity: 0;
}
#heal_hair{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/hair/HR1001/heal_HR1001.png');
  transform: scale(0.7);
  opacity: 0;
}
#heal_pants{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/pants/PT1001/heal_PT1001.png');
  transform: scale(0.7);
  opacity: 0;
}
#heal_shirt{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/shirt/ST1001/heal_ST1001.png');
  transform: scale(0.7);
  opacity: 0;
}
#heal_face{
  position: absolute;
  margin-top: 47px;
  margin-left: 320px;
  width: 160px;
  height: 160px;
  z-index: 1;
  background-image: url('../img/costume/face/FC1001/heal_FC1001.png');
  transform: scale(0.7);
  opacity: 0;
}
#heal_helmet{
    position: absolute;
    margin-top: 47px;
    margin-left: 320px;
    width: 160px;
    height: 160px;
    z-index: 1;
    background-image: url('../img/costume/helmet/HT1001/heal_HT1001.png');
    transform: scale(0.7);
    opacity: 0;
}
#healEffect{
position: absolute;
margin-top: 47px;
margin-left: 320px;
width: 160px;
height: 160px;
z-index: 2;
background-image: url('./img/heal_effect.png');
transform: scale(0.7);
opacity: 0;
}

#weaponImg{
  position: absolute;
  margin-top: 47px;
  margin-left: 308px;
  width: 240px;
  height: 160px;
  background-image: url('../img/weapon/W1002/idle_W1002.png');
  transform: scale(0.7);
  z-index: 0;
}

#hitEffect{
  position: absolute;
  margin-top: 64px;
  margin-left: 406px;
  width: 128px;
  height: 128px;
  background-image: url('./img/hitEffectSpritesheet.png');
  background-position: 128px;
  z-index: 3;
  opacity: 0.7;
  transform: scale(0.66);
}
#skillEffectMotion{
position: absolute;
margin-top: -79px;
margin-left: 81px;
width: 640px;
height: 320px;
background-image: url('./img/skillSpriteSheet.png');
z-index: 3;
transform: scale(0.7);
display: none;
}
#characterSkillMotion{
position: absolute;
margin-top: -79px;
margin-left: 81px;
width: 640px;
height: 320px;
background-image: url('./img/characterSkillMotion.png');
z-index: 3;
transform: scale(0.7);
display: none;
}


/* ---------------------------------------------사이드 메뉴--------------------------------------------------- */
input[id="menuicon"]{
  display: none;
}
input[id="menuicon"] + label{
  display:block;
  width:60px;
  height: 40px;
  position: relative;
  cursor:pointer;
}
input[id="menuicon"]+label span{
  display: block;
  position: absolute;
  width:100%;
  height:4px;
  border-radius:10px;

  transition: all .35s;
}
input[id="menuicon"]+label span:nth-child(1){
  top:0;
}
input[id="menuicon"]+label span:nth-child(2){
  top:50%;
  transform:translateY(-50%);
}
input[id="menuicon"]+label span:nth-child(3){
  bottom:0;
}
input[id="menuicon"]:checked+label{
  z-index:2;
}
input[id="menuicon"]:checked+label span:nth-child(1){
  background: rgb(255, 255, 255);
  top:50%;
  transform: translateY(-50%) rotate(45deg);
}
input[id="menuicon"]:checked+label span:nth-child(2){
  opacity: 0;
}
input[id="menuicon"]:checked+label span:nth-child(3){
  background: rgb(255, 255, 255);
  bottom:50%;
  transform: translateY(50%) rotate(-45deg);
}

/* 사이드바(메뉴) */
div[class="sidebar"]{
  width: 300px;
  height:100%;
  background: #222;
  position: fixed;
  top:0;
  right:-300px;
  z-index:1;
  transition:all .35s;
}
input[id="menuicon"]:checked+label+div{
  right:0;
}
input[id="menuicon"]+label{
  display:block;
  width: 30px;
  height: 25px;
  position: fixed;
  right:310px;
  top: 10px;
  transition:all.35s;
  cursor:pointer;
}


.toggleBox{
  margin-top: 20px;
}
#bright{
  width:60px;
  height:60px;
  float: left;
  margin-left: 10px;
  margin-top: -15px;
}
#dark{
  width:60px;
  height:60px;
  float: right;
  margin-right: 10px;
  margin-top: -45px;
}
#chk1{
  position: absolute;
  left: -1000%;
}
#toggle{
  display: block; position:relative; width:150px; height: 30px; background:#cecece; 
  border-radius: 60px; transition: background .4s;
  left: 77px;
}
#toggle::after{ 
  content:"";position: absolute; left:7.5px;top: 50%;width:45px; height:45px;
  border-radius: 100%; background: rgb(77, 90, 82); transform: translateY(-50%);
  box-shadow: 1px 3px 4px rgba(0,0,0,.3); transition: all .4s;
}
#chk1:checked+label{
  background: #000000;
}
#chk1:checked+label:after{
  left: calc(100% - 52.5px); right:7.5px;
}
#toggle span{
  display: none;
}

/* 이펙트 설정 */
.SettingName{
  position: absolute;
  color: rgb(107, 107, 107);
  font-size: 20px;
  margin-top: -32px;
  margin-left: 17px;
}

.EffectSetting{
    position: absolute;
    width: 300px;
    height: 100px;
    margin-top: 185px;
}
.SettingButton{
   width: 130px;
   height: 35px;
   margin-left: 14px;
   border-radius: 10px;
   border: none;
   transition: all 0.3s;
}
#monsterDamageEffectOff{
  background-color: rgb(82, 82, 82);
}
#monsterDamageEffectOff:hover{
  box-shadow: 0px 0px 0px 4px rgba(177, 177, 177, 0.5);
}
#monsterDamageEffectOff:active{
  opacity: 0.5;
}
#monsterDamageEffectOn:hover{
  box-shadow: 0px 0px 0px 4px rgb(177, 177, 177, 0.5);
}
#monsterDamageEffectOn:active{
  opacity: 0.5;
}

.SentenceTypeSetting{
  position: absolute;
  width: 300px;
  height: 100px;
  margin-top: 100px;
}
#wordsButton{
  background-color: rgb(82, 82, 82);
}
#wordsButton:hover{
  box-shadow: 0px 0px 0px 4px rgba(177, 177, 177, 0.5);
}
#wordsButton:active{
  opacity: 0.5;
}
#quoteButton:hover{
  box-shadow: 0px 0px 0px 4px rgb(177, 177, 177, 0.5);
}
#quoteButton:active{
  opacity: 0.5;
}
  /* ---------------------------------------------사이드 메뉴 끝--------------------------------------------------- */
  

.assistBox{
  top: 190px;
  position: absolute;
  width:700px;
  height: 22px;
  margin-left: 100px;
  font-size: 15px;
  color: #dddddd;
}

.beta{
  position: absolute;
  width: 50px;
  height: 22px;
  background-color: rgb(255, 255, 255,0.2);
  color: #dddddd;
  right: 1%;
  top: 4%;
  border-radius: 6px;
  text-align: center;
}


/* --------------------------------------------------------------캐릭터---------------------------------------------------------- */
/* 전역변수 url 링크 */

.characterShadow{
  position: absolute;
}
.characterShadow.shadowMotion1{
  position: absolute;
  /* content:url("img/motion3.gif");
  width: 440px;
  height: 220px;
  margin-left:183px;
  margin-top:-270px; */
}
.characterShadow.shadowMotion2{
  position: absolute;
  /* content:url("img/motion4.gif");
  width: 440px;
  height: 220px;
  margin-left:183px;
  margin-top:-270px;
  z-index: 3; */
  
}
/* 몬스터에게 공격받았을 시 */
.characterDamaged{
  filter:brightness(50%);
}



/* ----------------------------------------------------------------몬스터-------------------------------------------------------------------------- */

.mosterHpBox{
 position: absolute;
 background-color: none;
 width: 800px;
 height: 7px;
 margin-top:-220px;
 margin-right:50px;
 border-radius: 2px;
}
/* 몬스터 HP 투명 */
#MonsterHP{
  position: absolute;
  display: none;
  width: 800px;
  height: 7px;
}
#MonsterHP::-webkit-progress-bar {
  background-color: rgb(129, 120, 120,0);
  width: 800px;
  height: 7px;
  border-radius: 2px
}
/* 몬스터 HP 불러오기 */
#MonsterHP::-webkit-progress-value {
  background-color: rgb(129, 120, 120,0);
  border-radius: 2px;
}

#MonsterHP.monsterHpAppear::-webkit-progress-bar {
  background-color: rgb(129, 120, 120,0);
  width: 800px;
  height: 7px;
  border-radius: 2px
}
#MonsterHP.monsterHpAppear::-webkit-progress-value {
  background-color: #b63434;
  border-radius: 2px;
}


.monster{
  position: absolute;
  content:url("img/goblinStatue.png");
  width: 240px;
  height: 240px;
  margin-left:356px;
  margin-top:-42px;
}
.monster.monsterApear{
  position: absolute;
  content:url("img/goblinStandardMotion.gif");
  
  width: 110px;
  height: 110px;
  margin-left:390px;
  margin-top:47px;
}
.monster.monsterAttackMotion{
  position: absolute;
  content:url("img/goblinattack.gif");
  width: 110px;
  height: 110px;
  margin-left:385px;
  margin-top:47px;
}

.monster.monsterDead{
  position: absolute;
  content:url("img/goblindead.gif");
  width: 110px;
  height: 110px;
  margin-left:385px;
  margin-top:47px;
}

#monster_shadow{
  position: absolute;
  width: 300px;
  height: 20px;
  margin-top: 168px;
  margin-left: 382px;
  transform: scale(0.8);
  background-image: url("img/monster_shadow.png");
}
#character_shadow{
  position: absolute;
  width: 100px;
  height: 20px;
  margin-top: 170.5px;
  margin-left: 347.5px;
  transform: scale(0.8);
  background-image: url("img/shadow.png");
  background-position: 100px 0;
}

.monsterDamaged{
  filter:brightness(250%);
}
.monsterDamaged_off{
  filter:brightness(100%);
}







.strGageBox{
  position: absolute;
  top: -20%;
  left: 50%;
  right: 50%;
  margin-left:-29px;
  margin-top:-10px;
}
#strGage::-webkit-progress-bar {
  background-color: rgb(129, 120, 120);
  width: 60px;
  height: 5px;
  border-radius: 2px
}
#strGage::-webkit-progress-value {
  background-color: #50b16d;
  border-radius: 2px;
}


.recodeBox{
  position: absolute;
  background-color: rgb(70, 71, 66);
  height: 20px;
  width: 210px;
  left: 50%;
  right: 50%;
  top: -2%;
  margin-left:-105px;
  border-radius: 0px 0px 10px 10px;
  /* box-shadow: 1px 1px 2px; */

}

.recodeBox_darkmode{
  background-color: rgb(42, 42, 42);
}


.recode{
  position: absolute;
  color: rgb(230, 230, 230);
  height: 30px;
  width: 800px;
  top: 4.5%;
  left: 50%;
  right: 50%;
  margin-left:-400px;
  margin-top:-10px;
  border: none;
  font-size: 12px;
  text-align: center;
}

.TextSourceBox{
  color: rgb(199, 199, 199);
  margin-left:2px;
  font-size: 15px;
}



div#main{
  
  /* background-image: url(rpg4.png); */
  /* backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing:subpixel-antialiased; */
  /* zoom:1.1; */
  transform: scale(1.1);
  position: absolute;
  background-color: #ffffff;
  height: 183px;
  width: 800px;
  top: 46%;
  left: 50%;
  right: 50%;
  margin-left:-400px;
  margin-top:5px;
  border: solid 1px gray;
  border-style: none;
  border-radius: 8px;
  /* box-shadow: 5px 5px 5px ; */

}

div#main.main_darkMode{
  /* background-image: url(rpg4.png); */
  background-color: rgb(35, 35, 35);
}






.word-display{
  opacity: 0;
  font-family: 'Apple SD Gothic Neo','Malgun Gothic',arial,sans-serif;
  margin-left: 2px;
  font-weight: 600;
}
.temp{
  font-family: 'Apple SD Gothic Neo','Malgun Gothic',arial,sans-serif;
  margin-left: 2px;
  font-weight: 600;
  font-size: 17px;
}
.content{
  font-family: 'Apple SD Gothic Neo','Malgun Gothic',arial,sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #a7a7a7;
  background-color: transparent;
}

  
div#mainhead{  
  background-image: url("img/grasslandBackground.png");
  background-repeat: repeat-x;
  transition: background 5s;
  background-size:100%;
  background-color: #000000; 
  border-radius: 7px 7px 7px 7px;
  position: absolute;
  height: 200px;
  width: 800px;
  left: 50%;
  right: 50%;
  margin-left:-400px;
  margin-top:-240px; 
  border: solid 1px gray;
  border-style: none;
}  

.opacityClass{
  opacity: 0.6;
}

.shake{
  animation: shake 0.1s infinite;
}
.goblinAttackShake{
  animation: shake 0.1s infinite;
  animation-delay: 0.3s;
}

.specialAttackShake{
  animation: shake 0.1s infinite;
}

@keyframes shake{
  0%{	transform: translate(1px, 1px) rotate(0deg);}
  10%{	transform: translate(-1px, -1px) rotate(-1deg);}
  20%{	transform: translate(3px, 1px) rotate(1deg);}
  30%{	transform: translate(3px, 2px) rotate(0deg);}
  40%{	transform: translate(1px, -1px) rotate(1deg);}
  50%{	transform: translate(-1px, 1px) rotate(-1deg);}
  60%{	transform: translate(2px, -1px) rotate(0deg);}
  70%{	transform: translate(-1px, 1px) rotate(1deg);}
  80%{	transform: translate(3px, -1px) rotate(-1deg);}
  90%{	transform: translate(1px, 3px) rotate(0deg);}
  100%{	transform: translate(1px, -2px) rotate(1deg);}
}

#displayEffect.opacityEffect{
  position: absolute;
  background-color: #000000; 
  border-radius: 7px 7px 7px 7px;
  position: absolute;
  height: 200px;
  width: 800px;
  left: 50%;
  right: 50%;
  margin-left:-400px;
  margin-top:-240px; 
  border-style: none;
  opacity: 0.5;
  z-index: 2; 
}

#displayEffect.brightEffect{
  position: absolute;
  background-color: #ffffff; 
  border-radius: 7px 7px 7px 7px;
  position: absolute;
  height: 200px;
  width: 800px;
  left: 50%;
  right: 50%;
  margin-left:-400px;
  margin-top:-240px; 
  border-style: none;
  opacity: 0.4; 
}



.indicate-assist{
  margin-left:-28px;
  font-size: 13px;
  color: #b9b9b9;
}

.indicater{
position: absolute;
/* background-image: url(indicate.png);
background-size: 100%;
background-position: 0cm -10px;  */
background-color: #ffffff;
border-radius: 7px 7px 7px 7px;
height: 30px;
width: 800px;
top: -13%;
left: 50%;
right: 50%;
margin-left:-400px;
margin-top:-10px;
/* border: solid 1px rgb(53, 70, 51); */
border-style: none;
font-size: 20px;
text-align: center;
/* box-shadow: 5px 5px 5px ; */
}

.indicater.indicater_darkMode{
  background-color: rgb(35, 35, 35);
  }


.speed {
  /* border: 1px solid green; */
  float: left;
  width:30%;
  color: Gray;
  box-sizing: border-box;
}

.accuracy{
  /* background-color: #ffffff;
  border: 1px solid green; */
  float: left;
  margin-left: 5%;
  width:30%;
  color: Gray;
  box-sizing: border-box;
}

.count{
  /* border: 1px solid green; */
  float: right;
  width:30%;
  color: Gray;
  box-sizing: border-box;
}



 /* 게이지 영역 */
.parent{
    width: 95%;
    margin: 24px auto;

}

.first{
  float: left;
    width:32%;
    box-sizing: border-box;
}
.second{
  margin-left: 70px;
  float: left;
}
.third{
    float: right;
    margin-right: 29px;
    width:32%;
    box-sizing: border-box;
}

.button {  
  background-Color:#999696;   /*--백그라운드 정의---*/
  border:none;
  border-radius:5px;
  width: 40px;
  height: 30px;
  }





input:focus{
  outline:none;
}

input::placeholder{
  color:#e2e2e2
}



h1 {
    margin: 100px;
    border: 50px solid #dddddd;
    padding: 100px;
  }

  textarea{
    font-size: 100%;
    resize: none;
  }

  *text{
    size: 100;
  }


  /*---------------------------------------------------------------- HP, MP 게이지바 ----------------------------------------------------*/
  /*---------------------------------------------------------------- HP, MP 게이지바 ----------------------------------------------------*/

  progress {
    appearance: none;
}

/* mp 게이지바 디자인 */
#lb::-webkit-progress-bar {
  background-color: #b9b9b9;
  background-image: url(img/pixelGageBack.png);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
    width: 272px;
    height: 23px;
}
#lb::-webkit-progress-value {
  background-color: #b9b9b9;
    background-image: url(img/pixelGageMP.png);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
    /* background: #2d4cff;
    background: -webkit-linear-gradient(to right, #9fb0ff, #0310ca);
    background: linear-gradient(to right, #9fb0ff,#0310ca); */

}
#lb.mpEffect::-webkit-progress-value {
  background-color: #b9b9b9;
  background-image: url(img/PixelGageMpFullEffect.gif);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
}




#HP::-webkit-progress-bar {
  background-color: #b9b9b9;
  background-image: url(img/pixelGageBack.png);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
  width: 272px;
  height: 23px;

}
#HP::-webkit-progress-value {
  background-color: #b9b9b9;
  background-image: url(img/pixelGageHP.png);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
  /* border-radius:7px;
  background: #ec3838;
  background: -webkit-linear-gradient(to right, #f16060, #9b0000);
  background: linear-gradient(to right, #f16060,#9b0000); */
}
#HP.hpEffect::-webkit-progress-value {
  background-color: #b9b9b9;
  background-image: url(img/pixelGageHpEffect.gif);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
  /* border-radius:7px;
  background: #ec3838;
  background: -webkit-linear-gradient(to right, #f16060, #9b0000);
  background: linear-gradient(to right, #f16060,#9b0000); */
}
#HP.DamagedHpEffect::-webkit-progress-value {
  background-color: #b9b9b9;
  background-image: url(img/HPdamagedEffect.gif);
  background-position: 0cm 25px;
  background-size: 280px;
  border-radius:7px;
  /* border-radius:7px;
  background: #ec3838;
  background: -webkit-linear-gradient(to right, #f16060, #9b0000);
  background: linear-gradient(to right, #f16060,#9b0000); */
}

/* 파이어폭스 전용 CSS */
@-moz-document url-prefix() {
  /* progress 요소 스타일링 */
  #strGage{
    position: absolute;
    background-color: rgb(129, 120, 120);
    width: 60px;
    height: 5px;
    border-radius: 2px;
    border: none;
  }
  #strGage::-moz-progress-bar {
    background-color: #50b16d;
  }
 
  #lb {
    background-color: #b9b9b9;
    background-image: url(img/pixelGageBack.png);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
    width: 272px;
    height: 23px;
    border: none;
  }

  /* progress-bar 스타일링 */
  #lb::-moz-progress-bar {
    background-color: #b9b9b9;
    background-image: url(img/pixelGageMP.png);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
  }

  /* mpEffect 클래스를 적용했을 때의 스타일링 */
  #lb.mpEffect::-moz-progress-bar {
    background-color: #b9b9b9;
    background-image: url(img/PixelGageMpFullEffect.gif);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
  }

  #HP{
    background-color: #b9b9b9;
    background-image: url(img/pixelGageBack.png);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
    width: 272px;
    height: 23px;
    border: none;
  }
  
  /* progress-bar 스타일링 */
  #HP::-moz-progress-bar {
    background-color: #b9b9b9;
    background-image: url(img/pixelGageHP.png);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
  }

  /* mpEffect 클래스를 적용했을 때의 스타일링 */
  #HP.mpEffect::-moz-progress-bar {
    background-color: #b9b9b9;
    background-image: url(img/pixelGageHpEffect.gif);
    background-position: 0cm 25px;
    background-size: 280px;
    border-radius:7px;
  }

#expGageBar::-moz-progress-bar {
  background-color: rgba(147, 180, 139, 0.7);
}
}




.button1{
  background-image: url(img/ingame_buttons.png);
  border-radius:5px;
  background-position: -0px 0;
  border: none;
  height: 30px;
  width: 40px;
  opacity: 0.9;
  transition: all 0.1s;
}
.button2{
  background-image: url(img/ingame_buttons.png);
  background-position: -41px 0;
  border-radius:5px;
  border: none;
  height: 30px;
  width: 40px;
  opacity: 0.9;
  transition: all 0.1s;
}
.button3{
  background-image: url(img/ingame_buttons.png);
  background-position: -82px 0;
  border-radius:5px;
  border: none;
  height: 30px;
  width: 40px;
  opacity: 0.9;
  transition: all 0.1s;
}

.button1:hover{
  transform: scale(1.03);
  opacity: 1;
}
.button2:hover{
  transform: scale(1.03);
  opacity: 1;

}
.button3:hover{
  transform: scale(1.03);
  opacity: 1;
}


/* 사용자 로그인시 나오는 경험치바  */
/* ----------------------------------------------------------------------- */
/* .userExpBar_Box{
  position: absolute;
  background-color: none;
  width: 800px;
  height: 7px;
  margin-top:-220px;
  margin-right:50px;
  border-radius: 2px;
 } */
 .userExpBarBox{
  position: absolute;
  margin-top: 50px;
  
 }
 #userExpBar{
   width: 100%;
   height: 1px;
 }
 #userExpBar::-webkit-progress-bar {
   background-color: rgb(95, 95, 95);
   height: 10px;
   border-radius: 2px
 }
 #userExpBar::-webkit-progress-value {
   background-color: rgb(75, 197, 91);
   height: 10px;
   border-radius: 2px;
 }

 


/* --------------------------------------------------------------------------------공격 시 데미지숫자 효과  */
#damageNumber{
  z-index: -1;
  position: absolute;
  position: absolute;
  opacity: 0;
  margin-left: 365px;
  margin-top: -250px;
}
#damageNumber.damageNumberEffect{
  position: absolute;
  color:rgb(207, 65, 60);
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation:txtE 1.5s infinite;
  animation-iteration-count: 1;
  margin-left: 365px;
  margin-top: -290px;
  font-size: 30px;
}

@keyframes txtE {
  60% {
    transform: translate(0px, 0) scale(1);
    color:rgb(255, 255, 255);
  }
  80% {
    transform: translate(0px, 0) scale(1);
    color:rgb(207, 65, 60);
  }
  90% {
    transform: translate(0) scale(1.2);
    color:rgb(228, 142, 142);
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
    color:rgb(207, 65, 60);
  }
}

/* 평타 데미지 숫자 이펙트 */
.number-container {
position: absolute;
width: 50px;
height: 50px;
margin-top: -222px;
margin-left: 500px;
overflow: hidden;
opacity: 0.9;
}
.moving-number {
position: absolute;
font-size: 1.5rem;
color: #ffffff;
font-size: 25px;
top: 50%;
left: 50%;
transform: translateX(-50%);
opacity: 1;
animation: moveUp 0.7s ease-in-out forwards, fadeOut 1s ease-in-out 0.2s forwards;
}

/* 경험치 획득 이펙트 */
.exp-container {
position: absolute;
width: 50px;
height: 50px;
/* margin-top: -172px;
margin-left: 374px; */
  margin-top: 80px;
margin-left: 25px; 
overflow: hidden;
display: none;
opacity: 0.9;
}
.moving-exp {
position: absolute;
font-size: 1.5rem;
/* color: #dfffe2; */
color: rgba(147, 180, 139, 0.7);
font-size: 20px;
top: 50%;
left: 50%;
transform: translateX(-50%);
opacity: 1;
animation: moveUp 0.7s ease-in-out forwards, fadeOut 1s ease-in-out 0.2s forwards;
}
@keyframes moveUp {
0% {
  top: 30%;
}
100% {
  top: 0;
}
}

@keyframes fadeOut {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  
  /* 숨기기 */
  z-index: -1;
  opacity: 0;
}

.show {
  opacity: 1;
  z-index: 1000;
  transition: all .5s;
}

.window {
  position: relative;
  width: 100%;
  height: 100%;
}

.popup {
  position: absolute;
  /* zoom: 0.9; */
  /* background-image: url("img/info.png"); */
  background-size: 100%;
  border-radius: 10px;
  /* border-color: rgb(94, 114, 105); */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background-color: #3e4642; */
  box-shadow: 0 2px 7px rgba(0, 0, 0, 1);
  /* 임시 지정 */
  width: 360px;
  height: 432px;
  
  /* 초기에 약간 아래에 배치 */
  transform: translate(-50%, -40%);
}

/* 문장 선택 박스 ============================================================================== */
/* #sentenceSelectBox{
  position: absolute;
  width: 170px;
  height: 25px;
  border-radius: 5px;
  margin-top: 60px;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
#wordsSelectButton{
background-color: rgba(0, 0, 0, 0);
border: none;
color: #ffffff;
}
#quoteSelectButton{
background-color: rgba(0, 0, 0, 0);
border: none;
color: #ffffff67;
} */

#restartButton{
  position: absolute;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgb(160, 145, 128);
  left: 50%;
  margin-top: 230px;
  margin-left: -83px;
  border: none;
  border-radius: 5px;
  width: 170px;
  height: 30px;
  background-color:rgb(58, 53, 49);
  box-shadow: 0 0px 10px 2px rgb(211, 211, 211);
}
#restartButton:hover{
  font-size: 20px;
  opacity: 1;
  width: 171px;
  height: 31px;
  background-color:rgb(58, 53, 49);
  box-shadow: 0 0px 10px 3px rgb(182, 43, 43);
}



#close{
position:absolute;
 width: 130px;
 height: 50px;
 float: left;
 margin-top: 440px;
 margin-left: 116px;
 font-size: 20px;
}



.finalBox{
margin-top: 213px;
margin-left: 90px;
vertical-align: middle;
}
.TotalRound{
  font-size: 20px;
  color: rgb(77, 61, 61);
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}
.MonsterHunts{
  font-size: 20px;
  color: rgb(77, 61, 61);
  display: table-cell;
text-align: left;
vertical-align: middle;
}
.MaxDamage{
  font-size: 20px;
  color: rgb(77, 61, 61);
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.TotalScore{
  font-size: 25px;
  color: rgb(226, 224, 224);
  display: table-cell;
padding-left: 10px;
text-align: left;
vertical-align: middle;
display:table-cell;

}

  /* 경험치 및 골드 획득 창  =========================================================================== */
/* 경험치 */
.rewardExp{
  padding:10px 20px;
  position: absolute;
  top: 32px;
  border-radius: 5px;
}
.rewardExp.show{ animation: show_slide 1s ease forwards; }
.rewardExp.hide{ animation: hide_slide 0.5s ease forwards; }
.rewardExp.idle{ display: none; }

.rewardExp .msgExp{
  font-size: 18px;
  color:#bae697;
}

.rewardGold{
  padding:10px 20px;
  position: absolute;
  top: 54px;
  border-radius: 5px;
}
.rewardGold.show{ animation: show_slide 1s ease forwards; }
.rewardGold.hide{ animation: hide_slide 0.5s ease forwards; }
.rewardGold.idle{ display: none; }

.rewardGold .msgGold{
  font-size: 20px;
  color:#fff19f;
  /* text-shadow: 1px 1px 10px rgb(255, 230, 176); */
}

@keyframes show_slide{
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }
}

@keyframes hide_slide{
  0%{
    opacity: 0.8;
  }
  30%{
    opacity: 0.6;
  }
  60%{
    opacity: 0.3;
  }
  80%{
    opacity: 0.1;
  }
  100%{
    opacity: 0;
  }
}
/* 경험치 및 골드 획득 창 끝  =========================================================================== */