<!--HTML-->
<div class="miro">
<nazv>Лабиринт стихий • 요소의 미로 • Yoson miro</nazv>
<text>Дебют группы состоялся 22 июня 2023 года. В этот день в 2023 году в Китае отмечают один из важнейших традиционных праздников — Праздник драконьих лодок (Дуаньу). Он празднуется ежегодно на 5-ый день 5-го месяца по Лунному календарю (поэтому его часто называют «праздником двойной пятерки»). Жители Поднебесной с большой радостью встречают этот день, так как он символизирует наступление долгожданного лета. Несмотря на то, что день Дуаньу является традиционным китайским праздником, он также приобрел популярность в странах, которые исторически имеют культурные связи с китайской цивилизацией – Корее, Японии, Вьетнаме, Малайзии, Индонезии, Сингапуре и др.

Группа не просто так дебютирует в значимый для китайского календаря день — это тесно связано с выбранным концептом для продвижения. Так как состав группы несколько нетипичен для корейского шоу-бизнеса, было решено подчеркивать отличия и рассчитывать не только и не столько на корейскую аудиторию, но изначально ориентироваться на продвижение по миру.

Группа будет продвигаться под названием «Лабиринт стихий». Концепт основан на одной из основных категорий китайской философии — системе первоэлементов У-син. Как эта система включает в себя элементы, характеризующие состояние и взаимосвязь всех существующих предметов и явлений, так и группа совмещает участников с разными характерами, историями, прошлым, объединенных одной целью и одной музыкой.</text>
</div>


<br>
<br>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;400;700&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
<div id="lv-risingsun">

  <input type="radio" id="rs01" name="rstabs" checked>
  <label for="rs01" title="byun min-woo"><img src="https://forumstatic.ru/files/001b/de/42/82715.jpg" alt="TAB 1" /></label>

   <input type="radio" id="rs02" name="rstabs">
  <label for="rs02" title="Xiao Dejun"><img src="https://forumstatic.ru/files/001b/de/42/97741.jpg" alt="TAB 2" /></label>

  <input type="radio" id="rs03" name="rstabs">
  <label for="rs03" title="Park Seonghwa"><img src="https://forumstatic.ru/files/001b/de/42/95128.jpg" alt="TAB 3" /></label>

<input type="radio" id="rs04" name="rstabs">
  <label for="rs04" title="Matsumoto Minoru"><img src="https://forumstatic.ru/files/001c/2a/e2/51869.jpg" alt="TAB 4" /></label>

  <input type="radio" id="rs05" name="rstabs">
  <label for="rs05" title="Marcel Liu"><img src="https://forumstatic.ru/files/001b/de/42/20124.jpg" alt="TAB 5" /></label>

  <input type="radio" id="rs06" name="rstabs">
  <label for="rs06" title="Yang Jungwon"><img src="https://forumstatic.ru/files/001b/de/42/18870.jpg" alt="TAB 6" /></label>

  <section class="rs-char rs-01">
    <div class="rs-name">Byun Min-woo</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001b/de/42/18731.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
      </div>
    </div>
    
    <div class="rs-line"> </div>

    <div class="rs-threads">
    <dat>(10.12.1998) </dat>
<poz> лидер, ведущий рэпер, ведущий танцор, саб-вокалист</poz>
<sootv><b>Соответствия:</b>
• Император <br>
• Сын неба <br>
• Человек <br>
• Пурпурный <br>
• Пион <br>
</sootv>

    </div>
  </section>

    <section class="rs-char rs-02">
    <div class="rs-name">Xiao Dejun</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001b/de/42/52449.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
      </div>
    </div>

    <div class="rs-line"> </div>
    
    <div class="rs-threads">
     <dat> (12.07.1999) </dat>
<poz> главный вокалист, танцор</poz>
<sootv><b>Соответствия:</b>
• Металл <br>
• Белый тигр <br>
• Запад <br>
• Осень <br>
• Закат <br>
• Белый <br>
• Хризантема</sootv>
    </div>
  </section>

  <section class="rs-char rs-03">
    <div class="rs-name">Park Seonghwa</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001b/de/42/13937.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
      </div>
    </div>

    <div class="rs-line"> </div>
    
       <div class="rs-threads">
     <dat> (03.04.2001)</dat>
