@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: 10;
  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);
}

.wrap {
  min-width: 1260px;
  height: 100%;
  min-height: 100%;
  text-align: center;
}

.topArea {
  position: relative;
  margin: 0 auto;
  max-width: 1700px;
  z-index: 5;
}
.topArea .logo {
  position: absolute;
  left: 20px;
  top: 57px;
  z-index: 5;
}
.topArea .menuWrap {
  position: absolute;
  right: 20px;
  top: 56px;
  z-index: 5;
}
.topArea .menuWrap .menuOpen {
  display: none;
  position: absolute;
  right: -2px;
  top: -2px;
}
.topArea .menuWrap .menuOpen .menu {
  display: block;
  background: url("../images/menu_open3.png") no-repeat;
  width: 287px;
  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: -287px !important;
}
.topArea .menuWrap .menuOpen .menu.menu1 {
  height: 72px;
}
.topArea .menuWrap .menuOpen .menu.menu2 {
  height: 63px;
  background-position: 0 -72px;
}
.topArea .menuWrap .menuOpen .menu.menu3 {
  height: 61px;
  background-position: 0 -135px;
}
.topArea .menuWrap .menuOpen .menu.menu4 {
  height: 61px;
  background-position: 0 -196px;
}
.topArea .menuWrap .menuOpen .menu.menu5 {
  height: 61px;
  background-position: 0 -257px;
}

.mainWrap {
  background: url("../images/main_bg.jpg") no-repeat center top;
  min-height: 1290px;
  height: 100%;
  position: relative;
}
.mainWrap .playerArea {
  position: absolute;
  left: 50%;
  top: 482px;
  width: 961px;
  height: 540px;
  margin-left: -470px;
  z-index: 2;
}
.mainWrap .teaser {
  position: absolute;
  left: 50%;
  top: 1015px;
  margin-left: -483px;
}

.gateWrap {
  background: url("../images/gate_select_bg.jpg") no-repeat center top;
  min-height: 1290px;
  height: 100%;
  position: relative;
}
.gateWrap:before {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
}
.gateWrap .gateBtn {
  position: absolute;
  left: 50%;
  top: 512px;
  width: 385px;
  height: 390px;
  z-index: 2;
}
.gateWrap .gateBtn.gate1 {
  margin-left: -600px;
}
.gateWrap .gateBtn.gate2 {
  margin-left: -190px;
}
.gateWrap .gateBtn.gate3 {
  margin-left: 230px;
}
.gateWrap[data-hover=gate01]:before {
  opacity: 1;
  background: url("../images/gate_select_bg_01.jpg") no-repeat center top;
}
.gateWrap[data-hover=gate02]:before {
  opacity: 1;
  background: url("../images/gate_select_bg_02.jpg") no-repeat center top;
}
.gateWrap[data-hover=gate03]:before {
  opacity: 1;
  background: url("../images/gate_select_bg_03.jpg") no-repeat center top;
}

.popupPlayer {
  display: none;
  max-width: none;
  width: 961px;
  height: 540px;
  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: 48px;
  height: 48px;
  border-radius: 48px;
  position: absolute;
  right: 35px;
  top: -60px;
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
}
.popupPlayer .count.on {
  display: flex;
}

.popupAlert {
  display: none;
  max-width: none;
  width: auto;
  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;
}
.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: 270px;
  height: 70px;
  left: 100px;
  top: 248px;
}
.popupAlert.popupStart .btnCancel {
  width: 270px;
  height: 70px;
  left: 377px;
  top: 248px;
}
.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: 545px;
  height: 70px;
  left: 100px;
  top: 274px;
}
.popupAlert.webtoonPop01:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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: 270px;
  height: 70px;
  left: 94px;
  top: 323px;
}
.popupAlert.webtoonPop01 .btnCancel {
  width: 270px;
  height: 70px;
  left: 370px;
  top: 323px;
}
.popupAlert.webtoonPop02:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.popupAlert.webtoonPop02[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_02_ok.png") no-repeat;
}
.popupAlert.webtoonPop02 .btnOk {
  width: 544px;
  height: 70px;
  left: 94px;
  top: 323px;
}
.popupAlert.webtoonPop03:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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: 314px;
}
.popupAlert.webtoonPop03 .btnOk {
  width: 504px;
  height: 80px;
  left: 124px;
  top: 273px;
}
.popupAlert.webtoonPop04:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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: 314px;
}
.popupAlert.webtoonPop04.webtoon3[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon03_popup_04_ok.png") no-repeat;
}
.popupAlert.webtoonPop04 .btnOk {
  width: 504px;
  height: 80px;
  left: 124px;
  top: 273px;
}
.popupAlert.webtoonPop05:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.popupAlert.webtoonPop05[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/webtoon01_popup_05_ok.png") no-repeat;
}
.popupAlert.webtoonPop05 .btnOk {
  width: 504px;
  height: 80px;
  left: 114px;
  top: 311px;
}

