@media screen and (max-width: 1920px) {
  html {
      font-size: 100px;
  }
}
@media screen and (max-width: 1680px) {
  .ban-list {
     box-sizing: border-box;
  }
	
}
@media screen and (max-width: 1440px) {
  .ban-list {
     box-sizing: border-box;
  }
  #menu a{
    padding: 0 0 0 1.4rem;
  }
  .menu-list {
    position: relative;
    float: right;
    padding-right: 0.45rem;
    padding-left: 0.4rem;
    margin-left: 1rem;
  }
  .hover-bot{
    width: 2.6rem
  }
}
@media screen and (max-width: 1366px) {
  .ban-list {
     box-sizing: border-box;
  }
  .about-txt01{
    padding-top: 0.8rem;
  }
  .about-txt02{
    padding-bottom: 0.8rem;
  }
  .about-txt03{
  }
  .hover-bot{
    width: 2.5rem
  }
}
@media screen and (max-width: 1280px) {
  .ban-list {
    box-sizing: border-box;
  }
  .ban-left{
    width: 1rem;
  }
  .ban-right{
    width: 1rem;
  }
  #menu a{
    padding: 0 0 0 1.2rem;
  }
  .menu-list {
    position: relative;
    float: right;
    padding-right: 0.45rem;
    padding-left: 0.4rem;
    margin-left: 0.8rem;
  }
  .hover-bot{
    width: 2.4rem
  }
  .ban-list img {
    height: 66vh;
  }
}
@media screen and (max-width: 1100px) {
	#menu a {
      padding: 0 0.3rem;
  }
  .ban-left{
    width: 0.9rem;
  }
  .ban-right{
    width: 0.9rem;
  }
  #menu a{
    padding: 0 0 0 1rem;
  }
  .menu-list {
    position: relative;
    float: right;
    padding-right: 0.45rem;
    padding-left: 0.4rem;
    margin-left: 0.6rem;
  }
  .hover-bot{
    width: 2.3rem
  }
  .ban-list img {
    height: 60vh;
  }

}
@media screen and (max-width: 1024px) {
  #menu a {
      padding: 0 0 0 0.4rem;
  }
  .ban-left{
    width: 0.8rem;
  }
  .ban-right{
    width: 0.8rem;
  }
  .menu-list {
    position: relative;
    float: right;
    padding-right: 0.25rem;
    padding-left: 0.1rem;
    margin-left: 0.4rem;
  }
  .hover-bot{
    width: 2rem
  }
  .ban-list img {
    height: 50vh;
  }

}
@media screen and (max-width: 768px) {
  html {
      font-size: 50px;
  }
  #wapimg{
    display: block;
  }
  #pcimg{
    display: none;
  }
  #positionButtonDiv{
     background: #181818
  }
  .posit-btn{
   background: rgba(0,0,0,0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100rem;
   padding: 0.12rem 0.38rem;
   max-width: 120px;
   margin:0 auto;
}
.posit-btn img{
   width: 0.45rem;
   padding: 0 0.2rem;
}
  .zplist{
    width: 100%;
    color: #ffffff;
    box-sizing: border-box;
    flex-direction: row; 
    align-items: flex-end;
    justify-content: space-between;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 10px;
  }
  .zpname-height{
    width: 100%;
  }
  .jjbtn{
     height: auto!important;
  }
  .bntflxe{
     width: 4rem;
  }
  .hgjpc{
     display: none;
  }
  .hgjwap{
     display: flex;
  }
  .zplist{
     width: 100%;
     display: block;
  }
  .dfont01{
     padding-top: 0.1rem;
     font-size: 0.24rem
  }
  .zpjj{
    width: 100%;
    padding-bottom: 0.1rem;
  }
  .down img {
    width: 0.36rem!important;
    height: 0.36rem!important;
    vertical-align: middle;
  }
  .down{
     width: 100%;
     justify-content: space-between;
     align-items: flex-start;
  }
  .bt01 img{
     width: 0.5rem!important;
    height: 0.5rem!important;
  }
  .zpname{
     font-size: 0.30rem;
     line-height: 0.4rem;
     margin-bottom: 0.15rem;
  }
  #pc{
     display: block!important;
     border: 0;
  }
  #wap{
     display: none!important;
  }
  .swiper-button-white{
     display: none!important;
  }
  .ban-na img {
    height: 0.8rem;
  }
  .vjs-playlist .vjs-playlist-title-container{
    padding: 0!important;
  }
  .video-js .vjs-fullscreen-control {
    cursor: url(../images/mouse01.png),pointer;
    margin-top: 1.2em!important;
    position: absolute;
    right: 0;
    flex: none;
}
  .vjs-volume-control{
     opacity: 0!important;
     display: none!important;
  }
  .vjs-playlist .vjs-selected .vjs-playlist-now-playing-text {
      display: block!important;
  }
  .title_top{
     font-size: 0.4rem;
     height: 0.9rem;
     line-height: 0.9rem;
  }
  .video-js .vjs-mute-control {
    cursor: url(../images/mouse01.png),pointer;
    margin-top: 1.25em;
    position: absolute;
    right: 4em!important;
    flex: none;
}
  .video-txt{
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 0.15rem;
    font-size: 0.24rem;
    text-align: justify;
    margin-top: 0.18rem;
  }
  .vjs-playlist-name {
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 0.15rem;
    font-size: 0.24rem;
    text-align: justify;
}
  .vion{
     width: 0.42rem;
  }
  .vdown-font {
    font-size: 0.32rem;
    padding-left: 0.08rem;
}
  .video-js .vjs-big-play-button {
    font-size: 2.4em!important;
  }
  .swi-shard {
    font-size: 0.36rem;
    white-space: nowrap;
  }
  .swiname {
    font-size: 0.32rem;
    width: 100%;
  }

  .vjs-playlist-vertical .vjs-playlist-item{
    margin-bottom: 0!important;
  }
  body{
  	background: #1e1e1e;
  }
  .vjs-playlist-thumbnail{
     position: relative;
  }
  .vjs-playlist-item{
     float: left;
     width: 50%;
     padding: 0.09rem;
     box-sizing: border-box;
  }
 .hover-list{
     display: none;
     padding: 0;
 }
 .menu-list{
     width: 100%;
     margin: 0;
     padding: 0;
 }
 .hover-bot{
    display: block;
    position: static;
    background: none;
    width: 100%;
    padding: 0;
 }
 .hover-bot a{
    padding: 0 0 0 0.4rem!important;
    box-sizing: border-box;
    width: 100%;
 }
 .zpfont01{
     height: 0.38rem;
     line-height: 0.38rem;
     font-size: 0.28rem;
 }
  .lg-toolbar{
      display: flex;
      align-items: center;
      justify-content: center;
      padding:0;
      width: 100%;
  }
  .video_ls{
     width: 100%;
  }
  .video_rs{
     width: 100%;
     padding: 0 0.1rem;
     margin: 0.15rem 0;
  }
  #lg-counter{
     padding-top: 0!important;
     padding-left: 10px;
  }
  .lg-toolbar .lg-icon{
     width: auto;
     padding: 0 10px;
  }
  .one_tb{
     float: left;
     width: 50%;
     padding: 0.1rem;
     box-sizing: border-box;
  }
  .icon-zanting2{
    background: url(../images/playon.png) no-repeat;
    width: 0.6rem;
    height: 0.6rem;
    background-size: 100%;
  }
  .icon-zanting{
    background: url(../images/playon2.png) no-repeat;
    width: 0.6rem;
    height: 0.6rem;
    background-size: 100%;
  }
  .voimg img{
     width: 0.3rem;
  }
  .voicep{
     width: auto;
  }
  .copy-bot{
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0.6rem;
    z-index: 3;
    text-align: center;
  }
  .copy-bot img{
    width: 2.8rem;
  }
  .cd-nav-trigger{
     display: block;
  }
  .pro-anima{
    width: 50%;
  }
  .pro-anima-name{
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 0.15rem;
    font-size: 0.24rem;
    text-align: justify;
  }
  .new-hot {
    position: absolute;
    right: 0.04rem;
    top: 0.05rem;
    z-index: 2;
    font-size: 0.25rem;
    background: #ffa449;
    color: #060606;
    padding: 0.03rem 0.07rem 0; 
    line-height: 0.32rem;
    display: flex;
    align-items: center;
    font-family: "Geometos";
  }
  .ban-list:hover .ban-name{
    top:auto;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
  }
  .pro-im {
      float: left;
      width: 14.285%;
      padding: 0.05rem;
      position: relative;
      box-sizing: border-box;
  }
  .pro-im img{
      border: 0.04rem solid #4c301a;
      width: 100%;
      box-sizing: border-box;
  }

  .ban-na{
  	display: block;
  	top: 2rem;
  }
  .name-2d{
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 0.6rem;
  }
  .name-2d img{
    height: 0.8rem;
  }
  .main{
  	width: 200%;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);
  }
  #menu{
  	 width: 100%;
     display: block;
  }
  #menu li{
     width: 100%;
     display: block;
     padding: 0.1rem 0;
  }
  .menu-fixd{
  	width: 100%;
  	background: #131313;
  	border-bottom: 0;
  	padding: 0.2rem;
    display: block;
  	box-sizing: border-box;
  }
  .menu-left{
  	width: 30%;
    font-size: 0.26rem;
  	border: 1px solid #515151;
  	border-radius: 1000px;
    color: #b2b2b2;
  	height: 0.5rem;
  	line-height: 0.5rem;
  }
  .ban-left{
  	display: none;
  }
  .ban-right{
  	display: none;
  }
  .ban-list{
  	width: 33.3%;
  	padding: 0 5px;
  }
  .ban-list:nth-child(2){
  	 margin-top: 20%;
  }
  .ban-bord img{
  	width: 100%;
  	height: auto;
  }
  .ban-padbg{
  	width: auto;
  	height: auto!important;
  	border:1px solid #646464;
  	transform: translate(0);
  	left: 0.4rem;
  	top: 1.3rem;
  	right: 0.4rem;
  	bottom: 0.4rem;
  }
  .ba01{
  	 margin-top: -2px;
  }
  .ba02{
  	 margin-top: -2px;
  }
  .ba03{
  	 margin-top: -2px;
  }
  .ba01 img{
  	width: 0.22rem;
  }
  .ba02 img{
    width: 0.22rem;
  }
  .ba03 img{
    width: 0.22rem;
  }
  .ban-bot{
  	bottom: 0.6rem;
  }
  .ban-bord{
  	position: relative;
    clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%);
     -webkit-clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%);
  	border: 0;
  	background: #ffffff;
  	display: flex;
  	align-items: center;
  	width: 100%;
  	box-sizing: border-box;
  	padding:1px;
  }
  .ban-flxe{
  	width: 100%;
  	padding-left: 5px;
  	padding-right: 5px;
  	top: 50%;
  	box-sizing: border-box;
  }
  .ban-h1{
  	font-size: 0.32rem;
  }
  .ban-h2{
  	font-size: 0.2rem;
  }
  .ban-name{
    top: auto;
    bottom: 0;
    float: left;
    padding-bottom: 40%;
    padding-top: 10%;
    width: 100%;
  }
  .ban-nav{
    position: static;
    width: 100%;
    top: auto; 
    transform: translateY(0); 
    font-weight: bolder;
    line-height: 0.3rem;
  }
  .ban-iph{
  	clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%);
    -webkit-clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%);
  }
  .about-arrs{
  	display: none;
  }
  .about03{
  	top: 70px;
  }
  .about01{
  	width: 100%;
    background: url(../images/iph-pagebg.png) no-repeat top;
    height: 30%;
    background-size: 100%;
    float: left;
    clear: both;
  }
  .about02 {
    width: 100%;
    background: url(../images/iph-pagebg2.png) no-repeat bottom;
    height: 70%;
    background-size: 100%;
    padding: 0;
    box-sizing: border-box;
    float: left;
    clear: both;
	}
  .about-list {
    padding: 0 0 0 26px;
    background: url(../images/squre.png) no-repeat left center;
    background-size: 20px;
    float: left;
    margin-left: 0.15rem;
    margin-top: 0.86rem;
    text-align: left;
  }
  .about03:after{
  	top: 2rem!important;
  	background: linear-gradient(rgba(0,0,0,0.6) , rgba(0,0,0,0.08));
  }
  .about04{
  	width: 100%;
  	padding: 0.16rem 0.52rem;
  	height: 100%;
  	box-sizing: border-box;
  }
  .ab-h1{
  	font-size: 0.32rem!important;
  }
  .ab-h2{
  	font-size: 0.22rem;
  }
  .about-list01{
  	padding-left: 0.25rem;
  	line-height: 0.4rem!important;
  }
  .about-txt01{
  	font-size: 0.24rem!important;
  	line-height: 0.49rem!important;
  	padding-top: 0.3rem!important;
  }
  .about-txt02{
    font-size: 0.24rem!important;
  	line-height: 0.49rem!important;
  	padding-bottom: 0.3rem!important;
    word-wrap:break-word; 
    word-break:normal;
  }
  .about-txt03{
    font-size: 0.24rem!important;
    line-height: 0.49rem!important;
  }
  .about-bg{
  	background: #1e1e1e;
  }
  .page-mar{
    width: 100%;
    float: left;
    clear: both;
   }
  .abli01{
  	width: 2.2rem;
  }
  .menu-right{
  	height: auto;
    width: 100%;
    position: fixed;
    background: #131313;
  	line-height: auto;
    left: 0;
    right: 0;
    top: 0.9rem;
    padding: 0.3rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    max-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
  }
  #menu li a {
    width: 100%;
    display: block;
    font-size: 0.3rem!important;
    box-sizing: border-box;
  }
  #menu .active a {
      color: #000000;
      background: #ffffff;
  }
  .pro-w{
  	width: 14.28%;
    padding: 0.1rem;
    box-sizing: border-box;
    margin-bottom: 0.12rem;
  }
  .product{
  	background: none;
  }
  .product-bor{
  	background: #131313;
  	border: 1px solid #646464;
  	width: 100%;
  	box-sizing: border-box;
  	float: left;
  	clear: both;
  }
  .pro-time {
    float: left;
    width: 100%;
    font-size: 0.312rem;
    padding: 0.2rem 0.05rem 0.05rem 0.1rem;
    color: #ffffff;
    box-sizing: border-box;
  }
  .pcabbg01{
  	background: #848484;
  	padding:1px;
	  -webkit-clip-path: polygon(100% 0, 100% 9%, 97% 11%, 97% 14%, 100% 16%, 100% 66%, 100% 100%, 7% 100%, 0 96%, 0 0)!important;
	  clip-path: polygon(100% 0, 100% 9%, 97% 11%, 97% 14%, 100% 16%, 100% 66%, 100% 100%, 7% 100%, 0 96%, 0 0)!important;
    top: 1.4rem!important;
    left: 0.4rem!important;
    bottom: 0.4rem!important;
    right: 0.4rem!important;
    position: absolute;
    z-index: 2;
  } 
  .pcabbg02{
    top: 1px!important;
    left: 1px!important;
    bottom: 1px!important;
    right: 1px!important;
    background: url(../images/iphbg.jpg) repeat-y;
    background-size:100%;
    position: absolute;
    z-index: 3;
	-webkit-clip-path: polygon(100% 0, 100% 9%, 97% 11%, 97% 14%, 100% 16%, 100% 66%, 100% 100%, 7% 100%, 0 96%, 0 0)!important;
	clip-path: polygon(100% 0, 100% 9%, 97% 11%, 97% 14%, 100% 16%, 100% 66%, 100% 100%, 7% 100%, 0 96%, 0 0)!important;
  }
  .pcabbg03{
  	display: none;
  }
}
@media screen and (max-width: 320px) {
  .about-list {
      padding: 0 0 0 26px;
      background: url(../images/squre.png) no-repeat left center;
      background-size: 20px;
      float: left;
      margin-left: 0.15rem;
      margin-top: 0.4rem;
      text-align: left;
  }
  .ban-padbg{
      height: auto!important;
  }
  .copy-bot {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0.3rem;
    z-index: 3;
    text-align: center;
  }
  .about-txt01{
    font-size: 0.24rem!important;
    line-height: 0.35rem!important;
    padding-top: 0.3rem!important;
  }
  .about-txt02{
    font-size: 0.24rem!important;
    line-height: 0.35rem!important;
    padding-bottom: 0.3rem!important;
    word-wrap:break-word; 
    word-break:normal;
  }
  .about-txt03{
    font-size: 0.24rem!important;
    line-height: 0.35rem!important;
  }
} 

