/* Web main.css */
@charset "UTF-8";
.locomotive { position: relative; z-index: 1000; overflow: hidden; }

#main *, header, header *, .header_dim, .quick, .quick *, .quick_dim, header .etc .lang .lang_box a { cursor: none !important; }

footer { z-index: 10050 !important; }

.nextMotion { animation-name: kvNext; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: linear; }

@keyframes kvNext { 0% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
  60% { clip-path: polygon(0 0, 0 60%, 100% 40%, 100% 0); }
  80% { clip-path: polygon(0 0, 0 20%, 100% 20%, 100% 0); }
  100% { clip-path: polygon(0 0, 0 0, 100% 0, 100% 0); } }

html.onSafari .cursor.kv-enter .tri { animation-name: none; }

.cursor { position: fixed; top: 120vh; left: 120vw; width: 60px; height: 60px; will-change: top, left; transform-origin: center center; transform: translate(-50%, -50%) !important; z-index: 10020; pointer-events: none; cursor: none; mix-blend-mode: difference; transition: width 0.2s, height 0.2s; }

.cursor .tri { position: absolute; top: 50%; left: 50%; transform-origin: center center; width: 100%; height: 100%; transform: translate(-50%, -50%) rotate(0deg); }

.cursor .tri img { transform-origin: center center; transform: scale(0.6) rotate(-45deg); transition: all 0.2s; }

.cursor .arrow { display: none; }

.cursor .arrow img { width: 60px; }

.cursor p.kv { position: absolute; top: 50%; left: 50%; transform: scale(0) translate(-50%, -50%); mix-blend-mode: revert; transform-origin: center center; }

.cursor.kv-enter { width: 120px; height: 120px; }

.cursor.kv-enter .tri { transition: transform 88s; transition-timing-function: linear; animation-name: kvcursor_tri; animation-iteration-count: infinite; animation-duration: 88s; animation-timing-function: linear; }

@keyframes kvcursor_tri { from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-4005deg); } }

.cursor.kv-enter .tri img { transform: scale(1.5) rotate(-45deg); }

.cursor.kv-enter p.kv { top: 50%; transform: translate(-50%, -50%); transition: all 0.2s; mix-blend-mode: revert; }

.cursor.webgl-enter.prev, .cursor.webgl-enter.next { width: 120px; height: 120px; }

.cursor.webgl-enter .tri { transform-origin: center center; transform: translate(-50%, -50%); }

.cursor.webgl-enter .tri img { transition: transform 0.5s; }

.cursor.webgl-enter.prev .tri img { transform: scale(1.5) rotate(-90deg); }

.cursor.webgl-enter.next .tri img { transition: transform 0.75s; transform: scale(1.5) rotate(90deg); }

.cursor.gallery-enter .tri { display: none; }

.cursor.gallery-enter .arrow { display: block; }

#main { position: relative; background-color: #fff; }

#main.bgBlack, #main .bgBlack { background-color: black; }

#main .title-container { position: relative; overflow: hidden; text-align: center; }

#main .title-container .subtitle { text-transform: uppercase; }

#main .kv-section { position: relative; width: 100%; height: 100vh; min-height: 30vw; }

#main .kv-section .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

#main .kv-section .video-container li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; background-color: #000; }

#main .kv-section .video-container li.prev { z-index: 2; }

#main .kv-section .video-container li.current { opacity: 1; z-index: 3; }

#main .kv-section .video-container li.landed { opacity: 1; z-index: 1; }

#main .kv-section .video-container li.first a { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); animation-name: subtitleClip; animation-duration: 0.75s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: linear; }

