html, body {
    width: 100%;
    height: 100%;
    min-width: inherit;
    background: none
}

body {
    background: #fff
}

.ok-body {
    padding: 0;
    overflow: hidden;
    user-select: none
}

.layui-layer {
    min-width: 800px !important;
    min-height: 650px !important
}

.videoOut {
    width: 90%;
    height: 84vh;
    background: transparent;
    margin: 30px auto 0px
}

.video-js {
    width: 100% !important;
    height: 100% !important
}

.video-dimensions {
    width: 100% !important;
    height: 100% !important
}

.videolist video {
    outline: none
}

.videolist {
    width: 100%;
    height: 100%;
    text-align: center
}

.videolist .singleVideo video {
    width: 100%;
    height: 100%;
    margin: 0
}

@media (min-width: 1000px) {
    .singleVideo video {
        width: initial;
        width: auto\0
    }
}

.layui-layer.layui-layer-msg {
    min-width: 300px !important;
    min-height: 40px !important;
    min-width: 180px;
    max-width: 350px;
    max-height: 60px
}

.assess-top {
    height: 42px;
    line-height: 42px;
    background: #232C31;
    color: #fff;
    padding: 0 10px
}

.layui-progress {
    width: 78%;
    float: left;
    margin-top: 10px
}

.assess-top div.fr {
    width: 20%;
    text-align: center
}

.question_box {
    padding: 10px 20px 0
}

.operation {
    cursor: pointer;
    margin: 14px auto;
    text-align: center
}

.btn {
    display: inline-block;
    min-width: 100px;
    margin: 0 3px;
    border-radius: 16px;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    outline: none
}

.btn-success {
    color: #fff;
    background-color: #4381e6;
    border-color: #4381e6
}

.btn-hollow {
    background: none;
    border: 1px solid #4381e6;
    color: #4381e6
}

.operation .btn {
    width: 120px;
    padding: 8px 12px
}

.hide {
    display: none
}

.question {
    line-height: 50px
}

.question_title {
    font-size: 16px;
    font-weight: bold;
    min-height: 34px;
    line-height: 34px;
    margin: 0
}

.question_title strong {
    font-size: 16px;
    font-weight: bold
}

.question_info {
    user-select: none;
    padding-left: 20px;
    border: 1px solid #ccc;
    line-height: 42px;
    min-height: 42px;
    cursor: pointer;
    margin: 12px 0;
    font-size: 16px
}

.question_info label {
    display: inline-block;
    width: 100%;
    height: 100%
}

.topInfo {
    padding: 10px;
    font-size: 14px;
    line-height: 32px;
    text-indent: 2em;
    text-align: justify
}

.question_info input {
    line-height: 45px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 6px
}

.clickTrim {
    color: #4381e6;
    background: #f3f3f3;
    border: 1px solid #909090
}

.question_info:hover {
    color: #4381e6;
    background: #f3f3f3;
    border: 1px solid #909090
}

.questionId {
    color: #dce7f2;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    float: left;
    cursor: pointer;
    border: 1px solid #fff
}

.questionId:hover, .question_id {
    color: #fff;
    background: #4381e6
}

.active_question_id {
    color: #4381e6;
    background: 0 0;
    border: 1px solid #ccc
}

.layui-progress-big .layui-progress-text {
    display: inline-block;
    min-width: 25px
}

.layui-progress-bar {
    background: #198ede
}

.panel-heading {
    padding-left: 20px;
    height: 32px;
    line-height: 32px
}

.crumbs {
    margin-bottom: 20px;
    font-size: 16px;
    height: 24px;
    line-height: 10px;
    color: #4D555D;
    border-bottom: 1px solid #93999F
}

.crumbs a.last {
    font-weight: bold
}

.crumbs a {
    color: #4D555D
}

.crumbs p em {
    color: #4381e6
}

.case-right-title {
    font-weight: 600;
    text-align: left;
    line-height: 25px;
    font-size: 18px;
    color: #181818;
    letter-spacing: 0;
    height: 25px
}

.case-right-title b {
    color: #4381e6
}

.desc-item-desc {
    text-align: left;
    line-height: 24px;
    font-size: 14px;
    color: #595959;
    letter-spacing: .37px
}

.desc-item-title {
    font-weight: 600;
    margin-top: 12px;
    text-align: left;
    line-height: 24px;
    font-size: 14px;
    color: #181818;
    letter-spacing: .43px;
    height: 24px
}

#container {
    width: 100%;
    height: 400px
}

.layui-progress-big .layui-progress-text {
    display: inline-block;
    min-width: 25px
}

.layui-progress-bar {
    background: #198ede
}

.question_info label {
    width: 100%;
    height: 100%;
    display: inline-block;
    cursor: pointer
}

.progress {
    position: relative;
    border-radius: 20px;
    background-color: #e2e2e2;
    height: 18px;
    line-height: 18px;
    width: 78%;
    float: left;
    margin-top: 10px
}

.progress .progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    border-radius: 20px;
    text-align: right;
    transition: all .3s;
    -webkit-transition: all .3s;
    background: #198ede;
    height: 18px;
    line-height: 18px
}

.progress .progress-text {
    position: relative;
    line-height: 18px;
    font-size: 12px;
    padding: 0 10px;
    color: #fff;
    display: inline-block;
    min-width: 40px
}

.progress .progress-text.lan {
    color: #232c31
}

.transition {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease
}

.warntext {
    font-size: 15px;
    color: #ef7d2c;
    margin-bottom: 20px
}

.tab-skill a {
    float: left;
    margin-right: 26px;
    padding: 0 14px;
    font-size: 16px;
    color: #4d555d;
    line-height: 32px;
    border-radius: 6px;
    margin-bottom: 20px
}

.tab-skill a.on, .tab-skill a:hover {
    color: #f01414;
    background: rgba(138, 138, 138, .1)
}

.finish-test {
    overflow: hidden;
    padding-bottom: 70px
}

.finish-test img {
    display: block;
    margin: 50px auto 0
}

.switch {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: inline-block;
    width: auto
}

.switch p {
    margin-right: 4px;
    float: left;
    color: #4e4e4e;
    font-size: 14px;
    padding: 4px 6px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer
}

.switch p span {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 6px
}

.switch p span.span1 {
    background: url(../images/icon/switch-test-b.png) no-repeat
}

.switch p span.span2 {
    background: url(../images/icon/switch-video-b.png) no-repeat
}

.switch p.active {
    background: linear-gradient(to bottom, #4a03fe 0%, #8554f1 100%);
    color: #fff
}

.switch p.active span.span1 {
    background: url(../images/icon/switch-test-a.png) no-repeat
}

.switch p.active span.span2 {
    background: url(../images/icon/switch-video-a.png) no-repeat
}

.text-indent {
    text-indent: 2em
}

.bold {
    color: #000;
    font-weight: bold
}

.accordion li {
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15)
}

.accordion li:before {
    content: "";
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #688e26 0%, #ff816a 100%);
    position: absolute;
    top: 0;
    left: -2px
}

.accordion .link {
    font-weight: bold;
    padding: 15px 30px;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    border: none;
    margin: 0;
    position: relative
}