@media screen and (max-width: 375px) {
  .about-list {
      padding: 0 0 0 26px;
      background: url(../images/squre.png) no-repeat left center;
      background-size: 20px;
      float: left;
      margin-left: 0.15rem;
      margin-top: 0.5rem;
      text-align: left;
  }
  .ban-padbg{
      height: auto!important;
  }
  .copy-bot {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0.3rem;
    z-index: 3;
    text-align: center;
  }
  .about-txt01{
    font-size: 0.24rem!important;
    line-height: 0.38rem!important;
    padding-top: 0.3rem!important;
  }
  .about-txt02{
    font-size: 0.24rem!important;
    line-height: 0.38rem!important;
    padding-bottom: 0.3rem!important;
    word-wrap:break-word; 
    word-break:normal;
  }
  .about-txt03{
    font-size: 0.24rem!important;
    line-height: 0.38rem!important;
  }
  .copy-bot {
    bottom: 0.6rem;
  }
  .ab-h2 {
    font-size: 0.20rem!important;
  }
} 

 

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape){
    .menu-left{
      width: 2.2rem;
    }
    .ban-list {
      width: 1.6rem;
      padding: 0 0.2rem;
  }
  .ban-na {
      display: block;
      top: 0.9rem;
  }
  .ban-na img {
      height: 0.7rem;
  }
  .ban-list:nth-child(2) {
      margin-top: 10%;
  }
  .ban-padbg {
      width: auto;
      height: auto!important;
      border: 1px solid #646464;
      transform: translate(0);
      left: 0.2rem;
      top: 1rem;
      right: 0.2rem;
      bottom: 0.2rem;
  }
  .ban-bot{
     width: 0.12rem;
     margin-left: -0.06rem;
  }
}