body {
    background: #FFF
}

.overflow {
  overflow: hidden;
}

#top-nav-home {
    color: #3cb067;
    font-weight: bold;
}
.banner {
    position: relative;
    /* background: #f5f5f5; */
    /* padding-top: 6px; */
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset
}

.w-1000 {
    /* width: 1200px!important; */
    margin: 0 auto;
}

.btn.btn-default {
    color: inherit;
}

/* .qrbox {
    height: 480px
} */

/* .qrimage-wrap {
    border: 1px solid rgba(120,130,140,.13)!important
} */

.vcardNone {
    display: none!important
}

.personCreateVcard {
    width: 70%;
    float: left;
    position: relative;
}

.person-vcard,
.person-vcard-preview {
    width: 100%;
    padding-bottom: 45px;
    /* padding-top: 15px; */
    min-height: 328px;
    background: #fff;
    border: 1px solid #e6e6e6;
    /* margin-bottom: 10px */
}

.person-vcard-preview {
    padding-top: 15px;
}

.personVcardTitle {
    font-size: 20px;
    color: rgba(0,0,0,.87);
    text-align: center;
    margin-top: 25px
}

.personVcardDesc {
    text-align: center;
    color: #999;
    margin-top: 8px;
}

.avator {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 45px;
    left: 66px;
    width: 64px;
    height: 64px;
}

.avator img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    /* position: absolute; */
    /* border-radius: 50%; */
    /* background-size: contain; */
}

.uploadClick {
    font-size: 12px;
    color: #FFF;
    background: rgba(0,0,0,.5);
    position: absolute;
    bottom: 0;
    width: 89px;
    height: 24px;
    line-height: 24px;
    display: none;
}

.defaultDropDown {
    margin-right: 21px;
    min-width: 28px;
    display: inline-block;
}

.left-info {
    margin-top: 32px;
}

.left-info,.right-info {
    width: 58%;
    margin-left: 205px;
    margin-right: 66px;
}

.right-info {
    border-top: 1px dashed rgba(221, 224, 226, .8);
}

.upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    overflow: hidden;
    cursor: pointer;
}

.upload input {
    position: absolute;
    width: 79px;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=00);
    cursor: pointer;
    left: auto
}

#upload:hover+button {
    color: #3cb067;
    box-shadow: inset 0 0 0 1px rgba(76,175,80,.25)
}

.add-mobile {
    font-size: 14px;
    color: #357BB3;
    display: none;
    margin-left: 32px;
}

.change-add-mobile {
    margin-left: -7px
}

.remove-item {
    font-size: 14px;
    color: #357BB3;
    margin-left: 27px
}

.remove-item-mobile {
    margin-left: 20px!important
}

.p-vcard-info.p-vcard-error {
    border-bottom-color: red;
    border-bottom-style: solid
}

.p-vcard-info {
    position: relative;
    padding: 12px 0 6px;
    font-size: 14px;
    color: rgba(0,0,0,.87);
    line-height: 20px;
    border-bottom: 1px dashed rgba(221,224,226,.8);
    display: flex;
}

.p-vcard-info label {
    margin-right: 20px;
    position: relative;
    font-size: 14px
}

.p-vcard-info label.required:before {
    content: '*';
    position: absolute;
    right: -8px;
    top: 1px;
    color: red
}

.p-vcard-info input {
    border: 0 none;
    width: 286px;
    height: 22px;
    flex: 1;
}

.p-vcard-info.p-vcard-mobile-empty.p-vcard-error::after {
    content: '请输入手机号';
    position:absolute;
    right: 50px;
    color: red;
    font-size: 12px;
    bottom: 7px;
}

.p-vcard-info.p-vcard-mobile-item.p-vcard-error::after {
    content: '手机号码格式错误';
    position:absolute;
    right: 80px;
    color: red;
    font-size: 12px;
    bottom: 7px;
}

.p-vcard-info .fa {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    top: 1px
}

.p-vcard-info .dropdown {
    display: inline-block
}

.p-vcard-info .dropdown-btn {
    border: 0 none;
    background: #FFF;
    padding: 0;
    width: 45px;
    margin-right: 4px
}

.dropdown-btn[disabled]::after {
    opacity: 0;
}

.add-item .dropdown-menu {
    top: 34px;
    left: -2px;
}

.p-vcard-info .dropdown-menu {
    min-width: 122px
}

.company-menu.dropdown-menu {
    min-width: 200px
}

