@font-face {
  font-family: 'exo_regular';
  src: url("../font/Exo2.0-Regular-webfont.woff") format("woff");
}
@font-face {
  font-family: 'exo_medium';
  src: url("../font/Exo2.0-Medium-webfont.woff") format("woff");
}
@font-face {
  font-family: 'exo_black';
  src: url("../font/Exo2.0-Black-webfont.woff") format("woff");
}
@font-face {
  font-family: 'PirulenRg-Regular';
  src: url("../font/pirulen_rg.woff") format("woff");
}
@font-face {
  font-family: 'OrbitronLight';
  src: url("../font/orbitron-light-webfont.woff") format("woff");
}
@font-face {
  font-family: 'OrbitronMedium';
  src: url("../font/orbitron-medium-webfont.woff") format("woff");
}
@font-face {
  font-family: 'OrbitronBold';
  src: url("../font/orbitron-bold-webfont.woff") format("woff");
}
@font-face {
  font-family: 'OrbitronBlack';
  src: url("../font/orbitron-black-webfont.woff") format("woff");
}
@font-face {
  font-family: 'MavenProRegular';
  src: url("../font/maven_pro_regular-webfont.woff") format("woff");
}
@font-face {
  font-family: 'MavenProBold';
  src: url("../font/maven_pro_bold-webfont.woff") format("woff");
}
button {
  height: 34px;
  font-size: 15px;
  border-radius: 99px;
  text-transform: uppercase;
  font-family: "exo_regular", sans-serif;
  color: #fff;
  border: #CEDBDB 2px solid;
  box-shadow: 0 0 0 2px #000, 0 0 0 1px #222 inset;
  cursor: pointer;
}
button.orange {
  background: linear-gradient(#ffaa00, #ff8415);
}
button.red {
  background: linear-gradient(#ff5954, #ca3234);
}
button.grey {
  background: linear-gradient(#666666, #444444);
}
button:hover, button:focus {
  outline: 0;
  border: #20E0BB 2px solid;
}
button.orange:hover, button.orange:focus {
  background: linear-gradient(#ffaa00, #ff6b15);
}
button.red:hover, button.red:focus {
  background: linear-gradient(#ff5954, #af1f24);
}
button.grey:hover, button.grey:focus {
  background: linear-gradient(#888888, #666666);
}

.highlight {
  font-family: "exo_medium", sans-serif;
  color: #CA3234;
}

.highlight_o {
  font-family: "exo_medium", sans-serif;
  color: #ff7700;
}

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0;
  margin: 0;
}

div, div:before, div:after, canvas {
  position: absolute;
}

body {
  font-family: "exo_regular", sans-serif;
  background: url("../img/bg_pattern.jpg") center center;
  line-height: 1;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  cursor: url(../img/cursor.png), auto !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body a:hover, body a:active, body a:link, body a:visited, body button:hover, body button:active, body button:link, body button:visited, body #quest_btn:hover, body #quest_btn:active, body #quest_btn:link, body #quest_btn:visited, body .pin:hover, body .pin:active, body .pin:link, body .pin:visited, body .nano-slider:hover, body .nano-slider:active, body .nano-slider:link, body .nano-slider:visited, body .npc_m:hover, body .npc_m:active, body .npc_m:link, body .npc_m:visited, body .tileHover:hover, body .tileHover:active, body .tileHover:link, body .tileHover:visited, body .popUp:hover, body .popUp:active, body .popUp:link, body .popUp:visited {
  cursor: url(../img/cursor_hover.png), auto !important;
}

#canvasSet {
  z-index: 1;
}

#popWrap {
  z-index: 2;
}

#operatePanelSetting {
  z-index: 3;
}

#charPanel {
  z-index: 4;
}

#messageWrap {
  z-index: 5;
}

#charMenuWrap {
  z-index: 6;
}

#tradeMenuWrap {
  z-index: 7;
}

#hint_target {
  z-index: 8;
}

#settingMenuWrap {
  z-index: 9;
}

#worldMapWrap {
  z-index: 10;
}

#hint_quest_wrap {
  z-index: 11;
}

#videoWrap {
  z-index: 12;
}

#landingWrap {
  z-index: 13;
}

#gameoverWrap {
  z-index: 14;
}

#creditWrap {
  z-index: 15;
}

#fullScreenMessage {
  z-index: 16;
}

#continueWrap {
  z-index: 17;
}

#loadMenuWrap {
  z-index: 18;
}

#hint {
  z-index: 19;
}

#hint2 {
  z-index: 20;
}

#hint3 {
  z-index: 21;
}

#loadingWrap {
  z-index: 22;
}

#demoVideoWrap {
  z-index: 23;
}

#wrapper .nano > .nano-content {
  overflow: scroll;
  overflow-x: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#wrapper .nano > .nano-pane {
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
}
#wrapper .nano > .nano-pane > .nano-slider {
  position: relative;
  margin: 0 1px;
  background: #444;
  border-radius: 5px;
  cursor: pointer;
}
#wrapper .nano > .nano-pane > .nano-slider:hover {
  background: #333;
}
#wrapper .nano .nano-pane {
  background: #d8c5ab;
  width: 8px;
  right: 1px;
  margin: 10px 5px;
}

#init_loading_icon {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  opacity: 0;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#init_loading_icon.show {
  opacity: 1;
  -webkit-animation: loadingRotate 2s linear infinite;
  animation: loadingRotate 2s linear infinite;
}

#loadingWrap .loading_icon {
  width: 50px;
  height: 50px;
  top: 63%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  z-index: 99;
}
#loadingWrap .loading_icon img {
  display: block;
  width: 100%;
  height: 100%;
}
#loadingWrap.show .loading_icon img {
  -webkit-animation: loadingRotate 2s linear infinite;
  animation: loadingRotate 2s linear infinite;
}

@-webkit-keyframes loadingRotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loadingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#fontLoader {
  font-family: 'exo_black', sans-serif;
  position: absolute;
  top: -100px;
  left: -100px;
}

#hint, #hint2, #hint3 {
  padding: 8px 12px;
  background: #000;
  color: #FFF;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  top: -50px;
  left: -50px;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#hint:before, #hint2:before, #hint3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  display: block;
  background: #000;
  width: 8px;
  height: 8px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#hint.show, #hint2.show, #hint3.show {
  opacity: 1;
}

#hint_quest_wrap {
  top: 8px;
  left: 8px;
}
#hint_quest_wrap.show .line1 {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#hint_quest_wrap.show .line1 span {
  width: 16px;
}
#hint_quest_wrap.show .line2 {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#hint_quest_wrap.show .line2 span {
  width: 16px;
}
#hint_quest_wrap.show #quest_btn {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#quest_btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  z-index: 1;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -134px -170px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#quest_btn .line1, #quest_btn .line2 {
  width: 16px;
  height: 4px;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -2px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#quest_btn span {
  display: block;
  width: 16px;
  height: 4px;
  background: #ffba17;
  border-radius: 4px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#quest_btn .line1 {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#quest_btn .line1 span {
  width: 4px;
}
#quest_btn .line2 {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
#quest_btn .line2 span {
  width: 8px;
}
#quest_btn:hover span {
  background: #FFF;
}

#hint_quest {
  width: 215px;
  padding: 0;
  top: 26px;
  left: 26px;
  padding: 12px 10px;
  background: RGBA(0, 0, 0, 0.5);
  border: #999 2px solid;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #000;
  color: #FFF;
  font-size: 14px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}
#hint_quest ul {
  list-style: none;
  width: 190px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#hint_quest li {
  margin-bottom: 7px;
  opacity: 0;
  padding-left: 20px;
  -moz-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#hint_quest li:before {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  top: -1px;
  left: 0;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -180px -306px;
}
#hint_quest li.show {
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
#hint_quest li:last-child {
  margin: 0;
}
#hint_quest.show {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#wrapper_inner {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#wrapper {
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
#wrapper.show {
  opacity: 1;
}

