#app{ color: #fff; position: relative; max-width: 750px; margin: 0 auto; background-color: #000; min-height: 100vh; font-size: 14px;}
#app::after{position: absolute;width: 100%; height: 4.57rem; z-index: 0; content: ''; display: block; left: 0; top: 0; background-image: url(../images/hh.png); background-size: cover;}

#header{position: fixed; width: 100%; height: 0.9rem; display: flex; justify-content: center; left: 50%; top: 0; transform: translateX(-50%); max-width: 750px; z-index: 980; align-items: center;}
#header .h2{font-size: 20px;}
#header .sp{ margin-left: 10px; color: #c2b3be;}
#header .lan{color: #c2b3be;}
#header .top-ri{position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; padding-right: 0.25rem;}
#header .sun{width: 46px; height: 46px; border-radius: 10px; background-color: rgba(0,0,0,0.5); font-size:24px; display: flex; align-items: center; justify-content: center;}
#header .title{line-height: 40px;}
#header .lan{ margin-right: 15px; cursor: pointer;}

#content{position: relative; z-index: 90;}



#content{padding-top: 135px; padding-bottom: 20px;}
.logo{display: block; width: 300px; margin: 0 auto; transition: all ease .3s;}
#box1{text-align: center; padding: 0 30px;}
#box1 .tit{font-size: 30px; padding: 30px 0 20px;}
#box1 .p1{color: #c2b3be;}
#box1 .btn1{display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: linear-gradient(90deg, #e8007a, #f02090); border-radius: 10px; font-size: 16px; font-weight: bold; margin-top: 40px; cursor: pointer;}
#box1 .btn1 .icon-arrow-right{font-size: 16px; margin-left: 10px;}
#box1 .btn2{display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #181719; border-radius:10px; font-size: 16px; margin-top: 20px; cursor: pointer;}
#box1 .footer-tip{margin-top: 25px; color: #888; display: flex; align-items: center; justify-content: center;}
#box1 .footer-tip .icon-dunpai{margin-right:8px;}

#box2{display: none; padding: 0 30px;}
#box2 .tit2{font-size: 22px; font-weight: bold; padding: 25px 0 15px;}
#box2 .tabs{display: flex; background: #181719; border-radius: 8px; padding: 4px;}
#box2 .tabs .tab{flex: 1; text-align: center; line-height: 40px; border-radius: 6px; color: #c2b3be; cursor: pointer;}
#box2 .tabs .tab.on{background: #3d2438; color: #fff;}
#box2 .label{margin-top: 20px; color: #c2b3be;}
#box2 .input-area{display: block; width: 100%; height: 100px; background:#181719; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 12px; color: #fff; font-size: 14px; resize: none; margin-top: 10px;}
#box2 .input-area::placeholder,#box2 .input-line::placeholder{color: #888;}
#box2 .input-line{display: block; width: 100%; height: 46px; background:#181719; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0 12px; color: #fff; font-size: 14px; margin-top: 10px;}
#box2 .tip{color: #c2b3be; font-size: 14px; margin-top: 10px; line-height: 1.6;}
#box2 .tip.tc{text-align: center; margin-top: 20px; font-size:12px;}

