@media screen and (max-width: 1200px) {
    .aboutme .bg-container .overlay.cloud-0 {
        left: -600px;
        transform: rotateY(0deg) scale(.8);
    }

    .aboutme .bg-container .overlay.cloud-1 svg {
        width: 1920px;
        height: auto;
    }

    .zhulong-container .img-overlay-one {
        left: -100px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        transform: translateX(-150px);
    }

    .contact .bg-container img.mountain {
        bottom: 0rem;
        right: -28rem;
        width: auto;
        height: 1100px;
    }

    .contact .content-container {
        grid-template-columns: 1fr;
        grid-gap: 2.5rem;
        padding: 10rem 4rem 0 4rem;
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(300px, max-content) minmax(7rem, max-content) 110px;
        margin-left: auto;
        margin-right: auto;
        height: 220px;
    }

    .contact .content-container .text p {
        height: 220px;
    }

    .content-container .title img {
        top: -2rem;
        left: -0.8rem;
    }

    .content-container .title-text {
        top: 0.3rem;
    }
}

@media screen and (max-width: 1090px) {
    .zhulong-container .img-overlay-one {
        left: -120px;
    }
}

@media screen and (max-width: 1048px) {
    .aboutme .bg-container .overlay.cloud-1 {
        left: -600px;
    }

    .aboutme .content-container {
        padding-left: 0rem;
        padding-right: 0rem;
        margin: 0rem auto;
    }

    .aboutme-cloud-front.ove-1,
    .aboutme-cloud-front.ove-2 {
        bottom: -3rem;
        right: -8rem;
        width: 629px;
    }

    .zhulong-container .img-overlay-one {
        top: -40px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        transform: translate(-230px, 30px);
    }

    .contact .bg-container img.cloud {
        top: -25rem;
        left: -15rem;
        width: 1039px;
        height: auto;
    }

    .contact .bg-container img.mountain {
        right: -37rem;
    }
}

@media screen and (max-width: 960px) {
    .aboutme .bg-container .overlay.cloud-1 {
        left: -900px;
    }

    .aboutme .content-container {
        grid-template-columns: 55% 45%;
        grid-gap: 1rem;
    }



    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        width: 100vw;
        height: calc(100% - 51.6%);
        transform: translate(0, 68px);
        left: 0;
    }

    .gallery .content-container .mask {
        display: grid;
        justify-content: center;
    }

    .mySwiper1 {
        transform: translate(13rem, -5.7rem);
        width: 960px;
    }

    .gallery .content-container .mySwiper2.swiper {

        transform: translateX(0) scale(0.88);
    }

    .gallery .mySwiper2.swiper .swiper-wrapper {
        width: 100vw;
    }

    .contact .bg-container img.mountain {
        right: -47rem;
    }

    /* .skill .magic-circle-container .content {
      border: 2px solid steelblue;
      transform: scale(calc(0.88 * 0.68));
      z-index: 6;
    } */
}



