/*!
 * HopeUI version 1.0.0
 * Author Evan.G
 * For more information, please visit https://github.com/seazeg/hopeUI
 * HopeUI is available under the terms of the MIT license.
 */

img {
    display: inline-block;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: inherit;
}

a:active, a:hover {
    outline: 0;
}

img {
    border: none;
}

li {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h4, h5, h6 {
    font-size: 100%;
}

button, input, optgroup, option, select, textarea {
    outline: 0;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

b, i {
    font-style: normal;
}

body {
    font: 14px Microsoft YaHei,Arial;
}

hr {
    height: 1px;
    margin: 10px 0;
    border: 0;
    clear: both;
}

a {
    color: #333;
    text-decoration: none;
}

    a:hover {
        color: #777;
    }

input::-webkit-input-placeholder {
    color: #555;
}

input:-moz-placeholder, input::-moz-placeholder {
    color: #555;
}

input:-ms-input-placeholder {
    color: #555;
}

.hopeui-show {
    display: block!important;
}

.hopeui-hide {
    display: none!important;
}

.hopeui-noUserSelect {
    user-select: none;
}

.hopeui-relative {
    position: relative;
}

.hopeui-opacity-low {
    opacity: 0;
}

.hopeui-opacity-high {
    opacity: 1;
}

.hopeui-control {
    position: relative;
    display: inline;
}

.hopeui-edge {
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px dashed transparent;
}

.hopeui-placeholder {
    color: #555;
    top: 0;
    left: 0;
    position: absolute;
    line-height: 38px;
    padding-left: 10px;
    width: 100%;
    height: 100%;
}

.hopeui-anim {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .hopeui-anim.hopeui-icon {
        display: inline-block;
    }

.hopeui-anim-loop {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.hopeui-trans, .hopeui-trans a {
    transition: all .3s;
    -webkit-transition: all .3s;
}

@-webkit-keyframes hopeui-rotate {
    0% {
        -webkit-transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(1turn);
    }
}

@keyframes hopeui-rotate {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(1turn);
    }
}

.hopeui-anim-rotate {
    -webkit-animation-name: hopeui-rotate;
    animation-name: hopeui-rotate;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes hopeui-up {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-up {
    0% {
        transform: translate3d(0,100%,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-up {
    -webkit-animation-name: hopeui-up;
    animation-name: hopeui-up;
}

@-webkit-keyframes hopeui-down {
    0% {
        -webkit-transform: translate3d(0,-100%,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-down {
    0% {
        transform: translate3d(0,-100%,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-down {
    -webkit-animation-name: hopeui-down;
    animation-name: hopeui-down;
}

@-webkit-keyframes hopeui-upbit {
    0% {
        -webkit-transform: translate3d(0,30px,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-upbit {
    0% {
        transform: translate3d(0,30px,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-upbit {
    -webkit-animation-name: hopeui-upbit;
    animation-name: hopeui-upbit;
}

@-webkit-keyframes hopeui-downbit {
    0% {
        -webkit-transform: translate3d(0,-30px,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-downbit {
    0% {
        transform: translate3d(0,-30px,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-downbit {
    -webkit-animation-name: hopeui-downbit;
    animation-name: hopeui-downbit;
}

@-webkit-keyframes hopeui-left {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-left {
    0% {
        transform: translate3d(100%,0,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-left {
    -webkit-animation-name: hopeui-left;
    animation-name: hopeui-left;
}

@-webkit-keyframes hopeui-leftbit {
    0% {
        -webkit-transform: translate3d(30px,0,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-leftbit {
    0% {
        transform: translate3d(30px,0,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-leftbit {
    -webkit-animation-name: hopeui-leftbit;
    animation-name: hopeui-leftbit;
}

@-webkit-keyframes hopeui-right {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-right {
    0% {
        transform: translate3d(-100%,0,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-right {
    -webkit-animation-name: hopeui-right;
    animation-name: hopeui-right;
}

@-webkit-keyframes hopeui-rightbit {
    0% {
        -webkit-transform: translate3d(-30px,0,0);
        opacity: .3;
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes hopeui-rightbit {
    0% {
        transform: translate3d(-30px,0,0);
        opacity: .3;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

.hopeui-anim-rightbit {
    -webkit-animation-name: hopeui-rightbit;
    animation-name: hopeui-rightbit;
}

@-webkit-keyframes hopeui-scale {
    0% {
        opacity: .3;
        -webkit-transform: scale(.5);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes hopeui-scale {
    0% {
        opacity: .3;
        -ms-transform: scale(.5);
        transform: scale(.5);
    }

    to {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.hopeui-anim-scale {
    -webkit-animation-name: hopeui-scale;
    animation-name: hopeui-scale;
}

@-webkit-keyframes hopeui-scale-spring {
    0% {
        opacity: .5;
        -webkit-transform: scale(.5);
    }

    80% {
        opacity: .8;
        -webkit-transform: scale(1.1);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes hopeui-scale-spring {
    0% {
        opacity: .5;
        transform: scale(.5);
    }

    80% {
        opacity: .8;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hopeui-anim-scaleSpring {
    -webkit-animation-name: hopeui-scale-spring;
    animation-name: hopeui-scale-spring;
}

@-webkit-keyframes hopeui-fadein {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hopeui-fadein {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hopeui-anim-fadein {
    -webkit-animation-name: hopeui-fadein;
    animation-name: hopeui-fadein;
}

@-webkit-keyframes hopeui-fadeout {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes hopeui-fadeout {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.hopeui-anim-fadeout {
    -webkit-animation-name: hopeui-fadeout;
    animation-name: hopeui-fadeout;
}

.hopeui-form .hopeui-form-item {
    margin-bottom: 15px;
    clear: both;
}

    .hopeui-form .hopeui-form-item .hopeui-form-error {
        border-color: #f56c6c!important;
    }

    .hopeui-form .hopeui-form-item .hopeui-form-error-prompt {
        color: #f56c6c!important;
        font-size: 12px;
        padding: 10px 10px 0 0;
        display: block;
    }

        .hopeui-form .hopeui-form-item .hopeui-form-error-prompt i {
            vertical-align: middle;
        }

.hopeui-form .hopeui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    min-width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    font-size: 14px;
    color: #333;
}

.hopeui-form .hopeui-input-block {
    margin-left: 110px;
    min-height: 36px;
    display: block;
}

.hopeui-form .hopeui-input-inline {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.hopeui-form .hopeui-form-radio {
    margin-top: 8px;
}

.hopeui-form .hopeui-form-checkbox {
    margin-top: 10px;
}

.hopeui-input {
    display: block;
    width: 100%;
    padding: 0 10px;
    height: 38px;
    line-height: 1.3;
    line-height: 38px\0;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    outline: 0;
    -webkit-appearance: none;
    transition: all .3s;
    -webkit-transition: all .3s;
    box-sizing: border-box;
    font-size: 14px;
    color: #111;
}

    .hopeui-input:focus {
        border-color: #c9c9c9;
    }

    .hopeui-input:hover {
        border-color: #d2d2d2;
    }

.hopeui-input-content-right {
    position: absolute;
    top: 0;
    right: 0;
}

.hopeui-input-content-left {
    position: absolute;
    top: 0;
    left: 0;
}

.hopeui-form-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .hopeui-form-select .hopeui-input {
        padding: 0 25px 0 10px;
        line-height: 38px;
        height: 38px;
        font-size: 14px;
        color: #111;
    }

    .hopeui-form-select .hopeui-select-title > input {
        cursor: pointer;
    }

    .hopeui-form-select .hopeui-select-list {
        display: none;
        position: absolute;
        left: 0;
        top: 39px;
        padding: 5px 0;
        z-index: 899;
        width: 100%;
        border: 1px solid #d2d2d2;
        max-height: 300px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
        box-sizing: border-box;
    }

        .hopeui-form-select .hopeui-select-list .option {
            padding: 0 25px 0 10px;
            line-height: 38px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            color: #111;
            font-size: 14px;
        }

            .hopeui-form-select .hopeui-select-list .option.hopeui-select-this, .hopeui-form-select .hopeui-select-list .option.hopeui-select-this:hover {
                background-color: #ff7400;
                color: #fff;
            }

            .hopeui-form-select .hopeui-select-list .option.hopeui-select-tips {
                color: #666;
            }

            .hopeui-form-select .hopeui-select-list .option:hover {
                background-color: #f2f2f2;
                color: #111;
            }

        .hopeui-form-select .hopeui-select-list .groupTitle {
            font-size: 12px;
            color: #999;
            padding: 0 10px;
            line-height: 36px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hopeui-form-select .hopeui-select-list .group {
            padding: 0 20px;
        }

    .hopeui-form-select .hopeui-edge {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-top: solid #c2c2c2;
        border-width: 6px;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

.hopeui-form-selected .hopeui-select-list {
    display: block;
}

.hopeui-form-selected .hopeui-edge {
    margin-top: -9px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top: -3px\9;
}

.hopeui-select-phone {
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.hopeui-form-checkbox {
    position: relative;
    height: auto!important;
    line-height: normal!important;
    min-width: 18px;
    min-height: 18px;
    border: none!important;
    margin-right: 0;
    padding-left: 28px;
    padding-right: 0;
    background: 0 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

    .hopeui-form-checkbox:hover i {
        border-color: #ff7400;
    }

    .hopeui-form-checkbox.hopeui-checkbox-disabled {
        cursor: not-allowed!important;
    }

        .hopeui-form-checkbox.hopeui-checkbox-disabled > i {
            color: #fff!important;
            border-color: #e6e6e6;
        }

        .hopeui-form-checkbox.hopeui-checkbox-disabled > span {
            color: #d2d2d2!important;
        }

        .hopeui-form-checkbox.hopeui-checkbox-disabled:hover i {
            color: #fff!important;
            border-color: #e6e6e6;
        }

    .hopeui-form-checkbox > span {
        padding-left: 0;
        padding-right: 15px;
        line-height: 18px;
        background: 0 0;
        color: #666;
        height: 100%;
        font-size: 14px;
        border-radius: 2px 0 0 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hopeui-form-checkbox > i {
        position: absolute;
        top: 0;
        right: auto;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        border: 1px solid #c2c2c2;
        font-size: 12px;
        border-radius: 2px;
        background-color: #fff;
        -webkit-transition: .1s linear;
        transition: .1s linear;
        text-align: center;
        color: #fff;
    }

.hopeui-form-checked, .hopeui-form-checked i {
    border-color: #ff7400!important;
}

    .hopeui-form-checked i {
        background-color: #ff7400;
        color: #fff;
    }

    .hopeui-form-checked:hover, .hopeui-form-checked:hover i {
        border-color: #ff7400!important;
    }

        .hopeui-form-checked:hover i {
            background-color: #ff7400;
            color: #fff;
        }

.hopeui-form-radio {
    padding-right: 10px;
    cursor: pointer;
    font-size: 0;
}

    .hopeui-form-radio, .hopeui-form-radio * {
        display: inline-block;
        vertical-align: middle;
    }

        .hopeui-form-radio * {
            font-size: 14px;
        }

        .hopeui-form-radio i {
            margin-right: 8px;
            font-size: 20px;
            color: #c2c2c2;
            display: inline-block;
        }

        .hopeui-form-radio.hopeui-form-radio {
            color: #666;
        }

            .hopeui-form-radio.hopeui-form-radio > i:hover, .hopeui-form-radio.hopeui-form-radioed > i {
                color: #ff7400;
            }

        .hopeui-form-radio.hopeui-radio-disabled {
            cursor: not-allowed!important;
        }

            .hopeui-form-radio.hopeui-radio-disabled > i {
                color: #e6e6e6!important;
            }

            .hopeui-form-radio.hopeui-radio-disabled > span {
                color: #d2d2d2!important;
            }

.hopeui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #ff7400;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

    .hopeui-btn i {
        padding: 0 2px;
    }

    .hopeui-btn:hover {
        opacity: .8;
        filter: alpha(opacity=80);
        color: #fff;
    }

    .hopeui-btn:active {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .hopeui-btn.hopeui-btn-primary {
        border: 1px solid #c9c9c9;
        background-color: #fff;
        color: #555;
        line-height: 36px;
    }

    .hopeui-btn.hopeui-btn-radius {
        border-radius: 100px;
    }

    .hopeui-btn.hopeui-btn-disabled, .hopeui-btn.hopeui-btn-disabled:active, .hopeui-btn.hopeui-btn-disabled:hover {
        border: 1px solid #e6e6e6;
        background-color: #fbfbfb;
        color: #c9c9c9;
        cursor: not-allowed;
        opacity: 1;
        line-height: 36px;
    }

.hopeui-btn-group {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
}

    .hopeui-btn-group .hopeui-btn {
        margin-left: 0!important;
        margin-right: 0!important;
        border-left: 1px solid hsla(0,0%,100%,.5);
        border-radius: 0;
    }

        .hopeui-btn-group .hopeui-btn:first-child {
            border-left: none;
            border-radius: 2px 0 0 2px;
        }

        .hopeui-btn-group .hopeui-btn:last-child {
            border-radius: 0 2px 2px 0;
        }

.hopeui-textarea {
    min-height: 200px;
    line-height: 20px;
    padding: 10px;
    resize: vertical;
    display: block;
    width: 100%;
    line-height: 1.3;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    outline: 0;
    -webkit-appearance: none;
    transition: all .3s;
    -webkit-transition: all .3s;
    box-sizing: border-box;
    resize: none;
    overflow: auto;
    color: #111;
    font-size: 14px;
}

    .hopeui-textarea:focus {
        border-color: #c9c9c9;
    }

    .hopeui-textarea:hover {
        border-color: #d2d2d2;
    }

.hopeui-textarea-words {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

    .hopeui-textarea-words i {
        font-size: 14px;
        color: #555;
    }

.hopeui-layer {
    -webkit-overflow-scrolling: touch;
    top: 150px;
    left: 50%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-clip: content;
    border-radius: 2px;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
    border-left: 1px\0 solid\0 \0;
    border-bottom: 1px\0 solid\0 #e6e6e6;
    border-right: 1px\0 solid\0 \0;
    border-top: 1px\0 solid\0 #e6e6e6;
    position: fixed;
    z-index: 10001;
}

    .hopeui-layer .hopeui-layer-title {
        padding: 0 0 0 20px;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        color: #111;
        overflow: hidden;
        background-color: #f8f8f8;
        border-radius: 2px 2px 0 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hopeui-layer .hopeui-layer-close {
        height: 100%;
        width: 40px;
        text-align: center;
        float: right;
        cursor: pointer;
    }

    .hopeui-layer .hopeui-layer-content {
        position: relative;
        overflow: hidden;
        min-width: 100px;
        min-height: 50px;
        font-size: 14px;
        color: #111;
        word-break: break-all;
    }

    .hopeui-layer .hopeui-layer-btn {
        padding: 10px 20px 20px;
        text-align: center;
    }

        .hopeui-layer .hopeui-layer-btn button {
            min-width: 100px;
            margin: 0 5px;
        }

.hopeui-layer-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: rgba(0,0,0,.3);
    background: #494a5f \0 !important;
}

.hopeui-layer-nosrl {
    overflow: hidden!important;
}

.hopeui-container {
    position: relative;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.hopeui-row:after, .hopeui-row:before {
    content: "";
    display: block;
    clear: both;
}

.hopeui-row {
    font-size: 0;
}

    .hopeui-row [class*=hopeui-col-] {
        vertical-align: top;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
    }

.hopeui-col-center {
    text-align: center!important;
}

.hopeui-col-space1 {
    margin: 0 -.5px;
}

    .hopeui-col-space1 > * {
        padding: 0 .5px;
    }

.hopeui-col-space2 {
    margin: 0 -1px;
}

    .hopeui-col-space2 > * {
        padding: 0 1px;
    }

.hopeui-col-space3 {
    margin: 0 -1.5px;
}

    .hopeui-col-space3 > * {
        padding: 0 1.5px;
    }

.hopeui-col-space4 {
    margin: 0 -2px;
}

    .hopeui-col-space4 > * {
        padding: 0 2px;
    }

.hopeui-col-space5 {
    margin: 0 -2.5px;
}

    .hopeui-col-space5 > * {
        padding: 0 2.5px;
    }

.hopeui-col-space6 {
    margin: 0 -3px;
}

    .hopeui-col-space6 > * {
        padding: 0 3px;
    }

.hopeui-col-space7 {
    margin: 0 -3.5px;
}

    .hopeui-col-space7 > * {
        padding: 0 3.5px;
    }

.hopeui-col-space8 {
    margin: 0 -4px;
}

    .hopeui-col-space8 > * {
        padding: 0 4px;
    }

.hopeui-col-space9 {
    margin: 0 -4.5px;
}

    .hopeui-col-space9 > * {
        padding: 0 4.5px;
    }

.hopeui-col-space10 {
    margin: 0 -5px;
}

    .hopeui-col-space10 > * {
        padding: 0 5px;
    }

.hopeui-col-xl-1-12 {
    width: 8.33333333%;
}

.hopeui-col-xl-offset1 {
    margin-left: 8.33333333%;
}

.hopeui-col-xl-2-12 {
    width: 16.66666667%;
}

.hopeui-col-xl-offset2 {
    margin-left: 16.66666667%;
}

.hopeui-col-xl-3-12 {
    width: 25%;
}

.hopeui-col-xl-offset3 {
    margin-left: 25%;
}

.hopeui-col-xl-4-12 {
    width: 33.33333333%;
}

.hopeui-col-xl-offset4 {
    margin-left: 33.33333333%;
}

.hopeui-col-xl-5-12 {
    width: 41.66666667%;
}

.hopeui-col-xl-offset5 {
    margin-left: 41.66666667%;
}

.hopeui-col-xl-6-12 {
    width: 50%;
}

.hopeui-col-xl-offset6 {
    margin-left: 50%;
}

.hopeui-col-xl-7-12 {
    width: 58.33333333%;
}

.hopeui-col-xl-offset7 {
    margin-left: 58.33333333%;
}

.hopeui-col-xl-8-12 {
    width: 66.66666667%;
}

.hopeui-col-xl-offset8 {
    margin-left: 66.66666667%;
}

.hopeui-col-xl-9-12 {
    width: 75%;
}

.hopeui-col-xl-offset9 {
    margin-left: 75%;
}

.hopeui-col-xl-10-12 {
    width: 83.33333333%;
}

.hopeui-col-xl-offset10 {
    margin-left: 83.33333333%;
}

.hopeui-col-xl-11-12 {
    width: 91.66666667%;
}

.hopeui-col-xl-offset11 {
    margin-left: 91.66666667%;
}

.hopeui-col-xl-12-12 {
    width: 100%;
}

.hopeui-col-xl-offset12 {
    margin-left: 100%;
}

@media screen and (min-width:750px) and (max-width:1199px) {
    .hopeui-col-md-1-12 {
        width: 8.33333333%;
    }

    .hopeui-col-md-offset1 {
        margin-left: 8.33333333%;
    }

    .hopeui-col-md-2-12 {
        width: 16.66666667%;
    }

    .hopeui-col-md-offset2 {
        margin-left: 16.66666667%;
    }

    .hopeui-col-md-3-12 {
        width: 25%;
    }

    .hopeui-col-md-offset3 {
        margin-left: 25%;
    }

    .hopeui-col-md-4-12 {
        width: 33.33333333%;
    }

    .hopeui-col-md-offset4 {
        margin-left: 33.33333333%;
    }

    .hopeui-col-md-5-12 {
        width: 41.66666667%;
    }

    .hopeui-col-md-offset5 {
        margin-left: 41.66666667%;
    }

    .hopeui-col-md-6-12 {
        width: 50%;
    }

    .hopeui-col-md-offset6 {
        margin-left: 50%;
    }

    .hopeui-col-md-7-12 {
        width: 58.33333333%;
    }

    .hopeui-col-md-offset7 {
        margin-left: 58.33333333%;
    }

    .hopeui-col-md-8-12 {
        width: 66.66666667%;
    }

    .hopeui-col-md-offset8 {
        margin-left: 66.66666667%;
    }

    .hopeui-col-md-9-12 {
        width: 75%;
    }

    .hopeui-col-md-offset9 {
        margin-left: 75%;
    }

    .hopeui-col-md-10-12 {
        width: 83.33333333%;
    }

    .hopeui-col-md-offset10 {
        margin-left: 83.33333333%;
    }

    .hopeui-col-md-11-12 {
        width: 91.66666667%;
    }

    .hopeui-col-md-offset11 {
        margin-left: 91.66666667%;
    }

    .hopeui-col-md-12-12 {
        width: 100%;
    }

    .hopeui-col-md-offset12 {
        margin-left: 100%;
    }
}

@media screen and (min-width:1px) and (max-width:749px) {
    .hopeui-col-xs-1-12 {
        width: 8.33333333%;
    }

    .hopeui-col-xs-offset1 {
        margin-left: 8.33333333%;
    }

    .hopeui-col-xs-2-12 {
        width: 16.66666667%;
    }

    .hopeui-col-xs-offset2 {
        margin-left: 16.66666667%;
    }

    .hopeui-col-xs-3-12 {
        width: 25%;
    }

    .hopeui-col-xs-offset3 {
        margin-left: 25%;
    }

    .hopeui-col-xs-4-12 {
        width: 33.33333333%;
    }

    .hopeui-col-xs-offset4 {
        margin-left: 33.33333333%;
    }

    .hopeui-col-xs-5-12 {
        width: 41.66666667%;
    }

    .hopeui-col-xs-offset5 {
        margin-left: 41.66666667%;
    }

    .hopeui-col-xs-6-12 {
        width: 50%;
    }

    .hopeui-col-xs-offset6 {
        margin-left: 50%;
    }

    .hopeui-col-xs-7-12 {
        width: 58.33333333%;
    }

    .hopeui-col-xs-offset7 {
        margin-left: 58.33333333%;
    }

    .hopeui-col-xs-8-12 {
        width: 66.66666667%;
    }

    .hopeui-col-xs-offset8 {
        margin-left: 66.66666667%;
    }

    .hopeui-col-xs-9-12 {
        width: 75%;
    }

    .hopeui-col-xs-offset9 {
        margin-left: 75%;
    }

    .hopeui-col-xs-10-12 {
        width: 83.33333333%;
    }

    .hopeui-col-xs-offset10 {
        margin-left: 83.33333333%;
    }

    .hopeui-col-xs-11-12 {
        width: 91.66666667%;
    }

    .hopeui-col-xs-offset11 {
        margin-left: 91.66666667%;
    }

    .hopeui-col-xs-12-12 {
        width: 100%;
    }

    .hopeui-col-xs-offset12 {
        margin-left: 100%;
    }
}

.hopeui-col-xl-1-8 {
    width: 12.5%;
}

.hopeui-col-xl-offset1 {
    margin-left: 12.5%;
}

.hopeui-col-xl-2-8 {
    width: 25%;
}

.hopeui-col-xl-offset2 {
    margin-left: 25%;
}

.hopeui-col-xl-3-8 {
    width: 37.5%;
}

.hopeui-col-xl-offset3 {
    margin-left: 37.5%;
}

.hopeui-col-xl-4-8 {
    width: 50%;
}

.hopeui-col-xl-offset4 {
    margin-left: 50%;
}

.hopeui-col-xl-5-8 {
    width: 62.5%;
}

.hopeui-col-xl-offset5 {
    margin-left: 62.5%;
}

.hopeui-col-xl-6-8 {
    width: 75%;
}

.hopeui-col-xl-offset6 {
    margin-left: 75%;
}

.hopeui-col-xl-7-8 {
    width: 87.5%;
}

.hopeui-col-xl-offset7 {
    margin-left: 87.5%;
}

.hopeui-col-xl-8-8 {
    width: 100%;
}

.hopeui-col-xl-offset8 {
    margin-left: 100%;
}

@media screen and (min-width:750px) and (max-width:1199px) {
    .hopeui-col-md-1-8 {
        width: 12.5%;
    }

    .hopeui-col-md-offset1 {
        margin-left: 12.5%;
    }

    .hopeui-col-md-2-8 {
        width: 25%;
    }

    .hopeui-col-md-offset2 {
        margin-left: 25%;
    }

    .hopeui-col-md-3-8 {
        width: 37.5%;
    }

    .hopeui-col-md-offset3 {
        margin-left: 37.5%;
    }

    .hopeui-col-md-4-8 {
        width: 50%;
    }

    .hopeui-col-md-offset4 {
        margin-left: 50%;
    }

    .hopeui-col-md-5-8 {
        width: 62.5%;
    }

    .hopeui-col-md-offset5 {
        margin-left: 62.5%;
    }

    .hopeui-col-md-6-8 {
        width: 75%;
    }

    .hopeui-col-md-offset6 {
        margin-left: 75%;
    }

    .hopeui-col-md-7-8 {
        width: 87.5%;
    }

    .hopeui-col-md-offset7 {
        margin-left: 87.5%;
    }

    .hopeui-col-md-8-8 {
        width: 100%;
    }

    .hopeui-col-md-offset8 {
        margin-left: 100%;
    }
}

@media screen and (min-width:1px) and (max-width:749px) {
    .hopeui-col-xs-1-8 {
        width: 12.5%;
    }

    .hopeui-col-xs-offset1 {
        margin-left: 12.5%;
    }

    .hopeui-col-xs-2-8 {
        width: 25%;
    }

    .hopeui-col-xs-offset2 {
        margin-left: 25%;
    }

    .hopeui-col-xs-3-8 {
        width: 37.5%;
    }

    .hopeui-col-xs-offset3 {
        margin-left: 37.5%;
    }

    .hopeui-col-xs-4-8 {
        width: 50%;
    }

    .hopeui-col-xs-offset4 {
        margin-left: 50%;
    }

    .hopeui-col-xs-5-8 {
        width: 62.5%;
    }

    .hopeui-col-xs-offset5 {
        margin-left: 62.5%;
    }

    .hopeui-col-xs-6-8 {
        width: 75%;
    }

    .hopeui-col-xs-offset6 {
        margin-left: 75%;
    }

    .hopeui-col-xs-7-8 {
        width: 87.5%;
    }

    .hopeui-col-xs-offset7 {
        margin-left: 87.5%;
    }

    .hopeui-col-xs-8-8 {
        width: 100%;
    }

    .hopeui-col-xs-offset8 {
        margin-left: 100%;
    }
}

.hopeui-tab .hopeui-tab-title {
    position: relative;
    left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;
    transition: all .2s;
    -webkit-transition: all .2s;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: -1px;
}

    .hopeui-tab .hopeui-tab-title::-webkit-scrollbar {
        display: none;
    }

    .hopeui-tab .hopeui-tab-title ul {
        border-bottom: 1px solid #e6e6e6;
    }

    .hopeui-tab .hopeui-tab-title li {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        transition: all .2s;
        -webkit-transition: all .2s;
        position: relative;
        line-height: 39px;
        min-width: 65px;
        padding: 0 15px;
        text-align: center;
        cursor: pointer;
        color: #555;
    }

        .hopeui-tab .hopeui-tab-title li.hopeui-tab-this:after {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 40px;
            border-style: solid;
            border-bottom: solid #fff;
            border-width: 1px;
            border-radius: 2px 2px 0 0;
            box-sizing: border-box;
            pointer-events: none;
            color: #e6e6e6;
        }

.hopeui-tab .hopeui-tab-content {
    overflow: hidden;
}

    .hopeui-tab .hopeui-tab-content.hopeui-tab-switch .hopeui-tab-item {
        display: inline-block;
        min-height: 50px;
    }

    .hopeui-tab .hopeui-tab-content .hopeui-tab-item {
        display: none;
        min-height: 50px;
    }

    .hopeui-tab .hopeui-tab-content .hopeui-tab-inner {
        font-size: 0;
        padding: 10px 20px;
    }

.hopeui-tab.hopeui-tab-simple .hopeui-tab-title li.hopeui-tab-this {
    color: #ff7400;
}

    .hopeui-tab.hopeui-tab-simple .hopeui-tab-title li.hopeui-tab-this:after {
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #ff7400;
    }

.hopeui-tab.hopeui-tab-card {
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
}

    .hopeui-tab.hopeui-tab-card .hopeui-tab-title {
        background-color: #f2f2f2;
    }

        .hopeui-tab.hopeui-tab-card .hopeui-tab-title li {
            margin-right: -1px;
            margin-left: -1px;
        }

            .hopeui-tab.hopeui-tab-card .hopeui-tab-title li.hopeui-tab-this {
                color: #555;
                background-color: #fff;
            }

                .hopeui-tab.hopeui-tab-card .hopeui-tab-title li.hopeui-tab-this:after {
                    border-width: medium 1px 1px;
                    border-top: 1px;
                    border-bottom-color: #fff;
                    border-radius: 0;
                }

.hopeui-pager {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0;
    font-size: 0;
}

    .hopeui-pager .hopeui-pager-omit, .hopeui-pager > span {
        display: inline-block;
        vertical-align: middle;
        padding-left: 15px;
        padding-right: 15px;
        height: 28px;
        line-height: 28px;
        margin: 0 -1px 0 0;
        background-color: #fff;
        color: #2f2f2f;
        font-size: 12px;
        border: 1px solid #e2e2e2;
        user-select: none;
    }

    .hopeui-pager span:hover {
        color: #ff7400;
        cursor: pointer;
    }

    .hopeui-pager .hopeui-pager-omit {
        color: #6e6e6e;
    }

    .hopeui-pager .hopeui-pager-count {
        border: none;
        padding: 0 15px;
        margin: 0 -1px 0 0;
        user-select: none;
        font-style: normal;
    }

    .hopeui-pager .hopeui-pager-count, .hopeui-pager .hopeui-pager-jump {
        display: inline-block;
        vertical-align: middle;
        height: 30px;
        line-height: 30px;
        color: #2f2f2f;
        font-size: 12px;
    }

        .hopeui-pager .hopeui-pager-jump input {
            width: 40px;
            margin: 0 10px;
            padding: 0 3px;
            line-height: 28px;
        }

        .hopeui-pager .hopeui-pager-jump button, .hopeui-pager .hopeui-pager-jump input {
            text-align: center;
            height: 28px;
            border-radius: 2px;
            vertical-align: top;
            background-color: #fff;
            box-sizing: border-box;
            border: 1px solid #e2e2e2;
            font-size: 12px;
        }

        .hopeui-pager .hopeui-pager-jump button {
            margin-left: 10px;
            padding: 0 10px;
            cursor: pointer;
            line-height: 26px;
            color: #2f2f2f;
        }

            .hopeui-pager .hopeui-pager-jump button:hover {
                color: #ff7400;
            }

    .hopeui-pager .hopeui-pager-disabled {
        color: #d2d2d2!important;
        cursor: not-allowed!important;
    }

    .hopeui-pager .hopeui-pager-cur {
        background-color: #ff7400;
        color: #fff!important;
        border: 1px solid #ff7400;
    }

.hopeui-lightbox-warp {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

.hopui-lightbox-switch {
    position: fixed;
    top: 50%;
    width: 100%;
    margin-top: -25px;
    z-index: 20001;
}

    .hopui-lightbox-switch i {
        font-size: 48px;
        color: #fff;
        cursor: pointer;
    }

    .hopui-lightbox-switch .hopui-lightbox-prev {
        float: left;
        margin-left: .3%;
    }

    .hopui-lightbox-switch .hopui-lightbox-next {
        float: right;
        margin-right: .3%;
    }

.hopeui-lightbox-transparent {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.hopeui-lightbox-shadow {
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
}

.hopeui-lightbox-close {
    width: 100%;
    top: 10px;
    position: fixed;
    z-index: 20001;
}

    .hopeui-lightbox-close i {
        font-size: 20px;
        color: #fff;
        float: right;
        margin-right: .3%;
        cursor: pointer;
    }

.hopeui-lightbox {
    opacity: 0;
    transform: scale(.5);
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .hopeui-lightbox img {
        user-select: none;
    }

.hopeui-lightbox-transition {
    opacity: 1;
    transform: scale(1);
    transition: all .3s;
}

.hopeui-scrollbar {
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

    .hopeui-scrollbar .hopeui-scrollbar-box {
        height: 100%;
        overflow: auto;
        width: 103%;
        /*padding-right: 10px;*/
    }

        .hopeui-scrollbar .hopeui-scrollbar-box.ieFix {
            margin-right: -20px;
            width: auto;
            padding-right: 0;
        }

    .hopeui-scrollbar .hopeui-scrollbar-bar {
        background: #666;
        width: 8px;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 4px;
        cursor: pointer;
        transition: opacity .5s;
    }

.hopeui-loadmore {
    text-align: center;
    padding: 10px 0;
}

    .hopeui-loadmore i {
        font-size: 30px;
    }

.hopeui-suggest {
    position: absolute!important;
    left: 0;
    top: 1px;
    padding: 5px 0;
    z-index: 899;
    min-width: 100%;
    border: 1px solid #d2d2d2;
    max-height: 300px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box;
}

    .hopeui-suggest .option {
        padding: 0 10px;
        line-height: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        .hopeui-suggest .option.hopeui-suggest-this {
            background-color: #ff7400!important;
            color: #fff!important;
        }

        .hopeui-suggest .option.hopeui-suggest-tips {
            color: #666;
        }

        .hopeui-suggest .option:hover {
            background-color: #f2f2f2;
        }

.hope-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    direction: ltr;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}

.hope-wrapper {
    position: relative;
    width: 100%;
    -webkit-transition-property: -webkit-transform,left,top;
    -webkit-transition-duration: 0s;
    -webkit-transform: translateZ(0);
    -webkit-transition-timing-function: ease;
    -moz-transition-property: -moz-transform,left,top;
    -moz-transition-duration: 0s;
    -moz-transform: translateZ(0);
    -moz-transition-timing-function: ease;
    -o-transition-property: -o-transform,left,top;
    -o-transition-duration: 0s;
    -o-transform: translateZ(0);
    -o-transition-timing-function: ease;
    -o-transform: translate(0);
    -ms-transition-property: -ms-transform,left,top;
    -ms-transition-duration: 0s;
    -ms-transform: translateZ(0);
    -ms-transition-timing-function: ease;
    transition-property: transform,left,top;
    transition-duration: 0s;
    transform: translateZ(0);
    transition-timing-function: ease;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.hope-free-mode > .hope-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}

.hope-slide {
    float: left;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.hope-wp8-horizontal {
    -ms-touch-action: pan-y;
}

.hope-wp8-vertical {
    -ms-touch-action: pan-x;
}

.hope-datepicker {
    width: 370px;
    border: 1px solid #e6e6e6;
    font-size: 12px;
    position: absolute;
    z-index: 999;
    display: none;
    background: #fff;
    color: #555;
    user-select: none;
}

    .hope-datepicker > div {
        padding: 0 5px;
    }

    .hope-datepicker .year-month .left {
        width: 50px;
    }

    .hope-datepicker .year-month .month {
        width: 75px;
    }

        .hope-datepicker .year-month .month span {
            width: 100%;
            position: relative;
        }

    .hope-datepicker .year-month .year {
        width: 75px;
    }

        .hope-datepicker .year-month .year span {
            width: 100%;
            text-align: center;
        }

    .hope-datepicker .year-month .right {
        width: 50px;
    }

    .hope-datepicker .week {
        height: 25px;
        color: #9ea7b3;
    }

        .hope-datepicker .week ul {
            padding: 0;
            margin: 0;
        }

            .hope-datepicker .week ul li {
                width: 50px;
                line-height: 25px;
                float: left;
                text-align: center;
            }

    .hope-datepicker .day {
        background: #fff;
    }

        .hope-datepicker .day ul {
            overflow: hidden;
        }

            .hope-datepicker .day ul li {
                height: 50px;
                line-height: 50px;
                width: 50px;
                float: left;
                text-align: center;
                background: #fff;
                cursor: pointer;
                color: #555;
            }

                .hope-datepicker .day ul li:hover {
                    background: #f2f2f2;
                    color: #555;
                }

                .hope-datepicker .day ul li.active {
                    background: #ff7400;
                    color: #fff;
                }

                .hope-datepicker .day ul li.other-month {
                    color: #e6e6e6;
                }

                    .hope-datepicker .day ul li.other-month:hover {
                        background: #f2f2f2;
                        color: #555;
                    }

    .hope-datepicker .year-month .month .month-list {
        width: 100%;
        border-top: none;
        position: absolute;
        top: 50px;
        left: 0;
        background: #fefefe;
        display: none;
        color: #9ea7b3;
    }

    .hope-datepicker .month-list ul li {
        width: 50%;
        cursor: pointer;
        text-align: center;
        display: inline-block;
    }

        .hope-datepicker .month-list ul li.active, .hope-datepicker .month-list ul li:hover {
            color: #ff7400;
        }

    .hope-datepicker .year-month .year .year-list {
        width: 100%;
        border-top: none;
        position: absolute;
        top: 50px;
        left: 0;
        background: #fefefe;
        display: none;
        color: #9ea7b3;
    }

    .hope-datepicker .year-list ul {
        overflow: hidden;
    }

        .hope-datepicker .year-list ul li {
            width: 50%;
            cursor: pointer;
            text-align: center;
            display: inline-block;
        }

            .hope-datepicker .year-list ul li.active, .hope-datepicker .year-list ul li:hover {
                color: #ff7400;
            }

    .hope-datepicker .year-list .year-change {
        margin-top: 3px;
        margin-bottom: 3px;
        overflow: hidden;
        height: 18px;
        width: 125%;
    }

    .hope-datepicker .year-change span {
        width: 125px!important;
        height: 18px!important;
    }

    .hope-datepicker .time-list {
        border-top: none;
        position: absolute;
        top: 0;
        left: 0;
        background: #fefefe;
        display: none;
        color: #9ea7b3;
        padding: 0 5%;
    }

        .hope-datepicker .time-list .warp {
            margin-top: 50px;
        }

            .hope-datepicker .time-list .warp > div {
                width: 32%;
                display: inline-block;
                font-size: 0;
            }

            .hope-datepicker .time-list .warp p {
                text-align: center;
                font-size: 16px;
                margin-bottom: 10px;
                color: #111;
            }

            .hope-datepicker .time-list .warp .list {
                border: 1px solid #d2d2d2;
                border-radius: 4px;
            }

            .hope-datepicker .time-list .warp .item {
                width: 100%;
                line-height: 40px;
                cursor: pointer;
                text-align: center;
                display: inline-block;
            }

                .hope-datepicker .time-list .warp .item:hover {
                    color: #ff7400;
                }

                .hope-datepicker .time-list .warp .item.active {
                    color: #fff;
                    background: #ff7400;
                }

        .hope-datepicker .time-list .group {
            margin: 20px 5px 0;
        }

            .hope-datepicker .time-list .group .return {
                font-size: 14px;
                color: #555;
                float: left;
                line-height: 38px;
                cursor: pointer;
            }

                .hope-datepicker .time-list .group .return:hover {
                    color: #ff7400;
                }

            .hope-datepicker .time-list .group button {
                margin: 0;
            }

    .hope-datepicker .year-month {
        height: 50px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 5px;
    }

        .hope-datepicker .year-month span {
            height: 50px;
            line-height: 50px;
            float: left;
        }

            .hope-datepicker .year-month span.active, .hope-datepicker .year-month span:hover {
                color: #ff7400;
            }

    .hope-datepicker .action {
        height: 50px;
        border-top: 1px solid #e6e6e6;
        margin-top: 5px;
        padding-right: 10px;
    }

        .hope-datepicker .action button {
            margin: 7px 5px 0;
            float: right;
            height: 36px;
            line-height: 36px;
        }

            .hope-datepicker .action button.clear {
                margin: 7px 5px 0;
                float: right;
                border: 1px solid #e6e6e6;
            }

        .hope-datepicker .action span.selectTime {
            float: left;
            height: 50px;
            line-height: 50px;
            color: #555;
            cursor: pointer;
            margin-left: 5%;
        }

            .hope-datepicker .action span.selectTime:hover {
                color: #ff7400;
            }

.hopeui-effect-scale {
    transition: all .8s;
}

    .hopeui-effect-scale:hover {
        transform: scale(1.2);
    }

.hopeui-effect-shadow {
    transition: all .8s;
}

    .hopeui-effect-shadow:hover {
        box-shadow: 0 10px 24px rgba(0,0,0,.3);
    }

.hopeui-zoom-thumb-wrapper {
    position: relative;
    display: block;
    top: 0;
    left: 0;
}

.hopeui-zoom-lens {
    overflow: hidden;
    cursor: move;
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    background: #ff7400;
}

.hopeui-zoom-lens, .hopeui-zoom-loader {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
}

.hopeui-zoom-loader {
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
    background: transparent;
    background: rgba(50,50,50,.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232);
}

.hopeui-zoom-loader-text {
    font: 13px Arial;
    margin-top: 10px;
}

.hopeui-zoom-large {
    position: absolute;
    z-index: 100;
}

.hopeui-zoom-preview {
    padding: 0;
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
}

    .hopeui-zoom-preview img {
        position: absolute;
        top: 0;
        left: 0;
    }

.hopeui-zoom-opaque {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}