html,
body {
  height: calc(var(--vh, 1vh) * 100);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

img {
  max-width: 100%;
}

/* +++++++++++ 레이아웃 +++++++++++ */

#p0 img {
  height: calc(var(--vh, 1vh) * 44);
  width: auto;
}

.view {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: auto;
  word-break: keep-all;
  word-wrap: break-word;
  flex-direction: column;
}

#contents-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 87);
}

#navigation-section-org {
  width: 420px;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  background-color: #fff;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  flex-direction: column;
  border-left: 2px solid #d1d1d1;
}

#navigation-section-mobile-prt {
  width: 100%;
  height: calc(var(--vh, 1vh) * 7);
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0em;
}

#bg_phone {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: calc(var(--vh, 1vh) * 87);
  width: 100%;
  overflow: hidden;
  box-sizing: content-box;
  position: relative;
  background: #ffffff;
  align-items: center;
  flex-direction: column;
}

.bg_phone_width {
  /* 화면높이 == 100% */
  width: calc(87vh * 9 / 16) !important;
  /* 너비를 9:16 비율에 맞게 계산 */
  /* border-radius: 10px 10px 10px 10px; */
}

#confetti-canvas {
  position: absolute;
  top: 0%;
  align-items: center;
  justify-content: center;
  z-index: 10 !important;
  width: auto;
  height: 100%;
}

/* +++++++++++ 폰트 색, 크기 등 +++++++++++ */

/* 
  배경 이미지
  img {
    width: 100%;
    height: calc(var(--vh, 1vh)*80);
    background-repeat: no-repeat;
    background-size: cover;
  } */

.padding-05em {
  padding: 0.5em;
}

.padding-1em {
  padding: 1em;
}

.radius05rem {
  border-radius: 0.5rem;
}

.radius2rem {
  border-radius: 2rem;
}

.radius15rem {
  border-radius: 1.5rem;
}

.radius1rem {
  border-radius: 1rem;
}

.page {
  display: none;
  width: 100%;
  height: -webkit-fill-available;
}

.active {
  display: block;
}

.show {
  display: block;
}

.hide {
  display: none !important;
}

.page_wrap {
  background-color: white;
  word-break: keep-all;
  word-wrap: break-word;
  width: 100%;
  flex-direction: column !important;
  height: calc(var(--vh, 1vh) * 100);
  padding-top: calc(var(--bs-gutter-x) * 0.5);
  padding-bottom: calc(var(--bs-gutter-x) * 0.5);
  align-items: center;
}

.last-pg {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.notCol {
  flex-direction: unset !important;
}

area {
  cursor: pointer;
  outline: 1px solid transparent; /* 클릭 가능한 영역에 테두리 추가 */
  transition: outline 0.3s; /* 테두리에 변화에 애니메이션 효과 추가 */
}

img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}

svg {
  pointer-events: none;
}

.svg-03em {
  width: 0.3em !important;
  height: 0.3em !important;
}

.svg-05em {
  width: 0.5em !important;
  height: 0.5em !important;
}

.svg-1em {
  width: 1em !important;
  height: 1em !important;
}

.svg-13em {
  width: 1.3em !important;
  height: 1.3em !important;
}

.svg-15em {
  width: 1.5em !important;
  height: 1.5em !important;
}

.svg-2em {
  width: 2em !important;
  height: 2em !important;
}

.svg-32em {
  width: 3em !important;
  height: 2em !important;
}

.svg-3em {
  width: 3em !important;
  height: 3em !important;
}

.svg-315em {
  width: 3em !important;
  height: 1.5em !important;
}

.svg-15em {
  width: 1.5em !important;
  height: 1.5em !important;
}

.svg-13em {
  width: 1.3em !important;
  height: 1.3em !important;
}

.container {
  flex-direction: column !important;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding-top: calc(var(--bs-gutter-x) * 0.5);
  padding-bottom: calc(var(--bs-gutter-x) * 0.5);
  align-items: center;
}

.under_bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.tab {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 7);
  padding: 1em;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
}

.tab7vh {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 7);
}

.tab13vh {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 13);
}