@media screen and (max-width: 776px) {
    .aboutme .bg-container .overlay.cloud-1 {
        left: -400px;
    }

    .content-container .title img {
        top: -2.4rem;
        left: -0.8rem;
    }

    .title-bg {
        /* transform: translateY(-.6rem) scale(.8); */
        transform: scale(.8);
    }

    .aboutme .content-container {
        grid-template-columns: 460px;
        grid-template-rows: 51% 49%;
        transform: scale(1);
        z-index: 10;
        grid-gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .aboutme .content-container .cloud-container {
        order: -1;
    }

    .aboutme .content-container .img-overlay {
        height: 409px;
        margin-bottom: -1.5rem;
        border-bottom: 1px solid lightyellow;
    }

    .aboutme .content-container .img-overlay img {
        transform: scale(.78) translate(10px, 20px);
    }

    .aboutme .content {
        grid-template-columns: minmax(11rem, 16rem) 100px;
        margin-top: 0rem;
        margin-left: auto;
        margin-right: auto;
        column-gap: 1rem;
    }


    .aboutme .content .text,
    .aboutme .content .title {
        position: relative;
        height: 100%;
        transform: translateY(-.5rem);
    }

    .aboutme-cloud-front.ove-1,
    .aboutme-cloud-front.ove-2 {
        bottom: -3rem;
        right: -8rem;
        width: 529px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        width: 100vw;
        height: calc(100% - 47%);
        transform: translate(0, 68px);
    }

    .mySwiper1 {
        transform: translate(16.5rem, -2rem);
        width: 960px;
    }

    .mySwiper1 .swiper-wrapper {
        display: flex;
        align-items: center;
        gap: .3rem;
        left: 5.4rem;
        width: fit-content;
        position: absolute;
    }

    .gallery .content-container .mySwiper2 .swiper-slide {
        position: relative;
        width: auto;
        height: 580px;
        display: flex;
        justify-content: center;
    }

    .gallery .content-container .mySwiper2 .swiper-slide .svg-scroll {
        transform: rotateZ(90deg) translateX(110px);
        width: 100%;
        height: 100%;
    }

    .gallery .scroll-content {
        grid-template-columns: 1fr;
        grid-template-rows: 60% 40%;
        row-gap: 1rem;
        width: 400px;
        padding: 0;
    }

    .scroll-content div.img-overlay,
    .scroll-content div.text {
        height: 100%;
    }

    .scroll-content .img-overlay {
        height: 100%;
        padding-top: 23.5%;
    }

    .scroll-content .text {
        display: grid;
        column-gap: 0.5rem;
        grid-template-columns: auto 80px;
    }

    .scroll-content .text .title img {
        top: .6rem;
        width: 80px;
    }

    .scroll-content .text .data p {
        height: 80%;
        letter-spacing: 0.1rem;
        line-height: 1.35rem;
    }

    .contact .bg-container img.cloud {
        z-index: 2;
    }

    .contact .bg-container img.mountain {
        right: -60rem;
    }

    .contact .content-container {
        padding: 10rem 1rem 0 4rem;
    }



    @media screen and (max-height: 916px) {
        .aboutme .content-container {
            grid-template-columns: 460px;
            grid-template-rows: 65% 45%;
            transform: scale(1);
            z-index: 10;
            grid-gap: 0;
            padding-top: 0;
            padding-bottom: 0;
        }


    }
}



@media screen and (max-width: 767px) {

    .skill .magic-circle-container .content h4,
    .skill .magic-circle-container .content p {
        font-size: var(--scroll-font-size);
        line-height: 1.5rem;
    }

    .skill .magic-circle-container .content {
        max-width: 375px;
        margin-top: -7rem;
        transform: scale(1.190474);
        /* 令字體從16.8放大為20 同時放大星陣 */
    }

    img.magic-circle {
        height: 673.64px;
        width: 354.22px;
        margin-top: 12rem;
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-0.65rem) scale(1);
    }

    .text-bg {
        width: auto;
        height: 275.1px;
        top: 501.5px;
        left: 42px;
    }

    /*-- html --*/
    .html-box {
        top: 210px;
        left: 242px;
    }

    .html-box,
    .html-box .shadow-box01,
    .html-box .shadow-box02 {
        width: 76px;
        height: 76px;
    }

    .html-box .shadow-box02::before {
        width: 76px;
    }

    .html-box:hover .shadow-box02::before {
        height: 76px;
    }

    /*-- css --*/
    .css-box {
        top: 348px;
        left: 25px;
    }

    .css-box,
    .css-box .shadow-box01,
    .css-box .shadow-box02 {
        width: 46.33px;
        height: 46.33px;
    }

    .css-box .shadow-box02::before,
    .css-box .shadow-box02::after {
        width: 46.33px;
    }

    .css-box:hover .shadow-box02::before,
    .css-box:hover .shadow-box02::after {
        height: 46.33px;
    }

    /*-- js --*/
    .js-box {
        top: 428px;
        left: 296px;
    }

    .js-box,
    .js-box .shadow-box01,
    .js-box .shadow-box02 {
        width: 53px;
        height: 53px;
    }

    .js-box .shadow-box02::before {
        width: 53px;
    }

    .js-box:hover .shadow-box02::before {
        height: 53px;
    }

    /*-- ps / adobe --*/
    .ps-box {
        top: 425px;
        left: 40px;
    }

    .ps-box,
    .ps-box .shadow-box01,
    .ps-box .shadow-box02 {
        width: 58px;
        height: 58px;
    }

    .ps-box .shadow-box02::before {
        width: 58px;
    }

    .ps-box:hover .shadow-box02::before {
        height: 58px;
    }

    /*-- figma --*/
    .figma-box {
        top: 234px;
        left: 51px;
    }

    .figma-box,
    .figma-box .shadow-box01,
    .figma-box .shadow-box02 {
        width: 62px;
        height: 62px;
    }

    .figma-box .shadow-box02::before {
        width: 62px;
    }

    .figma-box:hover .shadow-box02::before {
        height: 62px;
    }

    /*-- text --*/
    .text-intro {
        top: 580px;
        left: 158px;
    }

    .html-text {
        top: 366px;
        left: -110px;
    }

    .css-text {
        top: 228px;
        left: 98px;
    }

    .js-text {
        top: 148px;
        left: -166px;
    }

    .ps-text {
        top: 148px;
        left: 92px;
        height: 11rem;
    }

    .figma-text {
        top: 342px;
        left: 60px;
    }

    .close-btn {
        font-size: calc(1.11rem / .88);
        left: 70px;
        top: 564px;
    }

    .ae-text {
        left: -465px;
        top: -130px;
    }

    .pri-text {
        left: -388px;
        top: -60px;
    }

    .ai-text {
        left: -765px;
        top: 10px;
    }

    .in-text {
        left: -690px;
        top: 88px;
    }

    .ae-box img.img-btn,
    .pri-box img.img-btn,
    .ai-box img.img-btn,
    .in-box img.img-btn {
        opacity: 0;
        pointer-events: none;
    }
}

