body,div,ul,li{margin:0;padding:0;font-style:normal;font:16px '新宋体',Arial, Helvetica, sans-serif}
body{max-width:640px; margin:0 auto;position:relative; background-color:#f7f7f7;}
li{list-style:none}
a{color:#555;text-decoration:none;}

*{-webkit-touch-callout:none;  /*系统默认菜单被禁用*/   -webkit-user-select:none; /*webkit浏览器*/   -khtml-user-select:none; /*早期浏览器*/  -moz-user-select:none;/*火狐*/   -ms-user-select:none; /*IE10*/   user-select:none;} 
input, textarea{  -webkit-user-select:auto; /*webkit浏览器*/}

/* 共用css */
.clear {clear:both;}
.tipsClass {position:fixed;bottom:300px; left:23%; padding:3px 2%; background-color:#333; font-size:0.9em; color:#f2f2f2;  z-index:999;  width:50%; max-width:640px; margin:auto; box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4); box-sizing:border-box; border-radius:2px;}

.close, .close-red {width: 18px; height: 18px; cursor: pointer;  position: absolute; overflow: hidden;}
.close:after, .close-red:after { width: 100%; position: absolute; height: 1.5px; content: ""; top: 9px; left: 0; transform: rotate(134deg); -ms-transform: rotate(134deg); -moz-transform: rotate(134deg); -webkit-transform: rotate(134deg); -o-transform: rotate(134deg); }
.close:before, .close-red:before { width: 100%; position: absolute; height: 1.5px; content: ""; top: 9px; right: 0; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg);-webkit-transform: rotate(45deg); -o-transform: rotate(45deg);}

.close {top: 0px; left: 0px; margin: 13px 0 0 12px; }
.close:after, .close:before { background: #888;}

.close-red {top: 5px; right: 3%; z-index:301;}
.close-red:after, .close-red:before  {background: #ff3366;}

.mask { color:#222; position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.2); display:none; z-index:306; }

.check1, .check2{width:18px;height:20px; float:left;}
.check2 {background:url(../../png/check2.png) no-repeat;}
.check1 {background:url(../../png/check1.png) no-repeat;}
.theme{margin:32px 0 15px 0; text-align:center; font-size:1.2em; font-weight:bold; color:#666;}
.back:after { position: absolute; top: 12px; left: 18px; width: 12px; height: 12px; border: #555 solid; border-width: 2px 2px 0 0; content: ' '; -webkit-transform: rotate(-135deg); }


/* 信息确认 */
.win {font-family:roboto; color:#222; position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(100,100,100,0.2); display:none; z-index:308;}

.msg-pro {bottom:280px; left:15%; padding:3px 2%; background-color:#fff;position:fixed; z-index:110;  width:72%; max-width:500px; margin:auto; box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4); box-sizing:border-box; transform-origin: center bottom; transition: all 0.5s; will-change: left, center;  transform:  translateY(-200%); opacity: 0;}

.msg-pro-title{ margin:5px; font-weight:bold; height:23px;}
.msg-pro-text{ margin:5px; margin-bottom:50px; font-size:0.9em; color:#888;}

.msg-pro-btn {display:none; margin-right:10px; border-radius:2px;}
.msg-pro-btn a{float:right; padding:3px 10px; border-radius:2px; font-size:0.8em;}
.msg-pro-btn a:hover{color:#fff; background-color:#ff0000;}
.msg-pro-btn a:nth-child(2) {color:#888; background-color:#f6f6f6; margin:0 20px 8px 0;}
.msg-pro-btn a:nth-child(1) {color:#fff; background-color:#ff8040; margin:0 5px 8px 0;}

/* 可剪切 图片上传 */
.upload-input {display: none;}
.upload-show {position:fixed; top: 0; left: 0; z-index:109; width:100%; max-width:640px; height:100%; background-color:#000; transform-origin: center right; transition: all 0.5s; will-change: left, center;  transform:  translateX(100%); opacity: 0;}
.upload-main {text-align:center; position: relative;}

.upload-img {background-color:#666; opacity: 0.5; position: absolute; left: 0; top: 0;}
.upload-clip {/* 裁剪 */clip: rect(0px, 500px, 500px, 0px); position: absolute; left: 0; top: 0;}

.upload-drag {width: 498px; height: 498px; border: 1px solid white; position: absolute; left: 0; top: 0; cursor: move;}

.upload-bottom {position:fixed; bottom: 0; left: 0; z-index:110; background-color:#fff; width:64%; max-width:640px; padding:10px 18% 12px 18%;}
.upload-cancal {font-weight:bold; border:0; background-color:#fff; color:#339966; float:left;}
.upload-btn {font-weight:bold; border:0; background-color:#fff; color:#339966; float:right;}

.stretch { /*width:8px; height:8px; background-color: white;*/ position: absolute; }
.tl-stretch { cursor: nwse-resize; left: 0; top: 0; transform: translate(-50%, -50%); }
.t-stretch { cursor: ns-resize; width:100%; height:15px; left: 50%; top: 0; transform: translate(-50%, -50%); }
.tr-stretch { cursor: nesw-resize; right: 0; top: 0; transform: translate(50%, -50%); }
.r-stretch { cursor: ew-resize; width:15px; height:100%; right: 0; top: 50%; transform: translate(50%, -50%); }
.br-stretch { cursor: nwse-resize; right: 0; bottom: 0; transform: translate(50%, 50%); }
.b-stretch { cursor: ns-resize;  width:100%; height:15px; left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.bl-stretch { cursor: nesw-resize; left: 0; bottom: 0; transform: translate(-50%, 50%); }
.l-stretch { cursor: ew-resize; width:15px; height:100%; left: 0; top: 50%; transform: translate(-50%, -50%); }

/* 长按弹出 */
.press-mask { color:#666; position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.06); display:none; z-index:308; }
.press-work {position: absolute;  z-index:120; top:0px; left:0px; padding:6px 0; background-color:#fff; color:#777; width:52%; max-height:320px; border-radius:5px; overflow: auto;}
.press-work li {padding: 6px 15px; clear: both; color: #515a6e; white-space: nowrap; list-style: none; cursor: pointer; transition: background .2s ease-in-out;}