@charset "utf-8"; html, body, .banner, .banner .slick, .banner .slick div, .banner .slick-slide a, .banner .slick-slide a img { width: 100%; height: 100%; } .banner { position: relative; overflow: hidden; z-index: 99; } .banner a { display: block; position: relative; } .banner .slick-slide a img { display: block; width: 100%; } .banner .slick-dots { width: 100%; max-width: 1440px; left: 50%; transform: translatex(-50%); bottom: 125px; font-size: 0; height: 16px; line-height: 16px; text-align: left; position: relative; } .banner .slick-dots li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin: 0 6px; vertical-align: middle; transition: all 0.3s; position: static; } .banner .slick-dots li .dot-page span { position: absolute; right: 0; top: 0; font-size: 44px; font-weight: bold; color: #fff; display: none; z-index: 1; } .banner .slick-dots li .dot-page span::before { content: ""; position: absolute; top: -114px; left: -45px; width: 100px; height: 100px; border: 20px solid #ff3a3a; border-radius: 50%; z-index: -1; } .banner .slick-dots li button { display: none; } .banner .slick-dots li.slick-active { width: 16px; height: 16px; } .banner .slick-dots li.slick-active .dot-page span { display: block; } .banner a p { position: absolute; width: 100%; max-width: 1440px; text-align: left; margin: 0 auto; top: 50%; left: 50%; transform: translatex(-50%) translatey(-50%); font-size: 45px; font-weight: bold; color: #fff; text-align: left; } /*首页主体*/ .title { overflow: hidden; } .title h3 { float: left; font-size: 40px; font-weight: bold; padding-left: 16px; position: relative; } .title h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 5px; height: 40px; background: #cb3b3d; } .title h3 span { font-family: georgia, 'times new roman', times, serif; font-size: 24px; color: #999; padding-left: 10px; } .more { float: right; } .more a { display: block; font-size: 18px; line-height: 52px; transition: all 0.3s; } .more a:hover { margin-right: 5px; } /* 页面主体 */ .section12 { position: relative; z-index: 1; } .section12::before { content: ""; width: 462px; height: 462px; border: 100px solid rgba(255, 58, 58, 0.2); border-radius: 50%; position: absolute; left: 4%; top: 50%; transform: translatey(-50%); z-index: -1; } .section12:hover::before { animation: ygd 1.6s linear; } .section1 { padding-top: 120px; padding-bottom: 100px; } .s1-l { position: relative; z-index: 1; } .s1-l::before { content: ""; position: absolute; top: 22%; width: 80%; height: 62%; background: #df2635; left: 0; transition: all 0.3s; z-index: -1; } .s1-l:hover::before { left: 10px; } .jdt { width: 716px; margin-left: 42px; box-shadow: 0px 22px 34.58px 3.42px rgba(0, 0, 0, 0.16); } .jdt a { display: block; position: relative; } .jdt a .pic { padding-top: 573px; } .jdt .video-k { width: 100%; height: 100%; background: #000; } .jdt video { position: absolute; top: 50%; transform: translatey(-50%); left: 0; max-width: 100%; width: 100%; } .s1-r { width: calc(100% - 758px); padding: 20px 100px 0 40px; position: relative; z-index: 1; } .s1-rt { position: relative; top: 0; transition: all 0.3s; } .s1-rt:hover { top: -5px; } .s1-rt a { display: block; } .s1-rt h3 { font-size: 32px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; position: relative; } .s1-rt::after { content: ""; position: absolute; left: -180px; top: 20px; width: 150px; height: 3px; background: #d72533; z-index: 2; } .s1-rt p { font-size: 22px; line-height: 34px; height: 68px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-top: 10px; color: #000; } .s1-r ul { margin-top: 22px; } .s1-r ul li { padding: 17px 0; border-top: 1px solid rgba(0, 75, 149, 0.2); } .s1-r ul li:first-child { border-top: none; } .s1-r ul li a { display: block; font-size: 22px; line-height: 34px; height: 68px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; position: relative; top: 0; padding-left: 58px; } .s1-r ul li a::before { content: ""; position: absolute; left: 13px; top: 11px; width: 13px; height: 13px; background: #004b95; border-radius: 50%; transition: all 0.3s; } .s1-r ul li a:hover::before { background: #cb3b3d; } .s1-r ul li a:hover { top: -5px; } .section2 { padding-top: 80px; } .s2-l { width: 63.88%; } .s2-lt { margin-top: 20px; margin-bottom: 30px; } .s2-lt a { display: block; background: #e7e3e3; background-size: auto 100%; height: 320px; } .s2-lt a>div:nth-child(1){ float: left; width: 46%; height: 100%; } .s2-lt a>div:nth-child(1) img{ width:100%; height:100%; object-fit:cover; } .s2-lt a>div:nth-child(2) { width: 54%; padding: 40px; position: relative; left: 0; transition: all 0.3s; background: #ffffffde; padding-bottom: 44px; float: right; } .s2-lt a:hover div:nth-child(2) { /* left: -1%; */ transform: scale(1.01); } .s2-ld ul li { float: left; width: 48.5%; margin-left: 3%; border: 1px solid #b1a7b0; } .s2-ld ul li a { padding: 35px; position: relative; top: 0; transition: all 0.3; } .s2-ld ul li a:hover { top: 5px; } .s2-ld ul li:first-child { margin-left: 0; } .s2-lt a, .s2-ld a { display: block; background-size: 45%; } .s2-lt span, .s2-ld span { font-style: italic; color: rgba(0, 0, 0, 0.7); } .s2-lt h3, .s2-ld h3 { font-size: 24px; line-height: 73px; height: 72px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; /* display: -webkit-box; */ /* -webkit-line-clamp: 1; */ line-clamp: 2; /* -webkit-box-orient: vertical; */ margin-top: 20px; white-space: nowrap; } .s2-lt p, .s2-ld p { font-size: 16px; line-height: 26px; height: 104px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; margin-top: 20px; color: #000; } .s2-r { width: 34.02%; height: 659px; background-color: #df2635; background-image: url(/uploads/image/images/s2-rbg.png); background-repeat: no-repeat; background-position: center bottom; margin-top: 72px; padding: 35px; } .s2-r .title h3 { float: none; width: 100%; text-align: center; padding-left: 0; } .s2-r .title h3::before { display: none; } .s2-r .title h3 a { display: block; color: #fff; } .s2-r .more { float: none; width: 100px; line-height: 42px; color: #fff; border: 2px solid rgba(255, 255, 255, 0.5); text-align: center; border-radius: 22px; font-size: 18px; margin-top: 40px; } .s2-r .s2-rtx { margin-top: 30px; } .s2-r .s2-rtx a { display: block; position: relative; top: 0; transition: all 0.3s; } .s2-r .s2-rtx a:hover { top: 5px; } .s2-r .s2-rtx a:hover .more { background-color: rgba(255, 255, 255, 0.1); } .s2-r .s2-rtx span { font-style: italic; color: rgba(255, 255, 255, 0.7); } .s2-r .s2-rtx h3 { font-size: 24px; line-height: 36px; height: 72px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-top: 20px; color: #fff; } .s2-r .s2-rtx p { font-size: 16px; line-height: 26px; height: 104px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; margin-top: 20px; color: rgba(255, 255, 255, 0.9); } .section3 { padding: 100px 0; } .s3-c { margin-top: 50px; } .s3-t {} .s3-l { width: 737px; } .s3-l ul li a { display: block; } .s3-l ul li a .pic { padding-top: 100%; } .s3-l .slick-prev, .s3-l .slick-next { width: 56px; height: 56px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all 0.3s; z-index: 9; } .s3-l .slick-prev { left: 20px; background-image: url(/uploads/image/images/prev-b.png); background-repeat: no-repeat; background-position: center; } .s3-l .slick-next { right: 20px; background-image: url(/uploads/image/images/next-b.png); background-repeat: no-repeat; background-position: center; } .s3-l .slick-prev:hover, .s3-l .slick-next:hover { background-color: #df2635; } .s3-r { width: calc(100% - 737px); height: 737px; background-color: #f8f8f8; background-image: url(/uploads/image/images/s3-lbg.png); background-repeat: no-repeat; background-position: right center; position: relative; } .s3-rt { width: 100%; padding: 45px; overflow: hidden; } .s3-rb { position: absolute; left: 0; bottom: 0; background: #ebebeb; width: 100%; padding: 50px 0; } .s3-rb ul {} .s3-rb ul li a { display: block; margin: 0 5px; } .s3-rb ul li a .pic { padding-top: 70.1%; border: 6px solid transparent; border-radius: 5px; } .s3-rb ul li.slick-current a .pic { border-color: rgba(223, 38, 53, 0.7); } .s3-rb ul li a p { text-align: center; padding: 0 10px; font-size: 24px; color: #004b95; margin-top: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .s3-rb ul li.slick-current a p { color: #df2635; } .s3-rt ul li .s3-rt-k {} .s3-rt ul li h3 a { display: block; font-size: 40px; font-weight: bold; color: #cb3b3d; } .s3-rt ul li .s3-rt-k p { font-size: 16px; line-height: 30px; height: 120px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; color: #333; margin-top: 25px; } .s3-rt ul li .s3-rt-k dl { margin-top: 50px; } .s3-rt ul li .s3-rt-k dl dd { float: left; width: 32%; margin-top: 25px; margin-left: 2%; } .s3-rt ul li .s3-rt-k dl dd a { display: block; padding-left: 19px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; font-size: 18px; color: #333; position: relative; top: 0; transition: all 0.3s; } .s3-rt ul li .s3-rt-k dl dd a:hover { top: -5px; color: #df2635; } .s3-rt ul li .s3-rt-k dl dd:nth-child(3n 1) { margin-left: 0; } .s3-rt ul li .s3-rt-k dl dd a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translatey(-50%); width: 9px; height: 9px; background: #004b95; border-radius: 50%; transition: all 0.3s; } .s3-rt ul li .s3-rt-k dl dd a:hover::before { background: #df2635; } .s3-rb .slick-list { margin: 0 50px; } .s3-rb .slick-prev, .s3-rb .slick-next { top: 45%; width: 16px; height: 30px; transition: all 0.3s; } .s3-rb .slick-prev { background: url(/uploads/image/images/prev-h.png) no-repeat; left: 18px; } .s3-rb .slick-prev:hover { background: url(/uploads/image/images/prev-red.png) no-repeat; } .s3-rb .slick-next { background: url(/uploads/image/images/next-h.png) no-repeat; right: 18px; } .s3-rb .slick-next:hover { background: url(/uploads/image/images/next-red.png) no-repeat; } .section4 { padding-bottom: 100px; } .s4-c { padding-right: 2px; margin-top: 70px; } .s4-c ul li a { display: block; border: 3px solid #e2e2e2; border-left: none; text-align: center; padding: 30px 5px; } .s4-c ul li p { height: 85px; } .s4-c ul li p img { margin: 0 auto; } .s4-c ul li:hover p img { animation: jello 1.5s linear; } .s4-c .slick-list { border-left: 3px solid #e2e2e2; } .s4-c ul li h3 { margin-top: 20px; font-size: 24px; } .section5 { padding: 100px 0; background: #e9eff9; } .s5-c { margin-top: 70px; overflow: hidden; } .s5-c .slick-list { margin-left: -20px; margin-right: -20px; } .s5-c ul li a { display: block; text-align: center; } .s5-c ul li a p { padding: 30px 0; background-size: cover !important; margin: 0 20px; } .s5-c ul li a p span { display: block; width: 130px; height: 130px; line-height: 130px; border: 3px solid#fff; border-radius: 50%; margin: 0 auto; font-size: 0; transition: all 0.3s; } .s5-c ul li:hover a p span { transform: scale(1.1); } .s5-c ul li a p span img { display: inline-block; vertical-align: middle; } .s5-c ul li:hover a p span img { animation: jello 1.5s linear; } .s5-c ul li.slick-active a p { background: url(/uploads/image/images/s5-1bg.jpg) no-repeat center; } .s5-c ul li.slick-active li a p { background: url(/uploads/image/images/s5-2bg.jpg) no-repeat center; } .s5-c ul li.slick-active li li a p { background: url(/uploads/image/images/s5-3bg.jpg) no-repeat center; } .s5-c ul li.slick-active li li li a p { background: url(/uploads/image/images/s5-4bg.jpg) no-repeat center; } .s5-c ul li h3 { margin-top: 20px; font-size: 24px; } @media screen and (max-width:1540px) { .banner .slick-dots li .dot-page span { right: 4%; } } @media screen and (max-width:1500px) { .banner a p { padding-left: 20px; font-size: 35px; } .banner .slick-dots { padding: 0 20px; } } @media screen and (max-width: 1540px) {} @media screen and (max-width: 1300px) { .s1-r { width: calc(100% - 692px); padding: 20px 40px 0 40px; } .section12::before { width: 262px; height: 262px; border-width: 50px; left: 5px; } .jdt { width: 650px; margin-left: 21px; } .jdt a .pic { padding-top: 520px; } .s1-rt h3 { font-size: 28px; } .s1-rt p { font-size: 18px; } .s1-r ul { margin-top: 14px; } .s1-r ul li a { font-size: 18px; padding-left: 40px; } .s1-r ul li { padding: 12px 0; } .s1-r ul li a::before { width: 10px; height: 10px; top: 12px; } .s1-rt::after { left: -145px; width: 120px; } .s3-l { width: 665px; } .s3-r { width: calc(100% - 665px); height: 665px; } .s3-rt ul li .s3-rt-k dl { margin-top: 20px; } .s3-rb { padding: 25px 0; } .s3-rt { padding: 20px; } .s3-rt ul li .s3-rt-k dl dd { width: 49%; } .s3-rt ul li .s3-rt-k dl dd:nth-child(3n 1) { margin-left: 2%; } .s3-rt ul li .s3-rt-k dl dd:nth-child(2n 1) { margin-left: 0; } .s4-c ul li h3, .s5-c ul li h3 { font-size: 20px; } } @media screen and (max-width: 1100px) {} @media screen and (max-width: 1024px) { html, body, .banner, .banner .slick, .banner .slick div, .banner .slick-slide a, .banner .slick-slide a img { width: 100%; height: auto; } .banner a p { font-size: 25px; } .banner .slick-dots { bottom: 40px; } .banner .slick-dots li { width: 8px; height: 8px; } .banner .slick-dots li.slick-active { width: 14px; height: 14px; } .banner .slick-dots li .dot-page span { font-size: 28px; } .banner .slick-dots li .dot-page span::before { top: -35px; left: -12px; width: 35px; height: 35px; border: 10px solid #ff3a3a; } .s1-l, .s1-r { float: none; } .jdt { width: auto; margin-left: 0; } .jdt a .pic { padding-top: 80%; } .s1-l::before { left: -20px; } .s1-r { width: auto; margin-top: 20px; padding: 20px; } .section1 { padding-top: 20px; padding-bottom: 10px; } .s1-rt h3 { font-size: 20px; } .s1-rt p { font-size: 16px; line-height: 30px; height: auto; max-height: 60px; } .s1-r ul li a { font-size: 16px; padding-left: 20px; line-height: 30px; height: auto; max-height: 60px; } .s1-r ul li a::before { left: 0; width: 6px; height: 6px; } .section12::before { width: 162px; height: 162px; border-width: 25px; border-color: rgba(255, 58, 58, 0.1); } .s1-rt::after { left: -40px; width: 30px; top: 12px; } .s1-r ul { margin-top: 10px; } .title h3 { font-size: 26px; } .title h3 span { font-size: 14px; } .more a { font-size: 14px; line-height: 35px; } .s2-l, .s2-r { float: none; width: auto; } .s2-lt { margin-bottom: 20px; } .s2-lt a { height: auto; background-size: 45%; } .s2-lt a div { padding: 20px; } .s2-lt h3, .s2-ld h3, .s2-r .s2-rtx h3 { font-size: 20px; line-height: 30px; height: auto; max-height: 60px; margin-top: 15px; } .s2-ld ul li a { padding: 20px; } .s2-lt span, .s2-ld span { font-size: 14px; } .s2-lt p, .s2-ld p { margin-top: 15px; } .s2-r { margin-top: 20px; height: auto; padding: 20px; } .s2-r .s2-rtx p { margin-top: 15px; height: auto; max-height: 104px; } .s2-r .more { font-size: 14px; line-height: 32px; } .s3-l { display: none; } .section3 { padding: 30px 0; } .s3-r { float: none; width: 100%; height: auto; } .s3-rb { position: static; margin-top: 20px; } .s3-c { margin-top: 30px; } .s3-rt ul li h3 a { font-size: 24px; } .s3-rt ul li .s3-rt-k p { font-size: 14px; line-height: 30px; height: auto; max-height: 120px; } .s3-rt ul li .s3-rt-k dl dd a { font-size: 16px; padding-left: 16px; } .s3-rt ul li .s3-rt-k dl dd a::before { width: 6px; height: 6px; } .s3-rt ul li .s3-rt-k dl { margin-top: 10px; } .s3-rt ul li .s3-rt-k dl dd { margin-top: 20px; } .s3-rb ul li a p { font-size: 18px; } .s3-rb ul li a .pic { border-width: 4px; } .section4 { padding-bottom: 40px; } .s4-c { margin-top: 30px; padding-right: 1px; } .s4-c ul li p { height: auto; } .s4-c ul li p img { height: 65px; } .s4-c ul li h3 { font-size: 18px; margin-top: 15px; } .s4-c ul li a { padding: 20px 5px; } .section5 { padding: 40px 0; } .s5-c { margin-top: 30px; } .s5-c ul li h3 { font-size: 18px; } .s5-c ul li a p span img { height: 45px; } .s5-c ul li a p span { width: 90px; height: 90px; border-width: 2px; line-height: 90px; } .s5-c .slick-list { margin-left: -15px; margin-right: -15px; } .s5-c ul li a p { padding: 20px 0; margin: 0 15px; } } @media screen and (max-width: 768px) { .banner a p { font-size: 24px; } } @media screen and (max-width: 640px) { .banner a p { font-size: 20px; } .banner .slick-dots li .dot-page span { font-size: 22px; } .banner .slick-dots li .dot-page span::before { top: -16px; left: -5px; width: 25px; height: 25px; border: 5px solid #ff3a3a; } .banner .slick-dots li { width: 6px; height: 6px; margin: 0 4px; } .banner .slick-dots li.slick-active { width: 10px; height: 10px; } .s1-r { margin-top: 10px; } .s2-lt h3, .s2-ld h3, .s2-r .s2-rtx h3 { font-size: 16px; margin-top: 10px; } .s2-lt p, .s2-ld p { margin-top: 10px; } .s2-r .more { margin-top: 20px; width: 78px; line-height: 28px; } .s2-r .s2-rtx { margin-top: 20px; } .s4-c { padding-right: 0; } .s4-c ul li p img { height: 50px; } .s4-c ul li h3 { font-size: 16px; } .s5-c ul li a p span img { height: 35px; } .s5-c ul li a p span { width: 75px; height: 75px; border-width: 2px; line-height: 75px; } .s5-c ul li h3 { font-size: 16px; } .s2-lt a>div:nth-child(1){ float: left; width: 100%; height: 100%; padding: 0 3px; } .s2-lt a>div:nth-child(1) img{ width:100%; height:100%; object-fit:cover; } .s2-lt a>div:nth-child(2) { width: 98%; padding: 40px; position: relative; left: 0; transition: all 0.3s; /* background: #ffffffde; */ padding-bottom: 44px; float: right; /* margin: 0 auto; */ margin: 0 5px 3px; } .s2-lt a:hover div:nth-child(2) { /* left: -1%; */ transform: scale(1.01); } .s2-lt a{ width: 100%; display: block; overflow: hidden; background: #f5f5f5; } } @media screen and (max-width: 480px) { .banner a p { font-size: 16px; } .banner .slick-dots { bottom: 26px; } .s2-ld ul li { float: none; width: 100%; margin-left: 0; margin-top: 20px; } .title h3 { font-size: 24px; } .title h3::before { height: 26px; } .more a { line-height: 31px; } .title h3 span { font-size: 12px; } } @media screen and (max-width: 375px) { .s2-lt a div { background: #ffffff4f; padding: 20px; } .s2-lt{ /* background: #ffffff8a; */ } }