@media screen and (max-width: 640px) {

    .aboutme .content-container,
    .contact .content-container {
        transform: scale(.88);
        /* 內文字20跟著縮小為17.6 */
    }

    .aboutme .content-container {
        margin-left: 4rem;
    }

    .aboutme .content {
        grid-template-columns: minmax(10rem, 16rem) 100px;
        margin-top: 0rem;
        column-gap: 0.8rem;
    }

    .aboutme .content .text p a {
        color: var(--color-copyright-moreinfo);
    }

    .aboutme .content .text p a::before {
        border-left: .08rem solid var(--color-copyright-moreinfo);
    }

    .skill .magic-circle-container .content {
        margin-top: -3.5rem;
        transform: scale(1.04761);
        /* 令字體從16.8 趨近17.6*/
    }

    .content-text {
        line-height: var(--line-height);
    }

    .contact .bg-container img.cloud {
        width: 900px;
        top: -23rem;
        left: -20rem;
    }

    .contact .bg-container img.mountain {
        right: -60rem;
    }

    .contact .content-container {
        width: 1100px;
        padding: 10rem 0 0 3rem;
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(200px, fill) minmax(7rem, 0.4fr) minmax(100px,
                0.6fr);
    }

    .stagbeetle a img {
        transform: translateX(-32px);
    }

    .contact-me .contact-method div.mail,
    .contact-me .contact-method div.message {
        width: 100%;
        height: 100px;
    }

    .contact-method div:hover h4 {
        transform: scale(1.1);
    }

    .contact-method .mail h4 {
        right: 1rem;
    }

    .contact-method .mail:hover h4 {
        right: 1.8rem;
    }

    .contact-method .message h4 {
        left: 1rem;
    }

    .contact-method .message:hover h4 {
        left: 1.8rem;
    }

    .contact-method div img {
        width: auto;
        height: 100%;
    }

    .contact-method div.mail img {
        transform: translateX(0);
    }

    .contact-method div.message img {
        transform: translateX(0);
    }

    .contact-method div.mail:hover a {
        transform: scale(calc(1 / 1.05));
    }

    .contact-method div.message:hover a {
        transform: scale(calc(1 / 1.05));
    }
}

