<template>
  <div class="main">
	  <div class="main-content">
		  <div class="onepic"></div>
		  <div class="twopic"></div>
		  <div class="threepic"></div>
		  
	  </div>
	  <div class="main-content">
		<div class="fourpic"></div>
		<div  class="fivepic"></div>
		<div  class="sixpic"></div>
		  
	  </div>
  
  </div>
</template>
<style>
	.main{
		width: 105.625rem;
		height: 53.6rem;
		margin: 20px 20px 20px 20px;
		display: flex;
		flex-direction: column;
	}
	.main-content{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.main-content{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-bottom:20px;
	}
	.onepic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/sw.jpg');
		background-size: 70% 100%;
		margin-left: 12.5rem;
		
		
	
	}
	.twopic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/bp.jpg');
		background-size: 70% 100%;
	

	}

	.threepic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/kd.jpg');
		background-size: 70% 100%;
	
	
	}
	.fourpic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/ks.jpg');
		background-size: 70% 100%;
		margin-left: 12.5rem;

	}
	.fivepic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/sy.jpg');
		background-size: 70% 100%;
	}
	.sixpic{
		width: 50%;
		height: 100%;
		background:no-repeat  url('~@/assets/images/ckq.jpg');
		background-size: 70% 100%;
	}
</style>