.p-vcard-info .dropdown-item {
    padding: 5px 10px
}

.company-menu {
    position: absolute;
    left: 45px;
    margin-top: -4px;
    display: none
}

.company-menu .dropdown-item {
    white-space: normal
}

.add-item {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    line-height: 44px;
    color: #357BB3;
    margin-left: 204px;
    position: relative;
}

.person-note {
    font-size: 14px;
    color: #999;
    line-height: 22px;
    float: left;
    margin-left: 20px;
    width: 280px;
    margin-top: 60px
}

.person-btn {
    padding-top: 32px;
    text-align: center;
}

.showCompanyVcard {
    float: left;
    width: 280px;
    margin-left: 20px;
    padding: 40px 24px 0;
    background: #fff;
    height: 659px;
    border: 1px solid rgba(120,130,140,.13)
}

.companyVcardTitle {
    font-size: 20px;
    color: rgba(0,0,0,.87);
    text-align: center
}

.companyVcardIntro {
    font-size: 14px;
    color: #7f7f7f;
    margin-top: 34px;
    line-height: 20px
}

.advantageTitle {
    font-size: 18px;
    color: #333;
    margin-top: 36px;
    margin-bottom: 12px
}

.advantageIntro {
    font-size: 14px;
    color: #7f7f7f;
    line-height: 26px;
    margin-left: 1px;
    align-items: center;
    display: flex;
}

.advantageIntro span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    background: #7f7f7f;
}

.advantageDetail {
    font-size: 14px;
    color: #357BB3;
    margin-left: 2px;
    margin-top: 8px;
    display: inline-block
}

.advantageDetail:hover {
    color: #357BB3;
    text-decoration: underline
}

.c-vcard-btn {
    display: block;
    margin: 60px auto
}

.c-vcard-create {
    font-size: 12px;
    color: #357bb3;
    display: inline-block!important;
    margin: 0!important
}

.vcard-video {
    float: right;
    width: 460px;
    height: 297px;
    border-radius: 4px;
    background: url(/static/images/vcard_new/banner@2x.png) no-repeat;
    cursor: auto;
    background-size: contain;
    position: relative;
    margin-top: 63px
}

.video-bg {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #000;
    opacity: 0;
    filter: alpha(opacity=00)
}

.play .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
    background: url(//static.clewm.net/static/images/batch/play-icon_c49450a.png) no-repeat;
    background-position: -150px 0
}

.vcard-video:hover .video-bg {
}

.vcard-video:hover .icon {
}

.video-close {
    background: #fff;
    opacity: .6;
    filter: alpha(opacity=60);
    border-radius: 4px;
    width: 80px;
    float: right;
    padding: 5px 10px;
    cursor: pointer
}

.video-close:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.cvard-modal .modal-title {
    font-size: 18px;
    color: rgba(0,0,0,.87);
    text-align: center;
    padding: 32px 0 33px
}

.cvard-modal .modal-body {
    padding: 0 50px
}

.cvard-modal .col-form-label {
    padding: 8px 0
}

.cvard-modal .form-control {
    padding: 7px 10px;
    font-size: 14px
}

.cvard-modal .modal-footer {
    border: 0 none;
    padding-top: 8px;
    padding-bottom: 32px;
    text-align: center
}

.cvard-modal .modal-footer .btn {
    width: 76px;
    padding: 6px 10px;
    font-size: 14px
}

.cvard-modal .modal-footer .btn+.btn {
    margin-left: 10px
}

.cvard-modal .dropdown-toggle:after {
    position: absolute;
    right: 0;
    top: 50%;
    color: #000;
    margin-right: .4em;
    margin-top: 1px
}

.cvard-modal .dropdown-toggle:before {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .25rem;
    vertical-align: middle;
    content: "";
    border-bottom: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    margin-right: .25rem;
    margin-top: -6px;
    margin-right: .4em;
    color: #000
}

.cvard-modal .dropdown-menu {
    width: 100%;
    height: 350px;
    overflow-y: auto
}

.col-form-label.required:before {
    content: '*';
    color: red
}