@media screen and (max-width: 540px) {
    .contact .content-container {
        width: 1100px;
        padding: 10rem 0 0 1rem;
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(200px, max-content) minmax(7rem, 0.4fr) minmax(100px,
                0.6fr);
    }

    .contact-method div.mail img {
        transform: translateX(-84px);
    }

    .stagbeetle a img {
        transform: translateX(-125px);
    }
}

@media screen and (max-width:420px) {
    .aboutme .content-container {
        margin-left: 2.7rem;
    }

    .contact .content-container {
        width: 100%;
        padding: 10rem 0 0 0;
        margin: 0 1rem;
        transform: translateX(-.8rem) scale(.88);
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(200px, 1fr) minmax(7rem, 0.4fr) minmax(32px,
                0.2fr);
    }

    .contact-me .title,
    .stagbeetle .title {
        left: -.6rem;
        right: auto;
    }
}

@media screen and (max-width:390px) {
    .aboutme .content-container {
        margin-left: 1rem;
    }
}

@media screen and (max-width:381px) {
    p {
        font-size: var(--scroll-font-size);
    }

    .title-text {
        font-size: var(--normal-font-size);
    }

    .content-text {
        line-height: var(--line-height-s);
        letter-spacing: var(--letter-space-s);
    }

    .aboutme .content-container {
        transform: scale(1);
        /* 內文字20跟著縮小為17.6 */
    }

    .aboutme .content-container .title img {
        top: -3.5rem;
        left: -1rem;
    }

    .contact .content-container .title img {
        top: -3rem;
        left: -1rem;
    }

    .title-bg {
        /* transform: translateY(-.6rem) scale(.8); */
        transform: scale(.7);
    }

    #title766 {
        transform: scale(1);
    }

    .aboutme .content-container {
        grid-template-rows: 60% 55%;
        grid-gap: .6rem;
    }

    .aboutme .content-container .img-overlay {
        transform: translateY(1.5rem) scale(.88);
    }

    .aboutme .content {
        grid-template-columns: minmax(12rem, 13rem) 64px;
        margin-left: auto;
        margin-right: auto;
        column-gap: 0.5rem;
    }

    .aboutme .content .text p {
        margin-top: 14px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        width: 100vw;
        height: calc(100% - 51%);
        transform: translate(0, 68px);
    }

    .swiper-box {
        transform: scale(.8);
    }

    .mySwiper1 {
        transform: translate(16.5rem, -2rem);
    }

    .gallery .content-container .mySwiper2.swiper {
        transform: translateX(.12rem) scale(0.88);
    }

    .scroll-content .title div h4:first-child {
        font-size: calc(1.15rem / .88);
    }

    .scroll-content .title div h4:last-child {
        font-size: calc(var(--normal-font-size) / .88);
    }

    .scroll-content .text .data p {
        font-size: calc(var(--scroll-font-size) / .88);
        line-height: calc(1.25rem / .88);
    }

    #skill {
        top: 10rem;
    }

    .skill .magic-circle-container {
        transform: translateX(.3rem) scale(.9);
        z-index: 10;
    }

    .skill .magic-circle-container .content {
        max-width: 380px;
        margin-top: 0rem;
    }

    img.magic-circle {
        transform: translateX(-.8rem);
    }

    .skill .magic-circle-container .content p,
    .skill .magic-circle-container .content h4 {
        font-size: calc(var(--scroll-font-size) / .9);
    }

    .ps-text {
        top: 148px;
        left: 94px;
        height: 11rem;
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(200px, 1fr) minmax(4.6rem, 0.4fr) minmax(32px,
                0.2fr);
    }

}


