html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary,  time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

body { overflow: hidden; background-color: #090f28; }

.wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: hidden; }
.btn { display: block; position: absolute; top: 5%; left: 5%; width: 5%; height: 5%; transition: transform .3s ease; }
.thumb { transition: transform .3s ease; }

.main-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 52.6dvh; background: url("../images/main-bg.jpg") 50% 50% no-repeat; background-size: cover; }
.main-wrap .main-box { position: relative; width: 100%; max-width: 106.6667dvh; height: 100%; margin: 0 auto; }
.main-wrap .main-title { position: absolute; top: 0; left: 0; height: 100%; }
.main-wrap .main-title img { width: auto; height: 100%; }
.main-wrap .main-content { position: absolute; bottom: 3dvh; left: 2.5926dvh; width: auto; height: 18.1dvh; }
.main-wrap .main-content img { width: auto; height: 100%; }

.content-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 47.5dvh; background: url("../images/content-bg.jpg") 50% 50% no-repeat; background-size: cover; z-index: 10; /*overflow-x: auto; overflow-y: hidden;*/ }
.content-wrap .content-box { position: relative; width: 118.5185dvh; height: 100%; padding: 0 5.9259dvh; margin: 0 auto; }

.content-wrap .swiper { width: 100%; height: 100%; }
.content-wrap .swiper-button-prev,
.content-wrap .swiper-button-next { top: 44%; width: 5.7407dvh; height: 3.8889dvh; margin-top: 0; transform: translateY(-50%); color: transparent; background-size: 100%; background-position: center; background-repeat: no-repeat; }
.content-wrap .swiper-button-prev { background-image: url("../images/swiper-arrow-left.png"); }
.content-wrap .swiper-button-next { background-image: url("../images/swiper-arrow-right.png"); }
.content-wrap .swiper-button-disabled { opacity: 0 !important; }

.content-wrap .swiper-pagination { display: flex; justify-content: center; bottom: 2.7778dvh !important; }
.content-wrap .swiper-pagination-bullet { display: block; width: 2.7778dvh; height: 2.7778dvh; margin: 0 !important; background: url("../images/swiper-paging.png") 0 0 no-repeat; background-size: 100%; opacity: 1; }
.content-wrap .swiper-pagination-bullet-active { background-image: url("../images/swiper-paging-on.png"); }

.content-wrap .swiper-slide img { width: 100%; height: auto; }
.content-wrap .swiper-slide .thumb-wrap { position: absolute; display: flex; }
.content-wrap .swiper-slide .thumb-wrap a.thumb:hover { transform: scale(1.05); }

.content-wrap .swiper-slide.content-1 .thumb-wrap { top: 26.6%; left: 8%; width: 84.3%; justify-content: space-between; }
.content-wrap .swiper-slide.content-1 .thumb-wrap .thumb { width: 24%; }
.content-wrap .swiper-slide.content-1 .thumb-wrap .thumb img { width: 100%; height: auto; }
.content-wrap .swiper-slide.content-1 .btn-1 { top: 64%; left: 36.2%; width: 28%; height: 13%; }
.content-wrap .swiper-slide.content-1 .btn-1:hover { transform: scale(1.05); }

.content-wrap .swiper-slide.content-2 .thumb-wrap { top: 38.5%; left: 15%; width: 70.7%; }
.content-wrap .swiper-slide.content-2 .thumb-wrap .thumb { width: 31%; }
.content-wrap .swiper-slide.content-2 .thumb-wrap .thumb-1 { margin-right: 2.1%; }
.content-wrap .swiper-slide.content-2 .thumb-wrap .thumb-2 { margin-right: 4.6%; }

.content-wrap .swiper-slide.content-3 .thumb-wrap { top: 38%; left: 24.7%; width: 50.6%; justify-content: space-between; }
.content-wrap .swiper-slide.content-3 .thumb-wrap .thumb { width: 43.6%; }

.content-wrap .swiper-slide.content-4 .thumb-wrap { top: 38.5%; left: 11.8%; width: 76.7%; justify-content: space-between; }
.content-wrap .swiper-slide.content-4 .thumb-wrap .thumb { width: 32.5%; }

.content-wrap .swiper-slide.content-5 .btn-1 { top: 38%; left: 13%; width: 13%; height: 38%; }
.content-wrap .swiper-slide.content-5 .btn-2 { top: 45%; left: 63%; width: 24%; height: 22%; }

