@charset "utf-8";
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");


@font-face {
  font-family: 'BonmyeongjoSourceHanSerif';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

* {
  color: #333;
  text-decoration: none;
  font-family: 'BonmyeongjoSourceHanSerif';
  font-weight: 400;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

  /* 공룡 */
  cursor:
    url("https://cur.cursors-4u.net/nature/nat-9/nat858.cur"), auto !important;

  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

ul,
li {
  list-style: none;
}

/* reset */

:root {
  --black: #333;
  --main: #40a540;
  --lightgray: rgb(232, 235, 238);
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 0px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--black);
  border-radius: 3px;
}

/*  */

.right_Main {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  height: calc(100% - 42px);
  padding: 0px 20px;
  background: #e6e8e6;
  background: linear-gradient(180deg,
      rgb(244, 244, 244) 0%,
      rgba(254, 254, 254, 1) 100%);
}

.svg {
  height: 60%;
  width: 80%;
  margin: auto;
}

svg {
  height: 100%;
  width: 100%;
  fill: transparent;
  stroke: black;
}

.flight {
  width: 60px;
  height: 60px;
  transform: translate(-30px, -30px);
  /* 가로세로 크기 60px 절반인 30px 만큼 이동 */
  width: 60px;
  position: absolute;
  fill: black;
}

.right_Main .human {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

.talk {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);

  text-align: center;
}

.talk1,
.talk2,
.talk3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--black);
  padding: 2px 12px;
  text-wrap: nowrap;

  transition: 0.3s;
}

.talk2 {
  margin-left: 12px;
}

.talk3 {
  display: inline-block;
}

.talk1:hover,
.talk2:hover {
  box-shadow: 3px 3px #8bad66;
}

.talk3:hover {
  box-shadow: 3px 3px #dc8888;
}

.ricky {
  display: flex;
  margin-bottom: 12px;
}

.rt_ricky1,
.rt_ricky2,
.rt_Theo {
  width: 100vw;
  height: 100vh;
  background-color: #fefefe;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rt_wrap {
  display: flex;
}

.main {
  margin: auto;
  border-radius: 6px;
  overflow-y: auto;
  height: 800px;
  width: 600px;

}

.main p {
  flex: 1;
}

#text {
  font-family: 'BonmyeongjoSourceHanSerif';
  font-size: 18px;
  line-height: 32px;
}

#audio1,
#audio2 {
  margin-bottom: 40px;
}

.btn {
  color: red;
}