@charset "utf-8"; body { overflow-x: hidden; } /*首页主体*/ .index { background: url(../images/bg1.jpg) no-repeat; background-position: center top; padding-top: 55px; } .section1 {} .s1-c { display: flex; flex-wrap: nowrap; justify-content: space-between; position: relative; } .s1-l { width: 835px; } .s1-l ul { position: relative; padding-top: 58.9%; } .s1-l ul li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .s1-l ul li.on { opacity: 1; } .s1-l ul li a { display: block; position: relative; transition: all 0.3s; } .s1-l ul li a:hover .pic img { transform: scale(1.1); } .s1-l ul li .pic { padding-top: 58.9%; } .s1-l ul li .date { position: absolute; top: 20px; left: 20px; z-index: 1; width: 75px; height: 80px; background: rgba(0, 0, 0, 0.7); text-align: center; } .s1-l ul li .date p { font-size: 30px; color: #fff; } .s1-l ul li .date span { font-size: 14px; color: #fff; } .s1-r { flex: 1; margin-left: 25px; background: #fff; } .s1-r ul li { position: relative; z-index: 1; } .s1-r ul li a { display: flex; height: 80px; align-items: center; position: relative; z-index: 1; transition: all 0.3s; } .s1-r ul li::after { content: ""; position: absolute; top: 0; right: 100%; bottom: 0; border: 42px solid transparent; border-right: 25px solid #c00000; display: none; z-index: -1; } .s1-r ul li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #c00000; display: none; z-index: -1; } .s1-r ul li h3 { font-size: 18px; overflow: hidden; line-height: 28px; max-height: 56px; padding: 0 40px; } .s1-r ul li p { font-family: "syh-Light"; font-size: 14px; color: #f2f2f2; line-height: 26px; max-height: 52px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; display: none; } .s1-r ul li:first-child.on { margin-top: 0; } .s1-r ul li.on a { height: 84px; } .s1-r ul li.on a h3 { font-size: 22px; color: #fff; background: none; /* padding-left: 0; */ } .s1-r ul li.on a p { display: block; } .s1-r ul li.on::before { display: block; } .s1-r ul li.on::after { display: block; } .title { text-align: center; font-size: 0; overflow: hidden; margin-bottom: 60px; } .title h2 { position: relative; font-size: 0; display: inline-block; padding: 0 10px; } .title h2 span { display: inline-block; vertical-align: middle; font-size: 47px; font-weight: bold; line-height: 50px; color: #c00000; font-family: 思源黑体 CN; } .title h2 img { display: inline-block; vertical-align: middle; } .title h2::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 1920px; background: url(../images/tit-l.png) no-repeat; background-position: right center; } .title h2::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 1920px; background: url(../images/tit-r.png) no-repeat; background-position: left center; } .section2 { margin-top: 60px; } .s2-c { display: flex; justify-content: space-between; } .s2-l { width: 605px; } .s2-l ul li:nth-child(1) { margin-bottom: 25px; } .s2-l ul li a { display: flex; background: #c00000; align-items: center; } .s2-l ul li a .pics { width: 405px; } .s2-l ul li a .pics .pic { padding-top: 60%; } .s2-l ul li a .info { flex: 1; min-width: 0; padding: 0 25px; } .s2-l ul li a .info h3 { font-size: 18px; font-weight: normal; line-height: 30px; height: 150px; overflow: hidden; color: #ffffff; } .s2-l ul li a .info b { display: block; width: 54px; width: auto; height: 21px; background-color: #e8a45d; border-radius: 11px; text-align: center; line-height: 20px; font-size: 14px; font-weight: normal; color: #ffffff; margin-top: 25px; } .s2-r { flex: 1; min-width: 0; margin-left: 30px; background: url(../images/s2-r-bj.jpg) no-repeat; background-position: center center; background-size: cover; padding: 30px 40px 20px 40px; } .frist-item a { display: block; padding-bottom: 25px; border-bottom: 1px dashed #dddddd; margin-bottom: 10px; } .frist-item a h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 30px; color: #111111; font-weight: 600; } .frist-item a p { font-size: 14px; line-height: 24px; height: 48px; overflow: hidden; color: #111111; opacity: 0.6; margin-top: 10px; } .list1 li a { display: block; font-weight: normal; line-height: 50px; color: #111111; } .list1 li a h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; } .list1 li a:hover { color: #c00000; } .more { display: flex; justify-content: flex-end; margin-top: 10px; } .more a { background: #c00000; background-image: linear-gradient(-49deg, #c00000 0%, #ee3737 100%); width: 66px; height: 26px; border-radius: 13px; font-size: 14px; line-height: 26px; color: #ffffff; text-align: center; } .section3 { margin-top: 70px; } .s3-c { background: url(../images/s3-cbj.png) no-repeat; background-position: center bottom; background-size: 100% auto; position: relative; } .s3-c ul { display: flex; padding: 0 50px 50px 50px; justify-content: space-between; } .s3-c ul li { width: 23%; background-color: #faedea; background-repeat: no-repeat; background-position: center bottom; } .s3-c ul li a { display: block; padding: 0 30px 30px 30px; } .s3-c ul li a b { display: block; margin: 0 auto; width: auto; padding: 0 15px; height: 42px; background-color: #c00000; border-radius: 0px 0px 12px 12px; text-align: center; line-height: 42px; font-size: 20px; color: #ffffff; } .s3-c ul li a h3 { font-size: 18px; font-weight: normal; line-height: 28px; height: 112px; overflow: hidden; color: #111111; margin-top: 23px; } .s3-c ul li a div { height: 1px; margin: 25px 0; background-color: #ffffff; } .s3-c ul li a p { font-size: 14px; font-weight: normal; line-height: 24px; height: 144px; overflow: hidden; color: #111111; opacity: 0.6; } .s3-c .more { position: absolute; right: 0; bottom: 0; } .s3-c .more a { width: 112px; height: 28px; background: #c10101; line-height: 28px; border-radius: 0; } .section4 { margin-top: 70px; } .s4-c .slick-slide { display: flex; justify-content: space-between; flex-wrap: wrap; } .s4-c .slick-slide>div { width: 48%; margin-bottom: 40px; } .s4-c ul li { position: relative; padding-right: 10px; padding-bottom: 10px; } .s4-c ul li::before { content: ""; position: absolute; right: 0; bottom: 0; top: 10px; left: 10px; border: solid 1px rgba(193, 1, 1, .16); } .s4-c ul li a { display: block; position: relative; border: 1px solid #c10101; background: rgba(250, 237, 234, .32); padding: 30px 40px; z-index: 8; transition: all 0.3s; } .s4-c ul li a::after { content: ""; position: absolute; right: -1px; bottom: -1px; border-width: 11px 10px; border-style: solid; border-color: #c00000 #fff #fff #c00000; z-index: 9; } .s4-c ul li a h3 { font-size: 18px; font-weight: normal; line-height: 28px; color: #111111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4-c ul li a p { font-size: 14px; font-weight: normal; line-height: 24px; height: 48px; overflow: hidden; color: #111111; opacity: 0.6; margin-top: 20px; } .s4-c ul li:hover a { background: #c10101; } .s4-c ul li:hover a h3 { color: #fff; } .s4-c ul li:hover .titline i { background-image: linear-gradient(#fff, #fff); } .s4-c ul li:hover a p { color: #ffffff; } .s4-c .slick-arrow { width: 56px; height: 56px; border-radius: 50%; margin-top: -20px; z-index: 9; } .s4-c .slick-prev { background: #f8bf85 url(../images/s4-l.png) no-repeat; background-position: center center; left: -80px; } .s4-c .slick-next { background: #f8bf85 url(../images/s4-r.png) no-repeat; background-position: center center; right: -80px; } .s4-more { overflow: hidden; } .s4-more a { display: block; margin: 0 auto; width: 78px; height: 39px; border-radius: 39px 39px 0 0; background-color: #c00000; background-image: linear-gradient(-49deg, #c00000 0%, #ee3737 100%); line-height: 50px; text-align: center; color: #fff; font-size: 14px; } /* .section5 { padding-top: 60px; background: url(../images/bj2.jpg) no-repeat; background-position: cover; background-position: center bottom; } .section5 .title { margin-bottom: 20px; } .s5-c { background: url(../images/s5-cbj.png) no-repeat; background-size: 100% 100%; display: flex; justify-content: space-between; padding: 100px 0 150px 0; } .s5-l { width: 50%; padding: 0 70px; } .s5-r { width: 50%; padding: 0 70px; } .s5-l h3 { font-size: 22px; font-weight: 600; line-height: 35px; color: #c00000; height: 70px; overflow: hidden; } .s5-l div.xq { border-top: 1px solid #dddddd; padding-top: 30px; margin-top: 35px; overflow: hidden; max-height: 415px; } .s5-l div.xq p { font-size: 16px; font-weight: normal; line-height: 35px; color: #111111; text-indent: 2em; } .s5-l a { display: block; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 35px; letter-spacing: 0px; color: #c00000; text-decoration: underline; margin-top: 10px; } .i-list li { position: relative; line-height: 59px; padding: 0 0 0 25px; background: url(../images/i-list-dot.png) no-repeat; background-position: 3px center; } .i-list li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #111111; } .i-list li a h3 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .i-list li a:hover { color: #2c69bc; } .i-list li span { position: absolute; right: 0; top: 0; color: #888888; font-size: 16px; } */ /*0506add*/ .section5 { padding: 60px 0; overflow: hidden; } .s5-c { margin-top: 60px; } .s5-c ul { margin-left: -30px; margin-right: -30px; } .s5-c .slick-list { padding-bottom: 20px; } .s5-c ul li a { display: block; margin: 0 30px; transition: all 0.3s; } .s5-c ul li .pic { padding-top: 65.57%; padding-top: 140%; } .s5-c ul li .s2-cintro { background: #f5f5f5; padding: 20px; position: relative; text-align: center; } .s5-c ul li .s2-cintro::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #ad1216; transform: scaleX(0); transition: all 0.3s; } .s5-c ul li .s2-cintro h3 { font-size: 16px; color: #666; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; position: relative; top: 0; transition: all 0.3s; } .s5-c ul li:hover .s2-cintro h3 { top: -5px; } .s5-c ul li a:hover { box-shadow: 0px 2px 10px 0px rgba(173, 18, 22, 0.2); } .s5-c ul li a:hover .s2-cintro::after { transform: none; } /* 响应 */ @media screen and (max-width: 1500px) { .s4-c .slick-next { right: 0; } .s4-c .slick-prev { left: 0; } } @media screen and (max-width: 1300px) { .s1-l { width: 680px; } .s1-r ul li h3 { padding: 0 20px; font-size: 16px; line-height: 24px; max-height: 48px; } .s1-r ul li.on a h3 { font-size: 18px; } .s1-r ul li a { height: 65px; } .s1-r ul li.on a { height: 74px; } .s1-r ul li::after { border: 37px solid transparent; border-right: 25px solid #c00000; } .title h2 span { font-size: 38px; } .title h2 img { height: 75px; } .s2-r { padding: 30px 20px 20px 20px; } } @media screen and (max-width: 1024px) { .s1-c, .s2-c { display: block; } .s1-l, .s2-l { width: auto; } .s1-r, .s2-r { width: auto; margin-left: 0; } .s2-r { padding: 20px 15px; } .s1-r ul li::after { content: none; } .s1-r ul li a { height: 50px; } .s1-r ul li.on a { height: 60px; } .s1-r ul li h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; } .s2-l ul li a .info h3, .list1 li a h3, .s3-c ul li a h3, .s4-c ul li a h3 { font-size: 16px; } .frist-item a h3 { font-size: 18px; } .list1 li a { line-height: 40px; } .title h2 span { font-size: 28px; } .title h2 img { height: 60px; } .title h2::before { background-size: auto 50px; } .title h2::after { background-size: auto 50px; } .s3-c ul { padding: 0 30px 30px 30px; flex-wrap: wrap; } .s3-c ul li a { padding: 0 15px 15px 15px; } .s3-c ul li { width: 48%; margin-bottom: 15px; } .s3-c ul li a h3 { height: 56px; } .s3-c ul li a p { height: 96px; } .s3-c ul li a div { margin: 15px 0; } .s3-c ul li a b { font-size: 18px; } .s4-c .slick-arrow { width: 35px; height: 35px; background-size: 10px; } .s4-c ul li a { padding: 20px 10px 20px 25px; } .s4-c ul li a p { margin-top: 10px; } .s5-c{ margin-top: 25px; } .s5-l, .s5-r { padding: 0 35px; } .s5-l h3{ font-size: 18px; } .i-list li a h3{ font-size: 16px; } .section2,.section3,.section4{ margin-top: 35px; } .title{ margin-bottom: 25px; } .section5,.index{ padding-top: 35px; } } @media screen and (max-width: 768px) { .s5-c{ /* display: block; */ /* background: none; */ /* padding:0 0 35px 0; */ } .s5-l, .s5-r{ width: auto; padding: 0; margin-top: 20px; } .s5-l h3{ height: auto; } .s5-l div.xq{ margin-top: 15px; padding-top: 15px; max-height: none; } .i-list li{ line-height: 42px; } .title h2 span{ font-size: 24px; } .title h2 img{ height: 40px; } .title h2::before,.title h2::after{ background-size: auto 30px; } } @media screen and (max-width: 640px) { .s2-l ul li a { display: block; } .s2-l ul li a .pics { width: auto; } .s2-l ul li a .info { padding: 15px; } .s2-l ul li a .info h3 { height: auto; } .s4-c .slick-slide { display: block; } .s4-c .slick-slide>div { width: auto; margin-bottom: 20px; } .s4-c .slick-list { margin: 0 30px; } .s4-c .slick-prev { left: -10px; } .s4-c .slick-next { right: -10px; } } @media screen and (max-width: 480px) { .s3-c ul { display: block; padding: 0 20px 30px 20px; } .s3-c ul li { width: auto; } } @media screen and (max-width: 375px) {}