* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: "hanyi55";
	src: url("/minisite/officeapplication/fonts/HYQiHei-55S.otf");
}

@font-face {
	font-family: "hanyi75";
	src: url("/minisite/officeapplication/fonts/HYQiHei-75W.otf");
}

.hanyi55 {
	font-family: "hanyi55" !important;
}

.hanyi75 {
	font-family: "hanyi75" !important;
}

.bc-index {
	background-color: #a6deff !important;
}

.bc-meetingroom {
	background-color: #e2d9c3;
}

.bc-exit {
	background-color: #f8e5dd;
}

.bc-department {
	background-color: #8cd2ca;
}

.bc-publicarea {
	background-color: #d7edcc;
}

.bc-tearoom {
	background-color: #bdf9ff;
}

.bc-mailroom {
	background-color: #c8dacf;
}

.bc-storeroom {
	background-color: #b6bee3;
}


.color-4c {
	color: #4c4948 !important;
}

.officetitle {
	font-size: 2.5rem;
	color: #304161;
}

.d-none {
	display: none;
}

.mt-5 {
	margin-top: 5%;
}

.mt-10 {
	margin-top: 10%;
}

.officeall {
	position: relative;
	height: 550px;
	margin-top: -5%;
}

.office {
	display: none;
}

.officeph{
	margin-top: 10%;
	width: 100%;
}
#office1 {
	top: 43px;
	left: 74px;
	z-index: 1;
}

#office2 {
	top: 26.5px;
	left: 159px;
	z-index: 1;
}

#office3 {
	top: 105px;
	left: 231px;
	z-index: 1;
}

#office4 {
	top: 83px;
	left: -10px;
	z-index: 1;
}

#office5 {
	top: 75px;
	left: 142px;
	z-index: 1;
}

#office6 {
	top: 132px;
	left: 59px;
	z-index: 1;
}

#office7 {
	top: 162px;
	left: 114px;
	z-index: 1;
}

#office8 {
	width: 4%;
	top: 240px;
	left: 54px;
	z-index: 0.5;
}

#office9 {
	width: 95%;
	top: 130px;
	z-index: 0;
	filter: brightness(0.5);
}

#office10 {
	display: block;
	width: 100%;
	top: 20px;
	z-index: 0;
}

.point {
	position: absolute;
	z-index: 2;
	cursor: pointer;
}

#point1 {
	width: 125px;
	height: 40px;
	top: 115px;
	left: 90px;
	transform: rotateX(55deg) rotateZ(135deg);
}

#point1-2 {
	width: 80px;
	height: 40px;
	top: 140px;
	left: 115px;
	transform: rotateX(45deg) rotateY(140deg);
}

