html{
    width:100%;
    height: 100%;
}
body{
    margin:0;
    padding:0;
    width:100%;
    height: 100%;
    /* display:flex; */
    min-height:300px;

    /* align-items:center;     */
    align-items: flex-end;
    justify-content: center;

    font-size:14px;
    font-family: -apple-system, 'Helvetica Neue', sans-serif,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei";
    position: relative;
    /* font-weight: lighter; */
    display: none;
}
/* 移动端去除点击高亮 */
*{
    -webkit-tap-highlight-color:transparent;
 }
/* 移动端禁用长按页面弹出菜单 */
img,a{
    -webkit-touch-callout: none;
}
a{
    text-decoration: none;
}
/* ios加上这个属性才能自定义输入框、按钮样式 */
input{
    -webkit-appearance: none;
}
.btn{
    user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

/* msg-wrap ********************************/
#msg-wrap{
    width:100%;
    height:1px;
    background-color:;
    position: fixed;
    z-index:999;
    text-align: center;
    top:0;
    left:0;

}
#msg-box{
    padding:10px 40px;
    min-width:100px;
    background-color:rgba(255, 255, 255, 0.9);
    filter: alpha(opacity=80);
    color:rgb(0, 0, 0);
    font-size:16px;
    text-align:center;
    display:inline-block;
    border-radius:100px;
    margin:20px auto;
    display:none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);

    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

/* bg-wrap ********************************/
#bg-wrap{
    width:100%;
    height:36%;
    min-height:180px;
    position: relative;
    /* position:fixed;
    top:0;
    left:0;
    z-index:-1; */
    /* z-index:-1; */
    border: 0 none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#bg{
    width:100%;
    height:100%;
    border: 0 none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    position: absolute;
    top:0;
    left:0;
    z-index:-1;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    user-select: none;
}
#blackBg{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
}


.nav-wrap{
    /* background-color: #40a6ff34; */
    z-index:2;
    width:100%;
    position: absolute;
    left:0;
    bottom:10px;
}

.nav-width{
    width:90%;
    margin: 0 auto;
    max-width:1600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
}
.nav-btn{
    font-size:13px;
    color: white;
    background-color:rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    
    border-radius:100px;
    padding:4px 13px;
    margin:5px 10px 0px 10px;
    opacity:.8;
    transition:all .3s;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    white-space: nowrap;
}
.nav-btn:hover{
    opacity:1;
    background-color:rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, 0.1)
    /* transform: translateY(-4px); */
}


#header-fixed-btn-box{
    position: absolute;
    bottom:10px;
    right:20px;
    display: flex;
    align-items: center;
    z-index:3;
}
.header-fixed-btn{
    position: relative;
    width:28px;
    height:28px;
    box-sizing: border-box;
    padding:3px;
    border-radius:100px;
    margin-left:8px;
    transition:all .5s ease;
    background-color: rgba(0, 0, 0, 0);

}

.fixed-set-btn{
    display: none;
}

.v-tips{
    animation:v-tips-ani 1s 0s linear infinite forwards alternate;
}

.v-tip1{
    height:30px;
    /* background-color: #40a7ff; */
    position: absolute;
    bottom:90%;
    right:50%;
    display: none;
}
.v-tips-close{
    opacity:.5;
    height:14px;
    width:14px;
    border-radius:10px;
    position: absolute;
    right: -10px;
    top:-10px;
}
.v-tip2{
    height:30px;
    position: absolute;
    bottom:90%;
    right:50%;
    display: none;
}
.v-tip3{
    height:62px;
    position:absolute;
    top:120%;
    right:10%;
    display: none;
}
.v-tip-btn3{
    position: relative;
}
.v-tips img{
    height:100%;
    user-select: none;
    -webkit-user-drag:none;
}
@keyframes v-tips-ani{
    0%{
        transform:translateY(3px);
    }
    100%{
        transform:translateY(-3px);
    }
}

