@charset "utf-8";

#banner{width: 100%; height: 400px; margin-top: 88px; background: #1c1c1c url('../img/b_case.jpg') no-repeat center/cover;}
#banner .tit{color: #fff; font-size: 5.6rem; text-align: center; position: relative; top: 40%; font-weight: 300;}

@media (max-width:1279px){
  #banner{height: 200px; margin-top: 68px;}
  #banner .tit{font-size: 2.6rem; top: 40%; font-weight: normal;}
}


#case{border-bottom: 1px solid #e6e6e6; padding-bottom: 30px;}
#case .wrapper{max-width: 1200px; margin: 46px auto;}
#case .desc{font-size: 1.6rem; color: #2b2b2b; font-weight: 300;}
#case .desc div, #case .desc p{font-size: 1.6rem; margin-bottom: 20px; line-height: 1.6;}

@media (max-width:1279px){
  #case .wrapper{margin: 36px auto; padding: 0 20px;}
  #case .desc{font-size: 1.4rem;}
  #case .desc div, #case .desc p{font-size: 1.4rem;}
}


#case .list{margin-top: 50px; display: flex; justify-content: space-between; flex-wrap: wrap;}
#case .list::after{display: none;}
#case .list>a{display: block; width: 46%; border: 1px solid #e6e6e6; padding: 12px; display: flex; justify-content: space-between; margin-bottom: 3.9%;}
#case .list>a .img{width: 300px; height: 200px; background: #f3f3f3; overflow: hidden;}
#case .list>a .img>p{width: 100%; height: 100%; background: no-repeat center/cover; transition: all .56s;}
#case .list>a:hover .img>p{transform: scale(1.16);}
#case .list>a .con{width: 235px; position: relative;}
#case .list>a .con .tit{font-size: 2rem; color: #2b2b2b; padding-top: 5px; transition: all .25s;}
#case .list>a:hover .con .tit{color: #ec0000;}
#case .list>a .con .desc{font-size: 1.5rem; color: #777177; line-height: 1.7; margin-top: 15px;}
#case .list>a .con .ico{position: absolute; left: 0; bottom: 5px; transition: all .45s;}
#case .list>a .con .ico i{font-size: 2rem; color: #ccc;}
#case .list>a:hover .con .ico{left: 100%; margin-left: -2.5rem;}
#case .list>a:hover .con .ico>i{color: #ec0000;}

@media (max-width:1279px){
  #case .list>a{width: 100%; box-sizing: border-box; display: block;}
  #case .list>a .img{width: 100%; height: 150px;}
  #case .list>a .con{width: 100%; margin-top: 10px;}
  #case .list>a .con .desc{font-size: 1.4rem; margin-top: 10px;}
  #case .list>a .con .ico{display: none;}
}

#case .view h1{font-size: 3.6rem; color: #2b2b2b; font-weight: normal; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 25px; line-height: 1.3;}
#case .view .detail{margin-top: 50px; margin-bottom: 50px;}

#case .prev-next{margin-top: 70px; border-top: 1px solid #eee; display: flex; justify-content: space-between;}
#case .prev-next::after{display: none;}
#case .prev-next>div{display: block; margin-top: 20px;}
#case .prev-next>div a{font-size: 1.5rem;}
#case .prev-next>div a:hover{color: red;}
#case .prev-next .prev a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; margin-right: 8px;}
#case .prev-next .next{text-align: right;}
#case .prev-next .next a::after{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-left: 8px; display: inline-block;}

@media (max-width:1279px){
  #case .view h1{font-size: 3rem;}
  #case .view .detail{margin-top: 30px; margin-bottom: 30px;}

  #case .prev-next{margin-top: 50px; flex-wrap: wrap; padding-top: 10px;}
  #case .prev-next>div{width: 100%; padding: 0; margin-top: 15px;}
  #case .prev-next .next{text-align: left;}
  #case .prev-next .next a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-right: 8px; display: inline-block;}
  #case .prev-next .next a::after{display: none;}
}