.box.banner{
  position: relative;
}

.box.banner > div{
  margin-bottom: 1px;
}
.box.banner > div > div a{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
}
.box.banner > div > div{
  /*overflow: hidden;*/
}

.box.banner > div > div > .details{
  position: absolute;
  /*opacity: 0.5;*/
  background: url('/img/overlay.png') repeat;
  bottom: 42px;
  left: 0;
  right: 0;
  padding: 0 5px 15px 15px;
  color: #FFFFFF;
  font-size: 12px;
  line-height:12px;
}

.box.banner > div > div > .details h3{
  font-size: 28px;
  color: #fff;
  line-height:none;

}

.r1{
  /*height: 412px;*/
  height:305px;
  position: relative;
}

.r1 .r1-b1{
  position: absolute;
  height: 305px;
  width: 446px;
}

.r1 .r1-b2{
  position: absolute;
  height: 149px;
  width: 190px;
  left: 447px;
}

.r1 .r1-b3{
  position: absolute;
  height: 149px;
  width: 188px;
  left: 638px;
}

.r1 .r1-b4{
  position: absolute;
  width: 379px;
  height: 155px;
  left: 447px;
  top: 150px;
}

.r1 .r1-b5{
  position: absolute;
  width: 826px;
  height: 106px;
  top: 306px;
}

.r2{
  height: 306px;
  position: relative;
}

.r2 > div{
  position: absolute;
}

.r2 .r2-b1{
  position: absolute;
  height: 306px;
  width: 190px;
  left: 0;
  top: 0;
}

.r2 .r2-b2{
  width: 190px;
  height: 306px;
  left: 190px;
  top: 0;
}

.r2 .r2-b3{
  width: 445px;
  height: 306px;
  left: 380px;
}