html,
body {
  height: 100%;
  min-width: 320px;
  /* -ms-scroll-chaining: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto; */
}

html.overscroll-behavior-none {
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

:root {
  --swiper-navigation-size: 12px !important;
  --swiper-theme-color: #ffffff !important;
}

body {
  display: flex;
  background-color: #eff1f6 !important;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Pretendard Variable', 'Pretendard', 'Pretendard JP Variable','Pretendard JP' ,'-apple-system', 'BlinkMacSystemFont', 'system-ui', 'Roboto', "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 'sans-serif' !important;
  font-size: 12px;
  letter-spacing: -0.0225em;
  /* -webkit-touch-callout:none; */
  /* touch-action: none; */
}

body.modal-active {
  overflow-y: hidden;
}

@media (min-width:500px) {
  body {
    background-color: #cbd1df !important;
  }
}

::-moz-selection {
  background: rgb(230 119 158 / 90%);
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: rgb(230 119 158 / 90%);
  color: #ffffff;
  text-shadow: none;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: unset;
}

[lang="en"] .menu-label {
  text-align: center;
  white-space: pre-wrap;
  /* text-transform: capitalize; */
  line-height: 1.1;
  word-break: keep-all;
}

[lang="ko"] .word-break-kr {
  word-break: keep-all;
}

[lang="en"] {font-family: var(--font-family-ko)}
[lang="ko"] {font-family: var(--font-family-ko)}
[lang="ja"] {font-family: var(--font-family-ja)}

/* .font-title {
  font-family: 'Carter One', sans-serif;
} */

a, button {
  cursor: pointer;
  outline: 0 !important;
  letter-spacing: -0.015em;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  white-space: nowrap;
}

select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

/* p {
  word-break: keep-all;
} */

.customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  margin-right: 8px;
  background-color: #f5f5f5;
}

.customized-scrollbar::-webkit-scrollbar-thumb {
  background: #c5cad2;
}

header {
  min-width: 320px;
}

.header-pointer {
  pointer-events: none!important;
}

.header-pointer > * {
  pointer-events: all;
}

header h1 {
  white-space: nowrap;
}

footer {
  box-shadow: -5px 0 15px rgb(0 0 0 / 5%);
  margin-top: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

/* #main-body {
  background-color: #ffffff;
} */

a,
button,
header,
.visual,
footer,
#selectMember,
#stickerArea,
.card-content img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#nick {
  font-weight: 300;
  opacity: 0.75;
  margin-left: 2px;
  white-space: nowrap;
}

/* #main-body {
  background-color: #f6f7f7;
  overflow-y: scroll;
} */

#main-wrap {
  /* background-color: #ffffff; */
}

.nickname {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.nickname p,
.nickname div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@media (min-width: 768px) {
  .nickname > p {
  max-width: 380px;
  }
  .nickname p,
  .nickname div {
    font-size: 12px;
  }

  .my-ateez.page-main .nickname p {
    font-size: 1.5rem;
  }
}

.blind, .hide {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 940px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1280px) {
  html {
    font-size: 16px;
  }
}

.main-bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-bg.normal {
  background: #f8dddd;
}

.main-bg.login {
  background: url("../images/main/main-bg_02.jpg") no-repeat center / cover;
}

/*
.content-bg {
  background-image: url("../images/main/main-bg.png");
  background-position: center;
  opacity: 0.4;
}

.content-bg2 {
  background-image: url("../images/main/main-bg2.jpg");
  background-position: center;
  box-shadow: inset 0px 0px 400px 20px #00000080;
  opacity: 0.75;
}

.content-bg3 {
  background-image: url("../images/main/main-bg.png");
  background-position: center;
  box-shadow: inset 0px 0px 400px 20px #00000080;
  opacity: 0.4;
}

.content-bg3 {
  background-image: url("../images/main/main-bg.png");
}

.promotion-bg {
  background: #040730c9 url("../images/eventBanner/bg_promotion.svg") no-repeat top center / 100%;
}

@media screen and (max-width: 768px) {
  .content-bg {
    background-image: none;
    background-position: center;
    opacity: 1;
  }
  .content-bg.main {
    background-image: url("../images/main/main-bg-m.jpg");
    background-position: center;
  }
}

@media screen and (min-width: 769px) {
  .visual {
    background-image: url("../images/main/visual-bg.jpg");
    background-position: center;
    background-size: cover;
  }
} */

.language-button.active > span:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3797;
  display: inline-block;
  position: absolute;
  left: -14px;
  top: 39%;
}
@media screen and (max-width: 768px) {
  .language-button.active > span:before {
    top: 4px;
  }
}

.header.scroll-fixed {
  background: rgb(255 255 255 / 85%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); */
  /*background: linear-gradient(180deg, black, #000000cc) !important;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px); */
}

