html,body{width: 100%;height: 100%; overflow:hidden; background-color:#000; margin:0rem; padding:0rem;  font-size:0.1rem; }
ul,li,ol,dl,dd,dt,a,img,h1,h2,h3,h4,h5,h6,h7,h8,p,div,option{margin: 0rem;padding: 0rem;list-style: none; font-size:0.1rem; line-height:150%; webkit-backface-visibility: hidden; }
.clearAppr{appearance:none; -moz-appearance:none; -webkit-appearance:none;}
/* 穿透该层 */
.pointEvent{  pointer-events:none; }
.nowarp{word-wrap:normal;word-break:keep-all;white-space:nowrap;} 
*{  -webkit-tap-highlight-color:transparent;  }
.imgbg{display: block; width: 100%; }
 

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
.swiper-container {  width: 100%; height: 100%; transform: translate3d(0,0,0); }
.swiper-slide{transform: translate3d(0,0,0);}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: #dfd4c6;
}
::-moz-placeholder { /* Firefox 19+ */  
    color: #dfd4c6;
}
:-ms-input-placeholder { /* IE 10+ */ 
 color: #dfd4c6;
}
:-moz-placeholder { /* Firefox 18- */ 
 color: #dfd4c6;
}
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-Thin.otf') format('truetype');
    font-weight: 100;
}
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-Light.ttf') format('truetype');
    font-weight: 300;
}
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-Text.otf') format('truetype');
    font-weight: 400;
} 
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-Medium.ttf') format('truetype');
    font-weight: 500;
} 
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-SemiBold.otf') format('truetype');
    font-weight: 700;
} 
@font-face{
    font-family: 'SukhumvitSet';  
    src:url('../fonts/SukhumvitSet-Bold.ttf') format('truetype');
    font-weight: 900;
}

*{font-family: "SukhumvitSet";font-weight: 400;}



#landscapeDiv{width:100%; height:100%; background:#000 url(../images/landscape_tip.png) no-repeat center center; background-size:contain; display:none; position:absolute; z-index:9999; left:0px; top:0px;  }

#mainbody{position:absolute;top:0rem;left:0;width:100%;right:0;bottom:0; overflow:hidden; z-index:2;    } 

