body {
    font-size: 14px;
    font-family: 'HarmonyOS','PingFang SC ', sans-serif;
    color: #000;
    padding: 0px;
    margin: 0 auto;
    width: 100%;
}
body.highlight{
    height: 100%;
    overflow: auto;
}
@font-face{
    font-family:"HarmonyOS";
    src:url(/template/default/images/HarmonyOS_Sans_SC_Regular.ttf)
}
:root {
    --padding:80px 10px;
    --margin:90px auto;
    --m80:80px 0;
    --m50:50px 0;
    --f80:80px;
    --f70:70px;
    --f60:60px;
    --f50:50px;
    --f48:48px;
    --f40:40px;
    --f36:36px;
    --f30:30px;
    --f28:28px;
    --f26:26px;
    --f24:24px;
    --f22:22px;
    --f20:20px;
    --f18:18px;
    
    --border: #eee solid 1px;
    --wrapper: 1460px;
    --main-color: #00956d;
    --main2-color: linear-gradient(30deg, #00956d,#006b4e);
    --main3-color: #006b4e;
    --listbg: #fff;
 }
body a {
    color: #000;
        text-decoration: none !important;
    transition: all ease 0.3s;
}
a:hover, a:focus {
    color: #000;
    text-decoration: underline;
}
body li {
    list-style-type: none; 
}

p,
ul,
li,
h5,
h4,
h3,
h2,
h1 {
    padding: 0px;
    margin: 0 auto;
    list-style-type: none;
}

img,
a img {
    border: 0px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}

input {
    outline: none
}

.non_width {
    width: 1440px;
    max-width: 94%;
    margin: 0 auto;
}



.mbx_w {
    color: #000;
    font-size: 16px;
}
.ymbt {
    display: block;
    line-height: 1.35;
    padding: 0;
    color: #000;
    text-transform: uppercase;
    font-size: 32px;
    margin-bottom: 0;
    padding-bottom: 32px;
    padding-top: 35px;
    font-weight: bold;
}
.plate_bt {
    text-align: center;
}


.banner {
    position: fixed;
    top: 0%;
    width: 100%;
    height: 100%;
    left: 0%;
    background: #fff;
    z-index: 999;
}
.banner .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.banner img{
    width: 100%;
    height: auto;
}
.highlight .banner{
    display: none;
}

.hred{
    padding: 1.5% 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 99;
}
.hred_logo{
    font-size: 24px;
    font-weight: bold;
}
.hred_logo img{
    width: 82px;
}
.hred_nav{
    display: flex;
}
.hred_nav a{
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
    color: #333;
    transition: all ease .8s;
    position: relative;
    padding: 12px 0px;
    display: block;
}
.hred_nav .yiji{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.hred_nav .yiji b{
    font-weight: 500;
}
.hred_nav .yiji span{
    font-size: 12px;
    color: #999;
    text-transform: capitalize;
}
.hred_nav a:after{
    content:'';
    border-bottom: solid 1px #fff;
    position: absolute;
    width: 0%;
    bottom: 0;
    transition: all ease .8s;
    left: 0%;
}
.hred_nav a:hover{
    color: #111;
    
}
.hred_nav a:hover:after{
    content:'';
    border-bottom: solid 1px #111;
    width: 100%;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
.home_list{
    margin: 0% 2%;
    text-align: center;
    margin-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
}
.home_list .grid-item{
   transition: all ease 1s;
   left: 42%;
   top: 10%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
.home_list .grid-item.highlight{
    /* left: 0%; */
    /* top: 0%; */
    /* position: relative; */
}
.home_list .grid-item.highlight img{transform: scale(1);}
.home_list .grid-item
.home_list .grid-item a{
    display: block;
    position: relative;
}
.home_list .grid-item .img{
    overflow: hidden;
    margin: 17.5%;
    border-radius: 5px;
    background: #000;
}
.home_list .grid-item img{
    width: 100%;
    transition: all ease .8s;
}
.home_list .grid-item h4{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    transition: all ease .8s;
    opacity: 0;
}
.home_list .grid-item a:hover h4{
    opacity: 1;
}

.home_list .grid-item a:hover img {
    transform: scale(1.1);
    opacity: 0.5;
}
.foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    width: 96%;
    padding: 1% 2%;
    height: 100%;
    position: relative;
    z-index: 99;
}
.footl{
    color: #666;
    font-size: 12px;
}
.footl span{
    font-weight: bold;
    color: #333;
    padding: 0px 10px;
}
.footr{}
.footr a{
    color: #999;
    padding-left: 20px;
}
.footr a:hover{
    color: #999;
}
.djjr{
    position: absolute;
    bottom: 0%;
    z-index: 999;
    text-align: center;
    width: 100%;
    font-size: 64px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 99;
}
.djjr a{
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.my-map {margin: 0 auto;width: 1440px;height: 500px;filter: grayscale(100%);max-width: 94%;margin-bottom: 5%;img {
  filter: grayscale(100%);
};img {
  filter: grayscale(100%);
};} .my-map .icon { background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; }
     .amap-container{height: 100%;}
     .myinfowindow{width: 240px;min-height: 50px;}
     .myinfowindow h5{ height: 20px; line-height: 20px; overflow: hidden; font-size: 14px; font-weight: bold; width: 220px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
     .myinfowindow div{ margin-top: 10px; min-height: 40px; line-height: 20px; font-size: 13px; color: #6f6f6f; }

.nybanner{
    position: relative;
}
.nybanner .nr{
    position: absolute;
    bottom: 0%;
    z-index: 99;
    top: 0%;
    width: 80%;
    padding: 0% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.nybanner .nr h2{
    margin: 0%;
    color: #fff;
    font-size: 36px;
}
.nybanner .nr p{
    text-align: left;
    color: #fff;
    margin: 0%;
    font-size: 18px;
    font-weight: 100;
    margin-top: 10px;
}
.nybanner img{
    width: 100%;
}
.tdjsa{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3% 0%;
}
.tdjsal{
    width: 100%;
    text-align: center;
    margin-bottom: 1%;
}
.tdjsal h2{
    font-weight: 500;
    line-height: 1;
    font-size: 36px;
    font-weight: bold;
}
.tdjsal h2 b{
    font-weight: 100;
    padding: 0% 3%;
}
.tdjsar{
    width: 40%;
    text-align: center;
}
.tdjsar p{
    color: #333;
    font-size: 16px;
    font-weight: 100;
    line-height: 1.8;
    margin-bottom: 8%;
}
.contan{
    display: flex;
    padding: 5% 0%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    width: 63.5%;
}
    .contanl{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
    .contanr{
}
.contanr h4{
    color: #666;
    font-weight: 500;
    margin-bottom: 3%;
}
.contanr h2{
    font-size: 30px;
    margin-bottom: 0%;
    font-family: "HarmonyOSB";
    FONT-WEIGHT: BOLD;
}
.contanr h6{
    border-bottom: solid 2px #333;
    margin-bottom: 11%;
    margin-top: 0%;
    font-size: 21px;
    font-weight: 500;
    padding-bottom: 2%;
}
.contanr .w100{}
.contanr .w50:nth-child(1){
    width: 33%;
}

.contanr .w50{
}
.lxnr {text-align: center;}
.lxnr h4{text-align: center;font-size: 20px;font-weight: 500;margin-bottom: 10px;}
.lxnr p{text-align: center;line-height: 1.8;font-size: 16px;}
.lxnrl{
    border-radius: 50%;
    border: solid 2px #000;
    overflow: hidden;
}
.lxnrl img{
    width: 29px;
    padding: 13px;
}
.lxnrr{
    padding-left: 14px;
}
.lxnrr h3{
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
}
.lxnrr h5{
    font-size: 15px;
    font-weight: 500;
    color: #666;
}
.duogenr{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 5% 0%;
    margin: 5% 0%;
}
.lxgs{
    font-size: 22px;
    font-weight: 100;
    margin-bottom: 6%;
    border-bottom: solid 1px #eee;
    padding-bottom: 6%;
}
.lxgs span{
    font-size: 16px;
    color: #666;
}
.contanl .ewm{display: flex;text-align: center;align-items: center;flex-direction: column;padding: 0px 7px;}
   .contanl .ewm img{
    width: 140px;
}
.contanl .ewm .nr{
    text-align: left;
    text-align: center;
    margin-top: 13%;
}
.contanl .ewm .nr h2{
    font-size: 14px;
    color: #999;
    font-weight: 100;
}
   .contanl .ewm p{
    color: #333;
    font-size: 16px;
    margin-top: 5px;
}

.ejfl{
    display: none;
    position: absolute;
    top: 100%;
    right: 0%;
    width: 700px;
    z-index: 99;
    background: #fff;
    box-shadow: 0 0 14px rgb(0 0 0 / 12%);
}
.hred_nav .fl{
    position: relative;
}
.hred_nav .fl:hover .ejfl{
 
}

.hred_nav .fl:nth-child(1):hover .ejfl ul{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.hred_nav .fl:nth-child(1):hover .ejfl ul li{
    padding: 0%;
    width: 100%;
    text-align: right;
}
.hred_nav .fl:nth-child(6):hover .ejfl{
    display: block;
    border-top: solid 1px #eee;
       padding: 40px 37px;
}
.ejfl ul{
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
}
.ejfl ul li{
    margin: 0%;
    width: 21%;
    padding-left: 4%;
}
.ejfl ul li a{
    font-size: 16px;
    color: #333;
    display: block;
    padding: 0%;
    margin: 0%;
    text-align: center;
    margin-bottom: 10px;
}
.ejfl ul li a:after{
    content:'';
    width: auto!important;
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
} 
.ejfl ul li:hover ul{
    display: flex;
    flex-wrap: wrap;
}
.ejfl ul li ul{display: flex;flex-wrap: wrap;}
.ejfl ul li ul li{
    width: 50%;
    padding: 0%;
}
.ejfl ul li ul li a{
                    padding: 0%;
                    margin: 0%;
                    font-size: 12px;
                    line-height: 1.8;
                    color: #666;
                    overflow: hidden; /* 确保内容超出容器时会被隐藏 */
                    text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
                    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
                    -webkit-line-clamp: 1; /* 限制在3行 */
                    -webkit-box-orient: vertical; /* 垂直排列盒子 */
                    white-space: normal; /* 允许文本换行 */
                    max-height: 4.5em; /* 最大高度为行高的4.5倍，即大约3行 */
                   }
.ejfl ul li ul li a:hover{
    color: #000;
}
.xqnr{}
.xqnrt{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 67vh;
}
.xqnrt img{
    height: 100%;
    position: relative;
    z-index: 99;
}
.xqnrt video{
    height: 100%;
}
.xqnrb{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3% 4%;
}
.xqnrbl{
    font-size: 18px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 99;
}
.xqnrbl span{
    color: #666;
}
.xqnrbl i{
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #000;
    margin: 0px 14px;
}
.xqnrbr{
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 99;
}
.xqnrbr p{
    padding-left: 24px;
    color: #666;
}
.xqnrbr p a{}
.jgxx{
    color: #999;
    display: flex;
    justify-content: flex-end;
    margin-left: 38%;
    text-align: right;
    padding: 0% 2%;
    font-size: 13px;
}
.gban{
    position: absolute;
    right: 6%;
    z-index: 99;
    bottom: 13px;
}
.gban img{
    width: 31px;
}
.content {
    width: 100%;
    margin: 0 auto;
}
.waterfull {
    margin: 3% auto;
}
.waterfull ul{
    width: 100%!important;
  
}
.waterfull ul li {
    float: left;
    width: 380px;
    margin-bottom: 84px;
    background: #fff;
    transition: all ease .5s;
    left: 39%;
    top: 10%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.waterfull ul li.bydh {
    transition: all ease 0s;
}
.waterfull ul li .a-img {
    display: block;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease .8s;
    overflow: hidden;
}
.waterfull ul li .a-img:hover img{
    opacity: 0.5;
}
.waterfull ul li .a-img h2{
    transition: all ease .8s;
    position: absolute;
    top: 0%;
    width: 100%;
    left: 0%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-size: 18px;
    font-weight: 500;
}
.waterfull ul li .a-img:hover h2{
    opacity: 1;
}
.waterfull ul li .a-img img {
    width: 280px;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    transition: all ease .8s;
}
.dh{
    padding: 2% 0%;
}
.dh ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.dh ul li{
    width: 14.5%;
    margin: 2% 2.75%;
    overflow: hidden;
    display: flex;
}
.dh ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: auto;
}
.dh ul li a h2{}
.dh ul li a:hover{
    position: relative;
}
.dh ul li a:hover img{
    opacity: 0.5;
}
.dh ul li a:hover h2{
    opacity: 1;
    color: #333;
}
.dh ul li a img{
    width: 100%;
    border-radius: 5px;
    transition: all ease .5s;
}
.dh ul li a h2{
    opacity: 0;
    transition: all ease .5s;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
}
.fysye{
    position: fixed;
    width: 100%;
    height: 100%;
    right: 0%;
    top: 0%;
}
.fysye span{
    position: absolute;
    right: 3%;
    top: 130px;
    font-size: 24px;
}
.fysye:hover{
}

.lglieb{
    padding: 1.5% 3%;
}
.lglieb ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 1500px;
    overflow: hidden;
    align-content: flex-start;
}
.lglieb ul li{
    margin: 0%;
    width: 14%;
    margin: 2% 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all ease .5s;
}
.lglieb ul li.started {
    opacity: 1;
}

.lglieb ul li {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.lglieb ul li  img{
    width: 100%;
    border-radius: 5px;
}
.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
    filter: Alpha(opacity = 50);
    z-index: 98;
    transition: all 1s;
    display: none;
}
.mask>img {
    position: fixed;
    right: 4%;
    top: 15%;
    width: 60px;
    z-index: 999;
    cursor: pointer;
}
.bigimg {
    width: 600px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;
    z-index: 9999;
    border: 10px solid #fff;
}
.lgliec{
}
.lgliec ul{}
.lgliec ul li{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    background: rgb(0 0 0 / 44%);
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.lgliec ul li.active{
    display: flex;
}
.lgliec ul li img{
    height: 60%;
}
.guanbian img{
    position: fixed;
    width: 100%;
    top: 22%;
    right: 1%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    cursor: pointer;
}
.guanbian.activeb img{
    display: flex;
}
.guanbian img{
    width: 40px;
}
@media (max-width: 1440px){
    
    .grid-item { width: 25%; }
     .lglieb ul li{
         width: 19%;
    }
}

@media (max-width: 1360px){
    
    .grid-item { width: 33.3%; }
     .lglieb ul li{
         width: 27%;
    }
}
@media (max-width: 1080px){
    
    .grid-item { width: 50%; }
    .waterfull ul li {
    float: left;
    width: 330px;
 
}
    .lglieb ul li{
         width: 43%;
    }
}

@media (max-width: 768px){
        .waterfull ul li {
        float: left;
        width: 175px;
    }
    .waterfull {
    margin: 3% auto;
    width: 94% !important;
}
.waterfull ul li .a-img img {
    width: 120px;

}
    .grid-item { width: 50%; }
    .banner img {
    width: auto;
    height: 100vh;
}
.djjr {
   
    font-size: 32px;
 
}
.hred_logo img {
    width: 60px;
}
.hred_nav a {
    font-size: 14px;
    font-weight: 500;
    margin-left: 12px;
    color: #333;
    transition: all ease .8s;
    position: relative;
    padding: 9px 0px;
    display: block;
}


.jgxx {
    background: #666;
    width: 92%;
    padding: 5% 4%;
    color: #999;
    font-size: 13px;
    margin: 0%;
    text-align: center;
    font-size: 12px;
}
.foot {
}
.footr a {
    color: #999;
    padding-left: 0;
    padding-right: 10px;
    font-size: 13px;
}
.footl span {
    font-weight: bold;
    color: #333;
    padding: 0px 6px;
}
.footl {
    color: #666;
    font-size: 12px;
    text-align: center;
    text-align: center;
    width: 100%;
}
.foot {
    bottom: 0%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 3% 0%;
    flex-direction: column;
    text-align: center;
}
.footr{
    display: none;
}
 .nybanner {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
}
.nybanner img {
    width: auto;
    height: 100%;
}
.nybanner .nr h2 {
    margin: 0%;
    color: #fff;
    font-size: 30px;
}
.nybanner .nr p {
    text-align: left;
    color: #fff;
    margin: 0%;
    font-size: 14px;
    font-weight: 100;
    margin-top: 10px;
}
.tdjsa {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 15%;
    padding-bottom: 10%;
    max-width: 94%;
    flex-wrap: wrap;
}
.tdjsal {
    width: 100%;
    margin-bottom: 5%;
}
.tdjsar {
    width: 100%;
    font-size: 14px;
}
.tdjsar p {
    color: #333;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.6;
    margin-bottom: 4%;
}
.tdjsb{
    padding-bottom: 30%;
    
}
.home_list .grid-item .img {
  
    margin: 9.5%;
   
}
.ejfl {
  
    width: 310px;
  
}
.hred_nav .fl:nth-child(4):hover .ejfl {
  
    padding: 18px 15px;
}
.ejfl ul {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}
.ejfl ul li {
    margin: 0%;
    width: 100%;
    padding-left: 0%;
}
.ejfl ul li a {
    font-size: 15px;
    color: #333;
    display: block;
    padding: 0%;
    margin: 0%;
    text-align: left;
    margin-bottom: 3px;
}
.ejfl ul li ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
    .ejfl ul li {
        margin: 0%;
        width: 100%;
        padding-left: 0%;
        margin-bottom: 3%;
    }
.ejfl ul li ul li {
    width: 30%;
    padding: 0%;
    margin-right: 3%;
      margin-bottom: 0%;
}
.xqnrb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4% 4%;
    flex-wrap: wrap;
}
.xqnrbr {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}
.xqnrbr p {
    padding-left: 24px;
    color: #666;
    margin: 0%;
    margin-top: 5%;
}
.xqnrt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55vh;
    margin: 6% 0%;
}
.contan {
    display: flex;
    padding: 5% 3%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    width: 94%;
    flex-wrap: wrap;
}
.contanl {
    height: 100%;
    display: flex;
    justify-content: center;
    margin-left: 0;
    align-items: flex-start;
    margin-top: 0;
    width: 100%;
}
.contanl .ewm img {
    width: 140px;
}
.contanr {
    margin-top: 11%;
}
.contanr h2 {
    font-size: 20px;
    margin-bottom: 0%;
    font-family: "HarmonyOSB";
    FONT-WEIGHT: BOLD;
}
.contanr h6 {
    border-bottom: solid 2px #333;
    margin-bottom: 11%;
    margin-top: 0%;
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 2%;
}
.lxnrl img {
    width: 21px;
    padding: 6px;
}
.lxnrr h3 {
    font-size: 14px;
    font-weight: 500;
    margin-top: 0px;
}
.contanr {
    margin-top: 11%;
    width: 100%;
    margin-bottom: 30%;
}
.lxnr {
    text-align: center;
    width: 100%;
}
.hred_nav{
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    background: #fff;
    left: 0%;
    top: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 999;
    width: 100%;
    border-top: solid 1px #eee;
    transition: all ease .8s;
}
    .active .hred_nav{
    height: 100vh;
    }
    .hred{
        padding: 3% 3%;
        position: relative;
    }
    .hred_nav .fl{
        width: 100%;
        text-align: left;
    }
    .hred_nav .yiji{
        display: flex;
        align-items: flex-start;
    }
    .sjdh{
}
    .sjdh span{
    width: 24px;
    height: 3px;
    display: block;
    background: #000;
    border-radius: 50px;
    margin: 4px 0px;
    border-radius: 50px;
    transition: all ease .8s;
}
    .active .sjdh span:nth-child(1){
        transform: rotate(45deg);
        
    }
     .active .sjdh span:nth-child(2){
        display: none;
    }
     .active .sjdh span:nth-child(3){
        transform: rotate(-45deg);
        margin-top: -7px;
    }
}

.my-map .icon { background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; } .my-map .icon-cir { height: 31px; width: 28px; } .my-map .icon-cir-red { background-position: -11px -5px; }
.pro_xq_top{
    width: 74%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    padding: 3%;
    border-radius: 20px;
}
.pro_xq_topl{
    width: 92%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 0% 4%;
}
.gallery-top{width: 78%;margin: 0%;}
.gallery-top .swiper-slide{
    height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0!important;
}
.gallery-top .swiper-slide.swiper-slide-active{
    opacity: 1!important;
}
.gallery-top .swiper-slide img{
    height: 100%;
    width: auto;
}
.pro_xq_topl img{
}
.gallery-thumbs{
    width: 20%;
    margin: 0%;
}
.gallery-thumbs .swiper-slide{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active{
}
.gallery-thumbs .swiper-slide img{
    width: 100%;
}
.gallery-thumbsl{
    position: absolute;
    left: 10px;
    width: 27px;
    height: 70px;
    top: 10px;
    background: url(../images/leftg.png);
}
.gallery-thumbsr{
    position: absolute;
    right: 10px;
    width: 27px;
    height: 70px;
    background: #000;
    top: 10px;
    background: url(../images/rightg.png);
}
.pro_xq_topr{
    float: right;
    width: 46%;
    margin-top: 40px;
}