.tech-recognition-content {
    position: relative;
    width: 100%;
    height: 6.54rem
}

.tech-img-content {
    width: 8.40rem;
    height: 100%;
    float: left
}

.tech-recognition-scan {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 8.40rem;
    border-bottom: 0.3rem solid #3e88f1;
    -webkit-animation: scan 1.2s infinite;
    -moz-animation: scan 1.2s infinite;
    animation: scan 1.2s infinite;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#3e88f1));
    background: -webkit-linear-gradient(top,transparent,#3e88f1);
    background: -moz-linear-gradient(top,transparent,#3e88f1);
    background: linear-gradient(180deg,transparent,#3e88f1)
}

.tech-canvas-container {
    position: relative;
    width: 8.40rem;
    height: 5.24rem;
    background: #343434
}

.tech-canvas-personnum {
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    padding: 0.06rem 0.1rem;
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 0.14rem;
    z-index: 1
}


.result-item {
    list-style: none;
    padding: 0;
    position: relative;
    margin: 0 0 0.14rem;
    overflow: hidden;
    line-height: 0.21rem;
}

.result-des,.result-name {
    display: inline-block;
    vertical-align: top;
    font-size: 0.14rem;
    color: #333;
    line-height: 0.2rem
}

.result-name {
    width: 0.9rem
}

.result-des {
    width: 1.96rem
}

.result-num,.result-text {
    display: inline-block;
    vertical-align: top;
    font-size: 0.14rem;
    line-height: 0.24rem;
    color: #333;
    text-align: left
}

.result-num {
    width: 0.42rem
}

.result-text {
    width: 2.38rem
}

.result-title {
    color: #666
}

.result-location {
    margin-left: 0.42rem;
    padding-top: 0.8rem
}

.result-location .result-text {
    width: 1.25rem;
    color: #666
}


.ai-module-tab {
    height: 0.32rem;
    position: relative;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #eee;
    text-align: center;
    background: #fff;
    box-sizing: content-box;
}

.ai-module-tab-container {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.ai-module-tab-item {
    display: inline-block;
    margin-right: 0.4rem;
    line-height: 0.3rem;
    -webkit-transition: color .3s,font-size .3s;
    -moz-transition: color .3s,font-size .3s;
    transition: color .3s,font-size .3s;
    cursor: pointer;
    font-size: 0.16rem;
    vertical-align: top;
}

.ai-module-tab-item:hover {
    color: #036fe2
}

.ai-module-tab-item-active {
    font-size: 0.18rem;
    font-weight: 700;
    color: #036fe2
}

.ai-module-tab-item:last-child {
    margin-right: 0
}


.demo-canvas{
    width: 8.40rem;
    height: 5.24rem;
    position: relative;
}

.demo-canvas-centerlize {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.hljs-comment,.hljs-quote {
    color: #655f6d
}

.hljs-attribute,.hljs-link,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable {
    color: #be4678
}

.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type {
    color: #aa573c
}

.hljs-bullet,.hljs-string,.hljs-symbol {
    color: #2a9292
}

.hljs-section,.hljs-title {
    color: #576ddb
}

.hljs-keyword,.hljs-selector-tag {
    color: #955ae7
}

.hljs-addition,.hljs-deletion {
    color: #19171c;
    display: inline-block;
    width: 100%
}

.hljs-deletion {
    background-color: #be4678
}

.hljs-addition {
    background-color: #2a9292
}

.hljs {
    display: block;
    overflow-x: auto;
    background: #efecf4;
    color: #585260;
    padding: .5em
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.image-select {
    padding: 0.2rem 0 0.2rem 0.2rem;
    background-color: #ebebeb
}

.image-select:after {
    content: "";
    display: table;
    clear: both
}

.image-select-item {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 1.44rem;
    height: 0.9rem;
    margin-right: 0.2rem;
    cursor: pointer
}

.image-select-item.is-active {
    border: 2px solid #0073eb
}

.image-select-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    max-height: 100%
}

.image-select-item:last-child {
    margin-right: 0
}

.image-input {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rem;
    padding: 0.2rem 0.1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;
    background: rgba(0,0,0,.5)
}

.image-input .image-input-container {
    position: relative;
    width: 100%;
    height: 0.38rem;
    font-size: 0
}

.image-input .image-input-container .image-button,.image-input .image-input-container .image-local,.image-input .image-input-container .image-url {
    display: inline-block;
    vertical-align: top;
    height: 0.38rem;
    line-height: 0.36rem;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #666;
    outline: none;
    background-color: rgba(0,0,0,.45)
}

.image-input .image-input-container .image-button:hover,.image-input .image-input-container .image-local:hover {
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    cursor: pointer
}

.image-input .image-input-container .image-url {
    width: 4.92rem;
    font-size: 0.14rem;
    line-height: 0.36rem;
    outline: none;
    text-indent: 0.11rem;
    border-right: 0
}

.image-input .image-input-container .image-button {
    min-width: 1.16rem;
    font-size: 0.14rem
}

.image-input .image-input-container .image-button.image-button-active {
    background-color: #0073eb;
    border-color: #0073eb;
    color: #fff
}

.image-input .image-input-container .image-text {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.30rem;
    font-size: 0.16rem;
    color: #ccc;
    line-height: 0.38rem;
    background: transparent;
    border: none
}

.image-input .image-input-container .image-local {
    width: 1.16rem;
    font-size: 0.16rem;
    line-height: 0.38rem;
    text-align: center;
    color: #fff;
    background-color: #0073eb;
    border: none
}

.image-input .image-input-container .image-local-input {
    width: 100%;
    height: 100%;
    display: none
}

.image-input .image-notice {
    margin-top: 0.10rem;
    color: #ccc;
    font-size: 0.12rem
}

.no-remote {
    height: 0.70rem;
    padding: 0.16rem 0.20rem
}

.no-remote .image-input-container .image-button,.no-remote .image-input-container .image-text,.no-remote .image-input-container .image-url {
    display: none
}

.no-remote .image-input-container .image-local {
    float: right
}

.no-remote .image-notice {
    position: absolute;
    margin: 0;
    top: .26rem;
    left: .20rem
}

.demo-data-error-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center
}

.demo-data-error-msg img {
    width: 1.04rem
}

.demo-data-error-msg .error-text {
    width: 1.76rem;
    margin-top: .20rem;
    line-height: .26rem;
    font-size: .16rem;
    color: #fff
}

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

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

@-moz-keyframes loadImg {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

@keyframes loadImg {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

.demo-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.demo-loading-img {
    width: .32rem;
    height: .32rem;
    margin: 0 auto;
    background-image: url(//aip.bdstatic.com/portal-pc-node/dist/1602762845033/images/loading.png);
    -webkit-animation: loadImg .7s infinite;
    -moz-animation: loadImg .7s infinite;
    animation: loadImg .7s infinite
}

.demo-loading-text {
    margin-top: .20rem;
    font-size: .14rem;
    color: #666;
    text-align: center
}

.demo-collapse {
    height: 100%;
    overflow: hidden
}

.demo-collapse-item {
    padding-top: .50rem
}

.demo-collapse-item,.demo-collapse-item-title {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.demo-collapse-item-title {
    margin-top: -.50rem;
    border-top: 1px solid #e1e1e1;
    height: .50rem;
    line-height: .50rem;
    padding-left: .20rem;
    position: relative;
    cursor: pointer
}

.demo-collapse-item-arrow {
    position: absolute;
    top: 50%;
    right: 0.08rem;
    -webkit-transform: translateY(-50%) rotate(0);
    -moz-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
    font-size: .16rem;
    width: .12rem;
    height: .16rem;
    background: url(//aip.bdstatic.com/portal-pc-node/dist/1602762845033/images/demo/components/common-icon/arrow.png) no-repeat 50%;
    -moz-background-size: cover;
    background-size: cover;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    -moz-transition: transform ease-in-out .3s,-moz-transform ease-in-out .3s;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out,-moz-transform .3s ease-in-out;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.demo-collapse-item-arrow.is-active {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

.demo-collapse-item-cnt {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0.20rem;
    overflow: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all ease-in-out .3s;
    transition: all .3s ease-in-out;
}

.demo-json {
    float: left;
    width: 3.40rem;
    height: 100%;
    word-wrap: break-word;
    word-break: break-all;
    background-color: #fafafa
}

.demo-json-title {
    font-size: .16rem
}

.demo-json-text {
    width: 100%;
    margin-top: .10rem;
    color: #666;
    line-height: .21rem
}

.demo-json-line {
    margin-top: .16rem
}

.demo-json-req {
    font-size: .14rem
}

.demo-json-req,.demo-json-res,.demo-result {
    overflow-y: auto;
    overflow-x: hidden;
    line-height: .21rem;
    height: 6.04rem;
}

.demo-json-content {
    white-space: pre-wrap;
    font-size: .14rem;
    color: #404040;
    line-height: .24rem;
    margin-top: .08rem;
}

.demo-json-link {
    margin-top: .32rem;
    font-size: .12rem;
    color: #0073eb;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: top;
}

.demo-json .hljs-attr {
    color: #a11
}


.result-item {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    margin-bottom: 0.14rem;
    font-size: 0;
    overflow: hidden
}

.result-location,.result-num,.result-text {
    display: inline-block;
    vertical-align: top;
    font-size: 0.14rem;
    line-height: 0.24rem;
    color: #333;
    text-align: left
}

.result-num {
    width: 0.42rem
}

.result-text {
    width: 2.38rem
}

.result-title {
    color: #666
}

.result-location {
    margin-left: 0.42rem;
    padding-top: 0.08rem
}

.result-location .result-text {
    width: 1.25rem;
    color: #666
}

@-webkit-keyframes scan {
    0% {
        height: 0
    }

    to {
        opacity: 0;
        height: 5.24rem
    }
}

@-moz-keyframes scan {
    0% {
        height: 0
    }

    to {
        opacity: 0;
        height: 5.24rem
    }
}

@keyframes scan {
    0% {
        height: 0
    }

    to {
        opacity: 0;
        height: 5.24rem
    }
}

.tech-recognition {
    background: #f4f5f7
}

.tech-recognition-content {
    position: relative;
    width: 100%;
    height: 6.54rem
}

.tech-img-content {
    width: 8.4rem;
    height: 100%;
    float: left
}

.tech-recognition-scan {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 8.4rem;
    border-bottom: 3px solid #3e88f1;
    -webkit-animation: scan 1.2s infinite;
    -moz-animation: scan 1.2s infinite;
    animation: scan 1.2s infinite;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#3e88f1));
    background: -webkit-linear-gradient(top,transparent,#3e88f1);
    background: -moz-linear-gradient(top,transparent,#3e88f1);
    background: linear-gradient(180deg,transparent,#3e88f1)
}

.tech-canvas-container {
    position: relative;
    width: 8.4rem;
    height: 5.24rem;
    background: #343434
}

.tech-canvas-personnum {
    position: absolute;
    left: .1rem;
    top: .1rem;
    padding: 0.6 .1rem;
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 0.14rem;
    z-index: 1
}