@import url(public.css);

.wmpage210-page1 .wmpage210-page1-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-left {
    width: 44%;
    position: relative;
    z-index: 2
}

.wmpage210-page1 .wmpage210-page1-left img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 5/4;
    border-radius: 10px
}

.wmpage210-page1 .wmpage210-page1-left::after {
    background: rgba(255, 255, 255, .4);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    opacity: 1;
    z-index: 1;
    pointer-events: none
}

.wmpage210-page1 .wmpage210-page1-left:hover::after {
    opacity: 0;
    height: 100%;
    transition: all .4s linear
}

.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-card {
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
    height: 170px;
    padding: 0 20px;
    background: var(--color);
    position: absolute;
    right: -30px;
    bottom: -30px;
    border-radius: 8px;
    z-index: 3
}

.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-num {
    font-size: var(--wmpage-font36);
    font-weight: var(--fontbold6);
    color: #fff;
    line-height: 1.1
}

.wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-title {
    color: #fff
}

.wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-right {
    width: 50%
}

.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-text {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: var(--color);
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font15)
}

.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-text em {
    margin-right: 5px
}

.wmpage210-page1 .wmpage210-page1-right .wmpage-title {
    color: var(--wmpage-color22);
    margin: 3px 0 8px
}

.wmpage210-page1 .wmpage210-page1-right .wmpage210-page1-desc {
    color: var(--wmpage-color8);
    margin-bottom: 15px
}

.wmpage210-page1 .wmpage210-page1-right ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.wmpage210-page1 .wmpage210-page1-right ul li {
    width: 50%;
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: var(--wmpage-color8);
    font-weight: var(--fontbold6)
}

.wmpage210-page1 .wmpage210-page1-right li em {
    color: var(--color);
    margin-right: 8px;
    font-weight: var(--fontbold5)
}

.wmpage210-page1 .wmpage210-page1-btn a {
    display: inline-flex;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 50px;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    border: 1px solid #a6a6a6;
    background-color: #fff;
    font-size: var(--wmpage-font17);
    text-transform: uppercase;
    color: #fff;
    font-weight: var(--fontbold6);
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
    margin-top: 35px;
    border-radius: 5px
}

.wmpage210-page1 .wmpage210-page1-btn a:after {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: #fff;
    position: absolute;
    content: '';
    cursor: pointer;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--color);
    background-image: url(../images/wmpage210-page1-img2.webp);
    -webkit-mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);
    mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    z-index: -1;
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
    filter: grayscale(1);
}

.wmpage210-page1 .wmpage210-page1-btn a:hover {
    color: var(--color)
}

.wmpage210-page1 .wmpage210-page1-btn a:hover:after {
    animation: page1 .7s steps(22) forwards
}

.wmpage210-page1 .wmpage210-page1-btn a:not(:hover):after {
    animation: page1-reverse .7s steps(22) forwards
}

@keyframes page1 {
    0% {
        mask-position: 100% 0;
        -webkit-mask-position-x: 0;
        -webkit-mask-position-y: 0
    }

    100% {
        mask-position: 0 0;
        -webkit-mask-position-x: 100%;
        -webkit-mask-position-y: 0
    }
}

@keyframes page1-reverse {
    0% {
        mask-position: 0 0;
        -webkit-mask-position-x: 100%;
        -webkit-mask-position-y: 0
    }

    100% {
        mask-position: 100% 0;
        -webkit-mask-position-x: 0;
        -webkit-mask-position-y: 0
    }
}

@media screen and (max-width:1024px) {
    .wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-left {
        width: 100%;
        margin-bottom: 30px
    }

    .wmpage210-page1 .wmpage210-page1-left .wmpage210-page1-card {
        left: 0;
        bottom: 0;
        right: auto;
        border-radius: 0 8px 0 0
    }

    .wmpage210-page1 .wmpage210-page1-box .wmpage210-page1-right {
        width: 100%
    }
}

@media screen and (max-width:500px) {
    .wmpage210-page1 .wmpage210-page1-right ul li {
        width: 100%
    }

    .wmpage210-page1 .wmpage210-page1-left img {
        height: 400px
    }
}

.wmpage210-page2 {
    background: #161616
}

.wmpage210-page2 .wmpage210-page2-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--color);
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font15)
}

.wmpage210-page2 .wmpage210-page2-text em {
    margin-right: 5px
}

.wmpage210-page2 .wmpage-title {
    color: #fff;
    text-align: center
}

.wmpage210-page2 .wmpage210-page2-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-left {
    width: 30%
}

.wmpage210-page2 .wmpage210-page2-left .wmpage210-page2-item {
    text-align: right;
    padding: 30px 0
}

