.toutiao_box { display: flex; justify-content: start; align-items: center; position: relative; margin-left: auto; margin-right: auto; padding-bottom: 20px; } @media (max-width: 600px) { .toutiao_box { width: 100%; } } .toutiao_box .toutiao_img { width: 134px; height: 53px; margin-right: 20px; } @media (max-width: 600px) { .toutiao_box .toutiao_img { display: none; } } .toutiao_box #ttswiper { width: calc(100% - 155px); } @media (max-width: 600px) { .toutiao_box #ttswiper { width: 100%; } } .toutiao_box .toutiao { width: 100%; height: 100px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; padding: 0 0.6rem; } @media (max-width: 600px) { .toutiao_box .toutiao { padding: 0; } } .toutiao_box .toutiao a { display: block; width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 34px; font-weight: bold; color: #0b4aa1; line-height: 1.5; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } .toutiao_box .toutiao a:hover { opacity: 0.7; } @media (max-width: 600px) { .toutiao_box .toutiao a { font-size: 20px; } } .toutiao_box .toutiao p { font-size: 20px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #333333; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .toutiao_box .swiper-pagination { left: 0; right: 0; bottom: 0px; } .toutiao_box .swiper-pagination-bullet { opacity: 1; width: 10px; height: 10px; background-color: #cccccc; margin: 0 7px; } .toutiao_box .swiper-pagination-bullet-active { background-color: #4e95d7; } #swiper1 { width: 100%; height: 454px; } @media (max-width: 768px) { #swiper1 { height: 230px; } } #swiper1 .swiper-button-prev, #swiper1 .swiper-button-next { transition: all 0.3s; position: absolute; top: 45%; width: 28px; height: 53px; opacity: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } #swiper1 .swiper-button-prev { left: 20px; background-image: url(/uploads/image/simages/btn_prev.png); transform: translate(-50px, 0); } #swiper1 .swiper-button-next { right: 20px; background-image: url(/uploads/image/simages/btn_next.png); transform: translate(50px, 0); } #swiper1:hover .swiper-button-prev, #swiper1:hover .swiper-button-next { opacity: 1; transform: translate(0, 0); } #swiper1 .swiper-pagination { width: auto; left: auto; right: 0; bottom: 18px; padding-right: 16px; } #swiper1 .swiper-pagination-bullet { opacity: 1; width: 12px; height: 12px; border-radius: 6px; background-color: #eff7ff; } #swiper1 .swiper-pagination-bullet-active { width: 24px; background-color: #0b4aa1; } .img_mask_box { box-sizing: border-box; position: relative; height: 100%; } .img_mask_box a { position: relative; display: block; height: 100%; overflow: hidden; } .img_mask_box a:hover img { transform: scale(1.05); } .img_mask_box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; } .img_mask_box .mask_title { position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); } .img_mask_box .mask_title h3 { box-sizing: border-box; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 70%; height: 54px; line-height: 54px; padding-left: 1em; padding-right: 1em; font-size: 18px; font-weight: bold; color: #fff; } @media (max-width: 600px) { .img_mask_box .mask_title h3 { font-size: 16px; } } @media (min-width: 601px) { #indexbannerswiper1 .banner_pc { display: block; } #indexbannerswiper1 .banner_m { display: none; } } @media (max-width: 600px) { #indexbannerswiper1 .banner_pc { display: none; } #indexbannerswiper1 .banner_m { display: block; } } #indexbannerswiper1 .swiper-button-prev, #indexbannerswiper1 .swiper-button-next { position: absolute; top: 50%; width: 28px; height: 53px; background-repeat: no-repeat; background-position: center; background-size: contain; } @media (max-width: 600px) { #indexbannerswiper1 .swiper-button-prev, #indexbannerswiper1 .swiper-button-next { display: none; } } #indexbannerswiper1 .swiper-button-prev { left: 4px; background-image: url(/uploads/image/simages/btn_prev2.png); } #indexbannerswiper1 .swiper-button-next { right: 4px; background-image: url(/uploads/image/simages/btn_next2.png); } .xfyd_box { margin-top: -4px; background-color: #ffffff; border: solid 1px #d1dfea; border-top: 4px solid #4e95d7; padding: 15px; } .xfyd_list a { display: block; box-sizing: border-box; width: 100%; line-height: 1.1; position: relative; padding: 13px 30px; border-radius: 24px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 18px; font-weight: normal; color: #333333; } @media (max-width: 600px) { .xfyd_list a { font-size: 16px; } } .xfyd_list a::before { content: ''; position: absolute; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); left: 14px; width: 7px; height: 7px; background-color: #cbcbcb; border-radius: 50%; } .xfyd_list a:hover { color: #003366; background-color: #ecf6fe; } .xfyd_list a:hover::before { background-color: #4e95d7; } .xxgk_ul { box-sizing: border-box; margin-left: -7.5px; margin-right: -7.5px; } .xxgk_ul::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .xxgk_ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 25%; padding-left: 7.5px; padding-right: 7.5px; float: left; } .xxgk_ul > li:nth-child(n) { margin-top: 0; } .xxgk_ul > li:nth-child(n)::after { display: block; } .xxgk_ul > li:nth-child(n 4) { margin-top: 15px; } .xxgk_ul > li:nth-child(4) { margin-top: 0; } .xxgk_ul > li:nth-child(4n)::after, .xxgk_ul > li:last-child::after { display: none; } .xxgk_ul a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 992px) { .xxgk_ul { margin-left: -7.5px; margin-right: -7.5px; } .xxgk_ul::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .xxgk_ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; padding-left: 7.5px; padding-right: 7.5px; float: left; } .xxgk_ul > li:nth-child(n) { margin-top: 0; } .xxgk_ul > li:nth-child(n)::after { display: block; } .xxgk_ul > li:nth-child(n 2) { margin-top: 15px; } .xxgk_ul > li:nth-child(2) { margin-top: 0; } .xxgk_ul > li:nth-child(2n)::after, .xxgk_ul > li:last-child::after { display: none; } .xxgk_ul a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 600px) { .xxgk_ul { margin-left: -7.5px; margin-right: -7.5px; } .xxgk_ul::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .xxgk_ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-left: 7.5px; padding-right: 7.5px; float: left; } .xxgk_ul > li:nth-child(n) { margin-top: 0; } .xxgk_ul > li:nth-child(n)::after { display: block; } .xxgk_ul > li:nth-child(n 1) { margin-top: 15px; } .xxgk_ul > li:nth-child(1) { margin-top: 0; } .xxgk_ul > li:nth-child(1n)::after, .xxgk_ul > li:last-child::after { display: none; } .xxgk_ul a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .xxgk_ul li a { transition: all 0.3s; box-sizing: border-box; width: 100%; height: 84px; background-color: #ecf6fe; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; align-items: center; padding-left: 15%; } .xxgk_ul li i { margin-top: 20px; margin-right: 13px; transition: all 0.3s; display: block; width: 57px; height: 66px; background-repeat: no-repeat; background-position: center; background-size: contain; } .xxgk_ul li i.s1 { background-image: url(/uploads/image/simages/index_xxgk_icon1.png); } .xxgk_ul li i.s2 { background-image: url(/uploads/image/simages/index_xxgk_icon2.png); } .xxgk_ul li i.s3 { background-image: url(/uploads/image/simages/index_xxgk_icon3.png); } .xxgk_ul li i.s4 { background-image: url(/uploads/image/simages/index_xxgk_icon5.png); } .xxgk_ul li i.s5 { background-image: url(/uploads/image/simages/index_xxgk_icon5.png); } .xxgk_ul li h6 { transition: all 0.3s; font-size: 20px; font-weight: normal; color: #333333; width: calc(100% - 70px); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; line-height: 20px; text-align: left; } @media (max-width: 600px) { .xxgk_ul li h6 { font-size: 18px; } } .xxgk_ul li:hover a { background-color: #ffffff; box-shadow: 0px 5px 18px 0px rgba(43, 82, 165, 0.19); } .xxgk_ul li:hover i { transform: rotatey(360deg); } .xxgk_ul li:hover h6 { font-weight: bold; color: #0b4aa1; } #ztswiper { width: 100%; } #ztswiper .swiper-button-prev, #ztswiper .swiper-button-next { transition: all 0.3s; position: absolute; top: 35%; width: 28px; height: 53px; background-repeat: no-repeat; background-position: center; background-size: contain; } #ztswiper .swiper-button-prev { left: 4px; background-image: url(/uploads/image/simages/btn_prev2.png); } #ztswiper .swiper-button-next { right: 4px; background-image: url(/uploads/image/simages/btn_next2.png); } .zt_img a { display: inline-block; width: 100%; } .zt_img a .img { width: 100%; overflow: hidden; height: 127px; } .zt_img a img { transition: all 0.3s; width: 100%; height: 100%; object-fit: cover; } .zt_img a h6 { margin-top: 20px; text-align: center; font-size: 18px; font-weight: normal; color: #333; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } @media (max-width: 600px) { .zt_img a h6 { font-size: 16px; } } .zt_img a:hover img { transform: scale(1.05); } .zt_img a:hover h6 { font-weight: bold; color: #003366; }