#canvasSet {
  width: 100%;
  height: 100%;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  background: url("../img/stage_bg.jpg");
}
#canvasSet canvas {
  top: 0;
  left: 0;
  outline: none;
}
#canvasSet .npc_m {
  z-index: 5;
  cursor: pointer;
  width: 30px;
  height: 26px;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -160px -386px;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
#canvasSet .npc_m:hover {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

#canvasFG {
  z-index: 4;
}

#canvasArea {
  z-index: 3;
}

#canvasMG {
  z-index: 2;
}

#canvasBG {
  z-index: 1;
}

#messageWrap {
  width: 100%;
  height: 100%;
  display: none;
}

#messagePos {
  width: 390px;
  height: 115px;
  top: -300px;
  left: 0;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

#message {
  width: 390px;
  height: 115px;
  background: #f8efe2;
  border-radius: 6px;
  border: #000 2px solid;
  box-shadow: 0 0 0 3px #FFF inset;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#message .pic {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 130px;
  height: 130px;
  background: url(../img/char_pic.png) no-repeat;
}
#message .txtWrap {
  top: 0;
  left: 130px;
}
#message h4 {
  margin-top: 10px;
  margin-bottom: 5px;
  color: #b73f27;
}
#message p {
  line-height: 1.2;
  padding-right: 25px;
}
#message .waitClick {
  right: 7px;
  bottom: 7px;
  width: 14px;
  height: 18px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -152px -136px;
  -webkit-animation: clickPop 1s ease-in-out infinite;
  -moz-animation: clickPop 1s ease-in-out infinite;
  animation: clickPop 1s ease-in-out infinite;
}
#message button {
  width: 54px;
  height: 30px;
  font-size: 14px;
  margin-right: 5px;
  margin-top: 8px;
}
#message .arrow {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  background: #f8efe2;
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
  border-bottom: #000 solid 2px;
  border-right: #000 solid 2px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#message .arrow:before {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-bottom: #FFF solid 3px;
  border-right: #FFF solid 3px;
}
#message .messageOption {
  list-style: none;
}
#message .messageOption a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  background: #FFAA00;
  color: #FFF;
  padding: 4px 10px;
  margin-top: 2px;
  border-radius: 99px;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
#message .messageOption a:hover {
  background: #FF8415;
}

@-webkit-keyframes clickPop {
  0% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes clickPop {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}
#popWrap {
  top: 20px;
  right: 20px;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.popUp {
  position: relative;
  width: 60px;
  height: 84px;
  background: url(../img/monster_pic.png), #f8efe2;
  background-size: 300%;
  cursor: pointer;
  border: 2px #fff solid;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 5px;
  top: -20px;
  opacity: 0;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.popUp.show {
  top: 0;
  opacity: 1;
}
.popUp:hover {
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.popUp span {
  display: block;
  text-align: center;
  padding: 5px;
  width: 100%;
  color: #000;
  font-size: 14px;
  background: #ffba17;
  position: absolute;
  bottom: 0;
  left: 0;
}

#charMenuWrap, #settingMenuWrap, #loadMenuWrap, #fullScreenMessage, #tradeMenuWrap, #creditWrap {
  width: 100%;
  height: 100%;
  background: RGBA(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  -moz-transition: opacity 0.5s, visibility 0s 0.5s;
  -o-transition: opacity 0.5s, visibility 0s 0.5s;
  -webkit-transition: opacity 0.5s, visibility 0s;
  -webkit-transition-delay: 0s, 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
#charMenuWrap.show, #settingMenuWrap.show, #loadMenuWrap.show, #fullScreenMessage.show, #tradeMenuWrap.show, #creditWrap.show {
  opacity: 1;
  visibility: visible;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#charMenuWrap.show #charMenu, #charMenuWrap.show #buySellPanel.show, #charMenuWrap.show #tradeWaste.show, #settingMenuWrap.show #charMenu, #settingMenuWrap.show #buySellPanel.show, #settingMenuWrap.show #tradeWaste.show, #loadMenuWrap.show #charMenu, #loadMenuWrap.show #buySellPanel.show, #loadMenuWrap.show #tradeWaste.show, #fullScreenMessage.show #charMenu, #fullScreenMessage.show #buySellPanel.show, #fullScreenMessage.show #tradeWaste.show, #tradeMenuWrap.show #charMenu, #tradeMenuWrap.show #buySellPanel.show, #tradeMenuWrap.show #tradeWaste.show, #creditWrap.show #charMenu, #creditWrap.show #buySellPanel.show, #creditWrap.show #tradeWaste.show {
  bottom: 0;
}

#settingMenu {
  width: 320px;
  height: 193px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-top: 35px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
}
#settingMenu .headerPanel {
  width: 160px;
  margin-top: -55px;
  margin-left: -80px;
  left: 50%;
}
#settingMenu button {
  width: 260px;
  margin-top: 10px;
}
#settingMenu button.disable {
  background: linear-gradient(#666666, #444444);
}

#loadMenu {
  width: 310px;
  height: 182px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-top: 20px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
}
#loadMenu .loadBtnWrap {
  position: relative;
  margin-top: 10px;
  margin-left: 25px;
}
#loadMenu .btn {
  display: block;
  padding: 6px 0;
  color: #fff;
  cursor: pointer;
  height: 34px;
  width: 237px;
  background: linear-gradient(#ffaa00, #ff8415);
  border-radius: 99px;
  border: #CEDBDB 2px solid;
  box-shadow: 0 0 0 2px #000, 0 0 0 1px #222 inset;
}
#loadMenu .btn:hover, #loadMenu .btn:focus {
  outline: 0;
  border: #20E0BB 2px solid;
  background: linear-gradient(#ffaa00, #ff6b15);
}
#loadMenu .deleteWrap {
  position: absolute;
  right: 16px;
  top: 5px;
  width: 24px;
  height: 24px;
  padding: 2px;
  background: #D8C5AB;
  border-radius: 50%;
}
#loadMenu .deleteWrap.show {
  background: #333;
}
#loadMenu .deleteWrap.show .delete {
  display: block;
}
#loadMenu .delete {
  display: none;
  width: 20px;
  height: 20px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -160px -306px;
}
#loadMenu .delete:hover {
  background-position: -160px -326px;
}

#operatePanelSetting {
  bottom: 20px;
  right: 20px;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
#operatePanelSetting a {
  width: 72px;
  height: 72px;
  display: block;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -762px 0;
}
#operatePanelSetting a:hover {
  background-position: -762px -72px;
}
#operatePanelSetting a.deactive {
  background-position: -762px -144px;
}

#messageBox, #obtainBox, #newMonster {
  display: none;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-top: 28px;
  font-size: 22px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
}
#messageBox.show, #obtainBox.show, #newMonster.show {
  display: block;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#messageBox {
  width: 200px;
  height: 80px;
}

#obtainBox {
  width: 290px;
  height: 241px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 1s 0.2s;
  -o-transition: -o-transform 1s 0.2s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transition-delay: 0.2s;
  transition: transform 1s 0.2s;
}
#obtainBox .headerPanel {
  top: -21px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
}
#obtainBox .exp, #obtainBox .money {
  border-radius: 99px;
  background: #FFF;
  top: 40px;
}
#obtainBox .exp span, #obtainBox .money span {
  display: block;
  position: relative;
  width: 80px;
  margin: 5px 5px 5px 35px;
}
#obtainBox .exp span:before, #obtainBox .money span:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: -24px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
}
#obtainBox .exp {
  left: 20px;
}
#obtainBox .exp span:before {
  background-position: -156px -276px;
}
#obtainBox .money {
  left: 150px;
}
#obtainBox .money span:before {
  background-position: -176px -276px;
}
#obtainBox .items {
  position: absolute;
  top: 83px;
  left: 20px;
  width: 250px;
  height: 90px;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  background: #d8c5ab;
}
#obtainBox .item {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
  margin-right: 10px;
  background-color: #f8efe2;
  border-radius: 6px;
  border: #666 3px solid;
  background-image: url("../img/equipment_thumb.png");
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #000;
}
#obtainBox .item:last-child {
  margin-right: 0;
}

