@charset "utf-8"; html,body{ width: 100%; height: 100vh; overflow: hidden; } .body_b { position: fixed; left: 0; top: 100%; bottom: 0; right: 0; background: #fff; transition: top 0.7s cubic-bezier(0.5,0,0.2,1) 0s; z-index: 99; overflow: auto; outline: none; } .body_b.showdiv { top: 0; } .scroll { padding-top: 1.31rem; } .banner a{ display: block; position: relative; width: 100vw; height: 100vh; overflow: hidden; } .banner a img{ position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); object-fit: cover; } .banner a:after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: repeat-x top; background-size: contain; } .banner .slick-dots{ width: auto; right: 2.59rem; font-size: 0; top: 50%; bottom: auto; transform: translatey(-50%); } .banner .slick-dots button{ display: none; } .banner .slick-dots li{ display: block; width: 0.12rem; height: 0.12rem; border: 1px solid #004ea2; border-radius: 50%; margin: 0.18rem 0; } .banner .slick-dots li.slick-active{ border-color: #fff; } .bb{ position: absolute; left: 0; right: 0; bottom: 0.08rem; width: 0.87rem; height: 0.87rem; margin: auto; } .bb img{ display: block; width: 100%; } .scroll{ padding-top: 1.2rem; } .gg-tit{ padding-top: 0.26rem; padding-bottom: 0.16rem; background: no-repeat 50%; background-size: 0.73rem; } .gg-tit h4{ font-size: 0.36rem; color: #323232; line-height: 0.6rem; text-align: center; position: relative; font-family: "hwsc-bold"; } .gg-tit h4:after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: no-repeat 50%; background-size: 5.59rem; } .gg-tit.w{ background-image: ; } .gg-tit.w h4{ color: #fff; } .gg-tit.w h4:after{ background-image: ; background-size: 2.41rem; } .s1-list li a{ display: block; font-size: 0; overflow: hidden; } .s1-list li a time{ display: inline-block; vertical-align: middle; width: 70px; border-right: 1px solid #dedede; padding-right: 0.14rem; font-family: 'arial'; } .s1-list li a time span{ display: block; font-size: 0.36rem; color: #004ea2; font-weight: 600; text-align: center; line-height: 1; } .s1-list li a time em{ display: block; font-size: .14rem; line-height: 1; color: #999999; text-align: center; } .s1-list li a .txt{ display: inline-block; vertical-align: middle; width: calc(100% - 90px); margin-left: 20px; } .s1-list li a .txt p{ font-size: .18rem; line-height: 1; color: #323232; } .s1-list li { float: left; width: 45.78%; padding-top: 0.33rem; padding-bottom: .2rem; border-bottom: 1px dashed #dedede; } .s1-list li:nth-child(2n){ margin-left: 8.44%; } .s1-list li:hover a .txt p{ color: #004ea2; } .s1-mores { display: block; width: 1.2rem; margin: .54rem auto 0; font-size: 0; text-align: center; background: #9a0000; border-radius: .35rem; } .s1-mores a{ display: inline-block; font-size: .14rem; color: #fff; line-height: .32rem; padding-right: .2rem; background: no-repeat right center; background-size: .13rem; } .s1 .block { margin-top: .38rem; padding: .26rem .42rem .58rem .3rem; border: 1px solid #dedede; background: no-repeat 50%; background-size: cover; } .s1{ padding-top: .26rem; background: repeat-x bottom center; } .s2-item{ float: left; width: 30%; margin-left: 5%; } .s2-item:first-child{ margin-left: 0; } .s2-item .pt-box a{ display: block; overflow: hidden; } .s2-item .pt-box a .pic{ padding-top: 66.66%; } .s2-item .pt-box a .txt p, .s2-list a p{ font-size: .18rem; line-height: 1.55em; height: .56rem; margin-bottom: .15rem; } .s2-item .pt-box a .txt>div, .s2-list a div{ font-size: 0; } .s2-item .pt-box a .txt span, .s2-list a div span{ display: inline-block; vertical-align: middle; font-size: .14rem; color: #9ea3a9; padding-left: .2rem; line-height: 1; background-position: left center; background-repeat: no-repeat; background-image: ; background-size: .13rem; margin-right: 0.19rem; } .s2-item .pt-box a .txt span.xy, .s2-list a div span.xy{ margin-right: 0; background-image: ; background-size: .12rem; } .s2-item .pt-box a .txt{ padding-top: .15rem; padding-bottom: .18rem; border-bottom: 1px solid #eaeaea; } .s2-list a{ display: block; overflow: hidden; padding-top: .23rem; padding-bottom: .24rem; border-top: 1px solid #eaeaea; } .s2-list a:hover p, .s2-item .pt-box a:hover .txt p{ color: #004ea2; } .s2-list a:first-child{ border: none; } .s2 .block{ margin-top: .43rem; } .s2 { padding-top: .38rem; padding-bottom: 1.14rem; background: no-repeat top; background-size: 100% 3.91rem; } .s3-left .s3-mores{ position: absolute; width: 1.2rem; height: 1.2rem; right: -1.2rem; bottom: 0; background:#1347aa no-repeat 50%; background-size: 0.4rem; } .s3-left{ width: 57.29%; background: no-repeat 50%; background-size: cover; padding-top: .26rem; padding-bottom: .29rem; position: relative; } .s3-r{ width: 76.36%; } .s3-r .dt{ width: 50.95%; padding: .21rem .17rem; background: #0099f9; } .s3-r .dt .pic{ padding-top: 120.61%; } .s3 .gg-tit h4:after{ background-image: ; background-size: 2.2rem; } .s3 .tit{ width: calc(100% - 50.95%); margin-top: .29rem; position: relative; z-index: 3; } .s3-link a{ display: inline-block; font-size: .24rem; color: #fff; line-height: .58rem; position: relative; padding-left: .64rem; padding-right: .32rem; border-radius: .35rem; background: #b87ed6; font-weight: 600; margin-top: .36rem; } .s3-link a:nth-child(2){ background: #b3c13d; } .s3-link a:before{ content: ''; position: absolute; left: .3rem; top: 50%; transform: translatey(-50%); width: .16rem; height: 2px; background: #fff; } .s3-link{ margin-top: 0.47rem; margin-left: -0.45rem; } .s3-right{ width: calc(100% - 57.29%); } .s3-list{ width: 5.6rem; position: relative; margin-top: -0.8rem; } .s3-list a{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; padding: 0.62rem 0; background: #f7f7f9; } .s3-list a:nth-child(2), .s3-list a:nth-child(3){ background: #f0f0f2; } .s3-list a .icon{ width: 0.68rem; height: 0.7rem; position: relative; margin: 0 auto; } .s3-list a p{ font-size: 0.2rem; color: #323232; line-height: 1; margin-top: 0.16rem; } .s3-list a:hover p{ color: #004ea2; } .s3-list:after{ position: absolute; content: ''; right: -0.53rem; bottom: 0; width: 0.53rem; height: 1.82rem; background: no-repeat 50%; background-size: 0.53rem; } .s4-list { width: 48.57%; } .s4-list a{ display: flex; width: 48.53%; flex-direction: column; justify-content: center; align-items: center; position: relative; background-size: 100% 100%; padding: 0.69rem 0 0.68rem; } .s4-list a:nth-child(-n 2){ margin-bottom: 0.2rem; } .s4-list a:after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(19, 71, 170, 0.77); } .s4-list a>div{ position: relative; z-index: 3; } .s4-list a .icon{ width: 0.61rem; height: 0.61rem; margin: 0 auto; position: relative; z-index: 3; } .s4-list a p{ font-size: 0.2rem; color: #fff; line-height: 1; margin-top: 0.12rem; z-index: 3; } .s4-list a:hover .icon img, .s3-list a:hover .icon img{ animation: icon-yh 0.6s linear infinite; } .s4-list a.a1{ background: no-repeat 50%; } .s4-list a.a2{ background: no-repeat 50%; } .s4-list a.a3{ background: no-repeat 50%; } .s4-list a.a4{ background: no-repeat 50%; } .s4-list a.a2:after{ background: rgba(52, 156, 111, 0.84); } .s4-list a.a3:after{ background: rgba(19, 71, 170, 0.7); } .s4-r{ width: 48.57%; } .s4-r a{ display: block; } .s4-r a .pic{ padding-top: 70.59%; min-height: 4.8rem; } .s4{ padding-top: 0.8rem; padding-bottom: 0.73rem; background: no-repeat right top; background-size: contain; } @keyframes icon-yh { 0% { transform: rotatez(0); } 10% { transform: rotatez(10deg); } 20% { transform: rotatez(0); } 30% { transform: rotatez(-10deg); } 40% { transform: rotatez(0); } 50% { transform: rotatez(10deg); } 60% { transform: rotatez(0); } 70% { transform: rotatez(-10deg); } 80% { transform: rotatez(0); } 90% { transform: rotatez(10deg); } 100% { transform: rotatez(0); } } @media screen and (max-width: 1060px){ html, body,.body_h { height: auto; overflow: auto; } .banner a{ padding-top: 48.91%; height: auto; } .body_b { width: auto; height: auto; position: static; opacity: 1; transform: none; overflow: auto; } .body_h .bb { display: none; } .scroll{ padding-top: 0; } .banner{ margin-top: 1rem; } .banner a:after{ display: none; } .banner .slick-dots{ right: 0; left: 0; top: auto; transform: none; bottom: 0.1rem; } .banner .slick-dots li{ display: inline-block; margin:0 0.1rem ; } .s1-list li a .txt p{ font-size: 0.2rem; } .s1-list li{ width: 49%; } .s1-list li:nth-child(2n){ margin-left: 2%; } .s1 .block{ padding: 0.25rem 0.2rem 0.3rem; margin-top: 0.25rem; } .gg-tit h4{ font-size: 0.3rem; } .s1-mores{ margin-top: 0.4rem; width: 1.5rem; } .s1-mores a{ font-size: 0.18rem; line-height: 0.38rem; } .s2-item{ width: 32%; margin-left: 2%; } .s2-item .pt-box a .txt p, .s2-list a p{ font-size: 0.2rem; height: 0.62rem; } .s2-item .pt-box a .txt span, .s2-list a div span{ font-size: 0.16rem; } .s2 .block{ margin-top: 0.25rem; } .s2 { padding-top: .3rem; padding-bottom: 0.4rem; background-size: contain; } .s3-left, .s3-r{ float: none; width: auto; } .s3-right{ float: none; width: auto; margin-top: 0.25rem; } .s3-list{ width: 100%; margin-top: 0; } .s3-list a{ width: 25%; } .s3-link{ margin-left: 0; padding: 0 0.25rem; text-align: center; margin-top: 0; } .s3-list a:nth-child(2n){ background: #f0f0f2; } .s3-list a:nth-child(3){ background: #f7f7f9; } .s4-list{ width: 100%; margin-bottom: 0.25rem; } .s4-list a{ width: 25%; } .s4-list a:nth-child(-n 2){ margin-bottom: 0; } .s4-r{ width: 100%; } .s4-r a .pic{ min-height: auto; } .s4{ padding-top: 0.3rem; padding-bottom: 0.35rem; background: #fff; } .s3-left .s3-mores{ right: 0; } .s3-list:after{ display: none; } .s3-link a{ font-size: 0.2rem; } } @media screen and (max-width: 640px){ .banner{ margin-top: 0.9rem; } .gg-tit h4:after{ background-size: contain; } .s1-list li{ width: 100%; } .s1-list li:nth-child(2n){ margin-left: 0; } .s2-item{ width: 100%; margin-bottom: 0.25rem; margin-left: 0; background: #fff; } .s2-item .pt-box a .txt, .s2-list a{ padding-left: 0.125rem; padding-right: 0.125rem; } .s3-list a, .s4-list a{ width: 50%; padding: 0.45rem 0; } .icon img{ max-width: 80%; max-height: 80%; } .s2{ background-size: cover; } .s3-left .s3-mores{ display: none; } } @media screen and (max-width: 420px){ .s3 .tit{ float: none; width: 100%; margin-bottom: 0.25rem; margin-top: 0; } .s3-r .dt{ width: 100%; float: none; } }