@import "./common.less";

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

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

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

main {
	flex: 1;
}

footer {
	.social-list {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--p10);
	}

	.social-item {
		position: relative;
	}

	.social-btn {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border: none;
		outline: none;
	}

	.social-btn:hover {
		transform: scale(1.1);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}

	.weixin {
		background-color: #07C160;
	}

	.douyin {
		background-color: #000000;
	}

	.weibo {
		background-color: #E6162D;
	}

	.bilibili {
		background-color: #FB7299;
	}

	.qr-card {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 15px;
		background: white;
		border-radius: 12px;
		padding: 5px;
		width: 120px;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		transform: translateX(-50%) scale(0.95);
		transform-origin: center bottom;
	}

	.qr-card img {
		max-width: 100%;
	}

	.social-item:hover .qr-card {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) scale(1);
	}

	.qr-image {
		width: 100%;
		height: auto;
		border-radius: 8px;
	}

	.qr-text {
		font-size: 14px;
		color: #555;
		text-align: center;
	}

	.arrow {
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid white;
	}

	.footer-text {
		margin-top: 40px;
		text-align: center;
		color: #888;
		font-size: 14px;
	}

	color: #fff;
	background: #222222;

	.foot1 {
		padding: var(--p40) 0;

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

	.foot2 {
		font-size: var(--ft14);
		padding: var(--p20) 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.qrcode {
		.d-flex;
		.al-c;
		gap: var(--p20);
	}
}

/* 呼吸效果关键代码 */
@keyframes breathing {

	0%,
	100% {
		scale: 1;
		// opacity: 0.6;
	}

	50% {
		scale: 1.05;
		// opacity: 1;
	}
}

.detailsMain {
	h3 {
		text-align: center;
		font-size: vaR(--ft24);
		margin-bottom: var(--p30);
	}

	.date {
		color: var(--ftc);
		text-align: center;
		margin-bottom: var(--p40);
	}

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

.topBanner {
	aspect-ratio: 1920/650;
	position: relative;

	.img {
		height: 100%;

		img {
			scale: 1;
			animation: breathing 8s ease-in-out;
		}

		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.d-flex;
	.al-fe;
	.jc-c;

	.block {
		color: #fff;
		padding: 80px 0 var(--p80);
		position: relative;
		z-index: 9;
	}

	h1 {
		font-size: var(--ft60);
	}

	nav {
		margin-top: var(--p60);

		* {

			line-height: normal;
		}

		gap: var(--p20);
		.d-flex;
		.al-c;
	}

}

.NewList {
	.item {
		border-bottom: 1px solid #CCF0F5;
		padding: var(--p30) 0;
		.d-grid;
		grid-template-columns: 30% 1fr;
		gap: var(--p40);

		&:before {
			height: 1px;
			background: var(--ftc);
		}
	}

	.img {
		border-radius: 30px;
	}

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

	.date {
		margin-top: var(--p15);
		font-weight: bold;
		color: var(--ftc);
	}

	.sub {
		min-height: 3em;
		margin-top: var(--p15);
		color: #888888;
		.line-clamp2;
	}

	.layui-btn {
		margin-top: var(--p30);
		background: #fff;
		color: var(--ftc);
		border-radius: 24px;
		padding: 0 var(--p40);

		&::before {
			background: var(--ftc);

		}

		&:hover {
			color: #fff;
		}
	}
}

.ContactCard {
	gap: var(--p90);

	ul {
		margin-top: vaR(--p70);
		.d-grid;
		gap: var(--p35);

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

		}

		.img {
			flex-shrink: 0;
		}

		.sub {
			padding: 5px 0;
		}
	}

}

.Form {
	.en {
		font-weight: bold;
		font-size: var(--ft14);
		text-transform: uppercase;
		opacity: 0.3;
		letter-spacing: 2px;
		margin-bottom: var(--p10);
	}

	h1 {
		font-size: var(--ft32);
		margin-bottom: var(--p40);
	}

	form {
		gap: var(--p20);
	}

	.layui-input,
	.layui-textarea {
		border: none;
		background: #F5F5F5;
	}

	.layui-textarea {
		height: 180px;
	}

	.foot {
		.d-flex;
		.jc-fe;

	}

	.layui-btn {
		margin: 0;
		border-radius: 0;
		padding: 0 var(--p70);
	}
}

.contactDialog {
	max-width: 100%;
	border-radius: 30px;

	h1 {
		text-align: center;
	}

	.Form {
		padding: var(--p50);

		.foot {
			.jc-c;
		}
	}
}

.CustNav {
	color: #fff;
	background: var(--ftc);
	border-radius: 30px 30px 0px 0px;
	.d-flex;
	padding: var(--p30) var(--p40) 0;

	.item {
		border-radius: 30px 30px 0px 0px;
		cursor: pointer;
		padding: vaR(--p20) var(--p20) var(--p10);
		text-align: center;
		font-size: var(--ft30);
		flex: 1;

		&.active {

			color: #000000;
			background: #fff;
		}
	}
}

.CustList {
	.item {
		.d-grid;
		grid-template-columns: 40% 1fr;
		gap: var(--p160);
		.al-c;

		&.two {

			direction: rtl;
		}

		h5 {
			font-size: vaR(--ft30);
			margin-block: var(--p20);
		}
	}
}

.AboutParent {
	background: RGBA(243, 251, 253, 1);
	padding: var(--p50) 0;

	.layui-main {
		padding: var(--p20) var(--p60);
		overflow: hidden;
		background: #00B3CE;
		border-radius: 50px;
		color: #fff;

		h1 {
			font-size: var(--ft30);
		}

		ul {
			.al-c;
			.d-grid;
			.grid5;
			gap: vaR(--p60);

			.item {
				background: #FFFFFF;
				border-radius: 30px;
				padding: var(--p10);
				transition: all 0.3s;

				&:hover {

					box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1)
				}
			}

		}
	}
}

.AboutQiYe {
	h1 {
		font-size: vaR(--ft30);
		text-align: center;
		color: var(--ftc);
	}

	background: rgba(0, 179, 206, 0.11);

	
}
.AboutQiYeUl{
    	margin-top: vaR(--p50);
		.d-grid;
		.grid3;
		gap: vaR(--p15);

		li {
			padding: var(--p10);
			;
			transition: all 0.3s;
			background: #fff;
			position: relative;
			bottom: 0;
			aspect-ratio: 388/144;

			&:hover {
				box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
				bottom: 10px;
			}
		}
}

.AboutSikao {
	ul {
		margin-top: vaR(--p60);
		.d-flex;
		.jc-c;
		gap: var(--p60) vaR(--p180);
		flex-wrap: wrap;

		.item {
			width: 270px;
			max-width: 100%;

		}

		.user {
			margin: 0 auto;
			width: 50%;
			aspect-ratio: 1/1;
			border-radius: 50%;
		}

		h1 {
			position: relative;
			font-size: var(--ft30);

			line-height: 1em;
			margin-bottom: -5px;

			img {
				position: absolute;
				top: -20px;
				left: 0;
				z-index: 0;
			}

			span {
				position: relative;
				z-index: 1;
			}
		}

		.sub {
			background: #E5F7FA;
			padding: vaR(--p25);
		}
	}
}

.AboutInfo {
	color: #222222;
	.bg_img;
	background-size: contain;
	background-position: center;
	background-color: #E5F7FA;

	.grid-row {
		gap: var(--p30) var(--p50);
	}

	.img_box {
		border-radius: 20px;
	}
}

.AboutGongChange {
	h1 {
		font-size: var(--ft30);
		text-align: center;

		b {
			color: var(--ftc);
		}
	}

	.swiper {
		margin-top: vaR(--p60);
	}

	.item {
		position: relative;
		border-radius: 30px;
		overflow: hidden;
		margin-bottom: vaR(--p30);

		&:hover {
			.block {
				top: 0;
			}
		}

		.block {
			.al-fs;
			.jc-fe;
			.d-flex;
			flex-direction: column;
			transition: all 0.5s;
			padding: var(--p30);
			top: 100%;
			width: 100%;
			height: 100%;
			position: absolute;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
		}

		h5 {
			font-weight: normal;
			font-size: var(--ft20);
		}

		.en {
			opacity: 0.6;
			font-size: vaR(--ft14);
		}

	}

	.img {
		aspect-ratio: 371/285;
	}

	.swiper-pagination {
		position: relative;
		--swiper-pagination-progressbar-bg-color: #E1E1E1;
		--swiper-pagination-color: var(--ftc);
	}
}
header {
	padding: var(--p20) 0;
	--main:1400px;
.logo{
    flex: 1;
}
	.layui-nav .layui-this:after,
	.layui-nav-bar {
		display: none;
	}

	.layui-nav .layui-nav-item>a {
		font-size: var(--ft18);
	}

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

	.layui-nav .layui-nav-item>a {
		color: #fff;
	}

	--btn:40px;
	--btn_size:16px;

	.layui-btn {
		border-radius: 20px;
	}

	.dropdown {
		.d-flex;
		background: initial;
		border-color: #fff;
	}

	.zx {
		transition: all 0.3s;

		i {
			transition: all 0.3s;
			margin-left: 5px;
		}

		&:hover {
			i {

				margin-left: 10px;
			}
		}
	}

	.foot {
		.d-flex;
		.al-c;
		margin-left: var(--p20);
		gap: var(--p20);
	}

	&.top,
	&.bgcolor {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
	}

	.layui-nav-child {
		background: #FFFFFF;
		border-radius: 30px;
		border: 4px solid #00B3CE;
		width: max-content;
		overflow: hidden;

		.item {
			border-bottom: 1px dashed #00B3CE;
			.d-flex;
			.al-c;
			gap: 10px;
		}

		.img {
			width: 80px;
		}

		span {
			min-width: 6em;
		}

		dd:last-child {
			.item {
				border-bottom: none;
			}
		}
	}
}

.swiperBox {
	.d-grid;
	.al-c;
	grid-template-columns: 1fr 90px;
	gap: var(--p20);

	.mySwiper2 {
		.swiper-slide {
			height: 400px;
		}
	}

	.swiper1 {
		position: relative;

		.button-next,
		.button-prev {
			text-align: center;
			cursor: pointer;
			height: auto;

			i {

				font-size: var(--ft24);

			}
		}
	}

	.mySwiper {
		max-height: 400px;

		.swiper-slide {

			opacity: 0.6;
			aspect-ratio: 1/1;
			cursor: pointer;

			&.swiper-slide-thumb-active {
				opacity: 1;
			}
		}

	}
}

.productPage {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;

	background-color: rgba(0, 179, 206, 0.1);

	h1 {
		color: var(--ftc);
		text-align: center;
		font-size: var(--ft48);
		margin-bottom: var(--p40);
	}

	.pagenum {
		padding-top: var(--p40);
		border-top: 1px solid #E6E6E6;
	}

}

.Product {
	padding-top: var(--p160);

	.Card {
		.d-grid;
		.grid2;
		gap: var(--p50);
		background: #FFFFFF;
		border-radius: 10px;
		padding: var(--p30) var(--p60);
		box-shadow: 0 30px 60px rgba(0, 0, 0, 0);
	}

	h1 {
		color: var(--ftc);
		font-size: var(--ft30);
	}

	dl {
		margin-top: vaR(--p30);

		dd {
			padding: var(--p20) 0;
			.d-flex;
			.al-c;
			gap: var(--p20);
			border-bottom: 1px solid rgba(66, 190, 213, 0.2);
		}

		.img {
			flex-shrink: 0;
		}
	}

	.layui-btn {
		border-radius: 24px;
		padding: 0 var(--p40);
		margin-top: var(--p40);
	}

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

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

	.item {
		background: #FFFFFF;
		border-radius: 10px;
		border: 4px solid #3CD2E9;
		padding: var(--p40) var(--p30);

		h5 {
			text-align: center;
			display: block;
		}

		&:hover {
			.img {

				transform: rotateY(180deg);
			}
		}

		.img {
		    margin: var(--p20) 0;
			transition: all 0.3s;
			aspect-ratio: 1/1;
		}
	}

	.layui-btn {
		display: block;
		;
		background: #fff;
		color: var(--ftc);
		border-radius: 24px;
		padding: 0 var(--p40);
		margin: var(--p30) auto 0;

		&::before {
			background: var(--ftc);

		}

		&:hover {
			color: #fff;
		}
	}
}
	.blue-btn {
		display: block;
		background: #fff;
		color: var(--ftc);
		border-radius: 24px;
		padding: 0 var(--p40);
		margin: var(--p30) auto 0;

		&::before {
			background: var(--ftc);

		}

		&:hover {
			color: #fff;
		}
	}

.ProductDetailsMain {
	.Product {
		.bg_img;
		background-position: bottom;
		background-color: rgba(0, 179, 206, 0.4);
	}

	.Info {
		background-repeat: repeat;

		background-repeat: repeat;
		background-size: 100% auto;
		background-position: top center;

		li {
			padding: var(--p60) 0;
			border-bottom: 1px solid rgba(0, 179, 206, 0.1);
			.d-grid;
			grid-template-columns: 30% 1fr;
		}

		li:last-child {
			border-bottom: 0;
		}

		h5 {
			font-size: var(--ft40);
			color: var(--ftc);
		}

		dl {
			.d-grid;
			gap: var(--p25);
		}

		dd {
			background: #D0F9FF;
			padding: 5px;

			.item {
				border: 1px solid rgba(7, 0, 2, 0.1);
				.d-flex;
				font-weight: bold;

				b {
					color: var(--ftc);
					min-width: 10em;
					text-align: center;
				}

				.content {

					border-left: 1px solid rgba(7, 0, 2, 0.1);
					flex: 1;
				}

				* {
					padding: var(--p20);
				}
			}
		}
	}


}
.IndexChoss{
    background: rgba(0, 179, 206, 0.1);
    .AboutQiYeUl{
        margin-top: vaR(--p25);
    }
}
 .IndexChossUl{
        margin-top: var(--p60);
        .d-grid;
        .grid2;
        gap: var(--p25);
        li{
            background: #fff;
            .d-flex;
            .al-c;
            gap: var(--p20);
            padding: var(--p30) var(--p30);;
            transition: all 0.3s;
            .img{
                flex-shrink: 0;
              
            }
              h5{
                    font-size: var(--ft24);
                }
                .sub{
                    margin-top: vaR(--p10);
                    color: rgba(136, 136, 136, 1);
                }
                &:hover{
                    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
                }
        }
    }

.Index{
    --main:1400px;
    h1{
        text-align: center;
        font-size: var(--ft40);
        span{
            color: var(--ftc);
        }
    }
    .AboutGongChange{
        .btn{
            .flex-center;
        }
        .item{
            border-radius: 0;
        }
    }
   
}
.IndexDingZhi{
    .bg_fixed;
    color: #fff;
    h1{
        text-align: left;
    }
    .sub{
        margin-top: vaR(--p20);
        opacity: 0.6;
    }
    ul{
        margin-top: var(--p30);
        .d-flex;
        .al-c;
        flex-wrap: wrap;
        gap: var(--p40);
        li{
            .d-flex;
            .al-c;
            gap: var(--p10);
        }
    }
    .foot{
        .d-flex;
        gap: var(--p20);
        flex-wrap: wrap;
        margin-top: var(--p60);
    }
    .layui-btn{
        margin: 0;
    background: initial;
    color: #fff;
    border-color: #fff;
    transition: all 0.3s;
    padding: 0 var(--p60) ;border-radius: 24px;
    &:hover{
        opacity: 1;
        background: #fff;
        color: #000;
        padding: 0 var(--p80);
    }
    }
}
 .white-btn{
        margin: 0;
    background: initial;
    color: #fff;
    border-color: #fff;
    transition: all 0.3s;
    padding: 0 var(--p60) ;border-radius: 24px;
    &:hover{
        opacity: 1;
        background: #fff;
        color: #000;
        padding: 0 var(--p80);
    }
 }
 .white-bg-btn{
            margin: 0;
    background: initial;
 
        border-color: #fff;
    
        background: #fff;
        color: #000;
    transition: all 0.3s;
    padding: 0 var(--p60) ;border-radius: 24px;
    &:hover{
        opacity: 1;
           color: #000;
    border-color: #fff;
        padding: 0 var(--p80);
    } 
 }
.IndexProduct{
    background: rgba(0, 179, 206, 0.1);
    h1{
        color: var(--ftc);
    }
 
      .ProductList{
        margin-top: var(--p60);
          gap: var(--p25);
      }
    .ProductList .item{
        border: none;
        border-radius: 0;
    }
}
.IndexAboutInfo{
    .img{
        padding: var(--p20);
        background: var(--ftc);
        &:hover{
            img{
                
                animation: 1s 0.2s bounceIn both;
            }
        }
    }
.Text{
    padding: var(--p50) 0;background: #F7F7F7;
}
text-align: center;
h5{
font-size: var(--ft40);
}
ul{
    .d-grid;
    .grid3;
    .al-c;
    .jc-c;
}
li{
    padding: var(--p20) 0;
    border-right: 1px solid #E1E1E1;
    &:last-child{
        border-right: none;;
    }
}
.sub{
    font-weight: bold;
    font-size: var(--ft18);
    color: var(--ftc);
}
    
}
    .IndexAbout{
        .d-grid;
        .grid2;
        .al-c;
        .img{
            height: 100%;
        }
        h1{
            text-align: left;
        }
        .sub{
            color: #888888;
            margin-top: var(--p30);
        }
        .foot{
            margin-top: vaR(--p50);
            .d-flex;
            .al-fs;
            .jc-fs;
            .layui-btn{
                margin: 0;
            }
        }
        
    }
 .index_swiper{
     --main:1400px;
      .SwiperItem{
        aspect-ratio: 1920/740;
        height: auto;
    }
    .block{
        padding: 60px 0;
    }
    .t1{
        font-size: vaR(--ft40);
    }
    .sub{
        opacity: 0.6;
        margin-top: vaR(--p20);
    }
       .t3{
        margin-top: vaR(--p50);
    }
       
     
 }
 .searchMain{
     background-image: linear-gradient(0.0deg, rgba(255, 255, 255, 1) 0.0, RGBA(34 ,189 ,213,0.5) 100.0%);
     .head{
         .d-flex;
         .al-c;
         gap: var(--p20);
         flex-wrap: wrap;
         .jc-s;
         h1{
             font-weight: normal;
             color: #fff;
             color: var(--ftc);
             font-size: var(--ft50);
         }
         .layui-input{
             background: #fff;
             border-radius: 25px;
         }
         .layui-btn{
             padding:0 var(--p40) ;
             border-radius: 25px;
         }
     }
     .ProductList{
         margin-top: vaR(--p60);
     }
 }
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
	.navMobile {
        background: rgba(0, 0, 0, 0.5);
	}
	.IndexChossUl,
.IndexAbout,
	.Product .Card {
		.grid1;
	}
.IndexChossUl li .img{
    width: 40px;
}
.IndexDingZhi ul li .img{
    width: 20px;
}
	header .layui-btn {
		font-size: vaR(--ft14);
	}

	.AboutSikao .title img {
		max-height: 80px;
	}

	.ProductDetailsMain .Info dd .item {
		.d-grid;
	}

	.ProductList,
	.AboutQiYeUl,
	.AboutParent .layui-main ul {
		.grid2;
	}

	.topBanner nav img {
		width: 10px;
	}

	:root {
		--btn_size: 14px;
		--btn: 30px;
		--input: 40px;
		--input_size: 14px;

	}

	.footerLogo img {
		max-height: 40px;
	}

	footer .social-btn {
		width: 20px;
	}

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

@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) {}