@charset "utf-8";
/* CSS Document */

.R-item{border:1px #cdcecd solid; display:inline-block; padding:20px ;border-radius: 3px;}
.quadrilateral{border:#c5c5c5 2px solid; width:20px; height:20px; display: inline-block; margin-right:10px;position: relative;top: 5px; 
line-height: 28px;}
.R-item p{display: inline-block; font-size:16px; color:#333}
.R-item a{color:#fff;}
.H-show .quadrilateral{border: #fff 2px solid;font-size: 28px;line-height: 18px;color: #4a90e2;}
.R-info{width: 380px;height: 550px;box-shadow:0px 0px 5px #CCC;position:absolute;background:#fff;padding:6px; }
.R-info-top{background:#4a90e2; height:100px; width:100%;margin-bottom: 10px; line-height:100px;color:#FFF;padding: 0px 10px;box-sizing: border-box;}
.R-info-top span{ font-size:32px; font-weight:bold}
.R-info-cen{width: 380px;height: 388px;border-bottom:1px solid #CCC;}
.R-info-cen tr td a{ border: #fff solid 1px;display: inline-block; position:relative; width:125px; height:125px; overflow:hidden}
.R-info-cen .on:before{ content:'✔'; width:25px;height:25px; background:#4a90e2; color:#fff;  border-radius: 20px;position:absolute; font-size:22px; line-height: 23px;  top:4px;  right: 4px;}
.R-info-cen .on{border: #4a90e2 solid 1px;-webkit-transform: scale(0.8);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9)}
.R-info-bottom input{padding: 10px 25px;background: #4a90e2;border: none;color: #fff;border-radius: 3px; float:right; margin-top:10px; cursor:pointer}
.R-info-bottom a{ color:#00F;float:left; text-decoration:underline }
.R-info-bottom a:hover{color:#ff7400;}
.anchor-logo-portrait{float:right;margin-left:  100px; position:relative;    top: -5px;    margin-right: 8px;}
.anchor-logo-img{width:32px;height:32px;background:url(robotcode.png) no-repeat;background-size: 65px;}
.anchor-logo-text{cursor: default; font-family: Roboto,helvetica,arial,sans-serif;   font-size: 12px; font-weight: 400; line-height: 10px; margin-top: 5px; text-align: center;  position: absolute; right: -18px;}
.refresh{width: 32px;height:32px;background: url(robotcode.png) no-repeat -31px 0;background-size: 62px;margin: 12px;}
.P-img{background:url(images/payload.jpg) no-repeat;background-size: 380px;}
.P-1{background-position:0 0;}
.P-2{background-position:-128px 0;}
.P-3{background-position:-254px 0;}
.P-4{background-position:0 -128px;}
.P-5{background-position: -128px  -128px;}
.P-6{background-position:-254px  -128px;}
.P-7{background-position:0 -254px;}
.P-8{background-position: -128px  -254px;}
.P-9{background-position:-254px  -254px;}

.vcode-mask {
    position: fixed;
    z-index: 60002;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
    background: #000
}

.vcode-body {
    width: 305px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -152.5px;
    margin-top: -173.5px;
    z-index: 60003;
    overflow-y: auto;
    -webkit-border-radius: 13px;
    -webkit-transform-style: preserve-3d
}
.vcode-close {
    background-image:url(r-close.png);
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 14px;
    right: 14px
}

.mod-vcodes {
    -webkit-transform-style: preserve-3d;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mod-vcode-content {
    padding: 40px 16px 20px;
    text-align: center;
    background: #fff
}

.mod-vcode-content .mod-page-tipInfo-gray {
    font-size: 20px;
    line-height: 24px;
    color: #102233
}

.mod-vcode-content .mod-page-tipInfo-gray1 {
    font-size: 14px;
    line-height: 21px;
    color: #9B9B9B;
    padding-bottom: 4px
}

.mod-vcode-content .mod-page-tipInfo-gray2 {
    font-size: 18px;
    line-height: 24px;
    color: #333;
    font-weight: normal;
}




.vcode-transition {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    transition-timing-function: ease-in
}

.vcode-transition-25 {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    transition-duration: .25s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease
}

.vcode-slide-control {
    position: relative;
    width: 260px;
    height: 50px;
    margin: 0 auto
}

.vcode-slide-bottom {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #f7f7f7
}

.mod-vcodes .borderRadius {
    -webkit-border-radius: 0;
    border-radius: 0
}

.vcode-slide-bottom p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 25px;
    margin-top: -12px;
    margin-left: -75px;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    text-align: center;
    letter-spacing: -.87px;
    color: #b2b2b2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 25px
}

.vcode-slide-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #4b96ea;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.vcode-slide-cover-error {
    background: #ec3f3f
}

.vcode-slide-cover p {
    position: absolute;
    top: 130%;
    left: 50%;
    width: 150px;
    height: 25px;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    text-align: center;
    letter-spacing: -.87px;
    opacity: 0;
    color: #fff;
    margin-left: -75px;
    margin-top: -12px
}

.vcode-slide-cover .coverp-show {
    top: 50%;
    opacity: 1
}

.vcode-slide-cover .coverp-hide {
    top: 130%;
    opacity: 0
}


.vcode-slide-button-focus {
    border: 1px solid #4b96ea;
    background: #4b96ea
}

.vcode-slide-button-error {
    border: 1px solid #ec3f3f;
    background: #ec3f3f
}



.vcode-slide-footer {
    padding-top: 26px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    line-height: 16px;
    color: #b7bcc1;
	text-align:center;
}


.vcode-spin-faceboder {
    position: relative;
    overflow: hidden;
    width: 152px;
    height: 152px;
    margin: 20px auto 25px;
    border: 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%
}

.vcode-spin-img {
	
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.vcode-spin-mask {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #000
}

.vcode-spin-icon {
    position: absolute;
    z-index: 1001;
    top: 50%;
    left: 50%
}



.vcode-spin-icon-success {
    width: 64px;
    height: 44px;
    margin-left: -32px;
    margin-top: -22px;
    background-image:url(r-succ.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.vcode-spin-icon-error {
    width: 52px;
    height: 52px;
    margin-left: -26px;
    margin-top: -26px;
    background-image:url(r-error.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.vcode-spin-control {
    position: relative;
    width: 260px;
    height: 50px;
    margin: 0 auto
}

.vcode-spin-bottom {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #f7f7f7;
    overflow: hidden
}

.vcode-spin-bottom p,.vcode-spin-bottom h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 21px;
    margin-top: 32px;
    opacity: 0;
    margin-left: -88px;
    font-family: PingFangSC-Regular;
    font-size: 15px;
    text-align: center;
    letter-spacing: -.36px;
    color: #4A4A4A;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 21px
}

.vcode-spin-bottom-top p {
    margin-top: -10px;
    opacity: 1
}

.vcode-spin-button {
    position: absolute;
    top: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50px;
    height: 100%;
    border: 1px solid #ddd;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #fff;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0)
}

.vcode-spin-button p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    background-image:url(r-arrownomal.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.vcode-spin-button-focus {
    border: 1px solid #007DFF;
    background: #007DFF
}

.vcode-spin-button-focus p {
    background-image:url(r-arrowhover.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.vcode-spin-button-loading {
    border: 1px solid #ccc;
    background: #ccc
}

.vcode-spin-button-loading p {
    background-image:url(r-arrowhover.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.vcode-spin-button-error {
    border: 1px solid #ec3f3f;
    background: #ec3f3f
}

.vcode-spin-button-error p {
    background-image:url(r-arrowhover.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.hide {display:none;}

@keyframes horizontal {
    0% {
        -webkit-transform: translate(0px,0);
        -moz-transform: translate(0px,0);
        transform: translate(0px,0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate(-1px,0);
        -moz-transform: translate(-1px,0);
        transform: translate(-1px,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate(1px,0);
        -moz-transform: translate(1px,0);
        transform: translate(1px,0)
    }

    100% {
        -webkit-transform: translate(0px,0);
        -moz-transform: translate(0px,0);
        transform: translate(0px,0)
    }
}

.vcode-slidefaceboder-horizontal {
    -webkit-animation: horizontal .6s .2s ease both;
    -moz-animation: horizontal .6s .2s ease both;
    animation: horizontal .6s .2s ease both
}

.vcode-spin-control-horizontal {
    -webkit-animation: horizontal .6s .2s ease both;
    -moz-animation: horizontal .6s .2s ease both;
    animation: horizontal .6s .2s ease both
}

.vcode-slide-faceborder-animate {
    -webkit-animation: scaleface .5s 1;
    -moz-animation: scaleface .5s 1;
    animation: scaleface .5s 1
}

@-webkit-keyframes scaleface {
    0% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }


    50% {
        -webkit-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05)
    }

    100% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@-moz-keyframes scaleface {
    0% {
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.05,1.05);
        -moz-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05)
    }

    100% {
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        transform: scale(1,1)
    }
}