{include common=css/member/public.css}

section.member .information{display:block; padding:28px;}
section.member .information dl{margin-top:22px; line-height:38px;}
section.member .information dl:after{display:block; content:''; clear:both;}
section.member .information dl:first-child{margin-top:0;}
section.member .information dl dt{float:left; width:128px;}
section.member .information dl dd{padding-left:128px; max-width:100%;}
section.member .information dl.avatar dt{line-height:88px;}
section.member .information dl.avatar div{width:88px; height:88px; position:relative; cursor:pointer; border-radius:50%; overflow:hidden; font-size:14px; transition:.3s;}
section.member .information dl.avatar div:hover{box-shadow:0 0 8px rgba(0,0,0,.08);}
section.member .information dl.avatar div span{position:absolute; bottom:0; left:0; right:0; line-height:24px; font-size:12px; background:rgba(0,0,0,.68); color:#fff; text-align:center;}
section.member .information dl.avatar div img{display:block; width:88px; height:88px; object-fit:cover; border-radius:50%;}
section.member .information dl.avatar div ins{display:block; width:100%; height:100%; position:absolute; z-index:8; top:0; left:0;}
section.member .information dl.avatar div ins>input[type="file"]{display:block; width:100%; height:100%; cursor:pointer; opacity:0;}

section.member .information dl dd select,
section.member .information dl dd textarea,
section.member .information dl dd input[type=text],
section.member .information dl dd input[type=password],
section.member .information dl dd input[type=number],
section.member .information dl dd input[type=tel],
section.member .information dl dd input[type=email]{border:1px solid #d8d8d8; width:320px; max-width:100%; padding:4px 10px; line-height:28px; height:38px; box-shadow:inset 0 -2px 6px rgba(0,0,0,0.018);}
section.member .information dl dd textarea{width:480px; height:128px;}
section.member .information dl dd select{width:auto; display:inline;}
section.member .information dl dd>p{color:#888;}
section.member .information code.tights>select+select{margin:0 0 0 2px;}

div[upfile]{position:relative;}
div[upfile]>textarea{position:absolute; left:0; bottom:0; width:60px !important; height:1px !important; opacity:0; padding:0 !important; box-shadow:none !important;}
div[upfile]>ul:after{display:block; content:''; clear:both;}
div[upfile]>ul>li{width:128px; height:128px; line-height:22px; float:left; overflow:hidden; margin:0 18px 0 0; border-radius:3px; 
border:1px solid #d8d8d8; background:#fff; box-shadow:inset 0 -2px 6px rgba(0,0,0,0.018); transition:0.3s; position:relative;
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box;
-webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical;
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
div[upfile]>ul>li>a{text-align:center; cursor:pointer;}
div[upfile]>ul>li>a:hover{border-style:solid;}
div[upfile]>ul>li>a>i{display:block; font-size:38px; line-height:24px; color:#a8a8a8;}
div[upfile]>ul>li>a>b{display:block; font-weight:normal; color:#484848; margin:8px 0 2px 0;}
div[upfile]>ul>li>a>u{display:block; text-decoration:none; font-size:12px; color:#b8b8b8}
div[upfile]>ul>li>ins{position:absolute; top:4px; right:4px; z-index:888; font-size:14px; line-height:14px; text-align:center; opacity:0; display:block;
width:14px; height:14px; border-radius:50%; background:rgb(236, 36, 53); color:#fff; cursor:pointer; transform:rotate(45deg); transition:0.3s;}
div[upfile]>ul>li>span{position:relative; z-index:3; display:block; width:70px; height:70px; color:#965209; font-size:12px; font-style:normal; background-image:url('../../system/extend/ueditor/dialogs/attachment/images/file-icons.png');}
div[upfile]>ul>li>span.dir{background-position:-3px 0; padding-top:5px; line-height:65px;}
div[upfile]>ul>li>span.folder{background-position:-74px 0; line-height:25px; padding-top:10px; padding-right:15px;}
div[upfile]>ul>li>span.code{background-position:-143px 0;}
div[upfile]>ul>li>span.photo,
div[upfile]>ul>li>span.file{background-position:-213px 0;}
div[upfile]>ul>li>span.zip{background-position:-278px 0;}
div[upfile]>ul>li>span.excel{background-position:-356px 0;}
div[upfile]>ul>li>span.word{background-position:-425px 0;}
div[upfile]>ul>li>span.powerpoint{background-position:-495px 0;}
div[upfile]>ul>li>span.pdf{background-position:-635px 0;}
div[upfile]>ul>li>span.text{background-position:-704px 0;}
div[upfile]>ul>li>span.movie{background-position:-982px 0;}
div[upfile]>ul>li>span.audio{background-position:-1050px 0;}
div[upfile]>ul>li:hover>ins{opacity:1;}
div[upfile]>ul>li>img{display:block;}
div[upfile]>ul>li>input[type="file"]{position:absolute; top:0; left:0; width:100%; height:100%; 
background:none; border:none; cursor:pointer; opacity:0;}
div[upfile]>ul>li>img{max-width:100%; max-height:100%;}
dd[style8]>input[name^="params"][type="file"]{opacity:0;}

@media(max-width:767px){
section.member .information{padding:8px;}

section.member .information dl{margin-top:16px; line-height:28px;}
section.member .information dl dt{float:none; padding-right:8px; width:auto; display:inline-block;}
section.member .information dl dd{padding-left:0; display:inline-block;}
section.member .information dl.avatar dt{line-height:inherit; display:none;}
}