/* pop-layer */
#popup {z-index: 9999;}
.pop-layer {position:relative;border:none;right: 0;top: 0;left: auto;z-index: 9999;}
.popWrap {position: absolute;overflow:hidden;right: 30px;top: 100px;z-index: 9999;}
.layer_wrap {overflow:hidden; background-color:#ffffff;}
.layer_wrap .player {float:left;width: 400px; }
.layer_wrap .player img {width:100%;}

.mainPop {position:relative;border:1px solid  #000;box-sizing: border-box;background-color: #000;width:402px; }
.mainPop .popB{overflow:hidden;color:#fff;padding: 0; text-align: center;}
.mainPop .popB label,
.mainPop .popB button{position:relative;text-align: center;background-color: #000;color: #ddd;cursor: pointer;border: 0;line-height: 35px;height: 35px;font-weight: 300;font-size: 13px;}
.mainPop .popB input[type="checkbox"] {transform: translateY(0%);background:#000 url(../images/mainPop/i_chk.png) 0 0 no-repeat;background-size: 15px;width: 15px;height: 15px;border: 0;border-radius: 0;display: inline-block;outline: none;z-index: 10;cursor: pointer;margin: -3px 5px 0 0;-webkit-appearance: none;}
.mainPop .popB input[type="checkbox"]:checked { background-position: 0 -15px }
.mainPop .popB button{width: 30%;background-color: #df2d32;float:right;vertical-align: middle; color:#fff; display: block; position: relative;}
.mainPop .popB button img { margin:-3px 0 0 3px; position:relative; }
.mainPop .popB .fL{width: 70%;text-align: center;}
.mainPop .popB input:focus { outline-color:#df2d32 !important; }
.mainPop .popB button:before{content: "";display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;box-sizing: border-box;border: 2px dashed #000;opacity: 0;z-index: 5;transition: all .3s ease;}
.mainPop .popB button:hover:before,
.mainPop .popB button:focus:before{ opacity:1;}

.pop-layer.main_pop2{display:block;}
.pop-layer.main_pop2 .popWrap {right: inherit;left: 20px;}
.pop-layer.main_pop2 .popWrap .layer_wrap{width:400px;}
.pop-layer.main_pop3{display:block;margin: 0;z-index: 9;}

/* popSwiper */
.popSwiper .dataSegm{position: relative; z-index: 9;background: transparent;border-radius: 0;display: flex;align-items: center;padding: 0 5px 0 0;height: 30px;}
.popSwiper .dataSegm span {display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;line-height:1;}
.popSwiper .dataSegm .current { color: #fff;}
.popSwiper .dataSegm .linkTxt {color: rgba(255,255,255,0.4);}
.popSwiper .dataSegm .all {font-weight:300;color: rgba(255,255,255,0.8);}
.popSwiper .dataCtrl{position: absolute;right: 0;top: 0;background: rgba(0,0,0,0.8);width: auto;height: 30px;display: flex;align-items: center;padding: 0 5px 0 15px;border-radius: 0 0 0 10px;z-index: 1;}
.popSwiper .dataCtrl .ctrlNav{position: relative;}
.popSwiper .dataCtrl .swiper-button-next,
.popSwiper .dataCtrl .swiper-button-prev{position:relative;left:inherit;right:inherit;top:inherit;margin: 0;width: 25px;height: 30px;}
.popSwiper .swiper-button-next:after, .popSwiper .swiper-button-prev:after{display:none;}
.popSwiper .dataCtrl .swiper-button-prev{ background:url(../images/mainPop/btn_prev.png) no-repeat 50% 50%;}
.popSwiper .dataCtrl .swiper-button-next{ background:url(../images/mainPop/btn_next.png) no-repeat 50% 50%;}
.popSwiper .btn-play{width: 25px;height: 30px;font-size:0; background: url('../images/mainPop/btn_stop.png') no-repeat 50% 50%;}
.popSwiper .btn-play.on{background: url('../images/mainPop/btn_play.png') no-repeat 50% 50%;}

@media only screen and (max-width:1080px){
	.pop-layer{z-index: 9998;}
	.pop-layer.main_pop2{z-index: 9998;}
	.popWrap  {top: 70px; right:10px;}	
	.pop-layer.main_pop2 .popWrap{right:inherit; left:10px;}
}
@media only screen and (max-width:768px){
	.pop-layer {position:fixed;width:100%;overflow:auto;right: 0;top:0;bottom:0;background:rgba(0, 0, 0, .5);}
	.popWrap  {position:relative;width:400px;right: 0;left: 0 !important;top:60px;margin:0 auto;}
	.mainPop{background: transparent;border: none;}
	.mainPop .popB{text-align:left;padding: 0 1em;background: #fff;position: relative;} 
	.mainPop .popB button{background-color:transparent;border-left: 1px solid rgba(255,255,255,0.3);color:#111;text-align: right;}
	.mainPop .popB label, .mainPop .popB button{color:#666;background: #fff; font-weight: 400;margin: 0;line-height: 45px;height: 45px;}
	.mainPop .popB input[type="checkbox"]{background: transparent url(../images/mainPop/ico_chk.png) 0 0 no-repeat;background-size: 100%;}
	.mainPop .popB button img,
	.mainPop .popB button:before{display:none;}

}
@media only screen and (max-width:450px){
	.popWrap  {width:100%;padding: 0;top: inherit;bottom: 0;box-sizing: border-box;}
	.layer_wrap{border-radius:25px 25px 0 0}
	.pop-layer.main_pop2 .popWrap .layer_wrap{width:100%;}
	
	.mainPop {width: 100%;position: fixed;bottom: 0;left: 0; }
	.mainPop .popSwiper { border-radius:25px 25px 0 0}
	.mainPop .popSwiper img{width:100%;}
	
	.popSwiper .dataCtrl .swiper-button-next, .popSwiper .dataCtrl .swiper-button-prev,	.popSwiper .btn-play{display:none;}

	.popSwiper .dataCtrl{background: rgba(0,0,0,0.4);border-radius: 15px;right:1em;top:1em;padding: 0 1em;text-align: center;justify-items: center;}
	.popSwiper .dataSegm{ height: auto;color: #fff;padding: 0;justify-items: center;letter-spacing: 0.25em;}
}
@media only screen and (max-width:414px){
	.layer_wrap .player {width: 300px;height: 375px;}
}