.banner { background: url(../images/join/banner.jpg) center no-repeat; background-size: cover; height: 400px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/join/banner.jpg', sizingMethod='scale'); position: relative; margin-bottom: 62px; } .banner .dingzhi { width: 620px; height: 344px; position: absolute; left: 50%; top: 50%; margin: -80px 0 0 -310px; color: #000; text-align: center; } .banner .dingzhi h2 { font-size: 30px; height: 34px; margin: 0 auto 30px; } .banner .dingzhi p { font-size: 12px; line-height: 32px; margin: 0 auto 30px; color: #333; } .banner .dingzhi .dingzhiBtn { width: 158px; height: 40px; margin: 0 auto; } .banner .dingzhi .dingzhiBtn a { color: #fff; width: 158px; height: 40px; line-height: 40px; background: #e41518; display: block; } .banner .dingzhi .dingzhiBtn a:hover { background: #b10d0f; } .joinWrap { background: #fff; } .joinWrap .joPad { padding: 60px 43px; } .joinWrap .menu { float:left; width:20%; border-right: 1px solid #ccc; padding-bottom: 70px; position: relative; } .joinWrap .menu .list { display:block; width:100%; height: 80px; margin-bottom:20px; text-align: center; overflow: hidden; position: relative; } .joinWrap .menu .list.active .listContent { border-bottom: 2px solid #21b3ba; height: 54px; *width: 100px; } .joinWrap .menu .list .listContent { display: inline-block; height: 100%; margin: 0 auto; cursor: pointer; } .joinWrap .menu .list .listContent i { display: inline-block; width: 40px; height: 40px; float: left; margin-right: 12px; } .joinWrap .menu .list .listContent .icon-1 { background: url(../images/join/icon_1.png) center no-repeat; } .joinWrap .menu .list .listContent .icon-2 { background: url(../images/join/icon_2.png) center no-repeat; } .joinWrap .menu .list .listContent .icon-3 { background: url(../images/join/icon_3.png) center no-repeat; } .joinWrap .menu .list .listContent .icon-4 { background: url(../images/join/icon_4.png) center no-repeat; } .joinWrap .menu .list .listContent .icon-5 { background: url(../images/join/icon_5.png) center no-repeat; } .joinWrap .menu .list .listContent span { float: left; font-size: 14px; line-height: 40px; color: #000; } .joinWrap .tabBody .tabList { display: none; } .joinWrap .tabBody .tabList .need { margin-bottom: 140px; } .joinWrap .tabBody .tabList .need h2 { font-size: 24px; color: #000; margin-bottom: 40px; } .joinWrap .tabBody .tabList .need h2 i { display: inline-block; width: 30px; height: 30px; float: left; margin-right: 12px; } .joinWrap .tabBody .tabList .need h2 .icon-1 { background: url(../images/join/need_1.png) center no-repeat; } .joinWrap .tabBody .tabList .need h2 .icon-2 { background: url(../images/join/need_2.png) center no-repeat; } .joinWrap .tabBody .tabList .need h2 .icon-3 { background: url(../images/join/need_3.png) center no-repeat; } .joinWrap .tabBody .tabList .need h2 .icon-4 { background: url(../images/join/need_4.png) center no-repeat; } .joinWrap .tabBody .tabList .need h2 .icon-5 { background: url(../images/join/need_5.png) center no-repeat; } .joinWrap .tabBody .tabList .need .neBanner { margin-bottom: 40px; } .joinWrap .tabBody .tabList .need .neBanner img { font-size: 0; } .joinWrap .tabBody .tabList .need .text { padding-bottom:20px; } .joinWrap .tabBody .tabList .need .text .teLeft { width: 100%; float: left; padding-bottom:20px; } .joinWrap .tabBody .tabList .need .text .teLeft p { font-size: 14px; color: #000; height: 13px; margin-bottom: 15px; } .joinWrap .tabBody .tabList .contact { text-align: center; color: #000; *overflow: hidden; } .joinWrap .tabBody .tabList .contact h2 { font-size: 24px; margin-bottom: 98px; } .joinWrap .tabBody .tabList .contact .text { position: relative; } .joinWrap .tabBody .tabList .contact .text .te7 { width: 70%; float: left; } .joinWrap .tabBody .tabList .contact .text .te7 .row .col-md-4 { *width: 229px; } .joinWrap .tabBody .tabList .contact .text .te7 .row .col-md-4, .joinWrap .tabBody .tabList .contact .text .te7 .row .col-md-3 { margin-bottom: 50px; } .joinWrap .tabBody .tabList .contact .text .te7 .row i { display: block; width: 48px; height: 48px; margin: 0 auto 10px; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co1 { background: url(../images/join/co-01.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co2 { background: url(../images/join/co-02.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co3 { background: url(../images/join/co-03.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co4 { background: url(../images/join/co-04.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co5 { background: url(../images/join/co-05.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co6 { background: url(../images/join/co-06.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co7 { background: url(../images/join/co-07.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row .co8 { background: url(../images/join/co-08.png) center no-repeat; } .joinWrap .tabBody .tabList .contact .text .te7 .row span { font-size: 14px; } .joinWrap .tabBody .tabList .contact .text .te3 { float: left; width: 30%; position: relative; } .joinWrap .tabBody .tabList .contact .text .te3 .line { height: 228px; width: 1px; background: #000; position: absolute; left: 0; top: -15px; } .joinWrap .tabBody .tabList .contact .text .te3 .teText { text-align: center; width: 210px; height: 116px; color: #000; margin: 44px auto 0; } .joinWrap .tabBody .tabList .contact .text .te3 .teText h2 { font-size: 28px; margin-bottom: 20px; } .joinWrap .tabBody .tabList .contact .text .te3 .teText .call { font-size: 20px; padding-left: 34px; height: 48px; line-height: 48px; background: url(../images/join/call.png) left center no-repeat; }