* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", Arial;
}
body{
    overflow-x: hidden;
}
.headImg-popup button {
    width: 48%;
    height: 4rem;
}
.headImg-popup button:nth-of-type(1) {
    margin-right: 2%;
    position: relative;
    overflow: hidden;
}
.headImg-popup button:nth-of-type(1):before{
    content: "";
    width: 25px;
    height: 930px;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: -20px;
    left: -580px;
    transform:skewX(-45deg);
}
.success-linear:before{
    animation:success-linear 1.5s linear forwards;
}
@-moz-keyframes success-linear { to { left: 600px; } }
@-webkit-keyframes success-linear { to { left: 600px; } }
@keyframes success-linear { to { left: 600px; } }
.headImg-popup .upload-image-box {
    height: 17rem;
    border: 1px solid #eee;
    background-color: #f3f3f3;
    overflow: hidden;
    position: relative;
}
.headImg-popup .upload-image-box .move-image {
    height: 17rem;
    cursor: move;
    position: absolute;
    top: 0;
    left: 0;
}
.headImg-popup .upload-image-box img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.headImg-popup .upload-image-box .clip-image {
    width: 9rem;
    height: 9rem;
    border: 2px solid #eee;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
    -moz-box-shadow: 0 0 2px #eee;
    -webkit-box-shadow: 0 0 2px #eee;
    box-shadow: 0 0 2px #eee;
}
.headImg-popup .range-title i {
    margin-right: .5rem;
}
.hidden {
    display: none;
}
.inp {
    border: 1px solid #ddd;
    padding: 0.5rem 0.8rem;
    font-size: inherit;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 0.3rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
}
.fz18{
    font-size: 18px;
}
.color-white{
    color:#FFF;
}
.mt1rem {
    margin-top: 1rem;
}

.mt2rem {
    margin-top: 2rem;
}

.inp-block {
    display: block;
    width: 100%;
}

.btn-blue {
    background: #576069;
    border-color: #576069;
    color: #fff;
}

.btn-primary {
    background: #B9E3D9;
    border-color: #B9E3D9;
    color: #fff;
}
.text-center{
    text-align: center;
}
.mt30{
    margin-top: 30px;
}
.btn {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    border: 1px solid transparent;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
.showImage{
    font-size: 0;
}
.showImage li{
    list-style: none;
    float: left;
}
input[type="range"]{
    background-color: #F3F4F6;
    border-color: #F3F4F6;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: move;
    top: 1px;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    background-color: #F74461;
    border-radius: 100%;
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* 弹出层 */
.modal { width: 100%; height: 100%; display: none; position: fixed; left: 0; top: 0; z-index: 99; }
.modal .btn-close { position: absolute; top: 14px; right: 14px; color: #CCC; cursor: pointer; font-size: 18px; }
.modal .btn-close:hover { color: #00ad7a; }

.mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); }

.modal-wrap { width: 25rem; height: 15rem; margin: auto; background-color: #FFF; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; }
.modal-wrap .modal-side { width: 164px; height: 100%; float: left; background-color: #e05a3f; overflow: hidden; position: relative; }
.modal-wrap .modal-r { width: 526px; padding: 10px; float: right; }

.ctrl-modal { transform:scale(0); width: 18rem; height: 290px; background-color: #FFF; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: 100; -moz-box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); display: none\9; -moz-animation: Popup-animate 0.5s 0.1s forwards; -webkit-animation: Popup-animate 0.5s 0.1s forwards; animation: Popup-animate 0.5s 0.1s forwards; }
.ctrl-modal .modal-title { padding: 14px 20px; background-color: #f5f5f5; }
.ctrl-modal .modal-title h2 { font-weight: 500; color: #606060; font-size: 20px; }
.ctrl-modal h1 { font-size: 26px; color: #6d6d6d; text-align: center; font-weight: 500; }
.ctrl-modal table { width: 100%; height: 100%; margin-top: -28px; border: none; text-align: center; }
.ctrl-modal td { border: none; padding: 0; vertical-align: middle; }


/* popup */
.rcpopup .rcpopup-title { border-bottom: 1px solid #e5e5e5; padding: 10px 20px; }
.rcpopup .rcpopup-title h2 { font-size: 20px; font-weight: 600; }
.rcpopup .rcpopup-content { margin: 35px 40px; }
.loading { width: 130px; height: 130px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
.loading p { text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); }
.loading .sk-circle { width: 130px; height: 130px; position: relative; }
.loading .sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.loading .sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 16px; height: 16px; border-radius: 100%; background-color: #FFF; -moz-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
.loading .sk-circle .sk-circle2 { -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.loading .sk-circle .sk-circle3 { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.loading .sk-circle .sk-circle4 { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.loading .sk-circle .sk-circle5 { -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.loading .sk-circle .sk-circle6 { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.loading .sk-circle .sk-circle7 { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.loading .sk-circle .sk-circle8 { -moz-transform: rotate(210deg); -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg); }
.loading .sk-circle .sk-circle9 { -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.loading .sk-circle .sk-circle10 { -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.loading .sk-circle .sk-circle11 { -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.loading .sk-circle .sk-circle12 { -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg); }
.loading .sk-circle .sk-circle2:before { -moz-animation-delay: -1.1s; -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.loading .sk-circle .sk-circle3:before { -moz-animation-delay: -1s; -webkit-animation-delay: -1s; animation-delay: -1s; }
.loading .sk-circle .sk-circle4:before { -moz-animation-delay: -0.9s; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.loading .sk-circle .sk-circle5:before { -moz-animation-delay: -0.8s; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.loading .sk-circle .sk-circle6:before { -moz-animation-delay: -0.7s; -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.loading .sk-circle .sk-circle7:before { -moz-animation-delay: -0.6s; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.loading .sk-circle .sk-circle8:before { -moz-animation-delay: -0.5s; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.loading .sk-circle .sk-circle9:before { -moz-animation-delay: -0.4s; -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.loading .sk-circle .sk-circle10:before { -moz-animation-delay: -0.3s; -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.loading .sk-circle .sk-circle11:before { -moz-animation-delay: -0.2s; -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.loading .sk-circle .sk-circle12:before { -moz-animation-delay: -0.1s; -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-moz-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -moz-transform: scale(0); transform: scale(0); }
    40% { -moz-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
    40% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes sk-circleBounceDelay { 0%, 80%, 100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }
    40% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } }
.justify_fix { display: inline-block; width: 100%; height: 0; overflow: hidden; }
@-moz-keyframes Popup-animate { 0% { opacity: 0.7; -moz-transform: scale(1) translateY(-50px); transform: scale(1) translateY(-50px); }
  100% { opacity: 1; -moz-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@-webkit-keyframes Popup-animate { 0% { opacity: 0.7; -webkit-transform: scale(1) translateY(-50px); transform: scale(1) translateY(-50px); }
  100% { opacity: 1; -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@keyframes Popup-animate { 0% { opacity: 0.7; -moz-transform: scale(1) translateY(-50px); -ms-transform: scale(1) translateY(-50px); -webkit-transform: scale(1) translateY(-50px); transform: scale(1) translateY(-50px); }
  100% { opacity: 1; -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }