@font-face{
	font-family:'pingfang';
	src:url('../fonts/pfx.ttf')format('truetype')
	/*url('../fonts/pf.woff')format('woff'),*/
	/*url('../fonts/pf.woff2')format('woff2')*/
	;
}
@font-face{
	font-family:'orb';
	src:url('../fonts/orbr.ttf')format('truetype');
	
	font-weight: normal;
}
@font-face{
	font-family:'tahoma';
	src:url('../fonts/tahoma.ttf')format('truetype');
	font-weight: normal;
}

*{
	font-family: 'pingfang'!important;
}
table, tbody, td, tfoot, th, thead{
	vertical-align: top;
}
img{
	width: auto;
}
.en{
	font-family: 'orb'!important;
}
.mywarp{
	max-width: 1600px;
	margin: auto;
}

.nav-list__info .ntlist .tel h4{
	font-size: 22px;
	color: #363636;
}
.nav-list__info .ntlist .tel .phone{
	font-size: 22px;
	color: #363636;
}
.nav-list__info .ntlist .cnline {
	height: 19vh;
	width: 2px;
	background: #bbbbbb;
	margin: 40px 0;
}
.nav-list__info .ntlist .add {
	font-size: 26px;
	color: #363636;
}
.nav-list__info .ntlist .bnline {
	height: 14vh;
	width: 2px;
	background: #bbbbbb;
	margin: 40px 0;
}
.nav-list__info .ntlist .address {
}
.nav-list__info .ntlist .address h4{
	font-size: 16px;
	color: #363636;
	border-bottom: 2px solid #838383;
	padding-bottom: 10px;
}
.nav-list__info .ntlist .address .addcon{
	font-size: 14px;
	margin-top: 10px;
}

.mwork{
	padding: 4rem 0;
}
.mwork .mworkn{
	background: #fff;
	display: flex;
	justify-content: space-between;
	padding: 2rem 4rem;
	align-items: center;
}
.mwork .mworkn .wtitle h3{
	font-size: 32px;
	color: #363636;
}
.mwork .mworkn .wtitle p{
	font-size: 18px;
	color: #b8b8b8;
	margin-top: 15px;
}
.mwork .mworkn .wmore a{
	line-height: 35px;
	display: flex;
	justify-content: space-around;
    align-items: center;
	width: 10rem;
	background: url(../images/color0_grad_pc.jpg) center no-repeat;
	background-size: cover;
}
.mwork .mworkn .wmore a span{
	font-size: 14px;
	color: #fff;
}
.mwork .mworkn .wmore a:hover{
	opacity: 1;
}
.mwork .mworkn .wmore a:hover img{
	transition: .5s;
}
.mwork .mworkn .wmore a:hover img{
	transform: translate3d(10px, -.5px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(43deg) skew(0deg, 0deg);
}

.mwork .mworklist{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20rem;
}
.mwork .mworklist .item{
	width: 21%;
	background: rgba(255, 255, 255, 0.3);
}
.mwork .mworklist .item .con{
	padding: 30px 20px;
}
.mwork .mworklist .item .con h3{
	font-size: 22px;
	border-bottom: 1px solid #f7f8fc;
	color: #fff;
	padding-bottom: 5px;
	font-weight: 600;
}
.mwork .mworklist .item .con p{
	font-size: 16px;
	text-align: justify;
	color: #fff;
	margin-top: 15px;
	line-height: 1.6;
}
.mwork .mworklist .item:nth-child(2){
	transform: translateY(-5rem);
}
.mwork .mworklist .item:nth-child(3){
	transform: translateY(-10rem);
}
.mwork .mworklist .item:nth-child(4){
	transform: translateY(-2rem);
}

.mabout{
	padding: 80px 0;
}
.mtitle{
	text-align: center;
	margin-bottom: 2rem;
}
.mtitle h2{

	background: linear-gradient(to top,#488eca,#82297b,#bc3a5e,#e38750);
  	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
	font-size: 56px;
	font-weight: normal;
}
.mtitle .en{
	letter-spacing: 1em;
	font-size: 16px;
	margin-top: 3rem;
}
.mabout .mtitle h2{
	letter-spacing: 2em;
	text-indent: 2em;
}
.mabcontent{
	padding: 2rem 0;
}

#cmn-nav .nav-list .nav-list__link li:nth-child(3) .subtitle{
    position: absolute;
    height: 110vh;
    right: 16rem;
    z-index: 999999999;
    width: 160%;
    top: -40.5vh;
    background: rgba(255,255,255,0.6);
    align-content: center;
    text-align: left;
    display: none;
    transition:all .6s;
    opacity: 0;
    padding-left: 20px;
}
#cmn-nav .nav-list .nav-list__link li:nth-child(4) .subtitle{
    position: absolute;
    height: 110vh;
    right: 16rem;
    z-index: 999999999;
    width: 160%;
    top: -47.3vh;
    background: rgba(255,255,255,0.6);
    align-content: center;
    text-align: left;
    display: none;
    transition:all .6s;
    opacity: 0;
    padding-left: 20px;
}
#cmn-nav .nav-list .nav-list__link li:nth-child(6) .subtitle{
    position: absolute;
    height: 110vh;
    right: 16rem;
    z-index: 999999999;
    width: 160%;
    top: -62vh;
    background: rgba(255,255,255,0.6);
    align-content: center;
    text-align: left;
    display: none;
    transition:all .6s;
    opacity: 0;
    padding-left: 20px;
}
#cmn-nav .nav-list .nav-list__link .subtitle a{
    margin-top:2rem;
    font-size: 17px;
}
#cmn-nav .nav-list .nav-list__link li:hover .subtitle{
    display: grid;
    opacity: 1;
}

.mbfoot{
	text-align: center;
	margin-bottom: 2rem;
	margin-top: 2rem;
}
.mbfoot img{
	max-width: 100%;
	width: auto;
	margin: auto;
}
.mbfoot h3{
	background: linear-gradient(to top,#488eca,#82297b,#bc3a5e,#e38750);
  	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
	font-size: 18px;
	font-weight: normal;
	margin-top: 2rem;
	padding-right: 14px;
}

.mhonor{
	/*background: url(../images/hbg.jpg) no-repeat center;*/
	background-size: 100%;
	padding: 120px 0;
    position: relative;
}

.mahonor::before{
    content:"";
    background: url(../images/bian1.png) no-repeat center;
    width:100%;
    height:81px;
    display: inline-block;
}
.mahonor::after{
    content:"";
    background: url(../images/bian2.png) no-repeat center;
    width:100%;
    height:81px;
     display: inline-block;
}
.mahonor{
	padding: 10rem 0;
	/*background: url(../images/bian.png) no-repeat center;*/
	/*background-size: 100% 100%;*/
	width: 80%;
	margin: auto;
}
.mazg{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.mazgfl{
	display: flex;
	justify-content: space-between;
}

.mazgfl .fl{
	width: 62%;
}
.mazgfl .fr{
	width: 36%;
}
.ntitle{
	display: flex;
	align-items: center;

}
.ntitle .img{
	margin-right: 10px;
}
.ntitle h4{
	background: linear-gradient(to top,#488eca,#82297b,#bc3a5e,#e38750);
  	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
	font-size: 34px;
	font-weight: normal;
}
.malist{
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.malist .item{
	width: 32.83%;
}

.malistn{
	display: flex;
	justify-content: space-between;
	margin-top: 25px;
}
.malistn .item:nth-child(1){
	width: 46%;
}
.malistn .item:nth-child(2){
	width: 26%;
	text-align: justify;
}
.malistn .item:nth-child(3){
	width: 20%;
	text-align: justify;
}

.dc{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.dc .dc1{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.dc .dc1 .fl{
	width: 50%;
}
.dc .dc1 .fr{
	width: 40%;
}
.dc .dc2 {
	display: flex;
	justify-content: space-between;
	margin-top: 3rem;
}
.dc .dc2 .fl{
	width: 28%;
	display: grid;
	align-content: space-between;
}
.dc .dc2 .fr{
	width: 68%;
	display: flex;
	justify-content: space-between;
}
.dc .dc2 .fr .itl{
	width: 60.5%;
}
.dc .dc2 .fr .itr{
	width: 38%;
	display: grid;
	align-content: space-between;
}
.dc .dc3{
	margin-top: 4rem;
}
.dc .dc4{
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
	justify-content: space-between;
}
.dc .dc4 .fl{
	width: 48%;
}
.dc .dc4 .fr{
	width: 48%;
}


.mabcs{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.mabcs .cs2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3rem;
}
.mabcs .cs2 .fl{
	width: 30%;
}
.mabcs .cs2 .fr{
	width: 67%;
}
.mabcs .cs3{
	margin-top: 3rem;
}
.mabcs .cs4{
	margin-top: 3rem;
	display: flex;
	justify-content: space-between;
}
.mabcs .cs4 .fl{
	width: 60%;
}
.mabcs .cs4 .fr{
	width: 38%;
	display: grid;
	align-content: space-between;
}
.mjsfw{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.mjsfw .js2{
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
	justify-content: space-between;
}
.mjsfw .js2 .fl{
	width: 30%;
	display: grid;
	align-content: space-between;
}
.mjsfw .js2 .fc{
	width: 30%;
}
.mjsfw .js2 .fr{
	width: 30%;
	display: grid;
	align-content: space-between;
}
.mjsfw .js3{
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
	justify-content: space-between;
}
.mjsfw .js3 .fl{
	width: 28%;
	display: grid;
	align-content: space-between;
}
.mjsfw .js3 .fr{
	width: 70.5%;
}


.mst{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.mst .st1{
	display: flex;
	justify-content: space-between;

}
.mst .st1 .fl{
	width: 25%;
}
.mst .st1 .fr{
	width: 73%;
}
.mst .st2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3rem;
}
.mst .st2 .fl{
	width: 25%;
	display: flex;
	align-items: center;
}
.mst .st2 .fl .lwz{
	font-size: 24px;
	width: 24px;
	margin-right: 6rem;
}
.mst .st2 .fr{
	width: 73%;
}
.mst .st2 .fr .st2n{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mst .st2 .fr .st2n .nfl{
	width: 49%;
}
.mst .st2 .fr .st2n .nfr{
	width: 49%;
}
.mst .st3{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3rem;
}
.mst .st3 .fl{
	width: 25%;
	display: flex;
	align-items: center;
}
.mst .st3 .fl .lwz{
	font-size: 24px;
	width: 24px;
	margin-right: 6rem;
}
.mst .st3 .fr{
	width: 73%;
}
.mst .st3 .fr .st2n{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mst .st3 .fr .st2n .nfl{
	width: 48%;
	display: grid;
	align-content: space-between;
}
.mst .st3 .fr .st2n .nfr{
	width: 48%;
}


.macase{
	font-size: 20px;
	line-height: 1.9;
	color: #333;
	padding: 3rem 0;
}
.macase .ca1{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.macase .ca1 .item{
	width: 32.33%;
}
.macase .ca2{
	margin-top: 5rem;
}
.macase .ca2 .ca2title{
	display: flex;
	
}
.macase .ca2 .ca2title h2{
	font-size: 26px;
	margin-left: 1rem;
}
.macase .ca2 .mflex{
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
}
.macase .ca2 .mflex .fl{
	width: 59%;
}
.macase .ca2 .mflex .fr{
	width: 38%;
}
.fcn{
	/*background: linear-gradient(90deg,#488eca,#82297b,#bc3a5e,#e38750);*/
	background: url(../images/color0_grad_pc.jpg) center no-repeat;
	background-size: cover;
	color: #fff;
	font-size: 16px;
	text-align: center;
	padding: 25px 0;
	margin-top: 4rem;
}


.mjob{
	background: #e6f0f5;
	padding: 3rem 0;
}
.mjob .joblist .iteml{
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1px dashed #d6d9da;
	padding-bottom: 4rem;
	align-items: center;
	margin-bottom: 4rem;
}
.mjob .joblist .iteml .itl{
	width: 30%;
	height: 800px;
}
.mjob .joblist .iteml .itr{
	width: 45%;
	text-align: center;
}
.mjob .joblist .mycon h3{
	background: linear-gradient(to top,#488eca,#82297b,#bc3a5e,#e38750);
  	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
	font-size: 34px;
	font-weight: normal;
}
.mjob .joblist .mycon .subtitle{

	font-size: 24px;
	font-weight: normal;
	color: #333;
	margin: 15px 0;
}
.mjob .joblist .mycon .gw{

	font-size: 18px;
	font-weight: normal;
	color: #333;
	
}
.mjob .joblist .mycon .con{
	margin-top: 15px;
}

.abox {
    font-size: 40px;
    height:634px;
    background-color: #111;
    color: lime;
    text-align: center;
    line-height: 1.5em;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: animate_text 2s infinite alternate;
    z-index: 9;
}
.nb{
	 width: calc(100% - 8px);
    height: calc(100% - 8px);
	background: #edf2f4;

}

.abox::before {
    content: '';
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: inherit;
    z-index: -1;
    background-image: linear-gradient(
        10deg,
        #488eca,
        #82297b,
        #bc3a5e,
        #e38750);
    background-size: 200%;
    background-position: 0%, 50%;
    animation: animate_bg 2.5s infinite alternate;
}
.abox .img{
	position: absolute;
	left: -2rem;
	bottom: -5rem;
}
.abox .img img{
	height: 680px;
	width:446px;
}
.bbg{
	position:absolute;
	bottom:0;
	left:0;
	z-index:9999;
	
}
#bg-effect{
    overflow: hidden;
}
.bbg img{

}
.mlogor{
	position:absolute;
	top:3rem;
	right:3rem;
	z-index:9999;
	width: 150px;
}
.bfly{
	position: absolute;
	left: 10%;
	top: 5%;
	z-index: 9999;
}
.bfly img{
	width: 40%;
}
.people{
	position: absolute;
	right: 18%;
	z-index: 9999;
	bottom: -10%;
}

.people img{
	width: 26vw;
}
.rtrg{
	position: absolute;
	top: 6rem;
	left: 5rem;
	z-index: 999;
}
.rtrg img{
	width: 80%;
}
.mbwz{
	position: absolute;
	left: 5rem;
	top: 18rem;
	z-index: 9999;
}
.mbwz h2{
	font-size: 3.6rem;
	font-weight: bold;
	color: #fff;
}
.mbwz p{
	font-size: 3.6rem;
	color: rgba(255,255,255,0.7);
	margin-top: 3rem;
	font-weight: normal;
}
.jsi{
	position: absolute;
	left: 15%;
	top: 20%;
	z-index: 99999;
}
.jsi img{
    width: 80%;
}
.xmt{
	top: 45%;
	left: 15%;
}
.mnb{
    right: 13%;
    top:-5%;
}
.mnb img{
    width:38vw;
}
.dtgif{
    right: 9%;
    bottom: 0;
    position: absolute;
    z-index: 99999;
}
.dtgif img{
    width:53vw;
}
.mstar{
   right: 19%;
    bottom: -4%;
    position: absolute;
    z-index: 99999; 
}
.mstar img{
    width:30vw;
}
.cskf{
   position: absolute;
    z-index: 99999;  
    right: 16%;
    top: 8%;
}
.cskf img{
   width: 36vw;
}
.sthj{
   position: absolute;
    z-index: 99999;  
    right: 18%;
    top: 10.2%;
}
.sthj img{
   width: 28vw;
}
.xmjs{
   position: absolute;
    z-index: 99999;  
    right: 22%;
    bottom:9%;
}
.xmjs img{
   width: 52vw;
}
.hor{
    position: absolute;
    z-index: 99999;  
    right: 7%;
    bottom:12.2%;
}
.hor img{
   width: 80vw;
}
.jz{
    position: absolute;
    z-index: 99999;  
    right: 14%;
    bottom:0;
}
.jz img{
   width: 80vw;
}

@keyframes animate_bg {
    to {
        background-position: 100%, 50%;
    }
}

@keyframes animate_text {
    to {
        color: #488eca;
    }
}
.zjwz{
	position: absolute;
	left: 35%;
	z-index: 999;
	top: 35%;
}
.zjwz h4{
	font-size: 3.2rem;
	color: #fff;
}
.zjwz p{
	font-size: 1rem;
	color: #fff;
	margin-top: 1rem;
	text-indent: 2em;
}
#loading{
    z-index: 99999999;
}
#loading__bg canvas{
	height: 100vh!important;
	width: 100%!important;
	z-index: 999999;
}



@media(max-width: 780px){
	#bg-effect>div{
		left: 20px!important;

	}
	#bg-effect>div:nth-child(2) img{
		width: 100px;
	}
	#bg-effect>div:nth-child(3) img{
		width: 100px;
	}
	#bg-effect>div h2{
		font-size: 18px!important;
	}
	.mtitle .en{
		margin-top: 1.5rem;
	}
	.mwork .mworkn{
		padding: 1rem 1rem;
	}
	.mwork .mworkn .wtitle h3{
		font-size: 24px;
	}
	.mwork .mworkn .wtitle p{
		font-size: 16px;
		margin-top: 10px;
	}
	.mwork .mworklist{
		margin-top: 5rem;
	}
	.mwork .mworklist .item{
		width: 100%;
		transform: translateY(0)!important;
		margin-top: 1rem;
	}
	.ntlist{
		width: 33vw;
		margin-top: 1rem;
	}
	.nav-list__info .ntlist .tel h4{
		font-size: 18px;
	}
	.nav-list__info .ntlist .tel .phone{
		font-size: 18px;
	}
	.nav-list__info .ntlist .add{
		font-size: 20px;
	}
	.nav-list__info .ntlist .cnline{
		height: 10vh;
		margin: 15px 0;
	}
	.nav-list__info .ntlist .bnline{
		height: 6vh;
		margin: 15px 0;
	}
	#btn-nav-open .btn-bg{
		background: none;
	}
	.mwork .mworklist .item .con{
		padding: 20px 15px;
	}
	.mwork .mworklist .item .con h3{
		font-size: 18px;
	}
	.mwork .mworklist .item .con p{
		font-size: 14px;
	}

	.mabout .mtitle h2{
		letter-spacing: 0;
		text-indent: 0;
		font-size: 26px;
	}
	.mazg{
		font-size: 16px;
	}
	.mazgfl{
		flex-wrap: wrap;
	}
	.mazgfl .fl{
		width: 100%;
	}
	.mazgfl .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.ntitle h4{
		font-size: 22px;
	}
	.malistn{
		flex-wrap: wrap;
	}
	.malistn .item{
		width: 100%!important;
		margin-top: 1rem;
	}
	.mjob .joblist .iteml{
		flex-wrap: wrap;
	}
	.mjob .joblist .iteml .itl{
		width: 100%;
	}
	.mjob .joblist .iteml .itr{
		width: 100%;
	}
	.mjob .joblist .iteml .itl{
		height: 454px;
	}
	.abox{
		height: 334px;
	}
	.abox .img img{
		height: 400px;
	}
	.mycon{
		margin-bottom: 2rem;
	}
	.abox  .zz{
		left: -1rem!important;
	}
	.abox  .zl{
		right: -1rem!important;
	}
	.abox  .rl{
		left: -1rem!important;
	}
	.abox  .rr{
		right: -1rem!important;
	}
	.mabout{
		padding: 40px 0;
	}
	.macase{
		padding: 1.5rem 0;
		font-size: 16px;
	}
	.macase .ca2 .ca2title h2{
		font-size: 20px;
	}
	.macase .ca2 .mflex{
		flex-wrap: wrap;
	}
	.macase .ca2 .mflex .fl{
		width: 100%;
	}
	.macase .ca2 .mflex .fr{
		width: 100%;
	}
	.fcn{
		font-size: 14px;
		padding: 15px;
		margin-top: 2rem;
	}
	.mst{
		padding: 1.5rem 0;
		font-size: 16px;
	}
	.mst .st1{
		flex-wrap: wrap;
	}
	.mst .st1 .fl{
		display: none;
	}
	.mst .st1 .fr{
		width: 100%;
	}
	.mst .st2{
		flex-wrap: wrap;
	}
	.mst .st2 .fl{
		width: 100%;
	}
	.mst .st2 .fl .lwz{
		width: auto;
		font-size: 20px;
		margin-right: 10px;
	}
	.mst .st2 .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.mst .st2 .fr .st2n .nfl{
		width: 100%;
	}
	.mst .st2 .fr .st2n .nfr{
		width: 100%;
	}
	.mst .st3{
		flex-wrap: wrap;
	}
	.mst .st3 .fl{
		width: 100%;
	}
	.mst .st3 .fl .lwz{
		width: auto;
		font-size: 20px;
		margin-right: 10px;
	}
	.mst .st3 .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.mst .st3 .fr .st2n .nfl{
		width: 100%;
	}
	.mst .st3 .fr .st2n .nfr{
		width: 100%;
		margin-top: 1rem;
	}
	.mjsfw{
		padding: 1.5rem 0;
		font-size: 16px;
	}
	.mjsfw .js2 .fl{
		width: 100%;
	}
	.mjsfw .js2 .fc{
		width: 100%;
		margin: 1rem 0;
	}
	.mjsfw .js2 .fr{
		width: 100%;
	}
	.mabcs{
		padding: 1.5rem 0;
		font-size: 16px;
	}
	.mabcs .cs2 .fl{
		width: 100%;
	}
	.mabcs .cs2 .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.mabcs .cs4{
		flex-wrap: wrap;
	}
	.mabcs .cs4 .fl{
		width: 100%;
	}
	.mabcs .cs4 .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.mabcs .cs4 .fr p{
		width: 100%;
		margin-bottom: 1rem;
	}
	.dc{
		padding:1.5rem 0 ;
		font-size: 16px;
	}
	.dc .dc1{
		flex-wrap: wrap;
	}
	.dc .dc1 .fl{
		width: 100%;
	}
	.dc .dc1 .fr{
		margin-top: 1rem;
		width: 100%;
	}
	.dc .dc2{
		flex-wrap: wrap;
	}
	.dc .dc2 .fl{
		width: 100%;
	}
	.dc .dc2 .fr{
		width: 100%;
		margin-top: 1rem;
	}
	.dc .dc4 .fl{
		width: 100%;
	}
	.dc .dc4 .fr{
		width: 100%;
		margin-top: 1rem;
	}
}

@media(max-width:1660px){
    .bbg{
        position: inherit;
    }
    #bg-effect{
        height: auto;
        position: relative;
    }
    .mabout{
        zoom:80%
    }
    
}
@media(max-width:1280px){
    .mabout{
        zoom:60%
    }
}
@media(max-width:1000px){
    .mabout{
        zoom:50%
    }
}
@media(max-width:820px){
    .mabout{
        zoom:40%
    }
}
@media(max-width:640px){
    .mabout{
        zoom:32%
    }
}