ol,
ul,
li {
  list-style-type: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.text-xxx-large {
  font-size: xxx-large;
}

.text-xx-large {
  font-size: xx-large;
}

.text-x-large {
  font-size: x-large;
}

.text-lg {
  font-size: large;
}

.text-medium {
  font-size: medium;
}

.text-small {
  font-size: small !important;
}

.text-x-small {
  font-size: x-small !important;
}

.txt-cntr {
  text-align: center;
}

.txt-end {
  text-align: end;
}

.text-bold {
  font-weight: bold !important;
}

.text-w-light {
  font-weight: lighter !important;
}

.text-300 {
  font-weight: 300 !important;
}
.text-400 {
  font-weight: 400 !important;
}

.text-500 {
  font-weight: 500 !important;
}

.text-600 {
  font-weight: 600 !important;
}

.text-800 {
  font-weight: 800 !important;
}

.stroke-width-2-white {
  stroke-width: 2px;
  stroke: #ffffff;
}

.txt-white {
  color: white;
}

.txt-gray {
  color: #999999;
}

.txt-darkgray {
  color: #5d5d5d;
}

.txt-lightgray {
  color: #cccccc;
}

.txt-green {
  color: #039d47;
}

.txt-red {
  color: #c8433e;
}

.txt-orange {
  color: #ef8c51;
}

.txt-blue {
  color: #2b8cdd;
}

.txt-navy {
  color: #0d58a9;
}

.txt-skyblue {
  color: #51bed5;
}

.txt-mint {
  color: #19c3d2;
}

.txt-black {
  color: black;
}

.bg-navy {
  color: #0d58a9;
}

.bg-black {
  background: black;
}

.bg-bluegray {
  background: #e1e6eb;
}
.bg-gray {
  background: #999999;
}

.bg-darkgray {
  background: #595959;
}

.bg-lightgray {
  background: #f1f2f6;
}

.bg-white {
  background: white !important;
}

.bg-blue {
  background: #2b8cdd;
}

.bg-sky {
  background: #ecf5fc;
}

.bg-lightSky {
  background: #ebf5fa;
}

.bg-mint {
  background: #19c3d2;
}

.bg-orange {
  background: #ef8c51;
}

.bg-lightMurkyYellow {
  background: #fff2e8;
}

.bg-murkyYellow {
  background: #e8d7a1;
}

.bg-murkymint {
  background: #70c7d1;
}

.bg-murkySky {
  background: #87b6e0;
}

.bg-lightsky {
  background: #ebf5fa;
}

.bg-bannerSky {
  background: #90c8f0;
}

.bg-bannerMint {
  background: #85cbc4;
}

.opacity03 {
  opacity: 0.3;
}

.opacity05 {
  opacity: 0.5;
}

.opacity07 {
  opacity: 0.7;
}

.opacity1 {
  opacity: 1;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate45 {
  transform: rotate(45deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.h-100p {
  height: 100%;
}

.h-87 {
  height: calc(var(--vh, 1vh) * 87);
}

.h-73 {
  height: calc(var(--vh, 1vh) * 73);
}

.h-72 {
  height: calc(var(--vh, 1vh) * 72);
}

.h-70 {
  height: calc(var(--vh, 1vh) * 70);
}

.h-84 {
  height: calc(var(--vh, 1vh) * 84);
}

.h-80 {
  height: calc(var(--vh, 1vh) * 80);
}

.h-75 {
  height: calc(var(--vh, 1vh) * 75);
}

.h-66 {
  height: calc(var(--vh, 1vh) * 66);
}

.h-52 {
  height: calc(var(--vh, 1vh) * 52);
}

.h-20 {
  height: calc(var(--vh, 1vh) * 20);
}

.h-13 {
  height: calc(var(--vh, 1vh) * 13);
}

.h-8 {
  height: calc(var(--vh, 1vh) * 8);
}

.h-7 {
  height: calc(var(--vh, 1vh) * 7);
}

.w-max {
  width: max-content;
}

.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-85 {
  width: 85%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-65 {
  width: 65%;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-49 {
  width: 49%;
}

.w-46 {
  width: 46%;
}

.w-40 {
  width: 40%;
}

.w-35 {
  width: 35%;
}

.w-33 {
  width: 33%;
}

.w-30 {
  width: 30%;
}

.w-25 {
  width: 25%;
}

.w-22 {
  width: 22%;
}

.w-20 {
  width: 20%;
}

.w-15 {
  width: 15%;
}

.tab7vh {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 7);
}

.div7vh {
  width: calc(var(--vh, 1vh) * 7);
  height: calc(var(--vh, 1vh) * 7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-inherit {
  height: inherit;
}

.flex-alCntr-juCntr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-alCntr-juCntr-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.flex-alCntr-juFS {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-alCntr-juFS-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.flex-alCntr-juFE {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-alFS-juFS {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.flex-alFS-juFS-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.flex-alFS-juFE {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.flex-alFS-juFE-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
}

.flex-alFS-juCntr {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.flex-alFS-juCntr-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.flex-alFE-juCntr {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.flex-alFE-juCntr-col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}

.flex-alCntr-juFE-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

.flex-alFE-juFE {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.flex-alFE-juFS {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.flex-alFE-juFE-col {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
}

.flex-alFE-juBtw {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.flex-alFE-juBtw-col {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
}

.flex-alFS-juFS-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.flex-alCntr-juBtw {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-alCntr-juBtw-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.flex-alCntr-juAr {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-alCntr-juAr-col {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.flex-alAr-juAr-col {
  display: flex;
  align-items: space-around;
  justify-content: space-around;
  flex-direction: column;
}

.flex-alFS-juBtw {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.addShadow {
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 9999px;
  z-index: 8;
}

.addShadowDarker {
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 0 9999px;
  z-index: 8;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-35 {
  position: relative;
  z-index: 35 !important;
}

.z-20 {
  z-index: 20;
}

.box-shadow {
  box-shadow: 0px 0px 5px 3px rgba(207, 207, 207, 0.15);
}

.floating-shdw {
  box-shadow: 0px 0px 40px 3px rgba(207, 207, 207, 0.35);
}

.txt-aligin-center {
  text-align: center;
}

.set_bottom {
  position: absolute;
  bottom: 0;
}

.p-relative {
  position: relative;
}

.above-keyboard {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.no-wrap {
  white-space: nowrap;
}

.two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.op05 {
  opacity: 0.5; /* 반투명도 설정 */
}

.fsz05 {
  font-size: 0.5em;
}

.fsz08 {
  font-size: 0.8em;
}

.fsz11 {
  font-size: 1.1em;
}

.fsz12 {
  font-size: 1.2em;
}

.fsz13 {
  font-size: 1.3em;
}

.fsz15 {
  font-size: 1.5em;
}

.fsz18 {
  font-size: 1.8em;
}

.fsz2 {
  font-size: 2em;
}

/* +++++++++++ 요소 +++++++++++ */

.lightline {
  border-bottom: 1px solid #dddddd;
  width: 100%;
}

.lightline-right {
  border-right: 1px solid #dddddd;
}

.lightline-btm {
  border-bottom: 1px solid #dddddd;
}

.whiteline {
  border-bottom: 1px solid #ffffff;
  width: 100%;
}

.blackThinLine {
  border-bottom: 1px solid #000000;
}

.blackline {
  border-bottom: 2px solid #000000;
  width: 100%;
}

.thickline {
  border-bottom: 10px solid #eeeeee;
  width: 100%;
}

.thicklineWhite {
  border-bottom: 10px solid #ffffff;
  width: 100%;
}

.grayline {
  border-bottom: 1px solid #222;
}

.lightline-square {
  border: 1px solid #bcbaba;
}

.banner {
  height: fit-content;
  width: 100%;
  padding: 0.5em;
  border-radius: 2rem;
  height: calc(var(--vh, 1vh) * 15);
  overflow: hidden;
}

.banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
}

.background {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: calc(var(--vh, 1vh) * 87);
  display: flex;
  flex-direction: column;
}

.background-div {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.banner-b-r-img {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
}

@media (min-width: 1025px) {
}

@media (max-width: 767px) {
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
}