@charset "UTF-8";
/*-----------------------*/
/*      Initialize       */
/*-----------------------*/
/*CSSリセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html {
  font-size: 100%;
  line-height: 1em;
}

@font-face {
  font-family: 'AlminiSans';
  src: url("../fonts/AlumniSans-SemiBold.ttf") format("truetype");
}
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, code, em, img, small,
strong, sub, sup, tt, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, embed, figure, figcaption,
input, button, textarea, canvas, audio, video,
footer, header, hgroup, menu, nav, section {
  box-sizing: border-box;
}

/*-----------------------*/
/*       Variables       */
/*-----------------------*/
/*-----------------------*/
/*    Global settings    */
/*-----------------------*/
strong, h1, h2, h3, h4, h5, h6 {
  font-family: "RodinNTLGPro-B", sans-serif;
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 125%;
}

p {
  font-size: 94%;
  padding: 12px 0;
  line-height: 160%;
}

ul {
  list-style-type: disc;
  list-style-position: outside;
  padding: 6px 0 10px 24px;
}

li {
  font-size: 94%;
  padding: 0;
  line-height: 160%;
}

small.xsmall {
  font-size: 0.7vw;
  font-family: "RodinNTLGPro-DB", sans-serif;
}

small {
  font-size: 1.2vw;
  font-family: "RodinNTLGPro-DB", sans-serif;
}

.tf-w90 {
  transform: scaleX(0.9);
}

