﻿@media screen and (max-width:768px) {
	#app {
		background-color: #fff
	}

	.phoneMenu {
		position: fixed;
		display: block;
		width: 3.2rem;
		height: 3.2rem;
		top: calc(100% - 5rem);
		left: calc(var(--innerWidth) - 5rem);

		z-index: 11;
		background-color: #ececec;
		box-sizing: border-box;
		padding: 0.3rem;
		border-radius: 0.4rem;
		opacity: 0.5;
	}

	.phoneMenu_divbox {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 1rem;
		display: flex;
		flex-direction: column-reverse;
		color: #aaa;
		font-weight: 200;
		font-size: 1.4rem;
		padding-bottom: 4rem;
	}

	.phoneMenu_divbox .item {
		width: 100%;
		text-align: center;
		padding-bottom: 1.8rem;
	}

	.phoneMenu_divbox .zhi {
		color: #eee;
		font-weight: 400;
		font-size: 1.6rem;
		width: 100%;
		text-align: center;
		padding-bottom: 1.8rem;

	}

	.menubox {
		width: 100%;
		height: var(--menu-height);
		position: fixed;
		top: 0;
		z-index: 10;
		display: none;
	}

	.banner {
		width: 100%;
		height: var(--innerHeight);
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ececec;
		font-weight: 300;

		box-sizing: border-box;
	}

	.banner_logo {
		display: block;
		width: 100%;
		height: 9rem;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 2rem;
		padding-right: 2rem;
		margin-bottom: 10rem;
		margin-top: 10rem;
	}



	.banner_info {
		width: 100%;
		font-weight: 200;
		padding-left: 2rem;
		padding-right: 2rem;
		box-sizing: border-box;
	}

	.banner_line {
		width: 95%;
		height: 1px;
		background-color: aliceblue;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/* .van-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #000 !important;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
		-webkit-overflow-scrolling: touch;
	} */



	.cloud_gys {
		width: 100%;
		box-sizing: border-box;
		padding-top: 3rem;
		padding-bottom: 3rem;
		display: grid;
		justify-content: space-evenly;
		justify-items: center;
		align-items: center;
		grid-template-columns: repeat(auto-fill, 90%);
		grid-gap: 1rem;
	}

	.cloud_gys_item {
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #aaa;
		border-radius: 0.8rem;
		padding: 0.3rem;
		min-height: 5rem;
	}

	.cloud_gys_item_img {
		width: 100%;
		display: flex;
		justify-content: center;

	}

	.cloud_gys_item_zhi {
		padding: 1rem;
		padding-top: 0.5rem;
		width: 100%;
		font-size: 1.2rem;
		letter-spacing: 0.15rem;

		box-sizing: border-box;
	}

	.cloud_gys_item_butbox {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 1rem;
	}


	.cloud_gys_item2_info {
		width: 100%;
		box-sizing: border-box;
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 1.4rem;
		letter-spacing: 0.2rem;
		line-height: 2rem;
		text-indent: 2.4rem;
	}


	.ai_div {
		width: 100%;
		min-height: 68rem;
		/* height: calc(var(--innerHeight)); */
		overflow: hidden;
		justify-content: center;
		/* background-color: #007bff; */
		/* background-image: linear-gradient(127deg, #a759d1 0%, #007bff 100%); */
	}

	.ai_v1 {
		width: 100%;
		height: 68rem;
		;
		object-fit: cover;
	}

	.ai_box {
		width: 100%;
		height: 68rem;

		position: relative;
		z-index: 10;
		top: calc(68rem * -1);
		color: aliceblue;
		display: flex;
		justify-content: center;


		/* -webkit-mask: url(./001.png) no-repeat left; */
	}

	.ai_info_box {
		width: 100%;
		height: calc(68rem - 12rem);
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.ai_info_center {
		width: 90%;
		min-width: 0px;
		/* height: 95%; */

		/* display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-rows: 50% 50%; */
		display: flex;
		flex-wrap: wrap;

	}

	.ai_info_center_div {
		width: 49%;
		height: 37%;
		border: 1px solid #ffffff21;
		position: relative;
		box-sizing: border-box;
		padding-top: 0.5rem;
		top: -1px;
		left: -1px;
		backdrop-filter: saturate(100%) blur(10px);
		-webkit-backdrop-filter: saturate(100%) blur(10px);
	}

	.ai_info_center_content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rem;

	}

	.ai_info_center_ti {
		width: 100%;
		height: 2rem;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 400;
		padding-bottom: 0.5rem;
	}

	.ai_info_center_info {
		width: 100%;
		font-size: 1rem;
		font-weight: 200;
		box-sizing: border-box;
		text-indent: 2rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
	}


	.ai_item_butbox {
		position: absolute;
		width: 100%;
		box-sizing: border-box;
		bottom: 0.6rem;
		padding: 0.5rem;
	}

	.ai_item_but {
		width: 100%;
		height: 2.8rem;
		text-align: center;
		color: #fff;
		font-size: 1.2rem;
		line-height: 2.8rem;
		border: 1px solid #ccc;
		cursor: pointer;
		box-sizing: border-box;

	}




	.software_box_info {
		width: 100%;
		display: contents;
		box-sizing: border-box;
		padding: 1rem;

		padding-bottom: 5rem;
	}

	.software_box_left {
		width: 100%;
		box-sizing: border-box;
		padding-top: 5rem;
		padding-bottom: 5rem;
		padding-left: 0rem;
		display: flex;
		justify-content: center;

	}

	.software_box_right {
		width: 100%;
		box-sizing: border-box;
		padding: 1rem;

		/* display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr); */
		/* gap: 10px; */

	}


	.software_ambox {
		--r: 360deg;
		width: 16rem;
		height: 16rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-template:
			"A A B"
			"C D B"
			"C E E";
		gap: 10px;
		animation: software_rotation 50s infinite linear;
	}



	.cinfo_box {
		width: 100%;
		min-width: 348px;
		box-sizing: border-box;
		padding: 1rem;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}


	.cinfo_box_item {
		min-width: 160px;
		width: 50%;
		display: block;

	}

	.cinfo_box_item .itemimg {
		width: 100%;
		height: 5rem;
		box-sizing: border-box;
		padding: 0.5rem;
		text-align: center;

	}

	.cinfo_box_item .itemzhi {
		width: 100%;
		height: 5rem;
		color: azure;
		box-sizing: border-box;
		padding-top: 0rem;
	}

	.cinfo_box_item .itemti {
		width: 100%;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 400;

	}

	.cinfo_box_item .itemsu {
		width: 100%;
		text-align: center;
		font-size: 1rem;
		font-weight: 300;
		padding-top: 0.2rem;
		color: #c7cad4;
	}







	.cinfo2_box .contacttitle {
		font-size: 2rem;
		color: #fff;
		width: 100%;
		text-align: center;
		font-weight: 100;
		padding-bottom: 1rem;
	}

	.cinfo2_box .subtitle {
		font-size: 1rem;
		color: #fff;
		width: 100%;
		text-align: center;
		font-weight: 100;
		box-sizing: border-box;
		padding: 1rem;
		padding-bottom: 1.6rem;

	}



	.cinfo2_box .frombox {
		width: 100%;
		display: block;
	}


	.cinfo2_box .fromleft {
		width: 100%;
		box-sizing: border-box;
		display: block;
		padding: 1rem;
	}

	.cinfo2_box .fromright {
		width: 100%;
		box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		padding: 1rem;
	}

	.cinfo2_box .info {
		width: 100%;
		height: auto;
		display: block;
		box-sizing: border-box;
		padding-bottom: 3rem;
		padding-top: 3rem;
	}

	.cinfo2_box .logo {
		width: 18rem;
		height: 13rem;
		display: none;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.cinfo2_box .infocenter {
		width: 100%;
		padding: 2rem;
		text-align: center;
		box-sizing: border-box;
		font-size: 1rem;
		font-weight: 200;
		padding-top: 3.2rem;

	}


	.cinfo2_box .inforight {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cinfo2_box .code {
		padding: 1rem;
	}

	.cinfo2_box .codeimg {
		width: 7rem;
		height: 7rem;
	}

	.cinfo2_box .codezhi {
		font-size: 1rem;
		font-weight: 200;
		width: 100%;
		text-align: center;
	}




	.about_box {
		width: 100%;
		max-width: 1200px;
		box-sizing: border-box;
		padding: 1rem;
	}

	.about_box_info {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 1.2rem;
		color: #fff;
		font-weight: 200;
		padding: 0rem;
	}


	.about_box_info .left {
		box-sizing: border-box;
		padding: 1rem;
		line-height: 2rem;
		text-indent: 2.4rem;
		border-radius: 1rem;
		background-color: rgb(0, 0, 0, 0.3);
		backdrop-filter: saturate(100%) blur(10px);
		-webkit-backdrop-filter: saturate(100%) blur(10px);
	}

	.casestudy_r {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

}