.common-width1{ width: 1200px; margin: 0 auto; } .list-main { overflow: hidden;padding: 25px 0 50px 0; } .list-main .left { float: left;width: 270px; } .list-main .left .slide-menu { border: 1px solid #f0f0f0;padding: 20px 30px; } .list-main .left .slide-menu .title { font-size: 20px; font-weight: 400; line-height: 24px; color: #004DA5; opacity: 1; margin-bottom: 15px; } .list-main .left .slide-menu .title:before { content: ''; display: inline-block; width: 4px; height: 20px; background-color: #004DA5; margin-bottom: -4px; margin-right: 10px; } .list-main .left .slide-menu form { background-color: #F7F7F7;border: 1px solid #F0F0F0;padding: 0 0 0 15px; } .list-main .left .slide-menu form span:after{ content: ''; display: inline-block; width: 2px; height: 12px; margin-left: 10px; background-color: #cccccc; } .list-main .left .slide-menu form input { display: inline-block; background: none; border: none; width: 158px; border: none !important; } .list-main .left .slide-menu.bottom-menu{ margin-top: 0px; } .list-main .left .slide-menu ul{ list-style: none; } .list-main .left .slide-menu ul li{ border-bottom: 1px solid #CCCCCC; font-size: 14px; font-weight: 400; line-height: 24px; cursor: pointer; opacity: 1; padding: 20px 0 10px; } .list-main .left .slide-menu ul li a{ color: #333;text-decoration: none; } .list-main .left .slide-menu ul li:hover,.list-main .left .slide-menu ul li .act { color: #004DA5; } .list-main .right { float: right; width: 910px; } .list-main .right .head:before { content: ''; display: inline-block; width: 4px; height: 20px; background-color: #004DA5; margin-bottom: -4px; margin-right: 10px; } .list-main .right .head { font-size: 20px;color: #004DA5; border-bottom: 1px #ccc dotted; padding-bottom: 15px; } .list-main .right .head span { float: right;font-weight: normal; font-size: 14px; } .pagination>li { display: inline-block; margin: 0 10px; cursor: pointer; } .pagination>li:hover { background: #004DA5; } .pagination>li:hover a{ background: #004DA5; color: white; } /*fixed-right*/ .fixed-right{ position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 333333; width: 75px; } .fixed-right>a{ width: 75px; height: 75px; border: 1px solid #F0F0F0; transition:.3s; display: block; background: #fff; position: absolute; right: 0; box-sizing: border-box; } .fixed-right a:last-of-type{ height: 45px; } .fixed-right a .imgBox{ width: 27px; height: 45px; margin: 0 auto; position: relative; } .fixed-right a .imgBox img{ position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); } .fixed-right a .imgBox2{ display: none; height: 75px; position: relative; width: 60px; } .fixed-right a .imgBox2 img{ position: absolute; width: 27px; height: auto; top: 50%; right: 10px; transform: translateY(-50%); } .fixed-right a>p:nth-of-type(1){ text-align: center; font-size:14px; font-family:Source Han Sans SC; font-weight:400; color:rgba(153,153,153,1); opacity:1; } .fixed-right a>p:nth-of-type(2){ display: block; position: absolute; left: 60px; top: 50%; transform: translateY(-50%); font-size:14px; font-family:Source Han Sans SC; font-weight:400; line-height:20px; color:rgba(255,255,255,1); opacity:0; } .fixed-right>a:nth-of-type(1){ top: 0; z-index: 5; } .fixed-right>a:nth-of-type(2){ top: 75px; z-index: 6; } .fixed-right>a:nth-of-type(3){ top: 150px; z-index: 7; } .fixed-right>a:nth-of-type(4){ top: 225px; z-index: 8; } .fixed-right>a:nth-of-type(5){ top: 300px; z-index: 9; } .fixed-right>a:hover{ width: 170px; border-color: #3A8EFC; background: #3A8EFC; } .fixed-right>a:hover .imgBox{ display: none; } .fixed-right>a:hover .imgBox2{ display: block; } .fixed-right>a:hover p:nth-of-type(1){ display: none; } .fixed-right>a:hover p:nth-of-type(2){ opacity: 1; } .fixed-right>a:hover.f-wechat{ width: 75px; height: 75px; border-color: #3A8EFC; background: #3A8EFC; } .fixed-right>a:last-of-type:hover{ width: 75px; height: 45px; border: 1px solid #3A8EFC; transition:.3s; display: block; background: #fff; position: absolute; right: 0; box-sizing: border-box; border-color: #3A8EFC; } .fixed-right>a:last-of-type:hover .imgBox{ display: block; } .fixed-right>a:last-of-type:hover .imgBox2{ display: none; } .fixed-right>a:last-of-type:hover p:nth-of-type(1){ display: block; } .fixed-right>a:last-of-type:hover p:nth-of-type(2){ opacity: 0; } .fixed-right>a:hover.f-wechat .imgBox2{ width: 27px; height: 75px; margin: 0 auto; position: relative; } .fixed-right>a:hover.f-wechat .imgBox2 img{ position: absolute; width: 27px; height: auto; top: 50%; right: unset; transform: translateY(-50%); } .f-wechat .imgBox3{ transition: .3s; width: 0; overflow: hidden; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 74px; background: #3A8EFC; height: 140px; } .f-wechat .imgBox3 img{ width: 0; } .fixed-right>a.f-wechat:hover .imgBox3{ width: 120px; } .fixed-right>a.f-wechat .imgBox3 p{ opacity:0; } .fixed-right>a:hover.f-wechat .imgBox3 img{ width: 80px; height: 80px; margin-left: 20px; margin-top: 20px; } .fixed-right>a:hover.f-wechat .imgBox3 p{ text-align: center; margin-top: 10px; font-size:14px; font-family:Source Han Sans SC; font-weight:400; color:rgba(255,255,255,1); opacity:1; display: block; }