.accordion .link i.fa {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 5px;
    right: 12px;
    font-size: 16px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.accordion .link i.down {
    background: url(../images/icon/open.png) no-repeat center center;
    background-size: 55% 55%
}

.accordion .link i.up {
    background: url(../images/icon/fold.png) no-repeat center center;
    background-size: 55% 55%
}

.accordion p.content {
    text-align: justify;
    text-indent: 2em;
    font-size: 15px;
    line-height: 32px
}

.accordion p.question {
    font-size: 16px;
    font-weight: bold;
    color: #f01414
}

.accordion p.answer textarea {
    padding: 15px 2%;
    width: 96%;
    line-height: 28px;
    max-height: 200px;
    resize: none;
    border-radius: 18px;
    border: 1px solid #4D555D
}

.submenu {
    background: #fff;
    font-size: 14px;
    padding: 0 30px 15px;
    border: none;
    color: #305275;
    line-height: 28px
}

.show-enter-active, .show-leave-active {
    transition: all 0.3s ease
}

.show-enter, .show-leave-to {
    margin-left: 20px
}

.show-enter-to, .show-leave {
    margin-left: 0px
}

.self-wrapper {
    margin: 0 auto;
    width: 910px;
    min-height: 520px;
    box-shadow: 1px 1px 10px rgba(165, 165, 165, .3);
    border-radius: 8px;
    overflow: hidden
}

.self-wrapper h1.title {
    margin: 8px 0px 4px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-shadow: 6px 6px 6px rgba(6, 69, 92, .5)
}

.self-wrapper .wran {
    color: #fff600;
    font-size: 18px;
    font-weight: bold;
    text-align: center
}

.test-wrapper {
    margin: 12px auto;
    width: 90%;
    min-height: 340px;
    background: #fff;
    border-radius: 8px;
    min-height: 426px
}

.progress-warpper {
    height: 25px;
    line-height: 11px;
    width: 520px;
    padding: 20px 0px 0px;
    margin: auto
}

.progress-warpper .dot {
    background-color: #aa8bff;
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.progress {
    position: relative;
    border-radius: 20px;
    background-color: #f48585;
    height: 13px;
    line-height: 12px;
    width: 274px;
    margin: 0px 10px 0px 6px
}

.progress .progress-bar {
    position: absolute;
    left: 0;
    top: -6px;
    max-width: 100%;
    border-radius: 20px;
    text-align: right;
    transition: all .3s;
    -webkit-transition: all .3s;
    background: linear-gradient(to right, #ffbfbf, #b38bff);
    height: 25px;
    line-height: 25px
}

.progress .progress-text {
    position: relative;
    font-size: 14px;
    padding: 0 10px;
    color: #fff;
    display: inline-block;
    min-width: 40px
}

.progress .progress-text.lan {
    color: #fff;
    font-size: 12px
}

.progress-warpper .text {
    color: #666666;
    font-size: 14px;
    font-weight: bold
}

.progress-warpper .text span {
    margin: 0px 1px
}

.operation .btn {
    color: #fff;
    box-shadow: 1px 1px 5px rgba(65, 65, 65, .5)
}

.prebtn {
    background: #9a46ff
}

.nextbtn {
    background: #7801ff
}

.successbtn {
    background: linear-gradient(to right, #16bdae, #1695c0)
}

/*.test-con {*/
/*    padding: 0px 40px 10px*/
/*}*/

.test-con h2.title {
    font-size: 18px;
    font-family: Noto Sans S Chinese;
    font-weight: 500;
    color: #666666;
}

.test-con .que-title {
    margin: 6px 0px;
    color: #666666;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    min-height: 46px
}

.test-con .que-title span {
    color: #9946ff
}

.opt-con {
    margin-top: 10px;
    border-radius: 5px;
    position: relative;
    padding: 6px 0px;
    width: auto
}

.opt-con .opt-name {
    font-size: 14px;
    color: #666666
}

.opt-con .opt-img {
    margin-top: 4px;
    width: 110px;
    height: 110px;
    background: #eeeeee;
    border: 1px solid #eeeeee
}

.opt-con .opt-img img {
    width: 100%;
    height: 100%
}

.opt-con label {
    color: #666666;
    display: inline-block
}

.opt-con.pichas {
    float: left;
    margin-right: 7px;
    padding: 7px
}

.opt-con:hover {
    background: #eeeeee
}

.pichas:hover {
    background: #fefffb;
    box-shadow: rgba(165, 165, 165, .3)
}

.radio-label, .check-label {
    position: relative
}

/*.radio-label .radio-input, .check-label .check-input {*/
/*    display: none*/
/*}*/

.radio-label .radio-span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #c497f0;
    border-radius: 50%;
    margin-right: 4px
}

.check-label .check-span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #c497f0;
    margin-right: 4px
}

.radio-input:checked+.radio-span:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c497f0
}

.check-input:checked+.check-span:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 4px;
    border: 2px solid #c497f0;
    border-top-color: transparent;
    border-right-color: transparent;
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-45deg)
}

.result-info {
    margin-top: 8px;
    font-size: 18px;
    color: #4c4c4c;
    line-height: 30px;
    text-indent: 2em
}

.result-title {
    margin: 22px 10px 20px 42px;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 6px 6px 6px rgba(6, 69, 92, .5)
}

.result-b {
    color: #f2db53;
    font-style: italic;
    text-shadow: 2px 2px 2px rgba(6, 69, 92, .5);
    margin-right: 14px;
    font-size: 35px
}

.willpower p.tip {
    color: #7801ff;
    font-size: 18px;
    margin: 0px 0px 10px;
    padding-top: 20px
}

.willpower img {
    width: 330px;
    height: 336px
}

.willpowertest {
    padding-top: 10px;
    margin-left: 144px
}

.willpower-each {
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    color: #666666;
    font-size: 16px
}

.willpowertest .operation {
    margin: 50px auto 0px;
    width: initial;
    width: auto\0
}

.talk-table tr th, .talk-table tr td {
    border: 1px solid #dfd0f6
}

.talk-table tr th, .talk-table tr td {
    height: 26px
}

.talk-table tr th {
    color: #545454;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    background: #f2eaff;
    margin: 0px 4px
}

.talk-table tr:nth-child(odd) {
    background-color: #f2eaff
}

.talk-table tr td {
    color: #545454;
    font-size: 12px
}

.td-blod {
    color: #545454;
    font-size: 16px !important;
    text-align: center;
    font-weight: bold;
    background-color: #fff !important
}

.talkAbility p.score {
    font-size: 22px;
    color: #7601ff;
    margin-top: 10px
}

.talkAbility p.score .red {
    color: #f94c54
}

.talkAbility .btn {
    color: #fff;
    margin: 8px 0px 0px 0px;
    left: 50%;
    margin-left: -50px;
    position: relative;
    cursor: pointer
}

.width120 {
    width: 120px
}

.width616 {
    width: 616px
}

.h27-3 {
    height: 81px
}

.h27-4 {
    height: 108px
}

@-moz-document url-prefix() {
    .h27-3 {
        height: 90px
    }

    .h27-4 {
        height: 120px
    }
}

