.section_body{
max-width: 1920px;
margin: auto;
}
.title_con{
padding: 120px 0 70px;
}
.title_con img{
margin: auto;
}
.w-r{
width: 1200px;
margin: auto;
}
/*1*/
.hy_tab{
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.hy_tab p{
width: 28%;
text-align: center;
font-size: 24px;
color: #555;
cursor: pointer;
}
.hy_tab p img{
margin:8px auto 8px;
}
.hy2{
display: none;
}
.hy_on{
background-color: #fff;
}
.hy_on .hy1{
display: none;
}
.hy_on .hy2{
display: block;
}
.hy_con{
height: 400px;
background-color: #edf1f7;
margin-top: -76px;
}
.hy_list{
position: relative;
height: 100%;
overflow: hidden;
}
.w-h{
height: 100%;
width: 100%;
}
.htxt_con{
position: absolute;
top: 0;
left: 50%;
transform: translatex(-50%);
height: 100%;
}
.htxt_df{
display: flex;
align-items: center;
justify-content: center;
padding-left: 5%;
}
.hy_int{
width: 100%;
}
.hy_talk .talk_img,.hy_talk .talk_txt{
display: inline-block;
vertical-align: middle;
}
.hy_talk{
display: flex;
align-items: center;
}
.talk_img i{
position: absolute;
top: 22%;
left: 50%;
transform: translatex(-58%);
width: 80%;
text-align: center;
font-size: 16px;
color: #fff;
font-style: normal;
z-index: 1;
}
.talk_txt{
width: 80%;
font-size: 16px;
color: #333;
}
.htxt_dl{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 11%;
}
.htxt_dl .hy_talk{
width: 50%;
margin-bottom: 40px;
display: flex;
align-items: flex-start;
}
.htxt_dl .talk_txt{
width: 71%;
vertical-align: top;
margin-top: 0;
-webkit-line-clamp: 4;
height: 96px;
}
/*2*/
.section2{
background-color: #001e40;
}
.sd_ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.sd_ul li{
width: 25%;
position: relative;
overflow: hidden;
}
.sd_txt{
width: 100%;
height: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sd_txt p , .hover_con p{
text-align: center;
font-size: 24px;
color: #fff;
}
.sd_txt p{
margin-bottom: 70px;
width: 100%;
}
.xq_btn{
width: 150px;
height: 36px;
line-height: 36px;
background-color: #0d5bd9;
border-radius: 20px;
font-size: 16px;
text-align: center;
color: #fff;
}
.h1{
background-color: rgba(0,87,186,0.8);
}
.h2{
background-color: rgba(14,18,154,0.85);
}
.h3{
background-color: rgba(13,19,217,0.8);
/*background-color: #0d5bd9;*/
}
.h4{
background-color: rgba(0,113,164,0.8);
}
.hover_con{
width: 100%;
height: 100%;
bottom: -100%;
padding: 0 20px;
transition: all ease 0.5s;
}
.hover_con p{
padding: 30px 0 30px;
position: relative;
margin-bottom: 36px;
}
.hover_con p:after{
position: absolute;
content: '';
width: 106px;
height: 2px;
bottom: 0;
left: 50%;
transform: translatex(-50%);
background-color: #fff;
}
.hover_con span{
font-size: 16px;
color: #fff;
}
.h_btn{
display: block;
position: absolute;
bottom: 30px;
left: 50%;
transform: translatex(-50%);
background-color: #fff;
color: #0d5bd9;
}
.sd_ul li:hover .p1{
display: none;
}
.sd_ul li:hover .xq_btn{
display: none;
}
.sd_ul li:hover .h_btn{
display: block;
}
.sd_ul li:hover .hover_con{
bottom: 0;
}
/*3*/
.section3{
position: relative;
}
.swiper_sl{
width: 96%;
margin: auto;
}
.swiper_sl .swiper-slide{
width: 30%;
}
.swiper_sl .swiper-slide img{
width: 100%;
}
.l_btn,.r_btn{
bottom: 8px;
position: absolute;
z-index: 99;
cursor: pointer;
}
.l_btn{
left: 0;
}
.r_btn{
right: 0;
}
/*4*/
.tab_list{
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #d7dcea;
}
.tab_list span{
display: inline-block;
margin: 0 20px;
padding-bottom: 10px;
font-size: 24px;
color: #333;
cursor: pointer;
}
span.span_on{
position: relative;
color: #0d5bd9;
}
.span_on:after{
position: absolute;
content: '';
width: 120px;
height: 3px;
background-color: #0d5bd9;
bottom: 0;
left: 50%;
transform: translatex(-50%);
}
.tab_con{
padding: 100px 0;
}
.tab_con:before,.tab_con:after{
position: absolute;
content: '';
left: 0;
width: 100%;
height: 270px;
background-color: #e6eef7;
z-index: -1;
}
.tab_con:before{
top: 0;
}
.tab_con:after{
bottom: 0;
}
.con_list .con_item:first-child{
margin-bottom: 80px;
}
.con_item{
display: flex;
flex-wrap: wrap;
}
.int_con,.img_con{
width: 50%;
}
.int_con{
padding-left: 50px;
}
.top_txt i{
display: inline-block;
padding: 0 15px;
margin-right: 10px;
margin-bottom: 8px;
border: 2px solid #0d5bd9;
border-radius: 8px;
font-style: normal;
font-size: 22px;
color: #555;
}
.top_txt p{
font-size: 32px;
color: #333;
}
.top_txt span{
font-size: 22px;
color: #333;
}
.ys_txt{
margin-top: 60px;
}
.ys_txt p{
position: relative;
padding-left: 30px;
margin-bottom: 6px;
}
.ys_txt p img{
position: absolute;
left: 0;
top: 8px;
}
.ys_txt p span{
font-size: 22px;
color: #333;
}
.img1,.img2_left{
margin-bottom: 20px;
}
.img1,.img2_left{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.img2_right{
width: 100%;
}
.f_btn{
display: block;
padding: 20px 0;
font-size: 28px;
color: #fff;
background-color: #001e40;
text-align: center;
}
.f_btn span, .f_btn i{
display: inline-block;
vertical-align: middle;
}
.f_btn i{
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 0 12px;
}
/*.img2_left,.img2_right{
width: 49%;
}*/
/*.p1{
display: inline-block;
width: 48%;
margin-top: 20px;
}*/
/*.img1 div,.img2 div{
overflow: hidden;
}
.img1 div img, .p1 img,.img2_right img{
width: 100%;
transition: all 0.6s;
}
.img1 div:hover img,.p1:hover img, .img2_right:hover img{
transform: scale(1.2);
}*/
.foot{
margin-top: 10%;
width: 100%;
line-height: 80px;
background-color: #001e40;
font-size: 18px;
color: #fff;
}
.foot a{
color: #fff;
}
@media screen and (max-width: 1200px){
.w-r {
width: 100%;
padding: 0 20px;
}
.hover_con p{
padding: 20px 0;
margin-bottom: 25px;
}
.hover_con span{
font-size: 14px;
}
.sd_txt p, .hover_con p{
font-size: 22px;
}
.img_con img{
width: 100%;
}
.img1 div,.img2_left div{
width: 32%;
}
.f_btn{
font-size: 26px;
}
.tab_con {
padding: 5% 0;
}
.top_txt i{
font-size: 20px;
}
.top_txt p{
font-size: 30px;
}
.top_txt span,.ys_txt p span{
font-size: 20px;
}
.hy_talk .talk_img{
width: 150px;
}
.talk_img img{
width: 100%;
}
.htxt_dl .talk_txt,.talk_txt{
width: calc(100% - 180px);
}
/*.p1{
margin-top: 15px;
}
.img2{
align-items: end;
}*/
.w-h{
height: 100%;
}
.htxt_dl{
margin-top: 12%;
}
.hy_tab p{
font-size: 22px;
}
}
@media screen and (max-width: 1000px){
.sd_ul{
width: 72%;
margin: auto;
}
.sd_ul li{
width: 50%;
}
/*.hover_con span {
font-size: 16px;
}*/
.top_txt i {
font-size: 16px;
}
.top_txt p {
font-size: 26px;
}
.top_txt span, .ys_txt p span {
font-size: 18px;
}
.ys_txt p img{
top: 6px;
}
.int_con{
padding-right: 20px;
padding-left: 20px;
}
.hy_tab p img{
width: 60px;
}
.talk_img i{
font-size: 14px;
}
.hy_talk .talk_img {
width: 136px;
}
.htxt_dl .talk_txt,.talk_txt{
width: calc(100% - 160px);
}
.htxt_dl .hy_talk{
margin-bottom: 26px;
}
.hy_con{
margin-top: -70px;
}
.title_con {
padding: 12% 0 8%;
}
.title_con img{
height: 70px;
}
}
@media screen and (max-width: 900px){
.top_txt p {
font-size: 24px;
}
.top_txt span, .ys_txt p span {
font-size: 16px;
}
.ys_txt {
margin-top: 30px;
}
.tab_list span{
font-size: 22px;
}
.w-h{
display: none;
}
.htxt_con{
position: inherit;
}
.hy_con{
height: auto;
padding-bottom: 50px;
padding-top: 120px;
}
.htxt_dl .hy_talk{
width: 100%;
}
.htxt_dl{
margin-top: 0;
}
.htxt_dl .hy_talk:last-child{
margin-bottom: 0;
}
.hy_con .hy_list{
height: 150px;
}
.hy_con .hy_list:last-child{
height: auto;
}
.foot{
line-height: 70px;
}
.f_btn{
font-size: 24px;
}
}
@media screen and (max-width: 800px){
.int_con, .img_con{
width: 100%;
}
.int_con{
margin-top: 20px;
}
.con_list .con_item:first-child{
margin-bottom: 40px;
flex-direction: column-reverse;
}
.foot{
line-height: 60px;
font-size: 16px;
}
.f_btn{
font-size: 22px;
}
}
@media screen and (max-width: 768px){
.sd_ul{
width: 84%;
}
.hy_tab p {
font-size: 20px;
}
.title_con img {
height: 60px;
}
}
@media screen and (max-width: 640px){
.hy_tab p {
font-size: 18px;
}
.hy_tab p img {
width: 48px;
margin: 5px auto 5px;
}
.hy_con {
margin-top: -54px;
padding-top: 90px;
}
.talk_txt{
font-size: 14px;
}
.htxt_dl .talk_txt{
height: 83px;
margin-top: -2px;
}
.talk_img i {
font-size: 12px;
}
.hy_talk .talk_img {
width: 120px;
}
.htxt_dl .talk_txt, .talk_txt {
width: calc(100% - 120px);
}
.sd_ul{
width: 100%;
}
.sd_txt p, .hover_con p {
font-size: 18px;
}
/*.hover_con span {
font-size: 14px;
}*/
.hover_con{
padding: 0 10px;
}
.hover_con p {
padding: 15px 0;
margin-bottom: 15px;
margin-top: 8px;
}
.sd_txt p{
margin-bottom: 40px;
}
.l_btn, .r_btn{
width: 50px;
}
.img1 div,.img2_left div{
width: 100%;
margin-bottom: 15px;
}
.img2_left, .img2_right{
width: 100%;
}
/*.p1{
width: 100%;
margin: 15px 0;
}*/
.img1,.img2_left{
margin-bottom: 0;
}
.img2_right a{
display: block;
padding: 15px 0;
background-color: #001e40;
overflow: hidden;
}
.img2_right a img{
transform: scale(1.6);
}
.title_con img {
height: 50px;
}
.tab_list span {
font-size: 20px;
}
.foot{
line-height: 40px;
font-size: 14px;
}
}
@media screen and (max-width: 500px){
.hover_con{
padding:10px 5px 0;
}
.hover_con span {
font-size: 12px;
}
.xq_btn{
font-size: 14px;
width: 140px;
height: 32px;
line-height: 32px;
}
.h_btn{
bottom: 20px;
}
.hover_con p {
display: none;
}
.p1{
width: 100%;
margin: 15px 0 0;
}
/*.img2_right{
margin-top: 15px;
}*/
.hy_tab p {
font-size: 16px;
width: 30%;
}
.hy_tab p img{
width: 42px;
margin: 10px auto 5px;
}
.hy_con{
margin-top: -48px;
}
.title_con {
padding: 15% 0 10%;
}
.tab_list span {
font-size: 18px;
}
/*.int_con {
margin-top: 14px;
}*/
.top_txt i {
font-size: 12px;
padding: 0 10px;
border-radius: 5px;
margin-bottom: 2px;
}
.top_txt p {
font-size: 22px;
}
.top_txt span, .ys_txt p span {
font-size: 14px;
}
.ys_txt {
margin-top: 10px;
}
.ys_txt p img{
width: 16px;
top: 5px;
}
.ys_txt p{
padding-left: 20px;
margin-bottom: 3px;
}
.con_list .con_item:first-child{
margin-bottom: 30px;
}
.foot{
font-size: 12px;
}
.title_con img {
height: 42px;
}
.hy_talk .talk_img {
width: 100px;
}
.f_btn{
font-size: 20px;
}
.f_btn i{
width: 6px;
height: 6px;
margin: 0 8px;
}
}
@media screen and (max-width: 400px){
.hover_con{
display: flex;
align-items: center;
}
.hover_con span{
display: inline-block;
line-height: 1.3;
margin-top: -40px;
}
.sd_txt p{
font-size: 16px;
}
.xq_btn{
font-size: 12px;
width: 120px;
height: 30px;
line-height: 30px;
}
.h_btn {
bottom: 10px;
}
.l_btn, .r_btn{
width: 40px;
}
.hy_tab p {
width: 40%;
}
.tab_list span {
font-size: 16px;
}
.htxt_dl .talk_txt{
-webkit-line-clamp: 3;
height: 66px;
}
.f_btn{
font-size: 16px;
}
}
@media screen and (max-width: 350px){
.hover_con span{
line-height: 1.2;
}
}