@import "./common.less";

body {
	font: 16px;
	color: #000;
	.d-flex;
	.flex-column;
	min-height: 100vh;

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

.head {
	position: relative;
	z-index: 9999;
}

header {
	position: fixed !important;
	top: var(--p40);
	box-shadow: 0 4px 4px rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: var(--p10) var(--p50);

	.d-flex;
	.al-c;
	.jc-s;
	gap: var(--p30);
	transition: all 0.5s;
	max-width: 100%;

	.logo {
		flex: 1;
	}

	.layui-nav .layui-nav-item {
		line-height: 2.4em;
		margin: 0 0 0 var(--p50);
	}

	.layui-nav .layui-nav-item>a {
		font-size: var(--ft18);
		padding: 0;
		color: #333333;
	}

	.layui-nav .layui-nav-item>a:hover,
	.layui-nav .layui-this>a {
		color: var(--ftc);
	}

	span {
		color: #999999;
	}

	.logo img {
		transition: all 0.5s;
	}

	&.bgcolor {
		width: 100%;
		border-radius: 0;
		max-width: 100%;
		box-shadow: 0 4px 4px rgba(21, 105, 171, 0.1);
		top: 0;

		.logo img {
			// height: 40px;
		}
	}
}

main {
	flex: 1;
}

.top_box {
	width: 100%;
	position: relative;
	color: #fff;
	display: flex;
	align-items: center;
	aspect-ratio: 1920/500;
	min-height: 300px;
	.bg_fixed;

	.layui-main {
		padding: 50px 0 0;
		position: relative;
		text-align: left;
		z-index: 5;
		color: #fff;
	}

	h1 {
		font-size: var(--ft46);
		letter-spacing: 8px;
		font-weight: normal;
		line-height: 1em;
	}

	p {
		margin-top: 20px;
		font-size: var(--ft24);
		letter-spacing: 2px;

		text-transform: uppercase;
	}
}

footer {
	background: #2A2D34;
	color: #fff;

	.footer1 {
		padding: var(--p30) 0 var(--p50);

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

		.info {
			margin-top: var(--p30);
			.d-grid;
			gap: var(--p20);

			li {
				.d-flex;
				.al-fs;
				gap: var(--p20);
				line-height: 2em;
			}
		}

		nav {
			.d-flex;
			.al-fs;
			flex-wrap: wrap;
			gap: var(--p20) var(--p40);
			font-size: var(--ft18);

		}
	}

	.footer2 {
		padding: 7px 0;
		background: #000000;
		color: rgba(255, 255, 255, 0.5);
		.flex-center;
		gap: var(--p30);
	}
}

.Contact {
	color: #4B5A65;
	.d-flex;
	.al-c;
	.jc-s;
	flex-wrap: wrap;
	gap: var(--p50);
	margin-bottom: var(--p60);

	.Info {
		.d-grid;
		gap: var(--p15);
		font-size: var(--ft20);

		li {
			.d-flex;
			.al-c;
			gap: var(--p15);
		}
	}

	.Qrcode {
		.d-flex;
		gap: var(--p40);
		font-size: var(--ft18);

		li {
			.flex-column-center;

			span {
				margin-top: var(--p10);
			}
		}
	}
}
.CollList{
    .d-grid;
    .grid3;
    gap: var(--p30) var(--p40);
     .item{
         padding: var(--p60);
         height: 100%;
         .flex-column-center;
        width: 100%; 
        box-shadow: 0 0 28px rgba(220, 220, 220, 0.2);
        border-radius: 40px;
        .img1{
            transition: all 0.5s;
            flex: 1;
        }
        p{
            font-size: var(--ft18);
            margin-top: var(--p20);
        }
        &:hover{
            .img1{
                scale: 1.05;
            }
        box-shadow: 0 6px 14px rgba(0, 128, 255, 0.13);
        }
     }
}
.JoinList{
    .d-grid;
    .grid3;
    gap: var(--p40);
    .item{
        background: #Fff;
        display: block;
        height: 100%;
        width: 100%;
        padding: var(--p15) var(--p30);
        box-shadow: 0 6px 14px rgba(0, 128, 255, 0.13);
        border-radius: 22px;
        transition: all 0.5s;
        color: #333;
        font-size: var(--ft18);
        &:hover{
            cursor: pointer;
            background: var(--ftc);
            color: #fff;
            .img1{
                
                display: none;
            }
            .img2{
                display: block;
            }
        }
    }
    .more{
        .d-flex;
        .jc-s;
        .al-c;
        gap: var(--p10);
    }
    .key{
            .d-flex;
        .al-c;
        gap: var(--p10);
    }
    .img2{
        display: none;
    }
    .keywords,
    .sub{
        .line-clamp1;
        font-size: var(--ft18);
    }
    .img{
        flex-shrink: 0;
    }
    .title{
        margin: var(--p20) 0 var(--p40);
        .line-clamp1;
        font-size: var(--ft24);
    }
}
.layui-layer-btn .layui-layer-btn0{
    background: var(--ftc);
}
.layui-layer{
    max-width: 95%;
}
.SolutionList{
     .d-grid;
    gap: var(--p80);
      .item{
             .d-flex;
        .al-c;
        .jc-s;
        gap: var(--p40);
     .Text{
            width: 635px;
            max-width: 100%;
        }
        .Img{
            width: 669px;
            max-width: 100%;
            border-radius: 25px;
            
        }
          &:nth-child(even){
            flex-direction: row-reverse;
        }
        .title{
            font-size: var(--ft28);
            display: inline-block;
            position: relative;
            z-index: 1;
            line-height: 1.4em;
            &::Before{
                display: block;
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                right: 0;
                height: var(--p15);
                border-radius: 7.5px;
             background:  linear-gradient(-45deg, rgba(21, 105, 171,0.8), rgba(21, 105, 171, 0));
            }
        }
        .sub{
            font-size: var(--ft20);
            line-height: 1.8em;
            margin-top: var(--p40);
        }
      }
}
.BoutiqueList{
    .d-grid;
    gap: var(--p40);
    .item{
        .Text{
            width: 600px;
            max-width: 100%;
        }
        .d-flex;
        .al-c;
        .jc-s;
        gap: var(--p40);
        &:nth-child(even){
            flex-direction: row-reverse;
        }
        .sub{
            font-size: var(--ft18);
            line-height: 2em;
            margin-top: var(--p25);
        }
        .title{
            position: relative;
            z-index: 2;
            font-size: var(--ft28);
        }
        .num{
            font-weight: bold;
            bottom: 100%;
            font-size: 150px;
            position: relative;
            line-height: 1em;
            margin-bottom: -50px;
            color: rgba(145, 162, 176,0.2);
        }
    }
}
.ProductList{
    .d-grid;
    .grid4;
    gap: var(--p40) var(--p30);
    .item{
        display: block;
        width: 100%;
        height: 100%;
        box-shadow: 0 4px 4px rgba(247, 252, 247,1);
        .img{
            aspect-ratio: 1/1;
        }
        .Text{
            padding: var(--p20);
            text-align: center;
            .more{
                font-size: var(--ft18);
                color: var(--ftc);
            }
            .title{
                font-size: var(--ft22);
                .line-clamp1;
                margin-bottom: var(--p10);
            }
        }
        &:hover{
            
            box-shadow: 0 8px 12px #eefbee;
        }
    }
}
.productDetails{
        font-size: var(--ft18);
        
    paddingx: var(--p40) 0 var(--p100);
    h2{
        font-size: var(--ft22);
        color: #333;
    }
    hr{
        margin: var(--p20) 0;
        border-color: #E2EDE2;
    }
    .s_content{
        line-height: 1.7em;
    }
    nav{
        margin-bottom: var(--p40);
        .d-flex;
        .al-c;
        gap: var(--p20);
        font-size: var(--ft20);
    }
    .Text{
        .d-flex;
        .al-fs;
        gap: var(--p100);
        margin-bottom: var(--p80);
        .img{
            width: 455px;
            aspect-ratio: 1/1;
            max-width: 100%;
        }
        .Content{
            flex: 1;
        }
        h1{
            color: var(--ftc);
            font-size: var(--ft26);
        }
        .sub{
            margin-top: var(--p10);
            color: #728089;
        }
    }
}
.titleCome{
    text-align: center;
--main: 1620px;
    h1{
        font-size: var(--ft36);
    }
    p{
        font-size: var(--ft20);
       color: #CFCFCF;
    }

}
.aboutRongyu{
        ul{
        margin-top: var(--p40);
        .d-grid;
        gap: var(--p80);
        .item1{
            
         width: fit-content;margin: 0 auto;
            padding: 0 var(--p100);
            .flex-center;
            gap: var(--p70);
            background:url(../images/bg.png) no-repeat;
                background-position: bottom;
             background-size: contain;
        }
            .item2{
            padding: 0 var(--p100);
            .flex-center;
            gap: var(--p70);
            background:url(../images/bg1.png) no-repeat;
                background-position: bottom;
             background-size: contain;
        }
        p{
        font-size: var(--ft20);
        margin: var(--p20) 0;
            text-align: center;
        }
    }
}
.bigSwiper{
    --swiper-navigation-size:20px;
    .d-flex;
    .al-c;
    .jc-c;
    margin-top: var(--p80);
    gap: var(--p60);
    .swiper-button-prev, .swiper-button-next{
        position: relative;
        width: var(--p50);
        aspect-ratio: 1/1;
        height: var(--p50);
        color: #fff;
        .flex-center;
        border-radius: 50%;
        background:#1569AB;
    }
  
        .swiper{
            margin: 0;
            width: 900px;
            max-width: 100%;
        }
        .img{
            width: 360px;
            flex-shrink: 0;
        }
        .item{
            .flex-center;
            position: relative;
            height: auto;
        }
        .title{
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 0;color: var(--ftc);
            opacity: 0.1;
            font-size: 410px;
            line-height: 1em;
            white-space: nowrap;
        }
        .card{
            margin: var(--p80) var(--p60);
            background: #fff;
            .d-flex;
            position: relative;
            z-index: 2;
            .content{
                font-size: var(--ft18);
                line-height: 1.7em;
                background: #fff;
                padding: var(--p40) var(--p25);
            }
           
        }
   
}
.smallSwiper{
    position: relative;
    .item{
        // min-width: 120px;
        .flex-column-center;
        padding-top: var(--p70);
        font-size: var(--ft24);
        // width: auto;
    }
    .swiper{
        
    position: relative;
    z-index: 99999;
    }
    .title{
        position: relative;
        transition: all 0.5s;
    }
    .img{
        position: relative;
    }
    .img2{
        display: none;
    }
    .swiper-slide-thumb-active{
        .title{
            color: var(--ftc);
            scale: 1.2;
            bottom: var(--p50);
        }
        .img1{
            display: none;
            
        }
        .img2{
            display: block;
        }
    }
    hr{
        position: absolute;
        top: var(--p70);
        z-index: 5; 
    left: 0;
    right: 0;
        border-color: #D5DBE5;
    }
}
.AboutCorporate{
    .bg_img;
    ul{
        .d-grid;
        .grid3;
        gap: var(--p50) var(--p60);
    }
    .title{
        margin-top: var(--p20);
        font-size: var(--ft22);
        text-align: center;
       display: block;
    }
    .img{
        aspect-ratio: 440/320;
    }
    .li{
        .titleCome{
            text-align: left;
        }
        margin: var(--p100) 0;
    }
    .sub{
        font-size: var(--ft18);
        color: #728089;
        display: inline-block;
        margin: var(--p10) auto 0;
      padding:0 var(--p20);
    }
}
.AboutInfo{
    background: url(../images/bg2.png) no-repeat;

    background-position: left 90px;
    
        font-size: var(--ft20);
        line-height: 1.7em;
    ul{
        .d-grid;
        .grid2;
        
    }
    video{
        box-shadow: 10px 10px 20px rgba(0, 75, 147, 0.2);
        width: 400px;
        aspect-ratio: 400/250;
        max-width: 100%;
        border-radius: 30px 30px 0 30px;
    }
    .sub1{
        margin-right: var(--p70);
        margin-top: var(--p70);
    }
    .titleCome{
        .d-flex;
        .al-fe;
        gap: var(--p10);
        .jc-fs;
        margin-bottom: var(--p30);
    }
     li:nth-child(2){
         padding-left: var(--p40);
         padding-bottom: var(--p20);
     }
    li:first-child{
        .d-flex;
        .al-fe;
        .jc-fe;
    }
    .img{
        border-radius: 0 30px 30px 30px;
    }
    .dl{
        .d-flex;
        .al-fe;
        padding-right: var(--p20);
    }
    dl{
        gap: var(--p20);
        margin-top: auto;
        .d-flex;
    }
}
.index_swiper{
    position: relative;
    .layui-main{
        color: #fff;
            left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
        position: absolute ;
        z-index: 5;
            h1{
            margin-top: var(--p10);
            font-size: var(--ft56);
             font-weight: normal;
        }
         h2{
             font-weight: normal;
            font-size: var(--ft28);
        }
    }
    .img_100{
        display: block;
        width: 100vw;
        height: 100vh;
    }
}
.IndexJoin{
    background: #E4EFF7;
    ul{
    
        margin-top: var(--p50);
    }
}

.IndexProduct{
    background-repeat: no-repeat;
    background-position:right 90%;
    background-size: auto;
    padding-bottom: var(--p100);
    .swiperBox{
        position: relative;
        
    }
    --swiper-navigation-size:30px;
     .swiper-button-prev{
         background: #E9F1FF;
         left: -90px;
     }
     .swiper-button-next{
           right:  -90px;
     }
    .swiper-button-prev, .swiper-button-next{
        width: var(--p80);
        height: auto;
        border-radius: 50%;
        aspect-ratio: 1/1;
    }
    .swiper{
        margin-top: var(--p50);
    }
    .swiper-slide{
        padding: var(--p20);
    }
    .item{
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(0,0,0,0.08);
        &:hover{
                background: var(--ftc);
            .content{
                *{
                    color: #fff;
                }
            }
        }
    }
    .content{
        padding: var(--p20);
    }
    h5{
        font-size: var(--ft20);
        .line-clamp1;
    }
    p{
        color: #999999;
        .line-clamp1;
    }
    .img{
        aspect-ratio: 1/1;
    }
}.IndexProductCenter{
    ul{
        margin-top: var(--p40);
        .d-flex;
        li{
            flex: 1;
            .d-flex;
        }
        .item{
            
            display: block;
            flex: 1;
            height: 920px;
            &:hover{
                .content{
                    
                background: rgba(21, 105, 171,0.8);
                }
                .hr{
                    width: 2px;
                    height: 50px;
                    background: #fff;
                }
                .con{
                    display: block;
                    height: auto;
                }
            }
        }
        .content{
            padding: var(--p20) var(--p70);
            transition: all 0.5s;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            color: #fff;
            .flex-column-center;
            text-align: center;
            
        }
        .img{
            margin-bottom: var(--p40);
        }
        .hr{
            transition: height 0.5s;
            margin: var(--p25) auto;
            width: 50px;
            height: 3px;
            background: var(--ftc);
        }
        h5{
            font-size: var(--ft24);
        }
        .con{
            display: none;
            height: 0;
        }
    }
}
.IndexSoult{
    padding-bottom: var(--p50);
    background: linear-gradient(0, var(--ftc) 200px, #fff 200px);
}
.IndexSoult{
    .body{
        margin-top: var(--p40);
        .item{
            display: grid;
            grid-template-columns: 532px 1fr;
            img{
                width: 637px;
                aspect-ratio: 637/546;
                border-radius: 6px;
                object-fit: cover;
            }
            .Text{
                margin: var(--p30) 0 var(--p100);
             box-shadow: 0 3px 12px rgba(116, 116, 116, 0.16);   
             border-radius: 10px;
             padding:  var(--p20);
             background: #fff;
             h5{
                 color: var(--ftc);
                 font-size: var(--ft22);
                 margin-bottom: var(--p20);
             }
             p{
                 color: #50565A;
                 line-height: 1.7em;
             }
            }
        }
    }
    .head{
        margin-left: auto;
        width: 45%;
        .d-flex;
        .jc-s;
        .al-c;
        margin-top: -20px;
        li{
            font-size: var(--ft22);
            color: rgba(255,255,255,0.8);
            cursor: pointer;
            transition: all 0.5s;
            border-bottom: 4px solid rgba(255,255,255,0);
    &.layui-this{
            color: rgba(255,255,255,1);
            border-bottom: 4px solid  rgba(255,255,255,1);
    }
        }
        
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .index_swiper .img_100{
        height: 50vh;
    }
    .IndexSoult .body .item{
        .grid1;
    }
    .IndexSoult .head{
        width: 80%;
        margin-top: vaR(--p10);
    }
    .IndexSoult .body .item img{
        max-width: 100%;
    }
    .IndexProductCenter ul{
        .d-grid;
        .grid2;
    }
       .IndexProductCenter img{
           max-width: 40px;
       }
    .IndexProductCenter ul .item{
        height: auto;
    }
    .ProductList{
        .grid2;
    }
    .SolutionList .item{
        flex-direction: column !important;
    }
    .BoutiqueList .item .num{
        font-size: 20px;
        margin-bottom: 0;
    }
    section{
        padding: 30px 0;
    }
    .AboutInfo ul{
        gap: var(--p30);
    }
    .AboutInfo ul,
    .CollList,
    .JoinList{
        .grid1;
    }
    .productDetails .Text{
        flex-direction: column;
    }
    .footerLogo img,
	header .logo img {
		height: 40px;
	}
}

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

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

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