.header-logo {
  line-height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: default;
  -webkit-filter: drop-shadow(0 2px 2px #00000030);
          filter: drop-shadow(0 2px 2px #00000030);
}

.header-logo.off {
 background-image: none;
 transition: all ease 0.3s;
 background-size: auto 16px;
}

.header-logo.on {
  background-image: url("../images/common/Omoro_logo_Fix.png");
  transition: all ease 0.3s;
  background-size: auto 22px;

}

@media (min-width:769px) and (max-width:939px) {
  .header-logo {
    width: 120px;
    height: 24px;
    background-position: center;
  }
} 

@media screen and (min-width:940px) {
  .header-logo {
    width: 140px;
    height: 30px;
    background-position: center;
  }
} 

.header.collection {
  /* background: linear-gradient(180deg, rgb(0 21 48 / 95%) 34.76%, rgb(35 30 63 / 95%) 100%); */
  background-color: rgb(0 0 0 / 75%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media screen and (max-width: 768px) {
  .header.about {
    background-color: rgb(0 0 0 / 75%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
.header-menu {
  transform: translate3d(-100%, 0, 0);
}

.main-special-button {
  background: linear-gradient(159deg, #8541d2 32.5%, #691ac4 75%);
  transition: all 0.3s ease-in-out;
}
.main-special-button:hover {
  background: linear-gradient(159deg, #8945d4 32.5%, #7910ba 75%);
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
  .footer-layout {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  }
}

main .section-tab {
  background: #333333;
  height: 26px;
  line-height: 26px;;
  padding: 0 10px;
  border-radius: 0.25rem;
  color:#f5f5f5;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

main .section-tab.focused {
  background: #5657FE;
  border-radius: 0.25rem;
  color:#ffffff;
  cursor: pointer;
}


@media (min-width:940px) {
  main .section-chat {
    height: calc(100vh - 151px);
  }
}

@media (min-width:769px) {
  main .section-chat {
    height: calc(100vh - 134px);
  }
}

@media (max-width:768px) {
  main .section-chat {
    height: calc(100vh - 458px);
  }
}

main article p {
  /* padding-left: 1.25rem;
  padding-right: 1.25rem; */
  word-break: keep-all;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-text p {
  padding-left: 0;
  padding-right: 0;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.card-content, .card-comment {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.product-wrapper {
  position: relative;
  /* box-shadow: 0px 20px 30px 5px #059f8c4f !important; */
}

.product-wrapper .product-bg {
  /* background-image: url("../images/sub/k.svg"); */
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 100%;
  opacity: 0.35;
}

main article.about_01 p,
main article.about_02 p,
main article.about_03 p,
main article.about_04 p,
main article.about_05 p {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#footer a p,
#footer button p {
  padding-bottom: 5px;
  white-space: nowrap;
}


input.login  {
  height: 32px;
  color: #fff;
  font-size: 12.5px;
}

input.login:focus {
  border: 0 !important;
  outline: 0 !important;
}

.comment textarea {
  border-radius: 0 !important;
}

.comment textarea::-webkit-input-placeholder, input.login::-webkit-input-placeholder {
    color: #ffffff;
  }

.comment textarea::-moz-placeholder, input.login::-moz-placeholder {
    color: #ffffff;
  }

.comment textarea:-ms-input-placeholder, input.login:-ms-input-placeholder {
    color: #ffffff;
  }

.comment textarea::-ms-input-placeholder, input.login::-ms-input-placeholder {
    color: #ffffff;
  }

.comment textarea::placeholder,
input.login::placeholder {
    color: #ffffff;
  }

.comment textarea:focus {
    background: #ffffff;
    transition: 0.5s ease;
}

.comment textarea:focus::-webkit-input-placeholder {
  color: #7e7e7e;
}

.comment textarea:focus::-moz-placeholder {
  color: #7e7e7e;
}

.comment textarea:focus:-ms-input-placeholder {
  color: #7e7e7e;
}

.comment textarea:focus::-ms-input-placeholder {
  color: #7e7e7e;
}

.comment textarea:focus::placeholder {
  color: #7e7e7e;
}

.activemodal input.login  {
  color: #000;
}

.activemodal input.login::-webkit-input-placeholder {
  color: #a5a5a5;
}

.activemodal input.login::-moz-placeholder {
  color: #a5a5a5;
}

.activemodal input.login:-ms-input-placeholder {
  color: #a5a5a5;
}

.activemodal input.login::-ms-input-placeholder {
  color: #a5a5a5;
}

.activemodal input.login::placeholder {
  color: #a5a5a5;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 9999s ease-out;
 -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
 -webkit-text-fill-color: #000;
}

.bg-gradient {
	background: linear-gradient(-45deg, #ffa231, #ff89b6, #f73aaf, #caea13);
	background-size: 175% 175%;
	-webkit-animation: bg-gradient 5s ease infinite;
	        animation: bg-gradient 5s ease infinite;
}

.bg-gradient2 {
	background: linear-gradient(135deg, #ff00b0, #ff9a00, #1de840, #25ade8, #4111ff, #ff3797);
	background-size: 1000%;
	-webkit-animation: bg-gradient 10s cubic-bezier(0.85, 0, 0.35, 1) infinite;
	        animation: bg-gradient 10s cubic-bezier(0.85, 0, 0.35, 1) infinite;
}

@-webkit-keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.text-gradient {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(134deg, #e8d9f7, #eac1fb);
  background-size: 100% 100%;
  /* animation: gradient 7s cubic-bezier(0.7, 0.01, 0.21, 1) infinite;
  will-change: transform; */
}

.text-gradient-2 {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(134deg, #f72493, #dbff00, #1efada);
  background-size: 200% 200%;
  -webkit-animation: gradient 4s cubic-bezier(0.76, 0, 0.26, 1) infinite;
          animation: gradient 4s cubic-bezier(0.76, 0, 0.26, 1) infinite;
  will-change: transform;
}

.text-gradient-3 {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(134deg, #21fee8, #ffd300, #f90dad);
  background-size: 175% 175%;
  -webkit-animation: gradient 5s cubic-bezier(0.7, 0.01, 0.21, 1) infinite;
          animation: gradient 5s cubic-bezier(0.7, 0.01, 0.21, 1) infinite;
  will-change: transform;
}

.text-gradient-4 {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(134deg, #af34f1, #ec269d, #e31818);
  background-size: 175% 175%;
  -webkit-animation: gradient 5s cubic-bezier(0.7, 0.01, 0.21, 1) infinite;
          animation: gradient 5s cubic-bezier(0.7, 0.01, 0.21, 1) infinite;
  will-change: transform;
}

@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@-webkit-keyframes move-bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes move-bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes pullUpAnimation {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes pullUpAnimation {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.pull-up-enter-active {
  -webkit-animation: pullUpAnimation 400ms;
          animation: pullUpAnimation 400ms;
}

.pull-up-leave-active {
  animation: pullUpAnimation 400ms reverse;
}

@-webkit-keyframes pullUpBounceAnimation {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(5%);
  }
}

@keyframes pullUpBounceAnimation {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(5%);
  }
}
.pull-up-bounce-enter-active {
  -webkit-animation: pullUpBounceAnimation 500ms;
          animation: pullUpBounceAnimation 500ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.pull-up-bounce-leave-active {
  animation: pullUpAnimation 200ms reverse;
}

main article h1,
main article h2,
main article p  {
  word-break: keep-all;
}

span.italic {
  font-family: serif !important;
  margin-right: 4px !important;
}


.about_01 {
  background: #000 url(../images/sub/about_01.jpg) no-repeat top / 100%;
}


@media (max-width: 768px) {
.about_01 {
  background: #000 url(../images/sub/about_01m.jpg) no-repeat top / 100%;
}
}

.about_02 {
  background: #000 url(../images/sub/about_02_bg.jpg) no-repeat bottom / 100%;
}

.about_03 {
  overflow: hidden;
}

.about_03 .sliding-background1 {
  background-image: url("../images/sub/about_03_1.jpg");
  background-repeat: repeat-x;
  height: 263px;
  width: 7516px;
  -webkit-animation: slide1 95s linear infinite;
          animation: slide1 95s linear infinite;
  z-index: 1;
}
.about_03 .sliding-background2 {
  background-image: url("../images/sub/about_03_2.jpg");
  background-repeat: repeat-x;
  background-size: auto 263px;
  height: 263px;
  width: 7482px;
  -webkit-animation: slide2 105s linear infinite;
          animation: slide2 105s linear infinite;
  z-index: 1;
}

.about_03 .sliding-shadow {
  position: absolute;
  top: 0;  
  width: 100%;
  height: 263px;
  background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(255 255 255 / 0%) 50%, rgb(255 255 255) 100%);
  z-index: 2;  
}

@-webkit-keyframes slide1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-3758px, 0, 0);
  }
}

@keyframes slide1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-3758px, 0, 0);
  }
}
@-webkit-keyframes slide2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(3741px, 0, 0);
  }
}
@keyframes slide2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(3741px, 0, 0);
  }
}

.about_06 {
  background: #000 url(../images/sub/about_06.jpg) no-repeat top / 100%;
}


.my-ateez.figure {
  aspect-ratio: 3/4 !important;
}

.from-ateez.figure {
  aspect-ratio: unset;
}

.dropdown:focus-within .dropdown-menu {
  opacity:1;
  transform: translate(0) scale(1);
  visibility: visible;
}

.accordion-wrapper {
  box-shadow: 0 0 70px rgb(255 255 255 / 20%);
}

.accordion-header {
  position: relative;
  padding: 16px 0;
  min-height: 46px !important;
}

.accordion-content {
  transition: max-height 0.3s ease-out, padding 0.3s ease;
  }

img.arrow.collapsed {
  width: 9px;
  height: 7px;
  top: 43% !important;
  transform: rotate(0deg);
  transition: transform 250ms ease-in-out;
}
img.arrow.expanded {
  width: 9px;
  height: 7px;
  top: 43% !important;
  transform: rotate(180deg);
  transition: transform 250ms ease-in-out;
}

a.modal-open {
  color: #ffffff;
  text-decoration: underline;

}

.login p {
  max-width: 375px;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

/* Load Spinner */

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(86, 87, 254, 0.3);
  border-right: 1.1em solid rgba(86, 87, 254, 0.3);
  border-bottom: 1.1em solid rgba(86, 87, 254, 0.3);
  border-left: 1.1em solid #5657FE;
  transform: translateZ(0);
  -webkit-animation: load8 1s infinite linear;
  animation: load8 1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.swiper {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.swiper-slide div img {
    margin: 0 auto;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: -10px !important;
}

/* Gradient Border */
.border-gradient {
  background: linear-gradient(135deg, rgb(255 255 255), rgb(255 255 255 / 20%), rgb(255 255 255 / 85%)) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
}

.qr-border-gradient {
  background: linear-gradient(135deg, rgb(255 255 255), rgb(255 255 255 / 20%), rgb(255 255 255 / 85%)) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* @media (max-width:768px) {
  .border-gradient {
    background: linear-gradient(135deg, rgb(255 255 255), rgb(255 255 255 / 50%), rgb(255 255 255 / 75%)) border-box;
  }
} */

/* Notice */
.notice-wrapper {
  display: block;
  overflow-y: hidden;
  width: 100%;
  margin: auto;
}

.notice-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  width: 100%;
  overflow: hidden;
}

.notice-item .date {
  padding: 0 6px;
  border: 1px solid #f7f7f7;
}

.notice-item .subject {
  width: 100%;
  flex-grow: 1;
  text-align: left;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
}

/* .chakra-menu__menu-list, .css-0 {
  z-index: 20;
} */

.store-item h2 {
 line-height: 1.1;
}

@media (max-width:768px) {
  .store-item img.full-width {
    margin-left: -1.25rem;
    width: calc(100vw - 1.25rem);
    max-width: 100vw;
   }
}

.store-item.v-1 .point-value {
  color: #ff499b;
}

.store-item.v-2 .point-value {
  color: #7976da;
}

.store-item.v-3 .point-value {
  color: #777777;
} 

.dialog-pocadex .font-lores,
.store .font-lores,
.page-article .font-lores,
.header-menu .font-lores,
.my-page .font-lores {
  font-family: unset;
}

/* For CLAP GAME */
.font-lores,
.game-select .font-lores,
.body-game .font-lores,
.bg-machine .font-lores {
  font-family: 'lores-9-plus-wide', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

.white-shadow {
  text-shadow: 0 2px 1px #fff !important;
}

.black-shadow {
  text-shadow: 0 2px 1px #000 !important;
}

.btn-game {
  border: 1px solid #000;
}

.game-panel {
  top: 8px;
  width: 295px;
  height: 50px;
}

.bg-screen {
  width: 77%;
  width: 290px;
  margin: 28px auto;
}

.bg-version {
  width: 100%;
  height: 30px;
  background-image: url(../../minigame/clapgame/images/img_title_ver.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 30px;
  position: relative;
  top: -2px;
} 

.bg-game {
  opacity: 0.85;
}

.bg-game .star {
  position: absolute;
  background-image: url(../../minigame/clapgame/images/img_star.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-game .cross {
  position: absolute;
  background-image: url(../../minigame/clapgame/images/img_cross.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-game .star-01 {
  top: 23%;
  left: 23%;
  width: 15px;
  height: 15px;
  opacity: 0.55;
}
.bg-game .star-02 {
  top: 8%;
  left: 35%;
  width: 25px;
  height: 25px;
  opacity: 0.5;
}
.bg-game .star-03 {
  top: 2%;
  left: 10%;
  width: 38px;
  height: 38px;
  opacity: 0.25;
}
.bg-game .star-04 {
  top: 6%;
  right: 17%;
  width: 25px;
  height: 25px;
  opacity: 0.25;
}
.bg-game .star-05 {
  top: 27%;
  right: 37px;
  width: 30px;
  height: 30px;
  opacity: 0.25;
}
.bg-game .star-06 {
  top: 14%;
  right: 23%;
  width: 47px;
  height: 47px;
  opacity: 0.25;
  transform: rotate(-14deg);
}

.bg-game .cross-01 {
  top: 32%;
  left: 11%;
  width: 15px;
  height: 15px;
  opacity: 0.2;
  transform: rotate(8deg);
}
.bg-game .cross-02 {
  top: 1%;
  left: 18%;
  width: 12px;
  height: 12px;
  opacity: 0.3;
}
.bg-game .cross-03 {
  top: 19%;
  left: 28px;
  width: 40px;
  height: 40px;
  /* transform: rotate(-14deg); */
  opacity: 0.2;
}
.bg-game .cross-04 {
  top: 5%;
  right: 32%;
  width: 20px;
  height: 20px;
  opacity: 0.25;
  transform: rotate(-4deg);
}
.bg-game .cross-05 {
  top: 12%;
  left: 16%;
  width: 30px;
  height: 30px;
  opacity: 0.15;
  transform: rotate(28deg);
}          
.bg-game .cross-06 {
  top: 15%;
  right: 7%;
  width: 44px;
  height: 44px;
  opacity: 0.25;
}
.bg-machine {
  width: 100%;
  height: 680px;
  background-image: url(../../minigame/clapgame/images/bg-machine.png);
  background-repeat: no-repeat;
  background-size: auto 680px;
  background-position: top center;
}

.game-list {
  width: 260px;
  padding-top: 115px;
}

.game-list.selected-game {
  border: 2px solid #83ccf5;
  background: rgba(0, 0, 0, 0.3);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  border-radius: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15); 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #9c9c9c; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #c7c7c7; 
}


@media (max-width:449px) {
  .user-game-list {
  position: relative;
  height: calc(var(--vh, 1vh) * 100 - 450px);
  /* padding-right: 2px !important;
  margin-right: 4px !important;*/
  }
  /* .user-game-list.isMobile {
    position: relative;
    height: calc(var(--vh, 1vh) * 100 - 568px) !important; */
  }
.body-game canvas {
  margin: 0 auto !important;
  /* width: 100% !important; */
  border-radius: 8px;
}

.in-game canvas {
  /* width: 100% !important;
  max-width: 390px !important; */
  border-radius: 8px;
  /* height: auto !important; */
  /* aspect-ratio: 390 / 600 !important; */
}

.diy-preview canvas {
  margin: 0 auto !important;
  width: 100% !important;
  border-radius: 8px;
  border: 1px solid #fff;
  box-shadow: 1px 1px 2px 0px #000;
}

.game-preview canvas {
  border-radius: 8px;
}

#bodyelement.main {
  /* background: url(../../minigame/clapgame/images/bg-gradient.jpg) no-repeat center / 100% 100%; */
}

@media (max-width: 449px) {

  .body-game {
    max-width: 450px;
  }

  .lobby .bg-machine {
    display: none;
  }
  .lobby .game-panel {
    display: none !important;
  }
  /* .game-screen-bg {
    background: url(../../minigame/clapgame/images/frame_shadow.png) repeat-y center / 100%;
  } */
  /* .lobby .bg-screen {
    width: 100%;
    height: 100vh;
    margin: 0;
    background: url(../../minigame/clapgame/images/bg-screen.png) no-repeat top center / cover;
  } */
}

.lobby .bg-screen {
  width: 100%;
  height: 100vh;
} 

@media (min-width: 450px) {
  .body-game {
    top: -94px;
    max-width: 400px;
    padding-top: 175px;
  }
  .machine {
    display: flex;
  }
  .game-panel {
      top: 8px;
      width: 320px;
  }
  .bg-screen {
    width: 285px;
    margin: 37px auto;
  }
  .lobby .bg-screen {
    width: 443px;
    height: 667px;
    margin: 58px auto 0;
    /* background: url(../../minigame/clapgame/images/bg-screen.jpg) no-repeat top center / 100% 667px; */
  } 
  .bg-machine {
    width: 450px;
    height: 688px;
    margin-left: -225px;
    left: 50% !important;
    background-size: 100%;
   }

   .lobby .game-panel {
    top: 10px;
    width: 490px;
    height: 85px;
   } 

  .machine.lobby .bg-machine {
    width: 728px;
    height: 100vh;
    min-height: 909px;
    margin-left: -364px;
   }
   .game-list {
    width: 230px;
    padding-top: 28%;
  }
  
  .frame-top,
  .frame-bottom {
    display: none;
  }
  .game-screen {
    padding: 174px 18px 0;
  }
  .user-game-list {
    height: 242px;
  }
 }

 @media (min-width: 450px) and (min-height: 850px){
  .body-game {
    top: 0;
    transition: top ease 0.3s;
  }
 }

 @media (max-width: 449px) {
  .mobile-100vh {
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
  }
 }

/* buttons */

.btn-short {
  font-size: 16px;
  /* background-image: url(../../minigame/clapgame/images/btn_bg_short.svg) !important; */
  background-image: url(../../minigame/images/bg_btn.svg) !important;
  background-repeat: no-repeat;
  background-size: auto 50px;
  background-position: center center;
  border-radius: 100px;
  -webkit-backdrop-filter: ;
          backdrop-filter: ;
  cursor: pointer;
}

.btn-short.dark {
  background-color: #0000004d;
}

.btn-short.light {
  background-color: #FFFFFF4d;
}

.box-shadow {
  box-shadow: 1px 1px 2px #000;
}

/* video.js 자막 설정*/
.vjs-modal-dialog {
  height: 100% !important;
}
.vjs-modal-dialog-content {
  color: #000 !important;
}
.vjs-modal-dialog-content select {
  -moz-appearance: auto !important;
       appearance: auto !important;
  -webkit-appearance: auto !important
}

.video-click {
  pointer-events: none;
}

@media (max-width: 375px) and (max-height: 667px) {
  .mini-screen img.frame-top,
  .mini-screen img.frame-bottom {
    display: none;
  }
  .mini-screen .game-screen-bg {
    height: 100vh;
    padding-top: 6px;
    padding-bottom: 0;
    background: none;
    display: flex;
    align-items: center;
  }
  .mini-screen .in-game {
    padding-bottom: 0 !important;
    height: 100vh;
  }
}

 .blink{
  -webkit-animation:blink 2s ease-in-out infinite alternate;
  animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

.flicker {
  -webkit-animation: blink 7s infinite;
          animation: blink 7s infinite;
  transition: -webkit-animation ease;
  transition: animation ease;
  transition: animation ease, -webkit-animation ease;
}
@keyframes blink{
  0% {
    background: #10e07f;
  }
  20% {
    background: #51f422;
  }
  40% {
    background: #0ec43b;
  }
  60% {
    background: #0ad994
  }
  80% {
    background: #14e9e6;
  }
  100% {
    background: #0ad994;
  }
}

@-webkit-keyframes blink{
  0% {
    background: #10e07f;
  }
  20% {
    background: #51f422;
  }
  40% {
    background: #0ec43b;
  }
  60% {
    background: #0ad994
  }
  80% {
    background: #14e9e6;
  }
  100% {
    background: #0ad994;
  }
}

.minigame.chakra-modal__content {
  max-width: 320px;
  margin: 0;
}
.minigame.chakra-modal__content .chakra-modal__header {
  text-align: center;
}

.chakra-popover__content,
.chakra-modal__close-btn,
.btn-game button,
.btn-game button:focus,
.btn-game button:active {
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: none important;
       appearance: none important;
  -webkit-appearance: none important;
}

.minigame p {
  line-height: 1.2;
}

.alert {
  animation: alert-animation 1s steps(5, start) infinite;
  -webkit-animation: alert-animation 1s steps(5, start) infinite;
}
@keyframes alert-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes alert-animation {
  to {
    visibility: hidden;
  }
}
@keyframes alert {  
  0% { background-color: #e20000db; }
  100% { background-color: #740000; }
}
@-webkit-keyframes alert {
  0% { background-color: #e20000db; }
  100% { background-color: #740000; }
}

/* @keyframes alert {  
  0% {   box-shadow: inset 0 0 400px rgba(243, 0, 0, .75);}
  100% {   box-shadow: inset 0 0 400px rgba(243, 0, 0, 1); }
}
@-webkit-keyframes alert {
  0% {   box-shadow: inset 0 0 400px rgba(243, 0, 0, .75);}
  100% {   box-shadow: inset 0 0 400px rgba(243, 0, 0, 1); }
} */

.alert {
  -webkit-animation: alert 1s linear infinite;
  animation: alert 1s linear infinite;
}
.alert>span {
  display: inline-block;
}

/* Game Panel Rainbow Effect */

:root {
  --1: #f63c3c;
  --2: #ff6950;
  --3: #e8b71d;
  --4: #fcff7a;
  --5: #1de840;
  --6: #64b5cd;
  --7: #8643f8;
  --8: #dd00f3;
}

.rainbow {
  background: transparent;
  background-image: radial-gradient(circle, var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8));

  cursor: -webkit-grab;
  cursor: -moz-grab;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-animation: rainbow 2s infinite;
          animation: rainbow 2s infinite;
}

@-webkit-keyframes rainbow {
  0%, 100% {
    background-image: radial-gradient(circle, var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8));
  }
  12.5% {
    background-image: radial-gradient(circle, var(--8), var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7));
  }
  25% {
    background-image: radial-gradient(circle, var(--7), var(--8), var(--1), var(--2), var(--3), var(--4), var(--5), var(--6));
  }
  37.5% {
    background-image: radial-gradient(circle, var(--6), var(--7), var(--8), var(--1), var(--2), var(--3), var(--4), var(--5));
  }
  50% {
    background-image: radial-gradient(circle, var(--5), var(--6), var(--7), var(--8), var(--1), var(--2), var(--3), var(--4));
  }
  62.5% {
    background-image: radial-gradient(circle, var(--4), var(--5), var(--6), var(--7), var(--8), var(--1), var(--2), var(--3));
  }
  75% {
    background-image: radial-gradient(circle, var(--3), var(--4), var(--5), var(--6), var(--7), var(--8), var(--1), var(--2));
  }
  87.5% {
    background-image: radial-gradient(circle, var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8), var(--1));
  }
}

@keyframes rainbow {
  0%, 100% {
    background-image: radial-gradient(circle, var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8));
  }
  12.5% {
    background-image: radial-gradient(circle, var(--8), var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7));
  }
  25% {
    background-image: radial-gradient(circle, var(--7), var(--8), var(--1), var(--2), var(--3), var(--4), var(--5), var(--6));
  }
  37.5% {
    background-image: radial-gradient(circle, var(--6), var(--7), var(--8), var(--1), var(--2), var(--3), var(--4), var(--5));
  }
  50% {
    background-image: radial-gradient(circle, var(--5), var(--6), var(--7), var(--8), var(--1), var(--2), var(--3), var(--4));
  }
  62.5% {
    background-image: radial-gradient(circle, var(--4), var(--5), var(--6), var(--7), var(--8), var(--1), var(--2), var(--3));
  }
  75% {
    background-image: radial-gradient(circle, var(--3), var(--4), var(--5), var(--6), var(--7), var(--8), var(--1), var(--2));
  }
  87.5% {
    background-image: radial-gradient(circle, var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8), var(--1));
  }
}

/* header */
.headerAlertBtn{
  background: linear-gradient(180deg, rgb(5 4 51) 0, rgb(24 13 84 / 25%) 100%);
  mix-blend-mode: normal;
  /* border: 1px solid rgba(255, 255, 255, 0.6); */
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
}

.headerAlertBtn img,
.headerAlertBtn svg,
.graWhiteTrans img,
.graWhiteTrans svg,
.graSnow img,
.graSnow svg,
.graGreenBlue img,
.graGreenBlue svg {
  -webkit-filter: drop-shadow(1px 1px 0 #00000040);
          filter: drop-shadow(1px 1px 0 #00000040);
}

.search-neighbor-result svg {
  -webkit-filter: none;
          filter: none;
}

.search-neighbor-button::after {
  position: absolute;
  display: block;
  content: "ㅤ";
  background-image: url( "/assets/images/icons/white_triangle.svg" );
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  bottom: -17px;
  transform: rotate(180deg);
}

/* Feeds */

.feedContent .LikeButton {
  min-width: unset;
  padding: 0;
}

.feedText{
  color: black;
  font-size: 13px;
  overflow: hidden;
  /* text-overflow: ellipsis;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; */
}

.feedText p {
  padding: 0 4px;
  line-height: 1.35;
}

.feedTextDetail{
  font-size: 13px;
  white-space: pre-wrap;
}

.feedTextDetail p {
  padding: 0 16px;
}

.feedTextDetail iframe {
  margin: 8px 0;
  /* aspect-ratio: 16/9 !important; */
}

.feed-story .story-number {
  display: none;
}

.story-truncate {
  text-overflow: ellipsis;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.status-truncate {
  text-overflow: ellipsis;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#feed-contents .story-detail {
  margin-bottom: 20px;
}

#feed-contents .story-detail .feedText {
  padding: 12px 16px 10px 16px;
  font-size: 14px;
}

[lang="ko"] #feed-contents .story-detail .feedText {
  word-break: keep-all;
}

#feed-contents .story-truncate {
  text-overflow: unset;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.font-serif {
  font-family: 'Noto Serif JP','Nanum Myeongjo', serif !important;
}

span [data-text="true"] {
  /* display: block; */
  word-break: break-all;
}

/* my page avatar area */
.chakra-modal__content-container{
  z-index: 910 !important;
}

.chakra-modal__overlay{
  z-index: 900 !important;
  background: rgb(0 0 0 / 75%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.chakra-popover__content{
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.chakra-card {
  box-shadow: 0 4px 4px rgb(0 0 0 / 3%) !important;
}

.mypage-bg {
  background: url("../images/common/bg-sidebar.jpg") no-repeat center / cover;
}

.selectAvatarBG-1{
  /* background: radial-gradient(50% 50% at 50% 50%, #d2eeff 25.52%, #71dde6 100%); */
  background: #c1d2e1 url("../images/common/bg-pattern.png") no-repeat center / cover;
}

.selectAvatarBG-2{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 100%);
}

.myPageSwiper .swiper-button-prev:after, 
.myPageSwiper .swiper-button-next:after{
  position: absolute;
  padding: 10px;
  background: linear-gradient(360deg, rgb(0 0 0 / 5%), rgb(255 255 255 / 70%));
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 20px;
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
          filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: normal;
  box-shadow: 0 4px 4px #0000001a;
  /* text-shadow: transparent 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px !important; */
}

.myPageSwiper .swiper-button-prev:after {
  top: 35%;
  /* left: 15%; */
}

.myPageSwiper .swiper-button-next:after {
  top: 35%;
  /* right: 15%; */
}

.myPageSwiper .swiper-button-prev:after,
.myPageSwiper .swiper-button-next:after {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.template .swiper-button-prev {
  left: 0px !important;
  top: -14px !important;
  background: transparent !important;
}

.template .swiper-button-next {
  right: 0px !important;
  top: -14px !important;
  background: transparent !important;
}

.template .swiper-button-prev:after, 
.template .swiper-button-next:after{
  width: 52px;
  height: 52px;
  color: #909098;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: normal;
}

.activityBG {
  background: linear-gradient(180deg, #6fe3a3 0%, #8df1d1 100%);
}

.mypageText{
  line-height: 1.35;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}

.gridWrap {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(auto-fill, 50%);
}

.gridWrapUpload {
  display: grid;
  height: 100%;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, 31%);
  grid-auto-rows: 5px;
}

.checkbox-transparent span{
  background: transparent !important;
  border-color: transparent !important;
}

.ReactTags__tagInputField{
  /* background-image: url("../images/icons/icon_pic_plus.svg") !important; */
  background: #F7F9FE !important;
  width: 76px !important;
  border: 1px solid #C9D1E1 !important;
  border-radius: 6px !important;
  text-align: center !important;
  height: 25px ;
  margin-bottom: 3px;
  margin-top: 3px;
  outline: 0;
}

.tag-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 3px;
  margin-top: 3px;
  gap: 8px;
  height: 25px;
  background: #F7F9FE !important;
  border: 1px solid #C9D1E1 !important;
  border-radius: 6px !important;
  color: #34353A ;
}

.ReactTags__remove{
  position: relative;
  bottom: 1px;
  left: 2px;
  color: #C9D1E1;
  font-size: 20px;
  line-height: 20px;
}

.myAvatarPage .swiper-button-prev:after, 
.myAvatarPage .swiper-button-next:after{
  position: absolute;
  padding: 10px;
  //background: rgb(168 168 168 / 35%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: normal;
}

.swiper-cards {
  margin-top: 15px;
}

@media (max-height:630px) {
  .swiper-cards {
    margin-top: 25px;
    transform: scale(0.825);
    transition: transform 0.3s ease;
  }
}
@media (min-height:631px) and (max-height:660px) {
  .swiper-cards {
    margin-top: 12px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
  }
}

.selectedAvatarTab:after{
  position: absolute;
  content: url("/assets/images/icons/white_triangle.svg");
  transform: rotate(180deg);
  height: 10px;
  bottom: -15px;
}

.graPrimary {
  background: linear-gradient(135deg, #FF7DAC 0%, #ff3797 100%) !important;
}

.graWhiteTrans {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.graSnow {
  background: linear-gradient(180deg, #ffffffd4 0%, #c6c7d2e0 50%, #a5a9b3c4 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.graGreenBlue {
  background: linear-gradient(180deg, #FFFFFF 0%, #64D7C5 0.01%, #387DD6 100%);
}

.graGreen{
  background: linear-gradient(180deg, #66FF31 0%, rgba(118, 255, 132, 0) 105%);
}

.dropShadow_black {
  /* filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2)); */
}

.textShadow_black {
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
}

.cardShadow {
  box-shadow: 0 5px 20px 0 rgba(0,0,0,.05), 0 5px 12px 0 rgba(0,0,0,.02) !important;
}

.boxShadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.035);
}

.filterShadow {
 -webkit-filter: drop-shadow(1px 1px 0 #00000040);
         filter: drop-shadow(1px 1px 0 #00000040);
}

.filterShadow-room {
  -webkit-filter: drop-shadow(0px 2px 0 #00000040);
          filter: drop-shadow(0px 2px 0 #00000040);
  }

.gridItem {
  /* margin-bottom: 12px; */
}

.feedExpanded {
  /* -webkit-mask-image: url("/assets/images/icons/feedExpand.svg");
  mask-image: url("/assets/images/icons/feedExpand.svg"); */
  /* background-color: black; */
  background-image: url("/assets/images/icons/feedExpand.svg");
  background-repeat: no-repeat;
  background-position: center;
}

/* .feed-images {
  width: calc(100% + 40px);
  margin-left: -20px;
} */

.feed-images.nowrap,
.feed-img-multi {
  flex-wrap: wrap;
  align-items: stretch;
}

.feed-images.nowrap a {
  flex: 1 1 30%;
}

.feed-images.wrap {
  flex-direction: column;
  align-items: center;
}

.feed-img-multi {
  gap: 1px;
}

.feed-img-multi img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1;
}

.feed-thumbs:first-child:nth-last-child(2),
.feed-thumbs:first-child:nth-last-child(4),
.feed-thumbs:first-child:nth-last-child(2) ~ .feed-thumbs,
.feed-thumbs:first-child:nth-last-child(4) ~ .feed-thumbs {
  flex: 1 1 49%;
}

.feed-thumbs:first-child:nth-last-child(3),
.feed-thumbs:first-child:nth-last-child(5),
.feed-thumbs:first-child:nth-last-child(6),
.feed-thumbs:first-child:nth-last-child(3) ~ .feed-thumbs,
.feed-thumbs:first-child:nth-last-child(5) ~ .feed-thumbs,
.feed-thumbs:first-child:nth-last-child(6) ~ .feed-thumbs {
  flex: 1 1 33%;
}

.feed-thumbs:first-child:nth-last-child(2) ~ .feed-thumbs img,
.feed-thumbs:first-child:nth-last-child(3) ~ .feed-thumbs img,
.feed-thumbs:first-child:nth-last-child(6) ~ .feed-thumbs img {
  aspect-ratio: 1/1.25;
}

.feed-img-single .feed-thumbs img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

#feed-contents .feed-thumbs:first-child:nth-last-child(2) ~ .feed-thumbs img,
#feed-contents .feed-thumbs:first-child:nth-last-child(3) ~ .feed-thumbs img,
#feed-contents .feed-thumbs:first-child:nth-last-child(6) ~ .feed-thumbs img {
  aspect-ratio: unset;
}

img.avatar {
  -webkit-touch-callout:none !important;
  pointer-events: none;
}

#feed-contents.nowrap a {
  display: flex;
  aspect-ratio: 1/1 !important;
}

#feed-contents.nowrap a img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#feed-contents a:after,
#ai-contents .zoom-image {
  position: absolute;
  display: block;
  content: "ㅤ";
  background-image: url( "/assets/images/icons/icon-zoom.svg" );
  background-color: rgb(0 0 0 / 36%);
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  right: 5px;
  bottom: 5px;
  z-index: 1;
}

.flipX {
  transform: rotateX(180deg);
}

.pac-container {
  width: 100%;
  border-radius: 10px / 10px;
  background-color: "#CFCFD6";
  padding-bottom: 5px;
  padding-right: 10px;
  padding-left: 5px;
}
.pac-target-input {
  width: 100%;
}

.wall-message .swiper-button-next,
.wall-message .swiper-button-prev,
.wall-message .swiper-slide {
  opacity: 0 !important;
}

.wall-message .swiper-slide-active {
  opacity: 1 !important;
}

.find-swiper.swiper-slide {
  opacity: 0.85;
}

.find-swiper .swiper-slide-shadow {
  display: none;
}

.find-swiper.swiper-slide-active {
  opacity: 1;
  box-shadow: 0 10px 20px rgb(0 0 0 / 20%);
}

.find-swiper.swiper-slide-next,
.find-swiper.swiper-slide-prev {
  opacity: 1;
  box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}

.marquee-content {
  -webkit-animation: marquee 5s linear infinite running;
          animation: marquee 5s linear infinite running;
}

.marquee-tag {
  transition: all .2s ease;
}

@-webkit-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-100%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(-100%);
  }
}

.qrCodeBgGra{
  background: linear-gradient(138deg, #7FC8D8 0%, #7e46b8 100%);
  position: relative;
}

/* .qrCodeBgGra:before{
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: url(/assets/images/common/POPCON.svg);
  background-repeat: repeat-y;
  background-size: contain;
} */

.pswp__button--arrow .pswp__icn {
  height: 50px !important;
}

.pswp__icn {
  left: 0 !important;
}

.pswp__button--arrow--next .pswp__icn {
  right: 0 !important;
  left: auto !important;
}

:root {
  --clip-path-1: polygon(50% 45%,57% 48%,57% 52%,50.00% 55%,43% 52%,43% 48%);
  --clip-path-2: polygon(50% 8%, 100% 35%, 100% 63%, 50% 92%, 0 65%, 0 36%);
  --clip-path-3: polygon(50% 0%,100% 0%,100% 100%,50% 100%,0% 100%,0% 0%);
}

.reveal-room {
  position: relative;
  width: 100%;
  height: 100%;
}

.reveal-room.ready {
  -webkit-clip-path: var(--clip-path-1);
          clip-path: var(--clip-path-1); height: auto;
}
.reveal-room.load {
  -webkit-animation: reveal-room 0.75s cubic-bezier(1, 0, 0.45, 1);
          animation: reveal-room 0.75s cubic-bezier(1, 0, 0.45, 1);
}

.setting-menu {
  -webkit-margin-start: 0 !important;
          margin-inline-start: 0 !important;
  -webkit-margin-end: 0 !important;
          margin-inline-end: 0 !important;
}

@-webkit-keyframes reveal-room {
  0% {
    -webkit-clip-path: var(--clip-path-1);
            clip-path: var(--clip-path-1); height: auto;
  }
  80% {
    -webkit-clip-path: var(--clip-path-2);
            clip-path: var(--clip-path-2); height: auto;
  }
  100% {
    -webkit-clip-path: var(--clip-path-3);
            clip-path: var(--clip-path-3); height: 100%;
  }
}

@keyframes reveal-room {
  0% {
    -webkit-clip-path: var(--clip-path-1);
            clip-path: var(--clip-path-1); height: auto;
  }
  80% {
    -webkit-clip-path: var(--clip-path-2);
            clip-path: var(--clip-path-2); height: auto;
  }
  100% {
    -webkit-clip-path: var(--clip-path-3);
            clip-path: var(--clip-path-3); height: 100%;
  }
}

.PinturaRadioGroupOption > label > div > span {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.PinturaShapePreset .PinturaDragButton[data-loader][data-error]:before, .PinturaShapePreset .PinturaDragButton[data-loader][data-load]:before {
  transform: scale(0) !important;
}

.PinturaDragButton > img {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.morph{
  background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 150px; height: 144px;
  -webkit-animation: morph 3s linear infinite;
          animation: morph 3s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.morph:before,
.morph:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
  will-change: border-radius, transform, opacity;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%);
}

.morph:before{
  -webkit-animation: morph 3s linear infinite;
          animation: morph 3s linear infinite;
  opacity: .21;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

.morph:after{
  -webkit-animation: morph 3s linear infinite;
          animation: morph 3s linear infinite;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
  opacity: .89;
  content: "Hi";
  line-height: 120px;
  text-indent: -21px;
}

@-webkit-keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@-webkit-keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 0;
  }
}

@keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 0;
  }
}

.wrapperLarge {
  max-width: calc(100% - 40px) !important;
}

@media (min-width: 600px) {
  .wrapperLarge {
    max-width: 600px !important;
  }  
}


.wrapperLarge > .textWrapperLarge > .titleWrapper {
  display: none;
}

.placeholder-white > .Placeholder__root {
  font-family: sans-serif !important;
  color: white;
}

@media (min-width: 600px) {
  .siteNameLinkWrapper {
      font-size: 13px !important;
  }  
}

.wrapperLarge > .textWrapperLarge {
  padding: 10px 0;
}

.wrapperLarge > .textWrapperLarge > p {
  font-size: 12px !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.responsiveVideo {
  aspect-ratio: 16/9 !important;
}

.react-autosuggest__suggestion--highlighted > div {
  background-color: #0000001a;
}
/* Animation for New noti. */

.ringing {
  -webkit-animation: ringing 5s infinite;
  animation: ringing 5s infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  transform-origin: 50%; 
  display: inline-block;
}

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

  2% {
      transform: rotate(10deg)
  }

  4% {
      transform: rotate(-10deg)
  }

  6% {
      transform: rotate(8deg)
  }

  8% {
      transform: rotate(-8deg)
  }

  10% {
      transform: rotate(4deg)
  }

  12% {
      transform: rotate(-4deg)
  }

  14% {
      transform: rotate(2deg)
  }

  16% {
      transform: rotate(0)
  }

  to {
      transform: rotate(0)
  }
}

@keyframes ringing {
  0% {
      transform: rotate(0)
  }

  2% {
      transform: rotate(10deg)
  }

  4% {
      transform: rotate(-10deg)
  }

  6% {
      transform: rotate(8deg)
  }

  8% {
      transform: rotate(-8deg)
  }

  10% {
      transform: rotate(4deg)
  }

  12% {
      transform: rotate(-4deg)
  }

  14% {
      transform: rotate(2deg)
  }

  16% {
      transform: rotate(0)
  }

  to {
      transform: rotate(0)
  }
}

/* Home > Tabmenu */

.tabs-container {
  /* background: rgba(0, 0, 0, 0.8); */
  height: 55px;
  z-index: 97;
  position: absolute;
  width: 100%;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  
}

.tabs-container .tab-menu {
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  margin: 0 auto;

}

.tab-menu .popcon-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tab-menu .popcon-search li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 400ms;
}

/* .tab-menu .popcon-search li a:hover {
  opacity: 0.8;
} */

.link-search {
  background: url('images/search-icon.svg');
  display: block;
  background-position: center;
  background-size: 18px;
  height: 50px;
  width: 20px;
  background-repeat: no-repeat;
}

.search-container {
  display: flex;
  align-items: start;
  top: 0;
  left: 0;
  right: 0;  
  width: 100%;
  height: 55px;
  margin: 0 auto;
  gap: 10px;
  position: absolute;
  z-index: 90;
}

.search-container.hide {
  opacity: 0;
  pointer-events: none;
}

.search-container.show {
  width: 100%;
  height: 55px;
  margin: 0;
}

.search-container .search-box {
  display: flex;
  align-items: center;
  width: calc(100% - 120px);
  max-width: 300px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 10px auto 0;
  border-radius: 12px;
  overflow: hidden;
  /* background: rgb(0 0 0 / 75%);
   border: 1px solid rgb(255 255 255 / 50%); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
}

.search-container .link-search {
  opacity: 0.5;
}

.search-container .link-close {
  display: flex;
  align-items: center;
  opacity: 0.5;
  color: #000000;
  font-size: 15px;
  cursor: pointer;
  transition: all 400ms;
}

.search-container .link-close:hover {
  opacity: 0.7;
}

.search-container form {
  width: 100%;
  margin: 0 auto;
}

.search-container form input {
  width: 100%;
  height: 35px;
  border: 0;
  outline: none;
  background: transparent;
  color: #000;
  font-size: 14px;
}

.overlay.show {
  position: fixed;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 10;
}

.search-container .search-links {
  width: 100%;
  background: #fff;
  /* position: absolute; */
  /* top: 45px; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* max-width: 300px; */
  /* border-radius: 0 0 10px 10px; */
  /* overflow: hidden;*/
}

.search-container .search-links h2 {
  text-transform: uppercase;
  font-size: 12px;
  color: #6e6e73;
  margin: 0 32px;
  margin-top: 10px;
}

.search-container .search-links ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 100%;
  gap: 3px;
}

.search-container.hide .search-links ul {
  opacity: 0;
  transform: translateY(20px);
  transition: transform ease 0.5s;
}

.search-container.show .search-links ul {
  padding: 6px;
  opacity: 1;
  transform: translateY(0px);
  transition: transform ease 0.5s;
}

.search-container .search-links ul li a {
  width: 100%;
  font-size: 14px;
  color: #1d1d1f;
  text-decoration: none;
  font-weight: 400;
}

.search-container .search-links ul li.search-item:hover {
  background: #f5f5f5;
}

.popcon-search li {
  transition: all 400ms ease;
}

.popcon-search.hide li {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Animation */

.overlay {
  transition: all 400ms ease;
}

.search-container.show .search-links ul li {
  height: 30px;
}

.search-container form,
.search-container .link-search {
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms cubic-bezier(0.6, 0, 0.05, 1);
  transition-delay: 150ms;
}

.search-container.hide form,
.search-container.hide .link-search {
  opacity: 0;
  transform: translateX(50px);
}

.search-container .link-search {
  opacity: 0.6;
}

.search-container.hide .link-close {
  opacity: 0;
}

.search-container .link-close,
.search-container .search-box .search-icon {
  opacity: 0.75;
  transition: all 500ms ease;
  transition-delay: 150ms;
}

.load-container {
  position: relative;
  width: 100%;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
}
.load-container .spinner {
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  -webkit-animation: rotate-animate 4s linear infinite;
          animation: rotate-animate 4s linear infinite;
}
.load-container .spinner:nth-child(1):before, .load-container .spinner:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.45));
  background-size: 125px 125px;
  background-repeat: no-repeat;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
}
.load-container .spinner:nth-child(2), .load-container .spinner:nth-child(4) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-filter: hue-rotate(295deg);
          filter: hue-rotate(295deg);
}
.load-container .spinner i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #00fff9;
  border-radius: 50%;
  z-index: 100;
  box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9, 0 0 80px #00fff9, 0 0 90px #00fff9, 0 0 100px #00fff9;
}
.load-container .spinner span {
  position: absolute;
  inset: 12px;
  background: #000;
  border-radius: 50%;
  z-index: 1;
}

.avatar-container {
  position: absolute;
  width: 35.5px;
  height: 35.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-container .spinner {
  position: absolute;
  width: 35.5px;
  height: 35.5px;
  border-radius: 50%;
  -webkit-animation: rotate-animate 6s linear infinite;
          animation: rotate-animate 6s linear infinite;
}
.avatar-container .spinner:nth-child(1):before,
.avatar-container .spinner:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(40, 108, 255, 0.85));
  background-size: 35px 35px;
  background-repeat: no-repeat;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
}
.avatar-container .spinner:nth-child(2), .avatar-container .spinner:nth-child(4) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-filter: hue-rotate(295deg);
          filter: hue-rotate(295deg);
}
.avatar-container .spinner i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: #00ffff;
  border-radius: 50%;
  z-index: 100;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 60px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 90px #00ffff, 0 0 100px #00ffff;
}
.avatar-container .spinner span {
  position: absolute;
  inset: 12px;
  background: #000;
  border-radius: 50%;
  z-index: 1;
}

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

@keyframes rotate-animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.pswp__bg::after {
  position: absolute;
  display: block;
  content: "ㅤ";
  background-image: url( "/assets/images/icons/icon_pinch.svg" );
  background-size: 25px 25px;
  background-position: center;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  margin-left: -12px;
  left: 50%;  
  bottom: 25px;
}

.reflect,
.member-info .avatar,
.gridItem .avatar {
  -webkit-box-reflect: below -2px linear-gradient(transparent, transparent, #0005);
}

.miniroom img {
  -webkit-filter: drop-shadow(0 4px 12px #00000040);
          filter: drop-shadow(0 4px 12px #00000040);
}

/* Moving BG */

@-webkit-keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.my-pet .bg-default,
.my-pet .bg-cat,
.my-pet .bg-dog,
.my-pet .bg-robot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
}

.my-pet .bg-robot {
  background: linear-gradient(#23a1bc, #723ce5);
}

.my-pet .bg-default {
  background: linear-gradient(#75e1f8, #2febaa);
 }

.my-pet .bg-cat {
  background: linear-gradient(#42b943, #27ad9b);
}

.my-pet .bg-dog {
  background: linear-gradient(#edbf10, #f28f28);
}

.my-pet .bg-cat span,
.my-pet .bg-dog span {
  width: 65vmin;
  height: 65vmin;
  border-radius: 50vmin;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  -webkit-animation: move;
          animation: move;
  -webkit-animation-duration: 45;
          animation-duration: 45;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.my-pet span:nth-child(0) {
  top: 81%;
  left: 11%;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
  transform-origin: -24vw 23vh;
  box-shadow: 100vmin 0 13.0923065395033vmin currentColor;
}
.my-pet span:nth-child(1) {
  top: 45%;
  left: 28%;
  -webkit-animation-duration: 49s;
          animation-duration: 49s;
  -webkit-animation-delay: -31s;
          animation-delay: -31s;
  transform-origin: -5vw -3vh;
  box-shadow: -100vmin 0 12.986746722880453vmin currentColor;
}
.my-pet span:nth-child(2) {
  top: 58%;
  left: 2%;
  -webkit-animation-duration: 21s;
          animation-duration: 21s;
  -webkit-animation-delay: -34s;
          animation-delay: -34s;
  transform-origin: 12vw -5vh;
  box-shadow: -100vmin 0 12.694242825379114vmin currentColor;
}
.my-pet span:nth-child(3) {
  top: 94%;
  left: 69%;
  -webkit-animation-duration: 32s;
          animation-duration: 32s;
  -webkit-animation-delay: -29s;
          animation-delay: -29s;
  transform-origin: -1vw -3vh;
  box-shadow: -100vmin 0 12.56218398666716vmin currentColor;
}
.my-pet span:nth-child(4) {
  top: 72%;
  left: 38%;
  -webkit-animation-duration: 53s;
          animation-duration: 53s;
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
  transform-origin: 21vw 11vh;
  box-shadow: -100vmin 0 12.786332379500061vmin currentColor;
}
.my-pet span:nth-child(5) {
  top: 64%;
  left: 12%;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  transform-origin: -5vw 6vh;
  box-shadow: 100vmin 0 13.277220991217225vmin currentColor;
}
.my-pet span:nth-child(6) {
  top: 34%;
  left: 43%;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-delay: -12s;
          animation-delay: -12s;
  transform-origin: 6vw 21vh;
  box-shadow: 100vmin 0 13.382461138929195vmin currentColor;
}
.my-pet span:nth-child(7) {
  top: 74%;
  left: 71%;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-delay: -28s;
          animation-delay: -28s;
  transform-origin: 9vw 14vh;
  box-shadow: 100vmin 0 12.790661949202486vmin currentColor;
}
.my-pet span:nth-child(8) {
  top: 84%;
  left: 42%;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-delay: -38s;
          animation-delay: -38s;
  transform-origin: -16vw -7vh;
  box-shadow: -100vmin 0 13.46879715323381vmin currentColor;
}
.my-pet span:nth-child(9) {
  top: 30%;
  left: 98%;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
  transform-origin: 11vw 24vh;
  box-shadow: 100vmin 0 12.881963984417334vmin currentColor;
}
.my-pet span:nth-child(10) {
  top: 7%;
  left: 63%;
  -webkit-animation-duration: 23s;
          animation-duration: 23s;
  -webkit-animation-delay: -47s;
          animation-delay: -47s;
  transform-origin: 25vw -16vh;
  box-shadow: 100vmin 0 13.161916553558576vmin currentColor;
}
.my-pet span:nth-child(11) {
  top: 9%;
  left: 54%;
  -webkit-animation-duration: 52s;
          animation-duration: 52s;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  transform-origin: -5vw -17vh;
  box-shadow: -100vmin 0 13.300832933188435vmin currentColor;
}
.my-pet span:nth-child(12) {
  top: 27%;
  left: 49%;
  -webkit-animation-duration: 21s;
          animation-duration: 21s;
  -webkit-animation-delay: -26s;
          animation-delay: -26s;
  transform-origin: -15vw 1vh;
  box-shadow: 100vmin 0 12.880762436320286vmin currentColor;
}
.my-pet span:nth-child(13) {
  top: 68%;
  left: 22%;
  -webkit-animation-duration: 42s;
          animation-duration: 42s;
  -webkit-animation-delay: -36s;
          animation-delay: -36s;
  transform-origin: 25vw 6vh;
  box-shadow: -100vmin 0 13.123261926784723vmin currentColor;
}
.my-pet span:nth-child(14) {
  top: 18%;
  left: 62%;
  -webkit-animation-duration: 55s;
          animation-duration: 55s;
  -webkit-animation-delay: -35s;
          animation-delay: -35s;
  transform-origin: 21vw 18vh;
  box-shadow: -100vmin 0 12.714565758136086vmin currentColor;
}
.my-pet span:nth-child(15) {
  top: 16%;
  left: 55%;
  -webkit-animation-duration: 36s;
          animation-duration: 36s;
  -webkit-animation-delay: -26s;
          animation-delay: -26s;
  transform-origin: 21vw -13vh;
  box-shadow: -100vmin 0 12.719145169968954vmin currentColor;
}
.my-pet span:nth-child(16) {
  top: 90%;
  left: 75%;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-delay: -20s;
          animation-delay: -20s;
  transform-origin: -23vw 18vh;
  box-shadow: -100vmin 0 12.745521292455006vmin currentColor;
}
.my-pet span:nth-child(17) {
  top: 21%;
  left: 72%;
  -webkit-animation-duration: 49s;
          animation-duration: 49s;
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
  transform-origin: -6vw 22vh;
  box-shadow: -100vmin 0 12.629230105250738vmin currentColor;
}
.my-pet span:nth-child(18) {
  top: 64%;
  left: 52%;
  -webkit-animation-duration: 49s;
          animation-duration: 49s;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  transform-origin: -22vw 14vh;
  box-shadow: 100vmin 0 13.114055909636692vmin currentColor;
}
.my-pet span:nth-child(19) {
  top: 81%;
  left: 50%;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
  transform-origin: 19vw -6vh;
  box-shadow: 100vmin 0 13.27367025405886vmin currentColor;
}

.my-pet .bg-cat span:nth-child(0) {
  color: #70a9e6;
}
.my-pet .bg-cat span:nth-child(1) {
  color: #ee8ec4;
}
.my-pet .bg-cat span:nth-child(2) {
  color: #f897b4;
}
.my-pet .bg-cat span:nth-child(3) {
  color: #e69e9e;
}
.my-pet .bg-cat span:nth-child(4) {
  color: #8bd6ec;
}
.my-pet .bg-cat span:nth-child(5) {
  color: #aff36c;
}
.my-pet .bg-cat span:nth-child(6) {
  color: #f897b4;
}
.my-pet .bg-cat span:nth-child(7) {
  color: #8bd6ec;
}
.my-pet .bg-cat span:nth-child(8) {
  color: #e3d291;
}
.my-pet .bg-cat span:nth-child(9) {
  color: #e3d291;
}
.my-pet .bg-cat span:nth-child(10) {
  color: #e8eef5;
}
.my-pet .bg-cat span:nth-child(11) {
  color: #f8d2de;
}
.my-pet .bg-cat span:nth-child(12) {
  color: #85eac6;
}
.my-pet .bg-cat span:nth-child(13) {
  color: #e1cd73;
}
.my-pet .bg-cat span:nth-child(14) {
  color: #70a9e6;
}
.my-pet .bg-cat span:nth-child(15) {
  color: #9ae8bd;
}
.my-pet .bg-cat span:nth-child(16) {
  color: #f8cd2a;
}
.my-pet .bg-cat span:nth-child(17) {
  color: #fa8cad;
}
.my-pet .bg-cat span:nth-child(18) {
  color: #70a9e6;
}
.my-pet .bg-cat span:nth-child(19) {
  color: #e3d291;
}


.my-pet .bg-dog span:nth-child(0) {
  color: #70a9e6;
}
.my-pet .bg-dog span:nth-child(1) {
  color: #d978af;
}
.my-pet .bg-dog span:nth-child(2) {
  color: #f897b4;
}
.my-pet .bg-dog span:nth-child(3) {
  color: #e69e9e;
}
.my-pet .bg-dog span:nth-child(4) {
  color: #8bd6ec;
}
.my-pet .bg-dog span:nth-child(5) {
  color: #aff36c;
}
.my-pet .bg-dog span:nth-child(6) {
  color: #f897b4;
}
.my-pet .bg-dog span:nth-child(7) {
  color: #8bd6ec;
}
.my-pet .bg-dog span:nth-child(8) {
  color: #e3d291;
}
.my-pet .bg-dog span:nth-child(9) {
  color: #e3d291;
}
.my-pet .bg-dog span:nth-child(10) {
  color: #a7c4e7;
}
.my-pet .bg-dog span:nth-child(11) {
  color: #f8d2de;
}
.my-pet .bg-dog span:nth-child(12) {
  color: #85eac6;
}
.my-pet .bg-dog span:nth-child(13) {
  color: #9c95b4;
}
.my-pet .bg-dog span:nth-child(14) {
  color: #d58ef1;
}
.my-pet .bg-dog span:nth-child(15) {
  color: #9ae8bd;
}
.my-pet .bg-dog span:nth-child(16) {
  color: #f8cd2a;
}
.my-pet .bg-dog span:nth-child(17) {
  color: #90d07f;
}
.my-pet .bg-dog span:nth-child(18) {
  color: #70a9e6;
}
.my-pet .bg-dog span:nth-child(19) {
  color: #e3d291;
}

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

@keyframes bg-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.my-pet .bg-robot::after {
  --size: 250px;
  --speed: 25s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  content: '';
  width: var(--size);
  height: var(--size);
  -webkit-filter: blur(calc(var(--size) / 5));
          filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(hsl(158, 82, 57, 85%), hsl(252, 82, 57));
  -webkit-animation: bg-rotate var(--speed) var(--easing) alternate infinite;
          animation: bg-rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

@media (min-width: 720px) {
  .my-pet .bg-robot::after {
    --size: 500px;
  }
}

.my-pet-button {
  position: relative;
}

.my-pet-button.bg-on::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  background-image: radial-gradient(circle, #dceb95b8 0%, transparent 60%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

/* PWA Mode */

body.pwa footer {
  padding-bottom: 20px;
}

body.pwa footer.store-footer {
  padding-bottom: 110px;
}

body.pwa footer.purchasehistory-footer {
  height: 220px; 
  padding-bottom: 20px;
}

body.pwa .comment > div {
  padding-bottom: 30px;
}

body.pwa .buy-button button,
body.pwa .confirm-button {
  height: 75px;  
  padding-bottom: 20px;
}

body.pwa #user-list {
  padding-bottom: 90px !important;
}

body.pwa .receiveall-button {
  margin-bottom: 100px;
}

body.pwa .receiveall-button {
  margin-bottom: 110px;
}

body.pwa .PinturaRoot[data-env~=portrait]>.PinturaNavMain {
  margin-bottom: 2.75 !important;
}

body.pwa #drawer_container .addImage {
  height: 62px;
  padding-bottom: 20px;
}


@media (min-width:500px) {
  .buy-button,
  .confirm-button,
  .receive-button {
    width: 500px !important;
    left: 50% !important;
    transform: translateX(-50%);
    padding-bottom: 0 !important;
  }

  .absolute-center {
      left: 50% !important;
      transform: translateX(-50%) !important;
  }
}

.recent-reply .PlaygroundEditorTheme__paragraph {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


/* Style for PhothoEditor */
.PinturaRoot .PinturaButtonExport {
  background-color: #FF3797 !important;
}

.PinturaButtonIcon g polyline {
  stroke: #ffffff;
}

.PinturaRoot>.PinturaNav .PinturaButton:not(.PinturaButtonIconOnly):not(.PinturaDropdownIconOnly) .PinturaButtonLabel {
  color: #ffffff;
}

PinturaRoot[data-env~=portrait]>.PinturaNavTools {
  padding: 0.75em 0 !important;
}

.rmc-picker-item {
  color: #000000 !important;
  font-weight: 600;
}


/* Shine for PhothoEditor */

button .shine {
  --btnColor: transparent;
  --ShinyColor: #ff37989e;
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  background: var(--btnColor);
  background: linear-gradient(-45deg, var(--btnColor) 40%, var(--ShinyColor) 50%, var(--btnColor) 60%);
  background-size: 800%;
  -webkit-animation: shine 20s infinite;
  animation: shine 20s infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: cubic-bezier(0.4, 0.05, 0.68, 1);
  box-shadow: inset 0 0 20px rgb(9 6 116 / 25%);
}

@-webkit-keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}

@keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}

.pswp__img {
  -webkit-user-select: all !important;
    -moz-user-select: all !important;
     -ms-user-select: all !important;
       user-select: all !important;
}

.round-container {
  background: #000 url("../images/icons/btn_go.png") no-repeat center / cover !important;
  transition: -webkit-filter ease 0.3s;
  transition: filter ease 0.3s;
  transition: filter ease 0.3s, -webkit-filter ease 0.3s;
  filter: hue-rotate(307deg);
  -webkit-filter: hue-rotate(307deg);
}

.round-container:hover {
  filter: hue-rotate(307deg);
  -webkit-filter: hue-rotate(307deg);
  transition: -webkit-filter ease 0.3s;
  transition: filter ease 0.3s;
  transition: filter ease 0.3s, -webkit-filter ease 0.3s;
}

.round-container:disabled {
  opacity: 1 !important;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: -webkit-filter ease 0.3s;
  transition: filter ease 0.3s;
  transition: filter ease 0.3s, -webkit-filter ease 0.3s;
}

.round-content {
  -webkit-animation:blink 1s linear infinite;
  animation:blink 1s linear infinite;
}

.round-container:disabled .round-content {
  -webkit-animation:none;
  animation:none;
}

/* @-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
} */

.round-content .start_spin:after {
 content: 'START';
}

.round-container:disabled .round-content .start_spin:after {
  content: 'Spinning';
  font-size: 13px;
  color: #e31818 !important;
 }

/* .roulette img[alt="roulette-static"] {
  -webkit-filter: drop-shadow(0 5px 1px #00000090);
          filter: drop-shadow(0 5px 1px #00000090);
} */

.roulette-frame1 {
  background: url("../images/common/img_rouletteframe01.png") no-repeat center / 100% 100%;
}

.roulette-frame2 {
  background: url("../images/common/img_rouletteframe02.png") no-repeat center / 100% 100%;
}

.blind-content {
  min-height: 150px;
}

.blind-content:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #323440cc;
  border-radius: 6px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(20px);
}

.account-icon svg {
  width: 16px;
  height: 16px;
}

.account-icon svg g {
  fill: #1a202c;
}

.user-point .my-point img {
  width: 28px !important;
  height: 28px !important;
}
}}