html,body{
    width: 100%;
    height:100%;
    overflow: hidden;
}
body{
    background: url('../images/devicedetails/background.png') no-repeat center;
    background-size:cover; 
    padding:0 3%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    position:relative;

}
.content{
    top: -4.5%;
    position: relative;
    z-index:1; 
    height: 100%;
}
.body_bottom {
    top: 0.5rem; 
    position: relative;
    height: 100%;
}
.detailstop{
    width:100%;
    /* height:11%; */
    border-top:1px solid transparent;
}

.family{
    width: 100%;
    height:3%;
    position: relative; 
    box-sizing: border-box;
    -webkit-box-sizing:border-box;   
    /* height:56%; */
    border-top:1px solid transparent;
    display:flex;
    display:-webkit-flex;
    
    justify-content: space-between;  
    -webkit-justify-content: space-between;   
    align-items:flex-end;
    -webkit-align-items:flex-end; 
    /* top:-20%;  */
}
/* .family img{
    width: 4rem;
     width : 50%;  
    height:1.333333333333rem;
} */
.family .logo{
    width: 4rem;
    /* width : 50%;  */
    height:1.333333333333rem;
}
.family .left{    
    width: 50%; 
    height: 2.1rem;
    /* display:flex;
    display:-webkit-flex;
    flex-direction: column; 
    justify-content: center;  
    -webkit-justify-content: center;   
    align-items:flex-start;
    -webkit-align-items:flex-start;  */
    /* height: 3rem; */
}
.family .right{
    width: 50%; 
    height: 2.3rem; 
    display:flex;
    display:-webkit-flex;
    flex-direction: column; 
    -webkit-flex-direction: column; 
    justify-content: center;  
    -webkit-justify-content: center;   
    align-items:flex-end;
    -webkit-align-items:flex-end; 
    
}
/* .family .refresh{
    width: 2.8rem;
    margin:0 auto;
    color:rgba(255,255,255,0.5);
    font-size:0.5rem;
    background-color:rgba(0,0,0,0.1);
    line-height:1.1rem;
    border-radius:0 0 0.4rem 0.4rem;
    text-align:center;
    margin-bottom:0.2rem;
    margin-left:10%;
    flex-grow: 1; 
} */
.refresh{
    width: 6rem;
    margin:0 auto;
    color:rgba(255,255,255,0.5);
    font-size:0.5rem;
    background-color:rgba(0,0,0,0.1);
    line-height:0.8rem;
    border-radius:0rem 0rem 0.3rem 0.3rem;
    text-align:center;
    margin-bottom:0.6rem;
}
.network_container{
    display: block; 
    position: relative; 
    top: -4%;
}
.message_space {
    position: relative;
    height: 8%; 
    top: -5%;
}
.container {
    top: -1%;
    position: relative;
    z-index:1; 
    display: flex; 
    display: -webkit-flex; 
    flex-direction: column; 
    justify-content: space-between;
    -webkit-justify-content: space-between;
    height: 96%;
}
.family .right .master{
    
    color:#fff;
    font-size:0.5rem;
    line-height:0.7rem;
    text-align:right;    
    flex-grow: 1;
} 
.family .right .master div{
    
    color:#fff;
    font-size:0.5rem;
    line-height:0.7rem;
    text-align:right;
    
}

/*云提供  */
.freshairprovide{
    color:rgba(255,255,255,0.3);
    font-size:0.42rem;
    text-align:right;
}

/* 设备参数 */
.parameters{
    width: 100%;
    box-sizing:border-box;
    height:50%;
    /*background-color: pink;*/
}
.parameters .top {
    width: 100%;
}
.parameters .top .content{
    width: 48%;
    float:left;
    border:2px solid rgba(255,255,255,0.1);
    border-radius:0.8rem;
    text-align:center;
    color:#fff;
    background-color: rgba(255,255,255,0.1);
    box-sizing:border-box;
    display:flex;
    display:-webkit-flex;
    -webkit-flex-direction:column;
    -moz-flex-direction:column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    position:relative;
    padding-bottom:0.9rem;
}
.parameters .top li>div{
    font-size:0.7rem;
    margin-top:0.4rem;
}
.parameters .top li i{
    display:inline-block;
    width: 2.1rem;
    height: 1rem;
    /* background-color: #00c31b; */
    border-radius:0.3rem;
    margin-left:0.7rem;
    text-align:center;
    line-height:1rem; 
    font-size:0.7rem;
    padding-top:2px;
    font-style:normal;
}