.bgheight-btn{
    position: relative;
}
.bgheight-btn:hover>div{
    /* display: flex; */
}
.bgheight-btn-fixed{
    position: absolute;
    width:20px;
    height:150px;
    top:-60px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;

    /* background-color: rgba(127, 255, 212, 0.327); */
}
.header-fixed-undrag{
    width:100%;
    height:100%;
    /* background-color: #40a7ff; */
    position:absolute;
    left:0;
    top:0;
}
.bgheight-btn-fixed img{
    height:100%;
    user-drag:none;
    -webkit-user-drag:none;
}
.header-fixed-btn:hover{
    transform:translateY(-4px);
    background-color: rgba(0, 0, 0, 0.1);
}
.header-fixed-btn-img{
    height:100%;
    user-select: none;
    user-drag:none;
    -webkit-user-drag:none;
}


#header-main{
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding:0 20px;
    /* background-color: rgba(255, 3, 3, 0.5); */
    position: absolute;
    top:0;
    left:0;
    z-index:3;

    display:flex;
    align-items: center;
    justify-content:space-between;
}
.header-logo-box{
    height:100%;
    display: flex;
    align-items: center;
    user-select: none;
}
.header-logo{
    height:30px;
    margin-top:2px;
    /* width:100px; */
    /* background-color: white; */
}
.header-logo-text{
    font-size:14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    
    opacity:.8;
    user-select: none;
}
.header-btn-box{
    display: flex;
    justify-content:flex-end;
    align-items: center;
}
.header-btn{
    font-size:14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    margin-left:20px;
    text-decoration: none;
    opacity:.8;
    transition:all .3s;
}
.header-btn:hover{
    opacity:1;
}
.mobile-qrcode-btn{
    position: relative;
}
.mobile-qrcode-btn:hover > .mobile-qrcode-box{
    display:block;
}
.mobile-qrcode-box{
    position: absolute;
    left:50%;
    transform: translateX(-80%);
    top:95%;
    background-color: rgb(0, 0, 0,.5);
    border-radius:6px;
    padding:10px;
    text-align: center;
    transition: all .3s;
    display: none;
}
.mobile-qrcode-box img{
    height:130px;
}
.mobile-qrcode-box span{
    font-size:12px;
    color: white;
    text-shadow: none;
}

.header-navtype-box{
    position: relative;
    margin:0px 10px 0 6px;
    transition: all .3s;
}
.header-navtype-box:hover>.header-navtype{
    display: flex;
}
.header-navtype-box:hover>.header-navtype-now img{
    transform: rotate(180deg);
}
.header-navtype-now{
    display: flex;
    align-items: center;
    background-color:rgba(0, 0, 0, .4);
    box-sizing: border-box;
    padding:4px 10px;
    border-radius:100px;
    border:1px solid rgba(255, 255, 255, 0.2);
    font-size:13px;
    color:white;
    user-select: none;
    cursor: pointer;    
}
.header-navtype-now span{
    text-align: center;
}
.header-navtype-now img{
    height:6px;
    margin-left:5px;
    transition: all .3s;
}
.header-navtype{
    background-color:rgba(0, 0, 0, .4);
    box-sizing: border-box;
    padding:6px 6px;
    border-radius:8px;
    border:1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size:13px;
    width:100%;
    position: absolute;
    left:0;
    top:95%;
    flex-flow: column wrap;
    transition: all .3s;
    display: none;
}
.header-navtype-btn{
    color: white;
    text-decoration: none;
    background-color:rgba(255, 255, 255, 0);
    /* margin:2px auto; */
    border-radius:4px;
    padding:6px 4px;
    width:100%;
    box-sizing: border-box;
    text-align: center;
    opacity:.6;
    transition: all .3s;
}
.header-navtype-btn:hover{
    opacity:1;
    background-color:rgba(255, 255, 255, .15);
}

#weather-box{
    /* width:142px; */
    background-color:rgba(0, 0, 0, .15);
    border:1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    border-radius:100px;
    margin:0 0 0 20px;
    transition: all .5s;
    user-select: none;
}
#weather-box:hover{
    background-color:rgba(0, 0, 0, .3);
}

