html,body,.page{height: 100%;overflow: hidden;position: relative;-webkit-user-select: none;user-select: none;}
.page{background: url("../images/index/bg.jpg") #fff center /cover no-repeat;}
.page:after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2.87%;background: url("../images/index/footer.png") center bottom /100% 100% no-repeat }

.header{position: absolute;top: 0;left: 0;width: 100%;height:9.351%;background: url("../images/index/header.png") center top /100% 100% no-repeat}
.logo{position: absolute;max-height: 77.2277%;top: 0;bottom:0;left: .78125%;max-width: 99%;margin: auto 0}

.title{position: absolute;top: 13.888%;left: 0;width: 100%;height: 4.722%;background: url("../images/index/title.png") center /contain no-repeat}
.mainImg{position: absolute;top: 27.777%;left: 0;width: 100%;height: 54.72%;background: url("../images/index/mainImg.png") center /contain no-repeat}

.btnWrap{position: absolute;top: 85.648%;left: 50%;width: 64%;margin-left:-32%;height: 9.8148%;}
.btnWrap>a{display:block;cursor: pointer;width: 26.85%;height: 100%;position: absolute;top: 0;z-index: 1}
.btn-1{left: 0;background: url("../images/index/btn-1.png") center /contain no-repeat}
.btn-1:hover{background: url("../images/index/btnH-1.png") center /contain no-repeat}
.btn-2{left: 50%;margin-left: -13.425%;background: url("../images/index/btn-2.png") center /contain no-repeat}
.btn-2:hover{background: url("../images/index/btnH-2.png") center /contain no-repeat}
.btn-3{right: 0;background: url("../images/index/btn-3.png") center /contain no-repeat}
.btn-3:hover{background: url("../images/index/btnH-3.png") center /contain no-repeat}
/* 弹窗 */
.popup-mask{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:12;
  background: rgba(0,0,0,.8);
  display:none
 }
 .popup{
   position:absolute;
   top:0;bottom:0;
   left:0;right:0;
   margin:auto;
   width:45%;
   padding-top:27%;
   height:0;
   background-color: #fff;
 }
 .popup-content{position:absolute;width:100%;height:100%;top:0;left:0;color:#000;}
 .video-box{width:100%!important;height:100%!important;}
 .popup-close{position:absolute;width:.4rem;height:.4rem;right:0;top:0;background-color: #074885;cursor: pointer;z-index:1}
 .popup-close::before,
 .popup-close::after{
   content:'';
   position: absolute;
   width:60%;
   height:2px;
   top:0;bottom:0;
   left:0;right:0;
   margin:auto;
   border-radius: 2px;
   background-color: #fff;
 }
 .popup-close::before{
   transform: rotate(45deg);
 }
 .popup-close::after{
   transform: rotate(-45deg);
 }
 .popup-close:hover::before{
  transform: rotate(-45deg);
  transition: transform .2s;
}
.popup-close:hover::after{
  transform: rotate(45deg);
  transition: transform .2s;
}

/* 可见区域高度大于或等于宽度 */
@media screen and (orientation: portrait) {

}
/* 除portrait值情况外，都是landscape */
@media screen and (orientation: landscape) {

}
/* 屏幕小于1366时 */
@media screen and (max-width:1366px) {

}
/* 屏幕小于768时 */
@media screen and (max-width:768px) {
  .popup{
    width:72%;
    padding-top:41%;
  }
}