@import "./common.less";

body {
    font-size: var(--ft16);
    color: #000;
    .d-flex;

    .flex-column;
    min-height: 100vh;

    @media (max-width: 768px) {}
}

main {
    flex: 1;
}

.backtop {
    opacity: 0;
    width: 40px;
    aspect-ratio: 1/1;
    background: linear-gradient(var(--ftc), #008ec7b5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    border: none;
    position: fixed;
    right: var(--p20);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
    bottom: vaR(--p50);
    transition: all 0.3s;
    visibility: hidden;

    .arrow path {
        fill: white;
    }



    &:hover .arrow {
        animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @keyframes slide-in-bottom {
        0% {
            transform: translateY(10px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

}
.banner_box{
	width: 100%;
    position: relative;
    aspect-ratio: 1920 / 800;

    .banner_img{
    	width: 100%;
    	aspect-ratio: 1920 / 800;
    	margin-top:vaR(--p100);
    	img{
    		width:100%;
    		aspect-ratio: 1920 / 800;
    	}
    }
    .banner_text{
    	position: absolute;
    	z-index: 99;
    	left: 50%;
    	top: 50%;
    	transform: translateY(-50%);
    }
}
header {
    --color: #fff;
    padding: var(--p15) 0;

    form {
        position: relative;
    }

    .layui-main {

        gap: var(--p90);
    }

    .layui-nav .layui-nav-item {
        line-height: 3em;
    }

    .layui-nav .layui-this:after,
    .layui-nav-bar {
        background: #fff;
    }

    .layui-nav .layui-nav-more {
        position: relative;
    }

    .nav {
        flex: 1;

        .layui-nav {
            .d-flex;
            gap: var(--p50);
        }

        .item {
            position: relative;
            overflow: hidden;
            padding: 0;

            * {
                text-transform: uppercase;
                font-size: var(--ft16);
                transition: all 0.5s;
            }

            .t1 {
                position: relative;
                bottom: 0;

            }

            .t2 {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
            }

            &:hover {
                .t1 {
                    bottom: 3em;
                }

                .t2 {
                    top: 0;
                }
            }
        }

    }

    .input {
        width: 35px;
        height: 35px;
        border-radius: 0;
        outline: none;
        background-color: #fff;
        color: var(--color);
        padding: 18px 16px;
        background-color: transparent;
        cursor: pointer;
        transition: all .5s ease-in-out;
        border-top: 1px solid rgba(0, 0, 0, 0);
        border-bottom: 1px solid rgba(0, 0, 0, 0);
    }

    .input::placeholder {
        color: transparent;
    }

    .input:focus::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .input:focus,
    .input:not(:placeholder-shown) {
        height: 35px;
        border-bottom: 1px solid var(--color);
        width: 145px;
        font-size: var(--ft14);
        cursor: none;
        padding: 8px 16px 8px 36px;
    }

    .icon {
        top: 5px;
        position: absolute;
        left: 2px;
        height: 24px;
        width: 24px;
        border-radius: 99px;
        z-index: -1;

        path {
            fill: var(--color);

        }
    }

    .input:focus+.icon,
    .input:not(:placeholder-shown)+.icon {
        z-index: 0;
        background-color: transparent;
        border: none;
    }

    .logo img {
        max-height: 65px;
    }

    &.black {
        background: #0A0A0A;
    }

    &.bgcolor {
        background: #000;

        .backtop {
            visibility: visible;
            opacity: 1;
        }
    }
}
.navMobile{
    text-transform: uppercase;
}
.top_box {
    width: 100%;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    aspect-ratio: 1920/900;
    min-height: 300px;
    background: linear-gradient(180deg, #060606, #242424);
    position: relative;

    .block {
        position: relative;
        z-index: 1;
        .d-grid;
        .al-c;
        .grid2;
        text-align: right;
    }

    .img {
        overflow: visible;

        img {
            max-width: 140%;
        }
    }

    .desc {
        margin-top: var(--p15);
        opacity: 0.5;
    }

    h1 {
        line-height: 1.2em;
        font-weight: normal;
        font-size: var(--ft42);
    }

    .layui-btn{
        --btn:60px;
        padding: 0 var(--p40);
        font-size: vaR(--ft18);
        margin-top: vaR(--p80);
        &:hover{
            opacity: 1;
        }
    }

    &:before,
    &:after {
        // display: block;
        // content: '';
        position: absolute;
        z-index: 10;
        border-radius: 50%;
        /* rounded-full */
        filter: blur(0.5rem);
        /* blur-lg */
        transition-duration: 500ms;
        /* before:duration-500, after:duration-500 */
    }

    &:before {
        width: 3rem;
        /* w-12 */
        height: 3rem;
        /* h-12 */
        right: 0.25rem;
        /* right-1 */
        top: 0.25rem;
        /* top-1 */
        background-color: #1C2E4E;
        /* bg-violet-500 */
    }

    &:after {
        width: 5rem;
        /* w-20 */
        height: 5rem;
        /* h-20 */
        right: 2rem;
        /* right-8 */
        top: 0.75rem;
        /* top-3 */
        background-color: #39282E;
        /* bg-rose-300 */
    }

    &:hover {
        &:before {
            /* hover:before:[box-shadow...] */
            right: 3rem;
            /* hover:before:right-12 */
            bottom: -2rem;
            /* hover:before:-bottom-8 */
            filter: blur(1rem);
            /* hover:before:blur */
            transition-duration: 500ms;
            /* group-hover:before:duration-500 */
        }

        &:after {
            right: -2rem;
            /* hover:after:-right-8 */
            transition-duration: 500ms;
            /* group-hover:after:duration-500 */
        }
    }
}


.Banner_swiper {
    &>.zhenshangyin-wrap>.zhenshangyin-slide {
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
.About{
    margin-top: vaR(--p90);
    
}
.Contact {
    margin-top: vaR(--p90);


    .layui-main {
        .d-flex;
        .al-fs;
        .jc-s;
        gap: var(--p30);
    }

    .Info {
        width: 650px;
        max-width: 100%;

        h1 {
            line-height: 1.2em;
            font-size: vaR(--ft60);
        }

        .desc {
            color: #555555;
            margin-top: vaR(--p50);
        }

        ul {
            margin-top: vaR(--p50);
            .d-grid;
            .grid2;
            gap: var(--p60);
        }

        .sub {
            margin-top: vaR(--p20);
            color: #555555;
        }

        h5 {
            font-size: var(--ft24);
        }

        padding:var(--p70) 0;
    }

    @keyframes scaleDown {
        from {
            transform: scale(1.1);
            opacity: 1;
            /* 可选：添加淡入效果 */
        }

        to {
            transform: scale(1);
            opacity: 1;
            /* 可选：添加淡入效果 */
        }
    }

    .From {

        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        width: 540px;
        max-width: 100%;
        color: #fff;
        .bgc;
        border-radius: 10px;
        padding: var(--p40);
        gap: var(--p20);

        .btn-shine {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 12px 48px;
            color: #fff;
            background: linear-gradient(to right, #000 0, #fff 10%, #000 20%);
            background-position: 0;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 3s infinite linear;
            animation-fill-mode: forwards;
            -webkit-text-size-adjust: none;
            font-weight: 600;
            font-size: 16px;
            text-decoration: none;
            white-space: nowrap;
            font-family: "Poppins", sans-serif;
        }

        @keyframes shine {
            0% {
                background-position: 0;
            }

            60% {
                background-position: 180px;
            }

            100% {
                background-position: 180px;
            }
        }

        .layui-btn {
            position: relative;
            background: #fff;
            width: 100%;
            --btn: 46px;
            border-radius: vaR(--p30);
            text-transform: uppercase;

            .btn-shine {
                transition: all 0.3s;
            }

            &:hover {
                opacity: 1;
                scale: 1.05;
            }
        }

        --input_scolor:var(--ftc);

        .layui-form-select .layui-edge {

            border-top-color: #fff;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {

            border: none;
            --input_pcolor: rgba(255, 255, 255, 0.3);
            padding: 0;
            color: #fff;
            border-bottom: 1px solid #fff;
        }

        .layui-textarea {
            margin-top: var(--p10);
        }

        .layui-input:focus,
        .layui-textarea:focus {
            box-shadow: none;
            border-color: rgba(255, 255, 255, 0.6) !important;
        }

        .foot {
            margin-top: var(--p10);
        }
    }

}


footer {
    background: #0B0B0B;
    color: #fff;

    form {
        margin-top: vaR(--p30);
        --input: 50px;

        width: 100%;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid var(--bgc);


        .d-flex;
        .al-c;

        input {
            color: #fff !important;
            padding: 0;
            border: none !important;
            flex: 1;
        }

        button {
            
            height: 50px overflow: hidden;
            cursor: pointer;
            .bgc;
            padding: var(--p15);
            height: 100%;
            position: relative;

            svg {
                width: 18px;

                path {
                    fill: #fff;
                }
            }

            .block {
                overflow: hidden;
            }

            .button__icon-svg--copy {

                position: absolute;
                transform: translate(-200%, 200%);
            }

            &:hover {
                .button__icon-svg:first-child {
                    transition: transform 0.3s ease-in-out;
                    transform: translate(200%, -200%);
                }

                .button__icon-svg--copy {
                    transition: transform 0.3s ease-in-out 0.1s;
                    transform: translate(0);
                }
            }

        }

    }

    .foot1 {
        padding: var(--p60) 0 var(--p90);

        .layui-main {
            .d-flex;
            .al-fs;
            .jc-s;
            flex-wrap: wrap;
            gap: vaR(--p20) vaR(--p70);
        }

        h1 {
            font-weight: normal;
            font-size: vaR(--ft26);
        }

        .desc {
            opacity: 0.5;
            margin-top: var(--p40);
            font-size: vaR(--ft18);
        }

        .link {
            flex: 0.8;
           .item{
               width: 2em;
           }
        }

        ul {
            margin-top: var(--p30);
            .d-flex;
            .al-c;
            flex-wrap: wrap;
            gap: var(--p10) var(--p30);

            .item:hover {

                animation: jello-vertical 0.7s both;
            }

            @keyframes jello-vertical {
                0% {
                    transform: scale3d(1, 1, 1);
                }

                30% {
                    transform: scale3d(0.75, 1.25, 1);
                }

                40% {
                    transform: scale3d(1.25, 0.75, 1);
                }

                50% {
                    transform: scale3d(0.85, 1.15, 1);
                }

                65% {
                    transform: scale3d(1.05, 0.95, 1);
                }

                75% {
                    transform: scale3d(0.95, 1.05, 1);
                }

                100% {
                    transform: scale3d(1, 1, 1);
                }
            }

        }
    }

    .foot2 {
        text-align: center;
        padding: vaR(--p20) 0;
        background: #000000;
    }
}

.fill-circle {
    --x: 0%;
    --y: 0%;
    display: none;
}

.capsule {
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.capsule:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.fill-circle {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: inherit;
    overflow: hidden
}

.fill-circle:before {
    z-index: -1;
    content: "";
    position: absolute;
    display: block;
    top: var(--y);
    left: var(--x);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #fff;
    width: 100%;
    opacity: .15;
    transform: translate(-50%, -50%) scale(0)
}


.fill-circle:hover:before {
    animation: fill-circle-aniamtion .65s ease-out;
    animation-fill-mode: forwards;
}

.fill-circle1:hover:before {
    animation: fill-circle-aniamtionx .65s ease-out;
    animation-fill-mode: none;
}

@keyframes fill-circle-aniamtion {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .15
    }

    to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1
    }
}

@keyframes fill-circle-aniamtionx {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .15
    }

    to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0
    }
}

.ProductList {
    .d-grid;
    gap: var(--p100);

    .item {
        display: block;
        background: #E5E5E5;
        border-radius: 26px;
        .d-grid;
        grid-template-columns: 0.8fr 1fr;
        transition: all 0.3s;

        &:hover {
            box-shadow: 0px 5px 10px #bebebe;

            img {

                transform: translate(-50%, -50%);
            }
        }
    }

    .img {
        position: relative;

        img {
            transition: all 0.3s;
            max-width: 120%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-55%, -55%);
        }
    }

    .con {
        padding: vaR(--p120);
    }

    h5 {
        line-height: 1.2em;
        font-size: var(--ft36);
        font-weight: normal;
        .line-clamp1;
        margin-bottom: vaR(--p10);
    }

    .key {
        .ftc;
    }

    .money {
        margin-top: var(--p20);

        .t1 {
            text-decoration: line-through;
            color: #666666;
            font-size: var(--ft24);
        }

        .t2 {
            font-size: var(--ft36);
            .ftc
        }
    }

    .layui-btn {
        --btn: 60px;
        padding: 0 vaR(--p40);

        font-size: vaR(--ft18);
        margin-top: vaR(--p30);

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

            100% {
                opacity: 1;
                transform: translateX(3px);
            }
        }

        i {
            display: inline-block;
        }

        &:hover {
            .ftc;
            opacity: 1;

            i {

                animation: arrow 1s linear infinite;
            }
        }
    }
}

.App {
    --main: 1210px;
    background: #262626;
}

.AppList {
    .d-grid;

    grid-template-columns: repeat(12, 1fr);
    gap: var(--p20);
    color: #fff;

    .item {
        cursor: pointer;
        overflow: hidden;
        background: #0A0A0A;
        border-radius: 16px;
        padding: vaR(--p50) var(--p35);
        position: relative;
        grid-column: span 7;

        &:nth-child(5n+1) {
            .img {
                position: absolute;
                right: var(--p30);
                top: 0;
                bottom: 0;
            }
        }

        &:nth-child(5n+2) {
            grid-column: span 5;

            .img {
                position: absolute;
                right: var(--p30);
                top: 0;
                bottom: 0;
            }

        }

        &:nth-child(5n+3) {
            grid-column: span 5;
            grid-row: span 2;
            .con{
                height: auto;
            }
            .img {
                position: relative;

            }

        }

        &:nth-child(5n+4) {
            .img {
                right: 0;
                left: 0;
                top: 0;
                bottom: 0;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        &:nth-child(5n+5) {
            .img {
                right: 0;
                top: 0;
                bottom: 0;
            }
        }

        * {
            position: relative;
            z-index: 12;
        }
    
        &:hover {
    box-shadow: 0px 5px 10px rgba(255,255,255,0.1);
                .btn{
                    opacity: 1;
                }
                    i {

                animation: arrow 1s linear infinite;
            }
        }
    }

    .img {
        position: absolute;
        z-index: 1;
    }


    .con{
        .d-flex;
        .flex-column;
    height: 100%;
    }
    h5 {
        line-height: 1.2em;
        font-size: var(--ft36);
        font-weight: normal;
        .line-clamp1;
    }

    .sub {
        flex: 1;
        line-height: 1.3em;
        opacity: 0.5;
        margin-top: vaR(--p15);
    }



    .btn {
        margin-top: vaR(--p40);
        --btn: 60px;
        text-transform: uppercase;
        font-weight: bold;
        opacity: 0.6;
        @keyframes arrow {
            0% {
                opacity: 0;
                transform: translateX(0);
            }

            100% {
                opacity: 1;
                transform: translateX(3px);
            }
        }

        i {
            display: inline-block;
        }


    }
}

.ProductMore {
    margin-top: var(--p100);

    h1 {
        text-align: center;
        font-size: var(--ft20);
    }

    .con {
        margin-top: var(--p20);
        color: #666;
    }
}

.ProductDetails {
    color: #fff;
    background: #262626;

    .Info {
           .d-grid;
          .grid2;     

        gap: var(--p20) vaR(--p60);
        margin-bottom: vaR(--p70);

        .img {
            max-width: 50%;
        }
    }

    .t1 {
        font-size: vaR(--ft56);
        line-height: 1.2em;
        margin-bottom: vaR(--p15);
    }

    .t2 {
        font-size: var(--ft42);
    }

    .img {
        margin-top: vaR(--p100);
        margin-bottom: var(--p60);
    }

    .con {
        color: rgba(255,255,255,0.6);
        font-size: var(--ft22);
    }

    .title {
        margin: vaR(--p50) 0 var(--p60);
        text-align: center;
        font-size: vaR(--ft56);
    }

    video {
        width: 100%;
        aspect-ratio: 1200/670;
    }
}

.top_swiper {
    height: 100vh;
    .top_box{
        .bg_img;
        height: 100%;
           *{
        color: #fff;
            text-align: left;
                
            }
    }
}
.Banner_swiper{
    
    overscroll-behavior: contain;
    -ms-scroll-chaining: contain;
    
    background: linear-gradient(180deg, #060606, #242424);
    height: 100vh !important;
    .top_box{
        height: 100vh;
        .bg_img;
        .t3,
        .t2,
        .t1{
            opacity: 0;
            transform: translateX(100px);
            transition: all 1s;
            transition-delay: 0.2s;
        }
          .t2{
              
            transition-delay: 0.3s;
          }
             .t3{
              
            transition-delay: 0.4s;
          }
        .bg_img;
        .desc{
            margin-top: vaR(--p10);
        }
        &.Left{
            *{
            text-align: left;
                
            }
        }
     
    }
    .zhenshangyin-slide-active{
       .t3,
        .t2,
        .t1{
            opacity: 1;
            transform: translateX(0);
        }
    }
}
.navMobile{
    a{
    color: #fff;
        
    }
   ul li:after{
        background: #fff;
        height: 1px;
    }
     ul li:hover > a,  ul li.active > a{
        color: #fff;
    }
    background: #000;
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .Contact .layui-main{
        .flex-column;
    }
    header .logo img{
        max-height: 30px;
        
    }
    .AppList .item .img{
        display: none;
    }
    .ProductList .layui-btn,
    .top_box .layui-btn{
        
    --btn: 40px;
    }
    footer form{
        --input:40px;
    }
    .Banner_swiper{
        padding-top: 50px;
        height: auto !important;
        overflow-y: auto;
        .zhenshangyin-wrap{
            .flex-column;
        }
 .top_box{
            height: auto;
        }
        .t3,
        .t2,
        .t1{
            opacity: 1 !important;
            transform: translateX(0) !important;
        }
    }
}

@media only screen and (max-width: 768px) {
	.top_swiper{
		height:unset;
		.zhenshangyin-wrap{
			.zhenshangyin-slide{
				background-size:100%;
			}
		}
	}
}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}