@media screen and (max-width:360px) {

    .skill .magic-circle-container {
        transform: translateX(-.25rem) scale(.88);
    }

    .text-intro {
        top: 575px;
        left: 158px;
    }

    .skill .magic-circle-container .content p,
    .skill .magic-circle-container .content h4 {
        font-size: calc(var(--scroll-font-size) / 1);
    }
}

@media screen and (max-width:320px) {
    #title766 {
        transform: scale(.9);
        right: 1.5rem;
    }

    .skill .magic-circle-container {
        transform: translateX(-1.5rem) scale(.88);
    }

    img.magic-circle {
        transform: translateX(-.155rem);
    }

    .content-container .contact-me,
    .content-container .stagbeetle {
        grid-template-columns: minmax(160px, 1fr) minmax(4.6rem, 0.4fr) minmax(32px,
                0.2fr);
    }
}


/****硬幹星陣360-380****/
@media screen and (max-width:379px) {
    img.magic-circle {
        transform: translateX(-.4rem);
    }
}

@media screen and (max-width:378px) {
    img.magic-circle {
        transform: translateX(-.74rem);
    }
}

@media screen and (max-width:376px) {
    img.magic-circle {
        transform: translateX(-.65rem);
    }
}

@media screen and (max-width:374px) {
    img.magic-circle {
        transform: translateX(-.6rem);
    }
}

@media screen and (max-width:372px) {
    img.magic-circle {
        transform: translateX(-.55rem);
    }
}

@media screen and (max-width:370px) {
    img.magic-circle {
        transform: translateX(-.5rem);
    }
}

@media screen and (max-width:368px) {
    img.magic-circle {
        transform: translateX(-.45rem);
    }
}

@media screen and (max-width:367px) {
    img.magic-circle {
        transform: translateX(-.36rem);
    }
}

@media screen and (max-width:364px) {
    img.magic-circle {
        transform: translateX(-.29rem);
    }
}

@media screen and (max-width:362px) {
    img.magic-circle {
        transform: translateX(-.21rem);
    }
}

@media screen and (max-width:360px) {
    img.magic-circle {
        transform: translateX(-.18rem);
    }
}

@media screen and (min-width: 1370px) {
    .aboutme .bg-container {
        width: 100%;
        min-height: calc(755px * 1.4055);
        height: 100vh;
    }

    .gallery .bg-container {
        width: 100%;
        min-height: calc(1135px * 1.4055);
        height: 100vh;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        top: 24%;
    }


    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        width: 100vw;
        transform: translateX(calc(100vw - 70%));
    }

    .gallery .content-container .mySwiper2.swiper {
        width: 2720px;
        transform: translate(-930px, 80px) scale(1);
    }

    .mySwiper1 {
        transform: translate(-45rem, 3rem);
        height: 4rem;
        width: 960px;
        overflow: visible;
    }

    .zhulong-container .img-overlay-one {
        top: 7rem;
        left: -5rem;
        width: 906px;
        height: auto;
    }

    .zhulong-container .img-overlay-two {
        width: 703px;
        height: auto;
        top: 1080px;
        left: -60px;
        z-index: 3;
    }

    .gallery .content-container {
        width: 100vw;
    }

    .contact .bg-container img.cloud {
        top: -35rem;
        width: 1336px;
    }

    .skill .magic-circle-container {
        top: 0px;
    }
}

@media screen and (min-height: 960px) {

    .skill .bg-container {
        position: relative;
        width: 100%;
        /* height: 100vh; */
        min-height: calc(932px * 1.4055);
        height: 100vh;
    }

    .skill .bg-container .cloud-front {
        height: 407px;
        top: 1rem;
        left: -6rem;
    }

    .skill .magic-circle-container .content {
        margin-top: 4rem;
    }
}

@media screen and (min-height: 960px) {
    .skill .magic-circle-container .content {
        margin-top: 7rem;
        transform: scale(1);
    }
}