#go-top-wrap{
    position: fixed;
    right:40px;
    bottom:40px;
    z-index:15;
    display: none;
}
.go-top-btn{
    background-color:rgba(0, 0, 0, .2);
    border-radius:100px;
    width:40px;
    height:40px;
    opacity:.6;
    transition:all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border:1px solid rgba(0, 0, 0, 0.05);
}
.go-top-btn img{
    width:45%;
}
.go-top-btn:hover{
    opacity:1;
}








/* main-wrap ********************************/
#main-wrap{
    width:90%;
    max-width:1000px;
    min-width:320px;
    height:100%;
    margin:0 auto;
    /* background-color: rgba(176, 109, 109, 0.164); */


    /* margin-bottom:100px; */
    /*margin:0 auto;flex撑开顶部不显示bug */
    /* z-index:2;    */
    display: flex;
    justify-content:center;
    align-items: center;
}
#main-line{
    width:100%;
    max-width:700px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
}


/* time-wrap ********************************/
#time-wrap{
    height:50px;
    user-select: none;
    -ms-user-select: none;
    margin-right:20px;
    display: flex;
    /* cursor: pointer; */
    z-index:2;

    /* display: none; */
}
.time-num{
    /* border:1px solid rgb(102, 102, 102); */
    height:100%;
}
.time-dot{
    height:100%;
}


/* search-wrap ********************************/
#search-wrap{
    /* display: none;     */
    display: flex;
    flex:1;
    /* max-width:600px; */
    height:50px;
    background:#fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border-radius:8px;
    position:relative;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    /* filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8; */
    transition:transform .3s,opacity .5s;
    z-index:2;
}
#search-wrap:hover{
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
#search-type{
    width:50px;
    height:100%;
    /* background: url(/static/home/images/searchChoice/baiduicon.png); */
    background-repeat: no-repeat;
    background-size:20px 20px;
    background-position: center;
    /* filter: grayscale(100%); */
    /* filter: alpha(opacity=30);
    -moz-opacity: .3;
    -khtml-opacity: .3;
    opacity: .3; */
    border-radius:4px;
    cursor: pointer;
    transition:all .3s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#search-type:hover{
    transform: scale(1.1);
    filter: grayscale(0%);
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.search-type-arrow{
    height:6px;
    opacity:.4;
    margin-right:6px;
    user-select: none;
}
#search-menu-box{
    width:100%;
    position: absolute;
    left:0;
    top:115%;
    background-color: white;
    border-radius:8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    z-index:4;
    display: none;
    padding:10px;
    box-sizing: border-box;
}
#search-menu{
    width:100%;
    user-select: none;
    -ms-user-select: none;
}
.search-engine,.engine-add{
    float: left;
    width:25%;
    cursor: pointer;
    border-radius:4px;
    box-sizing: border-box;
    border:2px solid white;
    padding:10px;
    display: flex;
    min-width:120px;
    font-size:14px;
    color: #333333;
    /* font-weight: lighter;     */
    transition:all .2s;
    position: relative;
}

.search-engine:hover{
    background-color: #f7f7f7;
    color: #000000;
}
.search-engine-img{
    width:20px;
    height:20px;
    margin:0px 8px 0 0px;
    border-radius:4px;
}

.engine-add-btn-img{
    width:20px;
    height:20px;
    margin:0px 8px 0 0px;
    border-radius:4px;
    flex:1;
}

