﻿
/*弹窗显示*/
.winpicker{width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}
.winpicker-hide{visibility:hidden}
.winpicker-pr{position:relative}
.winpicker-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;background:#000;opacity:.7}
.winpicker-active-box{position:absolute;top:50%;left:50%;width:70%;margin-left:-35%;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.winpicker-main{background:#f5f5f5;box-sizing:border-box;position:absolute;bottom:0;left:0;width:100%;z-index:10;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0)}
.winpicker-main.winpicker-bottom{bottom:0}
.winpicker-main.winpicker-modal{-webkit-border-radius:6px;border-radius:6px;width:300px;top:50%;bottom:auto;left:50%;margin-top:-127px;margin-left:-132px}
.winpicker-main.down{transform:translateY(100%);-webkit-transform:translateY(100%)}
.winpicker-header{position:relative;height:50px;line-height:50px;text-align:center;border-bottom:1px solid #666;color:#333;font-size:1.3rem}
.winpicker-footer{border-top:1px solid#ccc;height:40px;position:relative}
.winpicker-content{overflow:hidden;z-index:15;position:relative;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}
.winpicker-list{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;position:relative;overflow:hidden}
.winpicker-content ul{width:100%;text-align:center;position:relative;z-index:20;list-style:none;margin:0;padding:0}
.winpicker-content li{padding-left:3%;padding-right:3%;height:38px;line-height:38px;overflow:hidden;color:#333;font-size:1.4rem;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.winpicker-content li.active{color:#000;-webkit-transform:scale(1.1);transform:scale(1.1);font-weight:700}
.winpicker-content.level-2 ul{width:50%}
.winpicker-cancel,.winpicker-confirm{color:#333;font-size:1.4rem;width:50%;text-align:center;display:inline-block;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;height:40px;line-height:36px}
.winpicker-cancel:active,.winpicker-cancel:hover,.winpicker-confirm:active,.winpicker-confirm:hover{opacity:.8}
.winpicker-confirm{border-right:1px solid#dbdbdb;background:#31b6e7;color:#fff}
.winpicker-input-mask{position:absolute;top:0;left:0;z-index:2}
.winpicker-shadow{position:absolute;top:40px;bottom:42px;left:0;width:100%;z-index:999;background:linear-gradient(#282828 0,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);background:-webkit-gradient(linear,left bottom,left top,from(#282828),color-stop(.52,rgba(40,40,40,0)),color-stop(.48,rgba(40,40,40,0)),to(#282828));background:-moz-linear-gradient(#282828 0,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);background:-o-linear-gradient(#282828 0,rgba(40,40,40,0) 52%,rgba(40,40,40,0) 48%,#282828 100%);background:-webkit-gradient(linear,0 100%,0 0,from(#f5f5f5),color-stop(.48,rgba(245,245,245,0)),color-stop(.52,rgba(245,245,245,0)),to(#f5f5f5));pointer-events:none}
/* Page Layout */
.doc-html, .doc-body { margin: 0; padding: 0; height: 100%; }
.page-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;  box-sizing: content-box; background-color: transparent; background-image: none; background-repeat: repeat; background-position: left top; background-attachment: fixed; }
.page-inner, .page-header, .page-body, .page-footer { position: relative; margin: 0 !important; }
.page-grid{ width:100%;height:100%; background:url(/design/content/images/grid-970.png) repeat;    z-index:0;
}
/* Page Z-index */
.page-inner {z-index: 20000; }
.page-mask { z-index: 30000; }

/* 页面默认宽度 /高度 重置时使用 !important 进行覆盖 */
.page-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.6); }

/* Floatbar */
.floatbar-code {  width:58px; height:48px; background-color:rgba(55,188,155,.8); cursor:pointer;}
.floatbar-code .code-icon { height:58px; line-height:48px; text-align:center; color:rgba(255,255,255,.5); font-size:32px;}

.floatbar-code:hover {}
.floatbar-code:hover .code-icon { background-color:rgba(255,255,255,.1); color:rgba(255,255,255,1);}
