header{width: 100%; position: fixed; z-index: 999; background-color: #3E178D; height: 50px;}
header > div{padding: 0 10px 0 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; height: 50px;}
header h1 img{display: inline-block; vertical-align: middle;}
header h1 span{margin-left: 10px; font-size: 15px; color: #FFFFFF; line-height: 26px; font-weight: 700;}
header .rightBox{display: flex; align-items: center;}
header .rightBox > div > span,
header .rightBox > div > button{font-size: 14px; font-weight: 500; line-height: 50px; color: rgba(255,255,255,0.75);}
header .rightBox > div > button{margin-left: 25px; background-color: transparent; border: none;}
header .rightBox .logoutBtn{cursor: pointer; background-color: rgba(255,255,255,0); display: inline-block; vertical-align: middle; margin-left: 10px; width: 32px; height: 32px; border-radius: 5px; position: relative; border: none;}
header .rightBox .logoutBtn:after{opacity: 0.65; content: ''; display: block; position: absolute; width: 13px; height: 14px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('/assets/images/logoutBtn.png') center / contain no-repeat;}
header .rightBox .logoutBtn:hover{background-color: rgba(255,255,255,0.05);}
header .rightBox .logoutBtn:hover:after{opacity: 1;}

aside{border-right: 1px solid #EEEEEE; z-index: 99; background-color: #FBFBFB; width: 260px; height: 100%; padding-top: 50px; box-sizing: border-box; position: fixed; left: 0; top: 0;}
aside h2{padding: 22px 25px; box-sizing: border-box; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);}
aside .mainMenu{padding: 0 20px; box-sizing: border-box; margin-top: 15px;}
aside .mainMenu > li{margin-bottom: 5px; box-sizing: border-box;}
aside .mainMenu > li > span{border-radius: 12px; cursor: pointer; position: relative; display: block; color: #999999; font-size: 16px; font-weight: 500; padding: 13px 10px 13px 45px; box-sizing: border-box;}
aside .mainMenu > li.active > span{color: #444444; background-color: rgba(0,0,0,0.03);}
aside .mainMenu > li > span:before{content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center;}
aside .mainMenu > li > span:after{transform-origin: 50% 1px; transform: rotate(0deg); transition: transform 0.1s ease-in-out; content: ''; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 4px; height: 7px; background: url('/assets/images/sideBar_arrow.png') center / contain no-repeat;}
aside .mainMenu > li:hover span:after,
aside .mainMenu > li.active span:after{transform: rotate(90deg); transition: transform 0.5s ease-in-out;}
aside .mainMenu > li.member span:before{background-image: url('/assets/images/sideBar_member.png'); width: 12px; height: 12px;}
aside .mainMenu > li.member.active span:before{background-image: url('/assets/images/sideBar_member_active.png');}
aside .mainMenu > li.writingMail span:before{background-image: url('/assets/images/sideBar_writingMail.png'); width: 12px; height: 12px;}
aside .mainMenu > li.writingMail.active span:before{background-image: url('/assets/images/sideBar_writingMail_active.png');}
aside .mainMenu > li.sentMailBox span:before{background-image: url('/assets/images/sideBar_sentMailBox.png'); width: 12px; height: 10px;}
aside .mainMenu > li.sentMailBox.active span:before{background-image: url('/assets/images/sideBar_sentMailBox_active.png');}
aside .mainMenu > li.group span:before{background-image: url('/assets/images/sideBar_group.png'); width: 12px; height: 10px;}
aside .mainMenu > li.group.active span:before{background-image: url('/assets/images/sideBar_group_active.png');}
aside .mainMenu > li.temporary span:before{background-image: url('/assets/images/sideBar_temporary.png'); width: 12px; height: 10px;}
aside .mainMenu > li.temporary.active span:before{background-image: url('/assets/images/sideBar_temporary_active.png');}
aside .mainMenu > li.setting span:before{background-image: url('/assets/images/sideBar_setting.png'); width: 12px; height: 12px;}
aside .mainMenu > li.setting.active span:before{background-image: url('/assets/images/sideBar_setting_active.png');}
aside .mainMenu > li.mailTemplate span:before{background-image: url('/assets/images/sideBar_mailTemplate.png'); width: 12px; height: 12px;}
aside .mainMenu > li.mailTemplate.active span:before{background-image: url('/assets/images/sideBar_mailTemplate_active.png');}
/* sideBar Fin */