* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-family: 'Noto Serif TC', serif;
  font-size: 2.2vmin;
  color: #2a1106;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  width: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.container {
  background: url(../img/bgnew-16.jpg);
  background-position: center center;
  background-size: 50% 100%;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.page1 {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

.start-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  opacity: 0;
}

.start-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.title, .start-button, .logo, .skip-button {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.title {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

.title-wrapper {
  width: 32%;
  height: 14vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: translateY(-15%);
          transform: translateY(-15%);
}

.title-wrapper .title:nth-child(1) {
  background-image: url(../img/title/tittle-03.png);
}

.title-wrapper .title:nth-child(2) {
  background-image: url(../img/title/tittle-04.png);
  overflow: hidden;
  background-size: cover;
  background-position: left center;
  width: 0%;
  opacity: 0.5;
}

.title-wrapper .title:nth-child(3) {
  background-image: url(../img/title/tittle-05.png);
}

.title-wrapper .title:nth-child(4) {
  background-image: url(../img/title/tittle-06.png);
}

.start-button {
  width: 8.5%;
  height: 4.25vw;
  background-image: url(../img/title/tittle-02.png);
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: 65%;
}

.start-button:hover {
  background-image: url(../img/title/tittle-02h.png);
}

.logo {
  width: 7%;
  height: 3.5vw;
  position: absolute;
  left: 2vw;
  bottom: 2vw;
  background-image: url(../img/title/tittle-01.png);
  opacity: 0;
}

.tip {
  font-size: 14px;
  color: white;
  position: absolute;
  right: 2vw;
  bottom: 2vw;
  opacity: 0;
}

.tip a {
  font-size: 14px;
  color: white;
}

.character {
  width: 10%;
  height: 20vw;
  position: absolute;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

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

.character_origin {
  background-image: url(../img/girl.png);
  opacity: 1;
}

.character_back {
  background-image: url(../img/girl_3.png);
  opacity: 0;
}

.character_bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 100%;
  height: 100%;
}

.saySomething {
  width: 10vw;
  height: 4vw;
  background-image: url(../img/word/1.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-transform: translate(-63%, -10%);
          transform: translate(-63%, -10%);
}

.dialog_page1_1 {
  position: absolute;
  width: 31%;
  height: 22vw;
}

.dialogWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dialogWrapper div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.firstP {
  width: 100%;
  height: 100%;
  background-image: url(../img/word/start01-n.png);
  opacity: 0;
}

.secondP {
  width: 25%;
  height: 26vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  left: 20%;
  top: 14%;
  position: absolute;
  background-image: url(../img/word/start02-n.png);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  opacity: 0;
}

.blur-filter {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  opacity: 0;
  display: none;
  position: absolute;
  top: 0;
  z-index: 54;
}

.btn {
  cursor: pointer;
}

.beginBtn {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bugBtn {
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: 9vw;
  left: 46%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 100;
  pointer-events: none;
}

.begin-bug-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.begin-bug-body {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(../img/plant-26-1-1.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@-webkit-keyframes bug-body-shiny {
  0% {
    background-image: url(../img/plant-26-1-1.png);
  }
  50% {
    background-image: url(../img/plant-26-1h.png);
  }
  100% {
    background-image: url(../img/plant-26-1-1.png);
  }
}

@keyframes bug-body-shiny {
  0% {
    background-image: url(../img/plant-26-1-1.png);
  }
  50% {
    background-image: url(../img/plant-26-1h.png);
  }
  100% {
    background-image: url(../img/plant-26-1-1.png);
  }
}

.begin-bug-fly-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.bug-fly {
  width: 23%;
  height: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0px -1px;
}

.bug-fly-path {
  stroke: none;
  fill: none;
  position: absolute;
  top: 17%;
  left: 48%;
  width: 19%;
  pointer-events: none;
}

.walkSound {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -2;
}

.bug-left-fly {
  background-image: url(../img/plant-26-3.png);
  -webkit-transform-origin: 100% 20%;
          transform-origin: 100% 20%;
}

.bug-right-fly {
  background-image: url(../img/plant-26-2.png);
  -webkit-transform-origin: 0% 20%;
          transform-origin: 0% 20%;
}

.dialogWrapper .beginBtn:last-child {
  background-image: url(../img/button-53.png);
  bottom: 0%;
  position: absolute;
  width: 12vw;
  height: 5vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 10%;
  opacity: 0;
  display: none;
}

.dialogWrapper .beginBtn:last-child:hover {
  background-image: url(../img/button-53_h.png);
}

.plantWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}

.plant {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

.insect {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  cursor: pointer;
}

.insect_1 {
  top: 23vw;
  left: 1%;
  width: 3%;
  height: 2.5vw;
  z-index: 5;
}

.silkworm {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}

.silkworm-origin {
  background-image: url(../img/plant-05.png);
}

.silkworm-change {
  background-image: url(../img/plant-05-1.png);
  opacity: 0;
}

.silkworm-hover {
  background-image: url(../img/plant-05-h.png);
}

.insect_2 {
  background-image: url(../img/plant-13-n.png);
  bottom: 4%;
  left: 60%;
  width: 6%;
  height: 5vw;
  z-index: 53;
}

.grasshopper-shiny {
  background-image: url(../img/plant-13-nh.png);
  position: absolute;
  top: 0;
}

.insect_3 {
  background-image: url(../img/plant-26-n.png);
  top: 9.5vw;
  left: 45%;
  width: 3%;
  height: 3vw;
  opacity: 0;
}

.bug-shiny {
  background-image: url(../img/plant-26-nh.png);
  position: absolute;
  top: 0;
}

.insect .textinfo {
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.insect_1 .textinfo {
  background-image: url(../img/word/mao.png);
  width: 22vw;
  height: 11vw;
  -webkit-transform: translate(0%, -100%);
          transform: translate(0%, -100%);
}

.insect_2 .textinfo {
  background-image: url(../img/word/bug_green.png);
  width: 19vw;
  height: 13vw;
  -webkit-transform: translate(-12%, -100%);
          transform: translate(-12%, -100%);
}

.insect_3 .textinfo {
  background-image: url(../img/word/laddybug_new.png);
  width: 21vw;
  height: 8vw;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

.plant_1 {
  background-image: url(../img/plant-01.png);
  top: 0;
  left: 0;
  width: 17%;
  height: 5vw;
  z-index: 0;
}

.plant_2 {
  background-image: url(../img/plant-02.png);
  top: 0;
  left: 0;
  width: 8%;
  height: 18vw;
  z-index: 1;
}

.plant_3 {
  background-image: url(../img/plant-03.png);
  top: 35%;
  left: 0;
  width: 12%;
  height: 11vw;
  z-index: 0;
}

.plant_4 {
  background-image: url(../img/plant-04.png);
  top: 22%;
  left: 0;
  width: 28%;
  height: 24vw;
  z-index: 0;
}

.plant_6 {
  background-image: url(../img/plant-06.png);
  top: 50%;
  left: 0;
  width: 8%;
  height: 7.5vw;
  z-index: 0;
}

.plant_7 {
  background-image: url(../img/plant-07.png);
  bottom: 0;
  left: 0;
  width: 18%;
  height: 23vw;
  z-index: 0;
  background-position: bottom left;
}

.plant_8 {
  background-image: url(../img/plant-08.png);
  bottom: 0;
  left: 0;
  width: 11%;
  height: 19vw;
  z-index: 2;
}

.plant_9 {
  background-image: url(../img/plant-09.png);
  bottom: 0;
  left: 10%;
  width: 33%;
  height: 21vw;
  z-index: 1;
  background-position: bottom center;
}

.plant_10 {
  background-image: url(../img/plant-10.png);
  bottom: 0;
  left: 20%;
  width: 30%;
  height: 15vw;
  z-index: 0;
  background-position: bottom center;
}

.plant_11 {
  background-image: url(../img/plant-11.png);
  bottom: 0;
  left: 47%;
  width: 12%;
  height: 20vw;
  z-index: 0;
  background-position: bottom center;
}

.plant_12 {
  background-image: url(../img/plant-12.png);
  bottom: 0;
  right: 10%;
  width: 35%;
  height: 11vw;
  z-index: 51;
  background-position: bottom right;
}

.plant_14 {
  background-image: url(../img/plant-14.png);
  bottom: 0;
  right: 20%;
  width: 16%;
  height: 15vw;
  z-index: 53;
  background-position: bottom right;
}

.plant_15 {
  background-image: url(../img/plant-15.png);
  bottom: 0;
  right: 12%;
  width: 16%;
  height: 15vw;
  z-index: 52;
  background-position: bottom right;
}

.plant_16 {
  background-image: url(../img/plant-16.png);
  bottom: 0;
  right: 0;
  width: 18%;
  height: 6vw;
  z-index: 2;
  background-position: bottom right;
}

.plant_17 {
  background-image: url(../img/plant-17.png);
  bottom: 0;
  right: 0;
  width: 27%;
  height: 41vw;
  z-index: 1;
  background-position: bottom right;
}

.plant_18 {
  background-image: url(../img/plant-18.png);
  top: 24%;
  right: 0;
  width: 9%;
  height: 16vw;
  z-index: 0;
  background-position: bottom right;
}

.plant_19 {
  background-image: url(../img/plant-19.png);
  top: 0;
  right: 0;
  width: 20%;
  height: 10vw;
  z-index: 0;
  background-position: right top;
}

.plant_20 {
  background-image: url(../img/plant-20.png);
  top: 0;
  right: 0;
  width: 17%;
  height: 16vw;
  z-index: 6;
  background-position: right top;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: changeBg;
          animation-name: changeBg;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.plant_21 {
  background-image: url(../img/plant-21.png);
  top: 0;
  right: 15%;
  width: 7%;
  height: 7vw;
  z-index: 0;
}

.plant_22 {
  background-image: url(../img/plant-22.png);
  top: 0;
  right: 19%;
  width: 9%;
  height: 6vw;
  z-index: 0;
}

.plant_23 {
  background-image: url(../img/plant-23.png);
  top: 0;
  right: 26.5%;
  width: 13%;
  height: 13vw;
  z-index: 0;
}

.plant_24 {
  background-image: url(../img/plant-24.png);
  top: 0;
  right: 39%;
  width: 25%;
  height: 17vw;
  z-index: 0;
}

/* 
@keyframes changeBg{
    0%{
        background-image: url(../img/plant-20.png);
    }
    50%{
        background-image: url(../img/plant-20_h.png);
    }
    100%{
        background-image: url(../img/plant-20.png);
    }
} */
.plant_25 {
  background-image: url(../img/plant-25.png);
  top: 0;
  right: 39%;
  width: 15%;
  height: 7vw;
  z-index: 0;
}

.plant_28 {
  background-image: url(../img/plant-28.png);
  top: 0;
  left: 23%;
  width: 18%;
  height: 14vw;
  z-index: 0;
}

.plant_active {
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.text {
  width: 15vw;
  height: 15vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  pointer-events: none;
}

.mulberry .text {
  background-image: url(../img/name-04.png);
  -webkit-transform: translate(50%, -55%);
          transform: translate(50%, -55%);
}

.kudzu .text {
  background-image: url(../img/name-08.png);
  -webkit-transform: translate(50%, 0%);
          transform: translate(50%, 0%);
}

.pineapple .text {
  background-image: url(../img/name-09.png);
  -webkit-transform: translate(150%, 20%);
          transform: translate(150%, 20%);
}

.wheat .text {
  background-image: url(../img/name-11.png);
  -webkit-transform: translate(34%, -28%);
          transform: translate(34%, -28%);
}

.rice .text {
  background-image: url(../img/name-14.png);
  -webkit-transform: translate(65%, 0%);
          transform: translate(65%, 0%);
}

.banana .text {
  background-image: url(../img/name-17.png);
  -webkit-transform: translate(0%, 80%);
          transform: translate(0%, 80%);
}

.mulberries .text {
  background-image: url(../img/name-20.png);
  -webkit-transform: translate(-14%, 44%);
          transform: translate(-14%, 44%);
}

.textinfo {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  pointer-events: none;
}

.mulberries .textinfo {
  background-image: url(../img/word/flower.png);
  width: 30vw;
  height: 15vw;
  -webkit-transform: translate(-100%, 10%);
          transform: translate(-100%, 10%);
}

.ramie .text {
  background-image: url(../img/name-23.png);
  -webkit-transform: translate(52%, -8%);
          transform: translate(52%, -8%);
}

.wikstroemia .text {
  background-image: url(../img/name-25.png);
  -webkit-transform: translate(28%, 20%);
          transform: translate(28%, 20%);
}

.mulberryTree .text {
  background-image: url(../img/name-28.png);
  -webkit-transform: translate(61%, 20%);
          transform: translate(61%, 20%);
}

.butterfly {
  position: absolute;
  width: 10%;
  height: 10vw;
  top: 100%;
  left: 100%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  z-index: 5;
  cursor: pointer;
}

.butterfly .textinfo {
  width: 15vw;
  height: 8vw;
  background-image: url(../img/word/butter.png);
  position: absolute;
  z-index: 5;
  -webkit-transform: rotate(40deg) translate(50%, -80%);
          transform: rotate(40deg) translate(50%, -80%);
  opacity: 0;
}

.butterflyWrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 1000;
          perspective: 1000;
}

.butterfly_body {
  background-image: url(../img/butterfly-n.png);
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 22%;
  height: 100%;
  position: absolute;
  z-index: 10;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.insect-shiny {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
}

.butterfly-body-shiny {
  background-image: url(../img/butterfly-n-h.png);
  background-position: center 40%;
}

.butterfly_fly {
  width: 50%;
  height: 100%;
  background-image: url(../img/butterfly2-n.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

.butterfly-fly-shiny {
  background-image: url(../img/butterfly2-nh.png);
}

.butterfly_fly:last-child {
  width: 49%;
  height: 100%;
  background-image: url(../img/butterfly3-n.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: auto;
  right: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.butterfly_fly:last-child .butterfly-fly-shiny {
  background-image: url(../img/butterfly3-nh.png);
}

.butterflyPath {
  stroke: none;
  fill: none;
  width: 30%;
  height: 52%;
  position: absolute;
  top: 13%;
  right: 0;
  pointer-events: none;
}

.insect_2Path {
  stroke: none;
  fill: none;
  width: 26%;
  height: 10%;
  position: absolute;
  bottom: 7%;
  left: 60%;
  pointer-events: none;
}

.insect_2Path:nth-child(2) {
  left: 82;
}

.overlay {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 55;
  opacity: 1;
  top: 0;
  display: none;
}

.overlayWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dialog_overlay {
  width: 25%;
  height: 20vw;
  background-image: url(../img/tip.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0;
  top: 20%;
  left: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.secondP .beginBtn {
  bottom: auto;
  -webkit-transform: translate(-25%, -45%);
          transform: translate(-25%, -45%);
}

.overlay .beginBtn {
  background-image: url(../img/button-50.png);
  display: block;
  position: absolute;
  width: 29%;
  height: 4vw;
  opacity: 1;
  z-index: 20;
  -webkit-transform: translate(-25%, -70%);
          transform: translate(-25%, -70%);
  opacity: 0;
  bottom: 0%;
}

.overlay .beginBtn:hover {
  background-image: url(../img/button-50_h.png);
}

.plant_info {
  width: 36%;
  height: 24vw;
  position: absolute;
  z-index: 52;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  opacity: 0;
  bottom: -25%;
}

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

.plant_info_btn_wrapper {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.info_btn {
  width: 35%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.pick_again {
  background-image: url(../img/button-51.png);
}

.pick_again:hover {
  background-image: url(../img/button-51_h.png);
}

.sure {
  background-image: url(../img/button-52.png);
}

.sure:hover {
  background-image: url(../img/button-52_h.png);
}

.insect_info {
  width: 36%;
  height: 24vw;
  position: absolute;
  background-image: url(../img/word/bugtip.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  opacity: 0;
  display: none;
}

.insect_info .pick_continue {
  background-image: url(../img/button-54.png);
  height: 20%;
  margin-bottom: 1.8vw;
}

.insect_info .pick_continue:hover {
  background-image: url(../img/button-54_h.png);
}

.sure_to_pick {
  width: 10vw;
  height: 10vw;
  position: absolute;
  z-index: 50;
  top: 35%;
  right: 35%;
  background-image: url(../img/plant-04_h2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  opacity: 0;
}

.endingTip {
  width: 30%;
  height: 32vw;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  display: none;
  pointer-events: none;
  background-image: url(../img/word/endtip.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 50;
}

.endingBtn {
  display: block;
  width: 29%;
  height: 5vw;
  background-image: url(../img/button-50.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  position: absolute;
  -webkit-transform: translateY(-80%);
          transform: translateY(-80%);
}

.endingBtn:hover {
  background-image: url(../img/button-50_h.png);
}

.phone-saySomething {
  width: 95%;
  height: 50%;
  background-image: url(../img/word/3_phone.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.phone-saysomething-next-btn {
  width: 39%;
  height: 14vw;
  background-image: url(../img/button-54.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  pointer-events: none;
  position: absolute;
  bottom: 30%;
  opacity: 0;
}

.phone-saysomething-next-btn:hover {
  background-image: url(../img/button-54_h.png);
}

.phone-saysomething-last-btn {
  width: 39%;
  height: 14vw;
  background-image: url(../img/button-50.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  pointer-events: none;
  position: absolute;
  bottom: 22%;
  opacity: 0;
}

.phone-saysomething-last-btn:hover {
  background-image: url(../img/button-50_h.png);
}

.endingItem {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

.gloves {
  width: 13vw;
  height: 13vw;
  top: 15%;
  left: 15%;
  background-image: url(../img/gloves.png);
}

.boots {
  width: 14vw;
  height: 14vw;
  bottom: 20%;
  left: 20%;
  background-image: url(../img/shoe.png);
}

.snake {
  z-index: 50;
  background-image: url(../img/snake2.png);
  width: 14vw;
  height: 14vw;
  right: 15%;
  bottom: 0%;
}

.snake-active {
  width: 100%;
  height: 100%;
  background-image: url(../img/snake2-h.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  position: absolute;
}

.skip-button {
  width: 8.5%;
  height: 4.25vw;
  background-image: url(../img/title/skip2.png);
  position: absolute;
  top: 2vw;
  right: 2vw;
  z-index: 100;
  opacity: 0;
}

.skip-button:hover {
  background-image: url(../img/title/skip-h.png);
}

@media screen and (max-width: 820px) {
  .container {
    background-image: url(../img/bg.png);
  }
  .title-wrapper {
    width: 80%;
    height: 35vw;
  }
  .logo {
    top: 2vw;
    bottom: auto;
    width: 25%;
    height: 12.5vw;
  }
  .tip {
    font-size: 7px;
    right: auto;
  }
  .tip a {
    font-size: 7px;
  }
  .start-button {
    width: 22vw;
    height: 11vw;
    top: 61%;
  }
  .butterflyPath {
    width: 35%;
    height: 23%;
    top: 15%;
  }
  .plant_1 {
    background-image: url(../img/phone/plant-05.png);
    width: 28%;
    height: 31vw;
    left: 10%;
    z-index: 10;
    display: none;
  }
  .plant_2 {
    top: 38%;
    width: 15%;
    height: 25vw;
  }
  .plant_4 {
    background-image: url(../img/phone/plant-10.png);
    width: 45%;
    height: 22%;
    z-index: 5;
  }
  .plant_6 {
    background-image: url(../img/phone/plant-24.png);
    width: 33%;
    height: 25%;
    top: auto;
    bottom: 0;
    left: 7%;
    z-index: 0;
  }
  .plant_7 {
    width: 20vw;
    height: 40vw;
  }
  .plant_8 {
    background-image: url(../img/phone/plant-03.png);
    top: 2%;
    right: 0;
    left: auto;
    background-position: right center;
    width: 27vw;
    height: 60vw;
  }
  .plant_9 {
    background-image: url(../img/phone/plant-23.png);
    left: 0;
    width: 44%;
    height: 35vw;
    background-position: left bottom;
    z-index: 20;
  }
  .plant_10 {
    background-image: url(../img/phone/plant-22.png);
    width: 48%;
    height: 15vw;
  }
  .plant_11 {
    background-image: url(../img/phone/plant-31.png);
    width: 23%;
    height: 45vw;
    left: 40%;
    z-index: 11;
  }
  .plant_12 {
    background-image: url(../img/phone/plant-20.png);
    z-index: 10;
  }
  .plant_14 {
    background-image: url(../img/phone/plant-28.png);
    width: 30%;
    height: 35vw;
    left: 0;
    top: 45%;
  }
  .plant_15 {
    background-image: url(../img/phone/plant-27.png);
    width: 30%;
    height: 35vw;
    left: 0;
    top: 52%;
  }
  .plant_16 {
    background-image: url(../img/phone/plant-21.png);
    width: 41%;
    height: 18vw;
    right: 10%;
  }
  .plant_17 {
    background-image: url(../img/phone/plant-15-32.png);
    width: 40%;
    height: 54%;
    right: 0;
    top: 35%;
    z-index: 1;
  }
  .plant_18 {
    background-image: url(../img/plant-18.png);
    width: 21%;
    height: 37vw;
    right: 0;
    top: 45%;
    z-index: 0;
  }
  .plant_19 {
    background-image: url(../img/phone/plant-02.png);
    width: 20%;
    height: 15vw;
  }
  .plant_20 {
    display: none;
    pointer-events: none;
  }
  .phone_mulberries {
    background-image: url(../img/phone/plant-07.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 30%;
    height: 27vw;
    left: 0%;
    top: 0%;
    background-position: left top;
    z-index: 2;
  }
  .plant_21 {
    background-image: url(../img/phone/plant-19.png);
    top: auto;
    width: 18%;
    height: 27vw;
    bottom: 2%;
    right: 0;
    background-position: right center;
    z-index: 2;
  }
  .plant_22 {
    background-image: url(../img/phone/plant-09.png);
    width: 32%;
    height: 27vw;
    left: 0%;
    top: 12%;
    z-index: 1;
  }
  .plant_23 {
    background-image: url(../img/phone/plant-05.png);
    width: 28%;
    height: 31vw;
    left: 10%;
    z-index: 10;
  }
  .plant_25 {
    background-image: url(../img/phone/plant-26.png);
    top: auto;
    bottom: 15%;
    left: 0;
    width: 15%;
    height: 25vw;
  }
  .plant_24 {
    background-image: url(../img/phone/plant-04.png);
    width: 45%;
    height: 43vw;
    right: 23%;
  }
  .plant_28 {
    background-image: url(../img/phone/plant-18.png);
    width: 40%;
    height: 45vw;
    right: 0%;
    left: auto;
    top: auto;
    bottom: 10%;
    background-position: right center;
    z-index: 10;
  }
  .butterfly {
    width: 21%;
    height: 21vw;
  }
  .butterflyPath {
    width: 32%;
    height: 18%;
    top: 21%;
  }
  .insect_2Path {
    width: 32%;
    left: 40%;
  }
  .insect {
    z-index: 20;
  }
  .insect_1 {
    width: 11%;
    height: 11vw;
    top: 34%;
  }
  .insect_2 {
    width: 21%;
    height: 17vw;
    left: 21%;
    bottom: 0;
  }
  .insect_3 {
    width: 10%;
    height: 10vw;
    top: 19.5vw;
    left: 53%;
  }
  .dialog_page1_1 {
    width: 90%;
    height: 64vw;
    z-index: 55;
  }
  .beginBtn {
    width: 39%;
    height: 14vw;
  }
  .character {
    width: 20%;
    height: 46vw;
    top: 43%;
  }
  .dialog_overlay {
    background-image: url(../img/word/tip_ph-04.png);
    left: auto;
    top: auto;
    width: 90%;
    height: 52vw;
  }
  .overlay .beginBtn {
    width: 39%;
    height: 14vw;
    left: 50%;
    -webkit-transform: translate(-50%, -47%);
            transform: translate(-50%, -47%);
  }
  .plant_info, .insect_info {
    width: 95%;
    height: 63vw;
    z-index: 100;
  }
  .text {
    opacity: 0;
  }
  .text {
    width: 35vw;
    height: 35vw;
    position: absolute;
  }
  .mulberries .text {
    display: none;
  }
  .mulberry .text {
    -webkit-transform: translate(80%, -5%);
            transform: translate(80%, -5%);
  }
  .kudzu .text {
    -webkit-transform: translate(-50%, 30%);
            transform: translate(-50%, 30%);
  }
  .pineapple .text {
    -webkit-transform: translate(63%, -6%);
            transform: translate(63%, -6%);
  }
  .wikstroemia .text {
    -webkit-transform: translate(28%, -37%);
            transform: translate(28%, -37%);
  }
  .wheat .text {
    -webkit-transform: translate(0%, -60%);
            transform: translate(0%, -60%);
  }
  .kudzu .text {
    -webkit-transform: translate(-24%, 123%);
            transform: translate(-24%, 123%);
  }
  .mulberryTree .text {
    -webkit-transform: translate(33%, 93%);
            transform: translate(33%, 93%);
  }
  .insect_info .pick_continue {
    margin-bottom: 5.8vw;
  }
  .insect_1 .textinfo {
    width: 50vw;
    height: 25vw;
  }
  .insect_2 .textinfo {
    width: 42vw;
    height: 29vw;
  }
  .insect_3 .textinfo {
    width: 50vw;
    height: 20vw;
  }
  .butterfly .textinfo {
    width: 40vw;
    height: 25vw;
    -webkit-transform: translate(61%, -38%) rotate(40deg);
            transform: translate(61%, -38%) rotate(40deg);
  }
  .sure_to_pick {
    width: 20vw;
    height: 20vw;
    top: 48%;
    right: 65%;
  }
  .saySomething {
    width: 26vw;
    height: 12vw;
    -webkit-transform: translate(-58%, -59%);
            transform: translate(-58%, -59%);
  }
  .endingTip {
    width: 95vw;
    height: 107vw;
  }
  .endingBtn {
    width: 29%;
    height: 16vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .firstP {
    background-image: url(../img/word/start01.png);
  }
  .secondP {
    background-image: url(../img/word/start02.png);
    width: 90%;
    height: 79vw;
    left: auto;
    top: auto;
  }
  .bugBtn {
    width: 16.5%;
    top: 12%;
  }
  .bug-fly-path {
    top: 17%;
    left: 42%;
    width: 64%;
    -webkit-transform: rotate(17deg);
            transform: rotate(17deg);
  }
  .blur-filter {
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
  .gloves {
    width: 40vw;
    height: 40vw;
    top: 3%;
    left: auto;
    right: 8%;
  }
  .boots {
    width: 40vw;
    height: 40vw;
    bottom: auto;
    top: 8%;
    left: 20%;
  }
  .snake {
    width: 40vw;
    height: 40vw;
    right: -50%;
    bottom: 5%;
    z-index: 55;
    opacity: 1;
  }
  .endingTip {
    z-index: 53;
  }
  .skip-button {
    width: 22vw;
    height: 11vw;
  }
}
/*# sourceMappingURL=style.css.map */