.talkAbility .radio-label {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block
}

.talkAbility .radio-label .radio-span {
    display: inline-block;
    position: absolute;
    width: 30px;
    left: 50%;
    top: 50%;
    margin-top: -16px;
    margin-left: -15px;
    height: 24px;
    border: none
}

.talkAbility .radio-label:hover .radio-span:after {
    position: absolute;
    content: "";
    background: url(../images/icon/talk-checked.png) no-repeat;
    width: 30px;
    height: 24px;
    margin-top: -2px
}

.talkAbility .radio-input:checked+.radio-span:after {
    content: "";
    width: 30px;
    height: 24px;
    background: url(../images/icon/talk-checked.png) no-repeat
}

.pt15 {
    padding-top: 15px
}

.careerInterest .title {
    padding-top: 15px
}

.careerInterest .opt-con {
    margin-top: 8px;
    padding: 2px 0px
}

.opt-con:hover {
    background: none
}

.radio-label:hover .radio-span:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c497f0
}

.willpower .radio-label:hover .radio-span:after {
    top: 6px
}

.check-label:hover .check-span:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 4px;
    border: 2px solid #c497f0;
    border-top-color: transparent;
    border-right-color: transparent;
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-45deg)
}

.careerInterest .opt-wrapper {
    position: relative
}

.careerInterest .opt-aside {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px
}

.careerInterest .opt-aside p.opt-p {
    margin-left: 260px;
    color: #666666;
    font-size: 15px;
    line-height: 26px;
    text-decoration: underline
}

.careerInterest .opt-aside img {
    width: 246px;
    height: 176px
}

.opt-con.pichas p.opt-top {
    width: 126px;
    min-height: 40px;
    cursor: pointer
}

.wordhas p.tip {
    color: #7801ff;
    font-size: 18px;
    padding-left: 20px;
    padding-top: 10px
}

.wordhas .opt-con {
    padding: 3px 0px
}

.righthas {
    position: relative
}

.righthas {
    position: relative
}

.righthas .opt-aside {
    position: absolute;
    top: -20px;
    right: 0;
    width: 540px
}

.righthas .opt-aside p.opt-p {
    margin-left: 290px;
    color: #666666;
    font-size: 15px;
    line-height: 26px;
    text-decoration: underline
}

.righthas .opt-aside img {
    width: 270px;
    height: 176px
}

.ans-class {
    font-size: 18px;
    color: #9946ff;
    font-weight: 700
}

.meetAbility tr td, .meetAbility tr th {
    height: 30px
}

.h120 {
    height: 190px
}

.h146 {
    height: 221px
}

.h120 td {
    text-align: left;
    font-size: 14px !important;
    vertical-align: top;
    padding-top: 6px;
    padding-left: 6px
}

.onlineTest .test-wrapper {
    position: relative
}

.onlineTest .progress-warpper {
    padding: 6px 0px 0px
}

.onlineTest .online-ul {
    position: absolute;
    left: 40px;
    bottom: 0px;
    width: 740px
}

.onlineTest .wordhas .opt-con {
    padding: 0px 0px
}

.onlineTest .online-ul li {
    margin: 5px 10px 5px 0px;
    float: left;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    background: rgba(153, 153, 153, .5)
}

.onlineTest .online-ul li:hover {
    background: rgba(153, 153, 153, 1)
}

.onlineTest .online-ul li.overAnswer {
    background: rgba(127, 69, 255, 0.8)
}

.onlineTest .online-ul li.errorAnswer {
    background: rgba(255, 0, 0, 0.8)
}

.onlineTest p.score {
    position: absolute;
    font-size: 22px;
    color: #7601ff;
    top: 0;
    right: 40px
}

.onlineTest p.score .red {
    color: #f94c54
}

.self-wrapper {
    margin-top: -10px
}

.vjs-poster {
    background-size: 100% 100% !important
}

.onlineTest .test-con .que-title {
    margin: 2px 0px
}

.onlineTest .opt-con {
    margin-top: 6px
}

fieldset {
    margin: 0 0 20px !important
}

#result {
    border-radius: 8px;
    padding: 0 20px 20px;
    height: 100%
}

.no-resize {
    min-height: 60px;
    resize: none !important
}

#result .blue {
    color: #3375ec
}

.tkhide {
    display: none
}

#result .layui-form-label {
    padding: 6px
}

#result .mr0 .layui-inline {
    margin-right: 0;
    margin-left: 0 !important
}

#result .layui-form select {
    display: inline-block;
    width: 140px;
    height: 32px;
    border: 1px solid #e6e6e6
}

#result .layui-form-mid {
    padding: 5px 0 !important;
    margin-left: 4px !important
}

fieldset {
    margin: 14px 0 !important
}

#result .mr0 .layui-inline:nth-child(2) .layui-form-label {
    width: 70px !important
}

#result .mr0.layui-form-item .layui-input-inline {
    width: 140px !important;
    margin-right: 0 !important;
    margin-left: 8px !important
}

#result .mr0 .layui-inline:nth-child(2) .layui-input-inline {
    margin-left: 8px
}

#result .mr0 .layui-inline:nth-child(2) .layui-input-inline {
    width: 80px !important
}

#result .mr0 .layui-inline:nth-child(3) .layui-form-label {
    width: 74px !important
}

#result .mr0 .layui-inline:nth-child(3) select {
    width: 96px !important
}

#result .layui-form-item {
    margin-bottom: 10px
}

#result .layui-input-block {
    margin-left: 100px;
    min-height: 32px
}

#result .layui-input {
    height: 32px;
    line-height: 1;
    line-height: 32px\9
}

#result .mark {
    position: relative;
    height: 16px
}

#result .mark .level {
    color: #fff;
    width: 85px;
    height: 42px;
    line-height: 30px;
    display: block;
    font-size: 20px;
    background: url(../images/community_03.png) no-repeat;
    position: absolute;
    right: 200px;
    top: -35px;
    text-align: center;
    background-size: 100% 100%
}

#result .layout-slider {
    width: 640px !important;
    margin: 0 auto 10px !important;
    background-size: 100% 100%
}

.resultTop, .resultBot {
    width: 644px !important;
    background-size: 100% 100% !important
}

.resultTop {
    margin: 40px auto 0 !important
}

.resultMid {
    color: #333;
    margin: 0 auto !important;
    width: 640px !important
}

.resultBot {
    margin: 0 auto 40px !important
}

.jslider .jslider-title ins {
    top: -20px !important;
    color: #333 !important
}

.jslider .jslider-scale ins {
    top: 10px !important;
    color: #333 !important
}

.mark .number04 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important
}

.mark .number04 .grade {
    left: 20px !important
}

#result .resultMid div {
    line-height: 28px
}

#result .indent {
    text-indent: 0 !important;
    min-height: 38px;
    line-height: 38px;
    font-size: 15px
}

h2.indent span.org2 {
    height: 38px;
    line-height: 38px;
    text-align: center
}

.pro-name {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    position: relative
}

.tk-del {
    position: absolute;
    color: #d68b54;
    font-size: 16px;
    top: 0;
    right: 20px
}

