#manualContent {
    background: url(../image/index_background.jpg) no-repeat;
    background-size: cover;
}

.manual_left {
    width: 3.89rem;
    height: 100%;
    float: left;
}

.manual_center {
    width: 5.77rem;
    height: 100%;
    float: left;
}

.manual_right {
    width: 3.67rem;
    height: 100%;
    float: left;
}

.speedometer {
    width: 2.94rem;
    height: 1.55rem;
    background: rgba(255, 255, 255, .3);
    border-radius: 2.94rem 2.94rem 0 0;
    margin-top: .45rem;
    margin-left: .55rem;
    position: relative;
}

.mileage {
    height: 1rem;
    width: 100%;    
    margin-top: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mileage>span {
    font-size: 0.5rem;
    color: white;
    margin-right: 0.3rem;
}

.mileage_reset {
    background: rgba(255, 255, 255,0.3);
    color: white;
    padding: 0.1rem;
    border: none;
    border-radius: .06rem;
}

.up_down_arrowKey {
    width: 2.66rem;
    height: 2.66rem;
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    margin-left: .66rem;
    margin-top: 0.2rem;
    text-align: center;
}

.up_down_arrowKey img {
    width: 70%;
}

.up_arrowKey {
    margin-top: 2px;
}

.down_arrowKey {
    transform: rotate(180deg)
}

.ultrasonic {
    width: 5.77rem;
    height: 3.43rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    margin-top: .45rem;
    text-align: center;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.06) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.06) 75%, rgba(255, 255, 255, 0.06) 76%, transparent 77%, transparent),linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.06) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.06) 75%, rgba(255, 255, 255, 0.06) 76%, transparent 77%, transparent);
    background-size: 1rem 1rem;
    position: relative;
}

.ultrasonic_img_block {
    position: relative;
}

.ultrasonic_dot_block {
    width: 100%;
    height: 2.8rem;
    position: absolute;
    bottom: 0.05rem;
}

.ultrasonic_dot {
    width: 0.1rem;
    height: 0.1rem;
    position: absolute;
    border-radius: 50%;
    background: red;
    bottom: 0%;
    left: 50%;
}


.ultrasonic_img_block:after {
    content: ' ';
    display: block;
    /* background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.06) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.06) 75%, rgba(255, 255, 255, 0.06) 76%, transparent 77%, transparent); */
    width: 1px;
    height: 77%;
    position: absolute;
    top: 0.7rem;
    left: 2.86rem;
    /* animation: radar-beam 5s infinite alternate; */
    /* animation-timing-function: linear; */
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
    background: #000;
}

@keyframes radar-beam {
    0% {
      transform: rotate(-90deg);
    }
    100% {
      transform: rotate(90deg);
    }
}

@keyframes blips {
    14% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    14.0002% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    25% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    26% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
    }
    100% {
        background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
    }
}
.ultrasonic img {
    width: 95%;
    margin-top: 30px;
}

.line_of_inspection {
    width: 5.77rem;
    height: 1.84rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    margin-top: .2rem;
}

.line_of_inspection_item {
    width: 33%;
    float: left;
    height: 100%;
    background: url(../image/line_of_inspection.png) no-repeat center;
    background-size: 60%;
    border-right: 1px solid gray;
    position: relative;
}

.line_of_inspection_item_danger {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.3;
}

.line_of_inspection_item_danger img{
    width: 100%;
    display: none;
}


.line_of_inspection_item:nth-last-child(1){
    border-right: none;
}


.power {
    width: 1.72rem;
    height: 1.72rem;
    background: rgba(255, 255, 255, .3);
    border-radius: 5px;
    margin-left: 1rem;
    margin-top: .45rem;
    position: relative;
    text-align: center;
    line-height: 1.72rem;
}

.power>span {
    font-size: 0.6rem;
    color: white;
}

 /*支持IE9及以上*/
