/* section pc 2 */
.hw-xmage25 .xmage25-sec2 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8.33333333vw 0;
    background-color: #fff;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle {
    position: relative;
    width: 14.58333333vw;
    transform: translate3d(0,3.125vw,0) scale(1.4);
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle.active {
    transform: translate3d(0,3.125vw,0) scale(1.2);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle.active1 {
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle::after,
.hw-xmage25 .xmage25-sec2 .exbrandtitle::before {
    content: "";
    position: absolute;
    width: 0.88541666vw;
    height: 1.875vw;
    transition: opacity 0.6s linear;
    box-sizing: border-box;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle.active1::before,
.hw-xmage25 .xmage25-sec2 .exbrandtitle.active1::after {
    opacity: 0;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle::before {
    top: 0;
    right: calc(100% + 1.25vw);
    border-top: 0.36458333vw solid #c8102e;
    border-left: 0.36458333vw solid #c8102e;
}

.hw-xmage25 .xmage25-sec2 .exbrandtitle::after {
    bottom: 0;
    left: calc(100% + 1.25vw);
    border-bottom: 0.36458333vw solid #c8102e;
    border-right: 0.36458333vw solid #c8102e;
}

.hw-xmage25 .xmage25-sec2 .exbrantxtcon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-xmage25 .xmage25-sec2 .exbranmat {
    width: 52.79166666vw;
    margin: 1.66666666vw 0;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    transform: translateY(6.25vw);
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec2 .exbrandes {
    width: 51.833333333333vw;
    margin: 0 0 3.33333333vw 0;
    color: #000;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    transform: translateY(6.25vw);
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
} 

.hw-xmage25 .xmage25-sec2 .exbranvideo {
    position: relative;
    overflow: hidden;
    width: 67.5vw;
    height: 37.96875vw;
    transform: translateY(10.416666666vw) scale(1.485);
    transform-origin: top center;
    opacity: 0;
}

.hw-xmage25 .xmage25-sec2 .exbranvideo.active {
    opacity: 1;
    transform: translateY(0) scale(1.485);
}

.hw-xmage25 .xmage25-sec2 .exbrandes.active,
.hw-xmage25 .xmage25-sec2 .exbranmat.active  {
    opacity: 1;
    transform: translateY(0); 
}

.hw-xmage25 .xmage25-sec2 .exbranicon {
    display: flex;
    position: absolute;
    right: 2.1875vw;
    bottom: 2.1875vw;
    width: 3.0208333333vw;
    height: 3.0208333333vw;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.hw-xmage25 .xmage25-sec2 .exbranicon svg {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec2 .exbranicon #traicon {
    opacity: 0;
    transition: 0.8s ease;
}

.hw-xmage25 .xmage25-sec2 .exbranicon #whitrain {
    transition: 0.8s ease;
}

.hw-xmage25 .xmage25-sec2 #redcircle {
    stroke-dasharray: 170px;
    stroke-dashoffset: 170px;
    transition: 0.8s ease;
}

@media (any-hover: hover) {
    .hw-xmage25 .xmage25-sec2 .exbranicon:hover #redcircle {
        stroke-dashoffset: 0;
    }
    
    .hw-xmage25 .xmage25-sec2 .exbranicon:hover #traicon {
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec2 .exbranicon:hover #whitrain {
        opacity: 0;
    }
}

.hw-xmage25 .xmage25-sec2 .redreplbtn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.hw-xmage25 .xmage25-sec2 .whitereplbtn {
    width: 100%;
    height: 100%;
}

/* section 2 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec2 {
        padding: 22.22222222vw 0;
    }

    .hw-xmage25 .xmage25-sec2 .exbrandtitle {
        width: 38.88888888vw;
    }

    .hw-xmage25 .xmage25-sec2 .exbranmat {
        width: 80.55555555vw;
        margin: 5.55555555vw 0;
        transform: translateY(16.666666666vw);
        font-size: 6.66666666vw;
    }

    .hw-xmage25 .xmage25-sec2 .exbrandes {
        width: 82.22222222vw;
        margin: 0 0 8.88888888vw 0;
        transform: translateY(16.666666666vw);
        font-size: 3.33333333vw;
        text-align: left;
    }

    .hw-xmage25 .xmage25-sec2 .exbranvideo {
        width: 82.22222222vw;
        height: 46.11111111vw;
        transform: translateY(20.77777777vw) scale(1.216);
    }

    .hw-xmage25 .xmage25-sec2 .exbranicon {
        width: 11.11111111vw;
        height: 11.11111111vw;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }


    .hw-xmage25 .xmage25-sec2 .exbrandtitle::before, 
    .hw-xmage25 .xmage25-sec2 .exbrandtitle::after {
        width: 2.3611111111vw;
        height: 5vw;
        box-sizing: border-box;
    }

    .hw-xmage25 .xmage25-sec2 .exbrandtitle::before {
        right: calc(100% + 3.3333333333vw);
        border-top: 0.83333333vw solid #c8102e;
        border-left: 0.83333333vw solid #c8102e;
    }

    .hw-xmage25 .xmage25-sec2 .exbrandtitle::after {
        left: calc(100% + 3.3333333333vw);
        border-bottom: 0.83333333vw solid #c8102e;
        border-right: 0.83333333vw solid #c8102e;
    }

    .hw-xmage25 .xmage25-sec2 .exbrandtitle {
        transform: translate3d(0, 8.3333333333vw, 0) scale(1.4);
    }
    
    .hw-xmage25 .xmage25-sec2 .exbrandtitle.active {
        transform: translate3d(0, 8.3333333333vw, 0) scale(1.2);
    }
    
    .hw-xmage25 .xmage25-sec2 .exbrandtitle.active1 {
        transform: translate3d(0,0,0) scale(1);
    }
}

/* section 3 pc */
.hw-xmage25 .xmage25-sec3 {
    position: relative;
    width: 100%;
    margin: -1px 0 10.41666666vw 0;
    background-color: #000;
    z-index: 3;
} 

.hw-xmage25 .xmage25-sec3::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background-color: #030f18;
}

.hw-xmage25 .xmage25-sec3 .compevideo {
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: #fff;
}

.hw-xmage25 .xmage25-sec3 .gallwhite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-xmage25 .xmage25-sec3 .compevideo .povideo {
    height: 100%;
    opacity: 0;
}

.hw-xmage25 .xmage25-sec3 .compevideo .povideo video {
    height: 100%;
    object-fit: cover;
}

.hw-xmage25 .xmage25-sec3 .compespace {
    height: 50vh;
}

.hw-xmage25 .xmage25-sec3 .competivtxtcon {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%,-50%);
    z-index: 9;
}