<poz> ведущий вокалист, ведущий танцор, вижуал</poz>
<sootv><b>Соответствия:</b>
• Дерево <br>
• Лазурный дракон <br>
• Восток <br>
• Весна <br>
• Утро <br>
• Синий, зеленый <br>
• Орхидея</sootv>
    </div>
  </section>

<section class="rs-char rs-04">
    <div class="rs-name">Matsumoto Minoru</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001c/2a/e2/19837.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
      </div>
    </div>

    <div class="rs-line"> </div>
    
    <div class="rs-threads">
    <dat> (11.06.2003) </dat>
<poz> главный танцор, ведущий рэпер, саб-вокалист, вижуал</poz>
<sootv><b>Соответствия:</b>
• Огонь <br>
• Алый феникс <br>
• Юг <br>
• Лето <br>
• Полдень <br>
• Красный <br>
• Бамбук</sootv>
    </div>
  </section>

  <section class="rs-char rs-05">
    <div class="rs-name">Marcel Liu</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001b/de/42/85071.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
        <p>detail</p>
      </div>
    </div>

    <div class="rs-line"> </div>
    
       <div class="rs-threads">
     <dat> (22.08.2003)</dat>
<poz> главный рэпер, саб-вокалист, танцор</poz>
<sootv><b>Соответствия:</b>
• Земля <br>
• Желтый цилин <br>
• Центр <br>
• Межсезонье <br>
• Вечер <br>
• Желтый <br>
• Лотос</sootv>
    </div>
  </section>

  <section class="rs-char rs-06">
    <div class="rs-name">Yang Jungwon</div>
    <div class="rs-av">
      <img src="https://forumstatic.ru/files/001b/de/42/46493.jpg" alt="BIG IMAGE" />
      <div class="rs-stats">
        <p>detail</p>
        <p>detail</p>
        <a href="#"><p>link</p></a>
        <p>detail</p>
      </div>
    </div>

    <div class="rs-line"> </div>
    
       <div class="rs-threads">
     <dat> (09.02.2004)</dat>
<poz> ведущий вокалист, танцор, макнэ</poz>
<sootv><b>Соответствия:</b>
• Вода <br>
• Черная черепаха <br>
• Север <br>
• Зима <br>
• Полночь <br>
• Черный, голубой <br>
• Мэйхуа</sootv>
    </div>
  </section>
</div>
<style>
:root {
    --rs-bg: #170E2D;
    --rs-dk: #4E1C39;
    --rs-accent: #9da8b7;
    --rs-medium: #9499b7;
    --rs-light: #cdc6bb;
    --rs-white: #c7c9d5;
    --rs-fancy: onest;
    --rs-tran: ease 0.8s;
    --rs-grad: #d7d4db;
}
 
#lv-risingsun {
    font-family: onest;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    height: 540px;
    position: relative;
    overflow: hidden;
    color: #000000;
    padding: 30px;
    width: 650px;
    margin: 0 auto;
    background: var(--profile-bg2) center / cover;
    border: 1px solid #d7d2b7;
}

#lv-risingsun a { text-decoration: none !important; }
#lv-risingsun input { display: none; }

#lv-risingsun p {
  font-family: var(--rs-fancy);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1.8px;  
}

#lv-risingsun input:checked+label {
    opacity: 1;
    color: #282828;
    background: #a2a75d;
}

#lv-risingsun label {
    opacity: 0.5;
    background: #eae7ea;
    color: #cb995e;
    border: 5px double #ded8da;
    position: relative;
    top: 10px;
    left: -5px;
    transition: var(--rs-tran);
    text-align: center;
    display: block;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 100;
    overflow: hidden;
}

#lv-risingsun label img {
  mix-blend-mode: luminosity;
  filter: grayscale(1);
  width: 50px;
  height: 50px;
  object-fit: cover;
}