.wmpage210-page2 .wmpage210-page2-left .wmpage210-page2-item:first-child,
.wmpage210-page2 .wmpage210-page2-right .wmpage210-page2-item:first-child {
    border-bottom: 1px solid #ffffff14;
    padding: 30px 0 35px
}

.wmpage210-page2 .wmpage210-page2-item .wmpage210-page2-icon em {
    display: inline-block;
    font-size: var(--wmpage-font40);
    width: var(--wmpage-font40);
    line-height: 1;
    color: #fff;
    transition: all .2s linear;
}

.wmpage210-page2 .wmpage210-page2-item:hover .wmpage210-page2-icon em {
    transform: rotateY(180deg);
    color: var(--color)
}

.wmpage210-page2 .wmpage210-page2-item .wmpage210-page2-title {
    color: #fff;
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font20);
    margin: 15px 0 10px;
    line-height: 1;
    transition: all .2s linear
}

.wmpage210-page2 .wmpage210-page2-item:hover .wmpage210-page2-title {
    color: var(--color)
}

.wmpage210-page2 .wmpage210-page2-item .wmpage210-page2-desc {
    color: #fff;
    opacity: .7
}

.wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-content {
    width: 35%;
    text-align: center
}

.wmpage210-page2 .wmpage210-page2-slide {
    display: flex;
    justify-content: center;
}

.wmpage210-page2 .wmpage210-page2-slide img {
    width: 340px;
    height: 340px;
    object-fit: cover;
    margin-top: 40px;
    border-radius: 100%;
    border: 6px solid var(--color)
}

.wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-right {
    width: 30%
}

.wmpage210-page2 .wmpage210-page2-right .wmpage210-page2-item {
    padding-top: 30px
}

.wmpage210-page2 .wmpage210-page2-pagination {
    margin-top: 20px
}

.wmpage210-page2 .wmpage210-page2-pagination .swiper-pagination-bullet {
    position: relative;
    background: var(--color);
    opacity: 1;
    margin: 0 10px
}

.wmpage210-page2 .wmpage210-page2-pagination .swiper-pagination-bullet::before {
    position: absolute;
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color);
    left: -3.5px;
    top: -3.5px;
    opacity: 0;
    transition: all .2s linear
}

.wmpage210-page2 .wmpage210-page2-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    opacity: 1
}

@media screen and (max-width:1024px) {
    .wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-left {
        width: 100%
    }

    .wmpage210-page2 .wmpage210-page2-left .wmpage210-page2-item {
        text-align: center
    }

    .wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-content {
        width: 100%
    }

    .wmpage210-page2 .wmpage210-page2-slide img {
        width: 100%;
        height: auto;
        margin: 30px 0
    }

    .wmpage210-page2 .wmpage210-page2-box .wmpage210-page2-right {
        width: 100%;
        text-align: center
    }
}

.wmpage210-page3 .wmpage210-page3-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

/* .wmpage210-page3 .wmpage210-page3-left{width:49%} */
.wmpage210-page3 .wmpage210-page3-text {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: var(--color);
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font15)
}

.wmpage210-page3 .wmpage210-page3-text em {
    margin-right: 5px
}

.wmpage210-page3 .wmpage-title {
    color: var(--wmpage-color22);
    margin: 0 0 8px
}

.wmpage210-page3 .wmpage210-page3-right {
    width: 49%
}

.wmpage210-page3 .wmpage210-page3-desc {
    color: var(--wmpage-color8)
}

.wmpage210-page3 .wmpage210-page3-btn a {
    display: inline-flex;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 50px;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    border: 1px solid #a6a6a6;
    background-color: #fff;
    font-size: var(--wmpage-font17);
    text-transform: uppercase;
    color: #fff;
    font-weight: var(--fontbold6);
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
    margin-top: 30px
}

.wmpage210-page3 .wmpage210-page3-btn a::after {
    display: flex;
    filter: grayscale(1);
    align-items: flex-end;
    justify-content: flex-end;
    color: #fff;
    position: absolute;
    content: '';
    cursor: pointer;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--color);
    /* background-image: url(../images/wmpage210-page1-img2.webp);
    -webkit-mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);
    mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp); */
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    z-index: -1;
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
}

.wmpage210-page3 .wmpage210-page3-btn a:hover {
    color: var(--color)
}

.wmpage210-page3 .wmpage210-page3-btn a:hover:after {
    animation: page1 .7s steps(22) forwards
}

.wmpage210-page3 .wmpage210-page3-btn a:not(:hover):after {
    animation: page1-reverse .7s steps(22) forwards
}

.wmpage210-page3 .wmpage210-page3-bottom {
    margin-top: 30px
}

.wmpage210-page3 .wmpage210-page3-bottom .wmpage210-page3-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-img {
    width: 50%;
    position: relative;
    height: auto;
    overflow: hidden
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
    transition: all .4s linear;
    transform: scale(1.05)
}

