.fl { float: left; } .fr { float: right; } .tong { width: 1200px; margin: 0 auto; } .tong1 { position: relative; left: 50%; margin-left: -960px; width: 1920px; } .tou { top: 0; position: fixed; background: url(/uploads/image/td/images/tou.png) no-repeat 50% 0; padding-top: 31px; z-index: 1111; } .tou .con .dh { position: absolute; top: 0; right: 222px; color: #d81e06; font-size: 16px; padding-left: 24px; background: url(/uploads/image/td/images/dh.png) no-repeat 0 50%; line-height: 30px; } .tou .con .logo { position: absolute; left: 50%; transform: translatex(-50%); top: 0; } .x-banner { position: absolute; top: 0; } .x-banner .list1 { position: relative; } .x-banner .list1 .slick-arrow { position: absolute; top: 444px; transform: translatey(-50%); z-index: 1111111111; font-size: 0; background: none; border: none; width: 48px; height: 95px; outline: none; } .x-banner .list1 .slick-arrow.slick-prev { left: 256px; background: url(/uploads/image/td/images/zb.png) no-repeat 0 50%; } .x-banner .list1 .slick-arrow.slick-next { right: 256px; background: url(/uploads/image/td/images/yb.png) no-repeat 0 50%; } h2 { text-align: center; } .section2 { background: url(/uploads/image/td/images/c1.png) no-repeat 50% 0; } .section2 .c1 { padding-top: 126px; } .section2 .zi { margin-top: 54px; background: url(/uploads/image/td/images/kuang.png) no-repeat 50% 0; height: 308px; padding-top: 23px; } .section2 .zi h3 { font-size: 20px; color: #ab4d00; text-align: center; } .section2 .zi dd { line-height: 24px; color: #333333; margin-top: 28px; font-size: 14px; text-align: center; } .section2 .zi .list2 { justify-content: center; display: flex; margin-top: 42px; } .section2 .zi .list2 li { margin: 0 57px; } .section2 .zi .list2 li a { display: flex; align-items: center; } .section2 .zi .list2 li a .img { width: 58px; height: 58px; text-align: center; margin-right: 8px; overflow: hidden; } .section2 .zi .list2 li a .img1 { background: url(/uploads/image/td/images/n1.png) no-repeat 50%; line-height: 58px; width: 58px; height: 58px; transition-duration: .5s; } .section2 .zi .list2 li a .img2 { background: url(/uploads/image/td/images/n1h.png) no-repeat 50%; line-height: 58px; width: 58px; height: 58px; transition-duration: .5s; } .section2 .zi .list2 li a .zi1 h4 { font-size: 18px; font-weight: 600; color: #954c00; } .section2 .zi .list2 li a .zi1 .zi2 { color: #954c00; font-size: 14px; } .section2 .zi .list2 li:hover a .zi1 h4 { color: #da261c; } .section2 .zi .list2 li:hover a .zi1 .zi2 { color: #da261c; } .section2 .zi .list2 li:hover a .img1 { margin-top: -58px; } .section3 { background: url(/uploads/image/td/images/c2.png) no-repeat 50% 0; } .section3 h2.bt { position: absolute; left: 50%; width: 398px; top: 20%; margin-left: -198px; } .section3 .list2 { display: flex; text-align: center; } .section3 .list2 li { width: 300px; background: rgba(149, 76, 0, 0.08); height: 100vh; position: relative; transition-duration: .5s; } .section3 .list2 li a { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; z-index: 11; } .section3 .list2 li a .img { padding-top: 52%; } .section3 .list2 li:after { display: block; content: ''; width: 100%; height: 0%; background: rgba(149, 76, 0, 0.38); transition-duration: .5s; position: absolute; bottom: 0; left: 0; } .section3 .list2 li:nth-child(2n) { background: rgba(255, 255, 255, 0.56); } .section3 .list2 li:hover { background: none; } .section3 .list2 li:hover:after { height: 100%; } .section4 { background: url(/uploads/image/td/images/c3.png) no-repeat 50% 0; } .section4 .c4 { padding-top: 120px; } .section4 .c4 .list1 { display: flex; justify-content: center; margin-top: 28px; } .section4 .c4 .list1 li { margin: 0 7px; } .section4 .c4 .list1 li a { display: block; padding: 0 20px; line-height: 25px; border: solid 1px #ab4d00; position: relative; } .section4 .c4 .list1 li a p { position: relative; z-index: 2; font-size: 14px; color: #954c00; transition-duration: .5s; } .section4 .c4 .list1 li a:after { content: ''; position: absolute; left: 0; top: 0; width: 0%; background: #954c00; height: 100%; transition-duration: .5s; } .section4 .c4 .list1 li a:hover:after { width: 100%; } .section4 .c4 .list1 li a:hover p { color: #fff; } .section4 .c4 .con { margin-top: 66px; position: relative; } .section4 .c4 .con .xx { position: absolute; top: 50%; cursor: pointer; z-index: 1; } .section4 .c4 .con .xx.prev { left: -60px; } .section4 .c4 .con .xx.next { right: -60px; } .section4 .c4 .con .bd { overflow: hidden; } .section4 .c4 .con .list2 { text-align: center; } .section4 .c4 .con .list2 li { float: left; margin: 0 32px; } .section4 .c4 .con .list2 li:last-child { margin-right: 0; } .section4 .c4 .con .list2 li .img { overflow: hidden; } .section4 .c4 .con .list2 li .img img { width: 255px; height: 274px; } .section4 .c4 .con .list2 li h3 { color: #000000; font-size: 14px; font-weight: 500; } .section4 .c4 .con .list2 li:hover h3 { color: #ab4d00; font-weight: 600; } .section4 .c4 a.ck { margin-top: 48px; margin-left: auto; margin-right: auto; display: block; width: 125px; height: 34px; color: #ab4d00; border: 1px solid #ab4d00; border-radius: 17px; line-height: 34px; text-align: center; font-size: 14px; position: relative; overflow: hidden; } .section4 .c4 a.ck p { position: relative; z-index: 2; transition-duration: .5s; } .section4 .c4 a.ck:after { display: block; content: ''; width: 0%; height: 100%; position: absolute; left: 0; top: 0; background: #ab4d00; z-index: 1; transition-duration: .5s; } .section4 .c4 a.ck:hover p { color: #fff; } .section4 .c4 a.ck:hover:after { width: 100%; } .fen { overflow: hidden; } .fen img { transition-duration: .5s; } .fen:hover img { transform: scale(1.1); } .section5 { background: url(/uploads/image/td/images/c4.png) no-repeat 50% 0; } .section5 .c5 { padding-top: 40px; } .section5 .c5 .list1 { margin-top: 38px; display: flex; justify-content: center; margin-bottom: 20px; } .section5 .c5 .list1 li { margin: 0 9px; height: 27px; border: solid 1px #ab4d00; } .section5 .c5 .list1 li a { display: block; position: relative; } .section5 .c5 .list1 li a p { padding: 0 18px; line-height: 25px; position: relative; color: #954c00; font-size: 14px; z-index: 2; transition-duration: .5s; } .section5 .c5 .list1 li a:after { content: ''; position: absolute; left: 0; top: 0; width: 0%; background: #954c00; height: 100%; z-index: 1; transition-duration: .5s; } .section5 .c5 .list1 li a:hover:after { width: 100%; } .section5 .c5 .list1 li a:hover p { color: #fff; } .section5 .c5 .con .list2 li { background: #fff; padding: 21px 18px 0; float: left; width: 374px; height: 303px; margin-right: 36px; position: relative; } .section5 .c5 .con .list2 li:last-child { margin-right: 0; } .section5 .c5 .con .list2 li a { display: block; position: relative; z-index: 2; } .section5 .c5 .con .list2 li a .img { position: relative; overflow: hidden; } .section5 .c5 .con .list2 li a .img img { width: 338px; height: 158px; } .section5 .c5 .con .list2 li a .img .cname { position: absolute; left: 0; top: 0; width: 67px; line-height: 27px; color: #fff; background-color: #ab4d00; text-align: center; } .section5 .c5 .con .list2 li a .zi h3 { font-size: 16px; color: #010000; font-weight: 500; margin-top: 13px; } .section5 .c5 .con .list2 li a .zi dd { font-size: 12px; color: #666666; margin-top: 9px; } .section5 .c5 .con .list2 li a .zi .timex { color: #666666; padding-left: 25px; background: url(/uploads/image/td/images/time.png) no-repeat 0 50%; margin-top: 28px; } .section5 .c5 .con .list2 li:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; background: #ab4d00; height: 0%; z-index: 1; transition-duration: .5s; } .section5 .c5 .con .list2 li:hover:before { height: 100%; } .section5 .c5 .con .list2 li:hover a .zi h3 { color: #fff; } .section5 .c5 .con .list2 li:hover a .zi dd { color: #fff; } .section5 .c5 .con .list2 li:hover a .zi .timex { color: #fff; background: url(/uploads/image/td/images/time1.png) no-repeat 0 50%; } .section5 .c5 a.ck { margin-top: 77px; margin-left: auto; margin-right: auto; display: block; width: 125px; height: 34px; color: #ab4d00; border: 1px solid #ab4d00; border-radius: 17px; line-height: 34px; text-align: center; font-size: 14px; position: relative; overflow: hidden; } .section5 .c5 a.ck p { position: relative; z-index: 2; transition-duration: .5s; } .section5 .c5 a.ck:after { display: block; content: ''; width: 0%; height: 100%; position: absolute; left: 0; top: 0; background: #ab4d00; z-index: 1; transition-duration: .5s; } .section5 .c5 a.ck:hover p { color: #fff; } .section5 .c5 a.ck:hover:after { width: 100%; } .section6 { background: url(/uploads/image/td/images/c5.png) no-repeat 50% 0; } .section6 .banx { font-size: 12px; line-height: 22px; color: #666666; text-align: left; position: absolute; bottom: -212px; width: 1200px; left: 50%; margin-left: -600px; } .section6 .c6 .lx { text-align: center; margin-top: 47px; } .section6 .c6 .lx p:nth-child(1) { font-size: 30px; color: #000000; } .section6 .c6 .lx p:nth-child(2) { font-size: 40px; color: #ab4d00; } .section6 .c6 .lx p:nth-child(3) { font-size: 14px; color: #ab4d00; margin-top: 4px; } .section6 .c6 .list2 { margin-top: 18px; display: flex; justify-content: center; } .section6 .c6 .list2 li { margin: 0 10px; text-align: center; } .section6 .c6 .list2 li .img { overflow: hidden; border: solid 1px #dcdcdc; position: relative; } .section6 .c6 .list2 li .img img { width: 142px; height: 142px; } .section6 .c6 .list2 li .img span { display: block; background: #ab4d00; position: absolute; transition: .2s; } .section6 .c6 .list2 li dd { color: #000000; font-size: 14px; line-height: 30px; } .section6 .c6 .list2 li:hover .img { border: solid 1px transparent; } .section6 .c6 .list2 li:hover dd { color: #ab4d00; }