* {
    box-sizing: border-box;
}

html, body, div, p, ul, li, dl, dt, dd, em, i, span, a, img, input, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0
}

a, img, input {
    border: none;
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: none
}

body {
    font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none
}

::root {
    --intro-fade: 500ms;
}

input:autofill {
    background: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* 1. 超大透明内阴影覆盖浏览器黄色背景核心 */
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    /* 2. 强制背景透明兜底 */
    background-color: transparent !important;
    background-image: none !important;
    /* 3. 文字颜色继承页面，避免填充后变黑 */
    -webkit-text-fill-color: inherit !important;
    /* 4. 超长过渡，阻止浏览器瞬间恢复黄色 */
    transition: background-color 99999s ease 0s, color 99999s ease 0s !important;
}

body {
    background-color: #000;
}

.video {
    position: relative;
    width: 100%;
    height: 100%;
}

.video video, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video .page-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    display: none;
    transition: opacity .3s;
}

.video .page-transition.show {
    display: block;
    opacity: 1;
}

body, .main {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.main {
    opacity: 1;
    transition: opacity 0.5s;
}

.main.show {
    opacity: 1;
}

.main .section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main .section.copyright {
    z-index: 40;
    height: 1.5rem;
    background-color: #000;
}

.main .section.swiper-slide-active {
    z-index: 30;
}

.main .section .cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
}

.main .section .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-main-elyos {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
    overflow: hidden;
    z-index: 2;
}

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

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

.section-main-elyos__cover {
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/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 {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 2;
    background-size: 100% 100%;
}

.section-main-elyos__character {
    position: absolute;
    bottom: 0;
    left: 50%;
    /* transform: translateX(-10.19rem) translateY(3.55rem) scale(.65); */
    transform: translateX(-10.19rem) translateY(4.35rem);
    z-index: 11;
    width: 19.2rem;
    height: 15rem;
}

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

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

.section-main-asmodian__cover {
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/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__contents {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
}

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

.section-main-asmodian__character {
    position: absolute;
    bottom: 0;
    left: 50%;
    /* transform: translateX(-7.0rem) translateY(3.55rem) scale(.65); */
    transform: translateX(-6.3rem) translateY(4.55rem);
    z-index: 11;
    width: 19.2rem;
    height: 15rem;
}

.slide1 .top-logo {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 5.14rem;
    height: 3.53rem;
    padding: .28rem 0 2.7rem .58rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/top-logo-bg.png) no-repeat;
    background-size: 100% 100%;
}

.slide1 .top-logo .logo1 {
    width: .49rem;
    height: .55rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/top-logo1.png) no-repeat;
    background-size: 100% 100%;
}

.slide1 .top-logo .logo2 {
    width: .73rem;
    height: .39rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/top-logo2.png) no-repeat;
    background-size: 100% 100%;
}

.slide1 .aion2-logo {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 5.37rem;
    height: 4.96rem;
    margin: -3.72rem 0 0 -2.74rem;
}

.slide1 .aion2-logo::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -.57rem;
    left: -2.48rem;
    width: 9.72rem;
    height: 7.13rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/aion2-logo-bg.png) no-repeat;
    background-size: 100% 100%;
    /* animation: fiterAni 2s ease infinite; */
}

@keyframes fiterAni {
    0%, 100% {
        filter: blur(0);
    }

    50% {
        filter: blur(10px);
    }
}

.slide1 .aion2-logo .logo {
    width: 100%;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/aion2-logo.png) no-repeat;
    background-size: 100% 100%;
}

.slide1 .play-btn {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    display: block;
    width: .75rem;
    height: .75rem;
    margin: .83rem 0 0 0;
    transform: translateX(-50%);
    /* animation: playBtnAni 1s ease infinite; */
}

.slide1 .play-btn::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/e-main-btn-play-hover-animated.webp) no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