#point1-3 {
	width: 40px;
	height: 40px;
	top: 150px;
	left: 90px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point2 {
	width: 70px;
	height: 60px;
	top: 103px;
	left: 200px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point2-2 {
	width: 30px;
	height: 35px;
	top: 135px;
	left: 260px;
	transform: rotateX(45deg) rotateY(140deg);
}

#point3 {
	width: 80px;
	height: 90px;
	top: 175px;
	left: 270px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point3-2 {
	width: 85px;
	height: 30px;
	top: 233px;
	left: 295px;
	transform: rotateX(45deg) rotateY(140deg);
}

#point3-3 {
	width: 35px;
	height: 35px;
	top: 240px;
	left: 275px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point4 {
	width: 80px;
	height: 100px;
	top: 135px;
	left: 30px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point4-2 {
	width: 68px;
	height: 50px;
	top: 200px;
	left: 0px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point4-3 {
	width: 10px;
	height: 80px;
	top: 180px;
	left: 60px;
	transform: rotateX(45deg) rotateY(140deg);
}

#point5 {
	width: 150px;
	height: 40px;
	top: 150px;
	left: 150px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point5-2 {
	width: 175px;
	height: 40px;
	top: 190px;
	left: 120px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point5-3 {
	width: 35px;
	height: 40px;
	top: 240px;
	left: 250px;
	transform: rotateX(45deg) rotateY(140deg);
}

#point5-4 {
	width: 130px;
	height: 50px;
	top: 168px;
	left: 140px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point6 {
	width: 100px;
	height: 90px;
	top: 180px;
	left: 90px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point6-2 {
	width: 72px;
	height: 60px;
	top: 230px;
	left: 65px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point7 {
	width: 70px;
	height: 110px;
	top: 210px;
	left: 155px;
	transform: rotateX(55deg) rotateZ(45deg);
}

#point7-2 {
	width: 65px;
	height: 30px;
	top: 279px;
	left: 120px;
	transform: rotateX(45deg) rotateY(40deg);
}

#point7-3 {
	width: 100px;
	height: 40px;
	top: 270px;
	left: 165px;
	transform: rotateX(45deg) rotateY(140deg);
}

.slide:hover {
	filter: brightness(1.5);
}

.room {
	position: relative;
	height: 350px;
	margin-bottom: 15%;
}

.module {
	display: none;
	width: 250px;
	position: absolute;
	top: 0;
	left: 0;
}

.bc-phone {
	display: none;
	position: absolute;
	z-index: 11111;
	width: 100%;
	height: 150%;
	margin-top: -20%;
	background-image: linear-gradient(to bottom, rgba(16, 51, 128, 1), rgba(16, 51, 128, 0));
}

.closebtn {
	margin-left: 90%;
	width: 10%;
}

.modalph {
	display: block;
	height: 500px;
	width: 60%;
	margin-left: 20% !important;
	margin-top: 30% !important;
}

.modulepic {
	width: 100%;
}

.moduletextph {
	margin-top: 5%;
}

.colorwhite {
	color: white;
}

.btn {
	position: absolute;
	width: 17%;
}

.btn1 {
	left: 63%;
	top: 448px;
}

.btn2 {
	left: 63%;
	top: 500px;
}

.breathlight {
	position: absolute;
	width: 5%;
	z-index: 1;
}

.point-line {
	position: absolute;
	z-index: 1;
}

.bc-white {
	position: absolute;
	top: 340px;
	left: 5%;
	height: 90px;
	width: 90%;
	border-radius: 10px;
	background-color: #000000;
	opacity: 0.07;
	z-index: 0;
}

.moduletext {
	position: absolute;
	
}

.moduletext1 {
	top: 415px;
}

.moduletext2 {
	top: 365px;
}

.wrap2 {
	margin: 0 auto;
	width: 100%;
	border: none;
}

.mg3 {
	margin: 3%;
}

.broexpc {
	display: none;
}

.broexph {
	display: block;
	text-align: center;
	padding-right: 5%;
	margin-bottom: 10%;
}

.sliderlocation {
	margin-top: -20% !important;
}

@media screen and (min-width: 1000px) {
	.mg3 {
		margin-top: 3%;
		margin-left: 0;
	}
	.officeph{
		display: none;
	}
	.sliderlocation {
		margin-top: 0% !important;
	}
	.bc-phone {
		display: none;
	}
	.modulepic {
		width: 100%;
	}
	.module {
		display: block;
	}
	.room {
		height: 550px;
		margin-bottom: 15%;
	}
	.breathlight {
		position: absolute;
		top: 100px;
		left: 260px;
		width: 2%;
		z-index: 1;
		cursor: pointer;
	}
	.bc-white {
		top: 720px;
		left: 110px;
		height: 130px;
		width: 80%;
	}
	.broexpc {
		display: block;
	}
	.broexph {
		display: none;
	}
	.officeall {
		height: 1100px;
		margin-top: -15%;
	}
	.office {
		position: absolute;
		display: block;
		width: 43.5%;
	}
	.wrap2 {
		margin: 0 auto;
		width: 1140px;
		border: none;
	}
	#office1 {
		top: -18px;
		left: 215px;
		z-index: 1;
	}
	#office2 {
		top: -73px;
		left: 485px;
		z-index: 1;
	}
	#office3 {
		top: 182px;
		left: 716px;
		z-index: 1;
	}
	#office4 {
		top: 111px;
		left: -51px;
		z-index: 1;
	}
	#office5 {
		top: 85px;
		left: 434px;
		z-index: 1;
	}
	#office6 {
		top: 266.5px;
		left: 169px;
		z-index: 1;
	}
	#office7 {
		top: 362px;
		left: 344px;
		z-index: 1;
	}
	#office8 {
		width: 4%;
		top: 616px;
		left: 157px;
		z-index: 0.5;
	}
	#office9 {
		width: 108%;
		top: 280px;
		left: -10px;
	}
	#office10 {
		display: none;
	}
	.point {
		display: block;
		position: absolute;
		z-index: 2;
		cursor: pointer;
	}
	#point1 {
		width: 380px;
		height: 130px;
		top: 210px;
		left: 273px;
		transform: rotateX(55deg) rotateZ(135deg);
	}
	#point1-2 {
		width: 150px;
		height: 110px;
		top: 330px;
		left: 360px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	#point1-3 {
		width: 120px;
		height: 100px;
		top: 340px;
		left: 270px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point2 {
		width: 230px;
		height: 180px;
		top: 175px;
		left: 620px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point2-2 {
		width: 100px;
		height: 110px;
		top: 280px;
		left: 795px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	#point3 {
		width: 260px;
		height: 270px;
		top: 405px;
		left: 835px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point3-2 {
		width: 250px;
		height: 110px;
		top: 580px;
		left: 930px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	#point3-3 {
		width: 100px;
		height: 130px;
		top: 600px;
		left: 870px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point4 {
		width: 260px;
		height: 270px;
		top: 290px;
		left: 80px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point4-2 {
		width: 200px;
		height: 200px;
		top: 435px;
		left: -20px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point4-3 {
		width: 60px;
		height: 180px;
		top: 480px;
		left: 140px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	#point5 {
		width: 490px;
		height: 140px;
		top: 315px;
		left: 470px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point5-2 {
		width: 540px;
		height: 150px;
		top: 450px;
		left: 360px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point5-3 {
		width: 120px;
		height: 140px;
		top: 590px;
		left: 765px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	#point5-4 {
		width: 400px;
		height: 110px;
		top: 378px;
		left: 450px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point6 {
		width: 340px;
		height: 260px;
		top: 430px;
		left: 250px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point6-2 {
		width: 250px;
		height: 200px;
		top: 560px;
		left: 170px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point7 {
		width: 220px;
		height: 330px;
		top: 525px;
		left: 480px;
		transform: rotateX(55deg) rotateZ(45deg);
	}
	#point7-2 {
		width: 200px;
		height: 120px;
		top: 730px;
		left: 370px;
		transform: rotateX(45deg) rotateY(40deg);
	}
	#point7-3 {
		width: 310px;
		height: 120px;
		top: 710px;
		left: 510px;
		transform: rotateX(45deg) rotateY(140deg);
	}
	.btn {
		position: absolute;
		width: 27%;
	}
	.btn1 {
		left: 180px;
		top: 303.5px;
	}
	.btn2 {
		left: 180px;
		top: 354.5px;
	}
}<!--0.00010395050048828-->