xuanjuAsp/css/index.css

/* CSS Document */
.tit { width: 94.5%; height: 34px; line-height: 34px; background: url(../img/vc_03.png) no-repeat left center; padding-left: 20px; font-size: 15px;}
.tit h3 { float: left; font-weight: bold; font-size: 15px; color: #000;}
.tit h3 span { color: #9f9f9f; padding-left: 5px; font-weight: normal;}
.tit i { float: left; width: 45%; height: 34px; background: url(../img/a_03.png) center repeat-x; margin-left: 10px;}
.tit a { float: right; width: 73px; height: 34px; line-height: 34px; color: #9f9f9f; font-size: 13px; text-decoration: none; display: block;}
.tit a:hover { color: #b68332;}

.in_ab { width: 445px; height: 215px; overflow: hidden; position: relative;}
.in_ab .ab_info { position: absolute; left: 0; top: 34px;}
.in_ab .ab_info a { float: left; display: block; width: 151px; height: 96px; background: #E5E5E5; border-radius: 5px; padding: 9px; margin-right: 8px;}
.in_ab .ab_info a img { border: 1px solid #fff;}
.in_ab .ab_info em { font-size: 12px; line-height: 22px;}
.in_ab .ab_info em span { font-size: 15px;}
.in_ab p { margin-top: 5px; text-indent: 2em; line-height: 22px; font-size: 12px; margin-top: 120px;}

.new { width: 445px; height: 215px; overflow: hidden; position: relative;}
.new .tit i { width: 52%;}
.new a.txt_info { position: absolute; left: 0; top: 34px;}
.new a.txt_info img { float: left; width: 26%; height: auto; border: 1px solid #fff; display: block; border: 1px solid #E5E5E5; padding: 2px;}
.new a.txt_info h3 { float: right; width: 71%; font-size: 14px; color: #b68332; font-weight: bold;}
.new a.txt_info h3 p { font-size: 12px; color: #333; font-weight: normal; padding-top: 8px; line-height: 22px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 49px;}
.new ul { margin-top: 90px;}
.new ul li { background: url(../img/bg2.gif) repeat-x left center;}
.new ul li a { background: #fff url(../img/icon2.gif) no-repeat left center; height: 23px; line-height: 23px; float: left; padding-left: 10px; font-size: 12px; width: 65%;
    white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden;}
.new ul li span { float: right; background: #fff; padding-left: 5px; font-size: 12px;}
.new ul li a:hover { color: #b68332; text-decoration: none;}

.business, .research { width: 100%;}
.business .tit { width: 97.8%; margin-bottom: 2px; background: url(../img/ba_03.png) no-repeat left center;}
.business .tit i { width: 70.9%;}
.business ul li { float: left; width: 220px; overflow: hidden; margin-right: 10px; margin-bottom: 10px; overflow: hidden;}
.business ul li.mr0 { margin-right: 0;}
.business ul li a.pic { width: 100%; position: relative; padding: 30% 0; display: block;}
.business ul li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.business ul li .txt a { text-decoration: none;}
.business ul li .txt a h3 { margin: 10px 0; line-height: 18px; font-size: 14px; font-weight: bold; color: #333; display: block; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;}
.business ul li .txt a p { color: #666; height: 7em; font-size: 12px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    display: -webkit-box;}
.business ul li .txt a:hover h3 { color: #b68332;}

.line { border-bottom: 1px dotted #ccc; padding-bottom: 30px;}
.research { position: relative;}
.research .tit, .zhuanti .tit { width: 92.8%;}
.research .tit i, .zhuanti .tit i { width: 12%;}
.research ul { margin-bottom: 10px; position: absolute; left: 0; top: 34px;}
.research ul li, .zhuanti ul li { padding: 8px 0 0 0; padding-bottom: 12px; height: 0.7em; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;}
.research ul li a:hover, .zhuanti ul li a:hover { color: #b68332; text-decoration: none;}
.research a.more { margin-top: 161px;}
a.more { border: 2px solid #000; font-size: 12px; width: 90px; height: 22px; line-height: 22px; text-align: center; display: block; margin-top: 10px; text-decoration: none;}
a.more:hover { border: 2px solid #b68332; background: #b68332; color: #fff;}

.zhuanti { margin-top: 25px;}
.zhuanti .big a { width: 100%; position: relative; display: block; margin-top: 0.5em;}
.zhuanti .big a img { width: 100%;}
.zhuanti .big a span { position: absolute; left: 0; bottom: 0; display: block; width: 96.5%; height: 30px; line-height: 30px; color: #fff; background: url(../img/black.png);
    padding-left: 10px;}
.zhuanti .big p { text-indent: 2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 22px; font-size: 12px;
    margin: 10px 0 15px 0; height: 41px;}
.case .tit i { width: 24%;}

.team { width: 100%; overflow: hidden;}
.team .tit { width: 98.3%; margin-bottom: 5px; background: url(../img/ba_03.png) no-repeat left center;}
.team .tit i { width: 77.8%;}
.team ul { overflow: hidden; zoom: 1; float: left; _display: inline;}
.team li { width: 235px; float: left; overflow: hidden; margin: 0 10px; zoom: 1;}
.team li a.pic { width: 100%; position: relative; padding: 42.6% 0; display: block;}
.team li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.team li a { text-decoration: none;}
.team li h3 { font-size: 17px; color: #333; line-height: 34px;}
.team li span { white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden;}

@media screen and ( max-width: 768px ) {
    .in_ab, .new { width: 100%; height: auto;}

    .tit i { width: 40%;}

    .in_ab, .business { margin-bottom: 0.5em;}
    .new .tit i { width: 47%;}

    .business .tit i { width: 33.9%;}
    .business ul li { width: 48%; margin: 0 0.27em; margin-bottom: 10px;}
    .business ul li.mr0 { margin-right: 0.27em;}

    .research .tit, .zhuanti .tit { width: 95%;}
    .research .tit i, .zhuanti .tit i { width: 40%;}
    .case .tit i { width: 48%;}

    .team { height: 260px; margin-top: 1em;}
    .team .tit { width: 95.3%;}
    .team .tit i { width: 31%;}
    .team li { width: 45%; margin: 0 0.3em;}
}
@media screen and ( max-width: 412px ) and ( min-width: 375px ) {
    .tit i { width: 34%;}

    .in_ab .ab_info { height: 114px; overflow: hidden;}
    .in_ab .ab_info a { width: 40%;}
    .in_ab .ab_info a img { width: 100%;}
    .in_ab .ab_info em { line-height: 18px;}

    .new .tit i { width: 42%;}
    .business .tit i { width: 26%;}
    .business ul li { width: 47.8%;}

    .research .tit i, .zhuanti .tit i { width: 35%;}
    .case .tit i { width: 43%;}
    .team { height: 240px;}
    .team .tit i { width: 25%;}
}
@media screen and ( max-width: 374px ) and ( min-width: 320px ) {
    .tit i { width: 23%;}

    .in_ab .ab_info { height: 94px; overflow: hidden;}
    .in_ab .ab_info a { width: 40%;}
    .in_ab .ab_info a img { width: 100%;}
    .in_ab .ab_info em { line-height: 18px;}

    .new .tit i { width: 32%;}
    .new a.txt_info img { width: 30%;}
    .new a.txt_info h3 { width: 67%;}
    .business .tit i { width: 13%;}
    .business ul li { width: 47.3%;}

    .research .tit i, .zhuanti .tit i { width: 23%;}
    .case .tit i { width: 34%;}
    .team { height: 240px;}
    .team .tit i { width: 12%;}
}