.header-button {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 100;
    height: 36px;
    display: inline-flex;
    /* display: none; */
}

.header-button__item {
    text-indent: -9999px;
    overflow: hidden;
    width: 36px;
    height: 36px;
    margin-left: 13px;
    cursor: pointer;
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-header.webp);
    background-size: auto 44px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    transition: all .6s ease;
    opacity: 1
}

.header-button__item--home {
    background-position: -100px 50%
}

.header-button__item--copy-link {
    background-position: -148px 50%;
    display: none;
}

.header-button__item--youtube {
    background-position: -196px 50%;
    display: none;
}

.page-navi {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 255px;
    height: 800px;
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: background 2s ease;
    overflow: hidden
}

.page-navi:before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 36px;
    position: absolute;
    top: 190px;
    left: 24px;
    transition: top .4s ease;
    z-index: 1
}

.page-navi:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    transition: background .6s ease
}

.page-navi--elyos:after {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-bg.webp)
}

.page-navi--elyos:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0001_3f6db25abc54.webp) no-repeat 0 0
}

.page-navi--elyos .page-navi__item {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-text-active.webp)
}

.page-navi--elyos .page-navi__item:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0002_59444e388600.webp)
}

.page-navi--elyos .page-navi__link:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-text-active.webp);
    opacity: 0;
    transition: opacity .3s ease
}

.page-navi--elyos .page-navi__link:before {
    content: "";
    display: block;
    width: 22px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0003_7609ab5ff454.webp) no-repeat 0 0;
    opacity: 0
}

.page-navi--elyos .page-navi__link:hover:after {
    opacity: 1
}

.page-navi--asmodian:after {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-bg.webp)
}

.page-navi--asmodian:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0004_b382754a1b9a.webp) no-repeat 0 0
}

.page-navi--asmodian .page-navi__item {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text-active.webp)
}

.page-navi--asmodian .page-navi__item:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0005_09d641c58b3e.webp)
}

.page-navi--asmodian .page-navi__item:after {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text-active.webp);
    opacity: 0;
    transition: opacity .3s ease
}

.page-navi--asmodian .page-navi__item:hover:after {
    opacity: 1
}

.page-navi--asmodian .page-navi__link:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text-active.webp);
    opacity: 0;
    transition: opacity .3s ease
}

.page-navi--asmodian .page-navi__link:before {
    content: "";
    display: block;
    width: 22px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0006_94f4e8f524db.webp) no-repeat 0 0;
    opacity: 0
}

.page-navi--asmodian .page-navi__link:hover:after {
    opacity: 1
}

.page-navi--main:before {
    top: 192px
}

.page-navi--preorder:before {
    top: 231px
}

.page-navi--class:before,
.page-navi--dungeon:before,
.page-navi--game:before,
.page-navi--story:before,
.page-navi--world:before {
    top: 231px
}

.page-navi--event:before {
    top: 520px
}

.page-navi--onair:before {
    top: 560px
}

.page-navi-list {
    position: absolute;
    top: 0;
    left: 13px;
    z-index: 1;
    width: 210px;
    height: 640px;
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: background .6s ease
}

.page-navi-list--elyos {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-text.webp)
}

.page-navi-list--asmodian {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text.webp)
}

.page-navi__item {
    width: 250px;
    height: 30px;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: -200px 0;
    list-style: none
}

.page-navi__item:before {
    position: absolute;
    top: -50px;
    left: -13px;
    content: "";
    width: 340px;
    height: 139px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0002_59444e388600.webp);
    z-index: 0;
    opacity: 0;
    transition: all .6s ease
}

.page-navi__item--active:before {
    opacity: 1
}

.page-navi__item--active .page-navi__link:after {
    opacity: 0 !important
}

.page-navi__item--main {
    top: 192px
}

.page-navi__item--game {
    top: 231px
}

.page-navi__item--story {
    top: 268px
}

.page-navi__item--story:before {
    display: none
}

.page-navi__item--world {
    top: 301px
}

.page-navi__item--world:before {
    display: none
}

.page-navi__item--class {
    top: 332px
}

.page-navi__item--class:before {
    display: none
}

.page-navi__item--dungeon {
    top: 363px
}

.page-navi__item--dungeon:before {
    display: none
}

.page-navi__item--main-active {
    background-position: 0 -192px
}

.page-navi__item--game-active {
    background-position: 0 -231px
}

.page-navi__item--story-active {
    background-position: 0 -268px
}

.page-navi__item--world-active {
    background-position: 0 -301px
}

.page-navi__item--class-active {
    background-position: 0 -332px
}

.page-navi__item--dungeon-active {
    background-position: 0 -363px
}

.page-navi__item--main .page-navi__link:after {
    background-position: 0 -192px
}

.page-navi__item--game .page-navi__link:after {
    background-position: 0 -231px
}

.page-navi__item--story .page-navi__link:after {
    background-position: 0 -268px
}

.page-navi__item--world .page-navi__link:after {
    background-position: 0 -301px
}

.page-navi__item--class .page-navi__link:after {
    background-position: 0 -332px
}

.page-navi__item--dungeon .page-navi__link:after {
    background-position: 0 -363px
}

.page-navi__item--onair-new .page-navi__link:before {
    opacity: 1;
    left: 120px;
    top: 13px
}

.page-navi__link {
    height: 100%;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.page-navi-countdown {
    display: none
}

.brand-logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    z-index: 800;
    cursor: pointer
}

.brand-logo:after,
.brand-logo:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    opacity: 0;
    transition: opacity 3s ease;
    transition-delay: .6s;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/brand-logo.webp) no-repeat 0 0;
    background-size: cover
}

.brand-logo--asmodian:before,
.brand-logo--elyos:after {
    opacity: 1
}

.brand-logo--null:after,
.brand-logo--null:before {
    transition: none
}

.to-world {
    position: fixed;
    left: 30px;
    bottom: 40px;
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 101;
    transition: all .5s ease;
    opacity: 0;
    overflow: hidden;
    text-indent: -9999px
}

.to-world--active {
    opacity: 1
}

.to-world--is-gate {
    transition-delay: 0s;
    transition: none
}

.to-world--elyos:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to.webp) no-repeat 50% 50%;
    background-size: cover;
    opacity: 1
}

.to-world--elyos:after,
.to-world--elyos:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    transition: background-image .5s ease
}

.to-world--elyos:after {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to-active.webp) no-repeat 50% 50%;
    background-size: cover;
    opacity: 0
}

.to-world--elyos:hover:before {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to.webp);
    background-size: cover;
    opacity: 0
}

.to-world--elyos:hover:after {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to-active.webp);
    background-size: cover;
    opacity: 1
}

.to-world--asmodian:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to.webp) no-repeat 50% 50%;
    background-size: cover;
    opacity: 1
}

.to-world--asmodian:after,
.to-world--asmodian:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    transition: all .5s ease
}

.to-world--asmodian:after {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to-active.webp) no-repeat 50% 50%;
    background-size: cover;
    opacity: 0
}

.to-world--asmodian:hover:before {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to.webp);
    background-size: cover;
    opacity: 0
}

.to-world--asmodian:hover:after {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to-active.webp);
    background-size: cover;
    opacity: 1
}

.to-world--is-transition:after,
.to-world--is-transition:before {
    transition: all 2s ease
}

.sound-switch {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    cursor: pointer
}

.sound-switch__equalizer {
    display: inline-flex;
    height: 20px;
    align-items: flex-end
}

.sound-switch__equalizer-bar {
    background: #fff;
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 1px;
    animation: equalize 1s 0s infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: paused
}

.sound-switch__equalizer-bar--1 {
    animation-delay: -.8s
}

.sound-switch__equalizer-bar--2 {
    animation-delay: -.6s
}

.sound-switch__equalizer-bar--3 {
    animation-delay: -2.5s
}

.sound-switch__equalizer-bar--4 {
    animation-delay: -1.1s
}

.sound-switch__equalizer-bar--5 {
    animation-delay: -1.6s
}

.sound-switch__equalizer-bar--playing {
    animation-play-state: running
}

.sound-switch__text {
    background: none;
    color: #fff;
    font-size: 11px;
    width: 80px;
    line-height: 1;
    text-align: left;
    margin-left: 10px
}

@keyframes equalize {
    0% {
        height: 2px
    }

    10% {
        height: 6px
    }

    20% {
        height: 10px
    }

    30% {
        height: 14px
    }

    40% {
        height: 16px
    }

    50% {
        height: 14px
    }

    60% {
        height: 10px
    }

    80% {
        height: 6px
    }

    to {
        height: 2px
    }
}

.into-movie {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000
}

.into-movie .kit-video,
.into-movie__loading {
    width: 100%;
    height: 100%
}

.into-movie__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: opacity .3s
}

.into-movie__resolution {
    position: absolute;
    color: #8d8f91;
    font-size: 12px;
    white-space: nowrap;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4
}

.into-movie__loading--hidden {
    opacity: 0
}

.into-movie__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity .3s
}

.into-movie__video--skip {
    opacity: 0
}

