@charset "utf-8";
/* CSS Document */
.conten { padding: 0 30px; }

.Threebox { overflow: hidden; margin: 30px -15px; }
.Threebox .Box { float: left; width: 33.33%; }
.Threebox .Box .pic { overflow: hidden; }
.Threebox .Box .pic img { width: 100%; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.Threebox .Box .pic:hover img { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }
.Threebox .Item { margin: 0 15px; position: relative; overflow: hidden; }
.Threebox .Item .pic { overflow: hidden; }
.Threebox .Item .pic img { width: 100%; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.Threebox .Item .Intro { text-align: center; color: #fff; padding: 10px 20px; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background-image: url('../images/bg-col.png'); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.Threebox .Item h3 { font-size: 16px; line-height: 40px; }
.Threebox .Item p { font-size: 15px; line-height: 30px; max-height: 90px; overflow: hidden; }
.Threebox .Item:hover .pic img { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }
.Threebox .Item:hover .Intro { top: 0; }

.News { margin: 30px 0; }
.News .Tit h2 { font-size: 23px; color: #222222; line-height: 60px; text-align: center; }
.News .list { margin: 0 -15px; }
.News .list li { float: left; width: 33.33%; }
.News .list .Item { background: #fff; margin: 0 15px; }
.News .list .Item .pic { overflow: hidden; }
.News .list .Item .pic img { width: 100%; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.News .list .Item .Intro { padding: 20px 10px; }
.News .list .Item .Intro h3 { font-size: 16px; color: #2c2b2b; line-height: 30px; }
.News .list .Item .Intro .date { font-size: 12px; color: #333; line-height: 30px; display: block; }
.News .list .Item .Intro p { font-size: 13px; color: #4a4a4a; line-height: 25px; height: 50px; overflow: hidden; }
.News .list .Item .Intro .More { width: 110px; font-size: 14px; color: #000; line-height: 40px; display: block; text-align: center; margin: 0 auto; margin-top: 20px; border: 1px solid #333; }
.News .list .Item:hover .pic img { transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }


@media (min-width: 1024px) {
}

@media (min-width: 768px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 1025px) {
    .conten { padding: 0 10px; }
    .Threebox { margin: 10px -5px; }
    .Threebox .Item { margin: 5px; }
    .News { margin: 10px 0; }
    .News .list { margin: 0 -5px; }
    .News .list .Item { margin: 5px; }
}

@media (max-width: 768px) {
}

@media (max-width: 640px) {
  
    .conten { padding: 0; }
    .Threebox .Box { width: 50%; }
    .News .list li { width: 50%; }
    .Threebox .Item h3 { font-size: 14px; line-height: 30px; }
    .Threebox .Item p { font-size: 12px; line-height: 25px; }
    .News .list .Item .Intro h3 { font-size: 13px; }
    .News .list .Item .Intro p { font-size: 12px; }
}

@media (max-width: 520px) {
}

@media (max-width: 480px) {
    .Threebox .Box { width: 100%; }
    .News .list li { width: 100%; }
    .Threebox .Item .Intro { position: relative; }
    .News .list .Item .Intro { padding: 10px; }
}