#closeObtainBox {
  position: absolute;
  top: 187px;
  left: 90px;
  width: 100px;
}

#lvl_up, #victory {
  opacity: 0;
  background: url("../img/lvl_up_middle.png") no-repeat;
  width: 296px;
  height: 188px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 1s 0.2s;
  -o-transition: -o-transform 1s 0.2s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transition-delay: 0.2s;
  transition: transform 1s 0.2s;
}
#lvl_up .top, #victory .top {
  position: absolute;
  display: block;
  top: 34px;
  left: 69px;
  opacity: 0;
  -moz-transition: all 0.5s 0.5s;
  -o-transition: all 0.5s 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-transition-delay: 0.5s;
  transition: all 0.5s 0.5s;
}
#lvl_up .label, #victory .label {
  position: absolute;
  display: block;
  top: 50px;
  left: 26px;
}
#lvl_up .info, #victory .info {
  background: url("../img/lvl_up_bottom.png") no-repeat;
  width: 74px;
  height: 74px;
  text-align: center;
  font-size: 23px;
  padding-top: 25px;
  font-weight: 700;
  color: #FFF;
  top: 130px;
  left: 105px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.5s 0.8s;
  -o-transition: -o-transform 0.5s 0.8s;
  -webkit-transition: -webkit-transform 0.5s;
  -webkit-transition-delay: 0.8s;
  transition: transform 0.5s 0.8s;
}
#lvl_up.show, #victory.show {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#lvl_up.show .top, #victory.show .top {
  top: -42px;
  opacity: 1;
}
#lvl_up.show .info, #victory.show .info {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#newMonster {
  width: 440px;
  height: 232px;
}
#newMonster .headerPanel {
  top: -21px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
}
#newMonster h4 {
  margin-bottom: 5px;
  font-weight: normal;
  font-family: "exo_medium", sans-serif;
  font-size: 18px;
  text-align: left;
}
#newMonster p {
  font-size: 16px;
  font-family: "MavenProRegular", sans-serif;
  line-height: 1.2em;
  color: #555;
  text-align: left;
}

#wrapper #newMonster .m-list {
  margin: 14px 26px;
}

#credit {
  width: 400px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-top: 28px;
  font-size: 22px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
}
#credit .headerPanel {
  width: 160px;
  margin-top: -49px;
  margin-left: -80px;
  left: 50%;
}
#credit #credit-wrap {
  width: 360px;
  height: 264px;
  margin-left: 22px;
  overflow: hidden;
}
#credit #credit-inner:focus {
  outline: none;
}
#credit .content {
  width: 336px;
  padding-bottom: 20px;
  text-transform: uppercase;
}
#credit h2 {
  font-size: 18px;
  margin: 25px 0 10px 0;
}
#credit p {
  font-size: 14px;
  margin-bottom: 8px;
}
#credit img {
  display: block;
  margin: 26px auto;
}

#wrapper #credit .nano-pane {
  margin-bottom: 20px;
}

#loadingWrap {
  width: 100%;
  height: 100%;
  display: none;
}
#loadingWrap.show {
  display: block;
}
#loadingWrap .leftPanel, #loadingWrap .rightPanel {
  width: 100%;
  height: 100%;
  -moz-transition: -moz-transform 0.8s ease-in;
  -o-transition: -o-transform 0.8s ease-in;
  -webkit-transition: -webkit-transform 0.8s ease-in;
  transition: transform 0.8s ease-in;
}
#loadingWrap .leftPanel .load_img, #loadingWrap .rightPanel .load_img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  z-index: 1;
}
#loadingWrap .leftPanel .load_bg, #loadingWrap .rightPanel .load_bg {
  background: url(../img/bg_pattern.jpg);
  height: 100%;
  z-index: 0;
}
#loadingWrap .leftPanel {
  left: 0;
  -moz-transform: translateX(-80%);
  -ms-transform: translateX(-80%);
  -webkit-transform: translateX(-80%);
  transform: translateX(-80%);
}
#loadingWrap .leftPanel .load_img {
  background-image: url(../img/loading_l.png);
}
#loadingWrap .leftPanel .load_bg {
  left: 0;
}
#loadingWrap .leftPanel.close {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#loadingWrap .rightPanel {
  right: 0;
  -moz-transform: translateX(80%);
  -ms-transform: translateX(80%);
  -webkit-transform: translateX(80%);
  transform: translateX(80%);
}
#loadingWrap .rightPanel .load_img {
  background-image: url(../img/loading_r.png);
}
#loadingWrap .rightPanel .load_bg {
  right: 0;
}
#loadingWrap .rightPanel.close {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#worldMapWrap {
  width: 100%;
  height: 100%;
  background: #63564C;
}
#worldMapWrap.hide {
  display: none;
}

#worldMap {
  left: 50%;
  margin-left: -600px;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  width: 1200px;
  height: 768px;
  background: url(../img/world_map.png) no-repeat;
}
#worldMap .pin {
  width: 30px;
  height: 20px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -160px -346px;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#worldMap .pin.new {
  -webkit-animation: pinBounce 1s infinite;
  animation: pinBounce 1s infinite;
}
#worldMap .pin:hover {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#worldMap .pin.hide {
  background-position: -160px -366px;
}

@-webkit-keyframes pinBounce {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pinBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
#landingWrap {
  width: 100%;
  height: 100%;
  background: url("../img/bg_pattern.jpg");
}
#landingWrap .bgImg {
  width: 100%;
  height: 100%;
  background: url("../img/landing_bg.png") no-repeat center center;
  background-size: contain;
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#landingWrap .landingChar {
  left: 50%;
  margin-left: -50px;
  bottom: 9%;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100px;
  height: 185px;
  background: url("../img/landing_char.png") no-repeat;
  background-size: 600px 185px;
}
#landingWrap .innearWrap {
  left: 50%;
  height: 100%;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
#landingWrap.show .bgImg {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#landingWrap.show #landingLogo {
  top: 50px;
}
#landingWrap.show #startBtn {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#landingWrap.show #demoBtn, #landingWrap.show #creditBtn {
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
#landingWrap.show .landingChar {
  -webkit-animation: landingCharAnimate 1s steps(6) infinite;
  animation: landingCharAnimate 1s steps(6) infinite;
}

@-webkit-keyframes landingCharAnimate {
  100% {
    background-position: -600px;
  }
}
@keyframes landingCharAnimate {
  100% {
    background-position: -600px;
  }
}
.landingBtn {
  position: absolute;
  display: block;
  width: 190px;
  height: 80px;
  text-decoration: none;
  margin-left: -95px;
  background: url("../img/landing_btn_bg.png") repeat-x;
}
.landingBtn:before {
  content: "";
  display: block;
  position: absolute;
  width: 53px;
  height: 80px;
  margin-left: -33px;
  left: 0;
  top: 0;
  background: url("../img/landing_btn_corner.png") no-repeat top left;
}
.landingBtn:after {
  content: "";
  display: block;
  position: absolute;
  width: 53px;
  height: 80px;
  margin-right: -33px;
  right: 0;
  top: 0;
  background: url("../img/landing_btn_corner.png") no-repeat top right;
}
.landingBtn span {
  display: block;
  padding-top: 23px;
  text-align: center;
  font-size: 35px;
  text-transform: uppercase;
  color: #AAA;
}
.landingBtn:hover span {
  color: #FFF;
}

#startBtn {
  top: 320px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.8s ease 1s;
  -o-transition: -o-transform 0.8s ease 1s;
  -webkit-transition: -webkit-transform 0.8s ease;
  -webkit-transition-delay: 1s;
  transition: transform 0.8s ease 1s;
}