.intro__skip {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    z-index: 2;
    width: 300px;
    height: 42px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0007_63d36430f249.webp) no-repeat 0 0;
    transform: translateX(-50%);
    cursor: pointer
}

.floating-banner {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 408px;
    height: 254px;
    z-index: 20;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0008_adeb62baa441.webp) no-repeat 0;
    display:none
}

.floating-banner:before {
    top: 7px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0009_d0fe43b9ca27.webp) no-repeat 0
}

.floating-banner:after,
.floating-banner:before {
    position: absolute;
    left: 14px;
    content: "";
    display: inline-block;
    width: 380px;
    height: 16px;
    z-index: 1
}

.floating-banner:after {
    bottom: 16px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0010_2396bd25cc4d.webp) no-repeat 0
}

.floating-banner__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-112px);
    width: 378px;
    height: 215px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 0
}

.floating-banner__content-link {
    display: block;
    height: 100%
}

.floating-banner__content-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%
}

.floating-banner__btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0011_7ac3b123fb26.webp) no-repeat 50% 50%;
    z-index: 3;
    border: 0;
    cursor: pointer
}

.floating-banner__btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0012_d78b1406963f.webp) no-repeat 50% 50% rgba(0, 0, 0, .3);
    background-size: 82px 82px
}

.preload-image {
    position: fixed;
    left: -1px;
    top: -1px;
    z-index: -1;
    visibility: hidden;
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-bg.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-text.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-navi-text-active.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-bg.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-navi-text-active.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to-bg.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to-bg.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to-active.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to-active.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-content.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-1-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-2-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-3-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-4-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-5-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-6-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-7-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-8-hover.webp), url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-content.webp)
}

.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: none
}

.page-transition--is-active {
    z-index: 999999;
    display: block
}

.page-transition__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

.page-transition__player .kit-mp4__screen,
.page-transition__player .kit-webm__screen,
.page-transition__player canvas {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.page-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    perspective: 800px;
    transform-style: preserve-3d
}

.page-background,
.page-background .kit-video {
    width: 100%;
    height: 100%
}

.page-background__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 0
}

.page-background__main-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-main.webp)
}

.page-background__main-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-main.webp)
}

.page-background__on-air-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-on-air.webp)
}

.page-background__on-air-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-on-air.webp)
}

.page-background__preorder-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-preorder.webp)
}

.page-background__preorder-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-preorder.webp)
}

.page-background__event-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-event.webp)
}

.page-background__event-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-event.webp)
}

.page-background__qna {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-qna.webp)
}

.page-background__game-1 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-game-1.webp)
}

.page-background__game-2 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-game-2.webp)
}

.page-background__game-3 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-game-3.webp)
}

.page-background__game-4 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-game-4.webp)
}

.page-background__game-5 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-game-5.webp)
}

.page-background__class {
    width: 2560px;
    height: 1440px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-class.webp);
    background-size: 2560px 1440px
}

.page-background__world-1-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-world-1.webp)
}

.page-background__world-2-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-world-2.webp)
}

.page-background__world-3-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-world-3.webp)
}

.page-background__world-4-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-world-4.webp)
}

.page-background__world-5-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-world-5.webp)
}

.page-background__world-1-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-world-1.webp)
}

.page-background__world-2-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-world-2.webp)
}

.page-background__world-3-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-world-3.webp)
}

.page-background__world-4-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-world-4.webp)
}

.page-background__world-5-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-world-5.webp)
}

.page-background__story-1 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-story-1.webp)
}

.page-background__story-2 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-story-2.webp)
}

.page-background__story-3 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-story-3.webp)
}

.page-background__story-4 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-story-4.webp)
}

.page-background__story-5-a {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-story-5.webp)
}

.page-background__story-5-e {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-story-5.webp)
}

.page-background__dungeon-1 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-dungeon-1.webp)
}

.page-background__dungeon-2 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-dungeon-2.webp)
}

.page-background__dungeon-3 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-dungeon-3.webp)
}

.page-background__dungeon-4 {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/s-background-dungeon-4.webp)
}

.dim-cover {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1
}

.dim-cover,
.dim-cover:after,
.dim-cover:before {
    transition: background .6s ease
}

.dim-cover--type-basic {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-basic:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0, transparent 30%, transparent)
}

.dim-cover--type-main {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 40%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-event {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-event:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, transparent 50%, transparent)
}

.dim-cover--type-custom {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .8) 100%)
}

.dim-cover--type-custom:before {
    top: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .9) 300px, transparent 50%, transparent)
}

.dim-cover--type-custom:after,
.dim-cover--type-custom:before {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.dim-cover--type-custom:after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0, transparent)
}

.dim-cover--type-game {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-game:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, transparent 70%, transparent)
}

.dim-cover--type-world {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-world:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, transparent 70%, transparent)
}

.dim-cover--type-class {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 50%, rgba(0, 0, 0, .7) 100%)
}

.dim-cover--type-class:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0, transparent 40%, transparent)
}

.dim-cover--type-story {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 80%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-story:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0, transparent 70%, transparent)
}

.dim-cover--type-layer {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 50%, rgba(0, 0, 0, .4) 100%)
}

.dim-cover--type-layer:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0, transparent 40%, transparent)
}

.section-main-elyos {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    transition: all .5s ease;
    transition-delay: 1.3s
}

.section-main-elyos:after {
    content: "";
    width: 154px;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/center-line.webp) no-repeat 50% 0;
    position: absolute;
    top: 0;
    right: -77px;
    z-index: 20
}

.section-main-elyos__cover {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/main-bg-cover.webp) no-repeat 50% 100%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 13;
    transform: translateX(-50%)
}

.section-main-elyos__cover--is-opening {
    visibility: hidden
}

.section-main-elyos--active {
    z-index: 3;
    opacity: 1
}

.section-main-elyos--half {
    opacity: 1;
    transition: none;
    transition-delay: 0s
}

.section-main-elyos--is-hover .section-main-elyos__arrow {
    animation: elyosArrow 2s ease-in-out infinite
}

.section-main-elyos--is-hover .section-main-elyos__mark:after {
    opacity: 1
}

.section-main-elyos--is-transition {
    transition: all .4s ease
}

.section-main-elyos--is-opening {
    transition: all 1s ease
}

.section-main-elyos--is-opened {
    left: 0 !important;
    right: 0 !important;
    transition: all .5s ease;
    transition-delay: 1.3s
}

.section-main-elyos--is-opened:after {
    display: none
}

.section-main-elyos--init {
    transition: none;
    transition-delay: 0s
}

.section-main-elyos__contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

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

.section-main-elyos__bg .kit-video__screen {
    -o-object-position: 0 0 !important;
    object-position: 0 0 !important
}

.section-main-elyos__bg-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-cloud-animated.webp) no-repeat 50% 100%;
    background-size: 100% 540px;
    transition: all 1s ease-in-out;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.section-main-elyos__bg-cover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-cover-1.webp) no-repeat 50% 100%;
    background-size: cover
}

.section-main-elyos__bg-cover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-cover-2.webp) no-repeat 0 0
}

.section-main-elyos__bg-cover--is-opened {
    opacity: 1;
    visibility: visible
}

.section-main-elyos__character {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-961px) translateY(480px) translateZ(0);
    z-index: 11;
    transition: all 1s ease-in-out;
    width: 1920px;
    height: 1500px
}

.section-main-elyos__character--opening {
    transform: translateX(-1019px) translateY(255px) scale(.665)
}

.section-main-elyos__character--is-poster {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-char.webp) no-repeat
}

.section-main-elyos__arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 497px;
    height: 132px;
    z-index: 22;
    transform: translateX(-700px) translateY(-428px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-arrow-main.webp) no-repeat;
    transition: transform .5s ease
}

.section-main-elyos__arrow--paused {
    animation-play-state: paused !important
}

.section-main-elyos__arrow--opening {
    transform: translateX(788px) translateY(-428px);
    opacity: 0;
    transition: all 1.5s cubic-bezier(.77, 0, .175, 1)
}

.section-main-elyos__title {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 22;
    transform: translate(-140px, -460px);
    opacity: 0;
    width: 800px;
    height: 400px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-text-animated.webp) no-repeat
}

.section-main-elyos__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-text-3.webp) no-repeat
}

.section-main-elyos__title--opening {
    transform: translate(-140px, -490px);
    opacity: 1;
    transition: all 1s ease;
    transition-delay: .6s
}

.section-main-elyos__mark {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 21;
    transform: translate(-828px, -310px);
    width: 694px;
    height: 364px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-text-bg.webp) no-repeat 50% 50%
}

.section-main-elyos__mark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-text-1.webp) no-repeat 50% 50%;
    width: 100%;
    height: 100%
}

.section-main-elyos__mark:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-text-2.webp) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease
}

.section-main-elyos__mark--opening {
    opacity: 0;
    transition: opacity 1s ease
}

.section-main-elyos__mark--opened {
    visibility: hidden
}

