@charset "UTF-8";
*{ margin: 0; padding: 0; }
.clearfix { zoom: 1; }
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.fl{ float: left;}
.viewer-container.cxplugin-imgviewer{background-color: rgba(33, 35, 38, 0.9)}
.inlineblock,#imgtoolWrap>*{ display: inline-block; vertical-align: middle;}
.cxplugin-imgviewer .viewer-footer{display: none;}
#imgCloseEdit{ position: fixed; width: 40px; height: 40px; top: 40px; right: 40px; background: url(../images/imgclose.png) center center / 40px 40px no-repeat; cursor: pointer; z-index: 10;}
#imgtoolWrap { display: none;position: fixed;height: 60px; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 0 10px; white-space: nowrap; background: #4D4F51;border-radius: 8px; cursor: default; box-sizing: border-box; user-select:none; z-index: 2022;}
#imgtoolWrap .imgbtn{ position: relative;display: inline-block; vertical-align: middle; padding: 20px 13px; width: 46px; height: 60px; background-size: 20px 20px; background-position: center center; background-repeat: no-repeat; box-sizing: border-box !important; cursor: pointer;}
#imgtoolWrap .imgtext{ display: inline-block; vertical-align: middle;font-size: 14px; color: #FFFFFF; line-height: 20px; padding: 20px 0; box-sizing: border-box;}
#imgtoolWrap .split{ display: inline-block; vertical-align: middle;width: 1px; height: 20px; margin: 20px 3px; background: rgba(0,0,0,0.2);}
#imgtoolWrap #imgPrev{ background-image: url(../images/prev.png); }
#imgtoolWrap #imgPrev.disabled{ background-image: url(../images/prev-disabled.png); }
#imgtoolWrap #imgNext{ background-image: url(../images/next.png); }
#imgtoolWrap #imgNext.disabled{ background-image: url(../images/next-disabled.png); }
#imgtoolWrap #imgZoomOut{ background-image: url(../images/zoomOut.png); }
#imgtoolWrap #imgZoomIn{ background-image: url(../images/zoomIn.png); }
#imgtoolWrap #img1-1{ background-image: url(../images/1-1.png); }
#imgtoolWrap #imgFit{ background-image: url(../images/fit.png); }
#imgtoolWrap #imgDownload{ background-image: url(../images/download.png); }
#imgtoolWrap #imgEdit{ background-image: url(../images/edit.png); }
#imgtoolWrap #imgDrawRect{ background-image: url(../images/rect.png); }
#imgtoolWrap #imgDrawRect.active{ background-image: url(../images/rectBlue.png); }
#imgtoolWrap #imgDrawCircle{ background-image: url(../images/circle.png); }
#imgtoolWrap #imgDrawCircle.active{ background-image: url(../images/circleBlue.png); }
#imgtoolWrap #imgDrawArrow{ background-image: url(../images/drawarrow.png); }
#imgtoolWrap #imgDrawArrow.active{ background-image: url(../images/drawarrowBlue.png); }
#imgtoolWrap #imgDrawLine{ background-image: url(../images/drawline.png); }
#imgtoolWrap #imgDrawLine.active{ background-image: url(../images/drawlineBlue.png); }
#imgtoolWrap #imgDrawMasic{ background-image: url(../images/masic.png); }
#imgtoolWrap #imgDrawMasic.active{ background-image: url(../images/masicBlue.png); }
#imgtoolWrap #imgDrawText{ background-image: url(../images/drawtext.png); }
#imgtoolWrap #imgDrawText.active{ background-image: url(../images/drawtextBlue.png); }
#imgtoolWrap #imgCrop{ background-image: url(../images/crop.png); }
#imgtoolWrap #imgRotate{ background-image: url(../images/rotate.png); }
#imgtoolWrap #imgUndo{ background-image: url(../images/undo.png); }
#imgtoolWrap #imgUndo.disabled{ background-image: url(../images/undo-disabled.png); }
#imgtoolWrap #imgRedo{ background-image: url(../images/redo.png); }
#imgtoolWrap #imgRedo.disabled{ background-image: url(../images/redo-disabled.png); }
#imgtoolWrap #imgCancle{ background-image: url(../images/imgcancle.png); }
#imgtoolWrap #imgApply{ background-image: url(../images/imgApply.png); }
#imgtoolWrap #imgReport{ background-image: url(../images/report.png); }
#imgtoolWrap #imgCancleEdit { display: none; padding: 20px 13px; cursor: pointer}
#imgtoolWrap #imgSure{ display: none; position: relative; cursor: pointer; padding: 20px 13px; }
#imgtoolWrap .surePop{ display: none; position: absolute; bottom: 69px; left: 50%; transform: translateX(-50%); padding: 6px 0; background: #4D4F51; border-radius: 4px; box-sizing: border-box; }
#imgtoolWrap .surePop:after{position: absolute; content: ''; display:block; left:50%; margin-left:-4px; bottom:-10px; width:0px; height:0px; border:solid #4D4F51 5px; border-color:#4D4F51 transparent transparent transparent;}
#imgtoolWrap .surePop p{height: 40px; line-height: 40px; padding: 0 20px; font-size: 14px; color: #FFFFFF;}
#imgtoolWrap .surePop p:hover{background: rgba(0, 0, 0, 0.3); color: #3A8BFF;}
#imgtoolWrap .imgEditBtns{ display: none; }
#imgtoolWrap .bntHoverTips{ position:absolute; display:block; top:-48px; left:50%; width:auto; height:40px; line-height:40px; padding: 0 10px; font-size: 14px; text-align:center; color:#FFF; background:#4D4F51; border-radius:4px;
	transform: translateX(-50%); opacity:0; visibility:hidden; white-space: nowrap; -webkit-transition:opacity 0.3s 1s, visibility 0s 0.3s; transition:opacity 0.3s 1s, visibility 0s 0.3s;box-sizing: border-box; z-index:99; }