#demoBtn {
  top: 387px;
  width: 260px;
  margin-left: -130px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.8s ease 1.3s;
  -o-transition: -o-transform 0.8s ease 1.3s;
  -webkit-transition: -webkit-transform 0.8s ease;
  -webkit-transition-delay: 1.3s;
  transition: transform 0.8s ease 1.3s;
}

#creditBtn {
  top: 439px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.8s ease 1.6s;
  -o-transition: -o-transform 0.8s ease 1.6s;
  -webkit-transition: -webkit-transform 0.8s ease;
  -webkit-transition-delay: 1.6s;
  transition: transform 0.8s ease 1.6s;
}

#landingLogo {
  display: block;
  position: absolute;
  margin-left: -240px;
  top: -310px;
  -moz-transition: top 1.2s ease 0.5s;
  -o-transition: top 1.2s ease 0.5s;
  -webkit-transition: top 1.2s ease;
  -webkit-transition-delay: 0.5s;
  transition: top 1.2s ease 0.5s;
}

#demoVideoWrap {
  width: 100%;
  height: 100%;
  display: none;
}
#demoVideoWrap.show {
  display: block;
}
#demoVideoWrap .closeDemo {
  top: 20px;
  left: 20px;
  position: absolute;
  display: block;
  line-height: 20px;
  padding: 10px 20px 10px 45px;
  border-radius: 99px;
  background: #888;
  color: #EEE;
}
#demoVideoWrap .closeDemo:hover {
  background: #fff;
  color: #333;
}
#demoVideoWrap .closeImg {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -80px -386px;
}
#demoVideoWrap iframe, #demoVideoWrap object, #demoVideoWrap embed {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#videoWrap {
  width: 100%;
  height: 100%;
  background: #000;
}
#videoWrap video {
  position: absolute;
  left: 50%;
  margin-left: -512px;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

#skipVideo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 80px;
  z-index: 2;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

#gameoverWrap {
  width: 100%;
  height: 100%;
  background: url("../img/bg_pattern.jpg");
  opacity: 0;
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#gameoverWrap .bgImg {
  width: 100%;
  height: 100%;
  background: url("../img/gameover_bg.png") center center no-repeat;
  background-size: contain;
}
#gameoverWrap.show {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#gameoverWrap.show #gameoverLogo {
  top: 210px;
}
#gameoverWrap.show #restartBtn {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#restartBtn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 160px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.8s ease 1.2s;
  -o-transition: -o-transform 0.8s ease 1.2s;
  -webkit-transition: -webkit-transform 0.8s ease;
  -webkit-transition-delay: 1.2s;
  transition: transform 0.8s ease 1.2s;
}

#gameoverLogo {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -426px;
  top: -310px;
  -moz-transition: top 1s ease 0.8s;
  -o-transition: top 1s ease 0.8s;
  -webkit-transition: top 1s ease;
  -webkit-transition-delay: 0.8s;
  transition: top 1s ease 0.8s;
}

#continueWrap {
  width: 100%;
  height: 100%;
  background: url("../img/bg_pattern.jpg");
  opacity: 0;
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#continueWrap.show {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#continueWrap.show #continueLogo {
  opacity: 1;
}
#continueWrap.show #returnBtn {
  opacity: 1;
}

#returnBtn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 160px;
  opacity: 0;
  -moz-transition: opacity 0.8s ease 1.2s;
  -o-transition: opacity 0.8s ease 1.2s;
  -webkit-transition: opacity 0.8s ease;
  -webkit-transition-delay: 1.2s;
  transition: opacity 0.8s ease 1.2s;
}

#continueLogo {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -339px;
  top: 50%;
  margin-top: -70px;
  opacity: 0;
  -moz-transition: opacity 1s ease 0.8s;
  -o-transition: opacity 1s ease 0.8s;
  -webkit-transition: opacity 1s ease;
  -webkit-transition-delay: 0.8s;
  transition: opacity 1s ease 0.8s;
}

#hint_target {
  width: 50px;
  height: 64px;
  display: none;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#hint_target.show {
  display: block;
}
#hint_target .rotate_axis {
  width: 100%;
  height: 100%;
  -moz-transform-origin: 57% 66%;
  -ms-transform-origin: 57% 66%;
  -webkit-transform-origin: 57% 66%;
  transform-origin: 57% 66%;
}
#hint_target.rotate .rotate_axis {
  -moz-transform: rotate(180deg) translateY(-100px);
  -ms-transform: rotate(180deg) translateY(-100px);
  -webkit-transform: rotate(180deg) translateY(-100px);
  transform: rotate(180deg) translateY(-100px);
}
#hint_target img {
  position: absolute;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: target_bounce 3s infinite;
  animation: target_bounce 3s infinite;
}

@-webkit-keyframes target_bounce {
  0% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes target_bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes pop_bounce {
  0% {
    -webkit-transform: scale(0.95);
  }
  30% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
  }
}
@keyframes pop_bounce {
  0% {
    transform: scale(0.95);
  }
  30% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
#charPanel.show {
  bottom: 20px;
}

#charPanel {
  width: 140px;
  height: 140px;
  bottom: -20%;
  left: 50%;
  margin-left: -70px;
  border-radius: 50%;
  background: #000;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

#charImg {
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 3px #FFF solid;
  background: url("../img/char_pic.png"), #DDD;
  background-size: 500%;
  background-repeat: no-repeat;
  z-index: 3;
}

#charLvl {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #FFBD52;
  border: 3px #000 solid;
  text-align: center;
  left: 53px;
  bottom: -5px;
  padding-top: 7px;
  font-size: 13px;
  z-index: 4;
}

#charExp {
  width: 132px;
  height: 132px;
  margin-left: -66px;
  margin-top: -66px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: url("../img/exp-bg.jpg") no-repeat;
  border: 2px #FFF solid;
  z-index: 2;
}
#charExp span {
  position: absolute;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
#charExp .left {
  left: 0;
}
#charExp .right {
  left: 50%;
}
#charExp .anim {
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#charExp .anim .bg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("../img/exp-fill.jpg") no-repeat;
  border-radius: 999px;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
#charExp .left .anim {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
#charExp .left .bg {
  background-position: right;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
#charExp .right .anim {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  left: -100%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
#charExp .right .bg {
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

#charState {
  width: 140px;
  z-index: 1;
}
#charState .bar {
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
}
#charState .fullBar {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#charHP {
  left: 20px;
  top: 27px;
  width: 44px;
  height: 86px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#charHP .fullBar {
  background: url("../img/charPanel-life-bg.png") no-repeat;
}
#charHP .bar {
  background: url("../img/charPanel-life-full.png") no-repeat bottom;
}

#charHP:before, #charSP:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
}

#charHP:before {
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -156px -254px;
  top: 76px;
}

#charSP:before {
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -176px -254px;
  top: 76px;
  right: 0;
}

#charSP {
  right: 20px;
  top: 27px;
  width: 44px;
  height: 86px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#charSP .fullBar {
  background: url("../img/charPanel-mana-bg.png") no-repeat;
}
#charSP .bar {
  background: url("../img/charPanel-mana-full.png") no-repeat bottom;
}

#charHP.show {
  left: -19px;
}

#charSP.show {
  right: -19px;
}

#operatePanel {
  z-index: 0;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  width: 72px;
  height: 72px;
}

#operatePanel ul {
  padding: 0;
  position: absolute;
}
#operatePanel li {
  list-style: none;
  position: absolute;
  width: 60px;
  bottom: 0;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#operatePanel a {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition: top 1s, -moz-transform 1s, opacity 1s;
  -o-transition: top 1s, -o-transform 1s, opacity 1s;
  -webkit-transition: top 1s, -webkit-transform 1s, opacity 1s;
  transition: top 1s, transform 1s, opacity 1s;
}
#operatePanel a span {
  display: block;
  position: absolute;
  color: #FFF;
  background: #666;
  border: 2px solid #000;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  font-size: 12px;
  padding-top: 4px;
  top: 50px;
  left: 19px;
  text-align: center;
}

