body{font-size: 14px;} 
.inner{ width:1170px;   margin: 0 auto;  }
.pl-inner{ padding-left: calc((100vw - 1170px)/2);}
.pr-inner{ padding-right: calc((100vw - 1170px)/2);}
.ml-inner{ margin-left: calc((100vw - 1170px)/2);}
.mr-inner{ margin-right: calc((100vw - 1170px)/2);}

header{ background: #262626;  }
img{ max-width: 100%;}
.navUl li a{ line-height: 100px; padding: 0 1vw; } 
.navUl li:hover a,.navUl li.on a { background: var(--black); color: #fff;}

.idxAbout .top .item::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; }
.idxAbout .top .item:hover::after{ background: rgba(0, 0, 0, .88); }

.idxPro { background: #f2f2f2;}
.w83{ width: 83%;}
.idxProClass{ background: #91a4c4; width: 200px;}
.idxProClass li.on{ background: #7e92b5;}
.idxProRight{ width: calc(100% - 200px);}
.idxProRight figure{ display: none;}
.idxProRight figure.on{ display: block;}

.idxProList{display: grid; grid-gap: 20px; grid-template-columns: repeat(3,1fr);}
.idxProList li .img{ width: 100%; height: 0; padding-bottom: 140%;}
.w15{ width: 15%;}
.idxProRight .img{ width: 100%; height: 47%;}

.idxSmall{ background: url(../images/dbj_2q08.jpg) no-repeat center center  / cover; background-attachment: fixed;}
.idxSmall li{ margin-top: 60px;}
.idxSmall .img{ width: 120px; margin-top: -60px;}
.idxNew .right a:hover{ background: var(--black);}

.idxBiref{height: 440px; background: url(../images/bj_lyli.jpg) repeat-x ;}

footer .top{ background: #292929;}
footer .bottom{ background: #1d1c1c;}
footer .top .line{ width: 1px;  background: rgba(255, 255, 255, .1);}

footer a:hover{ color: #fff;}
.outLink img{ opacity: .5; margin-left: 10px;}
.outLink img:hover{ opacity: 1;}

.locationForm input{ height: 30px;}
.locationForm input.keys{ width: 280px;}

.subNav a{ height: 40px; margin: 0 4px;}
.subNav a::before{ width: 100%; height: 0; display: block; content: ''; background: var(--blue); position: absolute; left: 0; top: -5px;}
.subNav a.on::before,.subNav a:hover::before{height: 50px; }

/* 

{zzz:navlist sid={zzz:tsid}}
      <a href="[navlist:link]" class="posi pl-50 pr-50 flex-center-center {if:[navlist:sid]= {zzz:sid}} on {end if}"><span class="color-white z5">[navlist:name]</span></a>
{/zzz:navlist}
*/

.proList li{ width: calc((100% - 60px)/4); margin-right: 20px;}
.proList li:nth-child(4n){ margin-right: 0;}
.proList li .img{ width: 100%; height: 0; padding-bottom: 135%;}
.proList li:hover .pic{ background: var(--color);}

#pagesize{display: flex; align-items: center; justify-content: center;}

.newslist li .pic{ padding: 2px; width:190px;}
.newslist li .img{ width: 100%; height: 0; padding-bottom:70%;}
.newslist li:hover .pic{ border-color: var(--color);}

.mapBox{ height: 420px;}
.mapBox img{ max-width: none;}