.frame{width: 100%; height: 100%; overflow: hidden; border: none; background-color: #000;}
.mainui{width: 100%; height: 100%; pointer-events: none; position: absolute; left:0; top:0; z-index: 100000; display: block;}

/* loading */
.loading{width: 100%; height: 100%; background:#dee6ee url(../images/loading_bg.png) no-repeat;background-size: 100% 100%;  position: absolute; left:0; top:0; z-index: 200; display: block;  }
.loading .content{width: 100%; height: 3.4rem; position: absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%);  text-align: center;}
.loading .content .text{width: 100%;  line-height: 0.75rem; font-size: 0.4rem; font-weight: 400; color: #000000; }
.loading .content .text2{width: 100%; line-height: 0.53rem; font-size:0.36rem;  font-weight:900; color: #000000; word-break: keep-all; white-space:nowrap;    }
.loading .content .progress-box{width: 1.4rem; height: 0.06rem; background-color: #c4c9cd; margin: 0px auto; border-radius: 0.06rem; margin-top: 0.54rem; overflow: hidden; }
.loading .content .progress-box .progress{width: 0%; height: 100%; background-color: #aeb0b2;} 
.loading .content .progress_text{width: 100%; line-height: 0.4rem; text-align: center; font-size:0.3rem; color: #989898;  font-weight:300; margin-top: 0.23rem; }
  
/* 拆按钮 */
.cai{width: 0.94rem; height: 0.94rem;  position: absolute; left:0.4rem; top:50%; background: url(../images/setting.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform: translateY(-50%);display: none; }
.cai:hover,
.cai.active{background: url(../images/setting_on.png) no-repeat center top; background-size: 100% auto;  }

/*  相机按钮 */
.xianji{width: 0.94rem; height: 0.94rem;  position: absolute; right:0.4rem; top:50%; background: url(../images/camera.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform: translateY(-50%);display: none; }
.xianji:hover,
.xianji.active{background: url(../images/camera_on.png) no-repeat center top; background-size: 100% auto;  }

/* 打开盒子按钮 */
.open_box{padding:0 0.3rem; height: 0.75rem;  position: absolute; left:50%; bottom:1.67rem;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform: translateX(-50%);  display: none; color:#7e8893; font-size: 0.36rem; background-color: #cdd4dc; border-radius: 0.75rem; text-align: center; line-height: 0.75rem;  }
.open_box:hover,
.open_box.active{color:#262d36; background-color: #8d9297;   }
 
/* Twitter按钮 */
.twitter{width: 0.69rem; height: 0.69rem;  position: absolute; right:0.34rem; top:0.5rem; background: url(../images/tw.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;   display: none; }
.twitter:hover,
.twitter.active{background: url(../images/tw_on.png) no-repeat center top; background-size: 100% auto;  }

/* Facebok按钮 */
.facebook{width: 0.69rem; height: 0.69rem;  position: absolute; right:0.34rem; top:2.35rem;  top:1.41rem; background: url(../images/face.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  display: none; }
.facebook:hover,
.facebook.active{background: url(../images/face_on.png) no-repeat center top; background-size: 100% auto;  }

/* Ins按钮 */
.ins{width: 0.69rem; height: 0.69rem;  position: absolute; right:0.34rem; top:1.41rem; background: url(../images/ins.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; display: none;  }
.ins:hover,
.ins.active{background: url(../images/ins_on.png) no-repeat center top; background-size: 100% auto;  }

/* 返回按钮 */
.go_back{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;    display: none; z-index: 300; display: none;  }
.go_back:hover,
.go_back.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }

/* 底部按钮 */
.bigbuttons{width: 100%; height: 1.57rem; position: absolute; left:0; bottom: 0; display: flex;flex-direction: row; justify-content: center; display: none;}
.bigbuttons .item{width: 0.94rem; height: 0.94rem; pointer-events: all ; cursor: pointer; margin: 0 0.23rem;  }

.bigbuttons .item0{background: url(../images/pingmu.png) no-repeat center top; background-size: 100% auto; }
.bigbuttons .item0:hover,
.bigbuttons .item0.active{background: url(../images/pingmu_on.png) no-repeat center top; background-size: 100% auto; }

.bigbuttons .item1{background: url(../images/color.png) no-repeat center top; background-size: 100% auto; }
.bigbuttons .item1:hover,
.bigbuttons .item1.active{background: url(../images/color_on.png) no-repeat center top; background-size: 100% auto; }

.bigbuttons .item2{background: url(../images/info.png) no-repeat center top; background-size: 100% auto; }
.bigbuttons .item2:hover,
.bigbuttons .item2.active{background: url(../images/info_on.png) no-repeat center top; background-size: 100% auto; }

.bigbuttons .item3{background: url(../images/buy.png) no-repeat center top; background-size: 100% auto; }
.bigbuttons .item3:hover,
.bigbuttons .item3.active{background: url(../images/buy_on.png) no-repeat center top; background-size: 100% auto; }

/* 颜色选择按钮 */
.colorbox{width: 100%; height: 1.42rem; position: absolute; left:0; bottom: 1rem;  display: none;  }
.colorbox .item{width:1.42rem; height:1.42rem; pointer-events: all ; cursor: pointer;  position: absolute; left:3.04rem; text-align: center; line-height: 0.32rem;color:#262626; font-size: 0.25rem;  box-sizing: border-box; padding-top: 1.0rem; word-break: keep-all; white-space:nowrap;    }
.colorbox .item0{background: url(../images/color_blue.png) no-repeat center top; background-size: 100% auto;  left:1.30rem; }
.colorbox .item0:hover,
.colorbox .item0.active{background: url(../images/color_blue_on.png) no-repeat center top; background-size: 100% auto; color:#fff;  }

.colorbox .item1{background: url(../images/color_black.png) no-repeat center top; background-size: 100% auto;    }
.colorbox .item1:hover,
.colorbox .item1.active{background: url(../images/color_black_on.png) no-repeat center top; background-size: 100% auto;color:#fff; }

.colorbox .item2{background: url(../images/color_gray.png) no-repeat center top; background-size: 100% auto;   left:4.84rem;  }
.colorbox .item2:hover,
.colorbox .item2.active{background: url(../images/color_gray_on.png) no-repeat center top; background-size: 100% auto; color:#fff;}

/* 配置框 */
.peizi{width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: 100;background-size:100% 100%; pointer-events: all; display: none;  }
.peizi .peizi-box{width: 100%; height: 100%; position: absolute; left:0; top:50%; transform:translateY(-50%); background:url(../images/peizi_img.png) no-repeat center center; background-size:100% auto;}
.peizi .peizi-box .content{width: 5.54rem;  height:12.00rem; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); position: absolute;  }
.peizi .peizi-box .content .h1{font-size: 0.62rem; line-height: 0.92rem; color:#000; text-align: center; margin-bottom:0.5rem;} 
.peizi .peizi-box .content .p{font-size: 0.33rem; line-height: 0.48rem; color:#333333; border-bottom:0.01rem solid #b2b1be; text-align: left; padding: 0.3rem 0;   }
.peizi .peizi-box .content .p2{line-height: 0.44rem; padding: 0.3rem 0; }
.peizi .peizi-box .content .icon{width:0.4rem; height: 0.4rem; vertical-align: middle; margin-top: 0.02rem; float: left;}
.peizi .peizi-box .content .text{width:4.98rem; height: auto; float: right;line-height: 0.48rem;font-size: 0.33rem; word-break: keep-all; white-space:nowrap; font-weight: 400; }
.peizi .peizi-box .content .p2 .text{line-height: 0.44rem; }
.peizi .peizi-box .content .p::after{content: ' '; height: 0.01rem; width: 100%; clear: both; display: block;}

/* 相机详情框 */
.camera_box{width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: 200; pointer-events: none; display: none; }
.camera_box .title{width: 100%; height: 0.6rem; position: absolute; left:0; top:5%; font-size: 0.54rem; line-height: 0.6rem; text-align: center; color:#3d3f40; }
.camera_box .flip{position: absolute; left:50%; top:11%; width: 0.97rem; height: 0.98rem; background: url(../images/flip.png) no-repeat center top; background-size: 100% auto;  transform: translateX(-50%); pointer-events: all; }
.camera_box .flip:hover,
.camera_box .flip.active{background: url(../images/flip_on.png) no-repeat center top; background-size: 100% auto; }

/* 相机亮点 */
.camera_box .light{width: 0px; height: 0px; position: absolute; left:0; top:0; pointer-events: none;}
.camera_box .light .text{pointer-events: all;}
.camera_box .light0{width:4.56rem; height: 0px;}
.camera_box .light0 .content{width: 100%; height: 1.23rem; position: absolute;left:0; top:0; }
.camera_box .light0 .content .line{width:1.78rem; height: 1.03rem;   position: absolute; top:-0.02rem; right: 0; background: url(../images/light0_line.png) ; background-size: 100% 100%; }
.camera_box .light0 .content .text{width:2.80rem; position: absolute; left:0; bottom: 0.06rem; font-size: 0.26rem; color: rgba(0,0,0,0.5); line-height:0.30rem; font-weight: 400; }
.camera_box .light0 .content .text.active{font-weight: 700; color: rgba(0,0,0,1); } 

.camera_box .light1{width:4.56rem; height: 0px;}
.camera_box .light1 .content{width: 100%; height: 1.50rem; position: absolute;left:0; top:0; }
.camera_box .light1 .content .line{width:1.78rem; height: 1.33rem;   position: absolute; top:-0.02rem; right: 0; background: url(../images/light1_line.png) ; background-size: 100% 100%; }
.camera_box .light1 .content .text{width:2.80rem; position: absolute; left:0; bottom: 0.0rem; font-size: 0.26rem; color: rgba(0,0,0,0.5); line-height:0.36rem; font-weight: 400; }
.camera_box .light1 .content .text.active,
.camera_box .light1 .content .text:hover{font-weight: 700;  color: rgba(0,0,0,1); } 

.camera_box .light2{width:5.30rem; height: 0px;} 
.camera_box .light2 .content{width: 100%; height: 0.54rem; position: absolute;left:0; bottom:0; }
.camera_box .light2 .content .line{width:2.64rem; height: 0.4rem;   position: absolute; bottom:0rem; right: 0; background: url(../images/light2_line.png) ; background-size: 100% 100%; }
.camera_box .light2 .content .text{width:2.80rem; position: absolute; left:0; top: -0.0rem; font-size: 0.26rem; color: #5d5d5d; opacity: 0.5; line-height:0.36rem; font-weight: 300; }



.camera_box .light3{width:4.90rem; height: 0px;} 
.camera_box .light3 .content{width: 100%; height: 0.9rem; position: absolute;left:0; bottom:0; }
.camera_box .light3 .content .line{width:2.12rem; height: 0.06rem;   position: absolute; bottom:0rem; right: 0; background: url(../images/light3_line.png) ; background-size: 100% 100%; }
.camera_box .light3 .content .text{width:2.80rem; position: absolute; left:0; bottom: -0.12rem; font-size: 0.26rem; color: rgba(0,0,0,0.5); line-height:0.30rem; font-weight: 400; }
.camera_box .light3 .content .text.active,
.camera_box .light3 .content .text:hover{font-weight: 700;  color: rgba(0,0,0,1); }
.camera_box .light3 .content .text .sp-blue{color:#6a6a6a; }
.camera_box .light3 .content .text.active .sp-blue{font-weight: 700;   }
.camera_box .light3 .content .text:hover .sp-blue{font-weight: 700;   }

.camera_box .light4{width:4.12rem; height: 0px;}
.camera_box .light4 .content{width: 100%; height: 0.2rem; position: absolute;left:0; bottom:0; }
.camera_box .light4 .content .line{width:1.74rem; height: 0.06rem;   position: absolute; bottom:-0.04rem; right: 0; background: url(../images/light4_line.png) ; background-size: 100% 100%; }
.camera_box .light4 .content .text{width:2.80rem; position: absolute; left:0; top: 0.06rem; font-size: 0.26rem; color: rgba(0,0,0,0.5); line-height:0.36rem; font-weight: 400; }
.camera_box .light4 .content .text.active,
.camera_box .light4 .content .text:hover{font-weight: 700;  color: rgba(0,0,0,1); }
 
 
/* 相机底部按钮 */
.camera_box .bottom{width: 100%; height:2.42rem; background:rgba(255,255,255,0.8); background-size: 100% 100%; position: absolute;  left:0; bottom:0; pointer-events: all; }
.camera_box .bottom .goleft{width:0.67rem; height: 0.67rem; background: url(../images/camera_goleft.png) no-repeat; background-size: 100% 100%; position: absolute; left:0.17rem; top:0.84rem; z-index:3; display: none; }
.camera_box .bottom .goleft:hover,
.camera_box .bottom .goleft.active{background: url(../images/camera_goleft_on.png) no-repeat; background-size: 100% 100%; }
.camera_box .bottom .goright{width:0.67rem; height: 0.67rem; background: url(../images/camera_goright.png) no-repeat; background-size: 100% 100%; position: absolute; right:0.17rem; top:0.84rem; z-index:3;}
.camera_box .bottom .goright:hover,
.camera_box .bottom .goright.active{background: url(../images/camera_goright_on.png) no-repeat; background-size: 100% 100%; }

.camera_box .bottom .content{width: 5.85rem; height: 1.40rem; position: absolute; left:0.82rem; top:0.55rem; overflow: hidden;  transform:translate3d(0,0,0); }
.camera_box .bottom .content .item-box{ height:1.40rem; display: flex; width: 11.70rem; flex-direction: row; justify-content: flex-start; position: absolute; left:0; top:0; }
.camera_box .bottom .content .item-box .item{width: 1.95rem; height:1.40rem; text-align: center;padding-top: 0.87rem; line-height: 0.4rem; font-size: 0.19rem; color:#232323;}
.camera_box .bottom .content .item-box .row2{line-height: 0.2rem;}
.camera_box .bottom .content .item-box .item.active{ }

.camera_box .bottom .content .item-box .item0{ background: url(../images/camera_icon0.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item0.active,
.camera_box .bottom .content .item-box .item0:hover{}
.camera_box .bottom .content .item-box .item1{ background: url(../images/camera_icon1.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item1.active,
.camera_box .bottom .content .item-box .item1:hover{  }
.camera_box .bottom .content .item-box .item2{ background: url(../images/camera_icon2.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item2.active,
.camera_box .bottom .content .item-box .item2:hover{  }
.camera_box .bottom .content .item-box .item3{ background: url(../images/camera_icon3.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item3.active,
.camera_box .bottom .content .item-box .item3:hover{  }
.camera_box .bottom .content .item-box .item4{ background: url(../images/camera_icon4.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item4.active,
.camera_box .bottom .content .item-box .item4:hover{  }
.camera_box .bottom .content .item-box .item5{ background: url(../images/camera_icon5.png) no-repeat; background-size: 100% auto; }
.camera_box .bottom .content .item-box .item5.active,
.camera_box .bottom .content .item-box .item5:hover{  } 




/* 亮点框 */
.light_box{width: 100%; height: 4.50rem; position: absolute; left:0; bottom:0; z-index: 200; pointer-events: all; display: none; background:url(../images/light_bg.png) no-repeat; background-size: 100% 100%; }
.light_box .close{width: 100%; height: 0.6rem; position: absolute; left:0; top:0; z-index: 3;}
.light_box .content{width: 6.44rem; height:auto; display: none; position: absolute; left:0.53rem; top:0.8rem; }
.light_box .content .h1{font-size: 0.5rem; line-height: 0.50rem; font-weight: 700; color:#262626; text-align: left; padding-bottom:0.24rem; }
.light_box .content .info{font-size: 0.256rem; line-height: 0.36rem; color:#262626;  }
 
/* 相机底部6个icon打开详情框 */
.camera_icon_detail{width: 100%; height: 100%; position: absolute; left:0; bottom:0; z-index: 420; pointer-events: all; display: none;  background:#fff url(../images/peizi_bg.png) no-repeat; background-size:100% 100%;   }
.camera_icon_detail .close{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  z-index: 300;  transform: translate3d(0,0,40px); }
.camera_icon_detail .close:hover,
.camera_icon_detail .close.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }


.camera_icon_detail .content{position: absolute; left:0.0rem; top:0.0rem; right:0.0rem; bottom:0.0rem; overflow-y: auto;}
.camera_icon_detail .content .title{width: 100%; height: 0.74rem; font-size: 0.50rem; color: #252424; font-family: "SukhumvitSet"; font-weight: 700; line-height:0.74rem; padding-top: 1.4rem; padding-bottom: 0.4rem; text-align: center; } 

.camera_icon_detail .content .collapse{width: 100%; padding-bottom: 0.4rem;    }
.camera_icon_detail .content .collapse .item{width: 100%; height: 1.02rem; text-align: center; border-bottom:1px solid #b0b1b9; line-height: 1.02rem; font-size: 0.4rem; color:#252424b3; background-color: rgba(255,255,255,0.5);    }
.camera_icon_detail .content .collapse .item.space-item{height: 0.42rem;}
.camera_icon_detail .content .collapse .item:hover,
.camera_icon_detail .content .collapse .item.active{background-color: #fff;color: #252424;}
.camera_icon_detail .content .collapse .item-content{width: 100%; height:4.40rem; overflow: hidden; height: 0; transform: translate3d(0,0,10px);}
.camera_icon_detail .content .collapse .item-content.open{height: 4.40rem;}

.camera_icon_detail .content .collapse .item-content .swiper-box{width: 7.50rem; height: 4.40rem; position: relative; left:0; top:0; overflow: hidden ;  transform:translate3d(0,0,0); }
.camera_icon_detail .content .collapse .item-content .swiper-box .swiper-container-horizontal>.swiper-pagination-bullets, 
.camera_icon_detail .content .collapse .item-content .swiper-box .swiper-pagination-custom, 
.camera_icon_detail .content .collapse .item-content .swiper-box.swiper-pagination-fraction{bottom:0.23rem; }
.camera_icon_detail .content .collapse .item-content .swiper-box .swiper-pagination-bullet{background-color:#ffffff; opacity: 0.6; }
.camera_icon_detail .content .collapse .item-content .swiper-box .swiper-pagination-bullet-active{background-color:#ffffff; opacity: 1; }
.camera_icon_detail .content .collapse .item-content .swiper-box .img{width: 100%; height: 100%; object-fit: cover;}

.camera_icon_detail .content .collapse .item-content.phone{height: 5.16rem;}
.camera_icon_detail .content .collapse .item-content.phone .swiper-box {height: 5.16rem;}
.camera_icon_detail .content .collapse .item-content.phone .swiper-slide{height: 4.40rem; overflow: hidden;}   

.camera_icon_detail .content .collapse .item-content .video-box{width: 7.50rem; height: 4.40rem; position: relative; left:0; top:0;}
.camera_icon_detail .content .collapse .item-content .video-box .video{width: 7.50rem; height: 4.40rem; background-color: #000; object-fit: cover; display: none; }
.camera_icon_detail .content .collapse .item-content .video-box .img{width: 100%; height: 4.40rem; position: absolute; left:0; top:0; z-index: 2; object-fit: cover; }
.camera_icon_detail .content .collapse .item-content .video-box .play{width: 100%; height: 4.40rem; position: absolute; left:0; top:0; z-index: 3; background: rgba(0,0,0,0.5) url(../images/play.png) no-repeat center center; background-size: 14.6% auto;}

.camera_icon_detail .content .collapse .item-content.max-height{height: 10rem;}
.camera_icon_detail .content .collapse .item-content.max-height .swiper-box{height: 10rem;}
.camera_icon_detail .content .collapse .item-content.max-height .video-box{height:10rem; }
.camera_icon_detail .content .collapse .item-content.max-height .video-box .video{height: 10rem;}
.camera_icon_detail .content .collapse .item-content.max-height .video-box .img{height: 10rem;}
.camera_icon_detail .content .collapse .item-content.max-height .video-box .play{height: 10rem;}

.camera_icon_detail .content.vcenter{top:auto; bottom:auto; height: auto; top:50%; transform: translateY(-50%);}
.camera_icon_detail .content.vcenter .title{padding-top: 0;}


/* 相机亮点框 */
.camera_detail{width: 100%; height: 100%; position: absolute; left:0; bottom:0; z-index: 520; pointer-events: all; display: none;  background:#fff url(../images/peizi_bg.png) no-repeat; background-size:100% 100%;    }
.camera_detail .close{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  z-index: 300;  transform: translate3d(0,0,40px);  }
.camera_detail .close:hover,
.camera_detail .close.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }


.camera_detail .content{position: absolute; left:0.0rem; top:0.0rem; right:0.0rem; bottom:0.0rem; overflow-y: auto;}
.camera_detail .content .title{width: 7.50rem; height: 0.70rem; font-size: 0.45rem; color: #252424; font-family: "SukhumvitSet"; font-weight: 700; line-height:0.70rem; padding-top: 2rem; padding-bottom: 0.4rem; text-align: center;  word-break: keep-all; white-space:nowrap; letter-spacing: -0.01rem;  } 
.camera_detail .content .title.title2{  padding-bottom: 0.4rem;   } 
.camera_detail .content .sub-title{width: 7.50rem; height: 0.64rem; font-size: 0.53rem; color: #252424; font-family: "SukhumvitSet"; font-weight: 300; line-height:0.64rem; padding-top: 0rem; padding-bottom: 0.45rem; text-align: center; word-break: keep-all; white-space:nowrap; letter-spacing: -0.01rem;   } 

.camera_detail .content .collapse{width: 100%; padding-bottom: 0.4rem;    }
.camera_detail .content .collapse .item{width: 100%; height: 1.02rem; text-align: center; border-bottom:1px solid #b0b1b9; line-height: 1.02rem; font-size: 0.4rem; color:#252424; background-color: rgba(255,255,255,0.5);    }
.camera_detail .content .collapse .item.space-item{height: 0.42rem;}

.camera_detail .content .collapse .item:hover,
.camera_detail .content .collapse .item.active{background-color: #fff;}
.camera_detail .content .collapse .item-content{width: 100%; height:4.40rem; overflow: hidden; height: 0; transform: translate3d(0,0,10px);}
.camera_detail .content .collapse .item-content.open{height: 4.40rem;}

.camera_detail .content .collapse .item-content .swiper-box{width: 7.50rem; height: 4.40rem; position: relative; left:0; top:0; overflow: hidden;  transform:translate3d(0,0,0); }
.camera_detail .content .collapse .item-content .swiper-box .swiper-container-horizontal>.swiper-pagination-bullets, 
.camera_detail .content .collapse .item-content .swiper-box .swiper-pagination-custom, 
.camera_detail .content .collapse .item-content .swiper-box.swiper-pagination-fraction{bottom:0.23rem; }
.camera_detail .content .collapse .item-content .swiper-box .swiper-pagination-bullet{background-color:#ffffff; opacity: 0.6; }
.camera_detail .content .collapse .item-content .swiper-box .swiper-pagination-bullet-active{background-color:#ffffff; opacity: 1; }
.camera_detail .content .collapse .item-content .swiper-box .img{width: 100%; height: 100%; object-fit: cover;}

.camera_detail .content .collapse .item-content .video-box{width: 7.50rem; height: 4.40rem; position: relative; left:0; top:0;}
.camera_detail .content .collapse .item-content .video-box .video{width: 7.50rem; height: 4.40rem; background-color: #000; object-fit: cover; display: none; }
.camera_detail .content .collapse .item-content .video-box .img{width: 100%; height: 4.40rem; position: absolute; left:0; top:0; z-index: 2; object-fit: cover; }
.camera_detail .content .collapse .item-content .video-box .play{width: 100%; height: 4.40rem; position: absolute; left:0; top:0; z-index: 3; background: rgba(0,0,0,0.5) url(../images/play.png) no-repeat center center; background-size: 14.6% auto;}
.camera_detail .content .collapse .item-content .circle_tip{width: 1.00rem; height: 1.00rem; position: absolute; z-index: 10; pointer-events: none; background: url(../images/pinmu_circle.png) no-repeat center top; background-size: 100% auto; left:3.36rem; top:1.5rem; transform-origin: center center; }
.camera_detail .content .collapse .item-content .hand_tip{width: 1.20rem; height: 1.20rem; position: absolute;  z-index: 12; pointer-events: none; background: url(../images/pinmu_hand.png) no-repeat center top; background-size: 100% auto; left:3.26rem; top:2.30rem;   }
.camera_detail .content .collapse .item-content .double_mask{width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left:0; top:0; z-index: 8; pointer-events: none;}



.camera_detail .content.vcenter{top:auto; bottom:auto; height: auto; top:50%; transform: translateY(-50%);}
.camera_detail .content.vcenter .title{padding-top: 0;}

/* 屏幕亮点框 */
.screen_detail{width: 100%; height: 100%; position: absolute; left:0; bottom:0; z-index: 620; pointer-events: all; display: none;  background:#fff url(../images/pingmu_bg.jpg) no-repeat; background-size:100% 100%;   }
.screen_detail .close{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  z-index: 300;  transform: translate3d(0,0,40px);  }
.screen_detail .close:hover,
.screen_detail .close.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }
.screen_detail .swiper-box{width: 100%; height: 100%; position: absolute; left:0; top:0; overflow: hidden; transform:translate3d(0,0,10px);  }
.screen_detail .swiper-box .swiper-slide{overflow: hidden; position: relative; left:0; top:0;}
.screen_detail .swiper-box .img{width: 100%; height: auto;}
.screen_detail .swiper-box .video{width: 100%; height: 100%; position: absolute; left:0; top:0; object-fit: cover; display: none;}
.screen_detail .swiper-box .screen_circle{width: 1.30rem; height: 1.30rem; position: absolute; left:50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10; pointer-events: none; background: url(../images/pinmu_circle_black.png) no-repeat center top; background-size: 100% auto; }
.screen_detail .swiper-box .hand{width: 1.60rem; height: 1.60rem; position: absolute; left:50%; top: 50%; transform: translateX(-50%) translateY(0.43rem); z-index: 12; pointer-events: none; background: url(../images/pinmu_hand_black.png) no-repeat center top; background-size: 100% auto;   }
.screen_detail .swiper-box .arrow{width: 0.71rem; height: 0.30rem; position: absolute; left:50%; bottom: 0.4rem; transform: translateX(-40%)  ; z-index: 12; pointer-events: none; background: url(../images/pinmu_arrow.png) no-repeat center top; background-size: 100% auto;   }
.screen_detail .swiper-box .arrow_bg{width: 7.50rem; height: 2.61rem; position: absolute; left:0; bottom: 0rem;   z-index:10; pointer-events: none; background: url(../images/pinmu_arrow_bg.png) no-repeat center top; background-size: 100% auto;   }
.screen_detail .swiper-box .dragtip{width: 1.10rem; height: 3.77rem; position: absolute; right:0.1rem; top:50%; transform: translateY(-50%)  ; z-index: 12; pointer-events: none;    }
.screen_detail .swiper-box .dragtip .dragtip_1{width: 1.10rem; height: 1.10rem;display:block; background: url(../images/pinmu_tip_01.png) no-repeat center top; background-size: 100% auto; transform-origin: center center; }
.screen_detail .swiper-box .dragtip .dragtip_2{width: 1.10rem; height: 1.57rem;display:block; background: url(../images/pinmu_tip_02.png) no-repeat center top; background-size: 100% auto; transform-origin: center center;  }
.screen_detail .swiper-box .dragtip .dragtip_3{width: 1.10rem; height: 1.10rem;display:block; background: url(../images/pinmu_tip_03.png) no-repeat center top; background-size: 100% auto; transform-origin: center center;  }

.screen_detail .swiper-box .news-swiper-box{width: 7.50rem; height: 4.20rem;overflow: hidden;  transform:translate3d(0,0,10px); margin-top: 0.32rem; }
.screen_detail .swiper-box .news-swiper-box .video{width: 7.50rem; height: 4.20rem; background-color: #000; object-fit: cover; display: none; }
.screen_detail .swiper-box .itembox{width:100%; height: auto;position: absolute; left:0; top: 4.52rem; right:0; bottom:0; overflow: hidden;}
.screen_detail .swiper-box .itembox .scroll-box{width: 100%; height: 100%; overflow-y: scroll; position: relative; left:0; top:0;  -webkit-overflow-scrolling: touch; }
.screen_detail .swiper-box .item{width: 7.50rem; padding:0.2rem 0; border-bottom: 0.02rem solid #dfe2e9; background-color: #fff;}
.screen_detail .swiper-box .item .h1{font-size:0.38rem; font-weight: 700; line-height: 0.68rem; color:#252424; padding: 0 0.56rem; padding-top: 0.01rem;}
.screen_detail .swiper-box .item .text{font-size:0.26rem; font-weight: 400; line-height: 0.36rem; color:#252424; padding: 0 0.56rem; word-break:break-all}
.screen_detail .swiper-box .item.active{background-color: #fff;}
.screen_detail .swiper-box .item:last-child{border-bottom: none;}
.screen_detail .screen_play{width:0.32rem; margin-left: 0.3rem; margin-top: -0.05rem; vertical-align: middle; object-fit: cover;}

.screen_detail .close_video{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/close_video.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  z-index: 300;  transform: translate3d(0,0,40px);  display: none; }
.screen_detail .close_video:hover,
.screen_detail .close_video.active{background: url(../images/close_video_on.png) no-repeat center top; background-size: 100% auto;  }
.screen_detail .close_video2{top:0.17rem}

/* 拖动大图片框 */
.drag_box{width: 100%; height: 100%; position: absolute; left:0; bottom:0; z-index: 720; pointer-events: all; display: none;  background:url(../images/peizi_bg.png) no-repeat; background-size:100% 100%;   }
.drag_box .close{width: 0.69rem; height: 0.69rem;  position: absolute; left:0.46rem; top:0.49rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;  z-index: 300;  transform: translate3d(0,0,40px);  }
.drag_box .close:hover,
.drag_box .close.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }
.drag_box .dragable{position: absolute; left:0; top:0; z-index: 3;  width: 100px; height: 100px; }