img { width: auto; height: auto; max-height: 100%; max-width: 100%; } .header-top { height: 38px; background-color: #f7f7f7; display: flex; justify-content: space-between; align-items: center; color: #616161; padding: 0 19%; } .header-top-left, .header-top-right { display: flex; } .header-top-left li, .header-top-right li { cursor: pointer; } .header-top-left li:hover, .header-top-right li:hover { text-decoration: underline; color: #0c529e; } .title-logo-img:hover { cursor: pointer; } .headlines-box { padding: 10px 0; } .headlines-box a { text-align: center; color: #005293; } .headlines-box a h3{ margin-top: 10px; } @media screen and (min-width: 375px) and (max-width: 800px) { .headlines-box a h1 { font-size: 20px !important; font-weight:600; } } .title-logo { padding: 1.5% 19%; display: flex; align-items: center; justify-content: space-between; } .title-search { width: 380px; height: 52px; border-radius: 4px; border: solid 2px #0c529e; font-size: 18px; /* position: relative; */ display: flex; justify-content: space-between; border-radius: 4px; align-items: center; } .title-search input { width: 100%; height: 100%; text-indent: 10px; border: none; } .title-search img { /* position: absolute; */ width: 25px; height: 25px; margin-left: 17px; } .title-search button { width: 87px; height: 52px; background-color: #0c529e; border: none; font-size: 20px; font-weight: normal; font-stretch: normal; color: #ffffff; cursor: pointer; } .navigation-box { padding: 0 19%; height: 68px; background-color: #0c529e; } .navigation-list { height: 100%; display: flex; justify-content: space-around; align-items: center; } .navigation-list li { cursor: pointer; /* width: 100%; */ height: 100%; padding: 0 2%; font-size: 22px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #ffffff; display: flex; align-items: center; justify-content: center; } .navigation-list li a{ font-size: 22px; color: #ffffff; } .navigation-list li:hover { background-color: #276bb3; } .content-box { padding: 1.5% 19%; background-color: #f3f3f3; padding-top: 0; } .content-box-top { /* height: 350px; */ background-color: #ffffff; padding: 20px; display: flex; justify-content: space-between; } .content-box-top-left { width: 49%; /* height: 100%; */ } .content-box-top-left .swiper-pagination { bottom: 0; display: flex; justify-content: flex-end; background-color: rgba(0, 0, 0, 0.2); } .content-box-top-left .swiper-pagination li { width: 41px; height: 41px; cursor: pointer; line-height: 41px; color: #ffffff; } .content-box-top-left .swiper-pagination li.active { background-color: #0c529e; } .content-box-top-left .swiper-slide>img { height: 350px; width: 100%; } .content-box-top-left .swiper-slide { position: relative; } .content-box-top-left .swiper-slide .title { position: absolute; bottom: 7px; left: 10px; font-size: 18px; color: #ffffff; z-index: 9999999; width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swiper-container { --swiper-navigation-size: 30px; /* 设置按钮大小 */ } .content-box-top-right { /* height: 350px; */ width: 49%; } .top-tabbar-box { height: 40px; display: flex; justify-content: space-between; border-bottom: 2px solid #e5e5e5; } .top-tabbar-box li { height: 100%; display: flex; align-items: center; cursor: pointer; font-size: 22px; color: #666666; } .top-tabbar-box div { height: 100%; display: flex; align-items: center; cursor: pointer; font-size: 22px; color: #666666; } .top-tabbar-box div a{ color: #666666; } .tab-box { display: none; /* margin-top: 15px; */ } .tab-active { color: #0c529e !important; border-bottom: 2px solid #0c529e; } .tab-box-list { max-height: 320px; overflow: hidden; } .tab-box-list-item { display: flex; align-items: center; justify-content: space-between; line-height: 45px; /* border: 1px solid red; */ font-size: 18px; margin-top: 5px; border-bottom: 2px dotted #e5e5e5; } .tab-box-list-item>div { display: flex; /* justify-content: space-between; */ /* border: 1px solid red; */ position: relative; padding-right: 50px; width: 70%; } .tab-box-list-item>div img:nth-child(1) { margin-right: 10px; } .tab-box-list-item>div>p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 360px; } .new-img { position: absolute; right: 0; top: -10px; } .nrws-time { color: #909090; width: 20%; } .img-box-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .img-box-list-item { width: 32%; margin-top: 20px; } .xxgk-box-list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; } .xxgk-box-list-item { margin-top: 10px; width: 45%; background-color: #f7f7f7; height: 50px; display: flex; align-items: center; padding-left: 20px; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #333333; cursor: pointer; } .xxgk-box-list-item span:nth-child(2) { margin-left: 20px; } .qgxwlb-btn { width: 62%; height: 51px; background-image: linear-gradient(0deg, #1b5fa9 0%, #407dc4 100%), linear-gradient(#3d6eb0, #3d6eb0); background-blend-mode: normal, normal; margin: 0 auto; margin-top: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .qgxwlb-btn a{ font-size: 22px; color: #ffffff; } .qgxwlb-btn>span:nth-child(2) { margin-left: 20px; } .xxgk-boxs-l { width: 53%; padding: 0; } .xxgk-boxs-r { width: 45%; padding: 0; } .xxgk-boxs-l>.top-tabbar { margin: 20px; } .xxgk-boxs-r>.top-tabbar { margin: 20px; } .bottom-box { height: 200px; /* border: 1px solid red; */ margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .bottom-box-left { width: 53%; height: 100%; background-color: #ffffff; } .bottom-box-right { width: 45%; height: 100%; background-color: #ffffff; } .hdjl-box { margin: 20px; /* border: 1px solid red; */ height: 80%; } .zwfw-box { margin: 20px; /* border: 1px solid red; */ height: 80%; } .hdjl-box-list { height: 60%; /* border: 1px solid green; */ display: flex; /* align-items: center; */ justify-content: space-between; margin-top: 20px; } .hdjl-box-list-item { /* border: 1px solid red; */ text-align: center; width: 20%; position: relative; } .hdjl-box-list-item p { margin-top: 10px; font-size: 18px; cursor: pointer; } .zwfw-box-list { height: 60%; display: flex; /* align-items: center; */ justify-content: space-between; margin-top: 20px; } .zwfw-box-list-item { /* border: 1px solid red; */ text-align: center; width: 25%; position: relative; } .zwfw-box-list-item p { margin-top: 10px; font-size: 18px; cursor: pointer; } .clk-box { position: absolute; bottom: 0; cursor: pointer; } .bottom-ipt-box { background-color: #ffffff; height: 60px; padding: 1.5% 19%; } .bottom-ipt-box-list { width: 100%; height: 100%; /* border: 1px solid red; */ display: flex; } .bottom-ipt-box-list-item { width: 20%; /* border: 1px solid red; */ height: 100%; display: flex; align-items: center; justify-content: center; } .bottom-ipt-box-list-item select { width: 80%; height: 30px; background-color: #ffffff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19); border: none; } .footr-box { height: 200px; background-color: #0c529e; } .foot-box-list { /* background-color: red; */ width: 50%; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: center; } .foot-box-list-left, .foot-box-list-right { width: 15%; /* border: 1px solid red; */ height: 70%; text-align: center; } .foot-box-list-cnt { width: 50%; /* border: 1px solid red; */ height: 70%; } .foot-box-list-cnt-top { display: flex; justify-content: center; font-size: 18px; color: #ffffff; } .foot-box-list-cnt-bottom { font-size: 16px; color: #ffffff; } .foot-box-list-cnt-bottom-item { display: flex; justify-content: space-around; margin-top: 15px; } .foot-box-list-cnt-bottom-item:nth-child(3)>p:nth-child(1) { display: flex; align-items: center; } /* 手机端 */ @media only screen and (max-width:767px) { .header-top-left { display: none; } .header-top-right{ padding-left: 10px; } .title-search { width: 250px; height: 30px; margin-top: 10px; } .title-search button { width: 85px; height: 30px; font-size: 4vw; } .navigation-box { height: auto; } .navigation-list { display: block; padding: 0; padding-bottom: 10px; } .navigation-list li { font-size: 5vw; margin-top: 10px; padding: 10px 0; } .title-search img { /* position: absolute; */ width: 20px; height: 20px; margin-left: 5px; } .navigation-box, .header-top { padding: 0; } .content-box { padding: 2% 0; padding-top: 0; background-color: #ffffff !important; } .content-box-top-left .swiper-slide .title { width: 100px; font-size: 16px; } .content-box-top { display: block; height: auto; } .content-box-top-right, .content-box-top-left { width: 100%; } .content-box-top-left .swiper-slide>img { height: 250px; } .content-box-top-right { margin-top: 10px; } .top-tabbar-box li { font-size: 4vw; } .tab-box-list-item>div { width: 60%; font-size: 4vw; } .nrws-time { width: 40%; font-size: 4vw; } .img-box-list { display: block; } .img-box-list-item { width: 100%; text-align: center; } .img-box-list-item:nth-child(1) { margin-top: 0; } .zfga-box { margin-top: 0 !important; } .xxgk-box { margin-top: 15px; } .xxgk-box-list { display: block; } .xxgk-box-list-item { width: 95%; } .qgxwlb-btn { font-size: 5vw; } .xxgk-boxs-r { width: 100%; margin-top: 0; padding-top: 0 !important; } .xxgk-boxs-l { width: 100%; margin-top: 0; } .bottom-box { height: auto; } .bottom-box { display: block; } .bottom-box-left, .bottom-box-right { width: 100%; } .hdjl-box-list { flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; } .hdjl-box-list-item { position: unset; width: 33.33%; margin-top: 20px; } .hdjl-box-list-item .clk-box { position: unset; } .zwfw-box-list { flex-wrap: wrap; align-items: flex-end; } .zwfw-box-list-item { position: unset; width: 50%; margin-top: 20px; } .zwfw-box-list-item .clk-box { position: unset; } .bottom-ipt-box { padding: 0; height: auto; padding-bottom: 20px; } .bottom-ipt-box-list { flex-wrap: wrap; } .bottom-ipt-box-list-item { width: 50%; margin-top: 20px; } .footr-box { height: auto; padding-bottom: 20px; } .foot-box-list { width: 100%; position: relative; } .foot-box-list-cnt { width: 100%; } .foot-box-list-left, .foot-box-list-right { position: absolute; } .foot-box-list-cnt-bottom { text-align: center; } .foot-box-list-cnt-bottom-item { display: block; } .foot-box-list-cnt-bottom-item:nth-child(3)>p:nth-child(1) { display: flex; align-items: center; justify-content: center; } .foot-box-list-cnt-bottom-item p { margin-top: 10px; } .foot-box-list-cnt-top { margin-top: 10px; } .foot-box-list-right { right: 3%; top: 25%; } .foot-box-list-left { left: 3%; top: 20%; } .foot-box-list-cnt-bottom { font-size: 4vw; } .foot-box-list-cnt-top { font-size: 4vw; } .xxgk-box-list-item { font-size: 4vw; } .hdjl-box-list-item p, .zwfw-box-list-item p { font-size: 4vw; } .content-box-top-left .swiper-pagination { font-size: 4vw; } .title-search { font-size: 4vw; } .swiper-container { --swiper-navigation-size: 20px; /* 设置按钮大小 */ } } /* 320小屏幕 */ @media screen and (max-width: 320px) { .tab-box-list-item>div { width: 55%; } .content-box-top-left .swiper-slide .title { display: none; } .content-box-top-left .swiper-pagination { font-size: 4vw; } .title-logo { padding: 1.5% 15%; } } /* logo自适应样式 */ @media screen and (max-width: 900px) { .title-logo { display: block !important; } } /* 轮播图自适应样式 */ @media screen and (min-width: 1461px) and (max-width: 1760px) { .content-box-top-left .swiper-slide .title { width: 250px; } } /* 窗口内容自适应 */ @media screen and (min-width: 980px) and (max-width: 1460px) { .navigation-list li { font-size: 20px; } .navigation-box, .header-top { padding: 0% 8%; } .content-box, .bottom-ipt-box { padding: 1.5% 8%; padding-top: 0; } .content-box-top-left .swiper-slide .title { width: 200px; } } /* 窗口内容自适应 */ @media only screen and (min-width: 820px) and (max-width: 980px) { .navigation-list li { font-size: 18px; } .navigation-box, .header-top { padding: 0 4%; } .content-box, .bottom-ipt-box { padding: 1.5% 8%; padding-top: 0; } .content-box-top-left .swiper-slide .title { width: 160px; } } @media only screen and (min-width: 767px) and (max-width: 820px) { .navigation-list li { font-size: 16px; } .navigation-box, .header-top { padding: 0 3%; } .content-box, .bottom-ipt-box { padding: 1.5% 8%; padding-top: 0; } .content-box-top-left .swiper-slide .title { width: 120px; } } @media only screen and (min-width: 767px) and (max-width: 1500px) { .title-search { width: 280px; height: 40px; margin-top: 10px; } .title-search button { width: 75px; height: 40px; } } @media screen and (min-width: 1461px) and (max-width: 1760px) { .content-box-top-left .swiper-slide .title { width: 250px; } } @media screen and (min-width:910px) and (max-width: 1580px) { .top-tabbar-box li { font-size: 18px; } } @media screen and (min-width:767px) and (max-width:910px) { .top-tabbar-box li { font-size: 16px; } } @media screen and (min-width:1070px) and (max-width:1680px) { .tab-box-list-item>div { width: 65%; font-size: 16px; } .nrws-time { font-size: 16px; } } @media screen and (min-width:767px) and (max-width:1070px) { .nrws-time { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media screen and (min-width:1070px) and (max-width:1110px) { .nrws-time { width: 25%; } } @media screen and (min-width:767px) and (max-width:1050px) { .xxgk-box-list-item { width: 40%; font-size: 16px; } .qgxwlb-btn { font-size: 18px; } } @media screen and (min-width:1051px) and (max-width:1200px) { .xxgk-box-list-item { width: 42%; } .qgxwlb-btn { font-size: 18px; } } @media screen and (min-width:1461px) and (max-width:1680px) { .xxgk-box-list-item { width: 43%; } .qgxwlb-btn { font-size: 18px; } } @media screen and (min-width:767px) and (max-width:1680px) { .clk-box p { font-size: 15px; } } @media screen and (min-width:767px) and (max-width:1075px) { .zwfw-box-list-item:nth-child(3)>.clk-box, .zwfw-box-list-item:nth-child(4)>.clk-box { bottom: -20px; } } /* 底部自适应 */ @media screen and (min-width:1561px) and (max-width:1860px) { .foot-box-list { width: 60%; } } @media screen and (min-width:1331px) and (max-width:1560px) { .foot-box-list { width: 70%; } } @media screen and (min-width:1161px) and (max-width:1330px) { .foot-box-list { width: 80%; } } @media screen and (min-width:1021px) and (max-width:1160px) { .foot-box-list { width: 90%; } } @media screen and (min-width:941px) and (max-width:1020px) { .foot-box-list { width: 100%; } } @media screen and (min-width:767px) and (max-width:940px) { .foot-box-list { width: 100%; } .foot-box-list-left, .foot-box-list-right { width: 10%; } .foot-box-list-cnt { width: 70%; } } /* 窗口内容滚动条样式 */ .tab-box-list::-webkit-scrollbar { /*滚动条整体样式*/ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 3px; } .tab-box-list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */ background: rgb(204, 204, 204); /* background: rgba(0, 0, 0, 0.2); */ } .tab-box-list::-webkit-scrollbar-track { /*滚动条里面轨道*/ /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */ border-radius: 0; /* background: rgba(126, 92, 92, 0.1); */ }