.section-main-elyos__btn-play-area {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 500px;
    height: 500px;
    z-index: 21;
    transform: translate3d(6px, -184px, 0);
    opacity: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-btn-play-bg.webp) no-repeat 50% 50%
}

.section-main-elyos__btn-play-area:before {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-btn-play-animated.webp) no-repeat
}

.section-main-elyos__btn-play-area:after,
.section-main-elyos__btn-play-area:before {
    content: "";
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px
}

.section-main-elyos__btn-play-area:after {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-main-btn-play-hover-animated.webp) no-repeat;
    transition: opacity .6s ease;
    opacity: 0
}

.section-main-elyos__btn-play-area--opening {
    opacity: 1;
    transition: opacity .6s ease;
    transition-delay: .8s
}

.section-main-elyos__btn-play {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 194px;
    height: 183px;
    z-index: 22;
    transform: translate3d(141px, -345px, 0);
    opacity: 0;
    cursor: pointer
}

.section-main-elyos__btn-play:hover+.section-main-elyos__btn-play-area:after {
    opacity: 1
}

.section-main-elyos__btn-play--opening {
    transform: translate3d(141px, -345px, 0);
    opacity: 1;
    transition: all .6s ease;
    transition-delay: .8s
}

.section-main-elyos__btn-title {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 166px;
    height: 33px;
    z-index: 21;
    transform: translate(176px, -313px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0013_b04707e814dc.webp) no-repeat;
    opacity: 0
}

.section-main-elyos__btn-title--opening {
    transform: translate(176px, -313px);
    opacity: 1;
    transition: all .6s ease;
    transition-delay: .8s
}

@keyframes elyosArrow {
    0% {
        margin-left: -5px
    }

    50% {
        margin-left: 30px
    }

    to {
        margin-left: -5px
    }
}

.section-main-asmodian {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    transition: all .5s ease;
    transition-delay: 1.3s
}

.section-main-asmodian:after {
    content: "";
    width: 154px;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/center-line.webp) no-repeat 50% 0;
    position: absolute;
    top: 0;
    left: -77px;
    z-index: 20
}

.section-main-asmodian__cover {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/main-bg-cover.webp) no-repeat 50% 100%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 13;
    transform: translateX(-50%)
}

.section-main-asmodian__cover--is-opening {
    visibility: hidden
}

.section-main-asmodian--active {
    z-index: 3;
    opacity: 1
}

.section-main-asmodian--half {
    opacity: 1;
    transition: none;
    transition-delay: 0s
}

.section-main-asmodian--is-hover .section-main-asmodian__arrow {
    animation: asmodianArrow 2s ease-in-out infinite
}

.section-main-asmodian--is-hover .section-main-asmodian__mark:after {
    opacity: 1
}

.section-main-asmodian--is-transition {
    transition: all .4s ease
}

.section-main-asmodian--is-opening {
    transition: all 1s ease
}

.section-main-asmodian--is-opened {
    left: 0 !important;
    right: 0 !important;
    transition: all .5s ease;
    transition-delay: 1.3s
}

.section-main-asmodian--is-opened:after {
    display: none
}

.section-main-asmodian--init {
    transition: none;
    transition-delay: 0s
}

.section-main-asmodian__contents {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh
}

.section-main-asmodian-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11
}

.section-main-asmodian-cover--opening {
    opacity: 0;
    transform: translateX(200px) scale(1.5);
    transition: all .5s cubic-bezier(.77, 0, .175, 1)
}

.section-main-asmodian__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.section-main-asmodian__bg .kit-video__screen {
    -o-object-position: 100% 0 !important;
    object-position: 100% 0 !important
}

.section-main-asmodian__bg-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    opacity: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-cloud-animated.webp) no-repeat 50% 100%;
    background-size: 100% 540px;
    transition: all 1s ease-in-out;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.section-main-asmodian__bg-cover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-cover-1.webp) no-repeat 50% 100%;
    background-size: cover
}

.section-main-asmodian__bg-cover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-cover-2.webp) no-repeat 0 0
}

.section-main-asmodian__bg-cover--is-opened {
    opacity: 1;
    visibility: visible
}

.section-main-asmodian__character {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-650px) translateY(480px) translateZ(0);
    z-index: 11;
    transition: all 1s ease-in-out;
    width: 1920px;
    height: 1500px
}

.section-main-asmodian__character--opening {
    transform: translateX(-700px) translateY(260px) scale(.665)
}

.section-main-asmodian__character--is-poster {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-char.webp) no-repeat
}

.section-main-asmodian__arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 497px;
    height: 132px;
    z-index: 22;
    transform: translateX(204px) translateY(-428px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-arrow-main.webp) no-repeat;
    animation-play-state: paused
}

.section-main-asmodian__arrow--paused {
    animation-play-state: paused !important
}

.section-main-asmodian__arrow--opening {
    transform: translateX(-1186px) translateY(-428px);
    opacity: 0;
    transition: all 1.5s cubic-bezier(.77, 0, .175, 1)
}

.section-main-asmodian__title {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 22;
    transform: translate(-660px, -460px);
    opacity: 0;
    width: 800px;
    height: 400px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-text-animated.webp) no-repeat
}

.section-main-asmodian__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-text-3.webp) no-repeat
}

.section-main-asmodian__title--opening {
    transform: translate(-660px, -490px);
    opacity: 1;
    transition: all 1s ease;
    transition-delay: .6s
}

.section-main-asmodian__mark {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 21;
    transform: translate(135px, -310px);
    width: 694px;
    height: 364px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-text-bg.webp) no-repeat 50% 50%
}

.section-main-asmodian__mark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-text-1.webp) no-repeat 50% 50%;
    width: 100%;
    height: 100%
}

.section-main-asmodian__mark:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-text-2.webp) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease
}

.section-main-asmodian__mark--opening {
    opacity: 0;
    transition: opacity 1s ease
}

.section-main-asmodian__mark--opened {
    visibility: hidden
}

.section-main-asmodian__btn-play-area {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 500px;
    height: 500px;
    z-index: 21;
    transform: translate3d(-509px, -184px, 0);
    opacity: 0;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-btn-play-bg.webp) no-repeat 50% 50%
}

.section-main-asmodian__btn-play-area:before {
    content: "";
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-btn-play-animated.webp) no-repeat
}

.section-main-asmodian__btn-play-area:after {
    content: "";
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-main-btn-play-hover-animated.webp) no-repeat;
    transition: opacity .6s ease;
    opacity: 0
}

.section-main-asmodian__btn-play-area--opening {
    opacity: 1;
    transition: opacity .6s ease;
    transition-delay: .8s
}

.section-main-asmodian__btn-play {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 183px;
    height: 179px;
    z-index: 22;
    transform: translate(-339px, -345px);
    opacity: 0;
    cursor: pointer
}

.section-main-asmodian__btn-play:hover+.section-main-asmodian__btn-play-area:after {
    opacity: 1
}

.section-main-asmodian__btn-play--opening {
    transform: translate(-339px, -345px);
    opacity: 1;
    transition: all .6s ease;
    transition-delay: .8s
}

.section-main-asmodian__btn-title {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 266px;
    height: 48px;
    z-index: 21;
    transform: translate(-343px, -291px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0013_b04707e814dc.webp) no-repeat;
    opacity: 0
}

.section-main-asmodian__btn-title--opening {
    transform: translate(-343px, -291px);
    opacity: 1;
    transition: all .6s ease;
    transition-delay: .8s
}

@keyframes asmodianArrow {
    0% {
        margin-left: 5px
    }

    50% {
        margin-left: -30px
    }

    to {
        margin-left: 5px
    }
}

.scroll-down-sign {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 201px;
    height: 180px;
    z-index: 20;
    transform: translateX(-50%);
    animation: scrollDownIcon 2s ease-in-out infinite forwards;
    animation-delay: 1.5s;
    opacity: 0;
    cursor: pointer
}

.scroll-down-sign--asmodian,
.scroll-down-sign--elyos {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0014_393b0fc5a395.webp) no-repeat 50% 50%
}

@keyframes scrollDownIcon {
    0% {
        transform: translateX(-50%) translateY(-5px);
        opacity: 0
    }

    20% {
        transform: translateX(-50%) translateY(-5px);
        opacity: 1
    }

    80% {
        transform: translateX(-50%) translateY(25px);
        opacity: 0
    }

    to {
        transform: translateX(-50%) translateY(-5px);
        opacity: 0
    }
}

.section-main {
    /* position: relative; */
    width: 100vw;
    height: 100vh;
    z-index: 1
}

.section-main .kit-video__screen {
    -o-object-position: 0 0;
    object-position: 0 0;
    opacity: 1
}

.section-main__title {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 11;
    width: 800px;
    height: 600px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/title_animated.webp) no-repeat 0 100%;
    transform: translate(-50%, -250px)
}

.section-main__title--crop {
    -webkit-mask-image: linear-gradient(180deg, #000 390px, transparent 470px);
    mask-image: linear-gradient(180deg, #000 390px, transparent 470px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.section-main__title--is-opening {
    opacity: 0
}

.section-main__title--is-opened {
    visibility: hidden
}

.section-main__title-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 11;
    width: 752px;
    height: 356px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/title-open.webp) no-repeat 0 100%;
    transform: translate(-385px, -150px)
}