#imgtoolWrap .imgbtn:hover .bntHoverTips{ opacity:1; visibility:visible; }
#imgtoolWrap .bntHoverTips i{ display:block; width:0px; height:0px; border:solid #4D4F51 4px; position:absolute; left:50%; margin-left:-4px; top:40px; bottom:auto; border-color:#4D4F51 transparent transparent transparent; }
#imgtoolWrap .bntHoverTips i.active{ bottom:40px; top:auto; border-color:transparent transparent #4D4F51 transparent; }
#imgtoolWrap .imgzoom {display: inline-block; vertical-align: middle;}
#imgtoolWrap .hide{ display: none; }
/*图片编辑*/

#imgtoolWrap.editMode .imgEditBtns , #imgtoolWrap.editMode #imgSure,#imgtoolWrap.editMode #imgCancleEdit{	display: inline-block; }
#imgtoolWrap.editMode #imgEdit , #imgtoolWrap.editMode #imgReport, #imgtoolWrap.editMode .imgzoom,#imgtoolWrap.editMode #img1-1,#imgtoolWrap.editMode #imgFit { display: none; }
#imgtoolWrap.editMode .viewer-close{ display: none; }
#imgtoolWrap #editSubMenu{ display: none; position: absolute;bottom: 69px; height: 60px; white-space: nowrap; background: #4D4F51; border-radius: 4px; z-index: 100;}
#imgtoolWrap #editSubMenu:after{ position: absolute; content: ''; display:block; left:50%; margin-left:-4px; top:60px; bottom:auto; width:0px; height:0px; border:solid #4D4F51 5px; border-color:#4D4F51 transparent transparent transparent; }
#imgtoolWrap .widthList{ display: inline-block; vertical-align: middle; padding-left: 10px; }
#imgtoolWrap .widthList .point{ display: inline-block; vertical-align: middle; background: #C4C4C4; margin: 0 13px; border-radius: 50%; cursor: pointer; }
#imgtoolWrap .widthList .point.active{ background: #0099FF; }
#imgtoolWrap .widthList .point:first-child{ width: 6px; height: 6px; }
#imgtoolWrap .widthList .point:nth-child(2){ width: 9px; height: 9px; }
#imgtoolWrap .widthList .point:nth-child(3){ width: 12px; height: 12px; }
#imgtoolWrap .colorList{ display: inline-block; vertical-align: middle; padding-right: 17px;}
#imgtoolWrap .colorList .color{ display: inline-block; vertical-align: middle; width: 18px; height: 18px; border-radius: 2px; margin: 0 5px; cursor: pointer; }
#imgtoolWrap .colorList .color.active{ background-image: url(../images/checked.png); background-size: 18px 18px; }
#imgtoolWrap .colorList .color:first-child{ background-color: #F33131; }
#imgtoolWrap .colorList .color:nth-child(2){ background-color: #F28C24; }
#imgtoolWrap .colorList .color:nth-child(3){ background-color: #00B368; }
#imgtoolWrap .colorList .color:nth-child(4){ background-color: #3A8BFF; }
#imgtoolWrap .colorList .color:nth-child(5){ background-color: #131B26; }
#imgtoolWrap .colorList .color:nth-child(6){ background-color: #ACB4BF; }
#imgtoolWrap .colorList .color:nth-child(7){ background-color: #FFFFFF; }
#imgtoolWrap .colorList .color:nth-child(7).active { background-image: url(../images/checkedBlue.png); }
#imgtoolWrap .fontWrap{ position: relative; display: inline-block; vertical-align: middle; width: 125px; padding-left: 24px; box-sizing: border-box;}
#imgtoolWrap .fontText{ width: 86px; height: 32px; line-height: 32px; padding: 0 14px; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.2); box-sizing: border-box; border-radius: 4px; cursor: pointer; }
#imgtoolWrap .fontText i{ position: relative; display: inline-block; top: 3px; margin-left: 5px;width: 18px; height: 18px; background: url(../images/arrow.png) center center / 18px 18px no-repeat; transition: all 0.3s; }
#imgtoolWrap .fontText i.down{transform: rotate(180deg);}
#imgtoolWrap .fontList{ display: none; position: absolute; bottom: 50px; left: 50%; margin-left: -43px; width: 86px; height: 268px; padding: 6px 0; background: #4D4F51; border-radius: 4px; box-sizing: border-box; }
#imgtoolWrap .fontList .font{ position: relative; height: 32px; line-height: 32px; padding-left: 16px; font-size: 14px; color: #FFFFFF; cursor: pointer; }
#imgtoolWrap .fontList .font.active:after{ position: absolute; content: ''; width: 18px; height: 100%; right: 10px; background: url(../images/checkedBlue.png) center center / 18px 18px no-repeat;}
#imgtoolWrap.editMode #imgSure.hide,#imgtoolWrap.editMode #imgCancleEdit.hide{ display: none; }

