.navigation{
    width:100%;
    height:80px;
    padding:16px 0 14px;
    background: #FFFFFF;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
    position: fixed;
    top:0;
    left:0;
    z-index:9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    h1{
        font-size: 20px;
        color: #5FA1FC;
        margin:0;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        left:26px;
    }
    ul{
        width: 364px;
        height:36px;
        position: absolute;
        left:126px;
        top:50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        li{
            width:105px;
            height:36px;
            background: #5FA1FC;
            box-shadow: 0 2px 10px 0 rgba(1,46,66,0.20);
            border-radius: 100px;
            float: left;
            margin-right:15px;
            text-align: center;
            line-height: 36px;
            color:#fff;
            font-size: 14px;
            padding-left:15px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            position: relative;
            cursor: pointer;
            i{
                width:16px;
                height:16px;
                display:block;
                position: absolute;
                top:10px;
            }
            i.new{
                background: url('http://skyforest.static.elab-plus.com/detail/add.png');
                background-size: contain;
            }
            i.code{
                background: url('http://skyforest.static.elab-plus.com/detail/code.png');
                background-size: contain;
            }
            i.apps{
                background: url('http://skyforest.static.elab-plus.com/detail/b-item.png');
                background-size: contain;
            }
        }
        li:nth-child(2){
            width:92px;
        }
        li:nth-child(3){
            width:122px;
        }
    }
    .customer{
        width:182px;
        height:64px;
        position:absolute;
        top:9px;
        right:28px;
        img{
            width:50px;
            height:50px;
            position: absolute;
            top:7px;
            right:12px;
        }
        span{
            // width:136px;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            font-size: 14px;
            color: #737373;
            right:62px;
        }
    }
}
.bindNav{
    width:100%;
    height:80px;
    position: fixed;
    top:0;
    left:0;
    z-index:10;
    div{
        height:80px;
        opacity: 0.8;
        background: #737373;
        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
    }
    ul{
        width: 364px;
        height:36px;
        position: absolute;
        left:126px;
        top:50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        li{
            width:105px;
            height:36px;
            border-radius: 100px;
            float: left;
            margin-right:15px;
            text-align: center;
            line-height: 36px;
            color:#4D4D4D;
            font-size: 14px;
            padding-left:15px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            position: relative;
            cursor: pointer;
            i{
                width:16px;
                height:16px;
                display:block;
                position: absolute;
                top:10px;
            }
            i.apps{
                background: url('http://skyforest.static.elab-plus.com/detail/a-item.png');
                background-size: contain;
            }
        }
        li:nth-child(2){
            width:92px;
        }
        li:nth-child(3){
            width:122px;
            background: #fff;
            box-shadow: 0 2px 10px 0 rgba(1,46,66,0.20);
        }
    }
}
.logOut{
    width:180px;
    padding:10px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    border-radius: 1px;
    position: fixed;
    right:0;
    top:80px;
    z-index:8;
    p{
        height:44px;
        line-height: 44px;
        margin:0;
        cursor: pointer;
        background-color:#fff;
        i{
            width:16px;
            height:16px;
            display: inline-block;
            vertical-align: middle;
            margin-right:6px;
        }
        i.b-out{
            background:url('http://skyforest.static.elab-plus.com/detail/a-logout.png');
            background-size: contain;
        }
        i.a-out{
            background:url('http://skyforest.static.elab-plus.com/detail/b-logout.png');
            background-size: contain;
        }
    }
    p:hover{
        background-color: #EFF6FF;   
    }
    p.active{
        background-color: #5FA1FC;
        color:#fff;
    }
}
.main{
    margin:60px auto;
    padding-top:80px;
    h2{
        font-size: 30px;
        color: #323C47;
        margin:0 0 30px;
    }
    .bind-notes{
        padding:7px 10px;
        background: #FFF5CB;
        border: 1px solid #CCCCCC;
        border-radius: 1px;
        margin:0 0 30px;
        font-size: 12px;
    }
    .apps-data{
        max-width:94px;
    }
    .apps-icon,.apps-note{
        width:16px;
        height:16px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
    .apps-icon.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-item.png');
        background-size: contain;
    }
    .apps-icon.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-item.png');
        background-size: contain;
    }
    .offline{
        position: relative;
        .note-mes{
            width:122px;
            height:24px;
            line-height: 24px;
            display: block;
            background-color: #fff;
            padding:4px;
            font-size: 12px;
            color: #333333;
            position: absolute;
            top:-38px;
            right:0;
            border: 1px solid #D8D8D8;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.20);
            border-radius: 4px;
            display: none;
        }
    }
    .apps-note{
        display: block;
        margin:0 auto;
        background:url('http://skyforest.static.elab-plus.com/detail/icon.png');
        background-size: contain;
    }
    .channel-notes{
        width:190px;
        padding:6px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
        border-radius: 1px;
        position: absolute;
        left:0;
        bottom:60px;
        z-index:3;
        font-size:12px;
        height:100px;
        display: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .no-btn{
        color: #B1C1C8;
        position: absolute;
        bottom: 7px;
        right: 74px;
        cursor: pointer;
    }
    .know-btn{
        width:57px;
        height:26px;
        display:inline-block;
        text-align: center;
        line-height:26px;
        font-size:12px;
        background: #F0F0F0;
        border: 1px solid #CCCCCC;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
        border-radius: 100px;
        position:absolute;
        right:6px;
        bottom:6px;
        cursor: pointer;
    }
    .arrow{
        width: 10px;
        height: 10px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid transparent;
        border-top: 1px solid transparent;
        transform:rotate(-45deg);
        position: absolute;
        left:18px;
        bottom:-6px;
        background-color: #fff;
    }
    .arrow1{
        width: 10px;
        height: 10px;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-left: 1px solid transparent;
        border-bottom: 1px solid transparent;
        transform:rotate(-45deg);
        position: absolute;
        left:18px;
        top:-7px;
        background-color: #fff;
    }
    .apps-name{
        width:80px;
        height:16px;
        display: inline-block;
    }
    .apps-name i,.apps-channel,.apps-tel{
        width:16px;
        height:16px;
        margin-right:10px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        display: none;
        position: relative;
    }
    .notes{
        font-style: normal;
        padding:4px;
        background-color:#fff;
        border: 1px solid #D8D8D8;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.20);
        display: block;
        position: absolute;
        left:50%;
        bottom:-40px;
        white-space: nowrap;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        z-index:2;
        font-size:12px;
        display: none;
    }
    .apps-name i:last-child{
        margin:0;
    }
    .apps-channel{
        margin:-35px 0 0 5px;
    }
    .apps-tel{
        position: absolute;
        top:50%;
        right:11px;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
    }
    .apps-pre.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-preview.png');
        background-size: contain;
    }
    .apps-pre.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-preview.png');
        background-size: contain;
    }
    .apps-edit.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-edit.png');
        background-size: contain;
    }
    .apps-edit.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-edit.png');
        background-size: contain;
    }
    .apps-copy.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-copy.png');
        background-size: contain;
    }
    .apps-copy.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-copy.png');
        background-size: contain;
    }
    .apps-channel.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-edit1.png');
        background-size: contain;
    }
    .apps-channel.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-edit1.png');
        background-size: contain;
    }
    .apps-tel.befter{
        background:url('http://skyforest.static.elab-plus.com/detail/b-tel.png');
        background-size: contain;
    }
    .apps-tel.after{
        background:url('http://skyforest.static.elab-plus.com/detail/a-tel.png');
        background-size: contain;
    }
    .right-row{
        margin-top:20px;
    }
    .channel-know{
        background: #5FA1FC;
        box-shadow: 0 2px 10px 0 rgba(177,193,200,0.50);
        border-radius: 100px;
        color:#fff;
        border:1px solid #5FA1FC;
    }
    .save-btn{
        width:64px;
        height:26px;
        display:inline-block;
        text-align: center;
        line-height:26px;
        font-size:12px;
        background: #5FA1FC;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
        border-radius: 100px;
        position: absolute;
        bottom:6px;
        right:76px;
        color:#fff;
        border:1px solid #5FA1FC;
        cursor: pointer;
    }
    .quite-btn{
        width:64px;
        height:26px;
        display:inline-block;
        text-align: center;
        line-height:26px;
        font-size:12px;
        background: #F0F0F0;
        border: 1px solid #CCCCCC;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
        border-radius: 100px;
        position: absolute;
        bottom:6px;
        right:76px;
        color: #4D4D4D;
        right:6px;
        bottom:6px;
        cursor: pointer;
    }
    .channel-mes{
        bottom:-114px;
    }
}
.code-main{
    width:400px;
    //height:400px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    z-index: 100;
    .code-img{
        width:100%;
        display: block;
    }
    a{
        text-decoration:none;
    }
    .download-btn{
        width:130px;
        height:32px;
        display: block;
        margin:40px auto 0;
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(229,229,229,0.30);
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        .download-img{
            width:17px;
            height:16px;
            position: absolute;
            top:8px;
            left:18px;
        }
        p{
            text-align: center;
            line-height: 32px;
            margin:0;
            font-size: 14px;
            color: #4D4D4D;
            position: absolute;
            top:0;
            right:18px;
        }
    }
}
.close-btn{
    width:32px;
    height:32px;
    display: inline-block;
    background: url('http://skyforest.static.elab-plus.com/detail/close.png');
    position: absolute;
    top:-42px;
    right:0;
    background-size: contain;
    cursor: pointer;
}
.channel-mes.show{
    //display:block!important;
    display:block;
}