.section-main__title-text--is-opening {
    opacity: 0
}

.section-main__title-text--is-opened {
    visibility: hidden
}

.section-main__to {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 13;
    width: 514px;
    height: 68px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0015_147f18201a7e.webp) no-repeat 0 0;
    transform: translate(-50%, -110px);
    transition: opacity .5s;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px
}

.section-main__to--1 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0016_7c7ccd19929d.webp) no-repeat 0 0
}

.section-main__to--2 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0015_147f18201a7e.webp) no-repeat 0 0
}

.section-main__sub-title--is-opening,
.section-main__to--is-opening {
    opacity: 0
}

.section-main__sub-title--is-opened,
.section-main__to--is-opened {
    visibility: hidden
}

.section-main__countdown-wrap {
    position: absolute;
    bottom: 140px;
    left: 50%;
    z-index: 12;
    transform: translate(-50%);
    width: 868px;
    height: 286px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/countdown.webp) no-repeat 0 0
}

.section-main__countdown-title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/countdown-title.webp) no-repeat 0 0;
    width: 560px;
    height: 58px;
    position: absolute;
    top: 35px;
    left: 195px
}

.section-main__countdown-wrap--is-opening {
    opacity: 0
}

.section-main__countdown-wrap--is-opened {
    visibility: hidden
}

.section-main__countdown {
    position: absolute;
    bottom: 90px;
    left: 50%;
    background-size: cover;
    z-index: 3;
    transform: translate(-50%);
    white-space: nowrap
}

[data-kit-countdown="0"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0017_1f4a402fee2e.webp) no-repeat
}

[data-kit-countdown="1"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0018_45d3387acfc0.webp) no-repeat
}

[data-kit-countdown="2"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0019_3ac94c9e9a84.webp) no-repeat
}

[data-kit-countdown="3"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0020_1749079b5c6d.webp) no-repeat
}

[data-kit-countdown="4"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0021_003c58575573.webp) no-repeat
}

[data-kit-countdown="5"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0022_53f45620420e.webp) no-repeat
}

[data-kit-countdown="6"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0023_01d1f910c8b2.webp) no-repeat
}

[data-kit-countdown="7"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0024_1c7d8d78593d.webp) no-repeat
}

[data-kit-countdown="8"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0025_b131339c0ef3.webp) no-repeat
}

[data-kit-countdown="9"] {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0026_419e8ee504c2.webp) no-repeat
}

.kit-countdown__num {
    width: 57px
}

.kit-countdown__num,
.kit-countdown__separator {
    height: 98px;
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
    font-size: 0
}

.kit-countdown__separator {
    width: 46px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0027_9603175ec4e3.webp) no-repeat
}

.section-main__countdown--hide {
    position: fixed;
    top: 100%;
    width: 0;
    height: 0;
    z-index: -1
}

.section-on-air-asmodian__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 12;
    transform: translate(-539px, -530px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-title.webp) no-repeat 0 0
}

.section-on-air-asmodian__board {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: 1920px;
    height: 1080px;
    transform: translate(-959px, -539px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-content.webp) no-repeat 0 0
}

.section-on-air-asmodian__board:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -50px;
    width: 1300px;
    height: 300px;
    transform: translateX(-50%);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-background-grass-animated.webp) no-repeat 0 0
}

.section-on-air-asmodian__board-video-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-299px, -163px);
    width: 605px;
    height: 468px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-video-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-asmodian__youtube-link-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-508px, -46px);
    width: 230px;
    height: 289px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-youtube-link-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-asmodian__previous-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(290px, 14px);
    width: 190px;
    height: 270px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-previous-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-asmodian__deco-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(257px, -61px);
    width: 131px;
    height: 157px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0028_09fcf724e4fa.webp) no-repeat 0 0;
    z-index: 11
}

.section-on-air-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 12;
    transform: translate(-539px, -530px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-title.webp) no-repeat 0 0
}

.section-on-air-elyos__board {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: 1920px;
    height: 1080px;
    transform: translate(-959px, -539px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-content.webp) no-repeat 0 0
}

.section-on-air-elyos__board:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -90px;
    width: 1300px;
    height: 300px;
    transform: translateX(-50%);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-background-grass-animated.webp) no-repeat 0 0
}

.section-on-air-elyos__board-video-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-299px, -163px);
    width: 605px;
    height: 468px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-video-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-elyos__youtube-link-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-508px, -46px);
    width: 230px;
    height: 289px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-youtube-link-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-elyos__previous-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(290px, 14px);
    width: 190px;
    height: 270px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-previous-poster.webp) no-repeat 0 0;
    z-index: 12
}

.section-on-air-elyos__deco-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(257px, -61px);
    width: 131px;
    height: 157px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0029_fe44fa7b3d0c.webp) no-repeat 0 0;
    z-index: 11
}

.section-on-air__board {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}

.section-on-air__board-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-278px, -118px);
    z-index: 23;
    font-family: Microsoft YaHei, sans-serif;
    font-size: 32px;
    color: #302519;
    text-shadow: 0 0 4px #ac8d76;
    font-weight: 700;
    width: 566px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.section-on-air__board-title b {
    color: #842211;
    font-family: Microsoft YaHei, sans-serif
}

.section-on-air__board-sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-278px, -103px);
    z-index: 23;
    font-family: Microsoft YaHei, sans-serif;
    font-size: 20px;
    color: #302519;
    text-shadow: 0 0 4px #ac8d76;
    font-weight: 700;
    width: 566px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.section-on-air__board-sub-title b {
    color: #842211;
    font-family: Microsoft YaHei, sans-serif
}

.section-on-air__board-title--multiline {
    font-size: 26px;
    transform: translate(-278px, -138px)
}

.section-on-air__board-description {
    position: absolute;
    z-index: 23;
    top: 50%;
    left: 50%;
    transform: translate(-258px, 218px);
    font-weight: 700;
    width: 520px;
    height: 50px;
    color: #704b3a;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.5px;
    text-align: center;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.section-on-air__board-alt-image {
    width: 513px;
    height: 289px;
    -o-object-fit: cover;
    object-fit: cover
}

.section-on-air__board-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 22;
    width: 513px;
    height: 288px;
    transform: translate(-255px, -62px)
}

.section-on-air__youtube-link {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 22;
    width: 200px;
    height: 209px;
    transform: translate(-494px, 9px)
}

.section-on-air__previous-link {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0030_c2815643c586.webp) no-repeat 0 0
}

.section-on-air__previous-link,
.section-on-air__previous-soon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 22;
    width: 105px;
    height: 35px;
    transform: translate(330px, 196px);
    image-rendering: pixelated
}

.section-on-air__previous-soon {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0031_e2ba26f638b0.webp) no-repeat 50% 50%
}

.section-game-asmodian__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-game-title.webp) no-repeat 50% 50%
}

.section-game-asmodian__title,
.section-game-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    transform: translateX(-540px) translateY(-530px);
    z-index: 1;
    overflow: hidden;
    text-indent: -9999px
}

.section-game-elyos__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-game-title.webp) no-repeat 50% 50%
}

.sub-navi {
    position: absolute;
    width: 1920px;
    left: 50%;
    bottom: 0;
    height: 200px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0032_df80c09922d4.webp) no-repeat 50% 0;
    transform: translateX(-50%);
    z-index: 10
}

.sub-navi-active {
    position: absolute;
    top: -17px;
    left: 50%;
    width: 173px;
    height: 132px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0033_50e105b373f8.webp) no-repeat 50% 0;
    transition: transform .6s ease
}

.sub-navi-active--1 {
    transform: translateX(-406px)
}

.sub-navi-active--2 {
    transform: translateX(-246px)
}

.sub-navi-active--3 {
    transform: translateX(-86px)
}

.sub-navi-active--4 {
    transform: translateX(74px)
}

.sub-navi-active--5 {
    transform: translateX(234px)
}

.sub-navi-link {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 16px;
    transition: all .3s ease;
    letter-spacing: -.5px;
    white-space: nowrap;
    color: hsla(0, 0%, 100%, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

.sub-navi-link--active {
    color: #fff;
    font-size: 17px;
    text-shadow: 0 0 8px #e5f7ff
}

.sub-navi-link--1 {
    transform: translateX(-370px)
}

.sub-navi-link--2 {
    transform: translateX(-210px)
}

.sub-navi-link--3 {
    transform: translateX(-51px)
}

.sub-navi-link--4 {
    transform: translateX(109px)
}

.sub-navi-link--5 {
    transform: translateX(271px)
}

.sub-navi__btn {
    position: absolute;
    top: 11px;
    width: 64px;
    height: 78px;
    opacity: 0;
    transition: opacity .3s;
    overflow: hidden;
    text-indent: -9999px
}

.sub-navi__btn:hover {
    opacity: 1
}

.sub-navi__btn--prev {
    left: 327px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0034_411bb9022f26.webp) no-repeat 50% 0
}

.sub-navi__btn--next {
    right: 327px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0035_8c860465060f.webp) no-repeat 50% 0
}