#imageEditContainer{ display: none; position: fixed; top: 0; left: 0; text-align: center; width: 100%; height: 100%; z-index: 2020; }
.tui-image-editor { position: relative; text-align: center; left: 0; top: 50%; transform: translateY(-50%); margin: 0 auto; }
.tui-image-editor-canvas-container {display: inline-block; }

@media only screen and (min-width: 600px) {
	.cxplugin-imgviewer .viewer-close::before{display: none;}
	.cxplugin-imgviewer .viewer-button.viewer-close{ position: fixed; width: 40px; height: 40px; top: 40px; right: 40px; background: url(../images/imgclose.png) center center / 40px 40px no-repeat; cursor: pointer; z-index: 10;}
}
@media only screen and (max-width: 600px) {
	#imgtoolWrap{top: 0; left: 0; width: 0;height: 0; padding: 0; transform: none}
	#imgtoolWrap>*{display: none!important;}
	#imgtoolWrap #imgpage{ position: fixed; display: block!important;}
	#imgtoolWrap #pagenum{ padding: 15px 10px;}
	#imgtoolWrap #pagenum span{padding: 0 3px;}
	#imgtoolWrap #imgPrev{ display: none; position: fixed; left: 0;top: 50%;margin-top: -10px; padding: 0; background-size: 40px auto;}
	#imgtoolWrap #imgNext{ display: none; position: fixed; right: 0;top: 50%;margin-top: -10px; padding: 0; background-size: 40px auto;}
	#imgtoolWrap .split{display: none}
	.viewBtnWrap{width: 0;height: 0; padding: 0;}
	.cxplugin-imgviewer .viewer-button.viewer-close{display: block; background-color: transparent; border-radius: 0 }
	.cxplugin-imgviewer .viewer-close::before{display: block; content: ''; background: url(../images/appimgClose.png) center center / 20px 20px no-repeat; bottom: 5px;left: 5px;}
	#imgtoolWrap .imgbtn:hover .bntHoverTips{display: none}
	.cxplugin-imgviewer.viewer-backdrop, .cxplugin-imgviewer .viewer-backdrop{ background: rgba(0,0,0,0.7) }
	/*显示箭头*/
	#imgtoolWrap.showArrow #imgPrev,#imgtoolWrap.showArrow #imgNext{display: block}
}