.secondary { font-size: 20px; font-weight: bold; margin-bottom: 40px; border-bottom: 1px solid #D9D9D9; }
.secondary .item { display: inline-block; text-decoration: none; margin-right: 76px; }
.secondary .item:hover { color: #008CD4; }
.secondary .active::after { content: ""; display: block; width: 100%; height: 4px; background: #008CD4; margin-top: 8px; }

#list { width: 1200px; margin: auto; }
#list .caption { font-size: 28px; font-weight: bold; padding-bottom: 44px; }

#list .main { }
#list .main .items { line-height: 22px; }
#list .main .item { padding-bottom: 100px; }
#list .main .item .pic { float: left; width: 360px; height: 240px; overflow: hidden; }
#list .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; }
#list .main .item .pic img:hover { -webkit-transform: scale(1.04); transform: scale(1.04); }
#list .main .item .info { float: right; width: 800px; }
#list .main .item .name a { font-size: 20px; font-weight: bold; color: #008CD4; }
#list .main .item .desc { margin: 24px 0px; }
#list .main .item .info .icof { vertical-align: top; margin: 0px 12px 0px 0px; }
#list .main .item .desc span { display: inline-block; vertical-align: top; width: 720px; line-height: 28px; max-height: 112px; overflow: hidden; }
#list .main .item .desc .icof { margin: 6px 12px 0px 0px; }


#card { width: 1220px; margin: auto; padding-bottom: 80px; }
#card .main-right { width: 79%; float: right; }
#card .main .caption { padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 20px; font-weight: bold; }
#card .main .items { padding-bottom: 40px; }
#card .main .item { position: relative; float: left; width: 48%; border: 1px solid #eee; margin: 32px 32px 0 0; }
#card .main .item:nth-child(2n) { margin: 32px 0px 0px 0px; }
#card .main .pic { float: left; width: 38%; border-right: 1px solid #eee; box-sizing: border-box; position: relative; }
#card .main .pic:before { content: ""; padding-top: 75%; display: block }
#card .main .pic img { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-card: translate(-50%,-50%); }
#card .main .info { float: left; width: 62%; padding: 32px; box-sizing: border-box; }
#card .main .name { font-weight: bold; }
#card .main .info .desc { margin: 6px 0px; max-height: 60px; line-height: 20px; overflow: hidden; }
#card .main-right .info .desc { margin: 6px 0px; max-height: 40px; line-height: 20px; overflow: hidden; }

#cardonly { width: 1220px; margin: auto; padding-bottom: 80px; }
#cardonly .main-right { width: 79%; float: right; }
#cardonly .main .caption { padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 20px; font-weight: bold; }
#cardonly .main .items { padding-bottom: 40px; }
#cardonly .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; }
#cardonly .main .pic { width: 100%; padding-top: 75%; height: 0px; position: relative; text-align: left; }
#cardonly .main .pic img { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#cardonly .main .item:nth-child(5n) { margin: 32px 0px 0px 0px; }
#cardonly .main .name { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; line-height: 40px; }