.search-engine span{
    display:inline-block;
    margin-right:4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.engine-save-box{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 20px;
    box-sizing: border-box;
    display: none;
}
.engine-save-box span{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}
.engine-save-btn-box{
    display: flex;
    align-items: center;
}
.deleteAllEngine-btn{
    font-size: 14px;
    color:rgba(0,0,0,.3);
    margin:0 20px;
}
.engine-save-btn{
    background-color: #40a7ff;
    color: white;
    padding:4px 15px;
    border-radius: 100px;

}
.engine-btn-box{
    position:absolute;
    right:10px;
    top:4px;
    height:16px;
    width:40px;
    display: flex;
    justify-content: space-between;

}

.engine-btn{
    height:100%;
    transition:all .3s;
    display: none;
}
.engine-btn:hover{
    transform:scale(1.1);
}
.search-engine-background{
    background-color:#f7f7f7;
}
.engine-set-btn{
    position:absolute;
    right:0;
    top:0;
    padding:8px 8px 0 0;
    opacity:.4;
    transition: all .3s;
}
.engine-set-btn:hover{
    opacity:.8;
}
.engine-set-btn img{
    width:17px;
    height:17px;
}






#search-keyword-box{
    position: absolute;
    box-sizing: border-box;
    left:0;
    top:115%;
    max-width:100%;
    background-color: white;
    width:100%;
    border-radius:8px;
    overflow: hidden;
    display: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    padding:10px 0;
}
.search-keyword{
    display:block;
    height:30px;
    line-height:34px;
    font-size:14px;
    /* color: #ffffff; */
    /* text-shadow: 0 1px 2px rgba(0,0,0,.6); */
    /* font-weight:bold; */
    color:#434343;
    padding:0  10px 0 53px;
    box-sizing: border-box;
    cursor: pointer;
    z-index:3;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition:all .5s;
    background-color:rgba(0, 0, 0, 0);
}
.search-keyword:hover{
    /* background-color:rgba(0, 0, 0, 0.1); */
}

#search-form{
    flex: 1;
    display: flex;
    justify-content:space-between;
    align-items:center;
    height:100%;
}
#search{
    /* background: cadetblue; */
    border:none;
    height:98%;
    margin-right:30px;
    padding:0 0px 0 2px;
    box-sizing: border-box;
    outline:none;
    font-size: 16px;
    flex:1;
    /* font-weight: lighter; */
    color: #333333;
}
#search-btn{
    cursor: pointer;

    width:50px;
    height:100%;
    background: url(/static/images/index/searchbtn.svg) no-repeat;
    /* background-color: rgb(138, 0, 252); */
    background-size:20px 20px;
    background-position: center;
    border-radius:2px;
    outline: none;
    border:0 none;
    /* display:none; */
}







/* content-wrap *******************************/
#content-wrap{
    /* position: absolute;
    bottom:100%;
    left:0; */
    width:100%;
    /* height:100%; */
    box-sizing:border-box;
    /* padding:30px; */
    /* background: rgba(117, 117, 117, 0.144); */
    /* z-index:10;   */
    color:#434343;
    /* box-shadow: 0 1px 3px rgba(0,0,0,.1); */
}
#content-bg{
    width:100%;
    /* height:100%; */
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
}
#content-box{
    width:100%;
    height:100%;
    background: white;
    display: flex;
    flex-flow:column nowrap;
    border-radius:2px;
}
#content-header{
    display: none;
}




#content-main{
    width:100%;
    flex-grow: 1;
    /* overflow-y: scroll; */
}
#content-width{
    width:80%;
    min-height:500px;
    max-width:1200px;
    /* background-color: rgba(0, 0, 0, 0.03); */
    margin:0 auto;
}

.banner-site-box{
    width:100%;
    max-width:1130px;/* 为了和下面的网站右侧协调 */
    padding-top:60px;
    margin:0px 0 60px 0;
    /* background-color: rgba(136, 62, 62, 0.03); */
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}
.banner-site{
    /* min-width:10%; */
    /* margin:0 20px; */
    box-sizing: border-box;
    padding:10px 10px;
    /* background-color: rgba(60, 131, 211, 0.03); */
    display: flex;
    flex-flow:column wrap;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    color:#434343;
}
.banner-site-img{
    width:50px;
    border-radius:10px;
}
.banner-site-name{
    margin-top:5px;
    /* background-color: rgba(95, 158, 160, 0.082); */
}