#lDiv1_smh .re_content {
    margin-top: 20px;
    padding: 0;
    width: 100%;
    height: initial;
    height: auto\0
}

#lDiv1_smh .re_content h3 {
    background: none;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 0;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative
}

#lDiv1_smh .re_content h3:after {
    content: "";
    position: absolute;
    width: 70px;
    height: 3px;
    background: #ea2b54;
    bottom: 0;
    left: 50%;
    margin-left: -18px
}

#lDiv1_smh .re_content .box-shadow, .box-shadow {
    padding: 0 15px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 4px 8px 0 rgba(231, 59, 75, 0.1);
    margin-bottom: 20px
}

#lDiv1_smh .re_content p {
    font-size: 15px;
    text-indent: 2em;
    color: #444;
    line-height: 26px;
    text-align: justify;
    word-break: break-all
}

#lDiv1_smh .print a, #lDiv1_smh .download a {
    padding: 0;
    margin: 10px 10px 0 0;
    width: 80px;
    height: 30px;
    background: #d42127;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 5px
}

#lDiv1_smh .download a {
    background: #284555
}

#result .layui-btn {
    min-width: 80px
}

.subSurvey_wrap {
    width: 100% !important;
    height: initial !important;
    height: auto\0 !important
}

.subSurvey_wrap .left {
    width: 100% !important;
    height: initial !important;
    height: auto\0 !important;
    float: initial !important;
    float: none\0 !important;
    padding: 0 !important
}

.subSurvey_wrap .left .title {
    display: none
}

.subSurvey_wrap .abilityContent {
    height: initial !important;
    height: auto\0 !important
}

.subSurvey_wrap .abilityContent>.container {
    width: 100% !important
}

.jp-container {
    overflow: hidden !important;
    height: initial !important;
    height: auto\0 !important
}

.six-title {
    height: 34px;
    line-height: 34px;
    font-size: 18px;
    font-weight: bold
}

.six-title2 {
    display: inline-block;
    font-size: 16px;
    margin: 20px 10px 20px 0
}

.xiugai {
    display: inline-block;
    padding: 0;
    margin: 10px 10px 0 10px;
    width: 60px;
    height: 30px;
    background: #d42127;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none
}

.opt-new-wrapper .radio-label {
    padding: 3px 14px;
    border-radius: 8px;
    display: inline-block;
    font-size: 18px
}

.opt-new-wrapper .check-label {
    padding: 7px 14px;
    border-radius: 8px;
    margin-bottom: -10px
}
.opt-new-wrapper .ongSty{
    width: 100%;
    height: 31px;
}
.opt-new-wrapper .ongSty:hover, .opt-new-wrapper .check-label:hover {
    background: #f4f4f4;
    box-shadow: 2px 2px 1px #dcd9d9 inset
}

.opt-new-wrapper .opt-con {
    padding: 0px 0px
}

.onlineTest .opt-new-wrapper .noClick, .opt-new-wrapper .check-label.noClick {
    background: #E8F3FF;
    color: #FFFFFF;
    box-shadow: 2px 2px 1px #E8F3FF inset
}

.opt-new-wrapper .radio-label.yesErrorClick {
    padding-right: 42px !important;
    background: url(../images/icon/error_03.png) #ff7777 no-repeat right center;
    color: #FFFFFF;
    box-shadow: 2px 2px 1px #c42f4c inset
}

.onlineTest .opt-new-wrapper .yesTrueClick {
    background: url(../images/icon/true_03.png) #5ac388 no-repeat right center!important;
    color: #FFFFFF!important;
}

.opt-con.pichas p.opt-top {
    width: 120px
}

.opt-con.pichas .check-label p.opt-top {
    min-height: inherit;
    min-height: initial\9\0;
    min-height: auto\9\0
}

.opt-con.pichas.teamWorkW .check-label p.opt-top {
    width: inherit;
    min-height: initial\9\0;
    min-height: auto\9\0
}

.opt-new-wrapper .opt-con.pichas {
    padding: 0px
}

.opt-new-wrapper .opt-con.pichas .radio-label {
    padding: 7px
}

.opt-new-wrapper .opt-con.pichas .radio-label:hover {
    background-color: #5ac388;
    color: #FFFFFF;
    box-shadow: 2px 2px 1px #2b9c5d inset
}

.opt-new-wrapper .opt-con.pichas .radio-label.noClick {
    color: #FFFFFF;
    background-color: #5ac388;
    box-shadow: 2px 2px 1px #2b9c5d inset
}

.opt-new-wrapper .opt-con.pichas .radio-label.noClick .opt-click {
    position: absolute;
    top: 0;
    right: 0;
    width: 43px;
    height: 43px;
    background: url(../images/opt-active_03.png) center center no-repeat
}

.onlineTest .opt-new-wrapper .opt-con {
    margin-top: 15px;
    cursor: pointer
}

.onlineTest .opt-new-wrapper .radio-label {
    padding: 3px 14px;
    padding: 1px 14px\0
}

.onlineTest .online-ul li {
    margin: 0px 10px 5px 0px
}

.test-con .que-title {
    font-style: inherit;
    font-style: initial\9\0;
    font-style: normal\9\0
}

.videoOut {
    width: 100%;
    height: 90vh;
    background: transparent;
    margin: 40px auto 0px
}

.self-wrapper {
    margin: 40px auto 0px;
    width: auto;
    box-shadow: none
}

.test-wrapper {
    margin: 12px auto 0px;
    width: 96%;
    border-bottom-right-radius: 0px
}

.self-wrapper h1.title {
    font-weight: 500
}

.operation {
    position: absolute;
    width: 100%;
    margin: -15px auto 0px;
    bottom: 0;
}

.operation .btn {
    padding: 9px 15px
}

.operation .btn:hover {
    font-style: oblique;
    box-shadow: 1px 1px 1px #4C4C4C inset
}

.onlineTest .online-ul {
    position: absolute;
    left: 50%;
    margin-left: -370px
}

.onlineTest p.score {
    top: -110px;
    top: -125px\0
}

@-moz-document url-prefix() {
    .onlineTest p.score {
        top: -125px
    }
}

.result-title {
    font-weight: 500
}

.result-b {
    font-weight: 500;
    font-size: 30px
}

.switch {
    top: 0px;
    margin-bottom: 10px
}

.switch p.active {
    box-shadow: 2px 2px 1px #3604a5 inset
}

.self-wrapper {
    margin: 0px auto;
    min-height: 506px
}

.switch {
    margin-bottom: 10px;
    position: initial;
    position: static
}

.videoOut {
    margin: 0px auto 0px
}

.meetAbility .talk-table.width120 {
    width: 20%
}

.meetAbility .talk-table.width616 {
    width: 80%
}

.talkAbility .talk-table.width120 {
    width: 15%
}

.talkAbility .talk-table.width616 {
    width: 85%
}

@media (min-height: 589px) {
    #result .mark .level {
        right: 340px
    }
}