.dispframe {
  position: relative;
  max-width: 864px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/*-----------------------*/
/*       Mainframe       */
/*-----------------------*/
html, body {
  height: 100%;
  overflow: hidden;
}

html {
  background-color: #000;
}

body {
  position: relative;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

/*-----------------------*/
/*       Map parts       */
/*-----------------------*/
/*---- マップ画像アサイン ----*/
#map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  background-image: url(../images/bg/bg-240524.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imgbox, .ribbon-title, .msg-window, .island, .island-0, .island-1, .island-2, .island-3, .island-4, .island-5-dis, .island-6-dis, .island-7-dis, .island-8-dis, .island-9-dis, .app-icon-s, .app-icon-sr, .app-icon-l, .app-icon-lr, .app-tips-m, .app-tips-w, .app-tips-t {
  display: block;
  position: absolute;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ribbon-title {
  top: 3vw;
  right: 0.75vw;
  width: 29.883vw;
  height: 7.032vw;
  background-image: url(../images/ribbon-title.png);
}

.msg-window {
  bottom: 4.25vw;
  right: 1.25vw;
  width: 52.474vw;
  height: 8.724vw;
  background-image: url(../images/msg-window.png);
  opacity: 1;
  transition: opacity 0.5s 50ms;
}
.msg-window.active {
  opacity: 0;
}

/*---- clickable mapping ----*/
svg#land-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
}

/*---- Islands variables ----*/
.island, .island-0, .island-1, .island-2, .island-3, .island-4, .island-5-dis, .island-6-dis, .island-7-dis, .island-8-dis, .island-9-dis {
  transition: background-image 0.6s;
}
.island a, .island-0 a, .island-1 a, .island-2 a, .island-3 a, .island-4 a, .island-5-dis a, .island-6-dis a, .island-7-dis a, .island-8-dis a, .island-9-dis a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.island-0 {
  top: 16.45vw;
  left: 34.59vw;
  width: 25.52vw;
  height: 19.22vw;
  background-image: url(../images/islands/island-00-en.webp);
}
.island-0.selected {
  background-image: url(../images/islands/island-00-sel.webp);
}
.island-0.selected + .island-info-0 {
  opacity: 1;
}

.island-1 {
  top: 1.25vw;
  left: 57.91vw;
  width: 38.72vw;
  height: 53.98vw;
  background-image: url(../images/islands/island-01-en.webp);
}
.island-1.selected {
  background-image: url(../images/islands/island-01-sel.webp);
}
.island-1.selected + .island-info-1 {
  opacity: 1;
}

.island-2 {
  top: 34.31vw;
  left: 35.98vw;
  width: 21.48vw;
  height: 20.96vw;
  background-image: url(../images/islands/island-02-en.webp);
}
.island-2.selected {
  background-image: url(../images/islands/island-02-sel.webp);
}
.island-2.selected + .island-info-2 {
  opacity: 1;
}

.island-3 {
  top: 21.48vw;
  left: 1.73vw;
  width: 32.45vw;
  height: 32.81vw;
  background-image: url(../images/islands/island-03-en.webp);
}
.island-3.selected {
  background-image: url(../images/islands/island-03-sel.webp);
}
.island-3.selected + .island-info-3 {
  opacity: 1;
}

.island-4 {
  top: 1.57vw;
  left: 4.97vw;
  width: 37.63vw;
  height: 25.31vw;
  background-image: url(../images/islands/island-04-en.webp);
}
.island-4.selected {
  background-image: url(../images/islands/island-04-sel.webp);
}
.island-4.selected + .island-info-4 {
  opacity: 1;
}

.island-5-dis {
  top: 0.21vw;
  left: 40.56vw;
  width: 16.33vw;
  height: 16.51vw;
  background-image: url(../images/islands/island-05-dis.webp);
}
.island-5-dis.selected + .island-info-5 {
  opacity: 1;
}

.island-6-dis {
  top: 12.98vw;
  left: 52.35vw;
  width: 10.7vw;
  height: 8.2vw;
  background-image: url(../images/islands/island-06-en.webp);
}
.island-6-dis.selected + .island-info-6 {
  opacity: 1;
}

.island-7-dis {
  top: 26.36vw;
  left: 65.81vw;
  width: 17.68vw;
  height: 16.43vw;
  background-image: url(../images/islands/island-07-dis.webp);
}
.island-7-dis.selected + .island-info-7 {
  opacity: 1;
}

.island-8-dis {
  top: 30.01vw;
  left: 54.17vw;
  width: 12.08vw;
  height: 11.59vw;
  background-image: url(../images/islands/island-08-en.webp);
}
.island-8-dis.selected + .island-info-8 {
  opacity: 1;
}

.island-9-dis {
  top: 27.48vw;
  left: 27.15vw;
  width: 14.17vw;
  height: 14.24vw;
  background-image: url(../images/islands/island-09-en.webp);
}
.island-9-dis.selected + .island-info-9 {
  opacity: 1;
}

.island-info, .island-info-0, .island-info-1, .island-info-2, .island-info-3, .island-info-4, .island-info-5, .island-info-6, .island-info-7, .island-info-8, .island-info-9, .island-info-10, .island-info-0b, .island-info-p {
  position: absolute;
  top: 21.25vw;
  left: 40.5vw;
  width: 14.4vw;
  height: 9vw;
  opacity: 0;
  transition: opacity 0.3s;
  perspective: 436px;
  transform-style: preserve-3d;
}
.island-info.selected, .selected.island-info-0, .selected.island-info-1, .selected.island-info-2, .selected.island-info-3, .selected.island-info-4, .selected.island-info-5, .selected.island-info-6, .selected.island-info-7, .selected.island-info-8, .selected.island-info-9, .selected.island-info-10, .selected.island-info-0b, .selected.island-info-p {
  opacity: 1;
}

.island-info-0b {
  opacity: 1;
}
.island-info-0b .island-name {
  transform: scaleX(0.85) scaleY(1.2) rotateX(30deg) !important;
}
.island-info-0b.masked {
  opacity: 0 !important;
}

.island-info-p {
  opacity: 1;
}
.island-info-p .island-name {
  transform: scaleX(0.85) scaleY(1.2) rotateX(30deg) !important;
}
.island-info-p.masked {
  opacity: 0 !important;
}

.island-name {
  position: relative;
  top: 2.2vw;
  width: 100%;
  height: 2vw;
  color: #497ab6;
  font-family: "AlminiSans", sans-serif;
  font-size: 2.4vw;
  text-align: center;
  transform: scaleY(1.2) rotateX(30deg) !important;
}

.island-description {
  position: relative;
  top: calc(2.5vw - 3px);
  width: 100%;
  height: 2vw;
  color: #497ab6;
  font-family: "RodinNTLGPro-M", sans-serif;
  font-size: 0.975vw;
  text-align: center;
  transform: scaleY(1.1) rotateX(30deg);
}

/*-----------------------*/
/*      App window       */
/*-----------------------*/
.app-window, .app-window-0, .app-window-1, .app-window-2, .app-window-3, .app-window-4 {
  position: absolute;
  top: 50%;
  right: -100vw;
  width: 100%;
  height: 0;
  opacity: 1;
  transform: translateY(-50%);
  background: -moz-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, transparent);
  background: -webkit-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, transparent);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0));
  transition: opacity 0.3s, height 0.4s;
}
.app-window.active, .active.app-window-0, .active.app-window-1, .active.app-window-2, .active.app-window-3, .active.app-window-4 {
  right: 0;
  opacity: 1;
  height: 100%;
}
.app-window.active .app-disp-area, .active.app-window-0 .app-disp-area, .active.app-window-1 .app-disp-area, .active.app-window-2 .app-disp-area, .active.app-window-3 .app-disp-area, .active.app-window-4 .app-disp-area {
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}

