@charset "utf-8";

/* **************************************** *
*  MAIL-LAYOUT
* **************************************** */
.mail-layout .dev-content{padding:35px 0 0 35px}
.mail-layout .dev-content.mail_setting{padding:35px}
.mail-layout .dev-content:after{display:none}

/* POPUP */
.layerpop-box .dev-content.mail{padding:12px 16px 12px 12px}

/* **************************************** *
*  MAIL-FORM
* **************************************** */
.mail-layout .Divselect{height:32px; font-size:14px; line-height:14px; border-radius:5px; padding:7px 40px 0 10px; transition:none; -webkit-transition:none;}
.mail-layout .Divselect.ui-state-focus{background:#fff url("/static/fw/images/common/divselect.svg") no-repeat right 50%}
.mail-layout .Divselect select{font-size:14px}
.mail-layout .Divselect span{font-size:14px}
.mail-layout .Divselect.small{height:28px; min-width:70px}
.mail-layout .Textinput{height:32px; line-height:30px; font-size:14px; border-radius:5px; padding:0 10px}
.mail-layout .ImageCheckbox span{font-size: 14px; top:-3px; margin-left: 4px;}

.mail-layout .Dateinput > input,
.mail-layout .Daterange .Startdate > input,
.mail-layout .Daterange .Enddate > input{width:126px; height:32px; padding:0 10px; line-height:14px; font-size:14px; border-radius:5px;}

.mail-layout .Dateinput > .Calendar,
.mail-layout .Daterange .Calendar{top:5px; right:2px}
.mail-layout .Dateinput > .Calendar:before,
.mail-layout .Daterange .Calendar:before{font-size:19px; color:#555}


/* POPUP */

.dev-content.mail .Divselect{height:32px; font-size:14px; line-height:14px; border-radius:5px; padding:7px 40px 0 10px; transition:none; -webkit-transition:none;}
.dev-content.mail .Divselect.ui-state-focus{background:#fff url("/static/fw/images/common/divselect.svg") no-repeat right 50%}
.dev-content.mail .Divselect select{font-size:14px}
.dev-content.mail .Divselect span{font-size:14px}
.dev-content.mail .Textinput{height:32px; line-height:30px; font-size:14px; border-radius:5px; padding:0 10px}
.dev-content.mail .ImageCheckbox span{font-size: 14px; top:-3px; margin-left: 4px;}


/* **************************************** *
*  MAIL-LNB
* **************************************** */
.mail-write{display:flex; justify-content:center; margin-bottom:20px}
.mail-write button
{
	display:flex; align-items:center; justify-content:center; width:220px; height:50px;
	color:#fff; font-size:15px; font-weight:normal; letter-spacing:-0.5px;
	background:linear-gradient(45deg, #be52f2, #5629ee); border:0; border-radius:200px; cursor:pointer;
	box-shadow:1px 5px 10px rgb(0 0 0 / 15%)
}
.mail-write i{margin-right:12px; font-size:18px}

.mail-lnb{padding:0 20px 0 9px}
.mail-lnb li{position:relative; margin-bottom:1px; padding-left:15px}
/*.mail-lnb li > ul > li > ul > li{padding-left:25px}*/
.mail-lnb li .mail-box{display:flex; align-items:center; position:relative; width:auto; height:35px; margin:0; padding:0; background:none; border:0; cursor:pointer; box-sizing:border-box}
.mail-lnb li .mail-box i{min-width:20px; font-size:18px; margin-right:5px; color:#999}
.mail-lnb li .mail-box span{display:block; position:relative; font-family:'ptd', 'sans-serif' !important; font-size:14px; font-weight:300; color:#666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}

/*.mail-lnb li .mail-box.active span:before{content:''; position:absolute; bottom:1px; left:0; width:100%; height:1px; background:#555}*/

.mail-lnb .mail-box-controll{display:flex; align-items:center; position:absolute; right:0; top:4px; min-height:22px}
.mail-lnb .mail_box_cont .mail-box-controll{top:2px}
.mail-lnb .count{border:0; background:none; color:#5629ee; font-size:12px; font-weight:300; letter-spacing:-0.5px; cursor:pointer; box-sizing:border-box}
.mail-lnb .mail-box-toggle{width:22px; height:22px; padding:0; background:none; border:0; color:#999; font-size:22px; cursor:pointer; box-sizing:border-box}
.mail-lnb .mail-box-toggle.active{transform: rotate(-180deg)}
.mail-lnb .mail-box-clean,
.mail-lnb .mail-box-recept{padding:1px 8px; background:#fff; border:1px solid #eaeaea; color:#999; font-size:12px; font-weight:300; letter-spacing:-0.8px; border-radius:0; cursor:pointer; box-sizing:border-box}
.mail-lnb .mail_box_more{border:0; background:none; color:#999; font-size:14px; font-weight:300; letter-spacing:-0.5px; cursor:pointer; box-sizing:border-box}
.mail-lnb .count,
.mail-lnb .mail-box-toggle,
.mail-lnb .mail-box-clean,
.mail-lnb .mail-box-recept{margin-left:5px}
.mail-lnb li > ul > li .mail_box_cont{display:flex; align-items:center; padding:0px 10px;}
.mail-lnb li > ul > li .mail_box_cont:hover{background:#efeef2; border-radius:5px; width:100%}
.mail-lnb li > ul > li > ul > li .mail_box_cont:hover{background:none}
.mail-lnb li > ul > li .mail_box_cont:hover .mail-box span,
.mail-lnb li > ul > li > ul > li:hover .mail-box span,
.mail-lnb li > ul > li > ul > li.selected .mail-box span{color:#333}

.mail-lnb li > ul > li .mail_box_cont.selected{background:#eeeaf9; border-radius:5px; width:100%}
.mail-lnb li > ul > li .mail_box_cont.selected .mail-box span{color:#5629ee}

.mail-lnb li > ul > li .mail_box_cont.mail_box_btn{justify-content:space-between}

.mail-lnb li > ul > li .mail_box_cont .mail-box-controll{right:10px}

.mail_box_more_pop{position:absolute; top:390px; right:-75px; background:#fff; border-radius:5px; box-shadow:0px 4px 16px rgba(0,0,0,0.2); overflow:hidden}
.mail_box_more_pop.second{top:535px; right:-70px}
.mail_box_more_pop li{padding:5px 12px; cursor:pointer}
.mail_box_more_pop li .more_btn{border:0; background:none; cursor:pointer}
.mail_box_more_pop li:hover{background:#f4f4f4;}
.mail_box_more_pop li .more_btn span{color:#555; font-size:13px}
.mail_box_more_pop li:hover .more_btn span{color:#333}

.mail_box_more_pop.move{position:absolute; top:84px; left:430px; width:100px; z-index:1000}


/* **************************************** *
*  MAIL-STORAGE
* **************************************** */

.mail-storage{display:flex; align-items:center; /*margin-left:auto; padding-right:35px;*/ justify-content:center; padding:5px 0; border-top:1px solid #eaeaea}
.mail-storage .storage-tit{display:flex; align-items:center; margin-right:15px}
.mail-storage .storage-tit i{margin-right:5px; font-size:20px; color:#5629ee}
.mail-storage .storage-tit .tit{font-size:14px; font-weight:300; color:#333; letter-spacing:-0.5px}
.mail-storage .storage-state{display:flex; align-items:center}
.mail-storage .storage-state .state-num{font-size:14px; font-weight:normal; letter-spacing:0.5px; color:#555}
.mail-storage .storage-state .state-num.use{font-weight:300; color:#5629ee}
.mail-storage .storage-buy{height:35px; margin-left:20px; color:#5629ee; font-size:14px; font-weight:300; border:1px solid #eaeaea; border-radius:5px}
.mail-storage .storage-buy:hover{background:#5629ee; color:#fff}

/* **************************************** *
*  MAIL-SEARCH
* **************************************** */
.mail-search {display:flex; align-items:center; margin-left:auto; padding-right:35px}
.mail-search .search-area{position:relative; background:#fefefe; border:1px solid #eaeaea; border-radius:200px; box-sizing:border-box; display:flex;}
.mail-search .search-area .search-form{position:relative;}
.mail-search .search-input::-webkit-input-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:13px; color:#999; letter-spacing:-0.8px; font-weight:normal}
.mail-search .search-input::-moz-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:13px; color:#999; letter-spacing:-0.8px; font-weight:normal}
.mail-search .search-input:-ms-input-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:13px; color:#999; letter-spacing:-0.8px; font-weight:normal}
.mail-search .search-input
{
    display:block; width:100%; height:35px; line-height:35px; margin:0; padding:0 50px 0 20px; border:0; background:none; text-align:left; font-size:13px; font-weight:normal; letter-spacing:-0.5px; color:#555;
    border-radius:0; box-sizing:border-box; outline:none; cursor:pointer;
    font-family:'pps', 'ptd', 'sans-serif' !important;
}
.mail-search .search-btn.search{position:absolute; bottom:0; right:14px}
.mail-search .search-btn button{display:block; width:auto; height:35px; line-height:35px; margin:0; padding:0; color:#aaa; border:0; cursor:pointer; text-align:center; background:none; border-radius:0; outline:none}
.mail-search .search-btn button i{width:auto; height:auto; font-size:18px; vertical-align:middle}
.mail-search .search-area .detail_btn{border:0; position: relative; flex: 0 0 auto; padding: 6px 15px 6px 8px; font-size: 14px; color:#777; line-height: 20px; letter-spacing: -0.3px; background:transparent; cursor:pointer}
.mail-search .search-area .detail_btn:before {content: ''; position: absolute;  top: 6px;  left: 0;  width: 1px;  height: 20px;  background:#eaeaea; }

.mail-search .search-detail{display:none; flex-direction:column;  position:absolute; background:#fff; top:60px; right:30px; width:525px; height:auto; padding:12px; border-radius: 8px; z-index:2; box-shadow:0px 0px 5px #00000021;}
.mail-search .search-detail.active{display:flex;}
.mail-search .search-detail .writing-ty1 .writing-cont{align-items:baseline}
.mail-search .search-detail .writing-ty1 .writing-list{border-bottom:none}
.mail-search .search-detail .writing-ty1 .writing-tit .tit{font-weight: 300; color:#333}
.mail-search .search-detail .writing-ty1 .writing-list > li{align-items:baseline}
.mail-search .search-detail .ImageCheckbox.mail span{margin-left: 4px;}
.mail-search .search-detail .Button{flex:none; width:fit-content; margin:0 auto; }



/* **************************************** *
*  MAIL-META
* **************************************** */
.mail-meta{display:flex; align-items:center; margin-left:20px; padding-top:5px}
.mail-meta .meta-num{margin-left:15px}
.mail-meta .meta-num:first-child{margin-left:0}
.mail-meta .meta-num .tit,
.mail-meta .meta-num .num{font-size:13px; font-weight:normal}
.mail-meta .meta-num .tit{margin-right:5px; color:#999}
.mail-meta .meta-num .num{color:#555}


/* **************************************** *
*  MAIL-INBOX
* **************************************** */
.mail-inbox{display:flex; flex-direction:column; height:100%}
.mail-inbox .inbox-wrap{display:flex; flex:1}
.mail-inbox .inbox-l,
.mail-inbox .inbox-r{flex:1 1 auto; box-sizing:border-box}
.mail-inbox .inbox-l{display:flex; flex-direction:column; min-width:460px; max-width:460px; height:100%; }
.mail-inbox .inbox-r{display:flex; flex-direction:column; height:100%}

.mail-inbox .inbox-mail-list{flex:1; overflow:hidden; overflow-y:auto; box-sizing:border-box; padding-bottom:16px;}
.mail-inbox .mail-box{display:flex; position:relative; min-height:70px; padding-left: 12px; padding-right:35px; border-bottom:1px solid #eaeaea; box-sizing:border-box}
.mail-inbox .mail-box:last-child{border-bottom:none}
.mail-inbox .mail-box:hover{box-shadow:1px 5px 10px rgb(0 0 0 / 10%)}
.mail-inbox .mail-box > div{flex:1}
.mail-inbox .mail-box .mail-select{display:flex; min-width:fit-content; max-width:fit-content; padding-top:17px; box-sizing:border-box}

.mail-inbox .mail-box .mail-action{display:flex; align-items:flex-start; min-width:48px; max-width:48px; margin-left:15px; padding-top:17px; box-sizing:border-box}
.mail-inbox .mail-box .mail-action .read,
.mail-inbox .mail-box .mail-action .file{display:flex; align-items:center}
.mail-inbox .mail-box .mail-action .file{margin-left:12px}
.mail-inbox .mail-box .mail-action .read i,
.mail-inbox .mail-box .mail-action .file i{font-size:18px; color:#ababab}
.mail-inbox .mail-box .mail-action .read.active i{color:#dbcdff}

.mail-inbox .mail-box .mail-info{display:flex; flex-direction:column; margin:0 16px; padding:15px 0; box-sizing:border-box; min-width: 100px;}
.mail-inbox .mail-box .mail-info .send{display:flex; align-items:center; margin-bottom:5px}
.mail-inbox .mail-box .mail-info .send .send-tit
{
	text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
	font-size:14px; font-weight:300; color:#333; letter-spacing:-0.2px; overflow:hidden
}
.mail-inbox .mail-box .mail-info .read{display:flex; align-items:center}
.mail-inbox .mail-box .mail-info .read .read-preview
{
	display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;
	line-height:155%; font-size:14px; font-weight:normal; color:#555; letter-spacing:-0.2px; overflow:hidden
}
.mail-inbox .mail-box .mail-date{display:flex; align-items:flex-end; flex-direction:column; min-width:fit-content; max-width:fit-content; padding-top:17px; box-sizing:border-box; min-width: 100px;}
.mail-inbox .mail-box .mail-date .receive{display:flex; align-items:center}
.mail-inbox .mail-box .mail-date .receive .date,
.mail-inbox .mail-box .mail-date .receive .time{font-size:13px; color:#999}
.mail-inbox .mail-box .mail-date .receive .time{margin-left:5px}
.mail-inbox .mail-box .mail-date .keep{margin-top:5px}
.mail-inbox .mail-box .mail-date .keep i{font-size:16px; color:#bcbcbc}
.mail-inbox .mail-box .mail-date .keep.active i{color:#5629ee}

.mail-box.lavender{background:#f4f4ff}
.mail-box.lemon{background:#fffdee}
.mail-box.honeydew{background:#f0fff0}
.mail-box.aliceblue{background:#f0f8ff}
.mail-box.azure{background:#f0ffff}
.mail-box.snow{background:#fffafa}


/* Splitter 메일함 */
.mail-inbox .inbox-wrap.jqx-widget-content{border:0; border-radius: 0px;  overflow:initial; overflow-x:hidden; flex:1 1 0%}
.mail-inbox .inbox-wrap .jqx-splitter-collapse-button-vertical{display:none}
.mail-inbox .inbox-wrap .jqx-splitter-splitbar-horizontal, 
.mail-inbox .inbox-wrap .jqx-splitter-splitbar-vertical{border-color:#e9e9e9; box-shadow: 0 0 10px rgb(0 0 0 / 12%);}
.mail-inbox .inbox-wrap .splitter-panel{border-radius:0;}
.mail-inbox .inbox-l.splitter-panel{max-width:initial; min-width:340px; width:460px; flex:none }
.mail-inbox .inbox-wrap.jqx-widget-content .inbox-mail-page .paging-ty1 .page-button{flex:none; }
.mail-inbox .inbox-wrap.jqx-widget-content .inbox-mail-page .paging-ty1 .page-list{flex:none}
.mail-inbox .inbox-r.splitter-panel{flex:none; max-width:calc(100% - 340px);}
.mail-inbox .inbox-r.splitter-panel .inbox-mail-view{box-shadow: none; -webkit-box-flex:1; flex: 1 1 0%; min-height:0; }



/* 선택된 메일이 없을때 */
.mail-inbox .no-select-mail{position:relative; top:20vh;  display:flex; width:100%; justify-content:center; flex-direction:column; align-items:center; min-width: 300px; }
.mail-inbox .no-select-mail .empty-message{display:flex; align-items:center; flex-direction:column; justify-content:center; flex: none; width:200px}
.mail-inbox .no-select-mail .message-tit,
.mail-inbox .no-select-mail .message-stit,
.mail_list_empty .message-tit{line-height:135%; letter-spacing:-0.5px}
.mail-inbox .no-select-mail .message-tit,
.mail_list_empty .message-tit{color:#555; font-size:16px}
.mail-inbox .no-select-mail .message-stit{margin-top:5px; color:#888; font-size:14px}
/*.mail-inbox .no-select-mail:before{content:''; display:block; width:100px;	height:32px; margin-bottom:7px; background: url("/static/fw/images/mail/no_select_mail.png") 50% 50% no-repeat;}*/
.empty-message i{font-size:30px; color: #8364e8; background: #f4f4ff; border-radius:1000px; width:60px; height:60px; display:flex; justify-content:center; align-items:center; margin-bottom:10px}

/* 메일함 페이징 */
.mail-inbox .inbox-mail-page{padding:15px 0 15px; border-top:1px solid #eaeaea}
.mail-inbox .inbox-mail-page .paging-ty1{margin-top:0}


/* 메일보기  */
.mail-inbox .inbox-mail-view{flex:1; position:relative; overflow:hidden; overflow-y:auto; box-shadow:0 0 10px rgb(0 0 0 / 12%)}
.mail-view-wrap{display:flex; flex-direction:column; padding:30px 35px; min-width:700px;}
.mail-view-header .header-subject{display:flex; align-items:center}
.mail-view-header .header-subject .tit_area{display:flex; align-items:center}
.mail-view-header .header-subject .tit_area .tit{position:relative; top:2px; line-height:140%; color:#111; font-size:22px; font-weight:normal; letter-spacing:-1px}
.mail-view-header .header-subject .tit_area .keep{position:relative; /*top:4px;*/ margin-right:8px; color:#bcbcbc; font-size:20px}
.mail-view-header .header-subject .tit_area .keep.active i{color:#5629ee}
.mail-view-header .header-subject .util_area{display:flex; align-items:center; margin-left:auto}
.mail-view-header .header-subject .util_area .util-btn{display:flex; align-items:center; justify-content:center; position:relative; width:35px; height:35px; margin-left:15px; padding:0; border:0; text-align:center; background:#f4f4f4; border-radius:50%; outline:none; cursor:pointer; flex:none; }
.mail-view-header .header-subject .util_area .util-btn i{color:#555; font-size:18px}

.mail-view-header .header-report{display:flex; flex-direction:column; margin-top:18px}
.mail-view-header .report-col{position:relative; padding-left:75px}
.mail-view-header .report-col .report-tit{position:absolute; left:0; top:5px}
.mail-view-header .report-col .report-tit .tit{display:block; color:#555; font-size:13px; font-weight:300; letter-spacing:-0.5px}
.mail-view-header .report-col .report-list:after{content:''; display:block; clear:both}
.mail-view-header .report-col .report-list li{float:left;}
.mail-view-header .report-col .report-list .report-box{margin:2px; padding:3px 15px; background:#f2edff; color:#555; font-family:ptd !important; font-size:13px; font-weight:300; letter-spacing:-0.5px; border-radius:200px; box-sizing:border-box; cursor:pointer}
.mail-view-header .report-col.recipient{margin-top:4px}
.mail-view-header .report-col.reference{margin-top:4px}
.mail-view-header .report-date{display:flex; align-items:center; margin-top:15px; box-sizing:border-box}
.mail-view-header .report-date .date,
.mail-view-header .report-date .time{font-size:14px; color:#999}
.mail-view-header .report-date .time{margin-left:5px}
.mail-view-header .report-file{position:relative; margin-top:10px; padding:10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.mail-view-content .content-inner{padding:25px 0}


/* 메일쓰기 */
.mail-inbox .inbox-mail-write{flex:1; position:relative; overflow:hidden; overflow-y:auto}
.mail-write-wrap{display:flex; flex-direction:column; padding-top:15px}
.mail-write-header .header-report{display:flex; flex-direction:column; padding-right:35px}
.mail-write-header .report-col{position:relative; padding-left:145px}
.mail-write-header .report-col .report-tit{display:flex; align-content:center; position:absolute; left:0; top:12px; width:130px}
.mail-write-header .report-col .report-tit .tit{display:block; color:#555; font-size:13px; font-weight:300; letter-spacing:-0.5px; width:65px}
.mail-write-header .report-col .report-tit .option .ImageCheckbox.mail{top:-2px}
.mail-write-header .report-col .report-tit .option .ImageCheckbox.mail span{font-size:13px; color:#888}

.mail-write-header .report-col .report-tit .option .Button.refer_open{border:1px solid transparent; background:none; color:#888; position:absolute; bottom:0; left:60px}
.mail-write-header .report-col .report-tit .option .Button.only-ico.refer_open{min-width:auto}
.mail-write-header .report-col .report-tit .option .Button.small.refer_open{height:auto}
.mail-write-header .report-col .report-tit .option .Button.refer_open:hover,
.mail-write-header .report-col .report-tit .option .Button.refer_open.af-hover{background:none}

.mail-write-header .report-col .report-cont{position:relative; min-height:42px; padding:3px 0; border-bottom:1px solid #eaeaea; box-sizing:border-box}
.mail-write-header .report-col .report-cont .subject
{
	position: relative; width:100%; height:35px; line-height:36px; padding:0 15px; border:0; color:#333;
	font-family:'pps', 'ptd', 'sans-serif' !important; font-size:14px; font-weight:normal;
	letter-spacing:-0.5px; background:none; border-radius:0; overflow:hidden; vertical-align:middle; outline:none;
	box-sizing:border-box;
}
.mail-write-header .report-col:last-child .report-cont{border-bottom:none}
.mail-write-header .report-col .report-cont .report-util{position:absolute; top:5px; right:0}
.mail-write-content{padding:25px 0; padding-right:35px}


.tag-editor-wrap{position:relative; min-height:35px; padding-right:80px; vertical-align:middle; box-sizing:border-box}
.tag-editor-wrap textarea{display:none}
.tag-editor{list-style-type:none; margin:0; padding:0; overflow:hidden; cursor:text}
.tag-editor:after{content:''; display:block; clear:both}
.tag-editor li{float:left; overflow:hidden; margin:0; position:relative; margin:5px}
.tag-editor li:nth-child(2){margin-left:-6px}
.tag-editor .tag-editor-spacer{display:none}
.tag-editor input[type='text']
{
	display:block; margin:0; height:25px; line-height:25px;
	border:0; outline:none; background:none; color:#555; font-size:13px; letter-spacing:-0.2px; border-radius:0; cursor:text; box-sizing:border-box
}
.tag-editor .tag-editor-tag
{
	position:relative; height:25px; line-height:25px; padding-left:12px; padding-right:28px;
	color:#333; background:#f2edff; font-size:13px; letter-spacing:-0.2px;
	border:0; white-space:nowrap; overflow:hidden; cursor:pointer; border-radius:200px; box-sizing:border-box
}
.tag-editor .tag-editor-delete{position:absolute; right:0; top:0; width:28px; height:25px; line-height:25px; text-align:center; cursor:pointer}
.tag-editor .tag-editor-delete:before{content:'\eb98'; position:relative; top:1px; color:#9c9c9d; font-family:'remixicon'; font-size:18px}
.tag-editor .tag-editor-delete i{display:none}

.tag-editor .tag-editor-tag.active{padding:0}
.tag-editor .tag-editor-tag.active + .tag-editor-delete,
.tag-editor .tag-editor-tag.active + .tag-editor-delete i{visibility:hidden; cursor:text}
.tag-editor .tag-editor-tag.active {background:none}


/* **************************************** *
*  MAIL-TOP
* **************************************** */
.mail-inbox .mail-top{display:flex; align-items:center; min-height:44px; border-bottom:1px solid #f2edff}
.mail-inbox .mail-top .top-controller{display:flex; align-items:center; width:100%}
.mail-inbox .mail-top .top-controller .controller-l,
.mail-inbox .mail-top .top-controller .controller-r{display:flex; align-items:center}
.mail-inbox .mail-top .top-controller .controller-r{margin-left:auto; padding-right:35px}

.mail-inbox .mail-top .controller-btn,
.mail-inbox .mail-top .btn-box,
.mail-inbox .mail-top .btn-box .btn{display:flex; align-items:center}

.mail-inbox .mail-top .btn-box{margin-left:12px; margin-right: 6px;}
.mail-inbox .mail-top .btn-box .btn{cursor:pointer}
.mail-inbox .mail-top .btn-box .btn span{font-size:13px; font-weight:300; color:#888; letter-spacing:-0.5px}
.mail-inbox .mail-top .btn-box .btn i{margin-right:5px; color:#555; font-size:1.2rem}

.mail-inbox .mail-top .mail-search{position:relative; top:-6px}



/* **************************************** *
*  메일 환경설정
* **************************************** */
.mail_tabs .Tabs > ul > li{font-size:15px; margin:0 13px; padding:10px 13px; border-bottom:2px solid rgb(0,0,0,0)}
.mail_tabs .Tabs > ul > li.Selected{border-bottom:2px solid #5629ee; font-weight:300; color: #5629ee;}
.mail_tabs .Tabs > ul > li:hover,
.mail_tabs .Tabs > ul > li:active{border-bottom:2px solid rgb(0,0,0,0)}
.mail_tabs .Tabs .af-tabs-content{padding:30px 0 0}
.mail_tabs .Tabs .mail_setting_list .top_tit{font-size:16px; color:#222; letter-spacing:-0.5px; padding-left:15px}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont{box-sizing:border-box; position:relative; min-height:65px; padding:20px 0 15px 210px; border-bottom:1px solid #f4f4f4}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont.ovtit{padding:20px 0 40px 210px}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .tit_area{position:absolute; top:22px; left:15px; width:175px; word-break:keep-all}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .tit_area .tit{position: relative; font-size:14px; line-height:20px; letter-spacing:-0.5px;}

.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .ImageRadio{margin-left:30px}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .ImageRadio:first-child{margin-left:0}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .ImageRadio span,
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .ImageCheckbox span{font-size:14px; color:#555; letter-spacing:-0.5px; margin-left:5px}


.mail_write_recept{padding:0 50px 50px 0; text-align:right}
.mail_write_recept .ImageCheckbox.mail span{font-size:14px; margin-left:3px}

.mail_setting_footer{position:relative; text-align:center; padding:30px 0 50px 0}
.mail_setting_footer .reset_btn{position:absolute; top:35px; left:15px}
.mail_setting_footer .reset_btn .Button{border:1px solid transparent; color:#555; border-radius:0; height:25px; padding:0px}
.mail_setting_footer .reset_btn .Button:hover,
.mail_setting_footer .reset_btn .Button.af-hover{background:none; color:#5629ee; border-bottom:1px solid #5629ee}
.mail_setting_footer .Button{font-size:14px; border-radius:5px}

.mail_tabs .Tabs .mail_setting_list .mail_setting_cont.table{border-bottom:0}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .mail_top_btn{margin-bottom:10px}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .mail_table .table_cont .sign_default{font-size:12px; color:#5629ee; border:1px solid #5629ee; border-radius:20px; padding:0px 5px; margin-right:3px}
.mail_tabs .Tabs .mail_setting_list .mail_setting_cont .cont_area .mail_table .table_cont li > .data_null{padding:30px; color:#999}


.mail_tabs .Tabs .mail_top_btn{margin-bottom:20px}
.mail_tabs .Tabs .mail_table{display: flex; justify-content:center}
.mail_tabs .Tabs .mail_table .table_cont{width:100%}
.mail_tabs .Tabs .mail_table .table_cont li{display:flex; align-items:center; border-bottom:1px solid #eaeaea;}
.mail_tabs .Tabs .mail_table .table_cont li.sort{position:relative; width:100%; background:#fcfcfd; border-top:1px solid #dddddd}
.mail_tabs .Tabs .mail_table .table_cont li.sort .tit{font-weight:300; color:#333; font-size:14px}
.mail_tabs .Tabs .mail_table .table_cont li > div{text-align:center; padding:8px 15px; color:#555; font-size:14px}


.mail_tabs .Tabs .mail_table .table_cont li > div.txt_l{text-align:left}


/* **************************************** *
*  MAIL-FILTER
* **************************************** */
.dev-content.mail .infoTxt01{font-size:14px; color:#777; }
.mail-fliter .Divselect{flex:1 0 auto}
.mail-fliter .Button{flex:1 0 auto}
.mail-fliter.writing-ty1 .writing-list{border:0;}
.mail-fliter.writing-ty1 .writing-list > li{align-items:baseline}
.mail-fliter.writing-ty1 .writing-list .ImageCheckbox span{margin-left: 8px;}
.mail-fliter.writing-ty1 .writing-list strong.tit{font-weight: 300;}
.mail-fliter.writing-ty1 .writing-list .filter-option{display:flex; width:100%; padding:6px 0px}
.mail-fliter.writing-ty1 .writing-list .filter-option.sub{flex-direction:column; display:none}
.mail-fliter.writing-ty1 .writing-list .filter-option.sub.active{display:flex}
.mail-fliter.writing-ty1 .writing-list .filter-option .option-tit{color:#444; letter-spacing: -0.5px; font-size: 14px; margin-bottom: 6px; padding:0px 4px}
.mail-fliter.writing-ty1 .writing-list .filter-option .tag-list{display:flex; flex-wrap:wrap}
.mail-fliter.writing-ty1 .writing-list .filter-option .tag-box{border-radius: 30px; padding:0px 25px 0 10px; border-color:#d2c4ff; margin-right: 4px;}
.mail-fliter.writing-ty1 .writing-list .filter-option .tag-box .del{line-height: 1; margin-right:2px;}
.mail-fliter.writing-ty1 .writing-list:first-child{border-bottom:1px solid #e9e9e9; padding-bottom:8px}


/* **************************************** *
*  MAIL-EDIT-SIGN
* **************************************** */
.mail .sign_opt{display:flex; margin-top:8px}
.mail .writing-ty1 .writing-cont.edit_sign{align-items:flex-start}
.mail .mail-write-content{width:100%; padding:0; border:1px solid #000}
.mail .writing-ty1 .writing-cont.sign_img_upload{flex-direction:column; width:100%; align-items:initial}
.mail .writing-cont.sign_img_upload .guide-box{padding:10px 20px}
.mail .writing-cont.sign_img_upload .guide-box .dash-tit{font-size:14px}


/* **************************************** *
*  MAIL-LIST-EMPTY
* **************************************** */
.mail_list_empty{height:100%; text-align:center}
.mail_list_empty p{color:#555; font-size:14px; padding:15px}