@charset "utf-8"; a { text-decoration: none; display: block; } .listcontentbright>inpute{position: absolute; top: 50%; left: 15px;} .banner { position: relative; overflow: hidden; max-width: 1500px; margin: 0 auto; } .banner img { display: block; width: 100%; } .banner a { display: block; } .banner .slick { position: relative; z-index: 9; } .banner .slick-slide a { display: block; position: relative; } .banner .slick-dots { bottom: 5%; } .banner .slick-dots li { width: 16px; height: 16px; background: url(/uploads/image/images/banner-dots-a.png) no-repeat; background-size: cover; opacity: 0.5; margin: 0 9px; } .banner .slick-dots li.slick-active { opacity: 1; } .banner .slick-prev { width: 38px; height: 50px; background: url(/uploads/image/images/banner-l.png) no-repeat; background-size: cover; left: 4%; transition: all 0.3s; } .banner .slick-next { width: 38px; height: 50px; background: url(/uploads/image/images/banner-r.png) no-repeat; background-size: cover; right: 4%; transition: all 0.3s; } .banner .slick-arrow:hover { opacity: 0.8; } .banner .slick-slide a::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/uploads/image/images/banner-zzc2.png) repeat-x; background-position: center bottom; z-index: 1; } .banner-box { background: url(/uploads/image/images/s1-bj.jpg) no-repeat; background-size: cover; } .index{ background: url(/uploads/image/images/index-bj.png) no-repeat; background-size: cover; } .index .px1400{ background-color: #fff; padding: 0 30px; } /* s1 */ .s1{ padding-top: 42px; padding-bottom: 54px; } .tit h3 { line-height: 40px; font-size: 24px; color: #ffffff; background: url(/uploads/image/images/tit-bj.png) no-repeat; display: inline-block; padding-left: 13px; padding-right: 18px; background-size: 100% 100%; } .tit { position: relative; border-bottom: 1px solid #e6e6e6; margin-bottom: 30px; } .tit a { position: absolute; top: 50%; right: 0; transform: translatey(-50%); font-size: 14px; color: #818181; } .zbcg a:hover{color: #818181 !important;} .tit a:hover { color: #3489df; } .s1-l { width: 30%; float: left; } .s1-banner .pic { height: 314px; padding-top: 0; } .s1-banner .slick-dots { text-align: right; padding-bottom: 15px; padding-right: 15px; } .s1-banner .slick-dots li{ width: 8px; height: 8px; border-radius: 50%; background-color: #fff; opacity: 0.5; } .s1-banner .slick-dots li.slick-active{ opacity: 1; } .s1-banner a { position: relative; } .s1-banner a::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/uploads/image/images/s1-zzc.png) repeat-x; background-position: center bottom; z-index: 1; } .s1-info { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; } .s1-info p { max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; padding-left: 20px; padding-bottom: 15px; color: #ffffff; } .s1-banner a:hover img{ transform: scale(1.1); } .s1-m{ float: left; width: 30%; margin: 0 2.5%; } .s1-list ul li a span{ float: right; font-size: 16px; color: #b7b7b7; } .s1-list ul li a { font-size: 16px; color: #313131; padding: 15px 0; line-height: 16px; padding-left: 15px; background: url(/uploads/image/images/tx-dots.png) no-repeat; background-position: left center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-list ul li a:hover{ background: url(/uploads/image/images/tx-dots-h.png) no-repeat; background-position: left center; color: #3489df; } .s1-list ul li a:hover span{ color: #3489df; } .s1-r{ overflow: hidden; font-size: 0; } .s1-r h3.on{ background-size: 100% 100%; color: #fff; } .s1-r h3{ background-size: 0; color: #818181; cursor: pointer; } .s1-pic ul li { display: inline-block; width: 50%; padding: 5px; } .s1-pic ul li:nth-child(2) .pic{ border-radius: 0 50px 0 0; } .s1-pic ul li:nth-child(3) .pic{ border-radius: 0 0 0 50px; } .s1-pic ul li a .pic{ height: 146px; padding-top: 0; } /* s2 */ .s2{ padding-bottom: 50px; } .s2 .tit{ margin-bottom: 15px; } .s2-l h3.on{ background-size: 100% 100%; color: #fff; } .s2-l h3{ background-size: 0; color: #818181; cursor: pointer; } .s2-l{ width: 30%; float: left; } .s2-m{ float: left; margin: 0 2.5%; width: 30%; } .s2-r{ overflow: hidden; font-size: 0; } .s2-r ul li a .pic{ height: 97px; padding-top: 0; } .s2-r ul{ padding-top: 10px; } .s2-r ul li{ display: inline-block; width: 50%; padding: 3px; } /* link */ .link b{ float: left; font-size: 18px; color: #029aca; width: 9%; font-weight: normal; line-height: 40px; vertical-align: middle; padding-left: 2%; } .link{ border-top: solid 1px #e6e6e6; padding: 36px 0; } .link>ul{ width: 91%; float: left; } .link>ul>li{ float: left; width: 18.4%; margin-left: 2%; position: relative; background-color: #ffffff; border: solid 1px #c4e3ef; } .link>ul>li:first-child{ margin-left: 0; } .link>ul>li>a{ border-radius: 10px; line-height: 40px; font-size: 16px; color: #313131; padding-left: 20px; background: url(/uploads/image/images/link-arrow.png) no-repeat #fff; background-position: 90% center; } .link>ul>li>ul{ background-color: #fff; border: 1px solid #c4e3ef; position: absolute; min-width: 100%; bottom: 40px; padding: 15px 0; display: none; box-shadow: 0 0 10px #ddd; max-height: 300px; overflow-y: auto; } .link>ul>li>ul>li>a{ line-height: 40px; font-size: 15px; padding-left: 20px; color: #333; } .link>ul>li:hover ul{ display: block; } .link>ul>li>ul>li>a:hover{ background-color: #3489df; color: #fff; } /*aside*/ .aside{ position: fixed; top: 43%; transform: translatey(-50%); right: 10px; width: 100px; background: #fff; z-index: 999; /* padding: 10px 0; */ box-shadow: 0 0 10px rgba(51,51,51, 20%); } .aside li{ position: relative; line-height: 40px; border-bottom:1px solid #ddd; transition: .5s; padding-top:10px; } .aside li>a{ display: block; padding-top: 15px; font-size: 16px; color: #666; background-position: top center; background-repeat: no-repeat; background-size: 16px; text-align: center; } .aside li:first-child{ } .aside li:first-child>a{ background-image: ; } .aside li:nth-child(2)>a{ background-image: ; } .aside li:nth-child(3)>a{ background-image: ; } .aside li:nth-child(4)>a{ background-image: ; } .aside li:nth-child(5)>a{ background-image: ; } .aside li:first-child:hover>a{ background-image: ; } .aside li:nth-child(2):hover>a{ background-image: ; } .aside li:nth-child(3):hover>a{ background-image: ; } .aside li:nth-child(4):hover>a{ background-image: ; } .aside li:nth-child(5):hover>a{ background-image: ; } .aside li:nth-child(6):hover{ background: #ffffff; } .aside li:nth-child(6):hover>a{ color: #666; } .aside li dl{ position: absolute; width: 100px; top: 0; left: -100px; opacity: 0; visibility: hidden; transition: .5s; background: #ffffff; z-index: 99; /* padding: 10px 0; */ } .aside li dd a{ display: block; font-size: 16px; line-height: 65px; color: #666; text-align: center; border-top: 1px solid #eee; } .aside li dd a:hover{ color:#eee; background:#3285d8; } .aside li dd:first-child a{ border:none; } .aside li:hover dl{ opacity: 1; visibility: visible; } .aside li:hover{ background: #0068b7; } .aside li:hover>a{ color: #fff; } .aside li:nth-child(3){ background: none; } .aside li:nth-child(3):hover{ background-color: #0068b7; } @media screen and (max-width:1200px) { .index .px1400{ padding: 0 10px; } .link b{ padding-left: 0; } } @media screen and (max-width:1024px) { .s1{ padding: 40px 0; } .s2{ padding-bottom: 40px; } .tit h3{ font-size: 22px; } .s1-l,.s2-l{ width: 49%; } .s1-m,.s2-m{ width: 49%; margin: 0; margin-left: 2%; } .s1-r,.s2-r{ clear: both; width: auto; padding-top: 30px; } .s1-pic ul li a .pic{ padding-top: 65.7%; height: auto; } .s2-r ul li a .pic{ padding-top: 43%; height: auto; } .link b{ float: none; width: auto; margin-right: 0; } .link>ul{ float: none; width: auto; margin-right: 0; } .link>ul>li{ margin: 0; width: 49%; margin-bottom: 10px; } .link>ul>li:nth-child(odd){ margin-right: 2%; margin-bottom: 10px; } .aside{ display:none; } } @media screen and (max-width:768px) { .s1{ padding: 30px 0; } .s2{ padding-bottom: 30px; } .tit h3{ font-size: 20px; } .tit{ margin-bottom: 15px; } .banner .slick-arrow{ display: none !important; } .s1-l,.s2-l{ float: none; width: auto; margin-right: 0; margin-bottom: 20px; } .s1-banner .pic{ padding-top: 70%; height: auto; } .s1-m,.s2-m{ float: none; width: auto; margin: 0; } .s1-r{ padding-top: 20px; } .s1-info p{ font-size: 16px; } .s1-list ul li a{ padding: 10px 0; padding-left: 15px; } .link{ padding: 20px 0; } .link b{ line-height: 30px; margin-bottom: 10px; display: block; } } @media screen and (max-width:480px) { .s1{ padding: 25px 0; } .s2{ padding-bottom: 25px; } .tit h3{ font-size: 18px; } .tit a{ font-size: 12px; } .link>ul>li{ margin: 0; margin-bottom: 10px; float: none; width: auto; } .link>ul>li:nth-child(odd){ margin: 0; margin-bottom: 10px; } }