.sub-navi--dungeon {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0036_446447c96f10.webp) no-repeat 50% 0
}

.sub-navi--dungeon .sub-navi-active--1 {
    transform: translateX(-326px)
}

.sub-navi--dungeon .sub-navi-active--2 {
    transform: translateX(-165px)
}

.sub-navi--dungeon .sub-navi-active--3 {
    transform: translateX(-5px)
}

.sub-navi--dungeon .sub-navi-active--4 {
    transform: translateX(154px)
}

.sub-navi--dungeon .sub-navi-link--1 {
    transform: translateX(-290px)
}

.sub-navi--dungeon .sub-navi-link--2 {
    transform: translateX(-130px)
}

.sub-navi--dungeon .sub-navi-link--3 {
    transform: translateX(30px)
}

.sub-navi--dungeon .sub-navi-link--4 {
    transform: translateX(190px)
}

.section-game__sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.section-game__sub .kit-video {
    background: transparent
}

.section-game__sub--active {
    z-index: 11
}

.section-game__sub-page-index {
    transform: translate(-50%, 42px);
    font-size: 32px;
    width: 80px;
    height: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px #fff;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0037_008724ac1edb.webp) no-repeat 50% 0
}

.section-game__sub-page-index,
.section-game__sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    text-align: center;
    font-family: Microsoft YaHei, sans-serif
}

.section-game__sub-title {
    transform: translate(-50%, 202px);
    font-size: 38px;
    color: #e2e8ea;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .6);
    white-space: nowrap
}

.section-game__sub-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 163px);
    z-index: 21;
    font-size: 20px;
    text-align: center;
    color: rgba(226, 232, 234, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    white-space: nowrap
}

.section-event-asmodian {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11
}

.section-event-asmodian__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 22;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-event-title.webp) no-repeat 50% 50%;
    transform: translateX(-539px) translateY(-530px);
    overflow: hidden;
    text-indent: -9999px
}

.section-event-asmodian__banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 694px;
    height: 306px;
    z-index: 22;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-event-banner-bg-1.webp) no-repeat 50% 50%;
    transform: translateX(-346px) translateY(-315px)
}

.section-event-asmodian__banner-title-text {
    width: 505px;
    overflow: hidden;
    margin: 129px 0 0 94px;
    height: 80px;
    font-family: Microsoft YaHei, sans-serif;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.section-event-asmodian__banner-title-text--multi-line {
    font-size: 28px
}

.section-event-asmodian__banner-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 846px;
    height: 437px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0038_2f8e962fe51e.webp) no-repeat 0 -16px;
    z-index: 18;
    transform: translateX(-422px) translateY(-74px)
}

.section-event-elyos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11
}

.section-event-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 22;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-event-title.webp) no-repeat 50% 50%;
    transform: translateX(-539px) translateY(-530px);
    overflow: hidden;
    text-indent: -9999px
}

.section-event-elyos__banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 683px;
    height: 253px;
    z-index: 21;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-event-banner-bg-1.webp) no-repeat 50% 50%;
    transform: translateX(-346px) translateY(-264px)
}

.section-event-elyos__banner-title-text {
    width: 472px;
    overflow: hidden;
    margin: 78px 0 0 110px;
    height: 80px;
    font-family: Microsoft YaHei, sans-serif;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.section-event-elyos__banner-title-text--multi-line {
    font-size: 28px
}

.section-event-elyos__banner-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 850px;
    height: 458px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0039_96e338e87b04.webp) no-repeat 0 -40px;
    z-index: 18;
    transform: translateX(-424px) translateY(-75px)
}

.section-event .kit-slide__button--prev {
    width: 84px;
    height: 100px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0040_400fa70474cd.webp) no-repeat 50% 50%;
    transform: translateY(-50px) rotate(0);
    opacity: 1;
    left: -96px !important
}

.section-event .kit-slide__button--prev:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 100px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0034_411bb9022f26.webp) no-repeat 50% 50%;
    opacity: 0;
    transition: opacity .3s ease
}

.section-event .kit-slide__button--prev:hover:before {
    opacity: 1
}

.section-event .kit-slide__button--next {
    width: 84px;
    height: 100px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0041_191aa00ba22e.webp) no-repeat 50% 50%;
    transform: translateY(-50px) rotate(0);
    opacity: 1;
    right: -96px !important;
    transition: background .3s ease
}

.section-event .kit-slide__button--next:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 100px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0035_8c860465060f.webp) no-repeat 50% 50%;
    opacity: 0;
    transition: opacity .3s ease
}

.section-event .kit-slide__button--next:hover:before {
    opacity: 1
}

.section-event__banner {
    position: absolute;
    top: 0;
    left: 50%;
    width: 760px;
    height: 360px;
    z-index: 10;
    transform: translate3d(-50%, 0, 0)
}

.section-event__banner:after,
.section-event__banner:before {
    transition: all .6s ease;
    transition-delay: 1.3s
}

.section-event__banner-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 360px;
    z-index: 12;
    transform: translateX(-379px) translateY(-75px) translateZ(0)
}

.section-event__banner-deco-top {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 12
}

.section-event__banner-deco-bottom {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 12
}

.section-event__banner-deco-top--elyos {
    width: 816px;
    height: 34px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0042_891ab8e48b5c.webp) no-repeat 50% 50%;
    transform: translateX(-409px) translateY(-33px)
}

.section-event__banner-deco-bottom--elyos {
    width: 816px;
    height: 34px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0043_0c65c2bf1142.webp) no-repeat 50% 50%;
    transform: translateX(-409px) translateY(33px)
}

.section-event__banner-deco-top--asmodian {
    width: 816px;
    height: 8px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0044_0dd0db2e339c.webp) no-repeat 50% 50%;
    transform: translateX(-413px) translateY(-8px)
}

.section-event__banner-deco-bottom--asmodian {
    width: 816px;
    height: 43px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0045_07e96cc60d22.webp) no-repeat 50% 50%;
    transform: translateX(-408px) translateY(35px)
}

.section-event__banner-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;
    display: block
}

.section-event__banner-image {
    width: 760px;
    height: 360px;
    -o-object-fit: cover;
    object-fit: cover
}

.section-event__banner-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 73px;
    transform: translateX(-98px) translateY(304px) translateZ(0);
    z-index: 41;
    text-align: center;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0046_71ea67452096.webp) no-repeat 50% 50%;
    background-size: 144px 73px
}

.section-event__banner-number {
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 73px
}

.section-event__banner-btn {
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 42;
    cursor: pointer;
    transition: opacity .3s ease
}

.section-event__banner-btn:hover {
    opacity: .6
}

.section-event__banner-btn--prev {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0047_75b82dcdd642.webp);
    transform: translateY(-8px) translateX(-49px)
}

.section-event__banner-btn--next {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0048_c0bd90126edf.webp);
    transform: translateY(-8px) translateX(32px)
}

.section-class-asmodian__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-class-title.webp) no-repeat 50% 50%
}

.section-class-asmodian__title,
.section-class-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    transform: translateX(-540px) translateY(-530px);
    z-index: 1
}

.section-class-elyos__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-class-title.webp) no-repeat 50% 50%
}

.section-class {
    width: 2650px;
    height: 1440px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%)
}

.section-class__contents {
    z-index: 10
}

.section-class__contents,
.section-class__hover-contents {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.section-class__hover-contents {
    z-index: 12
}

.section-class__action {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: 1056px;
    height: 1056px;
    filter: blur(0) brightness(1)
}

.section-class__action--1 {
    transform: translate(-1121px, -410px)
}

.section-class__action--2 {
    transform: translate(-894px, -455px);
    z-index: 20
}

.section-class__action--3 {
    transform: translate(-734px, -419px);
    z-index: 23
}

.section-class__action--4 {
    transform: translate(-571px, -438px);
    z-index: 22
}

.section-class__action--5 {
    transform: translate(-411px, -470px);
    z-index: 25
}

.section-class__action--6 {
    transform: translate(-239px, -458px);
    z-index: 22
}

.section-class__action--7 {
    transform: translate3d(-143px, -533px, 0);
    z-index: 21
}

.section-class__action--8 {
    transform: translate3d(107px, -475px, 0);
    z-index: 23
}

.section-class-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: scale(.01)
}

.section-class-player .kit-video__screen,
.section-class-player .kit-webm__screen {
    opacity: 1;
    width: 1056px;
    height: 1056px;
    -o-object-fit: cover;
    object-fit: cover
}

.section-class-player--active {
    z-index: 1;
    transform: scale(1)
}

.section-class__hover {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    display: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px
}

.section-class__hover--ready {
    display: block
}

.section-class__hover--1 {
    width: 140px;
    height: 610px;
    transform: translate(-750px, -150px)
}

.section-class__hover--2 {
    width: 150px;
    height: 440px;
    transform: translate(-540px, -80px)
}

