html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

	  a{text-decoration:none;color:#333}

	  ul,li,h4,h3,h2{list-style:none;padding:0;margin:0}

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-container: center;
        justify-container: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      body {
        background: #eee;
      }

      .swiper {
        width: 100%;
        margin: 0 auto;
      }

      div[class^="container"] {
        height:100vh;
      }
	  .container2 div[class^="pics"] {
		  width: 500px;
        height:300px;
		position: absolute;
      }

	  .container1 .pics {
	width:100%;
	height:100%;
	position:relative;
}

.container1 .pics h4 {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  padding: 10px 2%;
  left: 0;
  bottom: 0px;
  width: 96%;
  background-color: rgba(220,30,30,0.8);
  color: #fff;
  position: absolute;
}

.container2 .pics h4 {
	font-size: 20px;
	line-height: 20px;
	height: 20px;
	text-align: center;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	padding: 10px 2%;
	left: 0;
	bottom: 0px;
	width: 96%;
	background-color: rgba(220,30,30,0.8);
	color: #fff;
	position: absolute;
  }

	  .container2 img,.container1  img{
		  width: 100%; right: 100%; }

		  .container2 .pics1,.container2 .pics3
		  {
			  left:50px;
		}
		.container2 .pics2,.container2 .pics4
		{
			right:50px;
	  }
	  .container2 .pics3,.container2 .pics4
	  {
		  top:500px;
	}
	.container2 .pics1,.container2 .pics2
	{
		top:150px;
  }
			
	  .headercontainer{  
        width: 100%;
		min-width: 1200px;
        height: 100vh !important;; 
        background-color:rgb(28, 2, 143);
	  }

	  .containerbox{
height: 800PX !important;;    
        width:1200px;
		position: relative;
		margin: 0 auto;
	  }
	.headercontainer .containerbox{  
        width: 100%;
		min-width: 1200px;
        height: 100vh !important;; 
    background: url(../images/bg.jpg) 50% no-repeat;
	  }

	  .headercontainer video {
		position: absolute;
		width: 100%;
		width: calc(100% + 2px);
		height: 100%;
		left: -1px;
		top: 0px;
		object-fit: cover;
		object-position: center top;
		z-index: 1;
	}
	.headercontainer .title {
	  position: absolute;
	  left: 268px;
	  top:22%;
	  z-index: 3;
  }
  .headercontainer .logo {
	position: absolute;
    width: 202px;
    height: 52px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
	background-size: 100% 100%;
	left: 960px;
	top:70px;
	z-index: 4;
}
  .headercontainer .title2 {
	position: absolute;
	left: 360px;
	top:60%;
	z-index: 4;
}
.headercontainer .title3 {
	position: absolute;
	left: 310px;
	top:32%;
	z-index: 2;
}
.headercontainer .bottom a{
	margin: 0 auto;
	bottom: 10%;
	position: absolute;
	left: 50%;
	transform:translate(-50%,0);
	width: 100px;
	border-radius: 50px;
	background-color: red;
	border: 1px solid #eee;
	height: 26px;
	font-size: 16px;
	line-height: 16px;
	color: #fff;
	padding-top: 10px;
	z-index: 3;
}

.camare{
	margin: 0 auto;
	bottom: 30%;
	position: absolute;
	left: 520px;
	width: 160px;
	height: 160px;
	z-index: 3;
    background-image: url(../images/camare.png);
}


.list1{
	margin: 0 auto;
	top: 20%;
	position: absolute;
	left: 0px;
	width: 530px;
	height: 660px;
	z-index: 3;
}

.list2{
	margin: 0 auto;
	top: 20%;
	position: absolute;
	right: 0px;
	width: 530px;
	height: 660px;
	z-index: 3;
}


.middle{
	margin: 0 auto;
	top: 16%;
	position: absolute;
	left: 570px;
	width: 57px;
	height: 691px;
	z-index: 3;
    background-image: url(../images/dbs.png);
}


.headercontainer .bottom a:hover{
  background-color: red;
  color: rgb(217, 255, 4);
}
.container1 .Swiper1{
		  position: absolute;
		  width: 600px;
		  height: 337px;
		  left: 0px;
		  top: 200px;overflow: hidden;
	  }
	  .containerbox2 .Swiper2{
		  position: absolute;
		  width: 600px;
		  height: 300px;
		  right: 20px;
		  top: 20px;
	  }

	  .bottom a{
		  margin: 0 auto;
		  bottom: 10%;
		  position: absolute;
		  left: 50%;
		  transform:translate(-50%,0);
		  width: 100px;
		  border-radius: 50px;
		  background-color: red;
		  border: 1px solid #eee;
		  height: 26px;
		  font-size: 16px;
		  line-height: 16px;
		  color: #fff;
		  padding-top: 10px;
	  }
	  .bottom a:hover{
		background-color: red;
		color: rgb(217, 255, 4);
	}


	.container1{
		background: url(../images/img1.jpg) 50% no-repeat;
	}
	.container2{
		background: url(../images/img2.jpg) 50% no-repeat;
	}
	.container3{
		background: url(../images/img3.jpg) 50% no-repeat;
	}
	.container1 .con_tit{
		position: absolute;
		top:30px;
		left: 0;
		width: 1200px;
		height: 100px;
		background: url(../images/tit1.png) 50% top no-repeat;
	}

	.container2 .con_tit{
		position: absolute;
		top:30px;
		left: 0;
		width: 1200px;
		height: 100px;
		background: url(../images/tit2.png) 50% top no-repeat;
	}

	.container3 .con_tit{
		position: absolute;
		top:30px;
		left: 0;
		width: 1200px;
		height: 100px;
		background: url(../images/tit3.png) 50% top no-repeat;
	}
	.container1 .head_tit{
		position: absolute;
		top:100px;
		left: 0;
		width: 1200px;
		height: 60px;
	}
	
	.container1 .list{
		position: absolute;
		width: 570px;
		left: 630px;
		top: 200px;
	}

	.container1 .listbox{
		position: absolute;
		width: 560px;
		left: 0;
		top: 553px;
		background: url(../images/titbg.png) 50% top no-repeat;
		padding: 20px;
		height: 185px;
	}

	.container1  .list li{
		width: 570px;
height: 170px;
border-bottom: 1px solid #d00;
float: left;
margin-bottom: 30px;
	}
	.container1  .list a{display: block;
		width: 580px;
		height:170px;
	}
	.container1  .list h4 {
		font-size:22px;
		width: 570px;
		line-height:22px;
		height:22px;
		text-align:left;
		font-weight:bold;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:0px;
		padding: 0 0 20px 0;
		margin: 0;
	}
	


	
	.container1  .listbox li{
		width: 480px;
height: 16px;
border-bottom: 1px dotted rgb(241, 174, 174);
float: left;
padding-bottom: 15px;
margin:0px 0 20px 98px;
	}
	.container1  .listbox a{display: block;
		width: 580px;
		height:170px;
	}
	.container1  .listbox h4 {
		font-size:16px;
		width: 570px;
		line-height:16px;
		height:16px;
		text-align:left;
		font-weight:normal;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:0px;
		padding: 0 0 20px 0;
		margin: 0;color: #fff;
	}

	.container1  .list   .abstract {
		width: 350px;
		float: right;
		font-size:16px;
		line-height:30px;
		height:120px;
		text-align:left;
		font-weight:normal;
		white-space:normal;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:32px;
		color:#666;
	}
	.container1  .list   .asidepic {
		width: 210px;
		float: left;
		font-size:16px;
		line-height:30px;
		height:120px;
		text-align:left;
		font-weight:normal;
		white-space:normal;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:32px;
		color:#666;
	}

	b {
		color:orange;
		font-weight:normal;
	}
	b:hover {
		color:red;
		font-weight:bold;
	}
	.container3  .list li{
		width: 530px;
height: 160px;
border-bottom: 1px dotted rgb(241, 174, 174);
float: left;
padding-bottom: 25px;
margin:0px 0 20px 0;
	}
	.container3  .list a{display: block;
		width: 530px;
		height:170px;
	}
	.container3  .list h4 {
		font-size:20px;
		width: 530px;
		line-height:20px;
		height:20px;
		text-align:left;
		font-weight:bold;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:0px;
		padding: 0 0 20px 0;
		margin: 0;color: #333;
	}

	.container3  .list   .abstract {
		width: 330px;
		float: right;
		font-size:16px;
		line-height:30px;
		height:120px;
		text-align:left;
		font-weight:normal;
		white-space:normal;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:32px;
		color:#666;
	}
	.container3  .list   .asidepic {
		width: 180px;
		float: left;
		font-size:16px;
		line-height:30px;
		height:120px;
		text-align:left;
		font-weight:normal;
		white-space:normal;
		overflow:hidden;
		text-overflow:ellipsis;
		text-indent:32px;
		color:#666;
	}
.container1 .listbox .li_100123843 li a {
    width: 100%;
    text-align: right;
    color: #9f9d9d;
}.container1 .listbox .li_100123843 li {
    border-bottom: none;
    width: 80%;
}
.container4 {
		height: 160px!important;
		background-color: #d00;
		color: #fff;
	}
	
	.container4  .containerbox {
		height: 130px!important;
		padding-top: 30px;
		font-size: 14px;
	}
	.brey_flash {
		-webkit-animation-name:flash;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-name:flash;
		-moz-animation-timing-function: ease-in-out;
		animation-name:flash;
		animation-timing-function: ease-in-out;
	}
	@-webkit-keyframes flash {
		0% {opacity:1;}
		50% {opacity:0;}
		100% {opacity:1;}
	}@-moz-keyframes flash {
		0% {opacity:1;}
		50% {opacity:0;}
		100% {opacity:1;}
	}@keyframes flash {
		0% {opacity:1;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	.brey_roll {
		-webkit-animation-name:roll;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-name:roll;
		-moz-animation-timing-function: ease-in-out;
		animation-name:roll;
		animation-timing-function: ease-in-out;
	}
	@-webkit-keyframes roll{
		0% {transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}@-moz-keyframes roll {
		0% {transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}@keyframes roll {
		0% {transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}
	
	.brey_scale {
		-webkit-kanimation-name:scale;
		-webkit-kanimation-timing-function: ease-in-out;
		-moz-animation-name:scale;
		-moz-animation-timing-function: ease-in-out;
		animation-name:scale;
		animation-timing-function: ease-in-out;
	}
	@-webkit-keyframes scale {
		0% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
		50% {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);}
		100% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
	}@-moz-keyframes scale {
		0% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
		50% {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);}
		100% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
	}@keyframes scale {
		0% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
		50% {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);}
		100% {-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0);}
	}
	.brey_time{
		animation-duration:0.5s;
		-moz-animation-duration:0.5s;
		-webkit-animation-duration: 0.5s;
		transition-duration:0.5s;
		-moz-transition-duration:0.5s;
		-webkit-transition-duration:0.5s;
	}
	.brey_time1{
		animation-duration:1s;
		-moz-animation-duration:1s;
		-webkit-animation-duration: 1s;
		transition-duration:1s;
		-moz-transition-duration:1s;
		-webkit-transition-duration:1s;
	}
	.brey_time2{
		animation-duration:2s;
		-moz-animation-duration:2s;
		-webkit-animation-duration: 2s;
		transition-duration:2s;
		-moz-transition-duration:2s;
		-webkit-transition-duration: 2s;
	}
	.brey_time3{
		animation-duration:3s;
		-moz-animation-duration:3s;
		-webkit-animation-duration: 3s;
		transition-duration:3s;
		-moz-transition-duration:3s;
		-webkit-transition-duration: 3s;
	}
	.brey_time10{
		animation-duration:10s;
		-moz-animation-duration:10s;
		-webkit-animation-duration: 10s;
		transition-duration:10s;
		-moz-transition-duration:10s;
		-webkit-transition-duration: 10s;
	}
	.brey_time30{
		animation-duration:30s;
		-moz-animation-duration:30s;
		-webkit-animation-duration: 30s;
		transition-duration:30s;
		-moz-transition-duration:30s;
		-webkit-transition-duration: 30s;
	}
	.brey_count0{
		animation-iteration-count: infinite;
	}
	.brey_count1{
		animation-iteration-count: 1;
	}
	.brey_count10{
		animation-iteration-count: 10;
	}
	.swiper-slide .brey_show{
		opacity:0;
		transition-property:all;}
	.ani-slide .brey_show{
		opacity:1;
		}
	.swiper-slide .brey_from_left{
		transform:translateX(-200px);
		opacity:0;
		transition-property:all;
	}
  	.ani-slide .brey_from_left{
		transform:translateX(0px);
		opacity:1;
	}
	.swiper-slide .brey_from_right{
		transform:translateX(200px);
		opacity:0;
		transition-property:all;
	}
  	.ani-slide .brey_from_right{
		transform:translateX(0px);
		opacity:1;
	}
	.swiper-slide .brey_from_up{
		transform:translateY(-200px);
		opacity:0;
		transition-property:all;
	}
  	.ani-slide .brey_from_up{
		transform:translateY(0px);
		opacity:1;
	}
	.swiper-slide .brey_from_down{
		transform:translateY(200px);
		opacity:0;
		transition-property:all;
	}
  	.ani-slide .brey_from_down{
		transform:translateY(0px);
		opacity:1;
	}
	
	.nav {
		width: 100%;
		height: 50px;
		background-color:  #d00;
		position: fixed;
		top:0;
		z-index: 1;
		box-shadow: 0 10px 10px rgba(109, 109, 109, 0.8);

	}
	.nav .containerbox{
		width: 1200px;
		height: 50px!important;
		background: url(../images/nav.jpg) 50% top no-repeat;
	}
	
	.nav ul{
		margin: 0 0 0 650px;
	}

	.nav li{
		width: 88px;
		font-size: 16px;
		padding: 17px 6px;
		float: left;
		height: 16px;
		line-height: 16px;
		text-align: center;
	color: #eee;}
	
	.nav li:hover{
		background-color: rgba(177, 13, 13, 0.8);
	}
	h1:hover,
	h2:hover,
	h3:hover,
	h4:hover {
	 color:red!important;
	 font-weight:bold!important;
	}
	.abstract:hover {
	 color:#990000!important;
	}
	.container1 .listbox h4:hover ,.pics h4:hover{
	 color:rgb(253,255,110)!important
	}

  @media screen and (orientation:portrait){
	div[class^="container"] {
    overflow: hidden;
    min-width: 1200px;
    background-size: cover;
}
	.containerbox {
}	#video1{display:none}
	.headercontainer .containerbox {

    background-size: cover;
}.headercontainer .title {
    left: 128px;
}.headercontainer .title2 {
    left: 300px;
}.title img,.title2 img{
    width:150%;height:150%;
}
.containerbox {
  height: 2000PX !important;
  width: 1200px;
  position: relative;
  margin: 0 auto;
}

.container1 .Swiper1 {
  position: absolute;
  width: 1000px;
  height: 562px;
  left: 120px;
  top: 260px;
  overflow: hidden;
}
.container1 .list {
  position: absolute;
  width: 1000px;
  left: 130px;
  top: 880px;
}
.container1 .list li {
  width: 900px;
  height: 200px;
  border-bottom: 1px solid #d00;
  float: left;
  margin-bottom: 30px;
}
.container1 .list a {
  display: block;
  width: 100%;
  height: 202px;
}
.container1 .list h4 {
  font-size: 36px;
  width: 100%;
  line-height: 36px;
  height: 36px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 0px;
  padding: 0 0 20px 0;
  margin: 0;
}
.container1 .list .abstract {
  width: 660px;
  float: right;
  font-size: 22px;
  line-height: 40px;
  height: 120px;
  text-align: left;
  font-weight: normal;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 32px;
  color: #666;
}
.container1 .listbox {
  position: absolute;
  width: 920px;
  left: 120px;
  top: 1580px;
  background: url(../images/titbg.png) 50% top no-repeat;
    background-size: auto;
  padding: 20px;
  height: 185px;
  background-size: cover;
  height: 320px;
}

.container1 .listbox li {
  width: 780px;
  height: 40px;
  border-bottom: 1px dotted rgb(241, 174, 174);
  float: left;
  padding-bottom: 15px;
  margin: 10px 0 20px 158px;
}
.container1 .listbox a {
  display: block;
  width: 100%;
}
.container1 .listbox h4 {
  font-size: 32px;
  width: 100%;
  line-height: 32px;
  height: 32px;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 0px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #fff;
}
 .con_tit {
  position: absolute;
  top: 30px;
  left: 0;
  width: 1200px;
  height: 200px;
  background: url(../images/tit1.png) 50% top no-repeat;
  background-size: 200% 100%;
}


.container1 .con_tit {
  position: absolute;
  top: 30px;
  left: 0;
  width: 1200px;
  height: 200px;
  background: url(../images/tit1.png) 50% top no-repeat;
  background-size: 200% 100%;
}		
		
.container3 .con_tit {
  position: absolute;
  top: 30px;
  left: 0;
  width: 1200px;
  height: 200px;
  background: url(../images/tit3.png) 50% top no-repeat;
  background-size: 200% 100%;
}		
		
.container2 .con_tit {
  position: absolute;
  top: 30px;
  left: 0;
  width: 1200px;
  height: 200px;
  background: url(../images/tit2.png) 50% top no-repeat;
  background-size: 200% 100%;
}		
		
.container2 div[class^="pics"] {
  width: 800px;
  height: 400px;
  position: absolute;
}
	.container2 .pics1  {
  top: 250px;
		left: 200px;
}
		
		.container2 .pics2 {
  top: 670px;
		left: 200px;
}
	.container2 .pics3 {
  top: 1090px;
		left: 200px;
}
		
		.container2 .pics4 {
  top: 1510px;
		left: 200px;
}
	
.container3 .list1 {
  margin: 0 auto;
  position: absolute;
  left: 0px;top: 0;
  width: 1000px;
  height: 1200px;
  z-index: 3;
}
.container3 .list1 .list {
  position: absolute;
  width: 1000px;
  left: 130px;
  top: 250px;

}

.container3 .list2 {
  margin: 0 auto;
  position: absolute;
  right: 0px;
  width: 1200px;
  height: 1000px;
  z-index: 3;
}

.container3 .list {
  position: absolute;
  width: 1000px;
  left: 130px;
  top:660px;
}
.container3 .list li {
  width: 900px;
  height: 200px;
  border-bottom: 1px solid #d00;
  float: left;
  margin-bottom: 30px;
}
.container3 .list a {
  display: block;
  width: 100%;
  height: 202px;
}
.container3 .list h4 {
  font-size: 36px;
  width: 100%;
  line-height: 36px;
  height: 36px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 0px;
  padding: 0 0 20px 0;
  margin: 0;
}
.container3 .list .abstract {
  width: 240px;
  float: right;
  font-size: 22px;
  line-height: 40px;
  height: 120px;
  text-align: left;
  font-weight: normal;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 32px;
  color: #666;
}.middle,.camare {
  display: none;
}

}