#operatePanelMain {
  top: 50%;
  margin-left: 5px;
  z-index: 2;
}
#operatePanelMain li {
  height: 146px;
}
#operatePanelMain a {
  top: 117px;
}

#operatePanelSkill {
  display: none;
  top: -80px;
  z-index: 1;
}
#operatePanelSkill a {
  opacity: 0;
}

#conActionBtn {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

#conCharBtn {
  -moz-transform: rotate(34deg);
  -ms-transform: rotate(34deg);
  -webkit-transform: rotate(34deg);
  transform: rotate(34deg);
}

#conDefBtn {
  -moz-transform: rotate(-34deg);
  -ms-transform: rotate(-34deg);
  -webkit-transform: rotate(-34deg);
  transform: rotate(-34deg);
}

#conMoveBtn {
  -moz-transform: rotate(-83deg);
  -ms-transform: rotate(-83deg);
  -webkit-transform: rotate(-83deg);
  transform: rotate(-83deg);
  height: 157px;
}
#conMoveBtn a {
  top: 131px;
}

#conAtkBtn {
  -moz-transform: rotate(-51deg);
  -ms-transform: rotate(-51deg);
  -webkit-transform: rotate(-51deg);
  transform: rotate(-51deg);
  height: 117px;
}
#conAtkBtn a {
  top: 87px;
}

#conSkill_1 {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  height: 104px;
}
#conSkill_1 a {
  top: 70px;
}

#conSkill_3 {
  -moz-transform: rotate(51deg);
  -ms-transform: rotate(51deg);
  -webkit-transform: rotate(51deg);
  transform: rotate(51deg);
  height: 117px;
}
#conSkill_3 a {
  top: 87px;
}

#conSkill_4 {
  -moz-transform: rotate(83deg);
  -ms-transform: rotate(83deg);
  -webkit-transform: rotate(83deg);
  transform: rotate(83deg);
  height: 157px;
}
#conSkill_4 a {
  top: 131px;
}

#conMoveBtn a {
  background-position: -462px 0;
}
#conMoveBtn a:hover, #conMoveBtn a.active {
  background-position: -462px -60px;
}
#conMoveBtn a.deactive {
  background-position: -462px -120px;
}

#conAtkBtn a {
  background-position: -522px 0;
}
#conAtkBtn a:hover, #conAtkBtn a.active {
  background-position: -522px -60px;
}
#conAtkBtn a.deactive {
  background-position: -522px -120px;
}

#conActionBtn a {
  background-position: -582px 0;
}
#conActionBtn a:hover, #conActionBtn a.active {
  background-position: -582px -60px;
}
#conActionBtn a.deactive {
  background-position: -582px -120px;
}

#conCharBtn a {
  background-position: -642px 0;
}
#conCharBtn a:hover, #conCharBtn a.active {
  background-position: -642px -60px;
}
#conCharBtn a.deactive {
  background-position: -642px -120px;
}

#conDefBtn a {
  background-position: -702px 0;
}
#conDefBtn a:hover, #conDefBtn a.active {
  background-position: -702px -60px;
}
#conDefBtn a.deactive {
  background-position: -702px -120px;
}

#conSkill_1 a {
  background-position: -462px -240px;
}
#conSkill_1 a:hover, #conSkill_1 a.active {
  background-position: -462px -300px;
}
#conSkill_1 a.deactive {
  background-position: -462px -360px;
}
#conSkill_1 a.deactive {
  background-position: -462px -360px;
}

#conSkill_2 a {
  background-position: -522px -240px;
}
#conSkill_2 a:hover, #conSkill_2 a.active {
  background-position: -522px -300px;
}
#conSkill_2 a.deactive {
  background-position: -522px -360px;
}
#conSkill_2 a.deactive {
  background-position: -522px -360px;
}

#conSkill_3 a {
  background-position: -582px -240px;
}
#conSkill_3 a:hover, #conSkill_3 a.active {
  background-position: -582px -300px;
}
#conSkill_3 a.deactive {
  background-position: -582px -360px;
}
#conSkill_3 a.deactive {
  background-position: -582px -360px;
}

#conSkill_4 a {
  background-position: -642px -240px;
}
#conSkill_4 a:hover, #conSkill_4 a.active {
  background-position: -642px -300px;
}
#conSkill_4 a.deactive {
  background-position: -642px -360px;
}
#conSkill_4 a.deactive {
  background-position: -642px -360px;
}

#conActionBtn a.atk {
  background-position: -522px -180px;
}
#conActionBtn a.move {
  background-position: -462px -180px;
}
#conActionBtn a.skill_1 {
  background-position: -462px -420px;
}
#conActionBtn a.skill_3 {
  background-position: -582px -420px;
}
#conActionBtn a.skill_4 {
  background-position: -642px -420px;
}

#operatePanelMain.show a {
  top: 0;
}
#operatePanelMain.show #conSkillBtn a {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#operatePanelMain.show #conCharBtn a {
  -moz-transform: rotate(-34deg);
  -ms-transform: rotate(-34deg);
  -webkit-transform: rotate(-34deg);
  transform: rotate(-34deg);
}
#operatePanelMain.show #conDefBtn a {
  -moz-transform: rotate(34deg);
  -ms-transform: rotate(34deg);
  -webkit-transform: rotate(34deg);
  transform: rotate(34deg);
}

#operatePanelSkill.show a {
  top: 0;
  opacity: 1;
}
#operatePanelSkill.show #conMoveBtn a {
  -moz-transform: rotate(83deg);
  -ms-transform: rotate(83deg);
  -webkit-transform: rotate(83deg);
  transform: rotate(83deg);
}
#operatePanelSkill.show #conAtkBtn a {
  -moz-transform: rotate(51deg);
  -ms-transform: rotate(51deg);
  -webkit-transform: rotate(51deg);
  transform: rotate(51deg);
}
#operatePanelSkill.show #conSkill_1 a {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#operatePanelSkill.show #conSkill_3 a {
  -moz-transform: rotate(-51deg);
  -ms-transform: rotate(-51deg);
  -webkit-transform: rotate(-51deg);
  transform: rotate(-51deg);
}
#operatePanelSkill.show #conSkill_4 a {
  -moz-transform: rotate(-83deg);
  -ms-transform: rotate(-83deg);
  -webkit-transform: rotate(-83deg);
  transform: rotate(-83deg);
}

#currentAction {
  position: absolute;
  top: -105px;
  left: 50%;
  font-size: 14px;
  white-space: nowrap;
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -webkit-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  padding: 5px 10px;
  border-radius: 99px;
  background: #000;
  color: #FFF;
}
#currentAction.show {
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -webkit-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
}

#charMenu {
  width: 900px;
  height: 680px;
  background: url("../img/charMenu-border-top.png") top repeat-x, url("../img/charMenu-border-top.png") bottom repeat-x, url("../img/charMenu-border-left.png") left repeat-y, url("../img/charMenu-border-left.png") right repeat-y, url("../img/charMenu-border-left.png") 392px 0 repeat-y;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 200%;
  right: 0;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
#charMenu .contentWrap {
  left: 50%;
}
#charMenu .statusBg {
  width: 212px;
  height: 28px;
  background: url(../img/charMenu-status-bg.png) no-repeat;
  margin-left: -106px;
  padding: 5px;
}
#charMenu .statusBg .fullBar {
  display: block;
  height: 18px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}
