@charset "utf-8"; @font-face { font-family: 'sysong'; src: format('woff'); font-weight: normal; font-style: normal; } .sect { padding-top: 45px; padding-bottom:25px; } .s1-l { float: left; width: 680px; } .s1-l a { display: block; position: relative; } .s1-l a .pic { padding-top: 64%; } .s1-l a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 55px; background: rgba(0, 0, 0, .46); padding-left: 20px; padding-right: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; color: #fff; } .s1-l .slick-dots { width: auto; right: 20px; bottom: 15px; } .s1-l .slick-dots li { width: 14px; height: 14px; border-radius: 50%; background-color: #fff; margin: 0 10px; } .s1-l .slick-dots li.slick-active { background-color: #c21319; } .s1-r { float: right; width: calc(100% - 720px); } .title { border-bottom: 1px solid #dddddd; overflow: hidden; } .title h2 { float: left; line-height: 54px; padding-left: 6px; border-left: 0px solid #ffa10e; padding-left: 20px; padding-right: 60px; background: url(/uploads/image/dimages/tit-bg.png) no-repeat left center; background-size: 100% 100%; } .title h2 span { font-size: 26px; color: #fff; } .title a { float: right; font-size: 16px; color: #666; margin-top: 25px; } .title a:hover { color: #c21319; } .s1-r-top { padding: 20px 0; border-bottom: 1px dashed #dddddd; } .s1-r-top h2 { font-size: 18px; color: #111; font-weight: bold; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s1-r-top p { font-size: 14px; line-height: 22px; color: #919191; height: 44px; overflow: hidden; } .list { margin-top: 15px; } .list>li { padding-left: 15px; background: url(/uploads/image/dimages/list.png) no-repeat left center; line-height: 42px; height: 42px; } .list>li:hover a { color: #c21319; text-decoration: underline; } .list>li a { display: block; font-size: 18px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 87%; float: left; } .list>li span { float: right; font-size: 16px; color: #333; } .s2-l { float: left; width: 100%; } .s2-l .s2-ll{ float:left; width:48%;} .s2-l .s2-lr{float:right; width:48%;} /* 本例子css */ .slidebox{ width:100%; min-height:230px;max-height:350px; overflow:hidden; position:relative; border:0px solid #ddd; margin-top:30px; } .slidebox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:9px; z-index:1; } .slidebox .hd ul{ overflow:hidden; zoom:1; float:left; } .slidebox .hd ul li{ float:left; margin-right:6px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; } .slidebox .hd ul li.on{ background:#f00; color:#fff; } .slidebox .bd{ position:relative; height:100%; z-index:0; } .slidebox .bd li{ zoom:1; vertical-align:middle; } .slidebox .bd img{ width:100%; height:auto;max-height:350px; display:block; object-fit: cover; } /* 下面是前/后按钮代码,如果不需要删除即可 */ .slidebox .prev, .slidebox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(/uploads/image/dimages/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5; } .slidebox .next{ left:auto; right:3%; background-position:8px 5px; } .slidebox .prev:hover, .slidebox .next:hover{ filter:alpha(opacity=100);opacity:1; } .slidebox .prevstop{ display:none; } .slidebox .nextstop{ display:none; } .tpp-list { overflow: hidden; margin-top: 22px; } .tpp-list>li { float: left; width: 48%; margin-left: 4%; } .tpp-list>li:nth-child(2n-1) { margin-left: 0; } .tpp-list>li a { display: block; position: relative; } .tpp-list>li a .pic { padding-top: 65%; } .tpp-list>li a p { position: absolute; left: 0; right: 0; bottom: 0; line-height: 36px; background: rgba(0, 0, 0, .52); font-size: 14px; color: #fff; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-list>li { float: left; border: 0px solid #dddddd; background-color: #fcfcfc; margin-top: 30px; width: 48%; margin-left: 4%; box-sizing: border-box; } .bt-list>li:nth-child(2n-1) { margin-left: 0; } .bt-list>li a { display: block; padding: 18px 20px 18px 25px; background: url(/uploads/image/dimages/txt-list.png) no-repeat left 20px; } .bt-list>li a p { line-height: 24px; font-size: 18px; color: #333; height: 48px; overflow: hidden; } .bt-list>li:hover { box-shadow: 0 0 10px #f6c2c2; } .bt-list>li:hover a p { color: #be1219; } .s3-l { float: left; width: 32%; margin-right:2%; } .s3-r { float: right; width: 32%; } .s3-l .s3-ll { float: left; width: 290px; background-color: #f8f3f3; padding: 22px; box-sizing: border-box; margin-top: 30px;min-height:325px; } .s3-l .bt-list { overflow: hidden; padding-left: 30px; } .s3-l .bt-list li { float: none; width: 100%; margin-left: 0; margin-top: 28px; } .s3-l .s3-ll h2 { font-size: 18px; color: #be1219; font-weight: bold; padding-bottom: 30px; border-bottom: 2px solid #be1219; } .s3-l .s3-ll p { margin-top: 25px; line-height: 24px; font-size: 14px; color: #8d8a8a; } .s3-l .bt-list li a { background-image: none; background-color: #f8f3f3; background-position: 0 100%; background-size: 1% 100%; background-repeat: no-repeat; background-image: linear-gradient(#be1219, #be1219); transition: background-size .3s; } .s3-l .bt-list li:hover a { background-size: 100% 100%; } .s3-l .bt-list li:hover a p { color: #fff; } .s3-l .bt-list>li a p { line-height: 27px; height: 54px; } .s3r-top { padding-top: 30px; padding-bottom: 18px; border-bottom: 1px dashed #dddddd; overflow: hidden; } .s3r-top a { display: block; overflow: hidden; } .s3r-top .tpp { float: left; width: 240px; } .s3r-top .tpp .pic { padding-top: 63%; } .s3r-top .text { overflow: hidden; padding-left: 25px; } .s3r-top .text h2 { line-height: 30px; font-size: 18px; color: #111; height: 60px; overflow: hidden; font-weight: normal; margin-bottom: 20px; } .s3r-top .text p { line-height: 20px; font-size: 14px; color: #919191; height: 60px; overflow: hidden; } .zt { margin-top: 25px; margin-bottom: 15px; } .zt>ul { margin-left: -15px; margin-right: -15px; } .zt ul li { margin: 0 15px; } .zt ul li a { display: block; } .zt ul li a .pic { padding-top: 63.5%; } @media screen and (max-width: 1100px) { .s1-l { width: 580px; } .s1-r { width: calc(100% - 610px); } .s1-r-top { padding: 10px 0; } .s1-r-top h2 { margin-bottom: 5px; } .list>li { line-height: 34px; } .list>li a { width: 100%; float: none; } .list>li span { display: none; } .bt-list>li { margin-top: 17px; } .s3-l .s3-ll { width: 215px; padding: 15px;min-height:auto; } .s3-l .bt-list li { margin-top: 35px; } } @media screen and (max-width: 1340px) { .zt { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width:900px) { .s1-l, .s2-l, .s3-l { float: none; width: 100%; } .s1-l { margin-top: 15px; } .s1-r { float: none; width: 100%; } .s2-r { float: none; width: 100%; margin-top: 15px; } .s3-r { float: none; width: 100%; margin-top: 15px; }.list>li a { width: 100%; float: none; } .s3-l .s3-ll { min-height:auto; } .list>li span { display: none; } } @media screen and (max-width:700px) { .sect { padding-top: 15px; } .title h2 span { font-size: 18px; } .title h2 { padding-right: 40px; line-height: 35px; background-size: 120px 100%; } .title a { margin-top: 5px; font-size: 14px; } .list { margin-top: 0; } .list>li a { font-size: 15px; }.list>li a { width: 100%; float: none; } .list>li span { display: none; } .s3-l .s3-ll { min-height:auto; } .s1-l a p { font-size: 15px; } .s1-l .slick-dots li { margin: 0 5px; } .bt-list>li { float: none; width: 100%; margin-left: 0; } .bt-list>li a { padding: 15px; } .s3-l .s3-ll { float: none; width: 100%; margin-top: 15px; } .s3-l .bt-list { padding-left: 0; } .s3-l .bt-list li { margin-top: 15px; } .s3r-top { padding-top: 15px; padding-bottom: 15px; } .s3r-top .tpp { float: none; width: 100%; } .s3r-top .text { padding-left: 0; } .zt { margin-top: 15px; margin-bottom: 15px; } }