@media (min-height: 475px) and (max-height:588px) {
    .jslider .jslider-title ins {
        width: 54px !important
    }

    .self-wrapper h1.title {
        font-size: 26px
    }

    .self-wrapper {
        zoom: 0.86; zoom: 1\0 }

    .videoOut {
        height: 90vh
    }

    .width616 {
        width: 706px
    }

    .talkAbility .test-wrapper {
        width: 104%\0;
        position: relative\0;
        left: -2%\0
    }

    @-moz-document url-prefix() {
        .willpower img {
            margin-left: 0px
        }

        .talkAbility .test-wrapper {
            width: 104%;
            position: relative;
            left: -2%
        }
    }
}

@media screen and (max-height: 474px) {
    .jslider .jslider-title ins {
        width: 54px !important
    }

    .jslider .jslider-scale ins {
        top: 7px !important
    }

    .willpower .opt-new-wrapper .radio-label {
        display: inline-block;
        padding: 3px 14px
    }

    .self-wrapper h1.title {
        font-size: 26px
    }

    .self-wrapper {
        zoom: 0.724; zoom: 1\0 }

    .opt-new-wrapper .check-label {
        font-size: 18px
    }

    .progress-warpper {
        width: 520px;
        position: relative;
        top: 10px
    }

    .onlineTest .online-ul {
        width: 98%;
        margin-left: -48%;
        bottom: 15px
    }

    .videoOut {
        height: 90vh
    }

    .video-js .vjs-big-play-button {
        font-size: 5em !important
    }

    .willpower img {
        margin-left: 140px;
        margin-left: 0px\0
    }

    @-moz-document url-prefix() {
        .willpower img {
            margin-left: 0px
        }
    }

    .test-con {
        padding: 0px 10px 10px\0
    }

    @-moz-document url-prefix() {
        .talkAbility .td-blod {
            font-size: 14px !important
        }

        .meetAbility .h120 {
            height: 187px
        }

        .meetAbility .td-blod {
            font-size: 16px !important
        }

        .talkAbility p.tip {
            font-size: 16px
        }

        .test-con {
            padding: 0px 10px 10px
        }
    }
}

.ok-body.onlineTest.six-two-test {
    height: 100vh;
    background: #fff;
}

.six-two-test .self-wrapper {
    width: 100%;
    margin-top: 0;
    box-shadow: none;
    min-height: auto;
    background-size: 100% 50% !important;
}

.six-two-test .opt-new-wrapper .radio-label {
    padding: 6px 14px;
    font-size: 16px;
    display: inline-block
}

.onlineTest.six-two-test .online-ul {
    width: 100%;
    left: 20px;
    bottom: 30px;
    margin-left: 0
}

.onlineTest.six-two-test .online-ul li {
    margin: 5px
}

.six-two-test .test-wrapper {
    min-height: 500px
}

.many-six-two-test .test-wrapper {
    min-height: 460px
}

.many-six-two-test .self-wrapper .wran {
    font-size: 14px
}

.onlineTest.six-two-test .progress-warpper {
    padding: 12px 0 0
}

.six-two-test .self-wrapper h1.title {
    font-size: 30px;
    margin: 12px 0
}

.three-test {
    margin: 8px 0 0 8px;
    width: 90px;
    position: absolute;
    z-index: 999
}

.three-test li {
    margin-bottom: 2px;
    width: 68px;
    height: 27px;
    background-image: url('../images/icon/three-six.png');
    background-repeat: no-repeat;
    background-position: 0 0
}

.three-test li:nth-child(2) {
    background-position: 0 -61px
}

.three-test li:nth-child(3) {
    background-position: 0 -122px
}

.three-test li.click {
    background-position: -141px 0;
    width: 76px;
    height: 28px
}

.three-test li.click:nth-child(2) {
    background-position: -141px -61px
}

.three-test li.click:nth-child(3) {
    background-position: -141px -121px
}

@media (min-height: 475px) and (max-height:588px) {
    .onlineTest.six-two-test .progress-warpper {
        padding: 8px 0 0
    }

    .six-two-test .test-wrapper, .many-six-two-test .test-wrapper {
        min-height: 362px
    }

    .six-two-test .self-wrapper {
        zoom: 1 }

    #result .self-wrapper {
        zoom: 1 }

    .self-wrapper .wran {
        font-size: 14px
    }

    .topInfo {
        padding: 6px;
        line-height: 24px
    }

    .six-two-test .test-con {
        padding: 0 30px 10px
    }

    .six-two-test .test-con h2.title {
        font-size: 18px
    }

    .six-two-test .test-con .que-title {
        font-size: 16px;
        min-height: 38px;
        line-height: 26px
    }

    .onlineTest.six-two-test .online-ul {
        width: 100%;
        left: 0
    }

    .onlineTest.six-two-test .online-ul li {
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin: 4px
    }

    .six-two-test .operation {
        margin: 0 auto;
        bottom: 0px
    }

    .onlineTest.six-two-test .opt-new-wrapper .opt-con {
        margin-top: 4px
    }

    .six-two-test .opt-new-wrapper .radio-label {
        padding: 4px 14px;
        font-size: 15px
    }

    .six-two-test .finish-test {
        padding-bottom: 0
    }

    .six-two-test .finish-test img {
        margin: 20px auto 0 !important;
        max-width: 72%
    }
}

@media screen and (max-height: 474px) {
    .six-two-test .test-wrapper {
        min-height: 350px
    }

    .six-two-test .self-wrapper {
        zoom: 1 }

    #result .self-wrapper {
        zoom: 1 }

    .onlineTest.six-two-test .online-ul li {
        width: 20px;
        height: 20px;
        line-height: 20px;
        width: 18px\0;
        height: 18px\0;
        line-height: 18px\0;
        font-size: 12px;
        margin: 4px;
        margin: 3px\0
    }

    .six-two-test .opt-new-wrapper .radio-label {
        padding: 4px 18px;
        font-size: 14px
    }

    .three-test {
        zoom: 0.9 }

    .six-two-test .self-wrapper h1.title {
        font-size: 24px;
        margin: 8px 0 4px
    }

    .many-six-two-test .self-wrapper h1.title {
        font-size: 24px;
        margin: 12px 0
    }

    .six-two-test .test-con h2.title {
        font-size: 14px
    }

    .six-two-test .test-con .que-title {
        font-size: 14px
    }

    .six-two-test .operation {
        bottom: -86px;
    }

    .many-six-two-test .test-wrapper {
        min-height: 342px
    }

    .six-two-test .operation .btn {
        padding: 6px 14px
    }

    .six-two-test .finish-test {
        padding-bottom: 0
    }

    .six-two-test .finish-test img {
        margin: 20px auto 0 !important;
        max-width: 72%
    }
}

.accordion li {
    background: #fff
}

.accordion .operation {
    position: relative;
    margin: 10px auto 0
}

.video-center {
    margin: 0 auto;
    height: 100vh
}

.result-new-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 6px 6px 6px rgba(6, 69, 92, .5);
    margin: 8px auto 24px
}

.result-new-title .start, .result-new-title .end {
    color: #fff600;
    font-weight: 500
}

.result-new-title .start {
    margin-left: 20px;
    margin-right: 10px;
    font-size: 40px
}