.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivmat,
.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivdes,
.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivplay {
    transform: translateY(70vh);
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
}

.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivmat.active {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivdes.active {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec3 .competivtxtcon .competivplay.active {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec3 .comtrigger {
    position: relative;
    top: 40%;
}

.hw-xmage25 .xmage25-sec3 .compeshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    transition: opacity 0.8s linear;
    background-color: rgba(3, 15, 24, 0.9);
    opacity: 0;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec3 .compeshadow.active {
    opacity: 1;
}

.hw-xmage25 .xmage25-sec3 .competivmat {
    display: flex;
    position: relative;
}

.hw-xmage25 .xmage25-sec3 .competivmat span {
    color: #fff;
    font-size: 3.33333333vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-xmage25 .xmage25-sec3 .competivmat img {
    position: absolute;
    width: 0.88541666vw;
    z-index: 3;
}

.hw-xmage25 .xmage25-sec3 .competivmat .comlicon {
    right: calc(100% + 1.25vw);
    top: 0.41666666vw;
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-xmage25 .xmage25-sec3 .competivmat .comricon {
    bottom: 0.41666666vw;
    left: calc(100% + 1.25vw);
}

.hw-xmage25 .xmage25-sec3 .competivdes {
    width: 51.91666666vw;
    margin: 3.33333333vw 0 6.25vw 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.hw-xmage25 .xmage25-sec3 .competivplay {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.hw-xmage25 .xmage25-sec3 .competibtncon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    width: 1.66666666vw;
    height: 1.66666666vw;
    margin: 0 0 0 0.41666666vw;
    border-radius: 50%;
}

.hw-xmage25 .xmage25-sec3 .comwhitebtn,
.hw-xmage25 .xmage25-sec3 .comredbtn {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec3 #redtrian {
    opacity: 0;
    transition: 0.8s ease;
}

.hw-xmage25 .xmage25-sec3 #whitrian {
    transition: 0.8s ease;
} 

.hw-xmage25 .xmage25-sec3 #redcircle {
    transition: 0.8s ease;
    stroke-dasharray: 95px;
    stroke-dashoffset: 95px;
}

.hw-xmage25 .xmage25-sec3 .comredbtn {
    position: absolute;
}

.hw-xmage25 .xmage25-sec3 svg {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec3 .competivplay span {
    margin: 0 0 0 4px;
    color: #fff;
    font-size: 1.04166666vw;
    font-weight: 400;
    line-height: 1.6;
}

@media (any-hover: hover) {
    .hw-xmage25 .xmage25-sec3 .competivplay:hover #redtrian {
        opacity: 1;
    }
    
    .hw-xmage25 .xmage25-sec3 .competivplay:hover #whitrian {
        opacity: 0;
    }

    .hw-xmage25 .xmage25-sec3 .competivplay:hover #redcircle {
        stroke-dashoffset: 0;
    }
}

/* section 3 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec3 {
        margin: 0 0 13.05555555vw 0;
    }

    .hw-xmage25 .xmage25-sec3 .competivmat span {
        font-size: 8.88888888vw;
    }

    .hw-xmage25 .xmage25-sec3 .competivdes {
        width: 82.22222222vw;
        margin: 8.88888888vw 0 13.88888888vw 0;
        font-size: 3.33333333vw;
        text-align: left;
    }

    .hw-xmage25 .xmage25-sec3 .competivplay span {
        font-size: 3.88888888vw;
    }

    .hw-xmage25 .xmage25-sec3 .competivmat img {
        width: 2.36111111vw;
    }

    .hw-xmage25 .xmage25-sec3 .competivmat .comlicon {
        width: 2.36111111vw;
        top: 1.38888888vw;
        right: calc(100% + 3.33333333vw);
    }

    .hw-xmage25 .xmage25-sec3 .competivmat .comricon {
        bottom: 1.38888888vw;
        left: calc(100% + 3.33333333vw);
    }

    .hw-xmage25 .xmage25-sec3 .competibtncon {
        width: 6.66666666vw;
        height: 6.66666666vw;
        margin: 0 0 0 2.22222222vw;
    }

    .hw-xmage25 .xmage25-sec3 .competivtxtcon.active {
        top: calc(50% + 3.472222222vw);
    }
}



/* section 4 pc */
.hw-xmage25 .xmage25-sec4 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 0 12.5vw 0;
    opacity: 0;
    transform: translateY(6.25vw);
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4.active {
    opacity: 1;
    transform: translateY(0px);
}

.hw-xmage25 .xmage25-sec4 .comtimemat {
    margin: 0 0 7.08333333vw 0;
    color: #fff;
    color: transparent;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(180deg,#fce5cb 0%,#c07e4a 100%);
}

.hw-xmage25 .xmage25-sec4 .comthstage {
    display: flex;
    align-items: flex-end;
    margin: 0 0 0 17.65625vw;
}

.hw-xmage25 .xmage25-sec4 .comthstage li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 6.77083333333vw;
}

.hw-xmage25 .xmage25-sec4 .comthstage .wholetxt {
    transition: transform 0.6s linear;
}

.hw-xmage25 .xmage25-sec4 .comthstage li.active .wholetxt {
    transform: translateY(-1.5625vw);
}

.hw-xmage25 .xmage25-sec4 .comthstage li:not(:last-child) {
    margin-right: 21.66666666vw;
}

.hw-xmage25 .xmage25-sec4 .septxt.active {
    transform: translateY(-1.5625vw);
}

.hw-xmage25 .xmage25-sec4 .comsmon {
    margin: 0 0 5.625vw 0;
    color: rgba(253, 231, 210, 0.4);
    font-size: 1.6666666666vw;
    font-weight: 400;
    line-height: 1.6;
    transition: 1s linear;
    text-align: center;
    white-space: nowrap;
}

.hw-xmage25 .xmage25-sec4 .active .comsmon {
    color: rgba(253, 231, 210, 1);
}

.hw-xmage25 .xmage25-sec4 .comsim {
    position: relative;
    width: 5.625vw;
    height: 5.625vw;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4 .active .comsim {
    transform: translateY(-0.5208333333vw);
}

.hw-xmage25 .xmage25-sec4 .comiback {
    opacity: 0.1;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4 .active .comiback {
    opacity: 0.3;
    transform: scale(1.111);
}

.hw-xmage25 .xmage25-sec4 .comisphoto,
.hw-xmage25 .xmage25-sec4 .comifphoto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.6458333333vw;
}

.hw-xmage25 .xmage25-sec4 .comisphoto {
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4 .active .comisphoto {
    opacity: 1;
}

.hw-xmage25 .xmage25-sec4 .comifphoto {
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
    z-index: 99;
}

.hw-xmage25 .xmage25-sec4 .active .comifphoto {
    opacity: 0;
}

.hw-xmage25 .xmage25-sec4 .comsim svg {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec4 .comsdes {
    width: 8.0729166666vw;
    margin: 1.04166666vw 0 0 0;
    color: #fff;
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.hw-xmage25 .xmage25-sec4 .active .comsdes {
    transform: translateY(-10px);
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4 .shuline {
    display: flex;
    transform: translateX(-2.60416666vw);
}

.hw-xmage25 .xmage25-sec4 .shuline li:not(:last-child) {
    margin: 0 0.52083333vw 0 0; 
}

.hw-xmage25 .xmage25-sec4 .shuline li {
    width: 0.15625vw;
    height: 0.9375vw;
    background-color: #fff;
    opacity: 0.1;
}

.hw-xmage25 .xmage25-sec4 .shuline li:nth-child(6n) {
    background-color: #fff;
    opacity: 0.4;
}

.hw-xmage25 .xmage25-sec4 .comsvantime {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hw-xmage25 .xmage25-sec4 .comssvani {
    position: absolute;
    top: 4.1125vw;
    align-self: flex-start;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec4 .canlinecon {
    position: relative;
    width: 100%;
    height: 2.60416666vw;
    margin: -0.46875vw 0 0 -0.52083333333vw;
}

.hw-xmage25 .xmage25-sec4 .finalimg {
    position: relative;
    width: 100vw;
    height: 2.0104166666vw;
}

.hw-xmage25 .xmage25-sec4 .finalimg>div {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec4 .finalimg svg {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec4 .finalimg .svg2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 1s ease;
    opacity: 1;
}

.hw-xmage25 .xmage25-sec4 .finalimg .svg3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    transition: 1s ease;
    opacity: 0;
}

.hw-xmage25 .xmage25-sec4 .finalimg.active .svg2 {
    opacity: 0;
}

.hw-xmage25 .xmage25-sec4 .finalimg.active .svg1 {
    opacity: 0;
}

.hw-xmage25 .xmage25-sec4 .finalimg.active .svg3 {
    opacity: 1;
}

.hw-xmage25 .xmage25-sec4 .finalimg .svg2 path {
    stroke-dasharray: 1930px;
    stroke-dashoffset: 1924px;
}

.hw-xmage25 .xmage25-sec4 .finalimg path {
    will-change: d, transform;
}

.hw-xmage25 .xmage25-sec4 .quline svg {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec4 .quline svg:nth-child(1) {
    position: relative;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec4 .quline svg:nth-child(1) path {
    stroke-dasharray: 120%;
    stroke-dashoffset: 120%;
}

.hw-xmage25 .xmage25-sec4 .quline svg:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.hw-xmage25 .xmage25-sec4 .canshadowim {
    position: absolute;
    left: 15.247917vw;
    top: -5.604167vw;
    width: 14.895833333vw;
    transform: translateY(0.5208333333vw);
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec4 .canshadowim.active {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec4 #canline1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


/* section 4 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec4 {
        margin: 0 0 26.94444444vw 0;
    }

    .hw-xmage25 .xmage25-sec4 .comtimemat {
        margin: 0 0 12.7777777777vw 0;
        font-size: 6.66666666vw;
    }

    .hw-xmage25 .xmage25-sec4 .comsdes {
        width: 20.83333333333333vw;
        margin: 3.33333333vw 0 0 0;
        font-size: 3.3333333333vw;
    }

    .hw-xmage25 .xmage25-sec4 .comsdays {
        font-size: 11.11111111vw;
    }

    .hw-xmage25 .xmage25-sec4 .comsim {
        width: 15vw;
        height: 15vw;
    }

    .hw-xmage25 .xmage25-sec4 .comsmon {
        margin: 0 0 15vw 0;
        font-size: 4.444444444444444vw;
    }

    .hw-xmage25 .xmage25-sec4 .comthstage {
        margin: 0 0 0 8.3333333333vw;
    }

    .hw-xmage25 .xmage25-sec4 .comthstage li:not(:last-child) {
        margin: 0 14.44444444vw 0 0;
    }

    .hw-xmage25 .xmage25-sec4 .shuline li {
        width: 0.41666666vw;
        height: 2.5vw;
    }

    .hw-xmage25 .xmage25-sec4 .comssvani {
        top: 11.3125vw;
    }

    .hw-xmage25 .xmage25-sec4 .shuline li:not(:last-child) {
        margin: 0 1.38888888vw 0 0;
    }

    .hw-xmage25 .xmage25-sec4 .canlinecon {
        width: 100vw;
        height: 6.94444444vw;
        margin: -0.9vw 0 0 -40.555555555vw;
    }

    .hw-xmage25 .xmage25-sec4 .shuline {
        transform: translateX(-2.77777777vw);
    }

    .hw-xmage25 .xmage25-sec4 .finalimg {
        width: 266.666666666vw;
        height: 5.361111111111111vw;
    }

    .hw-xmage25 .xmage25-sec4 .canshadowim {
        width: 33.88888888vw;
        left: 3.47222222vw;
        top: -11.25vw;
    }

    .hw-xmage25 .xmage25-sec4 .comisphoto,
    .hw-xmage25 .xmage25-sec4 .comifphoto  {
        width: 9.7222222222vw;
        height: 9.7222222222vw;
    }

    .hw-xmage25 .xmage25-sec4 .comthstage li {
        width: 17.7777777777vw;
    }

    .hw-xmage25 .xmage25-sec4 .comthstage li.active .wholetxt {
        transform: translateY(-4.1666666666vw);
    }

    .hw-xmage25 .xmage25-sec4 .active .comsim {
        transform: translateY(-1.3888888888vw);
    }

    .hw-xmage25 .xmage25-sec4 .active .comsdes {
        transform: translateY(-1.3888888888vw);
    }
}



/* section 5 pc */
.hw-xmage25 .xmage25-sec5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: 0 0 20.625vw 0;
}

.hw-xmage25 .xmage25-sec5 .comcatemat {
    position: relative;
    width: 26.04166666vw;
    padding: 0 0 2px 0;
    margin: 0 auto 3.48958333vw;
    color: #fff;
    color: transparent;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(180deg,#fce5cb 0%,#c07e4a 100%);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper {
    width: 102.08333333vw;
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide {
    opacity: 0;
    transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.26, 0.67, 0.47, 1.21);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="0"] {
    transform: translateY(15.625vw);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="1"] {
    transform: translate(-20.20833333vw, 12.23958333vw) rotate(-10deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="2"] {
    transform: translate(-43.33333333vw, 7.8125vw) rotate(-25deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="3"] {
    transform: translate(-72.29166666vw, -2.60416666vw) rotate(-40deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="7"] {
    transform: translate(20.20833333vw, 12.23958333vw) rotate(10deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="6"] {
    transform: translate(43.33333333vw, 7.8125vw) rotate(25deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="5"] {
    transform: translate(72.29166666vw, -2.60416666vw) rotate(40deg);
}

.hw-xmage25 .xmage25-sec5 .comcateswiper.active .swiper-slide {
    opacity: 1;
    transform: translate(0,0) rotate(0deg);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper {
    display: flex;
    width: 29.5vw;
    margin: 7.29166666vw auto 3.33333333vw;
    text-align: center;
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li.active {
    opacity: 1;
    z-index: 9;
}

.hw-xmage25 .xmage25-sec5 .comsmalt {
    transform: translateY(3.125vw);
    transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
}

.hw-xmage25 .xmage25-sec5 .comsmalt a {
    color: #fff;
    font-size: 1.66666666vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-xmage25 .xmage25-sec5.active .comsmalt {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec5 .comsmald {
    margin: 0.8333333333333333vw 0 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;
    transform: translateY(5.20833333vw);
    transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
}

.hw-xmage25 .xmage25-sec5.active .comsmald {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(2) {
    transform: translateX(-100%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(3) {
    transform: translateX(-200%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(4) {
    transform: translateX(-300%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(5) {
    transform: translateX(-400%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(6) {
    transform: translateX(-500%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(7) {
    transform: translateX(-600%);
}

.hw-xmage25 .xmage25-sec5 .comatxtswiper li:nth-child(8) {
    transform: translateX(-700%);
}

.hw-xmage25 .xmage25-sec5 .comnagation {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(7.8125vw);
    transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec5.active .comnagation {
    opacity: 1;
    transform: translateY(0);
}

.hw-xmage25 .xmage25-sec5 .comnalarrow,
.hw-xmage25 .xmage25-sec5 .comnararrow {
    position: relative;
    display: flex;
    align-items: center;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    cursor: pointer;
} 

.hw-xmage25 .xmage25-sec5 .whitebtn,
.hw-xmage25 .xmage25-sec5 .redbtn {
    width: 100%;
    height: 100%;
}

.hw-xmage25 .xmage25-sec5 .redbtn {
    position: absolute;
    left: 0;
    top: 0;
}

.hw-xmage25 .xmage25-sec5 #redtran {
    opacity: 0;
    transition: 0.8s ease;
}

.hw-xmage25 .xmage25-sec5 #whitran {
    transition: 0.8s ease;
}

.hw-xmage25 .xmage25-sec5 #redcircle {
    stroke-dasharray: 145px;
    stroke-dashoffset: 145px;
    transition: 0.8s ease;
}

@media (any-hover: hover) {
    .hw-xmage25 .xmage25-sec5 .comnalarrow:hover #redtran,
    .hw-xmage25 .xmage25-sec5 .comnararrow:hover #redtran {
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec5 .comnalarrow:hover #whitran,
    .hw-xmage25 .xmage25-sec5 .comnararrow:hover #whitran {
        opacity: 0;
    }

    .hw-xmage25 .xmage25-sec5 .comnalarrow:hover #redcircle,
    .hw-xmage25 .xmage25-sec5 .comnararrow:hover #redcircle {
        stroke-dashoffset: 0;
    }
}

.hw-xmage25 .xmage25-sec5 .whitebtn svg,
.hw-xmage25 .xmage25-sec5 .redbtn svg {
    width: 100%;
    height: 100%;
}



.hw-xmage25 .xmage25-sec5 .comnalarrow {
    transform: translate3d(0,0,0) rotate(180deg);
}

.hw-xmage25 .xmage25-sec5 .swiper-slide .inner {
    overflow: hidden;
    border-radius: 0.83333333vw;
}

.hw-xmage25 .xmage25-sec5 .comnumchan {
    display: flex;
    align-items: center;
    margin: 0 0.83333333vw;
}

.hw-xmage25 .xmage25-sec5 .inntxtchan {
    display: flex;
}

.hw-xmage25 .xmage25-sec5 .comnumchan span {
    color: #fff;
    font-size: 0.833333333333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span.active {
    opacity: 1;
    z-index: 99;
}

.hw-xmage25 .xmage25-sec5 .inntxtchan {
    position: relative;
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(2) {
    transform: translateX(-100%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(3) {
    transform: translateX(-200%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(4) {
    transform: translateX(-300%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(5) {
    transform: translateX(-400%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(6) {
    transform: translateX(-500%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(7) {
    transform: translateX(-600%);
}

.hw-xmage25 .xmage25-sec5 .inntxtchan span:nth-child(8) {
    transform: translateX(-700%);
}

/* section 5 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec5 {
        padding: 0 0 37.08333333vw 0;
    }

    .hw-xmage25 .xmage25-sec5 .comcateswiper {
        width: 116.66666666vw;
    }

    .hw-xmage25 .xmage25-sec5 .swiper-slide .inner {
        border-radius: 2.22222222vw;
    }

    .hw-xmage25 .xmage25-sec5 .comcatemat {
        width: 66.66666666vw;
        margin: 0 0 8.33333333vw 0;
        font-size: 6.66666666vw;
    }

    .hw-xmage25 .xmage25-sec5 .comatxtswiper {
        width: 82.555556vw;
        margin: 16.66666666vw 0 8.88888888vw 0;
    }

    .hw-xmage25 .xmage25-sec5 .comsmalt {
        transform: translateY(8.333333333333vw);
    }

    .hw-xmage25 .xmage25-sec5 .comsmalt a {
        font-size: 4.44444444vw;
    }

    .hw-xmage25 .xmage25-sec5 .comsmald {
        margin: 3.33333333vw 0 0 0;
        font-size: 3.33333333vw;
        transform: translateY(13.8888888888vw);
    }

    .hw-xmage25 .xmage25-sec5 .comnagation {
        transform: translateY(19.44444444444vw);
    }

    .hw-xmage25 .xmage25-sec5 .comnumchan span {
        font-size: 3.33333333vw;
    }

    .hw-xmage25 .xmage25-sec5 .comnalarrow, 
    .hw-xmage25 .xmage25-sec5 .comnararrow {
        width: 11.11111111vw;
        height: 11.11111111vw;
    }

    .hw-xmage25 .xmage25-sec5 .comnumchan {
        margin: 0 3.33333333vw;
    }
    
    .hw-xmage25 .xmage25-sec5 .comnalarrow img, 
    .hw-xmage25 .xmage25-sec5 .comnararrow img {
        width: 4.72222222vw;
        margin: 0 0 0 2.08333333vw;
    }

    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="0"] {
        transform: translateY(30.625vw);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="1"] {
        transform: translate(-20.20833333vw, 27.23958333vw) rotate(-10deg);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="2"] {
        transform: translate(0,0) rotate(0);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="3"] {
        transform: translate(0,0) rotate(0);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="7"] {
        transform: translate(20.20833333vw, 27.23958333vw) rotate(10deg);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="6"] {
        transform: translate(0,0) rotate(0);
    }
    
    .hw-xmage25 .xmage25-sec5 .comcateswiper .swiper-slide[data-swiper-slide-index="5"] {
        transform: translate(0,0) rotate(0);
    }

    .hw-xmage25 .xmage25-sec5 .comcateswiper.active .swiper-slide {
        transform: translate(0,0) rotate(0);
    }

}


/* section 6 pc */
.hw-xmage25 .xmage25-sec6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 13.59375vw 0;
} 

.hw-xmage25 .xmage25-sec6 .commentmat {
    position: relative;
    width: 26.04166666vw;
    margin: 0 auto 3.48958333vw;
    color: #fff;
    color: transparent;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(180deg, #fce5cb 0%, #c07e4a 100%);
}

.hw-xmage25 .xmage25-sec6 .swiper-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 67.5vw;
}

.hw-xmage25 .xmage25-sec6 .swiper-slide {
    display: flex;
    width: auto;
}

.hw-xmage25 .xmage25-sec6 .swiper-slide .cominner:not(:last-child) {
    margin: 0 1.25vw 0 0;
}

.hw-xmage25 .xmage25-sec6 .swiper-slide:nth-child(1) {
    margin: 0 1.25vw 3.3333333333vw 0;
}

.hw-xmage25 .xmage25-sec6 .swiper-slide:nth-child(2) .cominner:nth-child(2) {
    margin: 0;
}

.hw-xmage25 .xmage25-sec6 .cominner {
    position: relative;
    overflow: hidden;
    width: 12.5vw;
    border-radius: 0.83333333vw;
    transform: translate3d(0,5.208333333333333vw,0) rotate(0deg);
    transition: opacity 1.5s linear, transform 1.5s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
}

.hw-xmage25 .xmage25-sec6 .cominner2 {
    transition-delay: 0.1s;
}

.hw-xmage25 .xmage25-sec6 .cominner3 {
    transition-delay: 0.2s;
}

.hw-xmage25 .xmage25-sec6 .cominner4 {
    transition-delay: 0.3s;
}

.hw-xmage25 .xmage25-sec6 .cominner5 {
    transition-delay: 0.4s;
}

.hw-xmage25 .xmage25-sec6 .cominner6 {
    transition-delay: 0.5s;
}

.hw-xmage25 .xmage25-sec6 .cominner7 {
    transition-delay: 0.6s;
}

.hw-xmage25 .xmage25-sec6 .cominner8 {
    transition-delay: 0.7s;
}

.hw-xmage25 .xmage25-sec6 .cominner9 {
    transition-delay: 0.8s;
}

.hw-xmage25 .xmage25-sec6.active .cominner {
    transform: translate3d(0,0,0) rotate(0deg);
    opacity: 1;     
} 

.hw-xmage25 .xmage25-sec6 .cominner img {
    border-radius: 0.83333333vw;
}

.hw-xmage25 .xmage25-sec6 .comimtxt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec6 .comname {
    margin: 1.25vw 0 0.57291666666vw 0;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.25;
}

.hw-xmage25 .xmage25-sec6 .comdesc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.83333333vw;
    font-weight: 400;
    line-height: 1.6;
}

.hw-xmage25 .xmage25-sec6 .cominnim {
    overflow: hidden;
    position: relative;
    border-radius: 0.83333333333vw;
}

.hw-xmage25 .xmage25-sec6 .cominnim>picture {
    overflow: hidden;
    border-radius: 0.88541666666vw;
}

.hw-xmage25 .xmage25-sec6 .comshadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;   
    background-color: rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s linear, transform 0.6s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec6 .combotoshadow {
    position: absolute;
    left: 50%;
    bottom: -2px;
    opacity: 90%;
    width: 110%;
    height: 8.4375vw;
    transform: translateX(-50%);
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,#000000 100%);
    z-index: 10;
}

/* section 6 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec6 {
        overflow: hidden;
        align-items: flex-start;
        margin: 0 0 27.7777777777vw 0;
    }

    .hw-xmage25 .xmage25-sec6 .commentmat {
        width: 55.55555555vw;
        margin: 0 auto 8.05555555vw;
        font-size: 6.66666666vw;
    }

    .hw-xmage25 .xmage25-sec6 .swiper-wrapper {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: auto;
    }

    .hw-xmage25 .xmage25-sec6 .ommenterswiper {
        width: 91.11111111111vw;
        margin: 0 0 0 8.88888888vw;
    }

    .hw-xmage25 .xmage25-sec6 .swiper-slide {
        flex-direction: column;
        width: 91.11111111111vw;
    }

    .hw-xmage25 .xmage25-sec6 .swiper-slide:nth-child(1) {
        margin: 0;
    }

    .hw-xmage25 .xmage25-sec6 .cominner {
        display: flex;
        width: auto;
    }

    .hw-xmage25 .xmage25-sec6 .cominnim {
        width: 29.16666666vw;
        border-radius: 2.22222222vw;
    }

    .hw-xmage25 .xmage25-sec6 .cominnim>picture {
        border-radius: 2.5vw;
    }

    .hw-xmage25 .xmage25-sec6 .comimtxt {
        position: relative;
        bottom: 0;
        width: auto;
        height: auto;
        margin: 5.55555555vw 0 0 5.55555555vw;
        align-items: flex-start;
        justify-content: flex-start;
        background: none;
        text-align: left;
    }

    .hw-xmage25 .xmage25-sec6 .comname {
        font-size: 4.44444444vw;
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec6 .comdesc {
        width: 48.611111111vw;
        margin: 3.33333333vw 0 0 0;
        font-size: 3.33333333vw;
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec6 .swiper-slide .cominner:not(:last-child) {
        margin: 0 0 3.33333333vw 0;
    }

    .hw-xmage25 .xmage25-sec6 .commentnav {
        display: flex;
        align-items: center;
        align-self: center;
        margin: 5.55555555vw 0 0 0;
    }

    .hw-xmage25 .xmage25-sec6 .commentnav li {
        overflow: hidden;
        width: 1.38888888vw;
        height: 1.38888888vw;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2.77777777vw;
        transition: 0.6s ease;
        will-change: transform, width;
    }

    .hw-xmage25 .xmage25-sec6 .commentnav li:not(:last-child) {
        margin: 0 1.38888888vw 0 0;
    }

    .hw-xmage25 .xmage25-sec6 .commentnav li.active {
        width: 5.55555555vw;
        background: #c8102e;
    }

    .hw-xmage25 .xmage25-sec6 .swiper-slide:nth-child(2) .cominner:nth-child(2) {
        margin: 0 0 3.3333333333vw 0;
    }

    .hw-xmage25 .xmage25-sec6 .cominner {
        opacity: 1;
        transform: translate3d(0,0,0) rotate(0deg);
    }
}



.hw-xmage25 .xmage25-sec7 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-xmage25 .xmage25-sec7 .comawardmat {
    position: relative;
    width: 26.04166666vw;
    color: #fff;
    color: transparent;
    font-size: 2.5vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(180deg, #fce5cb 0%, #c07e4a 100%);
    transform: translateY(6.25vw);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec7 .comawardsut {
    position: relative;
    margin: 9.16666666vw auto 5.20833333vw;
    transform: translateY(10.41666666vw);
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
    z-index: 8;
}

.hw-xmage25 .xmage25-sec7 .comawardes {
    position: relative;
    width: 30.333333333vw;
    color: #fff;
    font-size: 1.14583333vw;
    font-weight: 400;
    line-height: 1.6;   
    text-align: center;
    transform: translateY(12.5vw);
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
    z-index: 1;
}

.hw-xmage25 .xmage25-sec7 .comawardnote {
    position: relative;
    margin: 2.0833333333vw 0 0 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;  
    transform: translateY(12.5vw);
    transition: opacity 0.8s linear, transform 0.8s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
    z-index: 1;
}

@media screen and (min-width: 1921px) {
    .hw-xmage25 .xmage25-sec7 .comawardnote {
        font-size: 0.625vw;
    }
}

.hw-xmage25 .xmage25-sec7.active .comawardnote,
.hw-xmage25 .xmage25-sec7.active .comawardes,
.hw-xmage25 .xmage25-sec7.active .comawardsut,
.hw-xmage25 .xmage25-sec7.active .comawardmat {
    transform: translateY(0);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec7 .comawardba {
    position: relative;
    width: 100%;
    margin: -46.45vw 0 0 0;
    z-index: 0;
    transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.26,0.67,0.48,0.91);
    opacity: 0;
    transform: translateY(10px);
}

.hw-xmage25 .xmage25-sec7 .comawardba.active {
    opacity: 1;
    transform: translateY(0);
}

.hw-xmage25 .xmage25-sec7 .comawardsut {
    position: relative;
}

.hw-xmage25 .xmage25-sec7 span {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 6.92708333vw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(180deg,#fbf7e7 13%,#cea37b 53.06%,#7e604f 63.48%,#6b524a 97%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    z-index: 3;
}

.hw-xmage25 .xmage25-sec7 .purecolor {
    position: absolute;
    left: 0;
    top: 1px;
    background-image: linear-gradient(180deg,#FFDEBC 13%,#FFDEBC 53.06%,#FFDEBC 63.48%,#FFDEBC 97%);
    color: #FFDEBC;
    transition: opacity 0.8s linear;
    opacity: 0;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec7 .purecolor.active {
    opacity: 1;
}

/* section 7 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec7 {
        padding: 0 0 16.38888888888889vw 0;
    }

    .hw-xmage25 .xmage25-sec7 .comawardmat {
        width: 55.55555555vw;
        font-size: 6.66666666vw;
    }

    .hw-xmage25 .xmage25-sec7 span {
        font-size: 15.27777777vw;
    }

    .hw-xmage25 .xmage25-sec7 .comawardes {
        width: 80.333333333vw;
        font-size: 3.33333333vw;
        text-align: center;
    }

    .hw-xmage25 .xmage25-sec7 .comawardsut {
        margin: 17.91666666vw 0 11.80555555vw 0;
    }

    .hw-xmage25 .xmage25-sec7 .comawardnote {
        width: 55.555555555vw;
        margin: 5.555555555555556vw 0 0 0;
        font-size: 3.33333333333vw;
        text-align: center;
    }

    .hw-xmage25 .xmage25-sec7 .comawardba {
        margin: -96.7vw 0 0 0;
    }
}


/* section 8 pc */
.hw-xmage25 .xmage25-sec8 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.hw-xmage25 .xmage25-sec8 .officalmat {
    position: relative;
    margin: 8.33333333vw auto 3.64583333vw;
    color: #000;
    font-size: 3.33333333vw;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.hw-xmage25 .xmage25-sec8 .officalmat::after {
    content: "";
    position: absolute;
    left: -2.13541666vw;
    top: 0.57291666vw;
    width: 0.88541666vw;
    height: 1.875vw;
    border-top: 0.36458333vw solid #000;
    border-left: 0.36458333vw solid #000;
    box-sizing: border-box;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec8 .officalmat::before {
    content: "";
    position: absolute;
    right: -2.13541666vw;
    bottom: 0.57291666vw;
    width: 0.88541666vw;
    height: 1.875vw;
    border-bottom: 0.36458333vw solid #000;
    border-right: 0.36458333vw solid #000;
    box-sizing: border-box;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec8 .officalwalk {
    display: flex;
    align-self: flex-start;
    margin-left: -2.60416666vw;
}

.hw-xmage25 .xmage25-sec8.active .officalwalk {
    animation: walkmove 40s linear infinite 1.5s;
}

.hw-xmage25 .xmage25-sec8 .officalcontent {
    flex-shrink: 0;
    display: flex;
    align-self: flex-start;
    width: 105.9375vw;
}

.hw-xmage25 .xmage25-sec8 .officalcontent:nth-child(1) {
    margin: 0 1.5625vw 0 0;
}

.hw-xmage25 .xmage25-sec8 .officalcontent>li {
    flex-shrink: 0;
}

.hw-xmage25 .xmage25-sec8 .officalcontent>li:not(:last-child) {
    margin: 0 1.5625vw 0 0;
}

.hw-xmage25 .xmage25-sec8 .officalim1 {
    overflow: hidden;
    width: 20.15625vw;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-xmage25 .xmage25-sec8 .officalim2 {
    overflow: hidden;
    width: 13.17708333vw;
    margin: 2.65625vw 0 1.51041666vw;
    border-radius: 0.83333333vw;
}

.hw-xmage25 .xmage25-sec8 .officalim3 {
    overflow: hidden;
    width: 13.17708333vw;
    border-radius: 0.83333333vw;
}

.hw-xmage25 .xmage25-sec8 .officalim4 {
    overflow: hidden;
    width: 19.58333333vw;
    margin: 6.25vw 0 0 0;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-xmage25 .xmage25-sec8 .officalim5 {
    overflow: hidden;
    width: 26.92708333vw;
    margin: 0.36458333vw 0 0 0;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-xmage25 .xmage25-sec8 .officalim6 {
    overflow: hidden;
    width: 19.84375vw;
    height: calc(26.40625vw - 1px);
    margin: 2.60416666vw 0 0 0;
    border-radius: 0.83333333vw;
    transform: translate3d(0,0,0) rotate(0deg);
}

.hw-xmage25 .xmage25-sec8 .officalim6>picture {
    margin: -1px 0 0 0;
}

.hw-xmage25 .xmage25-sec8 .officalim {
    position: relative;
} 

.hw-xmage25 .xmage25-sec8 .officalmore {
    overflow: hidden;
    display: flex;
    margin: 2.91666666vw 0 10.41666666vw 0;
    padding: 9px 20px;
    background: #ce0e2d;
    border-radius: 0.3125vw;
    text-align: center;
}

.hw-xmage25 .xmage25-sec8 .shamore {
    position: relative;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    transition: 0.3s ease;
    will-change: transform;
}

.hw-xmage25 .xmage25-sec8 .licon,
.hw-xmage25 .xmage25-sec8 .ricon {
    position: absolute;
    width: 6px;
    height: 12px;
    transition: 0.5s ease;
    opacity: 0;
}

.hw-xmage25 .xmage25-sec8 .licon {
    top: 10px;
    left: 10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: translate(-15px, -15px);
}

.hw-xmage25 .xmage25-sec8 .ricon {
    bottom: 10px;
    right: 10px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translate(15px, 15px);
}

.hw-xmage25 .xmage25-sec8 .officalmore,
.hw-xmage25 .xmage25-sec8 .officalmat {
    opacity: 0;
    transform: translateY(4.16666666vw);
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li {
    opacity: 0;
    transition: opacity 1s linear, transform 1s cubic-bezier(0.26,0.67,0.48,0.91);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li:nth-child(1) {
    transform: translateY(4.16666666vw);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li:nth-child(2) {
    transform: translateY(5.72916666vw);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li:nth-child(3) {
    transform: translateY(7.29166666vw);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li:nth-child(4) {
    transform: translateY(8.85416666vw);
}

.hw-xmage25 .xmage25-sec8 .officalcontent li:nth-child(5) {
    transform: translateY(10.41666666vw);
}

.hw-xmage25 .xmage25-sec8.active .officalcontent li {
    transform: translateY(0)!important;
    opacity: 1!important;
}

.hw-xmage25 .xmage25-sec8.active .officalmore,
.hw-xmage25 .xmage25-sec8.active .officalmat {
    transform: translateY(0vw);
    opacity: 1;
}

.hw-xmage25 .xmage25-sec8 .offitxtcon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
}

.hw-xmage25 .xmage25-sec8 .offitxtcon .txtbackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,#000 100%);
    transition: opacity 0.5s ease;
    opacity: 0;
    z-index: 0;
}

.hw-xmage25 .xmage25-sec8 .innertxt {
    margin: 0 0 2.083333333vw 2.083333333vw;
}

.hw-xmage25 .xmage25-sec8 .offimat {
    position: relative;
    margin: 0 0 0.41666666666vw 0;
    color: #fff;
    font-size: 1.14583333333vw;
    font-weight: 400;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(1.041666666vw);
    transition: opacity 0.6s linear, transform 0.6s cubic-bezier(0.26,0.67,0.48,0.91);
    z-index: 3;
}

.hw-xmage25 .xmage25-sec8 .offides {
    position: relative;
    color: #fff;
    font-size: 0.8333333333vw;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(2.08333333333vw);
    transition: opacity 0.6s linear, transform 0.6s cubic-bezier(0.26,0.67,0.48,0.91);
    z-index: 3;
}

@media (any-hover: hover) {
    .hw-xmage25 .xmage25-sec8 .officalwalk:has(.officalim:hover) {
        animation-play-state: paused;
    }

    .hw-xmage25 .xmage25-sec8 .officalim:hover .offides,
    .hw-xmage25 .xmage25-sec8 .officalim:hover .offimat {
        opacity: 1;
        transform: translateY(0);
    }

    .hw-xmage25 .xmage25-sec8 .officalim:hover .txtbackshadow {
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec8 .officalmore:hover .shamore {
        transform: translate3d(0,0,0) scale(0.857) rotate(0deg);
    }
    
    .hw-xmage25 .xmage25-sec8 .officalmore:hover .licon,
    .hw-xmage25 .xmage25-sec8 .officalmore:hover .ricon {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@media (pointer: coarse) and (any-hover: none) {
    .hw-xmage25 .xmage25-sec8 .officalim .offides,
    .hw-xmage25 .xmage25-sec8 .officalim .offimat {
        opacity: 1;
        transform: translateY(0);
    }

    .hw-xmage25 .xmage25-sec8 .officalim .txtbackshadow {
        opacity: 1;
    }

    .hw-xmage25 .xmage25-sec8 .officalmore .shamore {
        transform: translate3d(0,0,0) scale(0.857) rotate(0deg);
    }
}

@keyframes walkmove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-107.5vw);
    }
}

/* section 8 mob */
@media screen and (max-aspect-ratio:136/100) {
    .hw-xmage25 .xmage25-sec8 .officalmat {
        margin: 22.22222222vw 0 8.88888888vw 0;
        font-size: 8.88888888vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalmat::before,
    .hw-xmage25 .xmage25-sec8 .officalmat::after {
        width: 2.36111111vw;
        height: 5vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalmat::after {
        top: 1.25vw;
        left: -5.69444444vw;
        border-top: 0.97222222vw solid #000;
        border-left: 0.97222222vw solid #000;
    }

    .hw-xmage25 .xmage25-sec8 .officalmat::before {
        bottom: 1.25vw;
        right: -5.69444444vw;
        border-bottom: 0.97222222vw solid #000;
        border-right: 0.97222222vw solid #000;
    }

    .hw-xmage25 .xmage25-sec8 .officalim1 {
        width: 53.75vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalcontent>li:not(:last-child) {
        margin: 0 4.16666666vw 0 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalcontent:nth-child(1) {
        margin: 0 4.16666666vw 0 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalim2 {
        width: 35.13888888vw;
        margin: 6.94444444vw 0 4.16666666vw 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalim3 {
        width: 35.13888888vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalim4 {
        width: 52.22222222vw;
        margin: 16.52777777vw 0 0 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalim5 {
        width: 71.80555555vw;
        margin: 0.97222222vw 0 0 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalim6 {
        width: 52.91666666vw;
        height: calc(70.4166666666vw - 1px);
        margin: 6.80555555vw 0 0 0;
    }

    .hw-xmage25 .xmage25-sec8 .officalim {
        border-radius: 2.22222222vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalmore {
        margin: 8.88888888vw 0 22.22222222vw 0;
        padding: 2.91666666vw 6.66666666vw;
        background: #ce0e2d;
        border-radius: 0.83333333vw;
    }

    .hw-xmage25 .xmage25-sec8 .shamore {
        font-size: 3.33333333vw;
    }

    .hw-xmage25 .xmage25-sec8 .offimat {
        margin: 0 0 2.22222222vw 0;
        font-size: 4.44444444vw;
    }

    .hw-xmage25 .xmage25-sec8 .offides {
        font-size: 3.33333333vw;
    }

    .hw-xmage25 .xmage25-sec8 .innertxt {
        margin: 0 0 5.55555555vw 5.55555555vw;
    }

    .hw-xmage25 .xmage25-sec8 .officalcontent {
        width: 281.94444444vw;
    }

    @keyframes walkmove {
        0% {
            transform: translateX(0);
        }
    
        100% {
            transform: translateX(-286.111111111vw);
        }
    }
}

.ximageH .ximage-outn .navul li[data-page="index"] a {
    color: #fff;
}

/* section 1 mob */
@media screen and (max-aspect-ratio:136/100) {
    .ximageH .ximage-outn .navul li[data-page="index"] a {
        color: #000;
    }
}