#maincontent {position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; hidden;  min-height: 480px; ; }
#maincontent .preview {display: none; position:absolute; top: 0px;  transform: translateX(-50%); left: 50%; width: 100%; height:100%; background: url(../images/main/main.png) no-repeat top center; background-size: cover;cursor: pointer;}
#maincontent .preview::before {content:"";display: none; position: absolute;  top: 0;  left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.35);  z-index: 99;}
#maincontent .preview:after {content:""; display: none; position:absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%); width: 133px; height: 133px; background: url(../images/main/video-btn.png) no-repeat;  z-index: 100;}
#maincontent  .preview i { overflow:hidden; display:block; position:fixed; top:-1000px; left:0; width:1px; height:1px; }  
#maincontent  .videoWrap { width: 100%; height:100%;background: url(../images/main/video-bg2.png) no-repeat top center;background-size: cover; transition: all 0.2s; }
#maincontent  .videoWrap video {position:absolute; top: 30px; top: calc(50% - 0px);  left: 50%;   transform: translate(-50%, -50%);  width: 100%;  }

@media all and (max-width: 1200px){
#maincontent {height: calc(100vh - 139px);}
#maincontent  .preview {transform: translateY(-50%); top: calc(50% + 50px);left: 0;}
#maincontent, #maincontent .videoWrap  {background: url(../images/main/video-bg2.png) no-repeat 76% 39px; background-size: cover;}
#maincontent .videoWrap video  {position: absolute;transform: translateY(-50%); top: calc(50% + 50px); left: 0; min-width: 360px; }

}
@media all and (max-width: 1024px){
#maincontent  .preview:after { width: 100px; height: 100px; background-size: 100px;}
}
@media all and (max-width: 640px){
#maincontent  .preview:after { width: 62px; height: 62px; background-size: 62px;}
}