.section-class__hover--3 {
    width: 220px;
    height: 610px;
    transform: translate(-383px, -160px)
}

.section-class__hover--4 {
    width: 160px;
    height: 490px;
    transform: translate(-141px, -100px)
}

.section-class__hover--5 {
    width: 190px;
    height: 610px;
    transform: translate(53px, -160px)
}

.section-class__hover--6 {
    width: 150px;
    height: 460px;
    transform: translate(309px, -60px)
}

.section-class__hover--7 {
    width: 130px;
    height: 446px;
    transform: translate(475px, -204px)
}

.section-class__hover--8 {
    width: 180px;
    height: 570px;
    transform: translate(633px, -130px)
}

.section-class__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 180px;
    height: 180px;
    transition: transform .3s ease, background .6s ease
}

.section-class__icon--1 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0049_7f862db3977f.webp) no-repeat 50% 50%;
    transform: translate(-784px, -280px)
}

.section-class__icon--1-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-1-hover.webp) no-repeat 50% 50%;
    transform: translate(-784px, -310px)
}

.section-class__icon--2 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0050_d0f95559eac5.webp) no-repeat 50% 50%;
    transform: translate(-574px, -200px)
}

.section-class__icon--2-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-2-hover.webp) no-repeat 50% 50%;
    transform: translate(-574px, -250px)
}

.section-class__icon--3 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0051_dae1fc5881c8.webp) no-repeat 50% 50%;
    transform: translate(-350px, -280px)
}

.section-class__icon--3-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-3-hover.webp) no-repeat 50% 50%;
    transform: translate(-350px, -310px)
}

.section-class__icon--4 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0052_d581937ec0bb.webp) no-repeat 50% 50%;
    transform: translate(-137px, -205px)
}

.section-class__icon--4-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-4-hover.webp) no-repeat 50% 50%;
    transform: translate(-137px, -235px)
}

.section-class__icon--5 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0053_893e056636f2.webp) no-repeat 50% 50%;
    transform: translate(72px, -283px)
}

.section-class__icon--5-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-5-hover.webp) no-repeat 50% 50%;
    transform: translate(72px, -313px)
}

.section-class__icon--6 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0054_8c13cb7f60e4.webp) no-repeat 50% 50%;
    transform: translate(292px, -150px)
}

.section-class__icon--6-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-6-hover.webp) no-repeat 50% 50%;
    transform: translate(292px, -210px)
}

.section-class__icon--7 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0055_cd8d9258c5c5.webp) no-repeat 50% 50%;
    transform: translate(437px, -300px)
}

.section-class__icon--7-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-7-hover.webp) no-repeat 50% 50%;
    transform: translate(437px, -330px)
}

.section-class__icon--8 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0056_ef72f3b0e621.webp) no-repeat 50% 50%;
    transform: translate(624px, -274px)
}

.section-class__icon--8-active {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-icon-8-hover.webp) no-repeat 50% 50%;
    transform: translate(624px, -304px)
}

.section-world-asmodian__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-world-title.webp) no-repeat 50% 50%
}

.section-world-asmodian__title,
.section-world-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    transform: translateX(-540px) translateY(-530px);
    z-index: 1
}

.section-world-elyos__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-world-title.webp) no-repeat 50% 50%
}

.section-world__sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.section-world__sub .kit-video {
    background: transparent
}

.section-world__sub--active {
    z-index: 11
}

.section-world__sub-page-index {
    transform: translate(-50%, -18px);
    font-size: 32px;
    width: 80px;
    height: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px #fff;
    color: #000;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0037_008724ac1edb.webp) no-repeat 50% 0
}

.section-world__sub-page-index,
.section-world__sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    text-align: center;
    font-family: Microsoft YaHei, sans-serif
}

.section-world__sub-title {
    transform: translate(-50%, 99px);
    font-size: 38px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
    white-space: nowrap
}

.section-world__sub-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 163px);
    z-index: 21;
    font-size: 18px;
    text-align: center;
    white-space: nowrap;
    color: rgba(211, 218, 220, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}

.section-story-asmodian__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-story-title.webp) no-repeat 50% 50%
}

.section-story-asmodian__title,
.section-story-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    transform: translateX(-540px) translateY(-530px);
    z-index: 1
}

.section-story-elyos__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-story-title.webp) no-repeat 50% 50%
}

.section-story__sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.section-story__sub .kit-video {
    background: transparent
}

.section-story__sub--active {
    z-index: 11
}

.section-story__sub-page-index {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -8px);
    z-index: 21;
    font-size: 32px;
    text-align: center;
    font-family: Microsoft YaHei, sans-serif;
    width: 80px;
    height: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px #fff;
    color: #000;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0037_008724ac1edb.webp) no-repeat 50% 0
}

.section-story__sub-title {
    transform: translate(-50%, 108px);
    font-size: 38px;
    font-family: Microsoft YaHei, sans-serif;
    color: #fff
}

.section-story__sub-description,
.section-story__sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
    white-space: nowrap
}

.section-story__sub-description {
    transform: translate(-50%, 172px);
    font-size: 18px;
    color: rgba(211, 218, 220, .8)
}

.section-dungeon-asmodian__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-dungeon-title.webp) no-repeat 50% 50%
}

.section-dungeon-asmodian__title,
.section-dungeon-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    transform: translateX(-540px) translateY(-530px);
    z-index: 1
}

.section-dungeon-elyos__title {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-dungeon-title.webp) no-repeat 50% 50%
}

.section-dungeon-1__btn-view-boss {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-view-boss-1.webp) no-repeat 50% 50%;
    transform: translateX(80px) translateY(-250px)
}

.section-dungeon-1__btn-view-boss,
.section-dungeon-2__btn-view-boss {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 570px;
    height: 400px;
    z-index: 11;
    overflow: hidden;
    text-indent: -9999px
}

.section-dungeon-2__btn-view-boss {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-view-boss-2.webp) no-repeat 50% 50%;
    transform: translateX(304px) translateY(-191px)
}

.section-dungeon-3__btn-view-boss {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-view-boss-3.webp) no-repeat 50% 50%;
    transform: translateX(20px) translateY(-190px)
}

.section-dungeon-3__btn-view-boss,
.section-dungeon-4__btn-view-boss {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 570px;
    height: 400px;
    z-index: 11;
    overflow: hidden;
    text-indent: -9999px
}

.section-dungeon-4__btn-view-boss {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-view-boss-4.webp) no-repeat 50% 50%;
    transform: translateX(85px) translateY(-210px)
}

.section-dungeon__sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.section-dungeon__sub .kit-video {
    background: transparent
}

.section-dungeon__sub--active {
    z-index: 11
}

.section-dungeon__sub-page-index {
    transform: translate(-50%, -18px);
    font-size: 32px;
    width: 80px;
    height: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 5px #fff;
    color: #000;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0037_008724ac1edb.webp) no-repeat 50% 0
}

.section-dungeon__sub-page-index,
.section-dungeon__sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    text-align: center;
    font-family: Microsoft YaHei, sans-serif
}

.section-dungeon__sub-title {
    transform: translate(-50%, 128px);
    font-size: 38px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
    white-space: nowrap
}

.section-dungeon__sub-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 187px);
    z-index: 21;
    font-size: 18px;
    text-align: center;
    white-space: nowrap;
    color: rgba(211, 218, 220, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}

.section-class-layer {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.section-class-layer__container {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-bg.webp) no-repeat 50% 50% #000;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 1800px;
    max-height: 1000px;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden
}

.section-class-layer__btn-close {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 48px;
    height: 58px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0057_85cb1757d05e.webp) no-repeat 50% 50%;
    z-index: 100
}

.section-class-layer__deco-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-698px) translateY(-324px);
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-deco-1.webp) no-repeat 50% 50%;
    width: 564px;
    height: 521px;
    z-index: 5
}

.section-class-contents {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.section-class-contents--text {
    z-index: 2
}

.section-class-layer__character {
    position: absolute;
    top: 50%;
    left: 50%
}

.section-class-layer__character--1 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-1-char.webp) no-repeat 50% 50%;
    transform: translateX(-208px) translateY(-410px);
    width: 930px;
    height: 1385px
}

.section-class-layer__character--2 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-2-char.webp) no-repeat 50% 50%;
    transform: translateX(-236px) translateY(-436px);
    width: 928px;
    height: 1328px
}

.section-class-layer__character--3 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-3-char.webp) no-repeat 50% 50%;
    transform: translateX(-279px) translateY(-420px);
    width: 928px;
    height: 1390px
}

.section-class-layer__character--4 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-4-char.webp) no-repeat 50% 50%;
    transform: translateX(-462px) translateY(-438px);
    width: 1414px;
    height: 1342px
}

.section-class-layer__character--5 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-5-char.webp) no-repeat 50% 50%;
    transform: translateX(-301px) translateY(-529px);
    width: 884px;
    height: 1462px
}

.section-class-layer__character--6 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-6-char.webp) no-repeat 50% 50%;
    transform: translateX(-140px) translateY(-410px);
    width: 916px;
    height: 1390px
}