#lv-risingsun input:checked+label img {
    mix-blend-mode: normal;
    filter: grayscale(1);
}

.rs-name {
    mix-blend-mode: screen;
    text-transform: none;
    color: #848943;
    font-family: 'berold';
    font-size: 34px;
    line-height: 1;
    font-weight: 100;
    width: 450px;
    overflow-x: visible;
    text-align: left;
    position: absolute;
    top: -5px;
    right: -12px;
    z-index: 7;
}

.rs-long {
  font-size: 52px;
  line-height: 1.2;
}

.rs-av {
    z-index: 6;
    position: absolute;
    right: -170px;
    top: -40px;
    background: transparent;
    opacity: 0.9;
    /* border-radius: 50%; */
    width: 250px;
    height: 600px;
    overflow: hidden;
    border-left: 1px solid #07201c;
}

.rs-av img {
    mix-blend-mode: inherit;
    filter: grayscale(1);
    width: 250px;
    height: inherit;
    object-fit: cover;
}

.rs-stats {
  z-index: 8;
  position: absolute;
  right: 280px;
  bottom: -18px;
  width: 220px;
  opacity: 0;
  transition: var(--rs-tran);
}

.rs-stats p {
  font-weight: 700;
  color: var(--rs-medium);
  text-align: right;
  background: var(--rs-bg);
  padding: 8px 8px 8px 32px;
  margin: 4px 0;
}

.rs-stats a p {
  color: var(--rs-white);
  text-decoration: none !important;
  transition: var(--rs-tran);
}





.rs-stats a:hover p {
  letter-spacing: 2.4px !important;
  background: var(--rs-medium);
  color: var(--rs-bg);
}

.rs-char {
  opacity: 0;
  transition: var(--rs-tran);
  width: 445px;
  height: 500px;
  position: absolute;
  top: 40px;
  left: 100px;
}

.rs-av:hover .rs-stats {
  opacity: 1;
  transform: translateY(-70px);
}

#lv-risingsun #rs01:checked + label ~ .rs-01 { opacity: 1; z-index: 5; }
#lv-risingsun #rs02:checked + label ~ .rs-02 { opacity: 1; z-index: 5; }
#lv-risingsun #rs03:checked + label ~ .rs-03 { opacity: 1; z-index: 5; }
#lv-risingsun #rs04:checked + label ~ .rs-04 { opacity: 1; z-index: 5; }
#lv-risingsun #rs05:checked + label ~ .rs-05 { opacity: 1; z-index: 5; }
#lv-risingsun #rs06:checked + label ~ .rs-06 { opacity: 1; z-index: 5; }

.rs-line {
  background: var(--rs-grad);
  height: 1px;
  width: 260px;
  position: relative;
  margin-top: 45px;
  margin-left: 8px;
}

.rs-threads {
    width: 75%;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;
    padding: 10px 2px 10px 0px;
    overflow-x: hidden;
    text-align: left;
    /* border: red 1px solid; */
}

.rs-threads text {
    display: block;
    height: 255px;
    text-align: justify;
    margin-top: 10px;
    font-size: 11px;
    font-family: jost;
    line-height: 16px;
    overflow-y: auto;
    padding-right: 10px;
    width: auto;
}

.rs-threads dat {
    display: block;
    font-size: 14px;
    font-family: jost;
}
.rs-threads sootv {
    margin-top: 10px;
    display: block;
    font-size: 13px;
}

.rs-threads sootv b {
    display: block;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    margin-bottom: 10px;
    background: #f8f5e3;
    padding: 5px 10px 3px 10px;
    border: 1px solid #d7d2b7;
}

.rs-threads poz {
    display: block;
    font-family: 'Onest';
    font-size: 14px;
    letter-spacing: 1px;
    margin: 5px 0 0 0;
}

.rs-type {
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0px;
  margin-top: 0px;
  font-style: normal;
}

.rs-type:nth-of-type(1) { color: var(--rs-accent); }
.rs-type:nth-of-type(2) { color: var(--rs-medium); break-before: column; }
.rs-type:nth-of-type(3) { color: var(--rs-dk); break-before: column; }

