@charset "UTF-8";
@import "swiper-bundle.min.css";
@import "jquery.modal.css";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@media only screen and (max-width: 1079px) {
  .pcOnly {
    display: none !important;
  }
  .tabletOnly {
    display: none !important;
  }
  .mobileOnly {
    display: block !important;
  }
  .mobileOnly.flex {
    display: flex !important;
  }
  .mobileOnly.ib {
    display: inline-block !important;
  }
}
@media only screen and (min-width: 1080px) {
  .pcOnly {
    display: block !important;
  }
  .pcOnly.flex {
    display: flex !important;
  }
  .pcOnly.ib {
    display: inline-block !important;
  }
  .tabletOnly {
    display: none !important;
  }
  .mobileOnly {
    display: none !important;
  }
}
/* reset */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  background: #010101;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, button, address, em, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
  margin: 0;
  padding: 0;
}

body {
  padding: 0;
  font-family: "Pretendard Variable", sans-serif;
  font-size: 12px;
  color: #333;
  word-break: keep-all;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ol, ul, li {
  list-style: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

form, fieldset, iframe {
  display: block;
  border: 0;
}

img, button {
  border: 0 none;
  vertical-align: top;
}

hr {
  height: 0;
  display: none;
}

i, em, address {
  font-style: normal;
}

label, button {
  cursor: pointer;
}

caption, legend {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  text-indent: -9999em;
  overflow: hidden;
  font-size: 0;
}

.blind {
  position: absolute !important;
  left: -9999em;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  text-indent: -9999em;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

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

input, textarea, select {
  margin: 0;
  padding: 0;
  font-family: "Pretendard Variable", sans-serif;
  font-size: 12px;
  color: #000;
  vertical-align: middle;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

textarea {
  border: 1px solid #666;
  resize: none;
  overflow-y: auto;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0 none;
  background: none;
  font-size: 0;
  font-family: "Pretendard Variable", sans-serif;
  vertical-align: top;
  cursor: pointer;
  width: 100%;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

a {
  color: #000;
  text-decoration: none;
}

a:link, a:visited, a:hover, a:active, a:focus {
  text-decoration: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.hiddenText {
  overflow: hidden;
  position: fixed;
  top: -9999999px;
  left: -9999999px;
}

/* Interval */
.mt0 {
  margin-top: 0px !important;
}

.mt2 {
  margin-top: 2px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt6 {
  margin-top: 6px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb6 {
  margin-bottom: 6px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.ml70 {
  margin-left: 70px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.ml90 {
  margin-left: 90px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.mr70 {
  margin-right: 70px !important;
}

.mr80 {
  margin-right: 80px !important;
}

.mr90 {
  margin-right: 90px !important;
}

.mr100 {
  margin-right: 100px !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt60 {
  padding-top: 60px !important;
}

.pt70 {
  padding-top: 70px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pt90 {
  padding-top: 90px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.tac {
  text-align: center;
}

@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes loading-text-opacity {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loading-container,
.loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}

.oh {
  overflow: hidden;
}

.loading-container-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

.loading-container {
  margin: 40px auto;
}

.loading {
  border: 2px solid transparent;
  border-color: transparent #fff transparent #FFF;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}

.loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}

.loading-container:hover .loading,
.loading-container .loading {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#loading-text {
  -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
  -o-animation: loading-text-opacity 2s linear 0s infinite normal;
  -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100px;
}

.scrollLock {
  overflow-y: scroll !important;
}
.scrollLock .wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

select {
  height: 55px;
  border-radius: 9px;
  background: #FFFFFF;
  padding: 0 20px;
  font-size: 18px;
  color: #4b4b4b;
  border: 0;
}

.btnBlank {
  overflow: hidden;
  text-indent: -99999px;
  position: absolute;
  left: 0;
  top: 0;
}

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 20;
  padding: 0;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
}

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}

.blocker.behind {
  background-color: transparent;
}

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #fff;
  padding: 15px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==");
}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px;
}

.modal-spinner > div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.5);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
.motion {
  opacity: 0;
  transform: translate(0, 100px);
}

img,
video {
  width: 100%;
}

.wrap {
  text-align: center;
  height: 100%;
}

.topArea {
  position: relative;
  margin: 0 auto;
  z-index: 20;
}
.topArea .logo {
  position: absolute;
  left: 5vw;
  top: 5vw;
  width: 31vw;
  height: 8vw;
  z-index: 5;
}
.topArea .menuWrap {
  position: absolute;
  right: 6.8%;
  top: 5.556vw;
  z-index: 1;
  width: 9.722vw;
}
.topArea .menuWrap .menuOpen {
  display: none;
  position: absolute;
  right: -0.926vw;
  top: -0.926vw;
}
.topArea .menuWrap .menuOpen .menu {
  display: block;
  background: url("../images/02/menu_open_mo.png") no-repeat;
  background-size: auto 68.148vw !important;
  width: 59.352vw;
  overflow: hidden;
  text-indent: -99999px;
  text-align: left;
}
.topArea .menuWrap .menuOpen .menu:hover, .topArea .menuWrap .menuOpen .menu:focus, .topArea .menuWrap .menuOpen .menu.on {
  background-position-x: -59.47vw !important;
}
.topArea .menuWrap .menuOpen .menu.menu1 {
  height: 14.352vw;
}
.topArea .menuWrap .menuOpen .menu.menu2 {
  height: 13.333vw;
  background-position: 0 -14.352vw;
}
.topArea .menuWrap .menuOpen .menu.menu3 {
  height: 12.685vw;
  background-position: 0 -27.685vw;
}
.topArea .menuWrap .menuOpen .menu.menu4 {
  height: 12.593vw;
  background-position: 0 -40.37vw;
}
.topArea .menuWrap .menuOpen .menu.menu5 {
  height: 15.185vw;
  background-position: 0 -52.963vw;
}

.mainWrap {
  position: relative;
}
.mainWrap .playerArea {
  position: absolute;
  left: 2.5%;
  top: 100.833vw;
  width: 95.1%;
  height: 53.519vw;
  z-index: 2;
}

.gateWrap {
  position: relative;
}
.gateWrap .gateBtn {
  position: absolute;
  z-index: 2;
  width: 43.056vw;
  height: 48.148vw;
}
.gateWrap .gateBtn.gate1 {
  left: 5.556vw;
  top: 96.296vw;
}
.gateWrap .gateBtn.gate2 {
  left: 51.389vw;
  top: 96.296vw;
}
.gateWrap .gateBtn.gate3 {
  left: 5.556vw;
  top: 145.37vw;
}
.gateWrap .gateBtn.gate4 {
  left: 51.389vw;
  top: 145.37vw;
}

.popupPlayer {
  display: none;
  max-width: none;
  width: 100%;
  height: 56vw;
  padding: 0;
  margin: 0;
  box-shadow: none;
  position: relative;
  background: transparent;
}
.popupPlayer a.close-modal {
  display: none;
}
.popupPlayer iframe {
  width: 100%;
  height: 100%;
}
.popupPlayer .count {
  display: none;
  width: 4.444vw;
  height: 4.444vw;
  border-radius: 4.444vw;
  position: absolute;
  right: 3.241vw;
  top: -5.556vw;
  font-size: 1.667vw;
  color: #ffffff;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  border: 0.278vw solid #ffffff;
}
.popupPlayer .count.on {
  display: flex;
}

.popupAlert {
  display: none;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  position: relative;
  background: transparent;
}
.popupAlert a.close-modal {
  display: none;
}
.popupAlert.popupStart:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.popupStart[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/popup_start_ok.png") no-repeat;
}
.popupAlert.popupStart[data-hover=no]:before {
  opacity: 1;
  background: url("../images/popup_start_no.png") no-repeat;
}
.popupAlert.popupStart .btnOk {
  width: 35%;
  height: 15%;
  left: 14%;
  top: 60%;
}
.popupAlert.popupStart .btnCancel {
  width: 35%;
  height: 15%;
  left: 51.6%;
  top: 60%;
}
.popupAlert.popupStartNot:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.popupAlert.popupStartNot[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/popup_startNot_ok.png") no-repeat;
}
.popupAlert.popupStartNot .btnOk {
  width: 75%;
  height: 16%;
  left: 13%;
  top: 62%;
}
.popupAlert.webtoonPop01:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.webtoonPop01[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_01_ok.png") no-repeat;
}
.popupAlert.webtoonPop01[data-hover=no]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_01_no.png") no-repeat;
}
.popupAlert.webtoonPop01 .btnOk {
  width: 36.111vw;
  height: 8.704vw;
  left: 13.056vw;
  top: 44.537vw;
}
.popupAlert.webtoonPop01 .btnCancel {
  width: 36.111vw;
  height: 8.704vw;
  left: 50.833vw;
  top: 44.537vw;
}
.popupAlert.webtoonPop02:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.webtoonPop02[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_02_ok.png") no-repeat;
}
.popupAlert.webtoonPop02 .btnOk {
  width: 74%;
  height: 14%;
  left: 13%;
  top: 64%;
}
.popupAlert.webtoonPop03:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.webtoonPop03.webtoon1[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_03_ok.png") no-repeat;
}
.popupAlert.webtoonPop03.webtoon2[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon02_popup_03_ok.png") no-repeat;
}
.popupAlert.webtoonPop03.webtoon3[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon03_popup_03_ok.png") no-repeat;
}
.popupAlert.webtoonPop03.webtoon3 .btnOk {
  top: 60%;
}
.popupAlert.webtoonPop03 .btnOk {
  width: 68%;
  height: 18%;
  left: 16%;
  top: 56%;
}
.popupAlert.webtoonPop04:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.webtoonPop04.webtoon1[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_04_ok.png") no-repeat;
}
.popupAlert.webtoonPop04.webtoon2[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon02_popup_04_ok.png") no-repeat;
}
.popupAlert.webtoonPop04.webtoon2 .btnOk {
  top: 59%;
}
.popupAlert.webtoonPop04.webtoon3[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon03_popup_04_ok.png") no-repeat;
}
.popupAlert.webtoonPop04 .btnOk {
  width: 68%;
  height: 18%;
  left: 16%;
  top: 64%;
}
.popupAlert.webtoonPop05:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.popupAlert.webtoonPop05[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_05_ok.png") no-repeat;
}
.popupAlert.webtoonPop05 .btnOk {
  width: 68%;
  height: 18%;
  left: 16%;
  top: 60%;
}

.popupVote {
  display: none;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  position: relative;
  background: transparent;
}
.popupVote a.close-modal {
  display: none;
}
.popupVote:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.popupVote .btnSkip {
  width: 35.56vw;
  height: 9.12vw;
  left: 13.68vw;
  top: 82.07vw;
}
.popupVote .btnOk {
  width: 35.56vw;
  height: 9.12vw;
  left: 50.61vw;
  top: 82.07vw;
}
.popupVote .inputTel {
  position: absolute;
  left: 17.33vw;
  top: 37.99vw;
  width: 64.89vw;
  height: 7.45vw;
}
.popupVote .inputTel input {
  background: transparent;
  border: 0;
  font-size: 2.74vw;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
}
.popupVote .inputTel input::placeholder {
  color: #ffffff;
}
.popupVote .agreeArea {
  position: absolute;
  left: 17.33vw;
  top: 47.87vw;
  width: 64.13vw;
  height: 15.96vw;
  color: #ffffff;
  font-size: 1.82vw;
  overflow: auto;
  padding: 3.04vw 2.28vw;
  /* 스크롤바 막대 꾸미기 */
}
.popupVote .agreeArea::-webkit-scrollbar {
  width: 0.46vw;
}
.popupVote .agreeArea::-webkit-scrollbar-thumb {
  background: #73d4fe;
}
.popupVote .agreeArea .title {
  font-size: 2.74vw;
  text-align: center;
  margin-bottom: 2.28vw;
}
.popupVote .agree {
  position: absolute;
  left: 17.33vw;
  top: 91.19vw;
  width: 64.89vw;
}
.popupVote .agree input[type=checkbox] {
  appearance: none;
  background: url("../images/check_bg.png");
  background-size: 100% auto;
  width: 3.5vw;
  height: 3.34vw;
}
.popupVote .agree input[type=checkbox]:checked {
  background-position: 0 -3.34vw;
}
.popupVote .agree.agree1 {
  top: 67.33vw;
}
.popupVote .agree.agree2 {
  top: 72.19vw;
}

.loadingVideoArea {
  display: none;
  position: absolute;
  background: #010101;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.loadingVideoArea.on {
  display: block;
}
.loadingVideoArea video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hoverBtn {
  position: relative;
}
.hoverBtn img {
  position: relative;
  z-index: 2;
}
.hoverBtn .hover {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  z-index: 3;
}
.hoverBtn .hover.back {
  z-index: 1;
}

.webToonArea {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.webToonArea .section {
  display: flex;
  position: relative;
}
.webToonArea .section:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.webToonArea .section.section1 {
  min-height: 100vh;
}
.webToonArea .section.section1 video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.webToonArea.on {
  display: block;
}
.webToonArea .webtoon1 .section {
  align-items: center;
  min-height: 100vh;
}
.webToonArea .webtoon1 .section13 {
  align-items: flex-start;
  min-height: 200vh;
}
.webToonArea .webtoon2 .section {
  align-items: center;
  min-height: 100vh;
}
.webToonArea .webtoon2 .section10 {
  align-items: flex-start;
  min-height: 200vh;
}
.webToonArea .webtoon3 .section {
  align-items: center;
  min-height: 100vh;
}
.webToonArea .webtoon3 .section13 {
  align-items: flex-start;
  min-height: 200vh;
}
.webToonArea .webToonBottom {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  background: url("../images/webtoon_bottom_bg.png") no-repeat;
  background-size: 100% auto;
  width: 100vw;
  height: 22.315vw;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: 0.5s opacity;
}
.webToonArea .webToonBottom.on {
  opacity: 1;
}
.webToonArea .webToonBottom .title {
  position: relative;
  margin-top: 4.167vw;
  text-align: center;
}
.webToonArea .webToonBottom .title img {
  display: none;
}
.webToonArea .webToonBottom .barArea {
  position: absolute;
  left: 8.981vw;
  top: 9.722vw;
  height: 6.019vw;
  width: 71.667vw;
}
.webToonArea .webToonBottom .barArea .bar {
  transition: width 2s;
  height: 100%;
  width: 0%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background-size: auto 100% !important;
}
.webToonArea .webToonBottom .barArea .bar.bar1 {
  background: url("../images/webtoon_bottom_bar_01.png") no-repeat;
}
.webToonArea .webToonBottom .barArea .bar.bar2 {
  background: url("../images/webtoon_bottom_bar_02.png") no-repeat;
}
.webToonArea .webToonBottom .barArea .bar.bar3 {
  background: url("../images/webtoon_bottom_bar_03.png") no-repeat;
}
.webToonArea .webToonBottom .barArea .bar.bar4 {
  background: url("../images/webtoon_bottom_bar_03.png") no-repeat;
}
.webToonArea .webToonBottom[data-bar=bar1] .title img:nth-child(1) {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar1] .barArea .bar1 {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar2] .title img:nth-child(2) {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar2] .barArea .bar2 {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar3] .title img:nth-child(3) {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar3] .barArea .bar3 {
  display: block;
  transition: width 3s;
}
.webToonArea .webToonBottom[data-bar=bar4] .title img:nth-child(4) {
  display: block;
}
.webToonArea .webToonBottom[data-bar=bar4] .barArea .bar3 {
  display: block;
  transition: width 2s;
}

.weaponWrap {
  position: relative;
}
.weaponWrap #canvasZone {
  position: absolute !important;
  left: 6.389vw;
  top: 66.759vw;
  width: 87.407vw;
  height: 115.926vw;
}
.weaponWrap #canvasZone .cbg {
  position: absolute;
  z-index: 10;
  background-size: 100% 100% !important;
}
.weaponWrap #canvasZone .cbg.lt {
  left: -0.556vw;
  top: -0.648vw;
  width: 15.556vw;
  height: 15.37vw;
  background: url("../images/cbg_lt.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.rt {
  right: -0.556vw;
  top: -0.556vw;
  width: 16.296vw;
  height: 15.741vw;
  background: url("../images/cbg_rt.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.lb {
  left: -0.556vw;
  bottom: -0.648vw;
  width: 15.833vw;
  height: 16.852vw;
  background: url("../images/cbg_lb.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.rb {
  right: -0.556vw;
  bottom: -0.648vw;
  width: 16.111vw;
  height: 16.852vw;
  background: url("../images/cbg_rb.png") no-repeat;
}
.weaponWrap #canvasZone #loadingScreen {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  width: 100%;
  height: 100%;
}
.weaponWrap #canvasZone #loadingScreen:before {
  content: "";
  display: block;
  background: url("../images/loading360.png") no-repeat;
  width: 19.167vw;
  height: 8.796vw;
  background-size: 100% auto;
}
.weaponWrap #canvasZone #loadingScreen .title {
  font-size: 4.074vw;
  color: #bfbebe;
  margin-bottom: 1.852vw;
  font-weight: bold;
}
.weaponWrap #canvasZone #loadingScreen .loadingBar {
  margin: 7.407vw 0 2.315vw 0;
  border: 0.185vw solid #bfbebe;
  width: 37.685vw;
  padding: 0.37vw;
  border-radius: 2.315vw;
  height: 2.315vw;
}
.weaponWrap #canvasZone #loadingScreen .loadingBar .bar {
  background: #21c3db;
  height: 1.204vw;
  border-radius: 1.204vw;
  transition: 0.2s all;
}
.weaponWrap #canvasZone canvas {
  width: 100%;
  height: 100%;
  outline: none;
}
.weaponWrap #canvasZone .fullscreen {
  position: absolute;
  right: 5.185vw;
  bottom: 5.185vw;
  background: url("../images/btn_fullscreen.png") no-repeat;
  background-size: 100% auto;
  width: 5.185vw;
  height: 5.185vw;
  overflow: hidden;
  text-indent: -99999px;
  z-index: 10;
}
.weaponWrap #canvasZone .fullscreen.on {
  background-image: url("../images/btn_fullscreen_on.png");
}
.weaponWrap.open .btnMake,
.weaponWrap.open .btnOther {
  display: block;
}
.weaponWrap .weaponInfo {
  position: relative;
}
.weaponWrap .weaponMore {
  position: relative;
}
.weaponWrap .btnProfile {
  position: absolute;
  left: 11.111vw;
  top: auto;
  width: 77.778vw;
  height: 14.352vw;
  bottom: 17vw;
}
.weaponWrap .btnMake {
  position: absolute;
  left: 9.259vw;
  bottom: 50.63vw;
  width: 81.944vw;
  height: 12.963vw;
  top: auto;
}
.weaponWrap .btnOther {
  position: absolute;
  left: 9.259vw;
  bottom: 34.63vw;
  width: 81.944vw;
  height: 12.963vw;
  top: auto;
}
.weaponWrap .btnVote {
  position: absolute;
  left: 9.259vw;
  bottom: 18.519vw;
  width: 81.944vw;
  height: 12.963vw;
  top: auto;
}

.customWrap .customArea {
  display: none;
  position: relative;
}
.customWrap .customArea.on {
  display: block;
}
.customWrap .customArea.step01 .step01Select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect1 {
  width: 31.667vw;
  height: 52.593vw;
  left: 15.926vw;
  top: 77.222vw;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect2 {
  width: 31.667vw;
  height: 52.593vw;
  left: 52.222vw;
  top: 77.222vw;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect3 {
  width: 31.667vw;
  height: 52.593vw;
  left: 33.611vw;
  top: 134.259vw;
}
.customWrap .customArea.step01 .step01Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.customWrap .customArea.step01 .step01Select[data-hover=select1]:before {
  opacity: 1;
  background: url("../images/custom_step01_01.png") no-repeat;
}
.customWrap .customArea.step01 .step01Select[data-hover=select2]:before {
  opacity: 1;
  background: url("../images/custom_step01_02.png") no-repeat;
}
.customWrap .customArea.step01 .step01Select[data-hover=select3]:before {
  opacity: 1;
  background: url("../images/custom_step01_03.png") no-repeat;
}
.customWrap .customArea.step02 .step02Select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect1 {
  width: 28.796vw;
  height: 55vw;
  left: 20.463vw;
  top: 66.389vw;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect2 {
  width: 28.796vw;
  height: 55vw;
  left: 53.611vw;
  top: 66.389vw;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect3 {
  width: 28.796vw;
  height: 55vw;
  left: 20.463vw;
  top: 125.926vw;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect4 {
  width: 28.796vw;
  height: 55vw;
  left: 53.611vw;
  top: 125.926vw;
}
.customWrap .customArea.step02 .step02Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.customWrap .customArea.step02 .step02Select[data-hover=select1]:before {
  opacity: 1;
  background: url("../images/custom_step02_select_01.png") no-repeat;
}
.customWrap .customArea.step02 .step02Select[data-hover=select2]:before {
  opacity: 1;
  background: url("../images/custom_step02_select_02.png") no-repeat;
}
.customWrap .customArea.step02 .step02Select[data-hover=select3]:before {
  opacity: 1;
  background: url("../images/custom_step02_select_03.png") no-repeat;
}
.customWrap .customArea.step02 .step02Select[data-hover=select4]:before {
  opacity: 1;
  background: url("../images/custom_step02_select_04.png") no-repeat;
}
.customWrap .customArea.step02 .btnNext {
  width: 49.167vw;
  height: 12.685vw;
  left: 27.685vw;
  top: 190.463vw;
}
.customWrap .customArea.step03 .step03Select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect1 {
  width: 34.537vw;
  height: 22.5vw;
  left: 13.704vw;
  top: 66.389vw;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect2 {
  width: 34.537vw;
  height: 22.5vw;
  left: 51.667vw;
  top: 66.389vw;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect3 {
  width: 34.537vw;
  height: 22.5vw;
  left: 13.704vw;
  top: 92.315vw;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect4 {
  width: 34.537vw;
  height: 22.5vw;
  left: 51.667vw;
  top: 92.315vw;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect5 {
  width: 34.537vw;
  height: 22.5vw;
  left: 13.704vw;
  top: 118.519vw;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect6 {
  width: 34.537vw;
  height: 22.5vw;
  left: 51.667vw;
  top: 118.519vw;
}
.customWrap .customArea.step03 .step03Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.customWrap .customArea.step03 .step03Select[data-hover=select1]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_01.png") no-repeat;
}
.customWrap .customArea.step03 .step03Select[data-hover=select2]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_02.png") no-repeat;
}
.customWrap .customArea.step03 .step03Select[data-hover=select3]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_03.png") no-repeat;
}
.customWrap .customArea.step03 .step03Select[data-hover=select4]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_04.png") no-repeat;
}
.customWrap .customArea.step03 .step03Select[data-hover=select5]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_05.png") no-repeat;
}
.customWrap .customArea.step03 .step03Select[data-hover=select6]:before {
  opacity: 1;
  background: url("../images/custom_step03_select_06.png") no-repeat;
}
.customWrap .customArea.step03 .btnPrev {
  width: 49.167vw;
  height: 12.685vw;
  left: 25.37vw;
  top: 173.333vw;
}
.customWrap .customArea.step03 .btnNext {
  width: 49.167vw;
  height: 12.685vw;
  left: 27.685vw;
  top: 157.5vw;
}
.customWrap .customArea.step04 .step04Select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.customWrap .customArea.step04 .step04Select .textArea {
  background: transparent;
  position: absolute;
  width: 70.185vw;
  height: 47.685vw;
  left: 15.463vw;
  top: 66.389vw;
}
.customWrap .customArea.step04 .step04Select .textArea input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 5.556vw;
  font-family: "Pretendard Variable";
  font-weight: bold;
}
.customWrap .customArea.step04 .step04Select .textArea .maxLength {
  position: absolute;
  left: 0;
  text-align: center;
  width: 100%;
  bottom: 3.704vw;
  color: #999898;
  font-size: 4.074vw;
}
.customWrap .customArea.step04 .btnPrev {
  width: 49.167vw;
  height: 12.685vw;
  left: 25.37vw;
  top: 147.407vw;
}
.customWrap .customArea.step04 .btnResult {
  width: 49.167vw;
  height: 12.685vw;
  left: 27.685vw;
  top: 131.296vw;
}
.customWrap .customArea.vote .voteSelect {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect1 {
  width: 31.481vw;
  height: 52.407vw;
  left: 16.111vw;
  top: 72.778vw;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect2 {
  width: 31.481vw;
  height: 52.407vw;
  left: 52.222vw;
  top: 72.778vw;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect3 {
  width: 31.481vw;
  height: 52.407vw;
  left: 33.704vw;
  top: 129.722vw;
}
.customWrap .customArea.vote .voteSelect:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: 100% auto !important;
}
.customWrap .customArea.vote .voteSelect[data-hover=select1]:before {
  opacity: 1;
  background: url("../images/vote_bg_01.png") no-repeat;
}
.customWrap .customArea.vote .voteSelect[data-hover=select2]:before {
  opacity: 1;
  background: url("../images/vote_bg_02.png") no-repeat;
}
.customWrap .customArea.vote .voteSelect[data-hover=select3]:before {
  opacity: 1;
  background: url("../images/vote_bg_03.png") no-repeat;
}
.customWrap .customArea.vote .btnVote2 {
  z-index: 1;
  width: 49.167vw;
  height: 12.685vw;
  left: 25.37vw;
  top: 196.407vw;
}
.eventWrap .cardImg {
  position: absolute;
  left: 0;
  right: 0;
  top: 26.944vw;
  margin: 0 auto;
  width: 67.315vw;
  height: 94.074vw;
}
.eventWrap .cardImg:after {
  content: "";
  display: block;
  position: absolute;
  left: -4.074vw;
  right: -4.167vw;
  top: -17.87vw;
  bottom: -7.685vw;
  background: url(../images/card_bg.png) no-repeat;
  background-size: 100% auto;
}
.eventWrap .cardImg img {
  width: 100%;
}
.eventWrap .cardImg .text {
  position: absolute;
  left: 0;
  top: 68%;
  color: #ffffff;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: 3.056vw;
  font-weight: bold;
}
.eventWrap .cardImg .text.type01 {
  top: 75%;
}
.eventWrap .cardImg .text.type02 {
  top: 67%;
}
.eventWrap .cardImg .text.type03 {
  top: 73.5%;
}
.eventWrap .cardImg .text.type04 {
  top: 75%;
}
.eventWrap .btnSave {
  left: 24.074vw;
  top: 124.444vw;
  width: 51.667vw;
  height: 12.315vw;
}
.eventWrap .btnCopy {
  left: 7.074vw;
  top: 407.444vw;
  width: 85.667vw;
  height: 33.315vw;
}
.eventWrap .snsArea {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 25%;
  top: 149.444vw;
  width: 50.926vw;
  height: 10.093vw;
  gap: 3.704vw;
  z-index: 1;
}
.eventWrap .snsArea .btnBlank {
  position: relative;
  left: auto;
  top: auto;
  height: 100%;
  flex: 1;
}

.ios #bgm {
  display: block !important;
}

audio,
.preload {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.webToonWrap.webtoon4 .section {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*# sourceMappingURL=style.css.map */