@font-face {
	font-family: 'hyxrws';
	src: url('../../../css/fonts/HYXinRenWenSongW.ttf') format('truetype');
}
@font-face {
	font-family: 'hyxlsj';
	src: url('../../../css/fonts/HYXiaoLiShuJ.ttf') format('truetype');
}
*{
  margin: 0;
  padding: 0;
}
p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.line-limit-length{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
  margin-left: 5%;
  text-align: center;
}

.logo{
  position: absolute;
  left: 2vw;
  top: 2vw;
  z-index: 1;
  width: 10vw;
}
.logo a{
  display: block;
  width: 100%;
}
.logo a img{
  width: 100%;
}
.zg-c{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(../images/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
/* 分类 */
.btn-list{
  height: 100%;
  position: absolute;
  display: flex;
  overflow: hidden;
}
.btn-listL{
  left: 0;
}
.btn-listR{
  right: 0;
}
.btn-box{
  position: relative;
  height: 100%;
  width: 3.6vw;
  overflow: hidden;
  background: rgba(191,221,215,.3);

  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.btn-listL .btn-box{
  margin-left: 1vw;

  -moz-animation: pull_boxL .5s linear .4s 1 alternate forwards;
  -webkit-animation: pull_boxL .5s linear .4s 1 alternate forwards;
  -o-animation: pull_boxL .5s linear .4s 1 alternate forwards;
  -ms-animation: pull_boxL .5s linear .4s 1 alternate forwards;
  animation: pull_boxL .5s linear .4s 1 alternate forwards;
}
.btn-listR .btn-box{
  margin-right: 1vw;

  -moz-animation: pull_boxR .5s linear .4s 1 alternate forwards;
  -webkit-animation: pull_boxR .5s linear .4s 1 alternate forwards;
  -o-animation: pull_boxR .5s linear .4s 1 alternate forwards;
  -ms-animation: pull_boxR .5s linear .4s 1 alternate forwards;
  animation: pull_boxR .5s linear .4s 1 alternate forwards;
}
.btnActive{
  width: 9.86vw;
}
@keyframes pull_boxL {
  0% { 
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  100% { 
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
}
@keyframes pull_boxR{
  0% {
      -webkit-transform: translateX(100px);
      -moz-transform: translateX(100px);
      -ms-transform: translateX(100px);
      -o-transform: translateX(100px);
      transform: translateX(100px);
      -webkit-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
  }
  100% {
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px);
      -webkit-opacity: 1;
      -moz-opacity: 1;
      opacity: 1;
  }
}

.btn-box img.btn-img{
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  height: 100%;
}
.btnActive img.btn-img{
  opacity: 1;
}
.btn-box a{
  position: absolute;
  display: block;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 3.6vw;
}
.btn-box a img{
  width: 100%;
}
img.phClassfy{
  display: none;
}

/* 文物列表 */
.zg-cont{
  position: relative;
  width: 52vw;
  height: 100%;
  margin: 0 auto;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
@keyframes list_boxTitle {
  0% { 
    top: 0vw;
  }
  100% { 
    top: 4vw;
  }
}
@keyframes list_box {
  0% { 
    top: 15vw;
  }
  100% { 
    top: 10vw;
  }
}
@keyframes list_boxPage {
  0% { 
    top: 50vw;
  }
  100% { 
    top: 44vw;
  }
}
.zg-title{
  position: absolute;
  width: 20vw;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -moz-animation: list_boxTitle .5s linear .1s 1 alternate forwards;
  -webkit-animation: list_boxTitle .5s linear .1s 1 alternate forwards;
  -o-animation: list_boxTitle .5s linear .1s 1 alternate forwards;
  -ms-animation: list_boxTitle .5s linear .1s 1 alternate forwards;
  animation: list_boxTitle .5s linear .1s 1 alternate forwards;
}
.zg-title img{
  width: 100%;
}
.ww-list{
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  top: 10vw;
  -moz-animation: list_box .5s linear .1s 1 alternate forwards;
  -webkit-animation: list_box .5s linear .1s 1 alternate forwards;
  -o-animation: list_box .5s linear .1s 1 alternate forwards;
  -ms-animation: list_box .5s linear .1s 1 alternate forwards;
  animation: list_box .5s linear .1s 1 alternate forwards;
  /* justify-content: space-between; */
}
.ww-item{
  width: 24%;
  background-color: #447678;
  margin-bottom: 0.5vw;
  margin-right: 0.5vw;
}
.ww-item:nth-child(4n){
  margin-right: 0;
}
.ww-item a{
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  padding-bottom: 0.6vw;
}
.ww-item a .ww-img{
  width: 100%;
  background-color: #1e4649;
  overflow: hidden;
}
.ww-item a .ww-img img{
  width: 100%;
  -webkit-transition: All 1s ease-in-out 0s;
  -moz-transition: All 1s ease-in-out 0s;
  -o-transition: All 1s ease-in-out 0s;
  transition: All 1s ease-in-out 0s;
}
.ww-item a p{
  margin-top: 0.6vw;
  color: #8ff1dd;
  font-size: 1vw;
}
.ww-item a:hover img{
  transform: scale(1.2);
}
.ww-item a:hover{
  text-decoration: none;
  box-shadow: 0px 0px 3px #1e4649;
}

.y-list{
  justify-content: center;
}
.s-list .ww-item{
  width: 48%;
}
.s-list .ww-item a .ww-img img{
  width: 50%;
}


/* 分页 */
.ww-page{
  position: absolute;
  width: 32vw;
  left: calc(50% - 0.5vw);
  transform: translateX(-50%);
  -moz-animation: list_boxPage .5s linear .1s 1 alternate forwards;
  -webkit-animation: list_boxPage .5s linear .1s 1 alternate forwards;
  -o-animation: list_boxPage .5s linear .1s 1 alternate forwards;
  -ms-animation: list_boxPage .5s linear .1s 1 alternate forwards;
  animation: list_boxPage .5s linear .1s 1 alternate forwards;
  display: flex;
  justify-content: space-between;
}
.jb-page{
  display: none;
}
.ll-pageA{
  position: relative;
  display: block;
  width: 15%;
  background-color: #bfddd7;
  border-radius: 5px;
  color: #285457;
  text-align: center;
  line-height: 1.8vw;
  font-size: 1vw;
  cursor: pointer;
}
.ll-pageA:hover{
  background-color: #285457;
  color: #bfddd7;
  text-decoration: none;
}
.ll-pageTotal{
  width: 18%;
  
}
@media screen and (max-width: 2048px){
  .btnActive{
    width: 9.7vw;
  }
}
@media screen and (max-width: 1920px){
  .btn-box,.btn-box a{
    width: 4.6vw;
  }
  .btnActive{
    width: 9.6vw;
  }

  .zg-title{
    width: 20vw;
    margin-bottom: 1vw;
  }

  
}
@media screen and (max-width: 1680px){
  .btnActive{
    width: 9.4vw;
  }

  /* .ww-page{
    width: 23vw;
  }
  .ll-pageA{
    line-height: 2vw;
  } */
}
@media screen and (max-width: 1440px){
  .btnActive{
    width: 9.2vw;
  }
  .ww-page{
    width: 28vw;
  }
}
@media screen and (max-width: 1366px){
  .btn-box,.btn-box a{
    width: 5vw;
  }
  .btnActive{
    width: 8.8vw;
  }

  .zg-cont{
    width: 42vw;
  }
  @keyframes list_boxPage {
    0% { 
      top: 50vw;
    }
    100% { 
      top: 40vw;
    }
  }
  .ww-page{
    width: 30vw;
  }
}
/* @media screen and (max-width: 1180px){
  .logo{
    width: 14vw;
  }

  .zg-c{
    background-size: auto 100%;
  }

  .btnActive{
    width: 13.1vw;
  }

  .zg-cont{
    width: 48vw;
  }
  .zg-title{
    width: 34vw;
    margin-bottom: 3vw;
  }

  .ww-page{
    width: 38vw;
  }
  .ll-pageA{
    line-height: 3vw;
  }

  @keyframes list_boxTitle {
    0% { top: 0vw; }
    100% {  top: 10vw; }
  }
  @keyframes list_box {
    0% { top: 27vw; }
    100% {  top: 20vw; }
  }
  @keyframes list_boxPage {
    0% { top: 63vw; }
    100% {  top: 55vw; }
  }

} */
/* @media screen and (max-width: 1024px){
  .btnActive{
    width: 14.3vw;
  }
} */
@media screen and (max-width: 820px){
  .logo{
    width: 20vw;
  }

  .zg-c{
    background: url(../images/bg2.png) no-repeat center center;
    background-size: 100% auto;
  }
  .btn-list{
    bottom: 0;
    width: 50%;
    height: 115px;
    background: url(../images/phClassfyBg.png) repeat-x left top;
    background-size: auto 100%;
    z-index: 2;
  }
  .btn-listL .btn-box{
    background: none;
    width: 50%;
    margin-left: 0;
  }
  .btn-listR .btn-box{
    background: none;
    width: 50%;
    margin-right: 0;
  }
  .btn-box a{
    width: 100%;
  }
  .btnActive img.btn-img,img.pcClassfy{
    display: none;
  }
  .btn-box a img.phClassfy{
    position: relative;
    display: block;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
  }

  .zg-cont{
    width: 88vw;
  }
  .zg-title{
    width: 34vw;
  }
  .ww-list{
    height: calc(100% - 115px - 85px - 110px);
    overflow-y: scroll;
    justify-content: space-between;
  } 
  .ww-item{
    width: 48%;
    margin-bottom: 4vw;
    margin-right: 0;
  }
  .ww-item a p{
    font-size: 4vw;
    margin: 2vw auto;
  }
  .ww-list .ww-item a .ww-img img{
    width: 100%;
  }

  .ww-page{
    display: none;
  }
  @keyframes list_boxTitle {
    0% { top: 5px; }
    100% {  top: 85px; }
  }
  @keyframes list_box {
    0% { top: 28vw; }
    100% {  top: 21vw; }
  }
  @keyframes list_boxPage {
    0% { top: 100vw; }
    100% {  top: 92vw; }
  }
}
/* @media screen and (max-width: 768px){
  .ww-list{
    height: 94vw;
  }
} */
@media screen and (max-width: 767px){
  .logo{
    width: 36vw;
    left: 4vw;
    top: 4vw;
  }
  
  .zg-c{
    background: url(../images/bg2.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .zg-title{
    width: 40vw;
  }
  .btn-list{
    height: 65px;
  }
  .ww-center{
    position: relative;
    top: 24vw;
    overflow: hidden;
    height: calc(100% - 60px - 65px - 60px);
  }
  .ww-list{
    top: -10vw;
    height: auto;
    max-height: 100%;
    align-items: flex-start;
  }
  @keyframes list_boxTitle {
    0% { top: 0vw; }
    100% {  top: 55px; }
  }
  @keyframes list_box {
    0% { top: 28vw; }
    100% {  top: 0vw; }
  }
  @keyframes list_boxPage {
    0% { top: 174vw; }
    100% {  top: 167vw; }
  }
}
/* @media screen and (max-width: 414px) and (max-height: 715px){
  .ww-list{
    height: 132vw;
  }
}
@media screen and (max-width: 414px) and (max-height: 625px){
  .ww-list{
    height: 110vw;
  }
}
@media screen and (max-width: 414px) and (max-height: 605px){
  .ww-list{
    height: 108vw;
  }
} */