.app-window-L2p, .app-window-4-L2, .app-window-9-L2 {
  position: absolute;
  top: 50%;
  right: -100vw;
  width: 100%;
  height: 0;
  opacity: 0;
  transform: translateY(-50%);
  background-color: rgba(68, 68, 68, 0.6);
  transition: opacity 0.3s, height 0.4s;
}
.app-window-L2p.active, .active.app-window-4-L2, .active.app-window-9-L2 {
  right: 0;
  opacity: 1;
  height: 100%;
}
.app-window-L2p.active .doc-disp-area-p, .active.app-window-4-L2 .doc-disp-area-p, .active.app-window-9-L2 .doc-disp-area-p {
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}

.doc-disp-area-p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 63.64vh;
  height: 90vh;
  border-radius: 1.5vw;
  opacity: 0;
  transition: opacity 0.3s;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 2vw #fff;
}

.app-disp-area {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 50%;
  opacity: 0;
}
.app-disp-area .area-map {
  position: absolute;
  top: 50%;
  left: 12.5vw;
  transform: translateY(-50%);
  width: 30vw;
  height: 30vw;
  border-radius: 1.5vw;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 2vw #d8fbf6;
}

.area-name {
  position: absolute;
  top: 1.15vw;
  left: 46vw;
  width: 46vw;
  height: 3.2vw;
  color: #94f5e8;
  border-bottom: solid 0.125vw #94f5e8;
  padding-left: 0.125vw;
  text-shadow: 0 0 0.4vw #94f5e8;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 2.4vw;
  transform: skew(-8deg, 0);
}

.area-description {
  position: absolute;
  top: 4.4vw;
  right: 8.25vw;
  width: 40vw;
  height: 2vw;
  color: #fff;
  text-align: right;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  transform: skew(-8deg, 0);
}

.window-btn-area {
  position: absolute;
  bottom: 2.75vw;
  left: 33vw;
  width: 46vw;
  text-align: center;
}
.window-btn-area .window-btn {
  display: inline-block;
  margin: 0 auto;
  padding: 1vw 1.5vw;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 1.8vw;
  color: #629987;
  background-color: #94f5e8;
  cursor: pointer;
  border-radius: 1.8vw;
  transition: color 0.3s, background-color0 0.3s, box-shadow 0.3s;
}
.window-btn-area .window-btn:hover {
  color: #90c8b6;
  background-color: #d8fbf6;
  box-shadow: 0 0 1vw #d8fbf6;
}