.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-img img {
    transform: scale(1)
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 20px 50px;
    height: auto;
    background: #e8e8e8;
    z-index: 1
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-info::before {
    position: absolute;
    content: '';
    left: 50%;
    height: 100%;
    width: 0;
    background: #666;
    top: 0;
    transition: .5s;
    z-index: -1
}

.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-info::before {
    left: 0;
    width: 100%
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-icon em {
    color: var(--color);
    font-size: var(--wmpage-font46);
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-words {
    text-transform: uppercase;
    font-size: var(--wmpage-font14);
    font-weight: var(--fontbold6);
    color: var(--color);
    margin-bottom: 10px;
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-title {
    font-weight: var(--fontbold7);
    font-size: var(--wmpage-font22);
    color: var(--wmpage-color22);
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-letter {
    color: var(--wmpage-color8);
    margin: 10px 0 8px;
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item ul li {
    display: flex;
    align-items: center;
    color: var(--wmpage-color8);
    font-weight: var(--fontbold6);
    margin-top: 8px;
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item ul li em {
    font-weight: var(--fontbold5);
    margin-right: 8px;
    transition: all .2s linear
}

.wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-num {
    font-size: 210px;
    line-height: 1;
    color: #fff;
    position: absolute;
    bottom: 10px;
    font-weight: var(--fontbold6);
    right: 10px;
    transition: .8s;
    z-index: -1;
}

.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-num {
    color: #ffffff0a
}

.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-icon em,
.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-letter,
.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-title,
.wmpage210-page3 .wmpage210-page3-item:hover .wmpage210-page3-words,
.wmpage210-page3 .wmpage210-page3-item:hover ul li,
.wmpage210-page3 .wmpage210-page3-item:hover ul li em {
    color: #fff
}

@media screen and (max-width:1024px) {
    .wmpage210-page3 .wmpage210-page3-top {
        align-items: flex-start;
        flex-direction: column
    }

    .wmpage210-page3 .wmpage210-page3-left {
        width: 100%
    }

    .wmpage210-page3 .wmpage210-page3-right {
        width: 100%
    }

    .wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-img {
        width: 100%
    }

    .wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-info {
        width: 100%
    }
}

@media screen and (max-width:768px) {
    .wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-num {
        font-size: 120px
    }

    .wmpage210-page3 .wmpage210-page3-item {
        margin-top: 15px
    }

    .wmpage210-page3 .wmpage210-page3-item:nth-child(2) {
        display: flex;
        flex-direction: column-reverse
    }

    .wmpage210-page3 .wmpage210-page3-item .wmpage210-page3-info {
        padding: 20px
    }
}

.wmpage210-page4 {
    background: #161616
}

.wmpage210-page4 .wmpage210-page4-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--color);
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font15)
}

.wmpage210-page4 .wmpage210-page4-text em {
    margin-right: 5px
}

.wmpage210-page4 .wmpage-title {
    color: #fff;
    text-align: center
}

.wmpage210-page4 .wmpage210-page4-box {
    padding: 30px 0 0
}

.wmpage210-page4 .wmpage210-page4-slide {
    position: relative;
    width: 100%;
    overflow: hidden
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-img img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-info {
    width: 94%;
    height: 27%;
    background-color: #1f2225ad;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 3%;
    bottom: 3%;
    transition: all .4s linear
}

.wmpage210-page4 .wmpage210-page4-slide:hover .wmpage210-page4-info {
    height: 94%
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-letter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #fff;
    color: #fff;
    font-size: var(--wmpage-font15)
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-title {
    color: #fff;
    font-size: var(--wmpage-font20);
    font-weight: var(--fontbold7);
    margin: 12px 0 8px
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-desc {
    color: #fff;
    opacity: 0;
    transition: all .3s linear
}

.wmpage210-page4 .wmpage210-page4-slide:hover .wmpage210-page4-desc {
    opacity: .95
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-bottom {
    opacity: 0
}

.wmpage210-page4 .wmpage210-page4-slide:hover .wmpage210-page4-bottom {
    opacity: 1
}

.wmpage210-page4 .wmpage210-page4-slide ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #fff;
    line-height: 1;
}

.wmpage210-page4 .wmpage210-page4-slide ul li em {
    color: var(--color);
    font-size: var(--fontsize18);
    width: var(--fontsize18);
    margin-right: 10px;
    line-height: 1;
    font-weight: var(--fontbold5);
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a {
    display: inline-flex;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: 0 20px;
    min-width: 150px;
    height: 45px;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    border: 1px solid #a1a1a1;
    background-color: #fff;
    font-size: var(--wmpage-font14);
    text-transform: uppercase;
    color: #fff;
    font-weight: var(--fontbold6);
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
    margin-top: 15px
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn em {
    font-size: var(--wmpage-font15);
    transform: rotate(-30deg);
    margin-left: 5px;
    transition: all .3s linear
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a:hover em {
    transform: rotate(0)
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a:after {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: #fff;
    position: absolute;
    content: '';
    cursor: pointer;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--color);
    background-image: url(../images/wmpage210-page1-img2.webp);
    -webkit-mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);
    mask: url(https://img01.v15cdn.com/singletem/wmpage210/wmpage210-page1-img2.webp);
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    z-index: -1;
    -webkit-mask-position-x: 0;
    -webkit-mask-position-y: 0;
    transition: mask-position .7s steps(22), -webkit-mask-position .7s steps(22);
    filter: grayscale(1);
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a:hover {
    color: var(--color)
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a:hover:after {
    animation: page1 .7s steps(22) forwards
}

.wmpage210-page4 .wmpage210-page4-slide .wmpage210-page4-btn a:not(:hover):after {
    animation: page1-reverse .7s steps(22) forwards
}

.wmpage210-page4 .wmpage210-page4-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px
}

.wmpage210-page4 .wmpage210-page4-next,
.wmpage210-page4 .wmpage210-page4-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    transition: all .2s linear
}

.wmpage210-page4 .wmpage210-page4-next:hover,
.wmpage210-page4 .wmpage210-page4-prev:hover {
    background: var(--color)
}

.wmpage210-page4 .wmpage210-page4-next {
    margin-right: 15px
}

.wmpage210-page4 .wmpage210-page4-next em,
.wmpage210-page4 .wmpage210-page4-prev em {
    color: #fff
}

.wmpage210-page5 .wmpage210-page5-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--color);
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font15)
}

.wmpage210-page5 .wmpage210-page5-text em {
    margin-right: 5px
}

.wmpage210-page5 .wmpage-title {
    text-align: center
}

.wmpage210-page5 .wmpage210-page5-desc {
    color: var(--wmpage-color8);
    margin: 0 auto;
    text-align: center;
}

.wmpage210-page5 .wmpage210-page5-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px
}

.wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-left {
    width: 48%;
    position: relative;
    overflow: hidden
}

.wmpage210-page5 .wmpage210-page5-left img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-left::before {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: '';
    z-index: 1
}

.wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-left:hover::before {
    height: 250%;
    transition: all .9s linear;
    background-color: transparent
}

.wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-right {
    width: 49%
}

.wmpage210-page5 .wmpage210-page5-right li {
    background: #eee;
    padding: 20px
}

.wmpage210-page5 .wmpage210-page5-right li.active {
    background: var(--color)
}

.wmpage210-page5 .wmpage210-page5-right li:nth-child(-n+4) {
    margin-bottom: 20px
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-open {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-content {
    display: flex;
    align-items: center;
    flex: 1
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-num {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--color);
    font-weight: var(--fontbold6);
    margin-right: 15px;
    transition: all .3s linear;
    line-height: 1;
}

.wmpage210-page5 .wmpage210-page5-right li.active .wmpage210-page5-num {
    background: #000;
    color: #fff
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-title {
    flex: 1;
    font-weight: var(--fontbold6);
    font-size: var(--wmpage-font18);
    color: var(--color);
    transition: all .3s linear
}

.wmpage210-page5 .wmpage210-page5-right li.active .wmpage210-page5-title {
    color: #fff
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    transition: all .3s linear
}

.wmpage210-page5 .wmpage210-page5-right li.active .wmpage210-page5-icon {
    background: #000
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-icon::before {
    position: absolute;
    content: '';
    width: 14px;
    height: 2px;
    background: var(--color);
    transition: all .3s linear
}

.wmpage210-page5 .wmpage210-page5-right li.active .wmpage210-page5-icon::before {
    background: #fff
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-icon::after {
    position: absolute;
    content: '';
    height: 14px;
    width: 2px;
    background: var(--color);
    transition: all .3s linear;
    opacity: 1
}

.wmpage210-page5 .wmpage210-page5-right li.active .wmpage210-page5-icon::after {
    opacity: 0
}

.wmpage210-page5 .wmpage210-page5-right .wmpage210-page5-close {
    color: #fff;
    opacity: .8;
    padding: 0 55px;
    display: none
}

@media screen and (max-width:1024px) {
    .wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-left {
        width: 100%;
        margin-bottom: 30px
    }

    .wmpage210-page5 .wmpage210-page5-box .wmpage210-page5-right {
        width: 100%
    }
}

@media screen and (max-width:500px) {
    .wmpage210-page5 .wmpage210-page5-right li {
        padding: 10px
    }
}