/*320px布局*/
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: linear-gradient(to bottom, #a0a0a0, #e7e7e7);
    }

    body {
        position: relative;
        font-size: 16px;
        /*实际相当于14px*/
    }

    html,
    body {
        padding: 0;
        margin: 0;
    }

    input {
        background-color: #ededed;
        outline-style: none;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 8px 12px;
        width: 120px;
        font-size: 14px;
        font-family: "Microsoft soft";
    }

    input:focus {
        border-color: #5699de;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #5699de;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #5699de
    }

    button {
        display: inline-block;
        line-height: 20px;
        white-space: nowrap;
        cursor: pointer;
        background: #5699de;
        border: 1px solid #5699de;
        color: #ffffff;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 4px;
    }

    button:hover {
        opacity: 0.75;
    }

    .filter-list {
        display: flex;
        color: #333333;
    }

    .filter-item {
        margin-left: 12px;
        display: flex;
        align-items: center;
    }
    .filter-item span {
        padding: 0 8px;
    }

    .filter-item input {
        margin: 0 6px;
    }

    h2 {
        color: #333333;
    }

    .card-content {
        margin: 12px;
        margin-top: 200px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #ededed;
        overflow: hidden;
        color: #303133;
        width: 400px;
        height: 600px;
    }

    .card-content .card-title {
        padding: 18px 20px;
        border-bottom: 1px solid #cacaca;
        box-sizing: border-box;
        font-size: 18px;
        color: #5699de;
    }

    .card-content .card-item {
        padding: 0 20px;
        margin-top: 12px;
    }

    .b-header {
        position: fixed;
        z-index: 3;
        padding: 12px;
    }

    .b-content {
        /* padding: 12px; */
        width: 100vw;
        height: 100vh;
        /* position: fixed; */
        z-index: 3;
        display: flex;
        background: linear-gradient(to bottom, #a0a0a0, #e7e7e7);
    }

    #plate-dom {
        flex: 1;
    }

    #Scene {
        width: 100%;
        height: 100%;
    }

    .b-content .b-left {
        width: 800px;
    }

    .card-tips {
        margin-left: 12px;
    }

    .plate-item-content {
        display: flex;
        justify-content: space-around;
    }

    .plate-item-l {
        width: 122.4px;
        height: 16.8px;
        background-color: #f0825f;
        border: 1px solid #d7d7d7;
    }

    .plate-item-s {
        width: 60.6px;
        height: 16.8px;
        background-color: #f0825f;
        border: 1px solid #d7d7d7;
    }

    .plate-item-cl {
        width: 122.4px;
        height: 16.8px;
        background-color: #7fc4f3;
        border: 1px solid #d7d7d7;
    }

    .plate-item-cs {
        width: 60.6px;
        height: 16.8px;
        background-color: #7fc4f3;
        border: 1px solid #d7d7d7;
    }

    .plate-item:hover {
        opacity: 0.75;
        cursor: pointer;
    }

    #plate-content {
        position: absolute;
        top: -200000px;
    }

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

    .Room3D_floor {
        overflow: hidden;
    }

    .language {
        position: absolute;
        right: 42px;
        top: 30px;
        z-index: 999;
        display: flex;
        height: 120px;
        align-items: center;
    }

    .export-btn {
        position: absolute;
        right: 42px;
        top: 120px;
        min-width: 120px;
        z-index: 999;
    }

    #language {
        width: 120px;
        height: 35px;
        border-radius: 4px;
        padding: 0 12px;
        font-size: 14px;
    }

    .logo {
        position: absolute;
        right: 42px;
        top: 30px;
        z-index: 999;
        display: flex;
        height: 14px;
        align-items: center;
    }

    #loader-wrapper {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:9999999;
    }
    #loader {
        display:block;
        position:relative;
        left:50%;
        top:50%;
        width:150px;
        height:150px;
        margin:-75px 0 0 -75px;
        border-radius:50%;
        border:3px solid transparent;
        border-top-color:#FFF;
        -webkit-animation:spin 2s linear infinite;
        -ms-animation:spin 2s linear infinite;
        -moz-animation:spin 2s linear infinite;
        -o-animation:spin 2s linear infinite;
        animation:spin 2s linear infinite;
        z-index:1001;
    }
    #loader:before {
        content:"";
        position:absolute;
        top:5px;
        left:5px;
        right:5px;
        bottom:5px;
        border-radius:50%;
        border:3px solid transparent;
        border-top-color:#FFF;
        -webkit-animation:spin 3s linear infinite;
        -moz-animation:spin 3s linear infinite;
        -o-animation:spin 3s linear infinite;
        -ms-animation:spin 3s linear infinite;
        animation:spin 3s linear infinite;
    }
    #loader:after {
        content:"";
        position:absolute;
        top:15px;
        left:15px;
        right:15px;
        bottom:15px;
        border-radius:50%;
        border:3px solid transparent;
        border-top-color:#FFF;
        -moz-animation:spin 1.5s linear infinite;
        -o-animation:spin 1.5s linear infinite;
        -ms-animation:spin 1.5s linear infinite;
        -webkit-animation:spin 1.5s linear infinite;
        animation:spin 1.5s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
    }@keyframes spin {
        0% {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
    }#loader-wrapper .loader-section {
        position:fixed;
        top:0;
        width:50%;
        height:100%;
        background:#6a6c70;
        opacity: 0.35;
        z-index:1000;
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    #loader-wrapper .loader-section.section-left {
        left:0;
    }
    #loader-wrapper .loader-section.section-right {
        right:0;
    }
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        transform:translateX(-100%);
        -webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
        transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
    }
    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform:translateX(100%);
        -ms-transform:translateX(100%);
        transform:translateX(100%);
        -webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
        transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
    }
    .loaded #loader {
        opacity:0;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility:hidden;
        -webkit-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
        transform:translateY(-100%);
        -webkit-transition:all 0.3s 1s ease-out;
        transition:all 0.3s 1s ease-out;
    }
    .no-js #loader-wrapper {
        display:none;
    }
    .no-js h1 {
        color:#222222;
    }
    #loader-wrapper .load_title {
        font-family:'Open Sans';
        color:#FFF;
        font-size:19px;
        width:100%;
        text-align:center;
        z-index:9999999999999;
        position:absolute;
        top:60%;
        opacity:1;
        line-height:30px;
    }
    #loader-wrapper .load_title span {
        font-weight:normal;
        font-style:italic;
        font-size:13px;
        color:#FFF;
        opacity:0.5;
    }