.app-window-0 {
  background: -moz-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.8) 85%, transparent);
  background: -webkit-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.8) 85%, transparent);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0));
}
.app-window-0.active .map-info-area {
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}
.app-window-0 .map-info-area {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 85%;
  opacity: 0;
}
.app-window-0 .map-info-area h3 {
  position: relative;
  top: 0;
  left: 0;
  width: 70vw;
  color: #94f5e8;
  margin-top: 1.15vw;
  margin-left: auto;
  margin-right: auto;
  border-bottom: solid 0.125vw #94f5e8;
  padding-left: 0.125vw;
  text-shadow: 0 0 0.4vw #94f5e8;
  font-family: "RodinNTLGPro-EB", sans-serif;
  font-size: 1.5vw;
  text-align: center;
  transform: skew(-8deg, 0);
}
.app-window-0 .map-info-area p {
  position: relative;
  top: -0.2vw;
  right: 0;
  width: 80vw;
  color: #fff;
  text-align: center;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5vw;
  transform: skew(-8deg, 0);
}
.app-window-0 .window-btn-area {
  top: 1.5vw;
  left: 0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.wba-posfix {
  margin-left: 12.5vw;
  margin-bottom: -1vw;
}

/*---- App window variables ----*/
.app-window-1 .app-disp-area .area-map {
  background-image: url(../images/areamaps/island-single-1.webp);
}

.app-window-2 .app-disp-area .area-map {
  background-image: url(../images/areamaps/island-single-2.webp);
}

.app-window-3 .app-disp-area .area-map {
  background-image: url(../images/areamaps/island-single-3.webp);
}

.app-window-4 .app-disp-area .area-map {
  background-image: url(../images/areamaps/island-single-4.webp);
}

/*-----------------------*/
/*       App guide       */
/*-----------------------*/
.app-icon-s, .app-icon-sr {
  width: 2vw;
  height: 2vw;
  border-radius: 0.2vw;
  box-shadow: 0 0 0.3vw #fff, 0 0 0.5vw #fff, 0 0 0.8vw #94f5e8;
  transition: transform 0.3s;
  cursor: pointer;
}
.app-icon-s:hover, .app-icon-sr:hover {
  transform: scale(1.15);
}
.app-icon-s a, .app-icon-sr a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.app-icon-sr {
  border-radius: 50%;
}

.app-icon-l, .app-icon-lr {
  width: 5vw;
  height: 5vw;
  border-radius: 0.5vw;
  box-shadow: 0 0 0.8vw #fff;
}

.app-icon-lr {
  border-radius: 50%;
}

/*
.icon-beater {
	@include setvp(animation-duration, 1.5s );
  animation-iteration-count:infinite;
  @include setvp(animation-name, iconbeat1);
  @include setvp(animation-timing-function, linear);
  &:hover {
  	@include setvp(animation-name, iconbeat0);
  }
}
@keyframes iconbeat1 {
  0%   { transform: scale(1.15); }
  5%   { transform: scale(1.15); }
  45%  { transform: scale(1.0); }
  55%  { transform: scale(1.0); }
  95%  { transform: scale(1.15); }
  100% { transform: scale(1.15); }
}
*/
.app-guide {
  position: absolute;
  top: 12vw;
  left: 35vw;
  width: 42vw;
  height: 6vw;
  transition: opacity 0.3s;
}

.guide-id-0 {
  opacity: 0;
}
.guide-id-0.active {
  opacity: 1;
}

.guide-id-1 {
  opacity: 0;
}
.guide-id-1.active {
  opacity: 1;
}

.guide-id-2 {
  opacity: 0;
}
.guide-id-2.active {
  opacity: 1;
}

.guide-id-3 {
  opacity: 0;
}
.guide-id-3.active {
  opacity: 1;
}

.guide-id-4 {
  opacity: 0;
}
.guide-id-4.active {
  opacity: 1;
}

.guide-id-5 {
  opacity: 0;
}
.guide-id-5.active {
  opacity: 1;
}

.guide-id-6 {
  opacity: 0;
}
.guide-id-6.active {
  opacity: 1;
}

.guide-id-7 {
  opacity: 0;
}
.guide-id-7.active {
  opacity: 1;
}

.guide-id-8 {
  opacity: 0;
}
.guide-id-8.active {
  opacity: 1;
}

.guide-id-9 {
  opacity: 0;
}
.guide-id-9.active {
  opacity: 1;
}

.guide-id-10 {
  opacity: 0;
}
.guide-id-10.active {
  opacity: 1;
}

.app-title {
  position: absolute;
  top: 0.4vw;
  left: 6.75vw;
  width: 33vw;
  color: #d6c6ff;
  text-shadow: 0 0 0.4vw #b599ff;
  font-family: "RodinNTLGPro-B", sans-serif;
  font-size: 1.5vw;
  transform: skew(-8deg, 0);
}

.app-description {
  position: absolute;
  top: 2.25vw;
  left: 6.75vw;
  width: 36vw;
  color: #bbb;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.15vw;
  line-height: 1.8;
  transform: skew(-8deg, 0);
}

.app-annotation {
  position: absolute;
  top: 7.5vw;
  left: 0;
  width: 43.25vw;
  color: #b8b752;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 0.95vw;
  line-height: 1.4;
  transform: skew(-8deg, 0);
}

/*---- App icon variables ----*/
.icon-img1-1 {
  background-image: url(../images/icons/1-1_soundraw.webp);
}

.icon-pos1-1 {
  top: 11.42vw;
  left: 14.08vw;
}

.icon-img1-2 {
  background-image: url(../images/icons/1-2_suno.webp);
}

.icon-pos1-2 {
  top: 4.95vw;
  left: 6.75vw;
}

.icon-img1-3 {
  background-image: url(../images/icons/1-3_boomy.webp);
}

.icon-pos1-3 {
  top: 12.33vw;
  left: 7.06vw;
}

.icon-img1-4 {
  background-image: url(../images/icons/1-4_aiva.webp);
}

.icon-pos1-4 {
  top: 15.35vw;
  left: 17.16vw;
}

.icon-img1-5 {
  background-image: url(../images/icons/1-5_ai-compose.webp);
}

.icon-pos1-5 {
  top: 22.76vw;
  left: 7.77vw;
}

.icon-img2-1 {
  background-image: url(../images/icons/2-1_invideo-ai.webp);
}

.icon-pos2-1 {
  top: 14.47vw;
  left: 13.35vw;
}

.icon-img2-2 {
  background-image: url(../images/icons/2-2_fliki.webp);
}

.icon-pos2-2 {
  top: 4.64vw;
  left: 10.85vw;
}

.icon-img2-3 {
  background-image: url(../images/icons/2-3_metahuman.webp);
}

.icon-pos2-3 {
  top: 12.34vw;
  left: 8.77vw;
}

.icon-img2-4 {
  background-image: url(../images/icons/2-4_watermark_remover.webp);
}

.icon-pos2-4 {
  top: 15.91vw;
  left: 18.53vw;
}

.icon-img2-5 {
  background-image: url(../images/icons/2-5_uniconverter.webp);
}

.icon-pos2-5 {
  top: 10.48vw;
  left: 22.22vw;
}

.icon-img2-6 {
  background-image: url(../images/icons/2-6_vrew.webp);
}

.icon-pos2-6 {
  top: 15.66vw;
  left: 6.67vw;
}

.icon-img3-1 {
  background-image: url(../images/icons/3-1_create.webp);
}

.icon-pos3-1 {
  top: 8.89vw;
  left: 16.48vw;
}

.icon-img3-2 {
  background-image: url(../images/icons/3-2_gamma.webp);
}

.icon-pos3-2 {
  top: 22.44vw;
  left: 20.65vw;
}

.icon-img4-1 {
  background-image: url(../images/icons/4-1_prezi.webp);
}

.icon-pos4-1 {
  top: 17.92vw;
  left: 5.41vw;
}

.icon-img4-2 {
  background-image: url(../images/icons/4-2_chatgpt.webp);
}

.icon-pos4-2 {
  top: 14.25vw;
  left: 17.28vw;
}

/*-----------------------*/
/*        App tips       */
/*-----------------------*/
.app-tips-m, .app-tips-w, .app-tips-t {
  top: 8vw;
  left: 46vw;
  width: 45.9375vw;
  height: 12.63vw;
  padding-left: 4.12vw;
  color: #fff;
  font-family: "RodinNTLGPro-DB", sans-serif;
  font-size: 1.2vw;
  line-height: 1.8;
  border-radius: 0.5vw;
  box-shadow: 0 0 1vw #d8fbf6;
}
.app-tips-m p, .app-tips-w p, .app-tips-t p {
  transform: skew(-8deg, 0);
}

.app-tips-m {
  padding-top: 3.6vw;
  background-image: url(../images/msgbox/msgbox-mac.webp);
}

.app-tips-w {
  padding-top: 2.8vw;
  background-image: url(../images/msgbox/msgbox-win.webp);
}

.app-tips-t {
  padding-top: 3.6vw;
  background-image: url(../images/tab-apps.jpg);
}

.app-tips-2-5,
.app-tips-2-6 {
  left: 100vw;
  opacity: 1;
}
.app-tips-2-5 .app-tips-m, .app-tips-2-5 .app-tips-w, .app-tips-2-5 .app-tips-t,
.app-tips-2-6 .app-tips-m,
.app-tips-2-6 .app-tips-w,
.app-tips-2-6 .app-tips-t {
  opacity: 0;
  transition: opacity, 0.4s;
}
.app-tips-2-5.active,
.app-tips-2-6.active {
  left: 0;
}
.app-tips-2-5.active .app-tips-m, .app-tips-2-5.active .app-tips-w, .app-tips-2-5.active .app-tips-t,
.app-tips-2-6.active .app-tips-m,
.app-tips-2-6.active .app-tips-w,
.app-tips-2-6.active .app-tips-t {
  opacity: 1;
}

.app-circle-m, .app-circle-2-5-m, .app-circle-2-6-m, .app-circle-w, .app-circle-2-5-w, .app-circle-2-6-w, .app-circle-t {
  position: absolute;
  border-radius: 50%;
  border: solid 0.3vw #ff0;
}

.app-circle-m, .app-circle-2-5-m, .app-circle-2-6-m {
  top: 8.7vw;
  width: 4vw;
  height: 4vw;
}

.app-circle-w, .app-circle-2-5-w, .app-circle-2-6-w {
  top: 9.3vw;
  width: 4vw;
  height: 4vw;
}

.app-circle-t {
  top: 7.9vw;
  width: 5vw;
  height: 5vw;
}

.app-circle-2-5-m {
  left: 0.7vw;
}

.app-circle-2-6-m {
  left: 3.4vw;
}

.app-circle-2-5-w {
  left: 8.4vw;
}

.app-circle-2-6-w {
  left: 5.0vw;
}

/*-----------------------*/
/*        options        */
/*-----------------------*/
/*---- object icon variables ----*/
.portal {
  position: absolute;
  top: 1.6vw;
  left: 0.4vw;
  width: 6.25vw;
  height: 6.25vw;
  perspective: 150px;
  transform-style: preserve-3d;
  transform: scale(1.8);
}
.portal .layer1, .portal .layer2, .portal .layer3, .portal .layer4, .portal .layer5, .portal .layer6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 5vw;
  height: 5vw;
  transform: rotateX(19deg) rotateZ(-1.6deg) scaleY(0.7);
}
.portal .layer6.active .img6 {
  opacity: 0.8;
}
.portal .img1, .portal .img2, .portal .img3, .portal .img4, .portal .img5, .portal .img6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5vw;
  height: 5vw;
  background-size: contain;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.portal .img1 {
  background-image: url(../images/objects/portal-L1.webp);
  animation-name: portal-L1;
  animation-duration: 29s;
}
.portal .img2 {
  background-image: url(../images/objects/portal-L2.webp);
  animation-name: portal-L2;
  animation-duration: 37s;
}
.portal .img3 {
  background-image: url(../images/objects/portal-L3.webp);
  animation-name: portal-L3;
  animation-duration: 73s;
}
.portal .img4 {
  background-image: url(../images/objects/portal-L4.webp);
  animation-name: portal-L4;
  animation-duration: 31s;
}
.portal .img5 {
  background-image: url(../images/objects/portal-L5.webp);
  animation-name: portal-L5;
  animation-duration: 4s;
}
.portal .img6 {
  background-image: url(../images/objects/portal-L5.webp);
  animation-name: portal-L6;
  animation-duration: 100s;
  transition: opacity 0.3s;
  opacity: 0;
}
@keyframes portal-L1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes portal-L2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes portal-L3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes portal-L4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes portal-L5 {
  0% {
    transform: rotate(0deg);
    opacity: 0.7;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0.7;
  }
}
@keyframes portal-L6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
a.trigger-p {
  display: block;
  position: absolute;
  top: 3.6vw;
  left: 2.7vw;
  width: 8.8vw;
  height: 6.2vw;
  border-radius: 50%;
  cursor: pointer;
}