.result-new-title .end {
    font-size: 25px
}

.guali {
    position: relative;
    width: 668px;
    left: 50%;
    margin-left: -334px;
    top: -20px;
    height: 48px;
    background: url(../images/result_03.png) no-repeat center top
}

.result-new .test-wrapper {
    margin: -50px auto 0px;
    box-shadow: none
}

.result-new .test-con {
    padding: 30px 40px 10px
}

#result .result-new .test-con {
    padding: 30px 40px
}

.result-new .ftitle b {
    width: 64px;
    height: 7px;
    background: #8cc7f3;
    border-radius: 5px;
    display: inline-block
}

.result-new .ftext p {
    font-size: 15px;
    color: #4c4c4c;
    margin-top: 12px;
    line-height: 24px;
    text-indent: 2em
}

.result-new .ftext .six-people {
    font-weight: bold;
    text-indent: 0;
    margin: 2px 0;
    display: inline-block
}

.result-new .ftext p img {
    display: inline-block;
    margin: 5px;
    width: 120px;
    height: 160px;
    margin-right: 4px
}

.width470 {
    width: 470px
}

.result-new .fimg>div {
    text-align: center
}

.result-new .fimg>div p {
    width: 160px;
    height: 160px;
    text-align: center
}

.result-new .fimg>div p img {
    width: 100%;
    height: 100%;
    border: 5px solid #e9e9e9;
    border-radius: 20px
}

.result-new .fimg>div b {
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 14px;
    color: #4c4c4c;
    font-size: 15px
}

.closeDetail {
    position: absolute;
    right: 0
}

.closeDetail a {
    margin: 10px 10px 0 0;
    width: 80px;
    height: 30px;
    color: #666;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: 14px;
    padding: 1px 4px
}

#lDiv1_smh {
    padding: 16px
}

.prospectus_wrap {
    width: 100% !important
}

.prospectus_wrap .left {
    width: 100% !important;
    padding: 0 !important;
    float: none !important
}

.prospectus_wrap .left .contentwrap {
    margin: 0 auto
}

.prospectus_wrap .left .title {
    color: #000 !important;
    height: 46px !important;
    line-height: 46px !important;
    border-bottom: 1px dashed #666
}

.prospectus_wrap .left .title .browse {
    font-size: 16px !important;
    padding-left: 5px !important
}

.finish-test .result-new .test-wrapper {
    position: inherit
}

.finish-test .result-new .test-con .ftitle img {
    display: inline-block
}

.hui-three-bg {
    text-indent: 0 !important
}

body .loader p {
    margin: 0 auto;
    text-align: center
}

body .loader {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    transform: translate3d(-50%, -50%, 0)
}

body .loader_overlay {
    width: 150px;
    height: 150px;
    background: transparent;
    box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
    border-radius: 100%;
    z-index: -1;
    margin: auto
}

