@charset "utf-8"; .wrapper{ min-width:1200px; max-width:1920px; margin:auto; overflow-x: hidden; padding-top:101px; } #header,#among,#footer,.width{ max-width:1680px; margin:auto; } .header{ background: #FFF; padding: 0 12px; position:fixed; top:0; left: 0; z-index:999; right: 0; border-bottom: 1px solid #cdcdcd; box-shadow:0 0 10px #bfbfbf; } #header{ position:relative; } .bottom{ background: #fcfcfc url(../images/dbg.jpg) center bottom no-repeat; padding: 3% 12px 4%; } .bottom ul > span{ display: block; text-align: center; font-size: 28px; color: #05487d; } .bottom li{ font-size: 0; letter-spacing: -1px; text-align: center; margin-top: 4%; white-space: nowrap; } .bottom li a{ display: inline-block; vertical-align: top; letter-spacing: 0; text-align: left; padding-left: 65px; cursor: pointer; background: left no-repeat; } .bottom li a:nth-child(1){ background-image: url(../images/d1.png); } .bottom li a:nth-child(2){ background-image: url(../images/d2.png); margin: 0 25%; } .bottom li a:nth-child(3){ background-image: url(../images/d3.png); } .bottom li a span{ display: block; font-size: 20px; color: #525252; line-height: 20px; } .bottom li a font{ display: block; font-size: 16px; color: #a6a6a6; line-height: 16px; margin-top: 10px; } .bottom li a:hover span, .bottom li a:hover font{ color: #C00; } .footer{ background: #f4f4f4 url(../images/xian.jpg) center 109px no-repeat; padding: 60px 12px; } .footer1{ background: #707070; padding: 0 12px; } #footer *{ color:#555555; font-size: 14px; line-height:2.2; } #footer a:hover{ color:#C00; } #footer .info{ float: left; width: calc(43% - 136px); } #footer .info > a{ display: inline-block; vertical-align: top; } #footer .info > a img{ height: 36px; } #footer .info > span{ display: block; font-size: 18px; line-height: 2; margin-top: 38px; } #footer .info > font{ display: block; font-size: 16px; margin-top: 12px; } #footer .type{ float: left; width: 19%; } #footer .type > a{ display: inline-block; vertical-align: top; font-size: 16px; line-height: 36px; } #footer .type ul{ margin-top: 40px; } #footer .wechat{ width: 136px; } #footer .wechat > img{ width: 136px; margin-top: 45px; } #footer .wechat span{ text-align: center; display: block; font-size: 16px; color: #a0a0a0; } #footer .wechat div{ font-size:0; letter-spacing:-1px; text-align:center; margin-top:12px; } #footer .wechat div a{ display:inline-block; vertical-align:top; } #footer .wechat div a:nth-child(2){ margin:0 15px; } #footer .copyright{ margin: 13px 0; } #footer .copyright, #footer .copyright *{ font-size: 12px; line-height: 2; color: #e6e7e8; } .banner{ position: relative; } .banner img{ width: 100%; } .banner .arrow{ position: absolute; left: 0; bottom: 0; width: 100%; z-index: 9; } .banner .arrow{ height: 30px; text-align: center; } .banner .arrow span{ width: 57px; height: 4px; background: #FFF; border-radius: 0; opacity: 1; margin: 0 5px; vertical-align: top; } .banner .arrow span.active{ background: #ff0030; } .proBox{ padding: 3% 12px; } .proBox .tn{ font-size: 0; letter-spacing: -1px; } .proBox .tn span{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 36px; position: relative; z-index: 1; } .proBox .tn font{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 48px; color: #f3f3f3; margin: -2% 0 0 -4%; } .proBox1{ padding: 3% 12px; background: #f8f8f8; } .proBox1 .box{ position: relative; padding: 0 42px; max-width: 1712px; margin: 0 auto; } .proBox1 .box ul{ float: left; width: 25%; } .proBox1 .box ul a{ display: block; margin: 0 4%; padding: 4% 5%; background: #FFF; border: 1px solid #ecebeb; } .proBox1 .box ul a li{ position: relative; } .proBox1 .box ul a li img{ width: 100%; } .proBox1 .box ul a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .proBox1 .box ul a span{ font-size: 18px; margin-top: 4%; } .proBox1 .box ul a font{ color: #a3a3a3; } .proBox1 .box .arrow{ display: none; } .proBox1 .box .btn{ position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; cursor: pointer; background: #e2e2e2; border-radius: 100%; text-align: center; font-family: '宋体'; line-height: 42px; font-size: 32px; color: #7c7c80; font-weight: bold; } .proBox1 .box .prev{ left: 0; } .proBox1 .box .next{ right: 0; } .aside{ background: #fafafa; } .navBox ul li{ width:auto; padding: 0 1.6%; z-index: 1; text-align:center; } .navBox ul li a{ display: block; line-height: 68px; white-space: nowrap; } .navBox ul li a:hover{ color:#C00; } .navBox ul li.on a:after{ content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; background: #232323; height: 3px; } #location{ text-align: right; height: 0; padding: 0 10px; } #location ul{ display: inline-block; vertical-align: top; position: relative; z-index: 2; height: 68px; overflow: hidden; margin-top: -68px; } #location ul li{ margin-top: 22px; } .location1{ margin-top: 3%; } #location ul li, #location ul li *, .location1, .location1 *{ font-size: 13px; line-height: 24px; } #location ul li span:after, .location1 span:after{ content: ' > '; font-family: '宋体'; } .location2{ font-size: 24px; padding: 1% 0 0.5%; } .location3{ background: #f5f5f5; padding: 1% 12px; } .location3 li{ font-size: 30px; color: #6c6c6c; } .location4{ margin: 3% 0 1%; } .location4 li{ font-size: 36px; line-height: 1.6; } .location4 span{ display: block; font-size: 24px; color: #4c4c4c; line-height: 1.6; } .location5{ text-align: center; font-size: 24px; margin-top: 2%; } .type_name{ margin: 4% 0 3%; color: #373737; font-size: 24px; } .type_name.type_name1{ margin-top: 2%; } .type_name.type_name2{ color: #969696; margin: 2% 0 0; } .type_name:after{ content: ''; display: block; width: 40px; height: 1px; margin-top: 8px; background: #676767; } .type_name.type_name2:after{ display: none; } .content{ min-height: 350px; margin: 4% auto; } .content1{ margin-top: 2%; } .content .type_name{ margin-top: 0; } .list_news a{ display: block; background: #fbfbfb; border: 1px solid #fbfbfb; margin-top: 3%; height: 218px; overflow: hidden; position: relative; } .list_news a img{ position: absolute; left: 0; top: 0; width: 315px; height: 100%; } .list_news a li{ margin: 0 3% 0 calc(3% + 315px); } .list_news a li span{ font-size: 18px; line-height: 34px; margin: 20px 0 0; } .list_news a li font{ display: block; color: #a1a1a1; } .list_news a li p{ color: #676666; height: 56px; margin: 15px 0; } .list_news a li:after{ content: '查看详情>>'; color: #a1a1a1; } .list_news a:hover{ background: #efefef; } .list_share a{ display: block; float: left; width: 18%; margin: 3% 0 0 2.5%; } .list_share a:nth-child(-n+5){ margin-top: 0; } .list_share a:nth-child(5n+1){ margin-left: 0; } .list_share a li{ position: relative; border: 1px solid #fbfbfb; } .list_share a li img{ width: 100%; } .list_share a li img:nth-child(2){ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .list_share a span{ text-align: center; font-size: 16px; margin-top: 4%; } .company{ padding: 4% 12px; } .company .list{ font-size: 0; letter-spacing: -1px; text-align: center; } .company .list > li{ display: inline-block; vertical-align: top; letter-spacing: 0; width: 18%; } .company .list > li > span{ display: block; font-size: 24px; } .company .list > li > div{ font-size: 18px; color: #898989; margin-top: 6%; } .company .list > i{ display: inline-block; vertical-align: top; letter-spacing: 0; width: 1px; height: 245px; background: #DDD; margin: 0 10%; } .company .list1 a{ display: block; float: left; width: 23.5%; margin: 3% 0 0 2%; } .company .list1 a:nth-child(-n+4){ margin-top: 0; } .company .list1 a:nth-child(4n+1){ margin-left: 0; } .company .list1 a li{ position: relative; } .company .list1 a li img{ width: 100%; } .company .list1 a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .company .list1 a span{ text-align: center; margin-top: 2%; } .company .info{ float: left; width: 48%; margin-top: 2%; } .company .info > span{ display: block; font-size: 24px; letter-spacing: 8px; line-height: 1.5; } .company .info > font{ display: block; font-size: 24px; letter-spacing: 3px; line-height: 1.5; } .company .info > div{ margin-top: 4%; } .company .info > div, .company .info > div *{ line-height: 30px; color: #6a6a6a; } .company .img{ float: right; width: 48%; position: relative; } .company .img img, .company .img video{ width: 100%; } .company .img video{ display:block; position:absolute; left:0; top:0; height:100%; background:black; } .contactBox{ padding: 0 12px; } .contactBox .cont{ margin: 0 2% 4% 2%; line-height: 2.4; } .contactBox .cont .name{ font-size: 18px; display: block; } .messageBox{ background: #fbfbfb; padding: 0 12px; } .messageBox .text{ margin: 0 2%; } .messageBox .text1{ font-size: 12px; color: #b4b4b4; margin-top: 5px; } .messageBox .text2{ font-size: 18px; } .messageBox .text3{ font-size: 16px; color: #858484; padding: 10px 0; } .messageBox .input{ background: #FFF; font-size: 0; letter-spacing: -1px; border: 1px solid #efefef; margin: 12px 2% 0; } .messageBox .input *{ display: inline-block; vertical-align: top; letter-spacing: 0; } .messageBox .input span{ width: 30px; font-size: 14px; line-height: 46px; height: 46px; color: red; text-align: center; } .messageBox .input input, .messageBox .textarea textarea{ height: 46px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0; font-size: 14px; background: none; width: calc(100% - 40px); } .messageBox .textarea textarea{ padding: 12px 0; height: 130px; line-height: 1.4; } .messageBox .code{ width: 256px!important; } .messageBox .code input{ width: 126px; } .messageBox .code img{ width: 80px; height: 26px; cursor: pointer; margin: 11px 0 0 10px; } .messageBox .button{ padding: 12px 0 4% 2%; clear: both; } .messageBox .button input{ display: block; border: 0; background: #505050; width: 120px; height: 38px; color: #FFF; font-size: 14px; cursor: pointer; } .mapBox{ padding: 0 12px; } .my-map{ height:660px; border:1px solid #CCC; margin: 0 2% 4% 2%; } .my-map .icon{ background:url(https://a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; } .my-map .icon-cir{ height:31px; width:28px; } .my-map .icon-cir-red{ background-position:-11px -5px; } .amap-container{ height:100%; } .myinfowindow{ width:240px; min-height:50px; } .myinfowindow h5{ height:20px; line-height:20px; overflow:hidden; font-size:14px; font-weight:bold; width:220px; text-overflow:ellipsis; word-break:break-all; white-space:nowrap; } .myinfowindow div{ margin-top:10px; min-height:40px; line-height:20px; font-size:13px; color:#6f6f6f; } .list_case a{ display: block; float: left; width: 22.25%; margin: 3% 0 0 3%; background: #f9f9f9; } .list_case a:nth-child(-n+4){ margin-top: 0; } .list_case a:nth-child(4n+1){ margin-left: 0; } .list_case a li{ position: relative; } .list_case a li img{ width: 100%; } .list_case a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .list_case a span{ color: #919191; margin: 20px 5% 6px; height: 28px; } .list_case a font{ font-size: 20px; margin: 0 5%; color: #4c4c4c; } .list_case a:after{ content: '查看更多 >'; margin: 20px 5% 6%; font-size: 12px; color: #4c4c4c; display: inline-block; } .list_case a:hover{ background: #efefef; } .list_history{ position: relative; padding: 4% 0; } .list_history:before, .list_history:after{ content: ''; display: block; position: absolute; left: 50%; margin-left: -5px; border: 5px solid transparent; } .list_history:before{ top: -6px; border-bottom-color: #c1c1c1; } .list_history:after{ bottom: -6px; border-top-color: #c1c1c1; } .list_history > i{ display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #c1c1c1; } .list_history > div{ width: 50%; position: relative; z-index: 1; margin-top: 4%; padding: 0 48px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .list_history > div:nth-child(1){ margin-top: 0; } .list_history > div:nth-child(2n){ padding-right: 48px; } .list_history > div:nth-child(2n+1){ margin-left: 50%; padding-left: 48px; } .list_history > div:before{ content: ''; display: block; position: absolute; width: 10px; height: 10px; top: 12px; background: #C00; border-radius: 100%; } .list_history > div:nth-child(2n):before{ right: 0; margin-right: -5px; } .list_history > div:nth-child(2n+1):before{ left: 0; margin-left: -5px; } .list_history > div > span{ font-size: 24px; line-height: 36px; } .list_history > div:nth-child(2n) > span{ text-align: right; } .list_history > div > li{ min-height: 194px; margin-top: 2.5%; } .list_history > div:nth-child(2n) > li{ text-align: right; } .list_history > div > li, .list_history > div > li *{ line-height: 30px; } .list_history > div > ul{ font-size: 0; letter-spacing: -1px; position: absolute; top: 13px; width: 100%; padding: 0 48px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .list_history > div:nth-child(2n) > ul{ right: -100%; } .list_history > div:nth-child(2n+1) > ul{ left: -100%; text-align: right; } .list_history > div > ul > li{ position: relative; display: inline-block; vertical-align: top; letter-spacing: 0; width: 48.7%; margin-left: 2.4%; } .list_history > div > ul > li:nth-child(1){ margin-left: 0; } .list_history > div > ul > li img{ width: 100%; } .list_history > div > ul > li img:nth-child(2){ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .list_catalog > span{ display: block; font-size: 24px; line-height: 3; margin-top: 3%; border-bottom: 1px solid #e8e8e8; } .list_catalog > span:nth-child(1){ margin-top: 0; } .list_catalog a{ display: block; float: left; width: 9%; min-width: 150px; margin: 1.5% 0 0 4%; } .list_catalog a:nth-child(8n+1){ margin-left: 0; } .list_catalog a li{ position: relative; border: 1px solid #e3e3e3; } .list_catalog a li img{ width: 100%; } .list_catalog a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .list_catalog a span{ text-align: center; margin-top: 8px; } .newsBox{ padding: 5% 12px; } .newsBox .list a{ display: block; float: left; height: 160px; width: 48%; position: relative; margin: 0 0 4% 4%; } .newsBox .list a:nth-child(2n+1){ margin-left: 0; } .newsBox .list a img{ position: absolute; left: 0; top: 0; width: 230px; height: 100%; } .newsBox .list a ul{ margin: 0 0 0 calc(4% + 230px); } .newsBox .list a ul span{ font-size: 18px; line-height: 34px; padding-bottom: 15px; border-bottom: 1px solid #e8e8e8; } .newsBox .list a ul li{ font-size: 14px; line-height: 24px; height: 72px; -webkit-line-clamp:3; margin: 30px 0 0; } .newsBox .list a:hover ul span{ color: #C00; } .newsBox .more{ text-align: center; } .newsBox .more a{ display: inline-block; vertical-align: top; width: 178px; text-align: center; line-height: 52px; color: #404040; border: 1px solid #404040; } .newsBox .more a:hover{ color: #C00; border-color: #C00; } .aboutBox{ padding: 5% 12px 0; } .aboutBox .width{ height: 574px; position: relative; } .aboutBox .info{ width: 45%; position: relative; padding-top: 110px; z-index: 1; } .aboutBox .info > span{ display: block; font-size: 24px; letter-spacing: 8px; line-height: 1.5; } .aboutBox .info > font{ display: block; font-size: 24px; letter-spacing: 3px; line-height: 1.5; } .aboutBox .info > b{ display: block; font-size: 18px; font-weight: normal; margin-top: 20px; } .aboutBox .info > div{ margin: 15px 0 0; height: 250px; overflow: hidden; } .aboutBox .info > div, .aboutBox .info > div *{ color: #747474; } .aboutBox .info > a{ display: inline-block; vertical-align: top; color: #6f6f6f; } .aboutBox .info > a:hover{ color: #C00; } .aboutBox .pic .arrow{ height: 3px; margin-top: 34px; } .aboutBox .pic .arrow span{ border-radius: 0; width: 30px; vertical-align: top; height: 3px; margin-right: 2%; } .caseBox > span{ display: block; text-align: center; font-size: 36px; line-height: 1.5; padding: 4% 0 0; } .caseBox > span:after{ display: block; content: ''; margin: 2% auto 3%; width: 50px; height: 2px; background: #474747; } .caseBox .list{ position: relative; } .caseBox .swiper-slide img{ width: 100%; } .caseBox .width li{ position: absolute; top: 0; bottom: 0; width: 19.5%; overflow: hidden; background: rgba(255,255,255,.9); } .caseBox .width li span{ display: block; font-size: 30px; margin: 40% 15% 0; line-height: 1.4; } .caseBox .width li font{ display: block; font-size: 20px; line-height: 1.5; margin: 15px 15% 0; } .caseBox .width li a{ display: block; width: 178px; text-align: center; line-height: 52px; color: #404040; position: absolute; left: 50%; margin-left: -90px; bottom: 20%; border: 1px solid #404040; } .caseBox .width li a:hover{ color: #C00; border-color: #C00; } .caseBox .arrow{ display: none; } .sidebar{ font-size: 0; letter-spacing: -1px; margin: 2% 0 3%; } .sidebar a{ display: inline-block; vertical-align: top; letter-spacing: 0; border: 1px solid #ececec; font-size: 16px; padding: 0.5% 3%; margin-left: 2%; } .sidebar a:nth-child(1){ margin-left: 0; } .sidebar a:hover, .sidebar a.on{ background: #1b68a5; border-color: #1b68a5; color: #FFF; } .searchBox{ background: #f5f5f5; padding: 17px 12px; } .searchBox li{ font-size: 0; letter-spacing: -1px; } .searchBox li > *{ display: inline-block; vertical-align: top; letter-spacing: 0; font-size: 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: calc((100% - 44px - 115px) / 8); } .searchBox li > span{ width: 44px; line-height: 34px; margin-right: 10px; } .searchBox li > select{ height: 34px; background: #FFF; border: 1px solid #e9e9e9; margin-right: 15px; padding: 0 12px; color: #7b7b7b; } .searchBox li > a{ background: #FFF; cursor: pointer; line-height: 34px; text-align: center; border: 0; color: #1b68a5; } .list_type a{ display: block; float: left; width: 18.4%; margin: 2% 0 0 2%; } .list_type a:nth-child(-n+5){ margin-top: 0; } .list_type a:nth-child(5n+1){ margin-left: 0; } .list_type a li{ position: relative; } .list_type a li img{ width: 100%; background: #EEE; } .list_type a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .list_type a span{ text-align: center; margin-top: 3%; } .type_note{ margin-bottom: 3%; } .type_note,.type_note *{ line-height: 2.4; } .list_pro a{ display: block; float: left; width: 15%; margin: 2% 0 0 2%; } .list_pro a:nth-child(-n+6){ margin-top: 0; } .list_pro a:nth-child(6n+1){ margin-left: 0; } .list_pro a li{ position: relative; border: 1px solid #efefef; } .list_pro a li img{ width: 100%; } .list_pro a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .list_pro a span{ text-align: center; margin-top: 2%; } .picture{ position: relative; margin-top: 3%; } .picture img{ max-width: 100%; } .picture .arrow{ text-align: center; height: 8px; } .picture .arrow span{ margin:1% 0.5% 0; width: 12px; height: 12px; background: #e5e5e5; opacity: 1; vertical-align: top; } .picture .arrow span.active{ background: #4d4d4d; } .details{ margin-bottom: 5%; } .details .model{ position: relative; margin-bottom: 3%; overflow-x:auto; } .details .model ul{ font-size: 0; min-width:1200px; letter-spacing: -1px; background: #f4f4f4; border-bottom:1px solid white; } .details .model ul:nth-child(1){ background: #bfbfbf!important; color: #1e1e1e; } .details .model ul:hover{ background: #e1e1e1; } .details .model ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; text-align: center; width: 9%; } .details .model ul li:nth-child(1){ width: 16%; } .details .model ul li:nth-child(3){ width: 12%; } .details .model ul:nth-child(1) li:after{ content: ''; display: block; position: absolute; width: 1px; background: #FFF; top: 0; bottom: 0; } .details .model ul li span{ font-size: 14px; line-height: 18px; display: block; min-height: 18px; padding: 12px 10px; } .details .model ul li a{ display: block; width: 16px; height: 18px; margin: 0 auto; overflow: hidden; text-indent: -9999px; background: url(../images/icon.png); } .details .list a{ display: block; float: left; } .details .list a div{ position: relative; } .details .list a div img{ width: 100%; } .details .list a div img:nth-child(1){ position: absolute; left: 0; top: 0; height: 100%; } .details .list a span{ text-align: center; margin-top: 2%; } .details .list1 a{ display: block; float: left; width: 22.5%; margin: 2% 0 0 3.33%; } .details .list1 a:nth-child(-n+4){ margin-top: 0; } .details .list1 a:nth-child(4n+1){ margin-left: 0; } .details .list1 a div{ position: relative; } .details .list1 a div img{ width: 100%; } .details .list1 a div img:nth-child(1){ position: absolute; left: 0; top: 0; height: 100%; } .details .list1 a span{ text-align: center; margin-top: 2%; } .details .list2 a{ display: block; float: left; width: 15%; margin: 2% 0 0 2%; } .details .list2 a:nth-child(6n+1){ margin-left: 0; } .details .list2 a div{ position: relative; border: 1px solid #595758; } .details .list2 a div img{ width: 100%; } .details .list2 a div img:nth-child(1){ position: absolute; left: 0; top: 0; height: 100%; } .details .fl-left, .details .fl-right{ width: 46%; } #detailed{ margin-top: 2%; } #detailed > h1{ font-weight: normal; text-align: center; font-size: 24px; } .case_details .fl-left{ width: 55%; } .case_details .fl-left, .case_details .fl-left *{ font-size: 15px; } .case_details .fl-right{ width: 40%; } .case_details .fl-right, .case_details .fl-right *{ font-size: 18px; } .case_details .tn{ text-align: center; font-size: 24px; margin: 4% 0 0; } .case_details .tn:after{ content: ''; display: block; width: 50px; height: 2px; margin: 8px auto 0; background: #676767; } .case_details .list_case{ margin: 4% 0 5%; } .list_service a{ display: block; float: left; background: #f5f5f5; width: 48.5%; margin: 3% 0 0 3%; font-size: 0; letter-spacing: -1px; } .list_service a:nth-child(-n+2){ margin-top: 0; } .list_service a:nth-child(2n+1){ margin-left: 0; clear: both; } .list_service a li{ display: inline-block; vertical-align: middle; letter-spacing: 0; width: 50%; position: relative; overflow: hidden; } .list_service a li img{ width: 100%; } .list_service a li img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .list_service a li span{ font-size: 24px; display: block; margin: 0 8%; } .list_service a:hover{ background: #1b68a5; } .list_service a:hover li span{ color: #FFF; } .floatBox{ position:fixed; z-index:1000; top:50%; right:0; width:70px; margin-top: -152px; } .floatBox ul{ height:70px; margin-top:8px; position:relative; } .floatBox ul:nth-child(1){ margin-top:0; } .floatBox ul > a{ position:absolute; top:0; right:0; display:block; width:100%; height:70px; overflow:hidden; transition: all .6s; background:rgba(16,16,16,.5); border-left:6px solid rgba(0,56,127,.7); } .floatBox ul > a i{ display:block; width:32px; height:32px; margin:10px auto 3px; background:center center no-repeat; } .floatBox ul > a.wechat i{ background-image:url(../../images/wx.png); } .floatBox ul > a.email i{ background-image:url(../../images/email.png); } .floatBox ul > a.msg i{ background-image:url(../../images/msg.png); } .floatBox ul > a.top{ cursor: pointer; } .floatBox ul > a.top i{ background-image:url(../../images/top.png); } .floatBox ul > a span{ display:block; text-align:center; color:white; font-size:12px; line-height:20px; } .floatBox ul > a font{ display: none; } .floatBox ul > li{ opacity: 0; position:absolute; bottom:0; right:76px; background:white; padding:8px; transition: all .6s; border:1px solid #EEE; } .floatBox ul > li img{ width:120px; height:120px; } .floatBox ul:hover > a{ width: 152px; background: none; } .floatBox ul:hover > a i, .floatBox ul:hover > a span{ display: none; } .floatBox ul:hover > a font{ width:152px; display: table-cell; vertical-align:middle; text-align:center; color:white; height:70px; line-height:24px; white-space: nowrap; background:rgba(0,56,127,.7); } .floatBox ul:hover > li{ opacity: 1; right: 158px; } .wechatBox{ display: none; position: fixed; z-index: 9999; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.75); } .wechatBox li{ position: absolute; left: 50%; top: 50%; margin: -84px 0 0 -65px; } .wechatBox li img{ width: 120px; height: 120px; padding: 8px; background: #FFF; border: 1px solid #EEE; } .wechatBox li span{ display: block; text-align: center; font-size: 14px; color: #FFF; line-height: 24px; margin-top: 6px; }