.section-class-layer__character--7 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-7-char.webp) no-repeat 50% 50%;
    transform: translateX(-128px) translateY(-412px);
    width: 902px;
    height: 1410px
}

.section-class-layer__character--8 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-8-char.webp) no-repeat 50% 50%;
    transform: translateX(-118px) translateY(-431px);
    width: 868px;
    height: 1428px
}

.section-class-layer__symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11
}

.section-class-layer__symbol--1 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-1-text.webp) no-repeat 50% 50%;
    transform: translateX(-570px) translateY(-370px);
    width: 325px;
    height: 352px
}

.section-class-layer__symbol--2 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-2-text.webp) no-repeat 50% 50%;
    transform: translateX(-560px) translateY(-381px);
    width: 315px;
    height: 361px
}

.section-class-layer__symbol--3 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-3-text.webp) no-repeat 50% 50%;
    transform: translateX(-560px) translateY(-365px);
    width: 315px;
    height: 347px
}

.section-class-layer__symbol--4 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-4-text.webp) no-repeat 50% 50%;
    transform: translateX(-560px) translateY(-381px);
    width: 315px;
    height: 361px
}

.section-class-layer__symbol--5 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-5-text.webp) no-repeat 50% 50%;
    transform: translateX(-563px) translateY(-382px);
    width: 317px;
    height: 364px
}

.section-class-layer__symbol--6 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-6-text.webp) no-repeat 50% 50%;
    transform: translateX(-559px) translateY(-394px);
    width: 314px;
    height: 376px
}

.section-class-layer__symbol--7 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-7-text.webp) no-repeat 50% 50%;
    transform: translateX(-547px) translateY(-385px);
    width: 302px;
    height: 367px
}

.section-class-layer__symbol--8 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/class-layer-8-text.webp) no-repeat 50% 50%;
    transform: translateX(-547px) translateY(-389px);
    width: 301px;
    height: 371px
}

.section-class-layer__text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 13;
    font-size: 26px;
    font-family: Microsoft YaHei, sans-serif;
    text-align: center;
    transform: translateX(-700px) translateY(8px);
    width: 700px;
    color: hsla(0, 0%, 100%, .8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7)
}

.class-layer-navi {
    position: absolute;
    width: 1922px;
    left: 50%;
    bottom: 0;
    height: 200px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0058_467ef3416d54.webp) no-repeat 50% 0;
    transform: translateX(-50%);
    z-index: 5
}

.class-layer-navi-active {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 173px;
    height: 132px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0033_50e105b373f8.webp) no-repeat 50% 0;
    transition: transform .6s ease
}

.class-layer-navi-active--1 {
    transform: translateX(-506px)
}

.class-layer-navi-active--2 {
    transform: translateX(-386px)
}

.class-layer-navi-active--3 {
    transform: translateX(-266px)
}

.class-layer-navi-active--4 {
    transform: translateX(-146px)
}

.class-layer-navi-active--5 {
    transform: translateX(-26px)
}

.class-layer-navi-active--6 {
    transform: translateX(94px)
}

.class-layer-navi-active--7 {
    transform: translateX(214px)
}

.class-layer-navi-active--8 {
    transform: translateX(334px)
}

.class-layer-navi-link {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 16px;
    transition: all .3s ease;
    letter-spacing: -.5px;
    white-space: nowrap
}

.class-layer-navi-link--active {
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 8px #e5f7ff
}

.class-layer-navi-link--1 {
    transform: translateX(-472px)
}

.class-layer-navi-link--2 {
    transform: translateX(-350px)
}

.class-layer-navi-link--3 {
    transform: translateX(-231px)
}

.class-layer-navi-link--4 {
    transform: translateX(-112px)
}

.class-layer-navi-link--5 {
    transform: translateX(10px)
}

.class-layer-navi-link--6 {
    transform: translateX(129px)
}

.class-layer-navi-link--7 {
    transform: translateX(250px)
}

.class-layer-navi-link--8 {
    transform: translateX(369px)
}

.class-layer-navi__btn {
    position: absolute;
    top: 11px;
    width: 64px;
    height: 78px;
    opacity: 0;
    transition: opacity .3s
}

.class-layer-navi__btn:hover {
    opacity: 1
}

.class-layer-navi__btn--prev {
    left: 327px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0034_411bb9022f26.webp) no-repeat 50% 0
}

.class-layer-navi__btn--next {
    right: 327px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0035_8c860465060f.webp) no-repeat 50% 0
}

.section-dungeon-layer {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.section-dungeon-layer__container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 1800px;
    max-height: 1000px;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden
}

.section-dungeon-layer__container--1 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/dungeon-boss-1.webp) no-repeat 50% 50% #000
}

.section-dungeon-layer__container--2 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/dungeon-boss-2.webp) no-repeat 50% 50% #000
}

.section-dungeon-layer__container--3 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/dungeon-boss-3.webp) no-repeat 50% 50% #000
}

.section-dungeon-layer__container--4 {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/dungeon-boss-4.webp) no-repeat 50% 50% #000
}

.section-dungeon-layer__btn-close {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 48px;
    height: 58px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0057_85cb1757d05e.webp) no-repeat 50% 50%;
    z-index: 100
}

.to-world:hover+.to-world-bg {
    opacity: 1
}

.to-world:hover+.to-world-bg--is-transition {
    transition: none;
    opacity: 0
}

.to-world-bg {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 253px;
    height: 258px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
    z-index: 2;
    transition: opacity .5s
}

.to-world-bg--elyos {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-btn-to-bg.webp)
}

.to-world-bg--asmodian {
    background-image: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-btn-to-bg.webp)
}

.section-preorder-asmodian__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 22;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-preorder-title.webp) no-repeat 50% 50%;
    transform: translateX(-539px) translateY(-530px);
    overflow: hidden;
    text-indent: -9999px
}

.section-preorder-asmodian__contents {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-preorder-contents.webp) no-repeat 0 -40px;
    background-size: cover;
    z-index: 18;
    transform: translateX(-50%) translateY(-500px)
}

.section-preorder-elyos__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 364px;
    z-index: 22;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-preorder-title.webp) no-repeat 50% 50%;
    transform: translateX(-539px) translateY(-530px);
    overflow: hidden;
    text-indent: -9999px
}

.section-preorder-elyos__contents {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-preorder-contents.webp) no-repeat 0 -40px;
    background-size: cover;
    z-index: 18;
    transform: translateX(-50%) translateY(-500px)
}

.section-preorder {
    width: 100vw;
    height: 100vh
}

.section-preorder__wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    width: 640px;
    transform: translateX(100%);
    transition: transform .6s cubic-bezier(0, 0, 0, 1)
}

.section-preorder__wrap #preorder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(6 41 71);
    font-weight: 400;
    font-size: 25px;
    line-height: 36px;
    padding: 40px 0;
    text-align: center;
}

.section-preorder__wrap--is-open {
    transform: translateX(0)
}

.section-preorder--elyos .preorder__top-layer {
    background: #2e363e !important
}

.section-preorder--elyos .section-preorder__toggle--is-closed {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0059_30326304f5c6.webp) no-repeat 0 0
}

.section-preorder--elyos .section-preorder__toggle--is-opened {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0060_5623f911c90b.webp) no-repeat 0 0
}

.section-preorder--elyos .section-preorder__btn--preorder {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0061_54dfdd255062.webp) no-repeat 0 0
}

.section-preorder--elyos .section-preorder__btn--coupon {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-preorder-btn-3.webp) no-repeat 0 0
}

.section-preorder--asmodian .preorder__top-layer {
    background: #33333f !important
}

.section-preorder--asmodian .section-preorder__toggle--is-closed {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0062_fd469ec8ba24.webp) no-repeat 0 0
}

.section-preorder--asmodian .section-preorder__toggle--is-opened {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0063_2dbf5294feb9.webp) no-repeat 0 0
}

.section-preorder--asmodian .section-preorder__btn--preorder {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0064_e12575cea12d.webp) no-repeat 0 0
}

.section-preorder--asmodian .section-preorder__btn--coupon {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-preorder-btn-3.webp) no-repeat 0 0
}

.section-preorder__toggle {
    position: absolute;
    top: 50%;
    z-index: 25;
    transform: translateY(-50%)
}

.section-preorder__toggle--is-closed {
    width: 130px;
    height: 288px;
    left: -130px
}

.section-preorder__toggle--is-opened {
    width: 65px;
    height: 140px;
    left: 0
}

.section-preorder__buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 636px;
    text-align: center;
    transform: translateX(-313px) translateY(262px);
    z-index: 24
}

.section-preorder__btn--preorder {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0064_e12575cea12d.webp) no-repeat 0 0
}

.section-preorder__btn--coupon,
.section-preorder__btn--preorder {
    display: inline-block;
    position: static !important;
    width: 318px;
    height: 120px;
    vertical-align: middle;
    text-align: left;
    transition: background 1.2s ease;
    transition-delay: 1.2s
}

.section-preorder__btn--coupon {
    text-indent: 0;
    overflow: hidden;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-preorder-btn-2.webp) no-repeat 0 0;
    font-size: 0
}

