@charset "utf-8";
/* CSS Document */

#about{margin: 0 auto; padding: 100px 0;}

#about .container{  position:relative; z-index: 20; margin: 0 auto;}
#about .container>.title{margin-bottom: 20px;}
#about .container>.title>h3{font-size: 3rem;text-transform: uppercase; color: #dadada; font-weight: bold;}
#about .container>.content{ position: relative; z-index: 50; padding: 50px 0; font-size: 1.6rem; color: #444; line-height: 2.8rem;}
#about .container>.content>p{margin-bottom: 20px;}

#about  .shows{margin: 0 auto;}
#about  .shows .swiper-slide{position: relative;}
#about  .shows .swiper-slide>img{width: 100%;height: auto;}
#about  .shows .swiper-slide>span{position: absolute;z-index: 30; opacity: 0; left: 50%; top: 50%; margin-top: -100px; margin-left: -80px; width: 160px; height: 60px; line-height: 60px;border-bottom: 1px solid rgba(255,255,255,.2);  border-top: 1px solid rgba(255,255,255,.2); text-align: center;  color: #fff; font-size: 1.6rem; transition: all .35s;}
#about  .shows .swiper-slide:after{position: absolute;z-index: 10; left: 0;top: 0; width: 100%;height: 0; background: rgba(0,0,0,.8);opacity: 0; content: ''; transition: all .35s;}
#about  .shows .swiper-slide:hover:after{opacity: 1; height: 100%;}
#about  .shows .swiper-slide:hover span{opacity: 1;margin-top: -30px; }