.circle-bar { 
    font-size:200px; 
    width: 1.5rem; 
    height: 1.5rem; 
    position: relative;  
    background-color: #333; 
}
.circle-bar-left,.circle-bar-right { 
    width: 1rem; 
    height: 1rem; 
    background-color: #eee; 
}
/*
    这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
    clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right { 
    clip:rect(0,auto,auto,.5rem); 
}
 .circle-bar-left { 
    clip:rect(0,.5rem,auto,0); 
}
 
.mask { 
    width: 0.8rem; 
    height: 0.8rem;  
    background-color: #fff;
    text-align: center;
    line-height: 0.2rem; 
    color:rgba(0,0,0,0.5); 
}
.mask :first-child { 
    font-size: 0.3rem; 
    height: 0.8rem; 
    line-height: 0.8rem; 
    display: block;  
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
.circle-bar * {  
    position: absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
}
/*自身以及子元素都是圆*/
.circle-bar, .circle-bar > * { 
    border-radius: 50%; 
}

.power_slider {
    margin-left: 0.8rem;
    margin-top: 0.5rem;
}

.left_right_arrowKey {
    width: 2.66rem;
    height: 2.66rem;
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    margin-left: .6rem;
    margin-top: 0.55rem;
    position: relative;
}


.left_arrowKey_div, .right_arrowKey_div {
    display: inline-block;
    width: 1.33rem;
    height: 2.66rem;
}

.left_arrowKey_div {
    float: left;
    /* position: absolute;
    top: 36px;
    left: -15px; */
}

.right_arrowKey_div {
    float: left;
    /* position: absolute; */
}   


.left_arrowKey {
    transform: rotate(-90deg);
    position: relative;
    top: 0.7rem;
    left: -0.3rem;
    height: 46%;
}

.right_arrowKey {
    transform: rotate(90deg);
    position: relative;
    top: 0.7rem;
    left: -0.3rem;
    height: 46%;
}

.scale_list {
    width: 2.44rem;
    height: 1.05rem;
    border-radius: 2.44rem 2.44rem 0 0;
    position: relative;
    top: 10px;
    left: 13px;
}

.scale_item {
    width: 2px;
    height: 6px;
    background: white;
    position: absolute;
    left: 1.22rem;
    top: 0px;
    -webkit-transform-origin: 0 1.22rem;
    transform-origin: 0 1.22rem;
}

li.scale_item:nth-child(1) { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
li.scale_item:nth-child(2) { -webkit-transform: rotate(-81deg); transform: rotate(-81deg);}
li.scale_item:nth-child(3) { -webkit-transform: rotate(-72deg); transform: rotate(-72deg);}
li.scale_item:nth-child(4) { -webkit-transform: rotate(-63deg); transform: rotate(-63deg);}
li.scale_item:nth-child(5) { -webkit-transform: rotate(-54deg); transform: rotate(-54deg);}
li.scale_item:nth-child(6) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
li.scale_item:nth-child(7) { -webkit-transform: rotate(-36deg); transform: rotate(-36deg); }
li.scale_item:nth-child(8) { -webkit-transform: rotate(-27deg); transform: rotate(-27deg); }
li.scale_item:nth-child(9) { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
li.scale_item:nth-child(10) { -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
li.scale_item:nth-child(11) { -webkit-transform: rotate(0deg) ; transform: rotate(0deg) ;}
li.scale_item:nth-child(12) { -webkit-transform: rotate(9deg) ; transform: rotate(9deg) ;}
li.scale_item:nth-child(13) { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
li.scale_item:nth-child(14) { -webkit-transform: rotate(27deg); transform: rotate(27deg); }
li.scale_item:nth-child(15) { -webkit-transform: rotate(36deg); transform: rotate(36deg); }
li.scale_item:nth-child(16) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
li.scale_item:nth-child(17) { -webkit-transform: rotate(54deg); transform: rotate(54deg); }
li.scale_item:nth-child(18) { -webkit-transform: rotate(63deg); transform: rotate(63deg); }
li.scale_item:nth-child(19) { -webkit-transform: rotate(72deg); transform: rotate(72deg); }
li.scale_item:nth-child(20) { -webkit-transform: rotate(81deg); transform: rotate(81deg); }
li.scale_item:nth-child(21) { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.speedValue {
    position: absolute;
    top: 0.8rem;
    left: 1rem;
    color: white;
}

.speedValue .text {
    font-size: 26px;
    float: left;
}   

.speedValue .unit {
    font-size: 20px;
    float: left;
    line-height: 30px;
}

input[type=range] {
    -webkit-appearance: none;
    width: 2.12rem;
    border-radius: 10px;
    background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
    background-size: 0% 100%;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track{
    height: .12rem;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .0125rem .0125rem #0d1112;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 30px;
    width: 10px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: -12px;
}