#box2 .btn1{display: flex; align-items: center; justify-content: center; width: 100%; height: 55px; background: #e6007a; border-radius: 10px; font-size: 16px; color: #fff; margin-top: 30px; cursor: pointer;}
#box2 .btn1 .icon-arrow-right{font-size: 16px; margin-left: 10px;}
button:disabled{background: #5c0f3c!important;color: #c2b3be!important; }






/* tab 面板切换 */
#box2 .tab-pane{display: none;}
#box2 .tab-pane.on{display: block;}
/* 私钥网络下拉 */
#box2 .dropdown{position: relative;}
#box2 .select{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 46px; background:#181719; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0 12px; color: #fff; font-size: 14px; margin-top: 10px; cursor: pointer;}


#box2 .select.active{border:1px solid #e6007a;} 

#box2 .select .caret{width: 8px; height: 8px; border-right: 1px solid #c2b3be; border-bottom: 1px solid #c2b3be; transform: rotate(45deg); margin-top: -4px; transition: all ease .2s;}
#box2 .net-list{display: none; margin-top: 6px; background: #222025; border: 1px solid #2b292e; border-radius: 8px; max-height:100%; overflow-y: auto; z-index: 20; box-shadow: 0 8px 20px rgba(0,0,0,0.5);}
#box2 .net-list.open{display: block;}
#box2 .net-item{position: relative; padding: 14px 0px; border-bottom: 1px solid #2b292e; cursor: pointer;    margin: 10px;}
#box2 .net-item:last-child{border-bottom: none;}
#box2 .net-item.on::after{content: '\e6bd'; font-family: "iconfont" !important; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); color: #e8007a; font-size: 16px;}
/* 加密文件 */
#box2 .warn-box{display: flex; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 14px; color: #c2b3be; font-size: 13px; line-height: 1.7; margin-top: 20px;}
#box2 .warn-box .icon-dunpai{color: #c2b3be; font-size: 16px; margin-right: 8px; margin-top: 1px;}
#box2 .btn-file{display: flex; align-items: center; justify-content: center; width: 100%; height: 55px; background: #181719; border-radius: 10px; font-size: 16px; margin-top: 16px; cursor: pointer;}

#header .back{position: absolute; left: 15px; top: 0; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(0,0,0,0.5); margin-top: 12px;}
#app.show-import #box1{display: none;}
#app.show-import #box2{display: block;}
#app.show-import #header .back{display: flex;}
#app.show-import #content{padding-top: 100px;}
#app.show-import .logo{width: 180px;}


@media only screen and (max-width:575px) {
  #header .h2,#box1 .tit{font-size: 24px;}
  #header .sun{width: 36px; height: 36px; }
  #box1 .btn1,#box1 .btn2{height: 46px;}
  .logo{width: 50%;}
  #app{font-size: 12px;}
  #content{padding-top: 1.35rem;}
  #box2 .tit2{font-size: 18px;}
  #box2 .btn1{height: 46px; font-size: 15px;}
  #app.show-import #content{padding-top: 1rem;}
  #app.show-import .logo{width: 20%;}
  
  #box2,#box1{padding: 0 20px;}
  #box2 .warn-box{font-size: 12px;}
}



#wxnr{width:100%;height: 100%;position:fixed;top: 0;z-index:1000;background: rgba(0,0,0,.6); left:0; display:none}
#wxnr .nrdf{margin: auto;position: absolute;bottom: 50%;left: 0;right: 0;width:400px;height:auto;padding:15px;padding-top: 20px;margin-top: -2.5rem;text-align:center;}


#wxnr .title{border-bottom:1px solid #CCCCCC; text-align:left; padding-bottom:10px; font-size:16px; font-weight:bold}

#wxnr img{max-width:100%}
#wxnr .pic{width:40%; float:right; margin-top:10px;}
#wxnr .texttext{font-size:14px;line-height:30px;text-align:center;width:60%; float:left; text-align:left; margin-top:30px; font-size:16px;}


#wxnr i{position: absolute;top: 10px;right:10px;width:30px;height:30px;font-size:12px;line-height:30px;text-align:center;color: #fff;font-style: normal;background: #333;border-radius: 1rem;cursor: pointer;}
#wxnr span{ color:#009999; font-weight:bold}


@media only screen and (max-width:828px) {
#wxnr .nrdf{width:80%;bottom: 45%;}
#wxnr .pic{width:100%; float:right; margin-top:10px;}
#wxnr .texttext{ width:100%}

}



textarea,input{caret-color: #e6007a; /* 橙色光标，支持 hex / rgb / hsl / red */
  /* caret-color: transparent; 隐藏光标 */
  /* caret-color: auto; 默认跟随文字颜色 */}


#zjc:focus,#sy:focus,#pass:focus {
    border:1px solid #e6007a;
    outline:none; /* 去掉浏览器默认蓝色外框 */
}


#box2 .select:focus {
    border:1px solid #e6007a;
    outline:none; /* 去掉浏览器默认蓝色外框 */
}