.pocket-header-item{
    width: 100%;
    height: 1000px;
    background: #000 url(../jpg/pocket-header-4.jpg) no-repeat center center;
    position: relative;
}
.pocket-header-item .logo-desc{color: #fff;position: absolute;top: 500px;width: 1200px;margin: 0 auto;left: calc(50% - 600px);
text-align: center;height: 200px;vertical-align: center;}
.pocket-header-item .logo-desc div{display: inline-block;float: left;width: 50%;text-align: left;}
.pocket-header-item .logo-desc .logo{

}
.pocket-header-item .logo-desc .desc{
    font-size: 48px;font-weight: bold;
    text-align: left;
    padding-left: 15%;
}
.pocket-header-item .product{
    position: absolute;
    top: 120px;
    width: 50%;
    left: 25%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.pocket-header-item .product img{transform: scale(0.9);margin: 0 auto;}
.pocket-header-item .button{
  margin-top: 20px;
}
.pocket-header-item .button a{
  display: block;
  width: 190px;
  height: 50px;
  font-size: 18px;
  border-radius: 25px;
  border:2px solid #fff;
  text-indent: 20px;
  outline: none;
}
.pocket-header-item .button a em{
  width: 140px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  font-style: normal;
  float: left;
  color: #fff;
  font-weight: bold;
}
.pocket-header-item .button a span{
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url('../png/play-icon-10.png') no-repeat center center;
  background-size: cover;
  margin: 6px 0 8px;
  float: left;
}
/*======================================*/
.features-item{
    background: #000;
    color: #fff;
    position: relative;
}
.features-item .container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
    top: -50px;
}
.features-item .container ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    padding: 0 60px 10px;
}
.features-item .container ul li{
    position:relative;
    width: calc(25% - 8px);
    margin-bottom: 50px;
    text-align: center;
}
.features-item .container ul li img{
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.features-item .container ul li span{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    display: block;
    margin-top: 5px;
    text-align: center;
}

/*==============================*/


.small-item{
    background: url('../jpg/small-4.jpg') no-repeat center center;i
    background-size:cover;
}

.small-item .container{width: 1200px;margin: 0 auto;height: 1000px;}
.small-item .container .left,.small-item .container .right,.all-sides-item .container .left,.all-sides-item .container .right{
    width: 50%;display: inline-block;height: 100%;float: left;
}
.small-item .container .left{width: 40%;}
.small-item .container .right{width: 60%;}
.small-item .container .left,.all-sides-item .container .left{background: transparent;}
.small-item .container .right,.all-sides-item .container .right{background: transparent;}
.small-item .container .right .text,.all-sides-item .container .right .text{
    margin-top: 340px;
    text-align: right;
    padding-right: 120px;
}
.small-item .container .right .text h3,.all-sides-item .container .right .text h3{
    font-weight: bold;font-size: 48px;line-height: 60px;
}
.small-item .container .right .text span,.all-sides-item .container .right .text span{
    font-size: 24px;line-height: 40px;
    display: block;margin-top: 12px;
    font-weight: bold;
}
/*===============================================================*/

.all-sides-item{background: #000;max-width: 1920px;}
.all-sides-item .container{width:100%;margin: 0 auto;height: 900px;}
.all-sides-item .container .right{
    color: #fff;
    float: left;
}
.all-sides-item .container .right .text{
    text-align: left;
    padding-right: 300px;
}
/*===================================================*/
.vision-item{
    padding: 40px 0;
    margin:40px auto 0;
    width: 100%;
}
.vision-item .container{
    width: 1200px;margin: 0 auto 20px;
}
.vision-item .container .title{
    font-size: 48px;text-align: center;
    font-weight: bold;
}
.vision-item .container .tips{
    display: block;margin: 20px 0;font-size: 24px;color: #888;text-align: center;font-weight: 500;
}
.vision-item .container .tips span{font-size: 30px;font-weight: bolder;color: #000;}
.vision-item .img{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin:0 auto;
}
.vision-item .img .left{
    width: calc(50% - 250px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 5;
}
.vision-item .img .right{
    width: calc(50% - 250px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 5;
}
.vision-item img.main{width:100%;}
/*==========*/
.stable-item{
    padding: 40px 0;
}
.stable-item .container{
    width: 1200px;margin: 0 auto;
}
.stable-item .container .title{
    font-size: 48px;text-align: center;
    font-weight: bold;
}
.stable-item .container span{
    display: block;margin: 30px 0;font-size: 24px;color: #333;text-align: center;font-weight: bold;
}
.stable-item .container .main{
    width: 100%;
    margin:30px auto;
}
.stable-item .container .main img{
    max-width: 100%;
    margin:0 auto;
}
.stable-item .container .desc{
    text-align: center;
    margin:20px auto;
    font-size: 24px;
    line-height: 40px;
}

/*================================================*/
.metal-item{
    padding: 40px 0 0;
    margin-top: 60px;
    overflow: hidden;
    padding-top: 60px;
}
.radio-item{
    margin: 70px auto 0;
    background:#fff url("../png/radio.png") no-repeat top right;
}
.metal-item .container,.radio-item .container{width: 1200px;margin: 0 auto;height: 600px;}
.radio-item .container{
    height: 1000px;
}
.metal-item .container .left,.metal-item .container .right,.radio-item .container .left,.radio-item .container .right{
    width: 50%;display: inline-block;height: 100%;float: left;
}
.metal-item .container .left,.radio-item .container .left{background: transparent;}
.metal-item .container .right,.radio-item .container .right{background: transparent;}
.metal-item .container .right{position: relative;}
.metal-item .container .right img{
    width: 50%;
    position: absolute;
    bottom: 0;
}
.metal-item .container .left .text,.radio-item .container .left .text{
    margin-top: 240px;
    text-align: left;
}
.radio-item .container .left .text{
    margin-top: 360px;
}
.metal-item .container .left .text h3,.radio-item .container .left .text h3{
    font-weight: bold;font-size: 48px;line-height: 60px;
}
.metal-item .container .left .text span,.radio-item .container .left .text span{
    font-size: 24px;line-height: 40px;
    display: block;margin-top: 20px;
    font-weight: bold;
}
.radio-item .container .left .text .ritem .clear{clear: both;}
.radio-item .container .left .text .ritem{
    font-size: 24px;
    margin: 20px 0;
    font-weight: bold;
}
.radio-item .container .left .text .ritem img{
    display: inline-block;float: left;
    width: 40px;height: 40px;
    margin-top: 4px;
}
.radio-item .container .left .text .ritem p{
    display: inline-block;float: left;
    width: calc(100% - 300px);
    padding-left: 12px;
    vertical-align: top;
}


.break-item{
  margin:0 auto;
  position: relative;
  background: #000;
}
.break-item video{
  width: 100%;
  margin:0 auto;
}
.break-item .title{
  width: 720px;
  height: 220px;
  position: absolute;
  top: 17.8%;
  left: 32.5%;
  color: #fff;
}
.break-item .theme{
  width: 720px;
  position: absolute;
  bottom: 12.6%;
  left: 32.5%;
  color: #fff;
}
.break-item .theme h3{font-size: 48px;line-height: 60px;font-weight: bolder;}
.break-item .theme h3 em{font-weight: normal;font-style: normal;}
.break-item .title span{
  font-size: 20px;margin-top: 20px;
  line-height: 40px;
}
.break-item .mclear{clear: both;}

.joystick-item{position: relative;top: -2px;background: #070707;}
.joystick-item img{
    width: 100%;
    max-width: 1920px;
    margin:0 auto;
}
.joystick-item .title{
    width: 520px;
    position: absolute;
    top: 26.1%;
    right: 20.8%;
    text-align: right;
    color: #fff;
}
.joystick-item .title h3{
    font-size: 48px;
}
.joystick-item .title span{
    font-size: 24px;
    display: block;
    margin-top: 20px;
}
/*==========================================*/
.video-item{
    padding: 40px 0;
}
.video-item .container{
    width: 1200px;
    margin: 0 auto;
}
.video-item .container .main{
    width: 100%;
    border-radius: 10px;
}
.video-item .container .main ul li{
    width: 100%;
    height: 100%;
    display: none;
}
.video-item .container .main ul li.active{
    display: block;
}
.video-item .container .main ul li video{
    width: 100%;
    object-fit: cover;
}
.video-item .container ul.nav{
    width: 1200px;
    margin: 40px auto 20px;
    height: 140px;
    border-bottom: 2px solid #666;
}
.video-item .container ul.nav li{
    width: 20%;
    height: 100%;
    display: inline-block;
    float: left;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
    transition: all 200ms;
}
.video-item .container ul.nav li.active{

    border-bottom: 4px solid #666;
    font-weight: bold;
}
.video-item .container ul.nav li img{
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.video-item .container ul.nav li span{
    display: block;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.video-item .container ul.desc{
    width: 800px;
    margin: 0px auto 20px;
    height: 60px;
}
.video-item .container ul.desc li{
    display: none;
    width: 100%;
    font-size: 20px;
    text-align: center;
}
.video-item .container ul.desc li.active{
    display: block;
}
/*==========================================*/
.app-item{
    padding: 40px 0;
}
.app-item .container{
    width: 1200px;margin: 0 auto;
    overflow: hidden;
}
.app-item .container .title{
    font-size: 48px;
    text-align: center;
    line-height: 60px;
    margin: 20px auto;
    font-weight: bold;
}
.app-item .container .main{margin: 60px auto 20px;text-align: center;}
.app-item .container .main img{
    max-width: 100%;
    margin: 20px auto;

}

/*========================================================================================*/


.wireless-item{padding: 40px 0;margin:20px auto;}
.wireless-item .container{width: 1200px;margin: 0 auto;height:338px;overflow: hidden;}
.wireless-item .container div{
    width: 50%;display: inline-block;float: left;
    height: 100%;
    text-align: center;
    position: relative;
    align-items: center;
    display: -webkit-flex;
    justify-content: center; 
}
.wireless-item .container div .title{
    width: 100%;
    height: 150px;
    font-size: 48px;
    font-weight: bold;
}
.wireless-item .container .right{position: relative;}
.wireless-item .container div video{
    max-width: 100%;
    margin: 0 auto;
    border-radius: 5px;
}
.wireless-item .container .clear{
    clear: both;
}
.wireless-item .container div a,.track-item .container div a{ position: absolute; float: left; 
    border: 25px solid #404040; color: #404040; height: 0; 
    width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%;
     -o-border-radius: 100%; border-radius: 100%;top:50%;margin-top: -25px;left: 50%;margin-left: -25px;}
.wireless-item .container div a span,.track-item .container div a span{ border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -3px;  }

.wireless-item .container div a span.play,.track-item .container div a span.play{ border-color: transparent transparent transparent #fff; 
    border-width: 8px 0 8px 12px;  width: 0; height: 0; }


.track-item{padding: 40px 0;margin:20px auto;}
.track-item .container{width: 1200px;margin: 0 auto;height: 338px;overflow: hidden;}
.track-item .container div{
    width: 50%;display: inline-block;float: left;
    height: 100%;
    text-align: center;
    position: relative;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
.track-item .container .left{position: relative;}
.track-item .container div .title{
    width: 100%;
    height: 150px;
    font-size: 48px;
    font-weight: bold;
}
.track-item .container div video{
    max-width: 100%;
    margin: 0 auto;
    border-radius: 5px;
}
.track-item .container .clear{
    clear: both;
}

.ai-item{padding: 40px 0;margin:20px auto;}
.ai-item .container{width: 1200px;margin: 0 auto;height: 358px;overflow: hidden;}
.ai-item .container .left,.ai-item .container .right{
    width: 50%;display: inline-block;float: left;
    height: 100%;
    position: relative;

}
.ai-item .container .right{
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    text-align: center;
}
.ai-item .container .left span.tips{
    display: block;height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #999;
}
.ai-item .container div .title{
    width: 100%;
    height: 150px;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
}
.ai-item .container div img{

}
.ai-item .container .left .mcontent{
    width: 600px;
    margin-left: auto; 
    margin-right: auto;
}
.ai-item .container .left .beer-slider{display: inline-block;position: relative;overflow: hidden;}
.ai-item .container .left .beer-slider img{
    width: 100%;
}
.ai-item .container .clear{
    clear: both;
}
.download-item{padding: 40px 0;margin:20px auto;}
.download-item .container{width: 1200px;margin: 0 auto;height: 338px;overflow: hidden;}
.download-item .container div{
    width: 50%;display: inline-block;float: left;
    height: 100%;
    text-align: center;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
.download-item .container .left{position: relative;}
.download-item .container div .title{
    width: 100%;
    height: 150px;
    font-size: 48px;
    font-weight: bold;
}
.download-item .container div img{
    max-width: 100%;
    margin: 0 auto;
}
.download-item .container .clear{
    clear: both;
}


.rod-item{
    padding: 40px 0;
}
.rod-item .container{
    width: 1200px;
    margin:0 auto;
}
.rod-item .container .title{
    margin:20px 0;
    text-align: center;
}
.rod-item .container .title h3{
    font-size: 48px;
    line-height: 60px;
}
.rod-item .container .title span{
    font-size: 24px;font-weight: bold;line-height: 40px;margin: 30px 0;display: block;
}
.rod-item .container .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    font-weight: bold;
}
.rod-item .container .content .mleft{
    width: 34%;
    background: #E8CCC1;
    border-radius: 15px;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    padding: 38px 0;
    position: relative;
}
.rod-item .container .content .mleft img{
    max-width: 60%;
}
.rod-item .container .content .mleft span{
    width: 100%;
    display: block;
    height: 100px;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-size: 20px;
    line-height: 100px;
}
.rod-item .container .content .mright{
    width: calc(66% - 20px);

}
.rod-item .container .content .mright ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 100%;
}
.rod-item .container .content .mright ul li{
    position: relative;
    border-radius: 15px;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    padding: 82px 0;
}
.rod-item .container .content .mright ul li:nth-of-type(1),
.rod-item .container .content .mright ul li:nth-of-type(2){
    margin-bottom: 20px;
}
.rod-item .container .content .mright ul li span{
    width: 100%;
    display: block;
    position: absolute;
    height: 100px;
    bottom: 0;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
}
.rod-item .container .content .mright ul li.left{
    width: 40%;
}
.rod-item .container .content .mright ul li.right{
    width: calc(60% - 20px);
}
.rod-item .container .content .mright .m-1{
    background: #F6ECC9;
}
.rod-item .container .content .mright .m-2{
    background: #CDECDA;
}
.rod-item .container .content .mright .m-3{
    background: #BFD7F1;
}
.rod-item .container .content .mright .m-4{
    background: #B9EBEA;
}
/*==========================================*/
.popup-item{width: 100%;height: 100%;display: none;position: relative;}
.popup-item .shadow{
    width: 100%;
    height: 100%;
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    overflow: hidden;
}
.popup-item .window{
    z-index: 10002;
    width: 1200px;
    height: 676px;position: fixed;
    margin-left: -600px;
    left: 50%;
    top: 50%;
    margin-top: -337px;
}
.popup-item .window video{
    max-width: 100%;
    margin:0 auto;
}
.popup-item .center{
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
.popup-item span{
    width: 40px;
    height: 40px;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    z-index: 10002;
}