@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: local("Pretendard Regular"), url("/e/kms/assets/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: local("Pretendard Bold"), url("/e/kms/assets/fonts/Pretendard-Bold.woff2") format("woff2");
}
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, button {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12rem;
  font-family: "Pretendard";
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

a {
  text-decoration: none;
}

button {
  background-color: transparent;
  line-height: 1;
  cursor: pointer;
}

#webContent {
  padding: 0;
  transition: none;
}

.event-wrap {
  overflow: visible;
  margin: 0 auto;
}

.wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

/* 팝업 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 720px;
  z-index: 99;
  overflow: auto;
  background: #fff;
  margin: 0 auto;
}

.popup.none {
  display: none;
}

.popup.active .dim {
  display: block;
}

.popup.active > .popup_container {
  transform: translateY(0%);
}

.popup.full > .popup_container {
  top: 0;
  border-radius: 0;
}

.popup.full > .popup_container .con {
  padding: 0 20rem;
  overflow-y: auto;
  height: calc(100% - 90rem);
}

.popup.bottomsheet {
  background: transparent;
}

.popup.bottomsheet > .popup_container {
  padding: 0 20rem;
}

.popup .dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: calc(100% + 1rem);
  background-color: #333;
  opacity: 0.7;
  overscroll-behavior: none;
  transition: all 0.5s ease-in-out;
}

.popup > .popup_container {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  min-height: 1rem;
  border-radius: 16rem 16rem 0 0;
  transform: translateY(105%);
  transition: transform 0.5s ease;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

/* 메인 */
.main {
  position: relative;
  background: #0c0805 url("/e/kms/assets/images/event/2026/20260069/bg_content.jpg") no-repeat 0 660rem/100% 100%;
  text-align: center;
}
.main img {
  width: 100%;
}
.main .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 22rem;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0 20rem;
}
.main .header img {
  display: block;
  width: 100%;
  height: 100%;
}
.main .header h1 {
  width: 74rem;
  height: 23rem;
}
.main .header .btn_share {
  width: 24rem;
  height: 24rem;
}
.main .content {
  position: relative;
}
.main .content .btn_etf {
  position: absolute;
  top: 1443rem;
  left: 0;
  margin: 0 35rem;
}
.main .content .btn_account {
  position: absolute;
  top: 1810rem;
  left: 0;
  margin: 0 30rem;
}
.main .content .textarea {
  position: absolute;
  top: 2038rem;
  left: 0;
  width: 262rem;
  height: 112rem;
  margin: 0 35rem;
  padding: 12rem 14rem;
  background: #fff;
  border-radius: 20rem;
  box-sizing: content-box;
  resize: none;
  outline: 0;
  font-family: "Pretendard";
  font-size: 13rem;
}
.main .content .textarea::placeholder {
  color: #9FA4A9;
}
.main .content .btn_opinion {
  position: absolute;
  top: 2194rem;
  left: 0;
  margin: 0 35rem;
}
.main .btn_top {
  position: fixed;
  bottom: 128rem;
  z-index: 11;
  right: calc(50% - 170rem);
  width: 60rem;
  height: 60rem;
  background: url("/e/kms/assets/images/event/2026/20260069/top.png") no-repeat 0 0/cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.main .btn_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10rem;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: 172rem;
  padding: 0 20rem 20rem;
  background: url("/e/kms/assets/images/event/2026/20260069/gradation.png") no-repeat 0 0/cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.main .btn_wrap button {
  line-height: 0;
}

.main .notice_wrap {
  padding: 50rem 19rem;
  background: #f1f1f1;
  text-align: left;
}

.main .notice_wrap .notice dt {
  padding: 0 0 12rem;
  font-size: 14rem;
  font-weight: 600;
  line-height: 19rem;
  color: #222;
}

.main .notice_wrap .notice li {
  position: relative;
  padding-left: 8rem;
  font-size: 12rem;
  line-height: 18rem;
  color: #222;
  margin-bottom: 12rem;
  letter-spacing: -0.2rem;
}

.main .notice_wrap .notice li span {
  color: #ff586e;
}

.main .notice_wrap .notice li .bk {
  color: #2b2c31;
  font-size: 12rem;
}

.main .notice_wrap .notice .last {
  margin-bottom: 30rem;
}

.main .notice_wrap .notice .mgb {
  margin-bottom: 40rem;
}

.main .notice_wrap .notice .end {
  padding-bottom: 18rem;
}

.main .notice_wrap .notice li.red, .main .notice_wrap .notice li span {
  color: #ff586e;
}

.main .notice_wrap .notice ul li .red {
  color: #ff586e;
}

.main .notice_wrap .notice .flex {
  color: #222;
  display: flex;
}

.main .notice_wrap .notice .flex span {
  color: #222;
  padding-right: 3rem;
}

.main .notice_wrap .notice li span.bold {
  color: #222;
  font-weight: bold;
  font-size: 12rem;
}

.main .notice_wrap .notice li.red::before {
  background: #ff586e;
}

.main .notice_wrap .notice li.bold {
  font-weight: bold;
  color: #2b2c31;
}

.main .notice_wrap .notice li.depth {
  margin-left: 10rem;
}

.main .notice_wrap .notice li.depth:before {
  content: "";
  display: block;
  position: absolute;
  width: 4rem;
  height: 1rem;
  background: #666;
  left: 0;
  top: 8rem;
}

.main .notice_wrap .notice li:before {
  content: "";
  display: block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #2b2c31;
  left: 0;
  top: 8rem;
}

.main .notice .footer {
  text-align: center;
  padding-top: 11rem;
  position: relative;
}

.main .notice .footer p {
  font-size: 12rem;
  color: #2b2c31;
  line-height: 1.44;
  font-weight: bold;
}

.main .notice .footer p span {
  font-weight: normal;
  font-size: 12rem;
}

.main .notice .footer::before {
  content: "";
  background: #ccc;
  width: 320rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
}

.btn_close {
  position: absolute;
  top: 24rem;
  right: 24rem;
}
.btn_close img {
  width: 24rem !important;
  height: 24rem !important;
}

.experience {
  min-height: 100vh;
  background: #15100F url("/e/kms/assets/images/event/2026/20260069/bg_experience.jpg") no-repeat 0 0/100% auto;
  text-align: center;
}
.experience .list .list1 .title::before {
  content: "";background: url(/e/kms/assets/images/event/2026/20260069/touch.png) no-repeat 0 0 / cover;width: 314rem;height: 93rem;top: 187rem;left: 20rem;position: absolute;z-index: 1;
}
.experience .list li {
  display: none;
  height: 662rem;
  background: url("/e/kms/assets/images/event/2026/20260069/bg_mobile.png") no-repeat center 243rem/262rem 382rem;
}
.experience .list li:first-child {
  display: block;
}
.experience .list li::before {
  content: "";
  position: absolute;
  top: 565rem;
  left: 49rem;
  z-index: 1;
  width: 262rem;
  height: 64rem;
  background: url("/e/kms/assets/images/event/2026/20260069/mockup_gradation.png") no-repeat 0 0/100% 100%;
}
.experience .list li::after {
  content: "";
  position: absolute;
  width: 39rem;
  height: 39rem;
  background: rgba(35, 167, 255, 0.6);
  border: 2rem solid rgba(0, 138, 230, 0.9019607843);
  border-radius: 50%;
  opacity: 0;
  transform: translate(30rem, 30rem);
  pointer-events: none;
  animation: pointer 2s 1s infinite;
}
@keyframes pointer {
  25% {
    opacity: 1;
    transform: translate(0, 0);
  }
  35% {
    transform: scale(0.7);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1);
  }
}
.experience .list li.list1::after {
  top: 477rem;
  left: 195rem;
}
.experience .list li.list2::after {
  top: 396rem;
  left: 246rem;
  animation: pointer 2s 2s infinite;
}
.experience .list li.list3::after {
  top: 538rem;
  left: 189rem;
  animation: pointer 2s infinite;
}
.experience .list li.list4::after {
  display: none;
}
.experience .list li.list5::after {
  top: 342rem;
  left: 149rem;
  animation: pointer 2s 1.5s infinite;
}
.experience .list li.list4 .mockup img {
  animation: mockupsecon_scroll ease-in-out 1s 0.5s forwards;
}
@keyframes mockupsecon_scroll {
  100% {
    top: -289rem;
  }
}
.experience .list li.list5 .scroll img {
  animation: mockup_scroll ease-in-out 1s 0.5s forwards;
}
@keyframes mockup_scroll {
  100% {
    top: -423rem;
  }
}
.experience .list li.list6::after {
  top: 305rem;
  left: 124rem;
  animation: pointer 2s infinite;
}
.experience .list li.list7::after {
  display: none;
}
.experience .list li.list8 {
  background: 0;
}
.experience .list li.list8::before {
  display: none;
}
.experience .list li.list8::after {
  display: none;
}
.experience .list li .step {
  position: absolute;
  top: 52rem;
  left: -6rem;
  width: 100%;
}
.experience .list li .step img {
  height: 71rem;
}
.experience .list li .title {
  position: absolute;
  top: 154rem;
  left: 0;
  width: 100%;
}
.experience .list li .title img {
  width: auto !important;
  height: 60rem;
}
.experience .list li .title1 {
  animation: title1 1.9s step-end forwards;
}
@keyframes title1 {
  100% {
    opacity: 0;
  }
}
.experience .list li .title2 {
  opacity: 0;
  animation: title2 1.9s step-end forwards;
}
@keyframes title2 {
  100% {
    opacity: 1;
  }
}
.experience .list li .mockup {
  position: absolute;
  top: 256rem;
  left: 60rem;
  width: 240rem;
  height: 370rem;
  overflow: hidden;
  border-radius: 25rem 25rem 0 0;
}
.experience .list li .mockup img {
  position: absolute;
  top: 0;
  left: 0;
  width: 240rem;
  height: 360rem;
}
.experience .list li .mockup.secon img {
  height: 603rem;
}
.experience .list li .mockup.scroll img {
  width: 240rem;
  height: 794rem;
}
.experience .list li .experience_complete {
  padding-top: 52rem;
}
.experience .list li .experience_complete img {
  width: 100%;
}
.experience .list li .btn1 {
  position: absolute;
  top: 440rem;
  left: 34rem;
  overflow: hidden;
  width: 293rem;
  padding: 5rem;
  border-radius: 20rem;
  box-shadow: 0 11rem 13rem 0 rgba(0, 0, 0, 0.25);
  line-height: 0;
}
.experience .list li .btn1::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: linear-gradient(130deg, #F7AEC2 0%, #D0F29D 54%, #7BD4BE 100%);
  border-radius: 50%;
}
.experience .list li .btn1 img {
  position: relative;
  width: 100%;
}
.experience .list li .btn2 {
  position: absolute;
  top: 379rem;
  left: 223rem;
  width: 90rem;
  height: 90rem;
  background: url(/e/kms/assets/images/event/2026/20260069/plus.png) no-repeat 0 0 / cover;
  opacity: 0;
  transform: scale(0.4);
  animation: plus .5s 2.0s forwards;
}
@keyframes plus {10% {opacity: 1;}100% {opacity: 1;transform: scale(1);}}
.experience .list li .btn3 {
  position: absolute;
  top: 515rem;
  left: 83rem;
  width: 195rem;
  height: 100rem;
  background: url(/e/kms/assets/images/event/2026/20260069/comparison.png) no-repeat 0 0 / cover;
  opacity: 0;
  transform: scale(0.4);
  animation: comparison .5s forwards;
}
@keyframes comparison {10% {opacity: 1;}100% {opacity: 1;transform: scale(1);}}
.experience .list li .btn4 {
  position: absolute;
  top: 568rem;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0 20rem;
}
.experience .list li .btn4 img {
  width: 100%;
}
.experience .list li .btn5 {
  position: absolute;
  top: 342rem;
  left: 149rem;
  width: 43rem;
  height: 43rem;
}
.experience .list li .btn6 {
  position: absolute;
  top: 293rem;
  left: 105rem;
  width: 80rem;
  height: 80rem;
  background: url(/e/kms/assets/images/event/2026/20260069/allocation.png) no-repeat 0 0 / cover;
  opacity: 0;
  transform: scale(0.4);
  animation: allocation .5s forwards;
}
@keyframes allocation {10% {opacity: 1;}100% {opacity: 1;transform: scale(1);}}
.experience .list li .btn7 {
  position: absolute;
  top: 568rem;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0 20rem;
}
.experience .list li .btn7 img {
  width: 100%;
}
.experience .list li .btn_event {
  position: absolute;
  top: 420rem;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0 20rem;
}
.experience .list li .btn_event img {
  width: 100%;
}
.experience .list li .mockup2 {
  animation: mockup2 0.5s step-end forwards;
}
@keyframes mockup2 {
  100% {
    opacity: 0;
  }
}
.experience .list li .mockup3 {
  opacity: 0;
  animation: mockup3 0.5s step-end forwards;
}
@keyframes mockup3 {
  100% {
    opacity: 1;
  }
}