@media screen and (max-height: 912px) {


    .aboutme-cloud-front.ove-2 {
        bottom: -6rem;
        right: 13%;
        width: 929px;
        opacity: 1;
    }

    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        right: 7rem;
        bottom: -9rem;
        width: 680px;
        height: auto;
    }
}

@media screen and (min-height: 913px) {

    .cloud-container {
        position: relative;
        width: 301px;
        height: 509px;
    }


    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        right: -25rem;
        bottom: -12rem;
        width: 600px;
        height: auto;
    }

    .aboutme-cloud-front.ove-2 {
        opacity: 1;
        width: 740px;
        height: auto;
        bottom: -10rem;
        right: 9rem;
    }
}

@media screen and (max-width: 1540px) {
    .contact .bg-container img.cloud.-middle {
        top: -10rem;
        right: 25rem;
        left: auto;
        opacity: 0;
    }

    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        width: 880px;
        height: auto;
        bottom: -20rem;
        right: -31rem;
    }

    .aboutme-cloud-front.ove-2 {
        opacity: 1;
        width: 980px;
        height: auto;
        bottom: -7rem;
        right: 1rem;
    }

    @media screen and (max-height: 912px) {
        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            width: 880px;
            height: auto;
            bottom: -12rem;
            right: -7rem;
        }
    }
}

@media screen and (min-width: 1540px) {

    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        width: 680px;
        height: auto;
        bottom: -20rem;
        right: -8rem;
    }

    .aboutme-cloud-front.ove-2 {
        opacity: 1;
        width: 980px;
        height: auto;
        bottom: -7rem;
        right: 1rem;
    }

    @media screen and (max-height: 912px) {
        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            width: 880px;
            height: auto;
            bottom: -12rem;
            right: -2rem;
        }

        .aboutme-cloud-front.ove-2 {
            bottom: -6rem;
            right: 13%;
            width: 929px;
            opacity: 1;
        }
    }

    .zhulong-container .img-overlay-one {
        width: 1006px;
        left: -5rem;
    }

    .zhulong-container .img-overlay-two {
        left: -100px;
        width: 853px;
    }

    .contact .bg-container img.cloud.-middle {
        top: -10rem;
        right: 25rem;
        left: auto;
        opacity: 1;
    }

    .contact .bg-container img.mountain {
        height: 1300px;
        right: -30rem;
    }
}

@media screen and (min-width: 1660px) {
    #star02 {
        transform: rotate(180deg);
        top: -20rem;
        left: -10rem;
        z-index: 10;
    }

    @media screen and (max-height: 912px) {

        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            right: 6rem;
            bottom: -13rem;
            width: 929px;
            height: auto;
        }

        .aboutme-cloud-front.ove-2 {
            opacity: 1;
            right: 33rem;
            bottom: -18rem;
            width: 929px;
            height: auto;
        }
    }
}

@media screen and (min-width: 1920px) {

    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        width: 990px;
        height: auto;
        bottom: -13rem;
        right: 7rem;
    }

    .aboutme-cloud-front.ove-2 {
        opacity: 1;
        width: 980px;
        height: auto;
        bottom: -8rem;
        right: 15rem;
    }

    @media screen and (min-height: 913px) {
        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            right: -32rem;
            bottom: -20rem;
            width: 900px;
            height: auto;
        }
    }
}



@media screen and (min-height: 1020px) {
    .aboutme .bg-container .overlay:nth-child(3) {
        transform: scale(1.3);
        opacity: 1;
        top: -25rem;
        left: -11rem;
    }
}

@media screen and (min-height: 1280px) {
    .aboutme .bg-container .overlay:nth-child(4) {
        transform: scale(1.4);
    }

    .aboutme .bg-container .overlay:nth-child(3) {
        transform: scale(1.6);
        opacity: 1;
        top: -25rem;
        left: 0rem;
    }
}

@media screen and (max-width: 1366px) {
    .gallery .bg-container {
        min-height: 1000px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        height: calc(100% - 38%);
    }

    .swiper-box {
        transform: translateY(0rem);
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        transform: translateX(0);
    }
}