#site-wrap{
    width:100%;
    /* background-color: rgba(100, 148, 237, 0.068); */
}
.user-tag-box{
    width:100%;
    /* height:100px; */


    margin:60px 0 25px 0;
    /* background-color: rgba(0, 0, 139, 0.082); */
    display:flex;
    flex-wrap: wrap;

    font-size: 18px;
    line-height:0px;
}
.static-blackline{
    /* margin:45px 0 0 0;
    border-top:1px solid rgba(0, 0, 0, 0.05); */
}
.tag-box:first-child{
    /* margin:55px auto 15px auto; */
}
.tag-box{
    border-top:1px solid rgba(0, 0, 0, 0.05);
    width:100%;
    /* height:24px; */
    padding:45px 0 0 0;
    margin:35px auto 15px auto;
    /* background-color: rgba(0, 0, 139, 0.082); */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    line-height:0px;
}
.tag-name-box{
    display: flex;
    align-items: center;
    height:100%;
}
.tag-btn{
    font-size:14px;
    padding:2px 12px;
    height:18px;
    display: flex;
    align-items: center;
    border-radius:100px;
    color:rgba(0, 0, 0, 0.4);
    /* border:1px solid rgba(0, 0, 0, 0.4); */
    margin-left:25px;
    transition: all .3s;
}
.tag-btn:hover{
    color:rgba(0, 0, 0, 0.8);
    /* border:1px solid rgba(0, 0, 0, 0.6); */
}
.tag-img{
    height:20px;
    margin-left: 10px;
}
.tag-name{
    margin-left: 10px;
}

.tab-add{
    padding:0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100px;
}
.tab-add img{
    width:20px;
    height:20px;
}

#user-site-edit-btn{
    display: flex;

    border-radius: 100px;
    /* border:#333333 1px solid; */
    background-color: rgba(0, 0, 0, 0.04);
    justify-content: center;
    align-items: center;
    margin:0px 10px 0 10px;
    height:14px;
    /*opacity:.5;*/
    color:rgba(0,0,0,.6);
    transition: all .3s;
    padding:7px;
}
#user-site-edit-btn:hover{
    opacity:1;
    background-color: rgba(0, 0, 0, 0.08);
}
#user-site-edit-btn:hover span{
    display: block;
}
#user-site-edit-btn img{
    height:100%;
    opacity:.8;
}
#user-site-edit-btn span{
    font-size:14px;
    margin: 0 2px 0 4px;
    display: block;
}


.user-site-tab{
    display:flex;
    align-items: center;
    flex: 1;
    /* margin-left:20px; */
    height:24px;
    flex-flow: row wrap;
    z-index:1;

}

.user-site-tab-btn{
    max-width:100px;
    font-size: 16px;
    color: rgba(0,0,0,.6);
    padding:2px 14px;
    margin:0 3px;
    border-radius:400px;
    transition: all .3s;
    display: flex;
    align-items: center;
    height:100%;
    position: relative;

}
.user-site-tab-btn span{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    /*line-height:140%;*/
    /* background-color: blue; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.user-site-tab-btn:hover{
    background-color: rgba(0, 0, 0, 0.04);
}

.user-site-tab-btn-current{
    background-color: rgba(0, 0, 0, 0.04);
}

.site-content-box{
    width:100%;
    display: flex;
    flex-wrap: wrap;
}

.site-box{
    width: 16.65%;
    height:60px;    
    border-radius:8px;
    display: flex;
    align-items: center;
    padding:10px;
    box-sizing: border-box;
    color:#434343;
    text-decoration: none;
    transition-property: transform , background-color;
    transition-duration:1s , 1s;
    flex-shrink: 0;
    border:3px solid white;
    /* border:3px solid transparent; */

    position: relative;
    transition:all .5s ease;
}

.siteboxghost{
    width: 16.65%;
    height:60px;
    border-radius:8px;
    display: flex;
    align-items: center;
    padding:10px;
    box-sizing: border-box;
    color:#434343;
    text-decoration: none;
    transition-property: transform , background-color;
    transition-duration:1s , 1s;
    flex-shrink: 0;
    border:3px solid white;
    /* border:3px solid transparent; */

    position: relative;
    background-color: rgb(255, 0, 0);
    opacity: 1;
}
.site-box:hover{
    /* transform:scale(1.05); */
    /* transform:translateY(-6px); */
    z-index:2;
    background-color:  rgba(0, 149, 255, 0.06);
}
.site-box:hover>img{
    transform:scale(1.1);
}

