.contact{
	background-color: RGBA(234, 235, 238, 1);
	background-image: url(../img/contact-bg.jpg);
	background-size: cover;
}
.contact {
    padding-bottom: 170px;
}
.contact .box1{
	position: relative;
	padding: 0 0 140px;
	z-index: 3;
}
.contact .box1 .list{
	margin-top: -110px;
}
.contact .box1 .list li{
	padding: 60px 70px 80px;
	display: flex;
	gap: 20px;
	background: #FFFFFF;
	border-radius: 20px;
}
.contact .box1 .list li>div{
	flex: 1;
}
.contact .box1 .list li .li-l{
	flex: none;
	width: calc(33.33% - 13px);
}
.contact .box1 .list li:not(:last-child){
	margin-bottom: 30px;
}
.contact .box1 .list li .telText{
	display: flex;
	align-items: center;
	font-family: HarmonyOS_Sans_SC;
	font-weight: 400;
	font-size: 16px;
	color: #999999;
	line-height: 1;
	margin-bottom: 10px;
}
.contact .box1 .list li .telText .iconfont{
	font-size: 16px;
	color: rgba(78, 173, 225, 1);
	margin-right: 11px;
}
.contact .box1 .list li .tel{
	font-family: Rany-Bold;
	color: #4EADE1;
	line-height: 1;
	/* margin-top: 10px; */
}
.contact .box1 .list li .email{
	font-family: Rany-Bold;
	font-size: 24px;
	color: #222222;
	line-height: 1;
	/* text-transform: uppercase; */
}
.contact .box1 .list li .address{
	font-family: HarmonyOS_Sans_SC_Bold;
	font-size: 18px;
	color: #222222;
	line-height: 1.2;
}
.contact .box1 .list li .iconBox{
	display: flex;
	align-items: center;
}
.contact .box1 .list li .iconBox .icon{
	width: 100px;
	height: 100px;
	background: linear-gradient(45deg, #4EADE1, #1777AC);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact .box1 .list li .iconBox .icon img{
	transition: all .6s;
}
.contact .box1 .list li:hover .iconBox .icon img{
	transform: rotateY(180deg);
}
.contact .box1 .list li .iconBox .icon + div{
	margin-left: 36px;
	font-family: HarmonyOS_Sans_SC_Light;
	font-weight: 300;
	color: #222222;
	flex: 1;
}
.contact .box1 .list li .name{
	font-family: HarmonyOS_Sans_SC_Bold;
	font-size: 20px;
	color: #4EADE1;
	line-height: 1;
}
.contact .box1 .list li .msg{
	line-height: 28px;
	margin-top: 24px;
}
.contact .box1 .list li .msg-tel{
	font-family: Rany-Bold;
	font-size: 24px;
	color: #222222;
	/* line-height: 1; */
}
.contact .box1 .list li .msg-email{
	font-family: HarmonyOS_Sans_SC_Bold;
	font-size: 18px;
	color: #222222;
	/* line-height: 1; */
	/* text-transform: uppercase; */
}
.contact .box3 .title{
    text-align: center;
}
.contact .box3 .box-c{
	margin-top: 70px;
	font-family: HarmonyOS_Sans_SC;
	padding: 60px;
	background: #fff;
	border-radius: 20px;
}
.contact .box3 .box-c .inputBoxs{
	display: grid;
	grid-template-columns: repeat(1,1fr);
	gap: 35px 26px;
}
.contact .box3 .box-c .inputBoxs .inputBox:last-child{
	/* grid-column: 1/3; */
}
.contact .box3 .box-c .inputBoxs label{
	display: block;
	font-size: 18px;
	color: #222222;
	line-height: 1;
	margin-bottom: 13px;
}
.contact .box3 .box-c .inputBoxs input,
.contact .box3 .box-c .inputBoxs textarea{
	display: block;
	width: 100%;
	outline: none;
	resize: none;
	border: none;
	background: #f8f8f8;
	border-radius: 10px;
	height: 80px;
	padding: 0 20px;
	font-weight: 300;
	font-size: 18px;
	color: #333;
	line-height: 48px;
	font-family: HarmonyOS_Sans_SC;
}
.contact .box3 .box-c .inputBoxs input::placeholder,
.contact .box3 .box-c .inputBoxs textarea::placeholder{
	color: #999999;
}
.contact .box3 .box-c .inputBoxs textarea{
	height: 230px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.contact .box3 .box-c .submit{
	width: 160px;
	line-height: 60px;
	background: #5EBBEF;
	border-radius: 10px;
	margin-top: 30px;
	font-weight: 300;
	font-size: 18px;
	color: #FFFFFF;
	text-align: center;
	cursor: pointer;
}
@media (max-width:1280px) {
	.contact .box1 .list li .iconBox .icon{
		width: 80px;
		height: 80px;
	}
	.contact .box1 .list li .iconBox .icon img{
		max-width: 40px;
		max-height: 40px;
	}
}
@media (max-width:1199px) {
    .contact .box3 .box-c{
        padding: 45px;
    }
	.contact .box1 .list li .iconBox .icon{
		width: 60px;
		height: 60px;
	}
	.contact .box1 .list li .iconBox .icon img{
		max-width: 30px;
		max-height: 30px;
	}
	.contact .box1 .list li{
		padding: 50px;
	}
	.contact .box1 .list li .iconBox .icon + div{
		margin-left: 20px;
	}
	.contact .box1 .list li .msg-tel,
	.contact .box1 .list li .email{
		font-size: 20px;
	}
	.contact .box1 .list li .address,
	.contact .box1 .list li .msg-email,
	.contact .box1 .list li .name{
		font-size: 16px;
	}
	.contact .box1{
		padding-bottom: 70px;
	}
	.contact .box3 .box-c{
	    margin-top: 45px;
	}
	.contact{
	    padding-bottom: 70px;
	}
}
@media (max-width:1024px) {
    .contact .box3 .box-c{
        padding: 40px;
    }
    	.contact .box3 .box-c{
	    margin-top: 40px;
	}
	.contact{
	    padding-bottom: 60px;
	}
	.contact .box1 .list li .li-l{
		width: 25%;
	}
	.contact .box1 .list li{
		padding: 40px;
	}
	.contact .box1 .list li .msg-tel,
	.contact .box1 .list li .email{
		font-size: 18px;
	}
	.contact .box1 .list li .iconBox .icon + div{
		margin-left: 10px;
	}
	.contact .box1 .list li .iconBox .icon{
		width: 50px;
		height: 50px;
	}
	.contact .box1{
		padding-bottom: 60px;
	}
	.contact .box3 .box-c .inputBoxs input, .contact .box3 .box-c .inputBoxs textarea{
		height: 60px;
		font-size: 16px;
	}
	.contact .box3 .box-c .inputBoxs textarea{
		height: 120px;
	}
	.contact .box3 .box-c .inputBoxs label{
		font-size:16px;
	}
}
@media (max-width:768px) {
    .contact .box3 .box-c{
        padding: 30px;
    }
    .contact .box3 .box-c .submit{
        line-height: 45px;
    }
    .contact .box3 .box-c .inputBoxs{
        gap: 25px;
    }
    	.contact .box3 .box-c{
	    margin-top: 30px;
	}
	.contact{
	    padding-bottom: 50px;
	}
	.contact .box1 .list li{
		padding: 25px;
		flex-wrap: wrap;
	}
	.contact .box1 .list li .li-l{
		width: 100%;
	}
	.contact .box1 .list li .msg{
		margin-top: 10px;
	}
	.contact .box1 .list li:not(:last-child){
		margin-bottom: 20px;
	}
	.contact .box1{
		padding-bottom: 50px;
	}
}
@media (max-width: 500px) {
    .contact .box3 .box-c{
        padding: 25px 20px;
    }
    	.contact .box3 .box-c{
	    margin-top: 25px;
	}
	.contact{
	    padding-bottom: 40px;
	}
    .contact .box3 .box-c .inputBoxs input{
		height: 45px;
	}
	.contact .box1 .list li .msg-tel, .contact .box1 .list li .email{
		font-size: 16px;
	}
	.contact .box1 .list li .address, .contact .box1 .list li .msg-email, .contact .box1 .list li .name{
		font-size: 14px;
	}
	.contact .box1 .list li .msg{
		line-height: 20px;
	}
	.contact .box1 .list li{
		padding: 20px 15px;
	}
	.contact .box1{
		padding-bottom: 40px;
	}
	.contact .box1 .list{
		margin-top: -70px;
	}
}