.share {
  min-height: 100vh;
  background: #15100F url("/e/kms/assets/images/event/2026/20260069/bg_share.png") no-repeat 0 0/100% auto;
  text-align: center;
}
.share img {
  width: 100%;
}
.share .title {
  padding: 70rem 0 28rem;
  line-height: 0;
}
.share .btn {
  display: flex;
  align-items: flex-end;
  gap: 8rem;
  position: absolute;
  top: 282rem;
  left: 0;
  padding: 0 42rem;
}
.share .state {
  padding: 0 20rem 30rem;
}

.popup_confirm {
  min-height: 100vh;
  padding-top: 70rem;
  background: #15100F url("/e/kms/assets/images/event/2026/20260069/bg_share.png") no-repeat 0 0/100% auto;
  text-align: center;
}
.popup_confirm img {
  width: 100%;
}
.popup_confirm .btn_service {
  margin: 28rem 20rem;
}
.popup_confirm .text_account {
  padding: 0 20rem 20rem;
}
.popup_confirm .account {
  padding: 0 30rem 20rem;
}
.popup_confirm .btn_confirm_account {
  margin: 20rem 30rem 28rem;
}
.popup_confirm .important {
  margin: 0 30rem 50rem;
}
.popup_confirm .important img {width: 100%;}
.wrap .notice_wrap .notice li img {width: 26.3rem;padding-left: 5rem;vertical-align: top;}