body .loader_cogs {
    z-index: -2;
    width: 100px;
    height: 100px;
    top: -120px !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__top {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear
}

body .loader_cogs__top div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__top div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__top div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__top div.top_part {
    width: 100px;
    border-radius: 10px;
    position: absolute;
    height: 100px;
    background: #f98db9
}

body .loader_cogs__top div.top_hole {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__left {
    position: relative;
    width: 80px;
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
    top: 28px;
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    animation: rotate_left 10s .1s infinite reverse linear;
    left: -24px;
    height: 80px
}

body .loader_cogs__left div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__left div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__left div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__left div.left_part {
    width: 80px;
    border-radius: 6px;
    position: absolute;
    height: 80px;
    background: #97ddff
}

body .loader_cogs__left div.left_hole {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__bottom {
    position: relative;
    width: 60px;
    top: -65px;
    -webkit-transform-origin: 30px 30px;
    transform-origin: 30px 30px;
    -webkit-animation: rotate_left 10.2s .4s infinite linear;
    animation: rotate_left 10.2s .4s infinite linear;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    left: 79px;
    height: 60px
}

body .loader_cogs__bottom div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__bottom div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__bottom div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__bottom div.bottom_part {
    width: 60px;
    border-radius: 5px;
    position: absolute;
    height: 60px;
    background: #ffcd66
}

body .loader_cogs__bottom div.bottom_hole {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate_left {
    from {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    to {
        -webkit-transform: rotate(376deg);
        transform: rotate(376deg)
    }
}

@keyframes rotate_left {
    from {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    to {
        -webkit-transform: rotate(376deg);
        transform: rotate(376deg)
    }
}

@-webkit-keyframes rotate_right {
    from {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    to {
        -webkit-transform: rotate(364deg);
        transform: rotate(364deg)
    }
}

@keyframes rotate_right {
    from {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    to {
        -webkit-transform: rotate(364deg);
        transform: rotate(364deg)
    }
}

.video-js .vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    font-size: 4em !important;
    margin-top: -0.8em !important;
    margin-left: -1.5em !important
}

.video-js .vjs-time-tooltip {
    width: 3.6rem !important
}

.finish-test .mark {
    position: relative;
    height: 16px
}

.finish-test .mark .level {
    color: #fff;
    width: 85px;
    height: 42px;
    line-height: 30px;
    display: block;
    font-size: 20px;
    background: url(../images/community_03.png) no-repeat;
    position: absolute;
    right: 200px;
    top: -35px;
    text-align: center;
    background-size: 100% 100%
}

.finish-test .layout-slider {
    width: 640px !important;
    margin: 0 auto 10px !important;
    background-size: 100% 100%
}

body .loader p {
    margin: 0 auto;
    text-align: center
}

body .loader {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    transform: translate3d(-50%, -50%, 0)
}

body .loader_overlay {
    width: 150px;
    height: 150px;
    background: transparent;
    box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
    border-radius: 100%;
    z-index: -1;
    margin: auto
}

body .loader_cogs {
    z-index: -2;
    width: 100px;
    height: 100px;
    top: -120px !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__top {
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear
}

body .loader_cogs__top div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__top div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__top div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__top div.top_part {
    width: 100px;
    border-radius: 10px;
    position: absolute;
    height: 100px;
    background: #f98db9
}

body .loader_cogs__top div.top_hole {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__left {
    position: relative;
    width: 80px;
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
    top: 28px;
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    animation: rotate_left 10s .1s infinite reverse linear;
    left: -24px;
    height: 80px
}

body .loader_cogs__left div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__left div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__left div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__left div.left_part {
    width: 80px;
    border-radius: 6px;
    position: absolute;
    height: 80px;
    background: #97ddff
}

body .loader_cogs__left div.left_hole {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

body .loader_cogs__bottom {
    position: relative;
    width: 60px;
    top: -65px;
    -webkit-transform-origin: 30px 30px;
    transform-origin: 30px 30px;
    -webkit-animation: rotate_left 10.2s .4s infinite linear;
    animation: rotate_left 10.2s .4s infinite linear;
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    left: 79px;
    height: 60px
}

body .loader_cogs__bottom div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

body .loader_cogs__bottom div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

body .loader_cogs__bottom div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

body .loader_cogs__bottom div.bottom_part {
    width: 60px;
    border-radius: 5px;
    position: absolute;
    height: 60px;
    background: #ffcd66
}

body .loader_cogs__bottom div.bottom_hole {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    position: absolute;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate_left {
    from {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    to {
        -webkit-transform: rotate(376deg);
        transform: rotate(376deg)
    }
}

@keyframes rotate_left {
    from {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg)
    }

    to {
        -webkit-transform: rotate(376deg);
        transform: rotate(376deg)
    }
}

@-webkit-keyframes rotate_right {
    from {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    to {
        -webkit-transform: rotate(364deg);
        transform: rotate(364deg)
    }
}

@keyframes rotate_right {
    from {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    to {
        -webkit-transform: rotate(364deg);
        transform: rotate(364deg)
    }
}

.turn-warpper {
    background: url(../images/lunci-bg_03.png) no-repeat center center;
    width: 586px;
    height: 708px;
    margin: 0px auto;
    color: #8d2f01;
    overflow: hidden;
    position: relative;
    zoom: 0.8 }

.turn-warpper.show {
    display: block
}

@-moz-document url-prefix() {
    .turn-warpper {
        -moz-transform: scale(0.8);
        -moz-transform-origin: left top
    }
}

.turn-warpper .p-top {
    text-align: center;
    margin: 340px auto 10px
}

.turn-warpper .p-top, .turn-warpper .p-title {
    font-size: 20px;
    font-weight: bold
}

.turn-warpper .p-title {
    width: 470px;
    margin: 0px auto 50px;
    text-indent: 2em;
    height: 80px
}

.turn-warpper ul {
    width: 540px;
    margin: 0px auto
}

.turn-warpper ul li {
    list-style: none;
    float: left;
    width: 126px;
    text-align: center
}

.turn-warpper ul li p.top {
    color: #bc4911;
    font-size: 18px;
    font-weight: bold;
    margin: 0px 0px 10px
}

.turn-warpper ul li p.bottom {
    font-size: 13px;
    color: #bc4911;
    max-width: 105px;
    margin: 0 auto
}

.turn-warpper p.btn input {
    width: 250px;
    height: 58px;
    border-radius: 50px;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient(to right, #2f47f6, #8b65f8);
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    left: -125px;
    margin-left: 50%;
    line-height: 55px;
    outline: none
}

.turn-warpper p.btn input:hover, .turn-warpper p.btn input:active {
    box-shadow: 2px 2px 1px #0014af inset;
    border: none
}

.turn-warpper.one ul li {
    width: auto;
    margin-left: 18px
}

.turn-warpper.two ul li {
    width: auto;
    margin-left: 45px
}

.turn-warpper.two ul li:first-child+li+li, .turn-warpper.two ul li:first-child+li+li+li {
    margin-left: 66px
}

.turn-warpper.three ul li, .turn-warpper.four ul li {
    width: auto;
    margin-left: 45px
}

.turn-warpper.three li:first-child+li+li, .turn-warpper.three li:first-child+li+li+li, .turn-warpper.four ul li:first-child+li+li {
    margin-left: 67px
}

.turn-warpper.four ul li:first-child+li+li+li {
    margin-left: 83px
}

.turn-warpper.five {
    background: url(../images/lunci-bg_04.png) no-repeat center center
}

.turn-warpper.five ul li {
    width: 124px
}

.turn-warpper.five ul li:first-child {
    margin-left: 85px
}

@media (max-width: 1601px) {
    .turn-warpper ul li p.bottom {
        font-size: 15px\0
    }

    @-moz-document url-prefix() {
        .turn-warpper {
            -moz-transform: scale(0.8);
            -moz-transform-origin: center top
        }

        .turn-warpper ul li p.bottom {
            font-size: 15px
        }
    }
}

@media (max-width: 1367px) {
    .turn-warpper ul li p.bottom {
        font-size: 15px\0
    }

    .turn-warpper {
        zoom: 0.7 }

    @-moz-document url-prefix() {
        .turn-warpper {
            -moz-transform: scale(0.7);
            -moz-transform-origin: center top
        }
    }
}

.opt-new-wrapper .opt-con.pichas.careerWorthHas {
    margin-right: 4%
}

@media (min-height: 475px) and (max-height:588px) {
    .opt-new-wrapper .opt-con.pichas.careerWorthHas {
        margin-right: 0%\0
    }

    .opt-new-wrapper .pichas.opt-con {
        margin-right: 2px\0
    }

    .result-title {
        font-size: 30px\0
    }

    .result-b {
        font-size: 24px\0
    }

    @-moz-document url-prefix() {
        .opt-new-wrapper .pichas.opt-con {
            margin-right: 2px
        }

        .result-title {
            font-size: 30px
        }

        .result-b {
            font-size: 24px
        }
    }

    .six-two-test .finish-test {
        padding-bottom: 0
    }

    .six-two-test .finish-test img {
        margin: 20px auto 0 !important;
        max-width: 72%
    }
}

@media screen and (max-height: 474px) {
    .opt-new-wrapper .opt-con.pichas.careerWorthHas {
        margin-right: 0%\0
    }

    .result-title {
        font-size: 30px\0
    }

    .result-b {
        font-size: 24px\0
    }

    @-moz-document url-prefix() {
        .opt-new-wrapper .opt-con.pichas.careerWorthHas {
            margin-right: 1%
        }

        .result-title {
            font-size: 30px
        }

        .result-b {
            font-size: 24px
        }
    }
}

html.ie10 .h27-3 {
    height: 91px
}

html.ie10 .h27-4 {
    height: 120px
}

@media screen and (max-width: 500px) {
    .progress-warpper {
        display: flex;
        width: 100%
    }

    .progress-warpper .text {
        flex: 1 1 280px
    }

    .operation {
        display: flex;
        justify-content: center
    }

    .self-wrapper h1.title {
        font-size: 20px;
        margin: 0px 0px
    }

    .self-wrapper .wran {
        font-size: 14px
    }

    .result-b {
        font-size: 18px
    }

    .result-title {
        margin: 0 auto;
        text-align: center;
        font-size: 18px
    }

    .test-con {
        padding: 0px 0px 10px
    }

    .careerInterest .opt-aside {
        display: flex;
        position: inherit;
        width: 100%;
        align-items: center
    }

    .careerInterest .opt-aside img {
        width: 100px;
        height: 100px
    }

    .careerInterest .opt-aside p.opt-p {
        flex: 1 240px;
        margin-left: 10px
    }

    .willpowertest {
        margin-left: 25%
    }

    .talkAbility .talk-table.width120 {
        display: none
    }

    .talkAbility .talk-table.width616 {
        width: 100%
    }

    .self-wrapper.meetAbility .h146 {
        height: 295px
    }

    .onlineTest .test-wrapper {
        min-height: 500px
    }

    .onlineTest .online-ul {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100vw;
        margin-left: 0px;
        transform: translate(-50%);
        max-height: 100px;
        overflow: auto
    }

    .onlineTest p.score {
        top: -145px
    }

    .onlineTest .test-con .que-title {
        max-height: 50px;
        overflow-y: auto
    }

    .righthas .opt-aside {
        display: flex;
        justify-content: center;
        position: inherit;
        top: 0px;
        width: 100%
    }

    .righthas .opt-aside img {
        width: 180px;
        height: 145px
    }

    .righthas .opt-aside p.opt-p {
        margin-left: 0px
    }

    .onlineTest.six-two-test .online-ul {
        position: absolute;
        bottom: 8%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translate(0);
        left: 0;
        margin: 0 !important
    }

    .onlineTest.six-two-test .online-ul li {
        width: 22px;
        height: 22px;
        line-height: 22px;
        margin: 2px
    }

    .six-two-test .self-wrapper h1.title {
        font-size: 20px;
        margin: 12px 0
    }

    .six-two-test .self-wrapper {
        background-size: 100% 50%
    }

    .six-two-test .progress-warpper {
        display: block
    }

    .six-two-test .progress {
        float: none;
        width: 80%;
        margin: 0 auto;
        height: 9px;
        line-height: 10px
    }

    .six-two-test .progress .progress-bar {
        top: -4px;
        height: 16px;
        line-height: 16px
    }

    .six-two-test .progress-warpper .dot {
        margin: 0 0 0 10px
    }

    .six-two-test .progress-warpper .text {
        float: none;
        width: 100%;
        text-align: center;
        margin: 6px 0 0;
        font-size: 14px
    }

    .six-two-test .topInfo {
        padding: 3px 2px;
        line-height: 20px
    }

    .six-two-test .test-con {
        padding: 10px
    }

    .six-two-test .operation .btn {
        padding: 6px 15px
    }

    .six-two-test .test-con h2.title {
        /* font-size: 16px */
    }

    .six-two-test .finish-test {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .six-two-test .finish-test img {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto !important
    }

    .onlineTest.six-two-test.many-six-two-test .finish-test img {
        width: auto
    }

    .onlineTest.six-two-test .opt-new-wrapper .opt-con {
        max-height: 72px;
        overflow-y: scroll
    }

    .onlineTest.six-two-test.many-six-two-test .finish-test .result-new .test-con .ftitle img {
        width: auto
    }

    #result {
        padding: 0
    }

    .guali {
        width: 100%;
        margin: 0 auto;
        left: 0
    }

    #result .result-new .test-con {
        padding: 10px
    }

    .result-new .test-con .clear {
        display: none
    }

    .result-new .test-con .ftitle {
        margin-top: 20px;
        width: 100%
    }

    .result-new-title {
        font-size: 14px
    }

    .result-new-title .start {
        margin-left: 10px;
        font-size: 26px
    }

    .result-new-title .end {
        font-size: 20px
    }

    .result-new .ftext p img {
        width: 80px;
        height: 98px
    }

    .accordion .link i.fa {
        top: 2px
    }

    .accordion .link {
        padding: 10px;
        font-size: 16px
    }

    .submenu {
        padding: 0 10px 20px
    }

    .accordion p.content {
        font-size: 14px;
        line-height: 26px
    }

    .accordion p.question {
        font-size: 16px;
        line-height: 30px
    }

    .finish-test p.text-indent {
        line-height: 26px
    }

    .onlineTest.six-two-test .progress-warpper {
        padding: 4px 0 0
    }

    .six-two-test .opt-new-wrapper .radio-label {
        font-size: 16px;
    }

    .six-two-test .operation {
        position: static;
        margin: 0;
    }

    .ok-body.onlineTest.six-two-test {
        height: auto;
    }

    /* 6.2��ҵ��Ŀ */
    #result .mr0 .layui-inline {
        display: flex;
    }

    #result .mr0 .layui-inline:nth-child(2) .layui-form-label {
        width: 80px!important;
    }

    #result .mr0 .layui-inline:nth-child(3) .layui-form-label {
        width: 80px!important;
    }

    #result .mr0.layui-form-item .layui-input-inline {
        margin-left: 10px!important;
    }
}

@media screen and (max-width: 321px) {
    .result-new-title .start {
        font-size: 20px
    }

    .result-new-title .end {
        font-size: 18px
    }

    .willpower img {
        margin-left: 0
    }

    .progress {
        margin: 0
    }

    .onlineTest.six-two-test.many-six-two-test .finish-test .result-new .test-con .ftitle img {
        width: 80px
    }

    .accordion .link {
        font-size: 14px
    }

    .six-two-test .self-wrapper h1.title {
        font-size: 18px;
        margin: 4px 0
    }

    .self-wrapper .wran {
        font-size: 12px
    }

    .six-two-test .test-wrapper {
        margin: 0 auto
    }

    .progress-warpper .text {
        flex: 1 1 355px
    }

    .onlineTest .online-ul {
        width: 100%
    }

    .onlineTest .self-wrapper {
        zoom: 0.7 }

    .six-two-test.onlineTest .self-wrapper {
        zoom: 1 }
}

@media screen and (device-width: 320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2) {
    .onlineTest.six-two-test .progress-warpper {
        padding: 0
    }
}

@media screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
}

@media screen and (max-width: 500px) {
    .self-wrapper {
        zoom: 1;
        min-height: initial;
    }

    .result-info {
        font-size: 16px;
    }

    .test-wrapper {
        min-height: initial;
        margin-bottom: 40px;
		box-shadow: none;
		padding: 20px 4%!important;
    }

    .willpower p.tip {
        font-size: 16px;
    }

    .willpower img {
        width: 100%;
    }

    .wordhas p.tip {
        font-size: 16px;
    }

    .test-con h2.title {
        font-size: 15px;
        margin-top: 10px;
    }

    .test-con .que-title {
        min-height: initial;
    }

    .operation {
        margin: 20px auto 20px;
        position: initial;
        overflow: auto;
        max-width: 100%;
    }

    .test-con .que-title {
        font-size: 16px;
    }

    .onlineTest p.score {
        float: initial;
        bottom: -85px;
        right: 10px;
        top: inherit;
        font-size: 18px;
    }

    .talkAbility .btn {
        margin: 20px auto 0px;
        transform: translateX(-50%);
    }

    .talkAbility p.score {
        font-size: 18px;
    }

    .opt-new-wrapper .check-label {
        font-size: 16px;
    }

    .opt-new-wrapper .radio-label {
        font-size: 16px;
    }

    .onlineTest .online-ul {
        bottom: 0px;
        position: initial;
        transform: translate(0%);
        left: 0px;
    }
}

@media screen and (max-width: 321px) {
    .onlineTest .self-wrapper {
        zoom: 1;
    }

    .opt-new-wrapper .opt-con.pichas .radio-label {
        padding: 1px;
    }
}

.operation.phone {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0px auto;
    background: #ededed;
    width: 100%;
    z-index: 2000;
    height: 40px;
}

.operation.phone + div.self-wrapper {
    padding-top: 10px;
    margin: 40px auto 10px;
}

.operation.phone + div.switch {
    padding-top: 10px;
    margin: 40px auto 10px;
}

@media screen and (max-width: 768px) {
    .attention div#tabPage-0 div {
        width: 100%;
        margin: 20px auto;
        display: flex;
    }

    .attention div#tabPage-0 div input {
        flex: 1;
    }
}