﻿/*通用侧栏*/
.secondary { float: left; width: 18%; border: none; }
.secondary .title { height: 22px; font-size: 16px; font-weight: bold; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.secondary .item { padding: 0px 12px; border-bottom: 1px solid #eee; }

#articlelist1 { width: 1300px; margin: auto; padding-bottom: 80px; }


#articlelist1 .main { }
#articlelist1 .main .items { line-height: 22px;padding-bottom:40px; }
#articlelist1 .main .item { padding: 50px;border-bottom: 1px solid #F3F3F3; }
#articlelist1 .main .item .pic { float: left; width: 360px; height: 240px; overflow: hidden; }
#articlelist1 .main .item .pic img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
#articlelist1 .main .item .pic img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); }
#articlelist1 .main .item .info { float: right; width: 800px; }
#articlelist1 .main .item .name a { font-size: 20px; font-weight: bold; color: #008CD4; }
#articlelist1 .main .item .time { margin: 24px 0px; }
#articlelist1 .main .item .desc { margin: 24px 0px; }
#articlelist1 .main .item .desc span { display: inline-block; vertical-align: top; width: 720px; line-height: 28px; max-height: 112px; overflow: hidden; }


#articlelist2 { width: 1300px; margin: auto; padding-bottom: 80px; }
#articlelist2 .main-right { width: 79%; float: right; }
#articlelist2 .main .caption { padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 20px; font-weight: bold; }
#articlelist2 .main .items { padding-bottom: 40px; }
#articlelist2 .main .item { position: relative; float: left; width: 48%; border: 1px solid #eee; margin: 32px 32px 0 0; }
#articlelist2 .main .item:nth-child(2n) { margin: 32px 0px 0px 0px; }
#articlelist2 .main .pic { float: left; width: 38%; border-right: 1px solid #eee; box-sizing: border-box; position: relative; }
#articlelist2 .main .pic:before { content: ""; padding-top: 75%; display: block }
#articlelist2 .main .pic img { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#articlelist2 .main .info { float: left; width: 62%; padding: 32px; box-sizing: border-box; }
#articlelist2 .main .name { font-weight: bold; }
#articlelist2 .main .info .desc { margin: 6px 0px; max-height: 60px; line-height: 20px; overflow: hidden; }
#articlelist2 .main-right .info .desc { margin: 6px 0px; max-height: 40px; line-height: 20px; overflow: hidden; }

#articlelist3 { width: 1300px; margin: auto; padding-bottom: 80px; }
#articlelist3 .main-right { width: 79%; float: right; }
#articlelist3 .main .caption { padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 20px; font-weight: bold; }
#articlelist3 .main .items { padding-bottom: 40px; }
#articlelist3 .main .item { float: left; width: 18%; border: 1px solid #eee; margin: 32px 2.5% 0px 0px; text-align: center; padding-bottom: 40px; position: relative; box-sizing: border-box; }
#articlelist3 .main .pic { width:100%; padding-top: 75%; height: 0px; position: relative; text-align: left; }
#articlelist3 .main .pic img { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#articlelist3 .main .item:nth-child(5n) { margin: 32px 0px 0px 0px; }
#articlelist3 .main .name { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; line-height: 40px; }

#articlelistDevList .main { width: 1300px; margin: auto; }
#articlelistDevList .main .title { font-size: 20px; font-weight: bold; padding-bottom: 32px; border-bottom: 1px solid #ddd; margin-bottom: 16px; }
#articlelistDevList .main .item { padding: 12px 0px; }
#articlelistDevList .main .item .name { font-size: 16px; font-weight: bold; }
#articlelistDevList .main .item .name a:hover { color: #008CD8; text-decoration: none; }
#articlelistDevList .main .time { padding: 4px 0px; }
#articlelistDevList .main .time .split { margin: -2px 4px 0px 4px; }
#articlelistDevList .main .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#articlelistDevList .paging { padding: 40px 0px 100px 0px; }