.content-wrap .content-character-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.content-wrap .character-box .character { pointer-events: none; position: absolute; top: 5%; left: 5%; width: 5%; transition: top .5s ease-in-out, left .5s ease-in-out, opacity .5s ease-in-out; transition-duration: .2s; opacity: 0; }
.content-wrap .character-box .character img { width: 100%; height: auto; }
.content-wrap .character-box.active .character { opacity: 1; transition-duration: .5s; }

.content-wrap .character-box-1 .character-1 { top: 65%; left: 63.6%; width: 31.4%; }
.content-wrap .character-box-1.active .character-1 { top: 60%; }

.content-wrap .character-box-2 .character-1 { top: -3%; left: 0; width: 20%; }
.content-wrap .character-box-2.active .character-1 { left: -2%; }

.content-wrap .character-box-3 .character-1 { top: 44%; left: 7%; width: 20%; }
.content-wrap .character-box-3 .character-2 { top: -7%; left: 74%; width: 16%; }
.content-wrap .character-box-3.active .character-1 { left: 9%; }
.content-wrap .character-box-3.active .character-2 { top: -10%; }

.content-wrap .character-box-4 .character-1 { top: 51%; left: 78%; width: 19%; }
.content-wrap .character-box-4.active .character-1 { left: 76%; }

.content-wrap .character-box-5 .character-1 { top: 31%; left: 78%; width: 24%; }
.content-wrap .character-box-5.active .character-1 { left: 79.5%; }

.content-wrap::-webkit-scrollbar { height: 8px; }
.content-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
.content-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 5px; }
.content-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }

.popup-wrap { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .3s ease, visibility .3s ease; overflow-x: auto; }
.popup-wrap.show { opacity: 1; visibility: visible; }
.popup-wrap .dim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .8; }
.popup-wrap .popup-box { display: flex; align-items: center; position: relative; width: 116.4815dvh; height: 100%; margin: 0 auto; z-index: 10; }
.popup-wrap .popup-box-inner { position: relative; width: 100%; height: 78.9815dvh; }
.popup-wrap .popup-box .popup { height: 100%; }
.popup-wrap .popup-box .popup video { position: absolute; top: 0.6%; left: 0.3%; width: 99.4%; height: 82.4%; }
.popup-wrap .popup-box .popup .content { position: absolute; top: 0.6%; left: 0.3%; width: 99.4%; height: 82.4%; }
.popup-wrap .popup-box .popup img { position: absolute; width: auto; }
.popup-wrap .popup-box .popup img.text { height: 14%; bottom: 0; left: 50%; transform: translateX(-50%); }
.popup-wrap .popup-box .btn-close { top: -6.4815dvh; left: auto; right: 0; height: 5.0926dvh; }
.popup-wrap .popup-box .btn-close img { width: auto; height: 100%; }
.popup-wrap .popup-box img.frame { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: auto; z-index: 10; }

.popup-wrap .popup-box .popup-3-1 img.text { height: 17%; bottom: -3%; }

.popup-wrap .popup-box .popup-4-1 .popup-swiper { position: absolute; top: 0.6%; left: 0.3%; width: 99.4%; height: 82.4%; }
.popup-wrap .popup-box .popup-4-1 .popup-swiper img { width: 100%; height: auto; }
.popup-wrap .popup-box .popup-4-1 .popup-swiper .swiper-button-prev,
.popup-wrap .popup-box .popup-4-1 .popup-swiper .swiper-button-next { top: 50%; width: 6.4815dvh; height: 6.4815dvh; margin-top: 0; transform: translateY(-50%); color: transparent; background-size: 100%; background-position: center; background-repeat: no-repeat; }
.popup-wrap .popup-box .popup-4-1 .popup-swiper .swiper-button-prev { left: 3.7037dvh; background-image: url("../images/popup-swiper-arrow-left.png"); }
.popup-wrap .popup-box .popup-4-1 .popup-swiper .swiper-button-next { right: 3.7037dvh; background-image: url("../images/popup-swiper-arrow-right.png"); }
.popup-wrap .popup-box .popup-4-1 .popup-swiper .swiper-button-disabled { opacity: 0 !important; }

.popup-wrap .popup-box .popup-4-2 img.text { height: 10%; bottom: 4%; }