@CHARSET "UTF-8";

main>div.container{margin: 72px auto 193px auto; display: flex; justify-content: space-between;}
div.img{}
div.img img{width: 517px; height:340px;}
div.login{display: flex;align-items: center;flex-direction: column;justify-content: center;float: right;padding: 30px 30px 16px 30px;background: #F0F5FF; border-radius: 8px;}
div.login img{width: 272px; height: 272px;}
div.login p{font-size: 16px;color: #2F54EB;line-height: 24px;margin-top: 16px;}

div.rel-panel{display: flex; flex-direction: column; width: 400px; height: 345px; background:#F0F5FF; border-radius: 8px; font-size: 14px;}
div.rel-panel div.title{padding: 15px 30px;  border-bottom:1px solid #ccc; display: flex; justify-content:space-between;}
div.rel-panel div.title font{font-size: 12px; color:#666;}
div.rel-panel div.title a{}
div.rel-panel div.list{flex-grow: 1; overflow-y: auto;}
div.rel-panel div.list div.item{ border-bottom: 1px dotted #ccc; padding: 14px 30px; cursor: pointer; display: flex; align-items: center;}
div.rel-panel div.list div.item:hover{background:#def;}
div.rel-panel div.list div.item:before{content:"\e157"; font-family:"Glyphicons Halflings"; font-size: 1.2em; margin-right: 0.2em; color: #bbb;}
div.rel-panel div.list div.item.sel{cursor: default; background: #def;}
div.rel-panel div.list div.item.sel:before{content: "\e067"; color: #e64a19;}
div.rel-panel div.list div.item b{font-size: 1.2em;}
div.rel-panel div.list div.item font{margin-left:0.2em; color:#666;}
div.rel-panel div.list div.item font:before{content:"[";}
div.rel-panel div.list div.item font:after{content:"]";}
div.rel-panel div.list div.item span{margin-left:0em; flex-grow: 1;}
div.rel-panel div.list div.item span:before{content:"（";}
div.rel-panel div.list div.item span:after{content:"）";}
div.rel-panel div.list div.item a.del{opacity: 0.2;}
div.rel-panel div.list div.item:hover a.del{opacity: 1;}
div.rel-panel div.list div.item a.del:after{content:"\e014"; font-family:"Glyphicons Halflings"; color:red;}
div.rel-panel form{padding: 15px 30px;}
div.rel-panel form a{display: block; border: none; text-align: center; color:#2F54EB; background: transparent;}

div.bind-bg{display: none; position: fixed; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; background:rgba(0,0,0, 0.3)}
div.bind{display: none; position: fixed; width: 400px; padding-bottom: 2em; z-index: 100; background:#fff; top:calc(50% - 180px); left:calc(50% - 200px); font-size: 14px; border-radius: 8px;}
div.bind p.title{padding:14px 28px; border-bottom: 1px solid #eee; margin-bottom: 1em; font-size: 16px;}
div.bind p.tab{padding: 7px 28px 14px 28px;}
div.bind p.tab span{cursor: pointer; color:#999;}
div.bind p.tab span.sel{cursor: default; color: green; font-weight: bold; font-size: 1.2em;}
div.bind p.tab i{margin: 1em; color:#666;}
div.bind p.tab i:after{content:"/";}
div.bind p.fld{padding: 0.8em 2em; display: flex; align-items: center;}
div.bind p.fld input{flex-grow: 1; padding: 0.8em;}
div.bind p.fld a{margin-left: 1em; white-space: nowrap;}
div.bind p.oper{padding:1em 2em;}
div.bind p.wecom-link{padding: 0.8em 2em; }
div.bind p.wecom-link>a{color: #39f;}

div.bind div.std{padding:12px 28px; line-height: 2em;}
div.bind div.std>p{display: none;}

div.bind-bg.show, div.bind.show{display: block;}