#charMenu .statusBg .bar {
  display: block;
  height: 18px;
  width: 38%;
}
#charMenu .statusBg .info {
  display: block;
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #FFF;
}
#charMenu .l-panel {
  width: 380px;
  height: 656px;
  margin: 12px 0 0 12px;
  background: #efe1cb;
}
#charMenu .l-panel .headerPanel {
  width: 150px;
  margin-top: -31px;
  margin-left: -75px;
}
#charMenu .r-panel {
  width: 484px;
  height: 656px;
  margin-top: 12px;
  left: 404px;
  background: #474c4c;
}
#charMenu .r-panel h4 {
  margin-bottom: 5px;
  font-weight: normal;
  font-family: "exo_medium", sans-serif;
  font-size: 18px;
}
#charMenu .r-panel p {
  font-size: 16px;
  font-family: "MavenProRegular", sans-serif;
  line-height: 1.2em;
  color: #555;
}
#charMenu .r-panel .t-l-corner, #charMenu .r-panel .t-r-corner, #charMenu .r-panel .b-l-corner, #charMenu .r-panel .b-r-corner {
  width: 22px;
  height: 22px;
  background: url(../img/charMenu-inner-border-corner.png) no-repeat;
}
#charMenu .r-panel .t-l-corner {
  margin-left: -2px;
  margin-top: -2px;
}
#charMenu .r-panel .t-r-corner {
  top: 0;
  right: 0;
  margin-right: -2px;
  margin-top: -2px;
}
#charMenu .r-panel .b-l-corner {
  margin-left: -2px;
  margin-bottom: -2px;
}
#charMenu .r-panel .b-r-corner {
  margin-right: -2px;
  margin-bottom: -2px;
}
#charMenu .r-panel .innerHeader {
  height: 43px;
  width: 120px;
  margin-right: auto;
  margin-left: auto;
  margin-top: -12px;
  position: relative;
  background: url("../img/charMenu-inner-header-bg.png") repeat-x;
}
#charMenu .r-panel .innerHeader span {
  display: block;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  padding-top: 11px;
  text-transform: uppercase;
}
#charMenu .r-panel .innerHeader:before {
  content: "";
  display: block;
  position: absolute;
  width: 44px;
  height: 43px;
  margin-left: -44px;
  left: 0;
  top: 0;
  background: url("../img/charMenu-inner-header-corner.png") no-repeat left;
}
#charMenu .r-panel .innerHeader:after {
  content: "";
  display: block;
  position: absolute;
  width: 44px;
  height: 43px;
  margin-right: -44px;
  right: 0;
  top: 0;
  background: url("../img/charMenu-inner-header-corner.png") no-repeat right;
}

.closeBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  text-indent: -9999px;
  margin-right: -11px;
  margin-top: -11px;
}
.closeBtn a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/charMenu-closeBtn.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}
.closeBtn a:hover {
  background-position: -48px 0;
}

.t-l-corner, .t-r-corner, .b-l-corner, .b-r-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  background: url("../img/charMenu-border-corner.png") no-repeat;
}

.t-l-corner {
  top: 0;
  left: 0;
  margin-left: -11px;
  margin-top: -11px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.t-r-corner {
  top: 0;
  right: 0;
  margin-right: -11px;
  margin-top: -11px;
}

.b-l-corner {
  bottom: 0;
  left: 0;
  margin-left: -11px;
  margin-bottom: -11px;
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.b-r-corner {
  bottom: 0;
  right: 0;
  margin-right: -11px;
  margin-bottom: -11px;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.headerPanel {
  height: 50px;
  background: url("../img/charMenu-header-bg.png") repeat-x;
}
.headerPanel:before {
  content: "";
  width: 33px;
  height: 50px;
  margin-left: -33px;
  left: 0;
  top: 0;
  background: url("../img/charMenu-header-corner.png") no-repeat top left;
}
.headerPanel:after {
  content: "";
  width: 33px;
  height: 50px;
  margin-right: -33px;
  right: 0;
  top: 0;
  background: url("../img/charMenu-header-corner.png") no-repeat top right;
}
.headerPanel .text {
  display: block;
  padding-top: 13px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
}

#menuCharLvl {
  width: 120px;
  height: 30px;
  margin-top: 28px;
  margin-left: -60px;
  text-align: center;
  font-size: 20px;
}

#menuCharExp {
  margin-top: 60px;
}
#menuCharExp .bar {
  background: url(../img/charMenu-status-exp.png) repeat-x;
}

#charPic {
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: 100px;
}

#sectionWrap {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 218px;
  margin-left: -109px;
  margin-top: 255px;
}
#sectionWrap li {
  list-style: none;
  padding: 0;
  float: left;
  margin-right: 10px;
}
#sectionWrap li a {
  display: block;
  text-indent: -9999px;
  width: 66px;
  height: 68px;
  background: #fff;
  background: url(../img/charMenu-ui-set.png);
}
#sectionWrap li:last-child {
  margin-right: 0;
}
#sectionWrap #menuCalSkillBtn {
  background-position: 0px 0;
}
#sectionWrap #menuCalSkillBtn:hover, #sectionWrap #menuCalSkillBtn.active {
  background-position: 0px -68px;
}
#sectionWrap #menuCalItemBtn {
  background-position: -66px 0;
}
#sectionWrap #menuCalItemBtn:hover, #sectionWrap #menuCalItemBtn.active {
  background-position: -66px -68px;
}
#sectionWrap #menuCalMonsterBtn {
  background-position: -132px 0;
}
#sectionWrap #menuCalMonsterBtn:hover, #sectionWrap #menuCalMonsterBtn.active {
  background-position: -132px -68px;
}

#menuCharHp {
  margin-top: 342px;
}
#menuCharHp .bar {
  background: url(../img/charMenu-status-hp.png) repeat-x;
}
#menuCharHp:before {
  content: "";
  position: absolute;
  margin-left: -40px;
  margin-top: -5px;
  width: 28px;
  height: 28px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -100px -254px;
}

#menuCharSP {
  margin-top: 382px;
}
#menuCharSP .bar {
  background: url(../img/charMenu-status-eng.png) repeat-x;
}
#menuCharSP:before {
  content: "";
  position: absolute;
  margin-left: -40px;
  margin-top: -5px;
  width: 28px;
  height: 28px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -128px -254px;
}

#a-status {
  position: absolute;
  margin: 0;
  padding: 4px 0 10px 0;
  width: 340px;
  margin-left: -170px;
  margin-top: 424px;
  background: #d8c5ab;
  border-radius: 8px;
}
#a-status li {
  list-style: none;
  display: block;
  padding: 7px 0 7px 60px;
  float: left;
}
#a-status li span {
  display: block;
  width: 100px;
  padding: 7px;
  background: #f8efe2;
  border-radius: 999px;
  text-align: center;
  border: 1px solid #D8C5AB;
  margin-top: 4px;
}
#a-status li:before {
  content: "";
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -45px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
}
#a-status li#a-info-Atk:before {
  background-position: 0px -306px;
}
#a-status li#a-info-Def:before {
  background-position: -40px -306px;
}
#a-status li#a-info-Etk:before {
  background-position: -80px -306px;
}
#a-status li#a-info-Edef:before {
  background-position: -120px -306px;
}
#a-status li#a-info-Dodge:before {
  background-position: 0px -346px;
}
#a-status li#a-info-Critical:before {
  background-position: -40px -346px;
}
#a-status li#a-info-WalkDis:before {
  background-position: -80px -346px;
}
#a-status li#a-info-g-SP:before {
  background-position: -120px -346px;
}
#a-status li#a-info-g-HP:before {
  background-position: 0px -386px;
}

#menuCharMoneyWrap {
  top: 606px;
  left: -190px;
  width: 380px;
  height: 50px;
  background: #333;
  border-top: #000 solid 2px;
  padding-left: 50px;
}

#menuCharMoney {
  padding: 5px 0 5px 60px;
}
#menuCharMoney span {
  display: block;
  width: 170px;
  padding: 7px;
  background: #f8efe2;
  border-radius: 999px;
  text-align: center;
  margin-top: 4px;
}
#menuCharMoney:before {
  content: "";
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -45px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -40px -386px;
}