@media screen and (max-width: 1200px) {

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        transform: translateX(-120px);
    }
}

@media screen and (max-width: 1055px) {

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        transform: translateX(-170px);
    }
}

@media screen and (max-width: 992px) {
    .gallery .content-container .mySwiper2.swiper {
        width: 1440px;
    }

    .gallery .content-container .mirror,
    .gallery .content-container .mask {
        width: 101vw;
        height: calc(100% - 31.6%);
        transform: translate(-1px, 68px);
        left: 0;
    }

    .gallery .content-container .mySwiper2.swiper {
        transform: translateX(-360px) scale(.88);
    }

    .swiper-box {
        transform: translateY(40px);
    }

    .mySwiper1 {
        transform: translate(-11rem, -2.7rem);
    }

    .zhulong-container .img-overlay-two {
        top: 680px;
    }
}

@media screen and (max-width: 965px) {
    .mySwiper1 {
        transform: translate(11rem, -2.7rem);
    }

    .gallery .content-container .mySwiper2.swiper {
        transform: translateX(-0px) scale(.88);
    }
}

@media screen and (max-width: 776px) {
    .gallery .content-container .mirror {
        width: 101vw;
        height: calc(100% - 31.6%);
        transform: translate(-1px, 68px);
        left: 0;
    }

    .swiper-box {
        transform: translateY(0px);
    }

    .mySwiper1 {
        transform: translate(27%, 0rem);
    }

    .gallery .content-container .mySwiper2.swiper {
        transform: translate(-0px, 10px) scale(.9);
    }
}

@media screen and (max-width: 450px) {
    .gallery .content-container .mySwiper2.swiper {
        transform: translate(-0px, 10px) scale(.88);
        height: 90%;
    }

    .mySwiper1 {
        transform: translate(27%, -1rem);
    }

    .scroll-content .text .data p {
        font-size: calc(15.12px / .9);
        height: auto;
    }

    .scroll-content .title div h4:last-child {
        font-size: calc(20px / .9);
        padding-top: 6px;
    }

    .scroll-content .title div h4:first-child {
        font-size: calc(18px / .9);
    }
}

@media screen and (max-width: 420px) {
    .swiper-box {
        transform: translateY(-10px);
    }

    .mySwiper1 .swiper-wrapper {
        left: 5.4rem;
    }

    .gallery .content-container .mySwiper2.swiper {
        transform: translate(-0px, 10px) scale(.8);
    }

    .scroll-content .text .data p {
        font-size: calc(15.12px / .9);
        height: 95%;
    }
}

@media screen and (max-width: 1370px) {
    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        right: -26rem;
        bottom: -17rem;
        width: 760px;
        height: auto;
    }

    .aboutme-cloud-front.ove-2 {
        opacity: 0;
        right: -25rem;
        bottom: -12rem;
        width: 600px;
        height: auto;
    }

    @media screen and (max-height: 913px) {
        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            right: -8rem;
            bottom: -9rem;
            width: 760px;
            height: auto;
        }

        .aboutme-cloud-front.ove-2 {
            opacity: 0;
            right: -25rem;
            bottom: -12rem;
            width: 600px;
            height: auto;
        }
    }
}

@media screen and (max-width: 776px) {
    .aboutme-cloud-front.ove-1 {
        opacity: 1;
        right: -38rem;
        bottom: -23rem;
        width: 760px;
        height: auto;
    }

    @media screen and (max-height: 916px) {
        .aboutme-cloud-front.ove-1 {
            opacity: 1;
            right: -22rem;
            bottom: -7rem;
            width: 760px;
            height: auto;
        }
    }
}


@media screen and (max-width: 365px) {
    .gallery .content-container .mySwiper2 .swiper-slide .svg-scroll {
        transform: rotateZ(90deg) translateX(110px) scale(.97);
    }
        .scroll-content .img-overlay {
        height: 100%;
        padding-top: 98px;
    }

}