@keyframes subtitleClip { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  45% { clip-path: polygon(0% 0%, 45% 0%, 35% 100%, 0% 100%); }
  75% { clip-path: polygon(0% 0%, 85% 0%, 85% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }

#main .kv-section .video-container li video, #main .kv-section .video-container li .kv-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; opacity: 0.95; }

#main .kv-section .video-container li p { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; color: #fff; }

#main .kv-section .video-container li p a { display: flex; align-items: center; justify-content: center; flex-direction: column; }

#main .kv-section .video-container li p a span { display: inline-block; }

#main .kv-section .video-container li p a span::after { content: ""; display: block; width: 0%; height: 6px; background-color: #fff; transition: width 0.5s ease; }

#main .kv-section .video-container li p a:hover span::after { width: 100%; }

#main .kv-section .scrollspy { position: absolute; bottom: clamp(18.66667px, 1.45833vw, 1.45833vw); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 10; }

#main .kv-section .scrollspy > li { display: flex; align-items: center; margin-right: 16px; }

#main .kv-section .scrollspy > li button { position: relative; opacity: 0.4; color: #fff; text-transform: uppercase; padding: 20px 0; transition: opacity 0.3s; }

#main .kv-section .scrollspy > li button:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; content: ""; width: calc(100% + 32px); height: calc(100% + 32px); }

#main .kv-section .scrollspy > li ul { position: relative; width: 88px; height: 2px; transform-origin: right center; transition: all 0.5s; margin-left: 16px; }

#main .kv-section .scrollspy > li ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; }

#main .kv-section .scrollspy > li ul li.current { transform-origin: left center; }

#main .kv-section .scrollspy > li ul li.total { opacity: 0.4; }

#main .kv-section .scrollspy > li:hover button { opacity: 1; }

#main .kv-section .scrollspy > li.active button { opacity: 0; }

#main .kv-section .scrollspy > li.active:nth-of-type(2) button { color: #ff6119; }

#main .kv-section .scrollspy > li.active:nth-of-type(2) ul li.current { background-color: #ff6119; }

#main .kv-section .scrollspy > li.active:nth-of-type(3) button { color: #ffd241; }

#main .kv-section .scrollspy > li.active:nth-of-type(3) ul li.current { background-color: #ffd241; }

#main .kv-section .scrollspy > li.active:nth-of-type(4) button { color: #30e3c5; }

#main .kv-section .scrollspy > li.active:nth-of-type(4) ul li.current { background-color: #30e3c5; }

#main .kv-section .scrollspy.block::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#main .kv-section .kv-change { position: absolute; top: 0; left: -25%; width: 150%; height: 100%; background-color: #ff6119; z-index: 10000; transform: translateX(-100%); clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); }

#main .kv-section .kv-change.color1 { background-color: #ff6119; }

#main .kv-section .kv-change.color2 { background-color: #ffd241; }

#main .kv-section .kv-change.color3 { background-color: #30e3c5; }

#main .kv-section .kv-change.color0 { background-color: #46508c; }

#main .kv-section .kv-change.num5.color4 { background-color: #9632a5; }

#main .kv-section .kv-change.num5.color0 { background-color: #46508c; }

#main .kv-section .kv-change.in { transform: translateX(0); transition: transform 1s cubic-bezier(0.82, 0.37, 0.07, 1); }

#main .kv-section .kv-change.out { transform: translateX(100%); transition: transform 1.25s cubic-bezier(0, 0, 0.2, 1); transition-delay: 0.15s; }

#main .kv-section .pointer { position: absolute; left: 50%; top: calc(50% + 24vh); transform: translateX(-50%); z-index: 1; }

#main .kv-section .pointer .scroll { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0; z-index: 5; top: 100%; overflow: hidden; }

#main .kv-section .pointer .scroll .line { display: block; position: relative; width: clamp(1.33333px, 0.10417vw, 0.10417vw); height: clamp(48px, 3.75vw, 3.75vw); background-color: rgba(255, 255, 255, 0.4); margin: 0 auto; }

#main .kv-section .pointer .scroll .line:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: clamp(1.33333px, 0.10417vw, 0.10417vw); height: clamp(26.66667px, 2.08333vw, 2.08333vw); background-color: #ff6119; -webkit-animation: scrollMot 2s infinite; -o-animation: scrollMot 2s infinite; animation: scrollMot 2s infinite; }

@keyframes scrollMot { 0% { top: clamp(-48px, -3.75vw, -3.75vw); }
  100% { top: clamp(48px, 3.75vw, 3.75vw); } }

#main .slide-section { position: relative; width: 100%; height: 100vh; margin-bottom: 400px; padding-top: clamp(160px, 12.5vw, 12.5vw); box-sizing: border-box; }

#main .slide-section .title-container { position: absolute; left: 50%; transform: translateX(-50%); }

#main .slide-section .title-container .subtitle { margin-bottom: clamp(26.66667px, 2.08333vw, 2.08333vw); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

#main .slide-section .title-container p.desc { opacity: 0; transform: translateY(-20px); }

#main .slide-section .text-container { top: 0; left: 50%; transform: translateX(-50%); width: 105%; background-color: rgba(0, 0, 0, 0); transition: background-color 0.5s; }

#main .slide-section .text-container, #main .slide-section .text-container .color { position: absolute; height: 100%; }

#main .slide-section .text-container .slide-hover-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; color: #fff; text-align: center; transition: opacity 0.5s; }

#main .slide-section .text-container .color { top: 160%; left: 0; width: 100%; background-color: #fc3; }

#main .slide-section .slide-container { position: absolute; top: 100%; transform: translateY(-50%); will-change: top; }

#main .slide-section .slide-container > ul { display: flex; align-items: center; justify-content: flex-start; width: 195%; will-change: transform; transition: transform 0s ease; }

#main .slide-section .slide-container > ul li { position: relative; margin: 0 24px; box-sizing: border-box; transform: translate(0, var(--app-slide)); overflow: hidden; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 1) .text-container .color { background-color: #ff6119; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 2) .text-container .color { background-color: #ffd241; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 3) .text-container .color { background-color: #46508c; }

#main .slide-section .slide-container > ul li:nth-of-type(4n) .text-container .color { background-color: #30e3c5; }

#main .slide-section .slide-container > ul li > div { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }

#main .slide-section .slide-container > ul li img { display: block; }

#main .slide-section .slide-container > ul li img.content { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); }

#main .slide-section .slide-container > ul li img.frame { width: 100%; opacity: 0; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 1) { width: 18%; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 2), #main .slide-section .slide-container > ul li:nth-of-type(4n) { width: 23%; }

#main .slide-section .slide-container > ul li:nth-of-type(4n + 3) { width: 30%; }

#main .slide-section.landing .slide-container > ul li { transform: translate(0, var(--app-slide)) !important; }

#main .slide-section.landing .slide-container > ul li:nth-of-type(1) { transition: transform 1.5s; }

#main .slide-section.landing .slide-container > ul li:nth-of-type(2) { transition: transform 1.4s; }

#main .slide-section.landing .slide-container > ul li:nth-of-type(3) { transition: transform 1.3s; }

#main .slide-section.landing .slide-container > ul li:nth-of-type(4) { transition: transform 1.2s; }

#main .slide-section.landing .slide-container > ul li:nth-of-type(5) { transition: transform 1.1s; }

#main .slide-section.landed .title-container .subtitle { animation-name: subtitleClip; animation-duration: 1.2s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: linear; }

@keyframes subtitleClip { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  45% { clip-path: polygon(0% 0%, 45% 0%, 35% 100%, 0% 100%); }
  75% { clip-path: polygon(0% 0%, 85% 0%, 85% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }

#main .slide-section.landed .title-container p.desc { opacity: 1; transform: translateY(0); transition: all 0.5s 0.6s; }

#main .slide-section.landed .slide-container { transition: translate 0.1s ease; }

#main .slide-section.landed .slide-container > ul li { transform: translate(0, 0) !important; transition: transform 1s; }

#main .slide-section.landed .slide-container > ul li:nth-of-type(1), #main .slide-section.landed .slide-container > ul li:nth-of-type(5) { transition-delay: 0.1s; }

#main .slide-section.landed .slide-container > ul li:nth-of-type(2), #main .slide-section.landed .slide-container > ul li:nth-of-type(4) { transition-delay: 0.05s; }

#main .slide-section.landed .slide-container > ul li:nth-of-type(3) { transition-delay: 0s; }

#main .slide-section.landed .slide-container.is-hover > ul li .text-container .color { transform: skewY(-40deg) scale(1.5, 1.5); }

#main .slide-section.landed .slide-container.is-hover > ul li:hover .text-container { background-color: rgba(0, 0, 0, 0.3); transition: background-color 0.5s; }

#main .slide-section.landed .slide-container.is-hover > ul li:hover .text-container .slide-hover-txt { opacity: 1; transition: opacity 0.5s 0.25s; }

#main .slide-section.landed .slide-container.is-hover > ul li:hover .text-container .color { top: -160%; transform: skewY(0deg) scale(1.2, 1.2); transform-origin: top center; transition: top 1s, transform 1s; }

#main .list-section { position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; margin-top: clamp(-160px, -12.5vw, -12.5vw); text-align: center; padding: 0 8.3333vw; padding-bottom: clamp(160px, 12.5vw, 12.5vw); }

#main .list-section.is-landed .img::after { content: ""; display: block; position: absolute; height: 100%; top: 0; left: 0; width: 100%; background-color: #fc3; transform: skewY(0deg) scaleY(1.5); transform-origin: center center; background-color: black; }

#main .list-section.is-landed .active .img::after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 100%; top: -150%; transform: skewY(-10deg) scaleY(1.2); transition: top 1s, transform 1.5s; }

#main .list-section .list-section-container { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; }

#main .list-section .list-section-container .list-section-img img { display: block; width: 100%; }

#main .list-section .list-section-container .list-section-img.left li.single .img-container { right: 7.3333vw; }

#main .list-section .list-section-container .list-section-img.left li.double .img-container:nth-of-type(1) { right: 1vw; }

#main .list-section .list-section-container .list-section-img.left li.double .img-container:nth-of-type(2) { left: 1vw; }

#main .list-section .list-section-container .list-section-img.right li.single .img-container { right: 1vw; }

#main .list-section .list-section-container .list-section-img.right li.double .img-container:nth-of-type(1) { left: 1vw; }

#main .list-section .list-section-container .list-section-img.right li.double .img-container:nth-of-type(2) { right: 1vw; }

#main .list-section .list-section-container .list-section-img li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#main .list-section .list-section-container .list-section-img li .img-container { position: absolute; opacity: 0; transform: translateY(16vh); }

#main .list-section .list-section-container .list-section-img li .img-container .img { position: relative; overflow: hidden; }

#main .list-section .list-section-container .list-section-img li.single .img-container { transform: translateY(36vh); }

#main .list-section .list-section-container .list-section-img li.double .img-container:nth-of-type(1) { transform: translateY(10vh); }

#main .list-section .list-section-container .list-section-img li.double .img-container:nth-of-type(2) { transform: translateY(23vh); }

#main .list-section .list-section-container .list-section-img li p { opacity: 0; margin-top: clamp(26.66667px, 2.08333vw, 2.08333vw); text-align: left; }

#main .list-section .list-section-container .list-section-img li.active .img-container { opacity: 1; transform: translateY(0px) !important; transition: opacity 0.75s, transform 0.85s cubic-bezier(0, 0, 0.02, 0.96); }

#main .list-section .list-section-container .list-section-img li.active .img-container p { opacity: 1; transition: opacity 0.5s; }

#main .list-section .list-section-container .list-section-img li.active.single .img-container { transition: opacity 0.75s, transform 0.85s cubic-bezier(0, 0, 0.02, 0.96); }

#main .list-section .list-section-container .list-section-img li.active.double .img-container:nth-of-type(1) { transition: opacity 0.75s, transform 0.85s cubic-bezier(0, 0, 0.02, 0.96); }

#main .list-section .list-section-container .list-section-img li.active.double .img-container:nth-of-type(2) { transition: opacity 0.75s, transform 0.85s cubic-bezier(0, 0, 0.02, 0.96); }

#main .list-section .list-section-container .list-section-img li.single .img-container { width: 17.85vw; top: -20px; }

#main .list-section .list-section-container .list-section-img li.double .img-container:nth-of-type(1) { width: 14.7vw; bottom: 100%; }

#main .list-section .list-section-container .list-section-img li.double .img-container:nth-of-type(2) { width: 15.75vw; top: 100%; }

#main .list-section .list-section-container .list-section-content { position: relative; }

#main .list-section .list-section-list { margin-bottom: clamp(50.66667px, 3.95833vw, 3.95833vw); }

#main .list-section .list-section-list li { text-align: center; text-transform: uppercase; white-space: nowrap; }

#main .list-section .list-section-list li:not(:last-of-type) { margin-bottom: clamp(41.33333px, 3.22917vw, 3.22917vw); }

#main .list-section .list-section-list li span { -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #111; -webkit-text-fill-color: transparent; }

#main .list-section .list-section-list li::after { content: attr(data-list-content); position: absolute; top: 0; left: 0; width: 100%; text-align: center; text-transform: uppercase; z-index: -1; opacity: 1; transition: opacity 0s; }

#main .list-section .list-section-list li.active span { -webkit-text-stroke-width: 1px; }

#main .list-section .list-section-list li.active::after { opacity: 0; }

#main .list-section.is-hover .list-section-list li span:hover, #main .list-section .list-section-list li.active span { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #111; -webkit-text-fill-color: transparent; }

#main .list-section .list-section-list li, #main .list-section .list-section-moreBtn { position: relative; z-index: 1; opacity: 0; transform: translateY(10vh); }

#main .list-section.active .list-section-list li, #main .list-section.active .list-section-moreBtn { opacity: 1; transform: translateY(0); transition: all 0.5s; }

#main .list-section .list-section-moreBtn { display: inline-block; }

#main .list-section .list-section-tri { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }

#main .list-section .list-section-tri img { position: absolute; transform: translate(-50%, -50%); opacity: 0; }

#main .list-section .list-section-tri.odd img, #main .list-section .list-section-tri.even img { opacity: 1; transition: opacity 1s, transform 1s; }

#main .list-section .list-section-tri.odd img.tri1 { top: -35%; left: 100%; transform: translate(-30%, -70%) rotate(45deg); }

#main .list-section .list-section-tri.odd img.tri2 { top: 55%; left: -15%; transform: translate(-70%, -50%) rotate(-45deg); }

#main .list-section .list-section-tri.odd img.tri3 { top: 120%; left: 90%; transform: translate(-30%, -30%) rotate(45deg); }

#main .list-section .list-section-tri.even img.tri1 { top: -40%; left: 0%; transform: translate(-70%, -30%) rotate(-45deg); }

#main .list-section .list-section-tri.even img.tri2 { top: 55%; left: 110%; transform: translate(-30%, -50%) rotate(45deg); }

#main .list-section .list-section-tri.even img.tri3 { top: 125%; left: 20%; transform: translate(-70%, -70%) rotate(-45deg); }

#main .fullvideo-section { position: relative; padding-bottom: 40vh; /*임의값*/ overflow: hidden; }

#main .fullvideo-section .video-container { position: relative; width: 100%; }

#main .fullvideo-section .video-box { position: relative; height: 100vh; min-height: 0.5625vw; }

#main .fullvideo-section .video-box video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }

#main .fullvideo-section .fullvideo-dim { position: absolute; top: 100.1%; left: 0; width: 100%; height: 130vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.013) 4.8%, rgba(0, 0, 0, 0.049) 9.8%, rgba(0, 0, 0, 0.104) 14.8%, rgba(0, 0, 0, 0.175) 20%, rgba(0, 0, 0, 0.259) 25.5%, rgba(0, 0, 0, 0.352) 31.2%, rgba(0, 0, 0, 0.45) 37.1%, rgba(0, 0, 0, 0.55) 43.4%, rgba(0, 0, 0, 0.648) 50.1%, rgba(0, 0, 0, 0.741) 57.2%, rgba(0, 0, 0, 0.825) 64.7%, rgba(0, 0, 0, 0.896) 72.7%, rgba(0, 0, 0, 0.951) 81.2%, rgba(0, 0, 0, 0.987) 90.3%, black 100%); }

#main .fullvideo-section .fullvideo-dim::after { content: ""; display: block; position: absolute; left: 0; bottom: -2px; width: 100%; height: 4px; background-color: #000; }

#main .webgl-section { position: relative; width: 100%; height: 125vh; overflow: hidden; }

#main .webgl-section::before { content: ""; display: block; position: absolute; left: 0; top: -4px; width: 100%; height: 8px; background-color: #000; }

#main .webgl-section .webgl-container { position: relative; height: 100vh; opacity: 0; }

#main .webgl-section .webgl-container.active { opacity: 1; transition: opacity 0.75s 0.5s; transition-timing-function: ease-in; }

#main .webgl-section .webgl-img { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

#main .webgl-section .webgl-img .blur { content: ""; position: absolute; width: 100%; height: 50%; top: -4px; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.013) 4.8%, rgba(0, 0, 0, 0.049) 9.8%, rgba(0, 0, 0, 0.104) 14.8%, rgba(0, 0, 0, 0.175) 20%, rgba(0, 0, 0, 0.259) 25.5%, rgba(0, 0, 0, 0.352) 31.2%, rgba(0, 0, 0, 0.45) 37.1%, rgba(0, 0, 0, 0.55) 43.4%, rgba(0, 0, 0, 0.648) 50.1%, rgba(0, 0, 0, 0.741) 57.2%, rgba(0, 0, 0, 0.825) 64.7%, rgba(0, 0, 0, 0.896) 72.7%, rgba(0, 0, 0, 0.951) 81.2%, rgba(0, 0, 0, 0.987) 90.3%, black 100%); }

#main .webgl-section .webgl-img .img-container { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: -1; }

#main .webgl-section .webgl-img .img-container li { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; transform: scale(1.05); transition: opacity 1s, transform 1s; opacity: 0; overflow: hidden; }

#main .webgl-section .webgl-img .img-container li.webgl { background-color: #000; transition: opacity 1s, transform 1s background-color 1s; }

#main .webgl-section .webgl-img .img-container li.active { opacity: 1; z-index: 1; transform: scale(1); }

#main .webgl-section .webgl-img .img-container li.active.webgl { background-color: transparent; }

#main .webgl-section .webgl-img .img-container li img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }

#main .webgl-section .webgl-img .img-container li video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }

#main .webgl-section .webgl-img .img-container li video.dummy { min-width: initial; min-height: initial; }

#main .webgl-section .webgl-img #webglScene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }

#main .webgl-section .webgl-img #webglScene canvas { transform: scale(1.13); transform-origin: center center; }

#main .webgl-section .webgl-img .webgl-cover { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); }

#main .webgl-section .webgl-img .webgl-cover.active { opacity: 0; transition: opacity 0.5s 1s; }

#main .webgl-section .webgl-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }

#main .webgl-section .webgl-ui.landed { opacity: 1; transition: opacity 0.35s; }

#main .webgl-section .webgl-ui.landed .index { top: 60px; transition: top 0.35s; }

#main .webgl-section .webgl-ui.landed .webgl-btn:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); transform-origin: center center; width: 12px; height: 18px; background: url(/assets/img/main/arrow.svg) no-repeat center/contain; }

#main .webgl-section .webgl-ui.landed .webgl-btn.prev { left: 30px; transition: left 0.35s; }

#main .webgl-section .webgl-ui.landed .webgl-btn.prev:after { left: 16px; transform: translateY(-50%) rotate(-180deg); }

#main .webgl-section .webgl-ui.landed .webgl-btn.next { right: 30px; transition: right 0.35s; }

#main .webgl-section .webgl-ui.landed .webgl-btn.next:after { right: 20px; }

#main .webgl-section .webgl-ui.landed .webgl-section-moreBtn { bottom: clamp(106.66667px, 8.33333vw, 8.33333vw); transition: bottom 0.35s; }

#main .webgl-section .webgl-ui .title { transform: translate(-50%, -50%); }

#main .webgl-section .webgl-ui .title, #main .webgl-section .webgl-ui .title > li { position: absolute; top: 50%; left: 50%; width: clamp(573.33333px, 44.79167vw, 44.79167vw); text-align: center; }

#main .webgl-section .webgl-ui .title li { opacity: 0; z-index: -1; transform: translate(-50%, -50%) scale(1.05); transition: opacity 1s, transform 1s; }

#main .webgl-section .webgl-ui .title li img { display: block; margin: 0 auto; }

#main .webgl-section .webgl-ui .title li img.dim { position: absolute; top: -50%; left: 0; z-index: -1; }

#main .webgl-section .webgl-ui .title li p { position: absolute; bottom: calc(100% + 20px); left: 0; width: 100%; text-align: center; text-transform: uppercase; color: #fff !important; line-height: 1; }

#main .webgl-section .webgl-ui .title li.title_crossfirex p { bottom: initial; top: 0; }

#main .webgl-section .webgl-ui .title li.title_talesrunner p { bottom: initial; top: 14.5%; }

#main .webgl-section .webgl-ui .title li.active { opacity: 1; z-index: 1; transition: opacity 0.5s 0.5s, transform 0.7s 0.5s ease-out; transform: translate(-50%, -50%) scale(1); }

#main .webgl-section .webgl-ui .index { display: none !important; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; bottom: initial; }

#main .webgl-section .webgl-ui .index li { color: white; }

#main .webgl-section .webgl-ui .index > span { color: white; }

#main .webgl-section .webgl-ui .index .divLine { display: inline-block; margin: 0 4px; }

#main .webgl-section .webgl-ui .index .total, #main .webgl-section .webgl-ui .index .divLine { opacity: 0.3; }

#main .webgl-section .webgl-ui .webgl-btn { position: absolute; top: 50%; transform: translateY(-50%); display: block; opacity: 0.4; padding: 30px; color: white; text-transform: uppercase; }

#main .webgl-section .webgl-ui .webgl-btn.prev { left: 10px; }

#main .webgl-section .webgl-ui .webgl-btn.next { right: 10px; }

#main .webgl-section .webgl-ui .webgl-btn:hover { opacity: 1; }

#main .webgl-section .webgl-ui .webgl-section-moreBtn { position: absolute; bottom: clamp(86.66667px, 6.77083vw, 6.77083vw); left: 50%; transform: translateX(-50%); }

#main .news-section { margin: 0 auto; padding: 0 8.3333vw; padding-bottom: clamp(133.33333px, 10.41667vw, 10.41667vw); text-align: center; background-color: white; }

#main .news-section .title-container { margin-bottom: clamp(73.33333px, 5.72917vw, 5.72917vw); }

#main .news-section .title-container .subtitle { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

#main .news-section .title-container .subtitle.active { animation-name: subtitleClip; animation-duration: 1.75s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: linear; }

@keyframes subtitleClip { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  45% { clip-path: polygon(0% 0%, 45% 0%, 35% 100%, 0% 100%); }
  75% { clip-path: polygon(0% 0%, 85% 0%, 85% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }

#main .news-section .news-section-list { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }

#main .news-section .news-section-list li { width: calc(100% / 3 - 160px / 3); text-align: left; opacity: 0; transform: translateY(120px); }

#main .news-section .news-section-list li:hover .img-container .img { transform: scale(1.1); }

#main .news-section .news-section-list li .img-container { overflow: hidden; }

#main .news-section .news-section-list li .img-container .img { position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: transform 1s; }

#main .news-section .news-section-list li .img-container .img img { width: 100%; }

#main .news-section .news-section-list li .img-container .img img.content { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); transition: transform 0.5s; }

#main .news-section .news-section-list li .img-container .img img.frame { opacity: 0; }

#main .news-section .news-section-list li .img-container .img::after { content: ""; display: block; position: absolute; height: 100%; top: 0; left: 0; width: 100%; background-color: #fc3; transform: skewY(0deg) scaleY(1.5); transform-origin: center center; background-color: black; }

#main .news-section .news-section-list li p { margin-top: clamp(26.66667px, 2.08333vw, 2.08333vw); margin-bottom: clamp(23.33333px, 1.82292vw, 1.82292vw); }

#main .news-section .news-section-list li:nth-last-of-type(1), #main .news-section .news-section-list li:nth-last-of-type(2), #main .news-section .news-section-list li:nth-last-of-type(3) { margin-bottom: 0; }

#main .news-section .news-section-list li:nth-of-type(7) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li:nth-of-type(8) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li:nth-of-type(9) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li:nth-of-type(10) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li:nth-of-type(11) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li:nth-of-type(12) { height: 0; overflow: hidden; }

#main .news-section .news-section-list li.active { height: initial; overflow: initial; margin-bottom: clamp(53.33333px, 4.16667vw, 4.16667vw); opacity: 1; transform: translateY(0px); transition: transform 0.55s, opacity 0.5s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 1), #main .news-section .news-section-list li.active:nth-of-type(6n + 1) .img::after { transition-delay: 0s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 2), #main .news-section .news-section-list li.active:nth-of-type(6n + 2) .img::after { transition-delay: 0.2s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 3), #main .news-section .news-section-list li.active:nth-of-type(6n + 3) .img::after { transition-delay: 0.4s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 4), #main .news-section .news-section-list li.active:nth-of-type(6n + 4) .img::after { transition-delay: 0.6s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 5), #main .news-section .news-section-list li.active:nth-of-type(6n + 5) .img::after { transition-delay: 0.8s; }

#main .news-section .news-section-list li.active:nth-of-type(6n + 6), #main .news-section .news-section-list li.active:nth-of-type(6n + 6) .img::after { transition-delay: 1s; }

#main .news-section .news-section-list li.active .img-container .img::after { top: -150%; transform: skewY(-10deg) scaleY(1.2); transition: top 1s, transform 1.5s; }

#main .news-section .news-section-moreBtn { display: inline-block; margin: 0 auto; margin-top: clamp(48px, 3.75vw, 3.75vw); }

#main .title-section { position: fixed; top: 100vh; left: 0; width: 100vw; height: 100vh; pointer-events: none; }

#main .title-section .title-container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); }

body { height: 100vh; overflow: hidden; }

body::-webkit-scrollbar { width: 0px; }

body.loaded { height: max-content; overflow-y: hidden; }

body.loaded::-webkit-scrollbar { width: 10px; }

#preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100000; cursor: none; }

#preloader > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; }

#preloader.loaded > div { animation-fill-mode: forwards; animation-timing-function: linear; animation-duration: 1.5s; animation-delay: 0.12s; }

#preloader.loaded > div.left { animation-name: preloaderLeft; }

@keyframes preloaderLeft { 0% { clip-path: polygon(91% 0, 0 0, 0 81%); }
  25% { clip-path: polygon(90% 0, 0 0, 0 80%); }
  60% { clip-path: polygon(35% 0, 0 0, 0 0%); }
  100% { clip-path: polygon(35% 0, 0 0, 0 0%); } }

#preloader.loaded > div.right { animation-name: preloaderRight; }

@keyframes preloaderRight { 0% { clip-path: polygon(90% 0, 100% 0, 100% 100%, 0 100%, 0 80%); }
  25% { clip-path: polygon(90% 0, 100% 0, 100% 100%, 0 100%, 0 80%); }
  30% { clip-path: polygon(95% 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  50% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 30% 100%, 30% 100%); }
  70% { clip-path: polygon(100% 20%, 100% 20%, 100% 100%, 70% 100%, 70% 100%); }
  100% { clip-path: polygon(100% 40%, 100% 40%, 100% 100%, 100% 100%, 100% 100%); } }

#main .bridge { position: relative; width: 100%; }

#main .bridge .title-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

#main .section-trigger.webgl { position: relative; width: 100%; height: 25vh; }

#main .section-trigger.news { height: clamp(133.33333px, 10.41667vw, 10.41667vw); }

#main .title-length.webgl { position: relative; width: 100%; height: 25vh; }

#main .title-length.list { height: 30vh; }

body.ch #main .list-section .list-section-container .list-section-content .single .img-container p.trn { display: inline-block; overflow-wrap: break-word; word-break: break-all; }

#top_button, #top_button *, #__badge-logo, #__badge-logo * { cursor: none; }

#webgl-source { position: absolute; z-index: -9999; top: 100%; }

#webgl-source video { max-width: 100%; }

body[class="jp"] .news-section-list * { line-break: anywhere; }

html { height: max-content; }

body { position: static; }

.c-scrollbar { z-index: 9999; opacity: 1; }

.c-scrollbar .c-scrollbar_thumb { width: 8px; background-color: #dbdbdb; opacity: 0.6; margin-right: 8px; }

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