.site-box-background{
    background-color: #f7f7f7;
}

.site-btn-box{
    position:absolute;
    right:10px;
    top:4px;
    height:16px;
    width:40px;
    display: flex;
    justify-content: space-between;

}


#static-site{
    /* background-color: rgb(227, 227, 227); */
    /* border-top:1px solid rgba(0, 0, 0, 0.05); */
    margin-top:1px
}
.tab-btn-box{
    position:absolute;
    right:5px;
    top:-35%;
    height:16px;
    width:40px;
    display: flex;
    justify-content: space-between;

}
.site-btn{
    height:100%;
    transition:all .3s;
    display: none;
}
.site-btn:hover{
    transform:scale(1.1);
}


.site-img{
    width:24px;
    height:24px;
    border-radius:4px;
    transition: all .6s;
}
.site-name{
    font-size: 14px;
    margin-left:10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex:1;
    flex-shrink: 0;
    min-width:70px;
    /* background-color: rgba(170, 67, 67, 0.1); */
}
.add-btn-img{
    flex:1;
}

.add-btn{
    order:99999;
}






.siteb-box{
    width: 20%;
    border-radius:12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding:17px 10px 17px 15px;
    box-sizing: border-box;
    color:#434343;
    text-decoration: none;
    transition-property: transform , background-color;
    transition-duration:1s , 1s;
    flex-shrink: 0;
    border:5px solid white;
    /* border:3px solid transparent; */

    position: relative;
    background-color: rgba(0, 0, 0, 0.02);
    transition:all .5s ease;    
}


.siteb-box:hover{
    /* transform:scale(1.05); */
    /* transform:translateY(-6px); */
    z-index:2;
    background-color:  rgba(0, 149, 255, 0.06);
}
.siteb-box:hover>img{
    transform:scale(1.2);
}



.siteb-img{
    width:32px;
    height:32px;
    border-radius:5px;
    border-radius:50%;
    transition: all .6s;    
}

.siteb-main{
    margin-left:10px;
    flex:1;
    /* background-color: #40a6ff0f; */
}
.siteb-name{
    font-size: 14px;    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex:1;
    flex-shrink: 0;
    min-width:70px;
    /* background-color: rgba(170, 67, 67, 0.1); */
}
.siteb-info{
    font-size:12px;
    height:16px;
    color:#9a9a9a;
    /* background-color: #f951ff24; */
    overflow: hidden;
}





/* content-wrap *******************************/
#bottom-wrap{
    height:200px;
    margin:100px 0 0 0;
    width:100%;
    border-top:1px solid rgba(0, 0, 0, 0.05);
    background-color: #1f1f1f09;
    border-top-left-radius:12px;
    border-top-right-radius:12px;

}
#bottom-main{
    width:80%;
    height:100%;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: #40a7ff; */

}
.bottom-logo-box{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
    /* background-color: #43434326; */
}
.bottom-logo{
    display: block;
    opacity:.5;
    height:26px;
    margin:0 0 10px 0;
}
.bottom-slogan{
    font-size:12px;
    color:rgba(0, 0, 0, 0.4);
}
.bottom-text{
    font-size:14px;
    color:rgba(0, 0, 0, 0.4);
}

#bottom-btn-box{

}
.bottom-btn{
    font-size:14px;
    color:rgba(0, 0, 0, 0.4);
    transform: all .3s;
    margin:0 5px;
    text-decoration: none;

}
.bottom-btn:hover{
    color:rgba(0, 0, 0, 0.8);
}



/* edit-wrap ---------------------------------*/
#edit-wrap{
    width:100%;
    height: 100%;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.2);
    z-index:11;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
