/*----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------*/
.balloontextBox:hover {
  animation: rumble 0.3s linear infinite;
  -webkit-animation: rumble 0.3s linear infinite; }

.closeBtn:hover {
  animation: rumble 0.3s linear infinite;
  -webkit-animation: rumble 0.3s linear infinite; }

#backBtn img:hover {
  animation: rumble 0.3s linear infinite;
  -webkit-animation: rumble 0.3s linear infinite; }

@keyframes rumble {
  0% {
    transform: rotate(0deg) translate(0, 0); }

  12.5% {
    transform: rotate(0.4deg) translate(1px, -1px); }

  25% {
    transform: rotate(0.8deg) translate(0px, 1px); }

  37.5% {
    transform: rotate(0.4deg) translate(-1px, 0); }

  50% {
    transform: rotate(0deg) translate(0, 0); }

  62.5% {
    transform: rotate(-0.4deg) translate(1px, 0); }

  75% {
    transform: rotate(-0.8deg) translate(0, 1px); }

  87.5% {
    transform: rotate(-0.4deg) translate(-1px, -1px); }

  100% {
    transform: rotate(0deg) translate(0, 0); } }

@-webkit-keyframes rumble {
  0% {
    -webkit-transform: rotate(0deg) translate(0, 0); }

  12.5% {
    -webkit-transform: rotate(0.4deg) translate(1px, -1px); }

  25% {
    -webkit-transform: rotate(0.8deg) translate(0px, 1px); }

  37.5% {
    -webkit-transform: rotate(0.4deg) translate(-1px, 0); }

  50% {
    -webkit-transform: rotate(0deg) translate(0, 0); }

  62.5% {
    -webkit-transform: rotate(-0.4deg) translate(1px, 0); }

  75% {
    -webkit-transform: rotate(-0.8deg) translate(0, 1px); }

  87.5% {
    -webkit-transform: rotate(-0.4deg) translate(-1px, -1px); }

  100% {
    -webkit-transform: rotate(0deg) translate(0, 0); } }

.scaleAnime {
  animation: scale 4s ease;
  -webkit-animation: scale 4s ease; }

@keyframes scale {
  0% {
    transform: scale(0, 0); }

  15% {
    transform: scale(1, 1); }

  85% {
    transform: scale(1, 1); }

  100% {
    transform: scale(0, 0); } }

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(0, 0); }

  15% {
    -webkit-transform: scale(1, 1); }

  85% {
    -webkit-transform: scale(1, 1); }

  100% {
    -webkit-transform: scale(0, 0); } }

.shakeAnime {
  animation: shake 2s ease 0;
  /* -webkit-transform-origin: 52px 54px; */
  -webkit-animation: shake 2s ease 0; }

@keyframes shake {
  0% {
    transform: rotate(0deg); }

  5% {
    transform: rotate(0deg); }

  30% {
    transform: rotate(-5deg); }

  55% {
    transform: rotate(2deg); }

  70% {
    transform: rotate(-2deg); }

  100% {
    transform: rotate(0deg); } }

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0deg); }

  5% {
    -webkit-transform: rotate(0deg); }

  30% {
    -webkit-transform: rotate(-5deg); }

  55% {
    -webkit-transform: rotate(2deg); }

  70% {
    -webkit-transform: rotate(-2deg); }

  100% {
    -webkit-transform: rotate(0deg); } }

.circleBg {
  animation: rotate 15s linear infinite;
  animation-iteration-count: 10 linear infinite;
  -webkit-animation: rotate 15s linear infinite;
  -webkit-animation-iteration-count: 10 linear infinite; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg); } }

#wrap {
  position: relative;
  background: url(../image/background.png) repeat;
  overflow: hidden; }
  #wrap .bgObje .bgO1 {
    position: absolute;
    top: -30px;
    left: -10%; }
  #wrap .bgObje .bgO2 {
    position: absolute;
    bottom: -30px;
    right: -150px; }

.sliderBox {
  position: fixed;
  z-index: 9999; }
  .sliderBox .closeBtn {
    position: absolute;
    top: -90px;
    left: 653px;
    cursor: pointer;
    z-index: 9999; }

.pcSlide {
  display: none; }

.spSlide {
  display: none; }

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #FF4D4D; }

#overlay {
  display: none;
  position: fixed;
  z-index: 5555;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); }

#header {
  position: relative;
  width: 100%;
  height: 35px;
  z-index: 4444; }
  #header #share {
    position: absolute;
    left: 10px;
    top: 7px; }
    #header #share .twitterBtn {
      float: left;
      width: 105px !important; }
    #header #share .facebookBtn {
      float: left;
      margin-top: -4px; }