@keyframes playBtnAni {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.slide1 .pre-con {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    width: 5.18rem;
    height: 1.31rem;
    margin: 3.36rem 0 0 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
}

.slide1 .pre-con .form-item {
    position: relative;
    width: 100%;
    height: .53rem;
    padding: 0 .7rem 0 .75rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/form-item-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slide1 .pre-con .form-item span {
    position: absolute;
    top: 50%;
    right: 1.46rem;
    transform: translateY(-50%);
    width: 1.34rem;
    height: .39rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/form-item-arrow.png) no-repeat;
    background-size: 100% 100%;
    transition: all .3s ease;
    pointer-events: none;
}

.slide1 .pre-con .form-item input {
    width: 2.4rem;
    height: 100%;
    border: none;
    outline: none;
    background: transparent !important;
    color: #fff;
    font-size: .16rem;
    line-height: .25rem;
}

.slide1 .pre-con .form-item input::placeholder {
    color: #fff;
}

.slide1 .pre-con .form-item label {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    font-size: .16rem;
    line-height: .16rem;
    color: #fff;
    transition: all .3s ease;
    pointer-events: none;
}

/* .slide1 .pre-con .form-item input:focus~label, .slide1 .pre-con .form-item input:valid~label {
    top: -.1rem;
    left: .75rem;
} */

/* .slide1 .pre-con .form-item input:focus~span, .slide1 .pre-con .form-item input:valid~span {
    right: 1.4rem;
} */

.slide1 .pre-con .form-item.item-filled span {
    right: 1.4rem;
}

.slide1 .pre-con .form-item.item-filled label {
    top: -.1rem;
    left: .75rem;
}

.slide1 .pre-con .form-item button {
    width: .76rem;
    height: .53rem;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    font-size: .16rem;
    line-height: .53rem;
    color: #fff;
}

.slide1 .pre-con .form-item button:disabled {
    cursor: not-allowed;
}

.slide1 .qrcode {
    position: absolute;
    z-index: 10;
    bottom: .2rem;
    right: .25rem;
    width: 1.41rem;
    height: 3.35rem;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/qrcode.webp) no-repeat;
    background-size: 100% 100%;
}

.slide1 .assemble-btn {
    position: relative;
    width: 5.13rem;
    height: 0.68rem;
    text-indent: -999em;
    margin: 0 auto;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/assemble-btn.png) no-repeat;
    background-size: 100% 1.36rem;
}

.slide1 .assemble-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 100%;
    background: url(https://static.web.sdo.com/aion2/pic/act/preregister/images/assemble-btn-light.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    transition: all .3s ease;
    animation: opacityAni 1.8s ease infinite;
}

@keyframes opacityAni {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.slide1 .assemble-btn.isok {
    background-position: 0 bottom;
}

/* loading */
.loading-wrap {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.progress-video {
    width: 100%;
    height: 100%;
    display: flex;
}

.percent-text {
    display: none;
}

.loading-tips {
    position: absolute;
    left: 50%;
    bottom: .2rem;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-size: .16rem;
    line-height: .16rem;
    color: #fff;
}

/* 视频 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 12.8rem;
    height: 7.2rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.video-content {
    width: 100%;
    height: 100%;
}

.video-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-close-btn {
    width: .4rem;
    height: .4rem;
    font-size: 0;
    display: block;
    z-index: 10;
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    padding: 0;
    position: fixed;
    right: -.4rem;
    top: -.05rem
}

.modal-close-btn:before {
    content: "";
    margin: -1px 0 0 -.2rem;
    width: .4rem;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: rotate(45deg);
    transition: false
}

.modal-close-btn:after {
    content: "";
    margin: -1px 0 0 -.2rem;
    width: .4rem;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: rotate(-45deg);
    transition: false
}

/* alert */
#alert {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: alertIn 0.3s ease forwards;
    pointer-events: none;
}

#alert.remove {
    animation: alertOut 0.3s ease forwards;
}

#alert div {
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
}

#alert div.success {
    background: #67c23a;
}

#alert div.error {
    background: #f56c6c;
}

#alert div.warning {
    background: #e6a23c;
}

@keyframes alertIn {
    from {
        opacity: 0;
        top: 0;
    }

    to {
        opacity: 1;
        top: 30px;
    }
}

@keyframes alertOut {
    from {
        opacity: 1;
        top: 30px;
    }

    to {
        opacity: 0;
        top: 0;
    }
}