.gp-ellipsis{  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
/*响应式图片*/
.gp-img-responsive{width: 100%;height: 0;padding-bottom: 56.25%;overflow:hidden;display: block;background-color: #d8e3e6}
.gp-img-responsive img{width: 100%;transition: all 0.5s ease-in-out;max-width:none;}
.gp-img-responsive img:hover{transform:scale(1.03);opacity: 0.85;}
body{
background: #f5f5f5;
}
/*头部样式*/
header{width:100%;min-width: 300px;height:auto;z-index:10;background: url(../images/header_bg.png) no-repeat center;background-size: cover;position: relative;}
header .top{}
header .logo{box-sizing: border-box;padding: 70px 0 45px;    display: flex;display: -webkit-flex;align-items: center;max-width:100%;}
header .logo a{display: inline-block;vertical-align: middle;}
header .logo a:first-child{margin-right: 60px;}

.content{position: relative;background: #f5f5f5;}
.content .indexTitle{background: #fcfcfc;}
.content .indexTitle a{display: block;width: 478px;background: url(../images20221018/title_bg.png) no-repeat right;background-size: cover;color: #fff;text-align: center;box-sizing: border-box;padding: 16px 0;margin-left: -190px;}

.wrap_mode01{display: flex;justify-content: space-between;padding: 40px 0 20px;}
.fl{width: 36.16%;}
.fl >div{ height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.mode1{position: relative;margin-bottom: 20px;overflow: hidden;}
.mode1 .img{padding-bottom: 55.88%;position: relative;transition: all 0.2s ease-in-out;}
.mode1 .img::before{content: "";display: block;width: 100%;height: 100%;background: rgba(125,113,136);position: absolute;left: 0;top: 0;}
.mode1 .info{position: absolute;left: 0;top: 0;width: 100%;height: 100%;color: #fff;}
.mode1:hover .img{transform:scale(1.03);opacity: 0.85;} 
.mode1 .info p{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;}
.mode1 .info p .iconImg{margin-bottom: 10px;display: block;}

.mode2{border: 1px solid #895e5e;text-align: center;margin-bottom: 20px;}
.mode2 >.title{color: #fff;background: #970000;display: inline-block;box-sizing: border-box;padding: 2px 26px;}
.mode2 ul{box-sizing: border-box;padding: 0 20px;margin: 45px 0 60px;}
.mode2 ul li{margin-bottom: 30px;}
.mode2 ul li:last-child{margin-bottom: 0px;}
.mode2 ul li span{display: inline-block;vertical-align: middle;width: 30px;}
.mode2 ul li a{display: inline-block;vertical-align: middle;border: 1px solid #8e7256;text-align: center;color: #810202;margin-left: 14px;width: calc(100% - 160px);}

.mode3 .img{padding-bottom: 44.57%;}
.mode3 .img::before{background: rgba(179,173,169);} 

.cen{width: 24.16%;}  
.cen >div{height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.mode4 .img{padding-bottom: 178.62%;}
.mode4 .img::before{background: rgba(2929,234,214);} 


.mode5 .img{padding-bottom: 85.76%;}
.mode5 .img::before{background: rgba(113,67,67);} 

.rt{width: 36.08%;}
.rt >div{height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.mode6{}
.mode6 ul{margin: 70px 0 80px;}
.mode6 ul li{margin-bottom: 46px;}
.mode6 ul li a{width: calc(100% - 120px);}

.mode7 .img{padding-bottom: 57.40%;}
.mode7 .img::before{background: rgba(192,103,55);} 


footer{box-sizing: border-box;padding: 18px 0;background: #750707;}
footer p{color: #fff;text-align: center;} 


@media screen and (max-width: 1840px){


}
@media screen and (max-width: 1480px){



}
@media screen  and (max-width:1240px) {
header .logo{padding: 50px 0 30px;}
header .logo a:first-child{margin-right: 30px;}
.fl{width: 35.66%;}
.cen{width: 24.66%;}
.rt{width: 35.50%;}
}
@media screen  and (max-width:1200px) {
.fl{width: 35.66%;}
.cen{width: 25%;}
.rt{width: 35.50%;}
.mode6 ul{margin: 70px 0 70px;}
.mode6 ul li{margin-bottom: 42px;}
}
@media screen  and (max-width:1150px) { 
.cen{width: 25.5%;} 
}
@media screen  and (max-width:1120px) { 
.fl{width: 35.16%;}
.cen{width: 25.5%;}
.rt{width: 35.00%;} 
.mode6 ul li{margin-bottom: 40px;}
}
@media screen  and (max-width:1080px) {
.mode2 ul{margin: 45px 0 55px;}
.mode6 ul {margin: 60px 0 70px;}
.mode6 ul li{margin-bottom: 38px;}
}
@media screen  and (max-width:1024px) {
.wrap_mode01{display: block;}
.fl{width: 100%;}
.fl >div{display: flex;flex-direction: row;height: auto;width: 100%;justify-content: space-between;}
.fl .mode1{width: 33.3%;height: 100%;}
.fl .mode2{width: 33.3%;height: 100%;margin: 0 15px;}
.fl .mode3{width: 33.3%;height: 100%;}
.mode2 ul{margin: 20px 0;}
.mode2 ul li{margin-bottom: 20px;}
.mode2 ul li a{width: calc(100% - 60px);}
.cen{width: 100%;}
.cen >div{display: flex;flex-direction: row;height: auto;width: 100%;justify-content: space-between;}
.cen .mode4{width: 50%;height: 100%;margin-right: 15px;} 
.cen .mode5{width: 50%;height: 100%;} 
.mode4 .img{padding-bottom: 100%;}
.mode5 .img{padding-bottom: 100%;}
.rt{width: 100%;}
.rt >div{display: flex;flex-direction: row;height: auto;width: 100%;justify-content: space-between;}
.rt .mode6{width: 50%;height: 100%;margin-right: 15px;} 
.rt .mode7{width: 50%;height: 100%;}   

}
@media screen  and (max-width:992px) {
header .logo{padding: 30px 0;}
header .logo a:first-child{margin-right: 20px;}
header .logo{max-width: 100%;}

}
@media screen  and (max-width:767px) {
header .logo{padding: 20px 0;}
.content .indexTitle span{width: auto;margin-left: 0;display: inline-block;padding: 10px 50px;}
.wrap_mode01{padding: 25px 5px;}

.fl >div{display: block;}
.cen >div{display: block;}
.rt >div{display: block;}
.mode1,.mode2,.mode3,.mode4,.mode5,.mode6,.mode7{width: 100%!important;float: none!important;margin: 0 0 20px 0!important;}

}
@media screen and (max-width:540px) {

header .logo{padding: 15px 0;}
}
@media screen and (max-width:380px) {



}