/* .page-item.ability {
    height : 1889px;
    height : 98.3854166666667vw;
} */


.page-item.ability .page-item-bg {
    height        : 98.3854166666667vw;
    position      : absolute;
    bottom        : auto;
    z-index       : 10;
    pointer-events: none;
}

.page-item.ability .page-item-bg>img {
    display: block;
    width  : auto;
    float  : left;
}

.page-item.ability .page-item-bg::after {
    content: "";
    display: block;
    clear  : both;
}



.page-item.ability .page-item-bg .c-29 {
    top      : 7%;
    right    : 0;
    animation: c-29-more linear 10s infinite alternate-reverse;
}

@keyframes c-29-more {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

.page-item.ability .page-item-bg .c-30 {
    top      : 8%;
    left     : 0;
    animation: c-30-more linear 8s infinite alternate-reverse;
}

@keyframes c-30-more {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.page-item.ability .page-item-bg .c-17796 {
    top    : 3%;
    /* left: 476px/1920; */
    left   : 24.791666666666667%;
}




.page-item.ability .page-item-ability-scroll {
    /* width: 360px/1920; */
    width           : 18.75%;
    /* height       : 578px/1920; */
    height          : 30.10416667vw;
    overflow        : auto;
    position        : absolute;
    /* top          : 532px/1920; */
    top             : 27.70833333vw;
    /* right        : 320px/1920; */
    right           : 16.6666666666667%;
    z-index         : 12;
}


.page-item.ability .page-item-ability-scroll .items {
    padding: 30px;
}

.page-item.ability .page-item-ability-scroll .item {
    padding      : 15px;
    display      : block;
    border-radius: 10px;
    background   : #fff;
    font-weight  : 900;
    font-size    : 24px;
    text-align   : center;
    color        : rgba(0, 0, 0, 0.3);
    border       : 2px solid transparent;
    cursor       : pointer;
    transition   : all linear 150ms;
}

.page-item.ability .page-item-ability-scroll .item>label {
    cursor: inherit;
}

.page-item.ability .page-item-ability-scroll .item+.item {
    margin-top: 15px;
}

.page-item.ability .page-item-ability-scroll .item:hover {
    transform: scale(1.1);
    color    : #ffbe2e;
    border   : 2px solid rgba(255, 189, 46, 0.5);
}

.page-item.ability .page-item-ability-scroll .item.active {
    color     : #ffbe2e;
    border    : 2px solid #ffbe2e;
    box-shadow: 0 1px 10px #ffbe2e;
}



.page-item.ability .page-item-ability-scroll .item.medium:hover {
    color : #eb7f2f;
    border: 2px solid rgba(235, 129, 47, 0.5);
}

.page-item.ability .page-item-ability-scroll .item.medium.active {
    color     : #eb7f2f;
    border    : 2px solid #eb7f2f;
    box-shadow: 0 1px 10px #eb7f2f;
}


.page-item.ability .page-item-ability-scroll .item.senior:hover {
    color : #844bcb;
    border: 2px solid rgba(133, 75, 203, 0.5);
}

.page-item.ability .page-item-ability-scroll .item.senior.active {
    color     : #844bcb;
    border    : 2px solid #844bcb;
    box-shadow: 0 1px 10px #844bcb;
}




.page-item.ability .page-item-ability-scroll .items-more {
    padding    : 0 15px 30px;
    font-weight: 500;
    font-size  : 14px;
    color      : rgba(0, 0, 0, 0.2);
    text-align : center;
}







.page-item .page-item-ability {
    /* padding   : 496px/1920 0; */
    /* padding         : 25.833333333333333% 0 0; */
    box-sizing      : border-box;
    padding         : 180px 560px 0;
    width           : 1920px;
    transform-origin: left top;
    overflow        : hidden;
    position        : absolute;
    top             : 0;
    bottom          : 0;
    left            : 0;
    z-index         : 8;
}

.page-item .ability-header {
    padding    : 0 0 0 54px;
    line-height: 1;
}

.page-item .ability-header .title {
    font-weight: 900;
    font-size  : 70px;
    color      : #333;
}

.page-item .ability-header .desc {
    margin     : 30px 0 0 120px;
    font-weight: 400;
    font-size  : 24px;
    color      : rgba(51, 51, 51, 0.4);
}



.page-item-ability-body {
    width             : 925px;
    height            : 462px;
    transform-origin  : right top;
    position          : absolute;
    /* top            : 496px+45px/1920; */
    top               : 28.17708333vw;
    /* right          : 680px/1920; */
    right             : 35.416666666666667vw;
    z-index           : 8;
}


.page-item-ability-body .bg {
    border-radius             : 60px;
    background                : rgba(255, 255, 255, 0.6);
    position                  : absolute;
    top                       : 0;
    right                     : -100px;
    bottom                    : 0;
    left                      : 0;
    transform                 : translateX(100%);
    opacity                   : 0;
    transition                : all 200ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.page-item-ability-body .icon {
    width                     : 580px;
    height                    : 640px;
    position                  : relative;
    transform                 : translateX(100%);
    opacity                   : 0;
    transition                : all 800ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.175);
    position                  : absolute;
    top                       : -165px;
    left                      : -97px;
}

.page-item-ability-body .icon>img {
    display: block;
}

.page-item-ability-body .icon .m {
    opacity   : 0;
    transition: all ease-out 800ms;
}

.page-item-ability-body.run .icon .m {
    opacity: 1;
}

.page-item-ability-body .icon .d {
    position                  : absolute;
    left                      : 50%;
    top                       : 50%;
    transform                 : scale(0);
    opacity                   : 0;
    transition                : all 800ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.page-item-ability-body.run .icon .d {
    opacity  : 1;
    transform: scale(1);
}

.page-item-ability-body .content {
    padding-right             : 20px;
    overflow                  : auto;
    position                  : absolute;
    top                       : 60px;
    right                     : 80px;
    bottom                    : 60px;
    left                      : 450px;
    z-index                   : 1;
    transform                 : translateX(100%);
    opacity                   : 0;
    transition                : all 800ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.page-item-ability-body .content .h {
    margin-bottom: 40px;
}

.page-item-ability-body .content .h>h1 {
    display       : inline-block;
    vertical-align: middle;
    font-weight   : 900;
    font-size     : 32px;
    color         : #ffbe2e;
}

.page-item-ability-body .content .h>.badge {
    margin-left   : 10px;
    padding       : 5px 12px;
    display       : inline-block;
    vertical-align: middle;
    border-radius : 20px;
    background    : rgba(255, 189, 46, 0.2);
    font-weight   : 500;
    font-size     : 15px;
    color         : #ffbe2e;
}

.page-item-ability-body .content .item+.item {
    margin-top: 40px;
}

.page-item-ability-body .content .item>h2 {
    margin-bottom: 18px;
    font-weight  : 900;
    font-size    : 18px;
    color        : #999;
}

.page-item-ability-body .content .item>p {
    font-weight: 500;
    font-size  : 18px;
    line-height: 1.57;
    color      : #999;
}



.page-item-ability-body .content.medium .h>h1 {
    color: #eb7f2f;
}

.page-item-ability-body .content.medium .h>.badge {
    background: rgba(235, 129, 47, 0.2);
    color     : #eb7f2f;
}

.page-item-ability-body .content.senior .h>h1 {
    color: #844bcb;
}

.page-item-ability-body .content.senior .h>.badge {
    background: rgba(133, 75, 203, 0.2);
    color     : #844bcb;
}




.page-item-ability-body.run {
    z-index: 9;
}

.page-item-ability-body.run .bg {
    transform: translateX(0);
    opacity  : 1;
}

.page-item-ability-body.run .icon {
    transform: translateX(0);
    opacity  : 1;
}

.page-item-ability-body.run .content {
    transform: translateX(0);
    opacity  : 1;
}




.page-item .page-item-ability .translate {
    transform: var(--data-transform, translateY(100px));
}

.page-item .page-item-ability.fixed {
    position: fixed;
}

.page-item.ability-1 .page-item-ability {
    overflow: visible;
}