/* .parameters .top li strong{
    display:inline;
    font-size:2.8rem; 
} */

.parameters .top .co2_part {
    float:right; 
}
/*室外地址  */
.outaddress{
    width: 100%;
    border:2px solid rgba(255,255,255,0.1);
    border-radius:0.8rem;
    height:4rem;
    margin-top:2%;
    display:flex;
    display:-webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.outaddress .position{
    width: 48%; 
    /* height: 100%; 
    float:left; */
    display:flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;   
    justify-content: space-around ;
    -webkit-justify-content: space-around; 
    align-items: flex-start; 
    -webkit-align-items: flex-start; 
    -webkit-box-sizing:border-box;
    margin-bottom: 4.6%; /**/
    margin-top: 3.5%; 
    margin-left: 4%; 
}

.outaddress .position .up{    
    height:1 rem;    
    margin-right:0.2rem;
    margin-top:0.15rem;    
}
.outaddress .position .bottom{    
    height:1 rem;    
    margin-right:0.2rem;
    margin-top:0.1rem;    
}
.outaddress .position .up img{
    width:0.44rem;
    height:0.54rem;    
    margin-right:0.2rem;
    margin-top:0.1rem;
    /* vertical-align: middle;   */
}
.outaddress .position .up span{
    color:#fff;
    font-size:0.6rem;
    /* vertical-align: middle; */
    margin-top:0.08rem;   
}

.outaddress .position .bottom div{
    color:#fff;
    font-size:0.6rem !important; 
    vertical-align: middle;
}
/* .outaddress li:first-child img{
    width:0.44rem;
    height:0.54rem;
    vertical-align: middle; 
    margin-right:0.2rem;
    margin-top:0.1rem;
}
.outaddress li:first-child span{
    color:#fff;
    font-size:0.6rem;
    vertical-align: middle;
} */
/* .outaddress li:last-child{
    float:right;
    display:flex;
    -webkit-display:flex;
    justify-content: center;
    align-items:center;
    -webkit-align-items:center;
    color:#fff;
    position:relative;
} */

.outaddress .data{
    width: 6rem; 
    height: 100%; 
    float:left;
    display:flex;
    display:-webkit-flex;
    flex-direction: row; 
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items:center;
    -webkit-align-items:center;
    -webkit-box-sizing:border-box;
    color:#fff;
}

.outaddress .left{
    display:flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    font-size:0.6rem;
}
.outaddress .left span{
    padding-bottom:3px; 
    display:inline-block;
    text-align:center;
    line-height:1rem;  
}
.outaddress .left span:last-child{
    /* background-color: #ff8702; */
    border-radius:0.2rem;
    padding:0 0.2rem; 
    padding-bottom:0.07rem;
    box-sizing:border-box;
}
.outaddress .right strong{
    font-size:2.4rem;
    /* text-align: right;  */
    /* margin-right: -16%;  */
}

/*常驻提示状态*/
.lackauthority{
    height:5%;
    color:#fff;
    text-align: center;
    width:32%;
    background-color: rgba(0,0,0,0.1);
    font-size:0.46rem;
    border-radius:0.4rem;
    line-height:1.5rem;
    margin:0 auto;
}
.configurenetwork,.servicedue{
    height:5%;
    z-index: -1;
    color:#fff;
    text-align: center;
    width:80%;
    background-color: rgba(255,255,255,0.1);
    font-size:0.46rem;
    border-radius:0.4rem;
    line-height:1.5rem;
    margin:0 auto; 
    display:flex;
    display:-webkit-flex;
    padding:0 1% 0 5%;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    align-items:center;  
    -webkit-align-items:center; 
    box-sizing:border-box;
    -webkit-box-sizing:border-box; 
    border:2px solid rgba(255,255,255,0.1);    
}
.configurenetwork em,.servicedue em{
    background-color: #ff8a00;
    height:70%;
    border-radius:0.3rem;
    padding:0 5%;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    -webkit-align-items:center;
}

.freshctldiscon{

    /* z-index: -1; */
    color:#fff;
    text-align: center;

    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,0.1);
    border-radius:0.4rem;
    line-height:1.5rem;
    margin:0 auto;     
    width:80%;
    height:60%;
    position: relative;
}