.edit-box{
    width:90%;
    max-width:550px;
    background-color: white;
    border-radius:4px;
}
.edit-box-header{
    width:100%;
    height:70px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.edit-box-title{
    font-size:18px;
    font-weight:normal;
    color:rgba(0, 0, 0, 0.8);
    margin-left:40px;
}
.edit-box-close{
    width:70px;
    height:70px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:all .3s;
}
.edit-box-close:hover{
    transform: scale(1.1);
}
.edit-box-close img{
    width:25px;
    height:25px;
}

.edit-box-content{
    padding:40px 40px;
}

.edit-input-box{
    display: flex;
    flex-flow:column wrap;
    flex:1;
    /* background-color: rgba(188, 143, 143, 0.089); */


}
.edit-input-box1{
    margin-bottom:20px;
}
.edit-input-tips{
    font-size: 12px;
    color:rgba(0, 0, 0, 0.4);
}
.edit-input-line{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height:40px;
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
    transition:all .5s;

}

.edit-input{
    flex: 1;
    box-sizing: border-box;
    border:none;

    /* background-color: rgba(0, 0, 0, 0.05); */

    padding:0 10px 0 0;
    outline: none;
}
.edit-input-line:hover{
    border-bottom:2px solid #40a7ff;
}
.edit-input-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    /* background-color: rgba(0, 0, 0, 0.05); */
    border-radius: 100px;
    padding:3px 0px;
    font-size:16px;
    transition:all .3s;
    margin:2px 0;
}
.edit-input-btn:hover{
    transform:translateY(-4px);
}
.edit-input-btn-text{
    font-size:14px;
    color:  #40a7ff;
}
.edit-input-btn-img{
    height:25px;
    margin-left:5px;
}

.edit-icon-title-box{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom:20px;
}
.edit-icon-box{
    height:40px;
    width: 40px;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-radius: 100px;
    margin-right:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:all .3s;
    position: relative;
    box-sizing: border-box;
}
.edit-icon-box:hover{
    transform:translateY(-4px);
    border:none;
}
.edit-icon-box:hover .edit-icon-text{
    display: flex;
}
.edit-icon-text{
    width:100%;
    height:100%;
    background-color: #40a7ff;
    border-radius: 100px;
    color: white;
    font-size:13px;
    left:0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: none;
}

.edit-icon-img{
    height:25px;
    width:25px;
    border-radius: 2px;
}

.edit-sub-box{
    display: flex;
    justify-content: flex-end;
}
.edit-sub{
    padding:4px 25px;
    background-color: #40a7ff;
    color: white;
    font-size:16px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transition: all .3s;
    margin:10px 0;
}
.edit-sub:hover{
    transform:translateY(-4px);
}
.edit-item{
    display: none;
}

.site-edit-ok-box{
    display: flex;
    margin-top:20px;
    justify-content: center;
    align-items: center;
    display: none;
}
.site-edit-ok-box span{
    font-size: 14px;
    color:rgba(0,0,0,.6);
}

.deleteAllSite-btn{
    font-size: 14px;
    color:rgba(0,0,0,.3);
    margin:0 20px;
}

.site-edit-ok{
    border-radius:100px;
    margin-left:60px;
    background-color: #40a7ff;
    color:white;
    font-size:16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:4px 15px;
    transition: all .3s;
}
.site-edit-ok:hover{
    transform: translateY(-4px);
}




#welcome-wrap{
    position: fixed;
    right:30px;
    bottom:30px;
    z-index:2;
    display:none;
    
}

#welcome-box{
    padding:30px 35px;
    margin:0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius:4px;
    font-size:14px;
    color:#ffffff;      
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
#welcome-text{
    display: block;
}
#welcome-text span{
    font-size:14px;
}
#welcome-btn{
    display:inline-flex;
    align-items: center;
    border-radius:100px;
    padding:8px 15px;
    color:#434343;
    font-size:14px;
    text-decoration: none;
    background-color: white;
    border:solid rgba(0, 0, 0, 0.2) 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
#welcome-btn-img{
    height:18px;
    width:18px;
    margin-right: 5px;
}
.welcome-btn-tips{
    font-size:12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top:10px;
}
#welcome-close{
    right:10px;
    top:10px;
    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    width:25px;
    height:25px;
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8;
    position: absolute;
}







/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
border-radius: 4px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.3);
}