.section-preorder__btn--coupon .banner-coupon,
.section-preorder__btn--coupon .banner-coupon__btn,
.section-preorder__btn--coupon .banner-coupon__btn-wrap {
    width: 318px !important;
    height: 120px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    text-indent: 0
}

body .modal__button-list button:first-child {
    border-radius: 0 !important
}

body.elyos {
    --point-color-a: 29, 153, 197;
    --point-color-b: 6, 41, 71;
    --point-color-font: 255, 221, 162
}

body.elyos .modal__container {
    background: #2e363e !important;
    word-break: keep-all
}

body.asmodian {
    --point-color-a: 115, 75, 189;
    --point-color-b: 23, 21, 58;
    --point-color-font: 255, 221, 162
}

body.asmodian .modal__container {
    background: #33333f !important;
    word-break: keep-all
}

.section-preorder__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    background: none;
    outline: 0;
    z-index: 30;
    border: 0;
    overflow: hidden;
    text-indent: -999px
}

.section-preorder__btn-view-1 {
    transform: translateX(-487px) translateY(210px);
    width: 140px;
    height: 30px
}

.section-preorder__btn-view-2 {
    transform: translateX(-38px) translateY(210px);
    width: 140px;
    height: 30px
}

.section-preorder__btn--app-store {
    transform: translateX(366px) translateY(190px);
    width: 170px;
    height: 50px
}

.section-preorder__btn--google-play {
    transform: translateX(190px) translateY(190px);
    width: 170px;
    height: 50px
}

.section-preorder__btn--caution {
    transform: translateX(-60px) translateY(420px);
    width: 120px;
    height: 40px
}

.section-preorder__btn--gift {
    transform: translateX(209px) translateY(140px);
    width: 270px;
    height: 40px
}

.kit-layer--youtube-shorts .kit-slide {
    height: 80vh;
    width: 45vh
}

.kit-layer--youtube-shorts .kit-slide__button--prev {
    left: -100px !important
}

.kit-layer--youtube-shorts .kit-slide__button--next,
.kit-layer--youtube-shorts .kit-slide__button--prev {
    width: 64px;
    height: 78px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0035_8c860465060f.webp) no-repeat 50% 0
}

.kit-layer--youtube-shorts .kit-slide__button--next {
    right: -100px !important
}

.kit-layer--youtube-shorts .kit-youtube__poster {
    background-size: cover !important
}

.kit-layer--youtube-shorts .kit-youtube {
    height: 80vh;
    width: 45vh
}

.section-preorder-layer-btn-close {
    overflow: hidden;
    width: 40px;
    height: 40px;
    text-indent: -999px;
    top: 95px;
    right: 60px;
    position: absolute
}

.kit-layer--hide-close-btn .kit-layer__close {
    display: none
}

.section-preorder-layer-1--elyos {
    display: none;
    width: 676px;
    height: 796px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-layer-1.webp) no-repeat 0 0
}

.section-preorder-layer-2--elyos {
    display: none;
    width: 676px;
    height: 636px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/e-layer-3.webp) no-repeat 0 0
}

.section-preorder-layer-1--asmodian {
    display: none;
    width: 676px;
    height: 796px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-layer-1.webp) no-repeat 0 0
}

.section-preorder-layer-2--asmodian {
    display: none;
    width: 676px;
    height: 636px;
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/a-layer-3.webp) no-repeat 0 0
}

.kit-layer__contents .section-preorder-layer-1,
.kit-layer__contents .section-preorder-layer-2 {
    display: block
}

.bgm {
    overflow: hidden;
    width: 36px;
    height: 36px;
    margin-left: 13px;
    top: 40px;
    right: 40px;
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    transition: right .6s ease
}

.bgm--is-open {
    right: 100px;
    transition-delay: 1.2s
}

.bgm__btn {
    transition: right .3s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-indent: -999px
}

.bgm__btn--off {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-header.webp) no-repeat -5px 50%;
    background-size: auto 44px
}

.bgm__btn--on {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/btn-header.webp) no-repeat -54px 50%;
    background-size: auto 44px
}

.page-enter-active,
.page-leave-active {
    transition: opacity .8s ease-in-out
}

.page-enter-from,
.page-leave-to {
    opacity: 0
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s ease
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0
}

.copyright-enter-active,
.copyright-leave-active {
    transition: opacity .6s ease
}

.copyright-enter-from,
.copyright-leave-to {
    opacity: 0
}

.sub-page-change-enter-active,
.sub-page-change-leave-active {
    transition: opacity .6s ease
}

.sub-page-change-enter-from,
.sub-page-change-leave-to {
    opacity: 0 !important
}

.intro-fade-enter-active,
.intro-fade-leave-active {
    transition: opacity .6s ease
}

.intro-fade-enter-from,
.intro-fade-leave-to {
    opacity: 0
}

.intro-fade-enter-to,
.intro-fade-leave-from {
    opacity: 1
}

.intro-loading-fade-enter-active,
.intro-loading-fade-leave-active {
    transition: opacity .6s ease
}

.intro-loading-fade-enter-from,
.intro-loading-fade-leave-to {
    opacity: 0
}

.intro-loading-fade-enter-to,
.intro-loading-fade-leave-from {
    opacity: 1
}

.banner-enter-active,
.banner-leave-active {
    transition: all .6s ease
}

.banner-enter-active {
    transition-delay: 1.3s
}

.banner-enter-from,
.banner-leave-to {
    transform: translateX(50px);
    opacity: 0
}

.page-navi-enter-active,
.page-navi-leave-active {
    transition: transform .6s ease
}

.page-navi-enter-active {
    transition-delay: .2s
}

.page-navi-enter-from,
.page-navi-leave-to {
    transform: translateX(-100%)
}

.header-enter-active,
.header-leave-active {
    transition: all .6s ease
}

.header-enter-active {
    transition-delay: 1.3s
}

.header-enter-from,
.header-leave-to {
    transform: translatey(-100%);
    opacity: 0
}

.race-change-enter-active,
.race-change-leave-active {
    transition: opacity 1s ease !important;
    transition-delay: 1.3s !important
}

.race-change-enter-from,
.race-change-leave-to {
    opacity: 0 !important
}

.layer-enter-active,
.layer-leave-active {
    transition: all .5s ease;
    transform: translateZ(0) scale(1)
}

.layer-enter-from,
.layer-leave-to {
    opacity: 0;
    transform: translateZ(0) scale(0)
}

.layer-dim-enter-active,
.layer-dim-leave-active {
    transition: all .5s ease;
    opacity: 1
}

.layer-dim-enter-from,
.layer-dim-leave-to {
    opacity: 0
}

.class-layer-char-enter-active {
    transition: all .6s ease !important;
    transform: translateX(0) translateZ(0) scale(1) !important;
    z-index: 1 !important
}

.class-layer-char-leave-active {
    transition: all .8s ease !important;
    transform: translateX(0) translateZ(0) scale(.8) !important;
    filter: blur(10px) !important;
    z-index: 0 !important
}

.class-layer-char-enter-from {
    opacity: 0 !important;
    transform: translateX(-300px) translateZ(0) scale(1.2) !important;
    z-index: 1 !important
}

.class-layer-char-leave-to {
    opacity: 0 !important;
    transform: translateX(15%) translateZ(0) scale(.8) !important;
    z-index: 0 !important;
    filter: blur(10px) !important
}

.class-layer-text-enter-active,
.class-layer-text-leave-active {
    transition: all .6s ease !important
}

.class-layer-text-enter-from,
.class-layer-text-leave-to {
    opacity: 0 !important;
    transform: translateZ(0) !important
}

* {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

a {
    text-decoration: none;
    color: #979ea5
}

body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden
}

body {
    background: #000
}

button {
    cursor: pointer;
    border: 0;
    outline: 0
}

.kit-copyright {
    z-index: 1000 !important
}

.kit-youtube__controls-play {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0012_d78b1406963f.webp) no-repeat 50% 50%;
    background-size: 100% 100%;
    width: 100px;
    height: 100px
}

.kit-youtube__controls-pause {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0065_b4dad0b52763.webp) no-repeat 50% 50%;
    background-size: 100% 100%;
    width: 100px;
    height: 100px
}

.page-title {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-100%, -100%)
}

.ir-text {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.hide-text,
.ir-text {
    overflow: hidden;
    text-indent: -9999px
}

.kit-layer__close {
    background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0057_85cb1757d05e.webp) no-repeat 50% 50%;
    top: 50px;
    right: 50px;
    width: 50px;
    height: 50px
}

.kit-layer__close:after,
.kit-layer__close:before {
    display: none
}

.kit-video {
    background-color: transparent
}

.copyright {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: 212px;
    height: 12px;
    text-indent: -9999px;
    transform: translateX(-106px);
    /* background: url(https://static.web.sdo.com/aion2/pic/act/teaser/images/img_0066_a9fca6cfb26a.webp) no-repeat 50% 50%; */
    background-size: cover;
    z-index: 99
}