@CHARSET "UTF-8";

/*
@keyframes sliderImageVerifingAnimationKey {
 0%   {left:50%;}
 25%  {left:calc(50% - 11px);}
 50%  {left:50%;}
 75%  {left:calc(50% + 11px);}
 100% {left:50%;}
}
*/
@keyframes sliderImageVerifingAnimationKey {
 0%   {margin-left:0px;}
 25%  {margin-left:-11px;}
 50%  {margin-left:0px;}
 75%  {margin-left:11px;}
 100% {margin-left:0px;}
}

.sliderImageVerify {
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
 flex: 1 1 auto;
 overflow: visible;
}
.sliderImageVerify * {
 box-sizing: border-box;
 user-select: none;
}

.sliderImageVerify .sliderImageVerify-sliderBar {
 position: relative;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 flex-wrap: nowrap;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: #f7f9fa;
 color: #45494c;
 border: 1px solid #e4e7eb;
 border-radius: 4px;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-leftSpace {
 position: relative;
 z-index: 1;
 display: inline-block;
 flex: 0 0 auto;
 width: 0;
 height: 100%;
 background: #d1e9fe;
 box-shadow: inset 0px 0px 1px 1px #1991fa;
}

.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block {
 position: relative;
 z-index: 1;
 display: inline-block;
 flex-direction: row;
 flex: 0 0 auto;
 width: 50px;
 height: 100%;
 /*
 justify-content: center;
 align-items: center;
 flex-wrap: nowrap;
 */
 overflow: hidden;
 background: #fff;
 box-shadow: 0 0 3px rgba(0,0,0,.3);
 cursor: pointer;
 transition: background 0.2s linear;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover {
 background: #1991fa;
}
.sliderImageVerify.sliderImageVerifing .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block,
.sliderImageVerify.sliderImageVerifing .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover {
 background: #c0c0c0;
 cursor: not-allowed;
}
.sliderImageVerify.sliderImageVerifiedPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block {
 background: #72fa78;
}
.sliderImageVerify.sliderImageVerifiedPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover {
 background: #72fa78;
 cursor: not-allowed;
}
.sliderImageVerify.sliderImageVerifiedNoPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block {
 background: #ffd478;
}
.sliderImageVerify.sliderImageVerifiedNoPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover {
 background: #ffd478;
 cursor: not-allowed;
}

.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-dragIcon {
 display: inline-block;
 /*flex: 0 0 auto;*/
 width: auto;
 height: auto;
 font-size: 25px;
 color: #7a7575;
 padding: 0 12px;
 position: absolute;
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 transform: translate(-50%, -50%);
 text-align: center;
 vertical-align: middle;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifingIcon {
 display: none;
 /*flex: 0 0 auto;*/
 width: auto;
 height: auto;
 font-size: 12px;
 color: #fff;
 padding: 0 11px;
 position: absolute;
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 transform: translate(-50%, -50%);
 text-align: center;
 vertical-align: middle;
 margin: 0;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifiedPassedIcon {
 display: none;
 /*flex: 0 0 auto;*/
 width: auto;
 height: auto;
 font-size: 24px;
 color: #fff;
 padding: 0 14px;
 position: absolute;
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 transform: translate(-50%, -50%);
 text-align: center;
 vertical-align: middle;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifiedNoPassedIcon {
 display: none;
 /*flex: 0 0 auto;*/
 width: auto;
 height: auto;
 font-size: 25px;
 color: #fff;
 padding: 0 16px;
 position: absolute;
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 transform: translate(-50%, -50%);
 text-align: center;
 vertical-align: middle;
}
.sliderImageVerify.sliderImageVerifing .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-dragIcon,
.sliderImageVerify.sliderImageVerifiedPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-dragIcon,
.sliderImageVerify.sliderImageVerifiedNoPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-dragIcon {
 display: none;
}
.sliderImageVerify.sliderImageVerifing .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifingIcon {
 display: inline-block;
 animation: sliderImageVerifingAnimationKey 1.2s linear infinite;
}
.sliderImageVerify.sliderImageVerifiedPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifiedPassedIcon {
 display: inline-block;
}
.sliderImageVerify.sliderImageVerifiedNoPassed .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block .sliderImageVerify-sliderBar-block-verifiedNoPassedIcon {
 display: inline-block;
}

.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover .sliderImageVerify-sliderBar-block-dragIcon {
 color: #fff;
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover .sliderImageVerify-sliderBar-block-verifiedPassedIcon {
 /* color: #fff; */
}
.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-block:hover .sliderImageVerify-sliderBar-block-verifiedNoPassedIcon {
 /* color: #fff; */
}

.sliderImageVerify .sliderImageVerify-sliderBar .sliderImageVerify-sliderBar-msg {
 display: inline-block;
 position: absolute;
 z-index: 0;
 width: auto;
 height: auto;
 top: 50%;
 left: 50%;
 bottom: auto;
 right: auto;
 transform: translate(-50%, -50%);
 text-align: center;
 vertical-align: middle;
}


.sliderImageVerify .sliderImageVerify-imgPanel {
 position: absolute;
 top: 0;
 bottom: auto;
 left: 0;
 width: 100%;
 height: auto;
 max-height: 0;
 transform: translateY(-100%);
 transition: max-height 0.4s linear;
 overflow: hidden;
 background: #fff;
 display: block;
 opacity: 0;
 visibility: hidden;
}
.sliderImageVerify .sliderImageVerify-imgPanel.sliderImageVerify-imgPanelShow {
 max-height: 1000px;
 border: 0;
 border-bottom: 10px solid transparent;
 top: 10px;
 opacity: 1;
 visibility: visible;
}

.sliderImageVerify .sliderImageVerify-imgPanel .sliderImageVerify-imgPanel-bigimg {
 position: relative;
 z-index: 0;
 left: 0;
 top: 0;
 width: 100%;
 height: auto;
}
.sliderImageVerify .sliderImageVerify-imgPanel .sliderImageVerify-imgPanel-smallimg {
 position: absolute;
 z-index: 1;
 left: 0;
 top: 2px; /* 此处是为了让图片与扣掉那部分的上下误差不要太大 */
 width: auto;
 height: 100%;
}