#title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  text-align: center;
  min-width: 840px; }
  #title .bgObje .bgO1 {
    position: absolute;
    top: -130px;
    left: -15%;
    z-index: 10; }
  #title .bgObje .bgO2 {
    position: absolute;
    top: -130px;
    left: 0;
    z-index: 10; }
  #title .bgObje .bgO3 {
    position: absolute;
    top: -130px;
    right: 0%;
    z-index: 10; }
  #title .characterBox {
    position: absolute; }
    #title .characterBox #chara1 {
      position: absolute;
      z-index: 0;
      top: 100px;
      left: 10px; }
    #title .characterBox #chara2 {
      position: absolute;
      z-index: 0;
      top: 405px;
      left: 290px; }
    #title .characterBox #chara3 {
      position: absolute;
      z-index: 5;
      top: 670px;
      left: 665px; }
  #title #titleContainer {
    margin: 10px; }
    #title #titleContainer .descriptionText {
      margin-top: 30px; }
    #title #titleContainer #titleLogo {
      position: relative;
      top: -250px;
      left: 0; }
  #title .mainBox {
    position: relative;
    margin: 100px auto 0 auto;
    min-width: 840px;
    width: 840px;
    z-index: 10; }
  #title .borderBox {
    min-width: 840px;
    margin: 0 auto; }
  #title .howtoBox {
    position: absolute;
    top: -140px;
    right: 50px;
    padding-top: 87px;
    width: 174px;
    cursor: pointer;
    z-index: 100; }
  #title .leafObj {
    position: relative;
    top: 245px;
    left: 423px;
    z-index: 100; }
    #title .leafObj .leaf {
      position: absolute;
      left: -20px; }
    #title .leafObj .planter {
      position: absolute;
      top: 0;
      left: -20px; }
  #title .menuPlanter {
    position: relative;
    top: 50px; }
    #title .menuPlanter .filebtnBox .fileBtn {
      position: relative;
      top: 0;
      left: 491px;
      cursor: pointer; }
      #title .menuPlanter .filebtnBox .fileBtn .fileArea {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 132px;
        height: 132px;
        overflow: hidden;
        background: url(../image/top_menu_1.png) no-repeat;
        z-index: 20;
        cursor: pointer; }
      #title .menuPlanter .filebtnBox .fileBtn .fileArea input[type="file"] {
        position: absolute;
        opacity: 0;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
        font-size: 100px;
        z-index: 999;
        height: 300px;
        z-index: 20;
        cursor: pointer; }
      #title .menuPlanter .filebtnBox .fileBtn .fileBg {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10; }
    #title .menuPlanter .filebtnBox .stalk {
      position: absolute;
      left: 550px;
      top: 70px;
      height: 200px;
      border: 4px solid #E5DEC3;
      z-index: 0; }
    #title .menuPlanter .startbtnBox .startbtn {
      position: absolute;
      top: 60px;
      left: 650px;
      z-index: 50;
      display: none; }
    #title .menuPlanter .startbtnBox .startbtnBg {
      position: absolute;
      top: 60px;
      left: 650px;
      z-index: 10 !important; }
    #title .menuPlanter .startbtnBox #startStalk {
      position: absolute;
      left: 730px;
      top: 280px;
      height: 0;
      border: 4px solid #E5DEC3;
      z-index: 0; }
    #title .menuPlanter .filePlanter {
      position: absolute;
      left: 520px;
      top: 250px; }
    #title .menuPlanter .startPlanter {
      position: absolute;
      left: 700px;
      top: 250px; }
  #title .balloontextBox {
    position: relative;
    /*
    		top: -90px;
    		left: -10%;
    */
    width: 100%; }
    #title .balloontextBox .balloonText {
      position: absolute;
      top: -90px;
      left: 35%;
      z-index: 100; }
    #title .balloontextBox .balloontextBg {
      position: absolute;
      top: -90px;
      left: 35%;
      opacity: 0.3;
      z-index: 50; }
  #title h1 {
    margin: 50px 0 30px 0; }
  #title #sampleContainer {
    position: relative;
    padding: 10px 0;
    width: 100%; }
    #title #sampleContainer .samplgImg {
      position: absolute; }
    #title #sampleContainer .sampleBoader {
      position: relative;
      top: 50px;
      left: 60px;
      border: 4px dotted #ccc;
      width: 286px;
      height: 286px;
      background: rgba(255, 255, 255, 0.5);
      overflow: hidden; }
  #title #start {
    color: white;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    display: none; }
  #title #loding {
    display: none;
    position: absolute;
    top: 191px;
    left: 93px;
    z-index: 9999; }
  #title .tableBox {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0; }

#container {
  position: relative;
  margin: 0 auto;
  min-width: 840px;
  min-height: 900px; }
  #container #backBtn {
    position: absolute;
    top: 15px;
    left: 0;
    display: none; }
  #container #completeCheat {
    position: absolute;
    top: 50px;
    left: 0;
    text-decoration: underline;
    cursor: pointer;
    display: none; }
  #container #sampleImg {
    position: absolute;
    top: 50px;
    left: 0;
    display: none; }
    #container #sampleImg .samplgImg2 {
      position: absolute; }
    #container #sampleImg .sampleBoader {
      position: relative;
      top: 0;
      border: 4px dotted #ccc;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 255, 0.5);
      overflow: hidden; }
    #container #sampleImg .sampleImgtext {
      position: absolute;
      margin: 0 0 20px 0;
      top: 0; }
  #container .pazItem {
    overflow: hidden;
    position: absolute;
    z-index: 10; }
    #container .pazItem > img {
      position: absolute; }
  #container .pazSelected {
    border: 3px solid #F8ED00;
    z-index: 1000; }
  #container .pazBackItem {
    overflow: hidden;
    position: absolute;
    z-index: 50;
    display: none; }
    #container .pazBackItem > img {
      position: absolute;
      width: 300px;
      height: 300px; }
  #container .pazBackItemTarget {
    background-color: gray; }
  #container #dummyBg {
    position: absolute;
    display: block;
    background: url(../image/background.png) repeat;
    z-index: 500;
    display: none; }
  #container #pazzleContainer {
    position: relative;
    z-index: 0; }
  #container #itemBoxContainer {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0; }
  #container #itemContainer {
    position: relative;
    float: right; }
  #container #compBox {
    width: 100%;
    position: absolute;
    z-index: 9999;
    top: 5%;
    display: none;
    text-align: center; }
  #container #completionImg {
    position: relative;
    top: -230px; }
  #container #restart {
    position: relative;
    top: 0;
    z-index: 9999;
    color: white;
    width: 20%;
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 20px;
    display: none; }
    #container #restart .circleText {
      position: absolute;
      z-index: 9999; }