.title { bottom: 40px; left: 0; height: 200px; padding: 0 40px; }

.title img { width: 30%; margin-top: 10%;}

.head { display: block; text-align: center; }

.wrapper-bg { background: #e5efee; }

.imgs { width: 100%; }

.feat { text-align: center; margin-top: 80px;}
.feat li { width: 48.5%; margin: 5px; }
.feat img { margin-bottom: 5px; border-radius: 5px; }
.feat .active img { opacity: .5; }


.pics { max-width: 1280px; margin: auto; text-align: center; }
.pics li { margin: 20px 40px; }
.pics img { width: 240px; height: 240px; object-fit: contain; }
.pics img:hover { transform: scale(2); border: solid 5px #fff; box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.35); background: #fff; }
.pics p { margin-top: 15px; font-size: small; line-height: 180%; text-align: center; }
.pics a { color: #333; }
.pics a:hover { color: #09f; }


@media (min-width: 640px) {
.imgs { padding-bottom: 30px; }
.scroll { display: none; }
} 

@media screen and (max-width: 640px) {
.logo2 { display: none; }
.title { top: 20px; left: 15px; height: 380px; padding: 0; }
.title2 { top: 20px; left: 15px; height: 380px; padding: 0; }
.feat li { width: 90%; }
.pics li { margin: 10px; }
.pics img { width: 130px; height: 130px; }
.pics p { display: none; }
}

.wrapper-bg { background: #e5efee; }
.title2 { bottom: 40px; left: 0; height: 200px; padding: 0 40px; }

.relative { position: relative; margin-bottom: 40px; }

.center-left { position: absolute; top: 50%; left: 3%;
  transform: translate(0,-50% );
  -webkit- transform: translate(0,-50%);}

.center-right { position: absolute; top: 50%; right: 8%;
  transform: translate(0,-50% );
  -webkit- transform: translate(0,-50%);}

.bottom-left { position: absolute; bottom: 5%; left: 3%; }
.bottom-right { position: absolute; bottom: 5%; right: 3%; }