.previewCard {
    position: relative;
    width: 340px;
    height: 180px;
    margin: 24px auto;
    padding: 24px;
    background: rgba(255,255,255,1);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(120, 130, 140, 0.13);
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

.previewCard_name {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1.3;
    margin-bottom: 8px;
}

.previewCard_phone {
    margin-bottom: 2px;
}

.previewCard_staff {
    padding-right: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.previewCard_staff span {
    margin: 0 4px;
}

.previewCard_company {
    position: absolute;
    left: 24px;
    bottom: 27px;
    width: 290px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

.previewCard_avatar {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

.previewForm {
    width: 340px;
    margin: 0 auto;
}

.previewForm_field {
    position: relative;
    padding: 10px 0 10px 36px;
    border-bottom: 1px solid rgba(120, 130, 140, 0.13);
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px;
    line-height: 1.4;
}

.previewForm_field::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 20px;
    height: 20px;
    background-image: url(//static.clewm.net/static/images/vcard_icon@2x_b470fcb.png);
    background-size: 100% 1300%;
    background-color: #fff;
    background-repeat: no-repeat;
}

.previewForm_field.field_weibo::before {
    background-position: 0 0;
}

.previewForm_field.field_weixin::before {
    background-position: 0 -20px;
}

.previewForm_field.field_email::before {
    background-position: 0 -40px;
}

.previewForm_field.field_sign::before {
    background-position: 0 -60px;
}

.previewForm_field.field_qq::before {
    background-position: 0 -80px;
}

.previewForm_field.field_fax::before {
    background-position: 0 -100px;
}

.previewForm_field.field_tel::before {
    background-position: 0 -120px;
}

.previewForm_field.field_phone::before {
    background-position: 0 -140px;
}

.previewForm_field.field_url::before {
    background-position: 0 -160px;
}

.previewForm_field.field_company::before {
    background-position: 0 -180px;
}

.previewForm_field.field_address::before {
    background-position: 0 -200px;
}

.previewForm_field.field_job::before {
    background-position: 0 -220px;
}
.previewForm_field.field_touxian::before {
    background-position: 0 -240px;
}

.person-vcard-preview .btn.b-green:hover,
.person-vcard-preview .btn.b-green:focus,
.person-vcard-preview .btn.b-green:active {
    background: #00A13B;
    color: #fff!important;
}

.vcard-tips {
    font-size: 12px;
    color: #9b9b9b;
    white-space: pre-line;
    margin-top: 12px;
}

.success-tip {
    text-align: center;
    color: #4A4A4A;
    font-size: 14px;
    margin-top: 12px;
}

.success-tip .when-success {
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-tip .when-success i {
    color: #3cb067;
    font-size: 15px;
    position: relative;
    margin-top: 1px;
}

.help-modal-backdrop,.help-modal-backdrop-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    z-index: 1001
}

.back-to-old-version {
    position: absolute;
    right: 0;
    top: 14px;
}

.text-darkgrey {
    color: #666;
}

.help-modal-backdrop-bg {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    background-color: #000;
    opacity: 0
}

.help-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 374px;
    min-height: 220px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 6px;
    -webkit-transition: all cubic-bezier(0.1,.7,.1,1) 400ms;
    transition: all cubic-bezier(0.1,.7,.1,1) 400ms;
    z-index: 1002;
    padding: 40px 34px;
    text-align: left;
    color: rgba(102, 102, 102, 0.87);
    font-size: 14px;
    opacity: 0;
}

.help-modal-backdrop.active .help-modal-backdrop-bg {
    opacity: .5;
}

.help-modal-backdrop.active .help-modal {
    opacity: 1;
}

.help-modal-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
}

.help-modal-content img {
    background: #fff;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.05);
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 24px 0;
    padding: 8px;
}

.help-modal-content .vcard-info {
    font-size: 14px;
    color: #666;
    line-height: 30px;
    font-family: PingFangSC-Regular;
    margin-bottom: 32px;
}

.help-modal-content .tip {
    font-size: 12px;
    color: #999;
    font-family: PingFangSC-Regular;
}

.help-modal-content .checkbox {
    margin-top: 36px;
    margin-bottom: 0;
}

.help-modal-backdrop-close {
    font-size: 30px;
    font-weight: 400;
    position: absolute;
    top: 16px;
    right: 24px;
    line-height: 24px;
}

.vcard-qrcode-wrapper {
    width: 260px;
}

@media screen and (max-width: 1000px){
    .personCreateVcard {
        width: auto;
    }

    .person-vcard,
    .person-vcard-preview {
        width: 656px;
    }
}

/* .qrbox .create-style-tpl-wrapper {
    margin-left: 20px !important;
} */

.adaptive-min-height.set-min-height {
    min-height: 605px;
}