.rs-threads a {
  display: inline-block;
  margin-top: 6px;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  color: var(--rs-light);
  transition: var(--rs-tran);
  border-bottom: 1px solid transparent;
}

.rs-threads a:hover {
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--rs-light);
}

.rs-threads::-webkit-scrollbar { height: 5px; }
.rs-threads::-webkit-scrollbar-track { background: var(--rs-grad); border: 2px solid var(--rs-bg); }
.rs-threads::-webkit-scrollbar-thumb { border-radius: 5px; background: var(--rs-grad); }


.rs-credit {
  font-size: 10px;
  position: relative;
  margin: 5px auto;
  width: 560px;
  text-align: right;
}

.rs-credit a {
  text-decoration: none;
  color: var(--rs-accent);
  transition: var(--rs-tran);
}

.rs-credit a:hover {
  color: var(--rs-light);
}

.miro {
    background: var(--profile-bg2) center/cover;
    border: 1px solid #d7d2b7;
    color: #000000;
    border-radius: 0;
    padding: 30px;
    width: 650px;
    margin: 0 auto;
    border-radius: 0;
}


.miro nazv {
    display: block;
    text-transform: none;
    font-family: 'berold', 'Onest';
    font-size: 33px;
    line-height: 1;
    text-align: center;
    color: var(--accent2);
}

.miro text {
    display: block;
    text-align: justify;
    margin-top: 10px;
    font-size: 11px;
    font-family: onest;
    line-height: 19px;
    overflow-y: auto;
    white-space: break-spaces;
}


@media screen and (max-width: 540px) {
.rs-av {
    z-index: 6;
    position: absolute;
    right: -168px;
    top: -40px;
    background: transparent;
    opacity: 0.9;
    /* border-radius: 50%; */
    width: 150px;
    height: 600px;
    overflow: hidden;
    display: none;
}

#lv-risingsun {
    font-family: onest;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    height: 540px;
    position: relative;
    overflow: hidden;
    color: #000000;
    padding: 30px;
    width: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.rs-char {
    opacity: 0;
    transition: var(--rs-tran);
    width: 80%;
    height: auto;
    position: absolute;
    top: 40px;
    left: 80px;
}

.rs-name {
    mix-blend-mode: screen;
    text-transform: none;
    font-size: 30px;
    line-height: 1;
    font-weight: 100;
    width: auto;
    overflow-x: visible;
    text-align: left;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 7;
}

.rs-line {
    height: 1px;
    width: 90%;
    position: relative;
    margin-top: 35px;
    margin-left: 0px;
}

.rs-threads {
    width: 100%;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;
    padding: 10px 2px 10px 0px;
    overflow-y: auto;
    text-align: left;
    /* border: red 1px solid; */
}


#lv-risingsun label {
    width: 30px;
    height: 30px;
}
#lv-risingsun label img {
    mix-blend-mode: luminosity;
    filter: grayscale(1);
    width: 30px;
    height: 30px;
    object-fit: cover;
}


.rs-threads text {
    display: block;
    height: 255px;
    text-align: justify;
    margin-top: 10px;
    font-size: 11px;
    font-family: jost;
    line-height: 16px;
    overflow-y: auto;
    padding-right: 5px;
    width: auto;
}



#lv-risingsun > section.rs-char.rs-01, #lv-risingsun > section.rs-char.rs-02, #lv-risingsun > section.rs-char.rs-03, #lv-risingsun > section.rs-char.rs-04,#lv-risingsun > section.rs-char.rs-05, #lv-risingsun > section.rs-char.rs-06 {
    color: #000000;
    font-family: 'Viaoda Libre';
    font-size: 12px;
    line-height: 1.4;
    padding: 30px;
    margin: 0 auto;
    width: auto;
    min-width: 209px;
    height: 540px;
    /* position: relative; */
    overflow: hidden;
    top: 0;
    left: 80px;
    z-index: 9;
}


.miro {
    padding: 30px;
    width: auto !IMPORTANT;
    margin: 0 auto;
}
}
</style>