.popupVote {
  display: none;
  max-width: none;
  width: auto;
  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[data-hover=skip]:before {
  opacity: 1;
  background: url("../images/popup_vote_skip.png") no-repeat;
}
.popupVote[data-hover=ok]:before {
  opacity: 1;
  background: url("../images/popup_vote_ok.png") no-repeat;
}
.popupVote .btnSkip {
  width: 234px;
  height: 60px;
  left: 90px;
  top: 540px;
}
.popupVote .btnOk {
  width: 234px;
  height: 60px;
  left: 333px;
  top: 540px;
}
.popupVote .inputTel {
  position: absolute;
  left: 114px;
  top: 250px;
  width: 427px;
  height: 49px;
}
.popupVote .inputTel input {
  background: transparent;
  border: 0;
  font-size: 18px;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
}
.popupVote .inputTel input::placeholder {
  color: #ffffff;
}
.popupVote .agreeArea {
  position: absolute;
  left: 114px;
  top: 315px;
  width: 422px;
  height: 105px;
  color: #ffffff;
  font-size: 12px;
  overflow: auto;
  padding: 20px 15px;
  /* 스크롤바 막대 꾸미기 */
}
.popupVote .agreeArea::-webkit-scrollbar {
  width: 3px;
}
.popupVote .agreeArea::-webkit-scrollbar-thumb {
  background: #73d4fe;
}
.popupVote .agreeArea .title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}
.popupVote .agree {
  position: absolute;
  left: 114px;
  top: 600px;
  width: 427px;
}
.popupVote .agree input[type=checkbox] {
  appearance: none;
  background: url("../images/check_bg.png");
  width: 23px;
  height: 22px;
}
.popupVote .agree input[type=checkbox]:checked {
  background-position: 0 -22px;
}
.popupVote .agree.agree1 {
  top: 443px;
}
.popupVote .agree.agree2 {
  top: 475px;
}