.hide{
    top: -50%;   
    height: 0;   
    position: absolute;
}
.apoffline_message{
    font-size:0.46rem;
}
.warn_message{
    height: 9%; 
}
.spacebot{
    /* height:9%; */
}
/*设备设置  */
.devicesets{
    width: 100%;
    height:27%;
    position: relative;
    bottom:0;
    left: 0; 
    top: 2%; 
}
.devicesets ul {
    width: 100%;
    height:100%;
}
.devicesets ul li{
    float:left;
    width: 33.333%;
    height:50%;
    text-align:center;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.devicesets ul li img{
    width: 30%;
}
.sharedevice img {
    width : 45% !important
}
.devicesets li p{
    color:#fff;
    font-size:0.7rem;
}
.readOnlyParam .image_container{
    display: flex; 
    display: -webkit-flex; 
    flex-direction: row-reverse;      
}
.readOnlyParam .image_container .item {
    /* float:left;
    width: 50%;
    height:90%; */
    width: 0.85rem; 
    text-align: right;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;    
}
.readOnlyParam .item img {
    /* width:50%; */
    /* height: 50%; */
    width: 0.65rem; 
}
/* .readOnlyParam{
    position: relative;
    width:30%;
    bottom:0;
    margin-left:10%;
}
.readOnlyParam ul {
    width:90%;
    height: 90%;
}
.readOnlyParam .showtwo li{
    float:left;
    width: 50%;
    height:90%;
    text-align: right;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.readOnlyParam .showtwo li img{
    width:50%;
    height: 50%;
}

.readOnlyParam .showone li{
    float:left;
    width: 100%;
    height:90%;
    text-align: right;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.readOnlyParam .showone li img{
    width:25%;
    height: 25%;
} */
.co2{
    /* top:-0.15rem;  */
    position: relative;
    font-size: 0.4rem; 
}
.co2_data{
    height: 61%; 
    position: relative;
}
.co2_state{
    height: 39%; 
    position: relative;
}
.pm25_state {
    height: 39%; 
    position: relative;
}
.pm25_data {
    height: 61%; 
    position: relative;
}
.state_content {
    position: relative;
    top: 10%; 
}
.state_content span{
    font-size: 0.7rem; 
}
.data_content {
    position: relative;
    top:-4.9%;   
    display:inline;
    font-size:2.8rem;   
}
.outaddress .position .line_up {
    height: 5%;
    position: relative;
}
.outaddress .position .line_bottom {
    top: 1%; 
    position: relative;
    /* top: 1%;  */
}
.layui-m-layer0 .layui-m-layerchild.devicedet{
    width: 40%;    
    position: absolute;  /*调节toast显示位置*/
    top:42%; 
    left:30%;  
}
.layui-m-layerchild.devicedet {
    border-radius:0.4rem;
    border:2px solid rgba(255,255,255,0.1);
    margin-top:30%;
}
.devicedet .layui-m-layercont{
    font-size:0.5rem;
    padding:0.2rem 0.1rem;
    color:#fff;
}

.layui-m-layer0 .layui-m-layerchild.devicedet{
    background-color:rgba(0,0,0,0.1);
}

.layui-m-layer0 .layui-m-layerchild.devicedet_up{
    width: 40%;    
    position: absolute;  /*调节toast显示位置*/
    top:48.5%; 
    left:30%;  
}
.layui-m-layerchild.devicedet_up {
    border-radius:0.4rem;
    border:2px solid rgba(255,255,255,0.1);
    margin-top:30%;
}
.devicedet_up .layui-m-layercont{
    font-size:0.5rem;
    padding:0.2rem 0.1rem;
    color:#fff;
    line-height: 0.7rem; 
}

.layui-m-layer0 .layui-m-layerchild.devicedet_up{
    background-color:rgba(0,0,0,0.1);
}
.lackauthority{
    height:5vh;
    color:#fff;
    text-align: center;
    width:32%;
    background-color: rgba(0,0,0,0.1);
    font-size:0.46rem;
    border-radius:0.4rem;
    margin:0 auto;
    text-align:center;
    line-height:5vh;
    position:fixed;
    z-index:4;
    left:50%;
    bottom:25%;
    transform:translate(-50%,-50%);
    display:none;
}

/*配置网络的弹框  */
.configurenet-background{
    width: 100%;
    height: 120%;
    position: absolute;
    top:0;
    left:0;
    /* background: url('../images/devicedetails/background.png') no-repeat top center;
    background-size:cover; */
    background-color: rgba(0, 0, 0, 1);
    z-index: 2;
    display:  none;  
    opacity: 0.6;
    filter: grayscale(1); 
    -webkit-filter: grayscale(1);
}
.configurenet{
    width: 100%;
    height: 120%;
    /* background: url('../images/devicedetails/background.png') no-repeat top center; */
    /* background-size:cover; */
    /* background-color: rgba(0, 0, 0, 0.65); */
    padding:40% 10%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    position: absolute;
    left:0;
    top:-10em;
    bottom: 10em;    
    display:none;
}
.configurenet .configurenet-in{
    width: 100%;
    height: 17.5rem;
    z-index: 3; 
    position: relative;
}
.configurenet .configurenet-in .congigurenetcont{
    width: 100%;
    height:75%;
    background: url('../images/settings/configurenet.png') no-repeat top center ;
    /* background-color: blue; */
    background-size:cover;
    border-radius:0.5rem 0.5rem 0 0;
}
.configurenet .configurenet-in .congigurenetcont h3{
    line-height:1.5rem;
    text-align:center;
    color:#fff;
    font-size:0.6rem;
    border-bottom:1px solid #5392e7;
    margin-bottom:6rem;

}
.configurenet .configurenet-in .congigurenetcont p{
    color:#fff;
    font-size:0.6rem;
    margin:0 1.8rem;
    line-height:1.4rem;
}
.configurenet .configurenet-in ul {
    font-size:0;
    height:16%;
    border-radius:0 0 0.5rem 0.5rem;
    background-color: #fff;
}
.configurenet .configurenet-in  ul li{
    width: 50%;
    height:100%;
    display:inline-block;
    text-align:center;
    line-height:2.6rem;
    font-size:0.6rem;    
}
.configurenet .configurenet-in  ul li:first-child{
    color:#666;
    border-right:1px solid #ccc;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;        
}

.you {
    background-color: #00c11b !important
}

.liang {
    background-color: #e2b70d !important
}

.qingdu {
    background-color: #ffa800 !important
}

.zhongdu {
    background-color: #ff0000 !important
}

.gravity {
    background-color: #c800ff !important
}

.serious {
    background-color: #580099 !important
}

.qingxin {
    background-color: #00c11b !important
}
.qingzhuo {
    background-color: #e2b70d !important
}
.zhongzhuo {
    background-color: #ff0000 !important
}
.queyang {
    background-color: #c800ff !important
}
.humiture_box {
    float: right; 
    margin-right: 1rem; 
    display: flex; 
    display: -webkit-flex; 
    flex-direction: row; 
    -webkit-flex-direction: row; 
}
.humiture_box .temp {
    display: flex; 
    display: -webkit-flex; 
    flex-direction: row; 
    -webkit-flex-direction: row; 
}
.humiture_box .humi {
    display: flex; 
    display: -webkit-flex; 
    flex-direction: row; 
    -webkit-flex-direction: row; 
    margin-left: 40px; 
}
.humiture_box label{
    font-size: 0.6rem; 
    color: #fff; 
    line-height: 1.2rem; 
}
/*为了适配320以下的手机*/
/* @media screen and (max-width:650px){
    .detailstop{
        height:10%;
    }
    .family{
         height:66%; 
    }
    .parameters{
        margin-bottom:3%;
    }
    .parameters .top li{
        width:46%;
    }
    .parameters .top li strong{
        font-size:2.4rem;
    }
    .spacebot{
        display:none;
    }
    .outaddress{
        height:3rem;
        margin-top:0;
    }
} */

/* @media screen and (max-width:640px){
    .detailstop{
        height:10%;
    }
    .family{
         height:1%;  
    }
    .parameters{
        margin-bottom:3%;
    }
    .parameters .top li{
        width:46%;
    }
    .parameters .top li strong{
        font-size:2.4rem;
    }
    .spacebot{
        display:none;
    }
    .outaddress{
        height:3rem;
        margin-top:0;
    }
} */
/**
 *  iPhone 5/5s portrait
 */
 @media only screen
 and (min-width: 320px)
 and (max-width: 568px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) {
    .detailstop{
        height:10%;
    }
    .family{
         height:1%; 
    }
    .parameters{
        margin-bottom:3%;
    }
    .parameters .top li{
        width:46%;
    }
    .parameters .top li strong{
        font-size:2.4rem;
    }
    .spacebot{
        display:none;
    }
    .outaddress{
        height:3rem;
        margin-top:0;
    }
 }

 /*
  1280px以上
 */
 @media screen and (min-width:1200px){
    #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}
/*

*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}

@media only screen and (min-width: 480px) and (max-width: 767px){
    #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}

@media only screen and (max-width: 479px) {
    #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}