#s-a-panel, #i-e-panel, #m-panel {
  width: 100%;
  height: 100%;
  -moz-perspective: 1200px;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#s-panel, #a-panel, #i-e-frame, #m-frame {
  margin: 30px 20px 0px 20px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#s-panel, #a-panel {
  width: 444px;
  height: 288px;
}
#s-panel .point-info, #a-panel .point-info {
  background: url(../img/charMenu-ui-set.png) no-repeat;
}
#s-panel .point-info, #a-panel .point-info {
  width: 76px;
  height: 34px;
  margin-top: 17px;
  margin-left: 17px;
  color: #FFF;
  padding-left: 33px;
  padding-top: 9px;
}
#s-panel .reset-btn, #a-panel .reset-btn {
  display: block;
  position: absolute;
  width: 80px;
  right: 0;
  margin-top: 17px;
  margin-right: 17px;
}
#s-panel .btn-wrap, #a-panel .btn-wrap {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: #D8C5AB;
  margin-top: 60px;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  border-radius: 12px;
}
#s-panel .btn-wrap li, #a-panel .btn-wrap li {
  position: relative;
  float: left;
  margin-right: 25px;
}
#s-panel .btn-wrap li a, #a-panel .btn-wrap li a {
  display: block;
  padding: 0;
  width: 66px;
  height: 68px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
}
#s-panel .btn-wrap li a span, #a-panel .btn-wrap li a span {
  position: absolute;
  display: block;
  background: #f8efe2;
  font-size: 14px;
  color: #000;
  padding: 5px 10px;
  right: 0;
  bottom: 0;
  margin-right: -15px;
  border-radius: 99px;
}
#s-panel .btn-wrap li:last-child, #a-panel .btn-wrap li:last-child {
  margin-right: 0;
}
#s-panel .btn-info, #a-panel .btn-info {
  height: 110px;
  width: 428px;
  background: #D8C5AB;
  padding: 25px 15px 15px 15px;
  bottom: 0;
  margin-left: 8px;
  margin-bottom: 8px;
}
#s-panel .btn-info ul, #a-panel .btn-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#s-panel .btn-info ul li, #a-panel .btn-info ul li {
  padding: 0;
  display: none;
}
#s-panel .btn-info .upgrade-btn, #a-panel .btn-info .upgrade-btn {
  position: absolute;
  display: block;
  width: 104px;
  left: 50%;
  margin-left: -52px;
  margin-top: -40px;
}

#s-panel {
  top: 318px;
}
#s-panel .point-info {
  background-position: -76px -136px;
}
#s-panel #s1-btn {
  background-position: -198px -204px;
}
#s-panel #s1-btn.deactive {
  background-position: -198px -340px;
}
#s-panel #s1-btn:hover, #s-panel #s1-btn.active {
  background-position: -198px -272px;
}
#s-panel #s2-btn {
  background-position: -264px -204px;
}
#s-panel #s2-btn.deactive {
  background-position: -264px -340px;
}
#s-panel #s2-btn:hover, #s-panel #s2-btn.active {
  background-position: -264px -272px;
}
#s-panel #s3-btn {
  background-position: -330px -204px;
}
#s-panel #s3-btn.deactive {
  background-position: -330px -340px;
}
#s-panel #s3-btn:hover, #s-panel #s3-btn.active {
  background-position: -330px -272px;
}
#s-panel #s4-btn {
  background-position: -396px -204px;
}
#s-panel #s4-btn.deactive {
  background-position: -396px -340px;
}
#s-panel #s4-btn:hover, #s-panel #s4-btn.active {
  background-position: -396px -272px;
}

#a-panel .point-info {
  background-position: 0 -136px;
}
#a-panel #a1-btn {
  background-position: -198px 0;
}
#a-panel #a1-btn:hover, #a-panel #a1-btn.active {
  background-position: -198px -68px;
}
#a-panel #a1-btn.deactive {
  background-position: -198px -136px;
}
#a-panel #a2-btn {
  background-position: -264px 0;
}
#a-panel #a2-btn:hover, #a-panel #a2-btn.active {
  background-position: -264px -68px;
}
#a-panel #a2-btn.deactive {
  background-position: -264px -136px;
}
#a-panel #a3-btn {
  background-position: -330px 0;
}
#a-panel #a3-btn:hover, #a-panel #a3-btn.active {
  background-position: -330px -68px;
}
#a-panel #a3-btn.deactive {
  background-position: -330px -136px;
}
#a-panel #a4-btn {
  background-position: -396px 0;
}
#a-panel #a4-btn:hover, #a-panel #a4-btn.active {
  background-position: -396px -68px;
}
#a-panel #a4-btn.deactive {
  background-position: -396px -136px;
}

#i-e-frame {
  width: 444px;
  height: 606px;
}
#i-e-frame .btnWrap button {
  position: relative;
  width: 70px;
  height: 70px;
  border: none;
  margin: 0 10px 10px 0;
  float: left;
  background-color: #444;
  border-radius: 6px;
  background-image: url("../img/equipment_thumb.png");
  background-repeat: no-repeat;
  background-position: 70px 70px;
  border: #666 3px solid;
  box-shadow: 0 0 0 2px #000, 0 0 0 2px #222 inset;
}
#i-e-frame .btnWrap button.hasItem {
  background-color: #f8efe2;
  box-shadow: 0 0 0 2px #000;
}
#i-e-frame .btnWrap button:focus {
  outline: none;
  border-color: #BBB;
}
#i-e-frame .btnWrap button.active {
  outline: none;
  border-color: #20E0BB;
}

#e-info, #i-info {
  padding: 15px;
  width: 100%;
  height: 100px;
}
#e-info span, #i-info span {
  font-family: "MavenProMedium", sans-serif;
}

#e-wrap {
  width: 428px;
  height: 225px;
  margin: 8px 8px 0 8px;
}
#e-wrap .btnWrap {
  width: 170px;
  padding: 10px 0 0 10px;
  left: 50%;
  margin-left: -85px;
  margin-top: 25px;
}

#e-info {
  margin-top: 120px;
  background: #e2cfb5;
}

#i-wrap {
  width: 428px;
  margin: 8px 8px 0 8px;
  margin-top: 228px;
  padding-top: 8px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top;
}
#i-wrap .btnWrap {
  margin-top: 115px;
  margin-left: 20px;
}

#i-info {
  padding-top: 18px;
  background: #D8C5AB;
}

#i-e-switch-btn {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 210px;
  left: 200px;
  background: url(../img/charMenu-ui-set.png) no-repeat;
  background-position: -135px -170px;
}
#i-e-switch-btn:hover {
  background-position: -135px -212px;
}

#i-equip, #i-unequip {
  position: absolute;
  display: none;
  width: 90px;
  top: 33px;
  right: 20px;
}
#i-equip.show, #i-unequip.show {
  display: block;
}

.unit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 12px;
  color: #000;
  background: #fff;
  padding: 2px 4px;
  border-radius: 99px;
}

#i-p-num, #s-p-num {
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 99px;
  background: #000;
  border: #666 2px solid;
  box-shadow: 0 0 0 2px #000, 0 0 0 2px #222 inset;
}
#i-p-num a, #s-p-num a {
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 3px;
  background: #444;
}
#i-p-num a:hover, #s-p-num a:hover {
  background: #666;
}
#i-p-num a.current, #s-p-num a.current {
  background: #FFAA00;
}

#i-p-num {
  margin-top: 355px;
}

#s-p-num {
  margin-top: 385px;
}

#m-frame {
  width: 444px;
  height: 606px;
}

#wrapper .m-list {
  width: 388px;
  height: 164px;
  background: #FFF;
  border: #CEDBDB 2px solid;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #000;
  position: relative;
  margin: 2px 2px 15px 2px;
  overflow: hidden;
}

.m-pic-wrap {
  width: 130px;
  height: 160px;
  background: #f8efe2;
}

.m-pic {
  width: 130px;
  height: 130px;
  background: url(../img/monster_pic.png);
  margin: 15px 0;
}

.m-info {
  left: 145px;
  height: 128px;
  width: 225px;
  padding-top: 12px;
}

#m-wrap {
  width: 414px;
  height: 590px;
  margin-top: 8px;
  margin-left: 22px;
  overflow: hidden;
}