.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.on {
  display: block;
}
.webToonArea .section {
  position: relative;
}
.webToonArea .section:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.webToonArea .webroon1 .section9 {
  overflow: hidden;
  height: 3000px;
}
.webToonArea .webroon1 .section9 video {
  margin-top: -250px;
}
.webToonArea .webToonBottom {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  background: url("../images/webtoon_bottom_bg.png") no-repeat;
  width: 667px;
  height: 102px;
  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: 23px;
  text-align: center;
  padding-right: 18px;
}
.webToonArea .webToonBottom .title img {
  display: none;
}
.webToonArea .webToonBottom .barArea {
  position: absolute;
  left: 110px;
  top: 50px;
  height: 38px;
  width: 392px;
}
.webToonArea .webToonBottom .barArea .bar {
  transition: width 1s;
  height: 38px;
  width: 0%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
.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_01.png") no-repeat;
  background-position: 0 -38px;
}
.webToonArea .webToonBottom .barArea .bar.bar3 {
  background: url("../images/webtoon_bottom_bar_04.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: 50%;
  top: 467px;
  width: 1159px;
  height: 646px;
  margin-left: -570px;
}
.weaponWrap #canvasZone .cbg {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 10;
}
.weaponWrap #canvasZone .cbg.lt {
  left: -5px;
  top: -7px;
  background: url("../images/cbg_lt.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.rt {
  right: -9px;
  top: -7px;
  background: url("../images/cbg_rt.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.lb {
  left: -5px;
  bottom: -7px;
  background: url("../images/cbg_lb.png") no-repeat;
}
.weaponWrap #canvasZone .cbg.rb {
  right: -9px;
  bottom: -7px;
  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: 207px;
  height: 95px;
  background-size: 100% auto;
}
.weaponWrap #canvasZone #loadingScreen .title {
  font-size: 44px;
  color: #bfbebe;
  margin-bottom: 20px;
  font-weight: bold;
}
.weaponWrap #canvasZone #loadingScreen .loadingBar {
  margin: 80px 0 25px 0;
  border: 2px solid #bfbebe;
  width: 407px;
  padding: 4px;
  border-radius: 25px;
  height: 25px;
}
.weaponWrap #canvasZone #loadingScreen .loadingBar .bar {
  background: #21c3db;
  height: 13px;
  border-radius: 13px;
  transition: 0.2s all;
}
.weaponWrap #canvasZone canvas {
  width: 100%;
  height: 100%;
  outline: none;
}
.weaponWrap #canvasZone .fullscreen {
  position: absolute;
  right: 45px;
  bottom: 45px;
  background: url("../images/btn_fullscreen.png") no-repeat;
  background-size: 34px auto;
  width: 34px;
  height: 34px;
  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.weapon01 .weaponInfo {
  background: url("../images/weapon_01_01.jpg") no-repeat center top;
  height: 1653px;
}
.weaponWrap.weapon01 .weaponMore {
  position: relative;
  background: url("../images/weapon_01_02.jpg") no-repeat center top;
  height: 1762px;
}
.weaponWrap.weapon01 .weaponMore .btnMake {
  top: 1320px;
}
.weaponWrap.weapon01 .weaponMore .btnOther {
  top: 1440px;
}
.weaponWrap.weapon01 .weaponMore .btnVote {
  top: 1550px;
}
.weaponWrap.weapon02 .weaponInfo {
  background: url("../images/weapon_02_01.jpg") no-repeat center top;
  height: 1653px;
}
.weaponWrap.weapon02 .weaponMore {
  position: relative;
  background: url("../images/weapon_02_02.jpg") no-repeat center top;
  height: 1874px;
}
.weaponWrap.weapon02 .weaponMore .btnMake {
  top: 1420px;
}
.weaponWrap.weapon02 .weaponMore .btnOther {
  top: 1540px;
}
.weaponWrap.weapon02 .weaponMore .btnVote {
  top: 1650px;
}
.weaponWrap.weapon03 .weaponInfo {
  background: url("../images/weapon_03_01.jpg") no-repeat center top;
  height: 1653px;
}
.weaponWrap.weapon03 .weaponMore {
  position: relative;
  background: url("../images/weapon_03_02.jpg") no-repeat center top;
  height: 1757px;
}
.weaponWrap.weapon03 .weaponMore .btnMake {
  top: 1290px;
}
.weaponWrap.weapon03 .weaponMore .btnOther {
  top: 1410px;
}
.weaponWrap.weapon03 .weaponMore .btnVote {
  top: 1520px;
}
.weaponWrap .btnProfile {
  position: absolute;
  left: 50%;
  top: 1498px;
  margin-left: -299px;
}
.weaponWrap .btnMake {
  position: absolute;
  left: 50%;
  top: 2557px;
  margin-left: -302px;
}
.weaponWrap .btnOther {
  position: absolute;
  left: 50%;
  top: 2667px;
  margin-left: -302px;
}

