.camera_overlayer, .camera_target { position: absolute; bottom: 0; left: 0; right: 0; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 2; } .camera_target_content { position: absolute; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; position: absolute;/*z-index: 2;*/ } .cameraCont, .cameraContents { height: 100%; width: 100%; position: relative; z-index: 1; } .cameraContent { position: absolute; bottom: 0; left: 0; right: 0; top: 0; display: none; width: 100%; z-index: 4; } .cameraSlide { position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%;/*z-index: 999;*/ } .camera_loader { background: url("../images/load2.gif") no-repeat center; height: 32px; width: 32px; left: 50%; top: 50%; overflow: hidden; position: absolute; margin: -16px 0 0 -16px; background-color: #fff; border-radius: 20px; z-index: 3; } .camera_wrap .camera_pag .camera_pag_ul li { margin: 0 8px; width: 14px; height: 14px; border-radius: 10px; cursor: pointer; display: inline-block; border: 3px solid #fff; background-color: rgba(22,22,22,.1); box-sizing: border-box; } .camera_wrap .camera_pag .camera_pag_ul li:hover > span { background-color: #fff; } .camera_wrap .camera_pag .camera_pag_ul li span { position: absolute; top: -2px; left: -2px; width: 12px; height: 12px; text-indent: 30px; overflow: hidden; border-radius: 10px; /*transition: 0.3s;*/ } li.cameracurrent > span { background: #fff; } .camera_bar { position: absolute; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; z-index: 3; } .camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar { height: auto; position: absolute; width: 100%; } .camera_bar_cont { background-color: rgba(22,22,22,.2) !important; } .camera_bar { height: 6px !important; top: 0 !important } .camera_caption { position: absolute; color: #fff; } .camera_caption a { padding: 12px 0; color: #fff; font-size: 16px; font-family: "tt", Arial, "微软雅黑"; text-decoration: none; transition: 0.4s; } .camera_caption > div { background: #000; background: rgba(0, 0, 0, 0.3); transition: 0.4s; } .camera_caption > div:hover { background: rgba(0, 0, 0, 0.6); } .camera_caption a:hover { color: #43c5e9; } .camera_caption { bottom: 0; left: 0; display: block; position: absolute; width: 100%; } .camera_caption > div { padding: 20px 0; text-align: right; } .camera_commands { position: absolute; height: 24px; width: 24px; right: 20px; top: 20px; /*margin-top: -24px;*/ z-index: 3; cursor: pointer; } .camera_play, .camera_stop { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgb(0,0,0); background-color: rgba(22,22,22,.1); border-radius: 30px; border: 2px solid #fff; /*border: 2px solid rgba(255,255,255,.7);*/ transition: 0.3s; box-sizing: border-box; } .camera_stop { background-image: url("../images/btn-stop.png"); } .camera_play { background-image: url("../images/btn-play.png"); } .camera_prev, .camera_next { position: absolute; width: 48px; height: 48px; top: 48%; margin-top: -24px; cursor: pointer; background-color: rgb(0,0,0); background-color: rgba(22,22,22,.1); background-size: 100%; border-radius: 30px; border: 2px solid #fff; z-index: 4; transition: 0.3s; opacity: 1; } .camera_prev { left: 20px; background-image: url("../images/s_btn-prev.png"); } .camera_next { right: 20px; background-image: url("../images/s_btn-next.png"); } .camera_pag { position: absolute; bottom: 23px; width: 100%; box-sizing: border-box; } ul.camera_pag_ul { text-align: center; } .fadeIn.camera_effected { position: absolute; bottom: 50px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; background: rgb(0, 0, 0); background: rgba(0, 0, 0,.4); border-radius: 6px; z-index: 999; text-align: center; } .fadeIn.camera_effected:hover { background: rgba(0, 0, 0,.6); } .fadeIn.camera_effected a { display: block; color: #fff; position: relative; z-index: 999; padding: 0 30px; font-size: 18px; height: 50px; line-height: 48px; transition: 0.2s; } .fadeIn.camera_effected a:after { content: ">>"; position: absolute; top: 1px; font-family: Arial; display: inline-block; opacity: 0; transition: 0.2s; } .camera_overlayer { display: none !important; } @media screen and (min-width: 1024px) { .camera_prev:hover, .camera_next:hover, .camera_play:hover, .camera_stop:hover { background-color: rgba(22,22,22,.6); } .fadeIn.camera_effected a:hover { padding-right: 50px; } .fadeIn.camera_effected a:hover:after { opacity: 1; padding-left: 10px; } } @media screen and (max-width: 960px) { .fadeIn.camera_effected a { padding: 0 10px; font-size: 10px; height: 24px; line-height: 24px; } .camera_prev, .camera_next { zoom: 0.5; } }