#m-inner:first-child {
  padding-top: 35px;
}
#m-inner:focus {
  outline: none;
}

#wrapper .nano > .nano-content {
  overflow: scroll;
  overflow-x: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#wrapper .nano > .nano-pane {
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 5px;
}
#wrapper .nano > .nano-pane > .nano-slider {
  position: relative;
  margin: 0 1px;
  background: #444;
  border-radius: 5px;
  cursor: pointer;
}
#wrapper .nano > .nano-pane > .nano-slider:hover {
  background: #333;
}
#wrapper .nano .nano-pane {
  background: #d8c5ab;
  width: 8px;
  right: 1px;
  margin: 10px 5px;
}

#buySellPanel {
  background: url("../img/charMenu-border-top.png") top repeat-x, url("../img/charMenu-border-top.png") bottom repeat-x, url("../img/charMenu-border-left.png") left repeat-y, url("../img/charMenu-border-left.png") right repeat-y, #474c4c;
  margin: auto;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#tradeWaste {
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
  margin: auto;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#buySellPanel {
  width: 900px;
  height: 496px;
  top: 0;
  left: 0;
  bottom: 200%;
  right: 0;
}
#buySellPanel .headerPanel {
  left: 50%;
  width: 100px;
  margin-left: -50px;
  margin-top: -19px;
}

#tradeCharMoney {
  display: inline-block;
  text-align: center;
  width: 876px;
  height: 42px;
  background: #2E3131;
  left: 12px;
  bottom: 12px;
  padding: 6px;
}
#tradeCharMoney span {
  display: inline-block;
  position: relative;
  width: 170px;
  padding: 7px 14px 7px 32px;
  background: #f8efe2;
  border-radius: 999px;
  text-align: center;
}
#tradeCharMoney span:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  left: 9px;
  width: 20px;
  height: 20px;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -176px -274px;
}

#b-wrap {
  left: 25px;
}

#s-wrap {
  left: 445px;
}

#b-wrap, #s-wrap {
  width: 428px;
  height: 395px;
  margin-top: 35px;
  background: url("../img/charMenu-inner-border-top.png") repeat-x top, url("../img/charMenu-inner-border-top.png") repeat-x bottom, url("../img/charMenu-inner-border-left.png") repeat-y left, url("../img/charMenu-inner-border-left.png") repeat-y right, #efe1cb;
}
#b-wrap h4, #s-wrap h4 {
  margin-bottom: 5px;
  font-weight: normal;
  font-family: "exo_medium", sans-serif;
  font-size: 18px;
}
#b-wrap p, #s-wrap p {
  font-size: 16px;
  font-family: "MavenProRegular", sans-serif;
  line-height: 1.2em;
  color: #555;
}
#b-wrap .btnWrap, #s-wrap .btnWrap {
  margin-top: 145px;
  margin-left: 19px;
}
#b-wrap .btnWrap button, #s-wrap .btnWrap button {
  position: relative;
  width: 70px;
  height: 70px;
  border: none;
  margin: 0 10px 10px 0;
  float: left;
  background-color: #444;
  border-radius: 6px;
  background-image: url("../img/equipment_thumb.png");
  background-repeat: no-repeat;
  background-position: 70px 70px;
  border: #666 3px solid;
  box-shadow: 0 0 0 2px #000, 0 0 0 2px #222 inset;
}
#b-wrap .btnWrap button.hasItem, #s-wrap .btnWrap button.hasItem {
  background-color: #f8efe2;
  box-shadow: 0 0 0 2px #000;
}
#b-wrap .btnWrap button:focus, #s-wrap .btnWrap button:focus {
  outline: none;
  border-color: #BBB;
}
#b-wrap .btnWrap button.active, #s-wrap .btnWrap button.active {
  outline: none;
  border-color: #20E0BB;
}
#b-wrap .innerHeader, #s-wrap .innerHeader {
  height: 43px;
  width: 90px;
  margin-right: auto;
  margin-left: auto;
  margin-top: -12px;
  position: relative;
  background: url("../img/charMenu-inner-header-bg.png") repeat-x;
}
#b-wrap .innerHeader span, #s-wrap .innerHeader span {
  display: block;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  padding-top: 11px;
  text-transform: uppercase;
}
#b-wrap .innerHeader:before, #s-wrap .innerHeader:before {
  content: "";
  display: block;
  position: absolute;
  width: 44px;
  height: 43px;
  margin-left: -44px;
  left: 0;
  top: 0;
  background: url("../img/charMenu-inner-header-corner.png") no-repeat left;
}
#b-wrap .innerHeader:after, #s-wrap .innerHeader:after {
  content: "";
  display: block;
  position: absolute;
  width: 44px;
  height: 43px;
  margin-right: -44px;
  right: 0;
  top: 0;
  background: url("../img/charMenu-inner-header-corner.png") no-repeat right;
}
#b-wrap .t-l-corner, #b-wrap .t-r-corner, #b-wrap .b-l-corner, #b-wrap .b-r-corner, #s-wrap .t-l-corner, #s-wrap .t-r-corner, #s-wrap .b-l-corner, #s-wrap .b-r-corner {
  width: 22px;
  height: 22px;
  background: url(../img/charMenu-inner-border-corner.png) no-repeat;
}
#b-wrap .t-l-corner, #s-wrap .t-l-corner {
  margin-left: -2px;
  margin-top: -2px;
}
#b-wrap .t-r-corner, #s-wrap .t-r-corner {
  top: 0;
  right: 0;
  margin-right: -2px;
  margin-top: -2px;
}
#b-wrap .b-l-corner, #s-wrap .b-l-corner {
  margin-left: -2px;
  margin-bottom: -2px;
}
#b-wrap .b-r-corner, #s-wrap .b-r-corner {
  margin-right: -2px;
  margin-bottom: -2px;
}

#b-info, #s-info {
  margin: 8px;
  padding: 0 15px;
  width: 412px;
  height: 125px;
  padding-top: 30px;
  background: #D8C5AB;
}
#b-info span, #s-info span {
  font-family: "MavenProMedium", sans-serif;
}
#b-info .price, #s-info .price {
  position: relative;
  padding-left: 22px;
  display: none;
}
#b-info .price:before, #s-info .price:before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  background: url("../img/charMenu-ui-set.png") no-repeat;
  background-position: -176px -274px;
}
#b-info .price.show, #s-info .price.show {
  display: block;
}

#buyBtn, #sellBtn {
  position: absolute;
  display: none;
  width: 90px;
  top: 45px;
  right: 15px;
}
#buyBtn.show, #sellBtn.show {
  display: block;
}
#buyBtn.deactive, #sellBtn.deactive {
  background: linear-gradient(#666666, #444444);
  color: #CCC;
}

#tradeWaste {
  width: 290px;
  height: 233px;
  top: 0;
  left: 0;
  bottom: 200%;
  right: 0;
}
#tradeWaste .headerPanel {
  left: 50%;
  width: 100px;
  margin-left: -50px;
  margin-top: -19px;
}
#tradeWaste .txt {
  width: 100%;
  text-align: center;
  top: 45px;
}
#tradeWaste .items {
  position: absolute;
  top: 75px;
  left: 20px;
  width: 250px;
  height: 90px;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  background: #d8c5ab;
}
#tradeWaste .item {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
  margin-right: 10px;
  background-color: #f8efe2;
  border-radius: 6px;
  border: #666 3px solid;
  background-image: url("../img/equipment_thumb.png");
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #000;
}
#tradeWaste .item:last-child {
  margin-right: 0;
}

#giveWaste {
  position: absolute;
  width: 90px;
  top: 177px;
  left: 50%;
  margin-left: -45px;
}

.pt-page-scaleUp {
  -webkit-animation: scaleUp .5s ease both;
  -moz-animation: scaleUp .5s ease both;
  animation: scaleUp .5s ease both;
}

@-webkit-keyframes scaleUp {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes scaleUp {
  from {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