.customWrap {
  background: url("../images/custom_bg.jpg") no-repeat center top;
  height: 100%;
  min-height: 1200px;
  display: flex;
  justify-content: center;
}
.customWrap .customArea {
  display: none;
}
.customWrap .customArea.on {
  display: block;
}
.customWrap .customArea.step01 .alert {
  margin: 47px 0 0 31px;
  position: relative;
  z-index: 1;
}
.customWrap .customArea.step01 .step01Select {
  background: url("../images/custom_step01.png") no-repeat;
  width: 1294px;
  height: 742px;
  margin: -85px 0 0 17px;
  position: relative;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect1 {
  width: 316px;
  height: 524px;
  left: 144px;
  top: 97px;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect2 {
  width: 316px;
  height: 524px;
  left: 484px;
  top: 97px;
}
.customWrap .customArea.step01 .step01Select .btnStepSelect3 {
  width: 316px;
  height: 524px;
  left: 824px;
  top: 97px;
}
.customWrap .customArea.step01 .step01Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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 {
  background: url("../images/custom_step02_bg.png") no-repeat;
  width: 1294px;
  height: 731px;
  margin: 105px 0 0 23px;
  position: relative;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect1 {
  width: 216px;
  height: 414px;
  left: 138px;
  top: 232px;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect2 {
  width: 216px;
  height: 414px;
  left: 404px;
  top: 232px;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect3 {
  width: 216px;
  height: 414px;
  left: 668px;
  top: 232px;
}
.customWrap .customArea.step02 .step02Select .btnStepSelect4 {
  width: 216px;
  height: 414px;
  left: 938px;
  top: 232px;
}
.customWrap .customArea.step02 .step02Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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.step03 .step03Select {
  background: url("../images/custom_step03_bg.png") no-repeat;
  width: 1294px;
  height: 731px;
  margin: 105px 0 0 23px;
  position: relative;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect1 {
  width: 469px;
  height: 102px;
  left: 171px;
  top: 237px;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect2 {
  width: 469px;
  height: 102px;
  left: 657px;
  top: 237px;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect3 {
  width: 469px;
  height: 102px;
  left: 171px;
  top: 357px;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect4 {
  width: 469px;
  height: 102px;
  left: 657px;
  top: 357px;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect5 {
  width: 469px;
  height: 102px;
  left: 171px;
  top: 474px;
}
.customWrap .customArea.step03 .step03Select .btnStepSelect6 {
  width: 469px;
  height: 102px;
  left: 657px;
  top: 474px;
}
.customWrap .customArea.step03 .step03Select:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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.step04 .step04Select {
  background: url("../images/custom_step04_bg.png") no-repeat;
  width: 1294px;
  height: 731px;
  margin: 105px 0 0 23px;
  position: relative;
  overflow: hidden;
}
.customWrap .customArea.step04 .step04Select .textArea {
  background: #FFFFFF;
  position: relative;
  margin: 270px auto 0 auto;
  width: 953px;
  height: 202px;
}
.customWrap .customArea.step04 .step04Select .textArea input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 35px;
  font-family: "Pretendard Variable";
  font-weight: bold;
}
.customWrap .customArea.step04 .step04Select .textArea .maxLength {
  position: absolute;
  right: 10px;
  bottom: 15px;
  color: #999898;
  font-size: 22px;
}
.customWrap .customArea.vote .alert {
  margin: 47px 0 0 0;
  position: relative;
  z-index: 1;
}
.customWrap .customArea.vote .voteSelect {
  background: url("../images/vote_bg.png") no-repeat;
  width: 1294px;
  height: 742px;
  margin: -85px 0 0 17px;
  position: relative;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect1 {
  width: 316px;
  height: 524px;
  left: 144px;
  top: 97px;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect2 {
  width: 316px;
  height: 524px;
  left: 484px;
  top: 97px;
}
.customWrap .customArea.vote .voteSelect .btnStepSelect3 {
  width: 316px;
  height: 524px;
  left: 824px;
  top: 97px;
}
.customWrap .customArea.vote .voteSelect:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.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 .btnArea {
  display: flex;
  justify-content: center;
  margin-top: -35px;
}

.eventWrap {
  background: url("../images/event_bg_3rd_event_0523.jpg") no-repeat center top;
  min-height: 1290px;
  min-width: 1600px;
  height: 100%;
  padding-top: 217px;
}
.eventWrap .cardImg {
  margin: 0 auto;
  padding: 25px;
  width: 453px;
  height: 587px;
  position: relative;
}
.eventWrap .cardImg:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -83px;
  background: url(../images/card_bg.png) no-repeat;
  width: 100%;
  bottom: -83px;
}
.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: 18px;
  font-weight: bold;
}
.eventWrap .cardImg .text.type01 {
  top: 75.4%;
}
.eventWrap .cardImg .text.type02 {
  top: 68%;
}
.eventWrap .cardImg .text.type03 {
  top: 74.5%;
}
.eventWrap .cardImg .text.type04 {
  top: 76%;
}
.eventWrap .btnCardSave {
  margin-top: -10px;
}
.eventWrap .btnCopy {
  width: 1296px;
  height: 137px;
  left: 50%;
  top: 2440px;
  margin-left: -464px;
}
.eventWrap .snsArea {
  display: flex;
  margin-top: 13px;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 967px;
  margin-left: -80px;
}
.eventWrap .snsArea .btnBlank {
  position: relative;
  left: auto;
  top: auto;
  width: 35px;
  height: 35px;
}
.eventWrap .snsArea .btnBlank:nth-child(2) {
  margin-left: 10px;
}
.eventWrap .snsArea .btnBlank:nth-child(3) {
  margin-left: 10px;
}
.eventWrap .snsArea .btnBlank:nth-child(4) {
  margin-left: 7px;
}

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

/*# sourceMappingURL=style.css.map */