@charset "utf-8";
/* **************************************** *
*  MOBILE LAYOUT
* **************************************** */
.mobile .m_layout_wrap{padding:0px 16px}

.mobile .jqx-grid .jqx-grid-column-header,
.mobile .jqx-grid .jqx-grid-cell{font-size:10px}
.mobile .jqx-grid-cell .cell-text-mgt{margin-top:2px}
.mobile .jqx-grid-cell .cell-signal-mgt{margin-top:1px}

.mobile .jqx-grid-cell .signal-color .cont-txt{font-size:10px}
.mobile .jqx-grid-cell .signal-color:before{width:8px; height:8px}


/* **************************************** *
*  MOBILE HEADER
* **************************************** */
.mobile-header{display:flex; align-items:center; position:relative; min-height:44px; background: #fff; border-bottom:1px solid #f8f8f8; width:100%; margin-bottom:15px}
.header-wrap{display:flex; align-items:center; height:44px; width:100%}
.header-wrap .header-cont{display:flex; justify-content:center; align-items:center; width:100%}
.header-wrap .header-cont .header-tit{display:inline-flex; line-height:125%; color: #222; font-size:16px; font-weight:600; letter-spacing:-1px}

.header-wrap .header-cont a{position:absolute; font-weight:600; font-size:18px; line-height:125%; color:#555}
.header-wrap .header-cont .prev{left:15px}    
.header-wrap .header-cont .close,
.header-wrap .header-cont .set{right:15px}


/* **************************************** *
*  MOBILE grid
* **************************************** */
.mobile-layout .com-grid{}
.mobile-layout .jqx-grid .jqx-grid-column-header{font-size:10px}
.mobile-layout .com-grid .jqx-widget-header.jqx-grid-header{height:30px !important}
.mobile-layout .com-grid .jqx-widget-header.jqx-grid-header > div > div{line-height:30px !important}
.mobile-layout .jqx-grid-column-header.jqx-widget-header,
.mobile-layout .jqx-grid-column-header.jqx-widget-header > div > div{height:30px !important; line-height:30px !important}
.mobile-layout .jqx-grid-column-header.jqx-widget-header .jqx-checkbox{top:50% !important}
.mobile-layout .com-grid .jqx-grid .jqx-grid-cell,
.mobile-layout .com-grid .signal-color .cont-txt{font-size:10px !important}
.mobile-layout .com-grid .signal-color .cont-txt{line-height:170% !important}
.mobile-layout .com-grid .jqx-grid-cell .cell-signal-mgt{margin-top:5px !important}
.mobile-layout .com-grid .jqx-checkbox{top:-6% !important}
.mobile-layout .com-grid .ImageCheckbox:after{top:20% !important}

/*.mobile-layout .com-grid > div > div > div > div > div > div > div{height:30px !important}
.mobile-layout .com-grid > div > div > div > div > div > div > div > div{height:30px}*/

.mobile-layout .com-grid.max .jqx-grid .jqx-grid-column-header,
.mobile-layout .com-grid.max .jqx-grid .jqx-grid-cell{font-size:14px !important}
.mobile-layout .com-grid.max .jqx-widget-header.jqx-grid-header{height:42px !important}
.mobile-layout .com-grid.max .jqx-grid-column-header.jqx-widget-header,
.mobile-layout .com-grid.max .jqx-grid-column-header.jqx-widget-header > div > div{height:42px !important; line-height:42px !important}
.mobile-layout .com-grid.max .jqx-grid-column-header.jqx-widget-header .jqx-checkbox{top:50% !important}
.mobile-layout .com-grid.max .signal-color .cont-txt{font-size:13px !important}
.mobile-layout .com-grid.max .signal-color .cont-txt{line-height:155% !important}
.mobile-layout .com-grid.max .jqx-grid-cell-left-align.linecut{margin-top:3px !important}
.mobile-layout .com-grid.max .estm_total > div{margin-top:10px !important}


/* **************************************** *
*  MAIN
* **************************************** */
.dev-content.mobile.main{padding:8px; background:#f3f2f4; height:-webkit-fill-available}
.dev-content.mobile .list_tit{display:flex; align-items:center; justify-content:space-between; margin:0px 8px 10px 8px}
.dev-content.mobile .list_tit h4{font-size:18px}

.mobile .main-dashboard{display:block; float:none; height:auto}
.mobile .list_box{margin-bottom:20px}
.mobile .list_box .list_box_inner{background: #fff; border-radius:15px; padding:10px 13px; box-shadow:2px 2px 4px 0 rgb(0 0 0 / 8%)}
.mobile .list_box .list_box_inner li.post-item{border-bottom:1px solid #e8e8e8; padding:10px 8px; border-left:0}
.mobile .list_box .list_box_inner li.post-item:last-child{border-bottom:0}
.mobile .list_box .list_box_inner li.post-item:hover{background:none}
.mobile .list_box .list_box_inner li.post-item .post-tit{font-size:14px}
.mobile .list_box .list_box_inner li.post-item .post-date{font-size:13px; min-width:80px}

.mobile .calendar_wrap{width:100%; background: #fff; border-radius:15px;}
.mobile .caldndar_area{display: flex; justify-content:center; align-items:center}
.mobile .Tabs.round > ul > li{display:flex; justify-content:center; align-items:center; border:1px solid #b7afd4; color: #998ec2; font-size:15px; height:auto; padding:6px 14px;  margin:0 3px; height:36px; width:72px}
.mobile .Tabs.round > ul > li:first-child{margin:0px 3px 0px 0px}
.mobile .Tabs.round > ul > li.Selected{background: #8364e8; color: #fff; border:0}
.mobile .Tabs.round .af-tabs-content{margin-top: 8px; padding:0px}

.mobile .detail-info ul{display:block !important}
.mobile .detail-info ul li{border-bottom: 1px solid #f0f0f0; padding:6px 12px; min-height: 38px; display:flex; flex-wrap:wrap; align-items:center; letter-spacing: -0.5px; color:#333; font-size: 13px;}

.mobile .detail-info{background:#fff;  height:300px; overflow:hidden; overflow-y:auto; border-radius:15px;}
.mobile .detail-info.attend ul li{margin-bottom:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: #555; font-size:13px; font-weight:300; }
.mobile .detail-info.attend ul li:hover{color:#5629ee}
.mobile .detail-info.attend ul li .user{margin-left:5px; font-weight:normal}
.mobile .detail-info.attend ul li:hover .user{color:#555}

.mobile .detail-info ul li > div{width:100%}
.mobile .detail-info ul li .user{margin-left: 12px; color:#777}
.mobile .detail-info ul li .time{color:#aaa}

.mobile .detail-info .signal-color .cont-txt.time{color:#333}
.mobile .detail-info .detail_subject{display:flex; justify-content:space-between; margin-top:5px; font-size:13px; color:#555}
.mobile .detail-info .detail_subject .user{color:#888}
.mobile .detail-info .detail_subject .user i{color:#aaa}

.mobile .main-dashboard .mobile-widget{display: flex; flex-direction: column; align-content: flex-start; width: 100%}

.mobile .main-dashboard .mobile-widget .widget {width: 100%; display: flex; flex-direction:column}
.mobile .main-dashboard .mobile-widget .widget_content{overflow:hidden; overflow-y:auto; height:calc(100% - 80px)}
.mobile .main-dashboard .widget_header.Header{padding:0px 14px 0px 14px; margin-bottom: 4px;}
.mobile .main-dashboard .post-item{padding:10px 14px 10px 14px}


/* **************************************** *
*  MAIL-MENU
* **************************************** */
.dev-content.mobile.mail{padding:0; display:flex; flex-direction:column}
.dev-content.mobile.mail .mail-write{margin-bottom:13px}
.dev-content.mobile.mail .mail-write button{width:100%; border-radius:0; font-size:14px}
.dev-content.mobile.mail .app-nav{flex:1}

.dev-content.mobile.mail .mail-lnb{padding:0}
.dev-content.mobile.mail .mail-lnb li{padding-left:0}
.dev-content.mobile.mail .mail-lnb li > .mail-box{padding:0 15px}
.dev-content.mobile.mail .mail-lnb li > ul{background:#f8f8f8; padding:10px 0}
.dev-content.mobile.mail .mail-lnb li > ul > li{padding:0px 20px}
.dev-content.mobile.mail .mail-lnb li > ul > li .mail-box{padding:0}

.dev-content.mobile.mail .mail-lnb li > ul > li .mail_box_cont .mail-box-controll{right:20px}
.dev-content.mobile.mail .mail-lnb li > ul > li .mail_box_cont:hover{background:none}
.dev-content.mobile.mail .mail-lnb li > ul > li > ul{padding:0px 15px}
.dev-content.mobile.mail .mail-lnb li > ul > li > ul > li{padding:0}
.dev-content.mobile.mail .mail-lnb li > ul > li .mail_box_cont.selected{background:none}
.dev-content.mobile.mail .mail-lnb li > ul > li .mail_box_cont{padding:0}

.dev-content.mobile.mail .mail-inbox .mail-top .controller-btn{position:relative}
.dev-content.mobile.mail .mail_box_more_pop.move{left:initial; right:0px; top:26px}

/* **************************************** *
*  MAIL-LIST
* **************************************** */
.mobile.mail .mail-inbox .mail-box .mail-info .read .read-preview{white-space:nowrap; display:block}
.mobile.mail .mail-inbox .mail-box:last-child{border-bottom:1px solid #eaeaea}
.mobile.mail .mail-inbox .mail-box:hover{box-shadow:none}
.mobile.mail .mail-inbox .mail-box .mail-info .send .send-tit,
.mobile.mail .mail-inbox .mail-box .mail-info .read .read-preview{font-weight:300}
.mobile.mail .mail-inbox .mail-box .mail-info.open .send .send-tit,
.mobile.mail .mail-inbox .mail-box .mail-info.open .read .read-preview{font-weight:normal}


/* **************************************** *
*  MAIL-VIEW
* **************************************** */
.mobile.mail .mail-view-wrap{min-width:100%; padding:20px}
.mobile.mail .mail-view-header .header-report{margin-top:15px}
.mobile.mail .mail-view-header .header-subject{position:relative}
.mobile.mail .mail-view-header .header-subject .tit_area .keep{font-size:18px; top:2px}
.mobile.mail .mail-view-header .header-subject .tit_area .tit{font-size:18px; font-weight:300}
.mobile.mail .mail-view-header .report-date{margin-top:10px}
.mobile.mail .mail-view-header .report-date .date,
.mobile.mail .mail-view-header .report-date .time{font-size:13px}

.mobile.mail .mail-view-content{overflow:auto}

.mobile.mail .mail-view-content .content-inner{padding:15px 0;}
.mobile.mail .mail-view-content .content-inner p{line-height:165%; font-family:ptd; font-size:14px; letter-spacing:-0.2px; color:#333}

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

.mobile.mail .mail-view-header .header-subject .util_area .util-btn{width:30px; height:30px; background:none}
.mobile.mail .mail-view-header .header-subject .util_area .util-btn:hover{background:#f4f4f4}
.mobile.mail .mail-view-header .header-subject .util_area .util-btn i{font-size:14px}
.mobile.mail .mail-view-header .header-subject .mail_box_more_pop{top:35px; right:0px; box-shadow:0px 2px 4px 2px rgba(0,0,0, 8%)}
.mobile.mail .mail-view-header .header-subject .mail_box_more_pop li{padding:5px 10px}


/* **************************************** *
*  MAIL-WRITE
* **************************************** */
.mobile.mail .mail-write-wrap{padding-top:0px; padding:20px}
.mobile.mail .header-report{padding-right:0}
.mobile.mail .mail-write-header .report-col{padding-left:80px}
.mobile.mail .mail-write-header .report-col:last-child .report-cont{border-bottom:1px solid #eaeaea}
.mobile.mail .mail-write-header .report-col .report-cont.file{margin-top:5px}
.mobile.mail .mail-write-header .report-col .report-cont .subject{padding:0 10px}
.mobile.mail .mail-write-header .report-col .report-cont .report-util.add .Button.small{font-size:13px; color:#999; border:1px solid transparent; background:none}
.mobile.mail .mail-write-header .report-col .report-cont .report-util.add .Button.small:hover{color:#5629ee}

.mobile.mail .report-col.reference.file{font-size:13px; color:#333; padding-left:0; padding-top:40px}
.mobile.mail .report-col.reference.file .report-tit{justify-content:space-between; width:100%; align-items:center}
.mobile.mail .report-col.reference.file .file_cont{border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:10px 5px}
.mobile.mail .report-col.reference.file .file_cont_list{margin:10px 5px}
.mobile.mail .report-col.reference.file .file_cont_list li{display:flex; align-items:center; justify-content:space-between}
.mobile.mail .report-col.reference.file .file_cont span.size,
.mobile.mail .report-col.reference.file .file_cont_list li p span.size{color:#999; margin-left:5px}
.file_cont_list .Button,
.file_cont_list .Button:active, .file_cont_list .Button:hover,
.file_cont_list .Button:focus, .file_cont_list .Button.af-hover,
.file_cont_list .Button.Checked{border:1px solid transparent; background:none; color:#aaa}

.mobile.mail .report-col.reference.file .Button.upload{border:1px solid transparent; background:none; color:#999}
.mobile.mail .report-col.reference.file .Button.upload:hover{border-radius:1000px; background:#f4f4f4; color:#5629ee}


/* **************************************** *
*  INQUIRY-FORM 자재구매내역
* **************************************** */
.dev-content.mobile.inquiry{padding:0}
.mobile.inquiry .inquiry-form{padding:20px}
.mobile.inquiry .inquiry-form .Divselect, .mobile.inquiry .inquiry-form .Textinput,
.mobile.inquiry .Dateinput > input, .mobile.inquiry .Daterange .Startdate > input,
.mobile.inquiry .Daterange .Enddate > input{border-radius:5px}

.mobile.inquiry .Daterange{display:flex; display:flex; align-items:center}
.mobile.inquiry .Daterange > .Startdate, .mobile.inquiry .Daterange > .Enddate{width:100%}
.mobile.inquiry .Dateinput > input, .mobile.inquiry .Daterange .Startdate > input,
.mobile.inquiry .Daterange .Enddate > input{width:100%}
.mobile.inquiry .Daterange .dash-uni{margin:0 10px}

.mobile.inquiry .inquiry-form .inquiry-form-list li{margin-bottom:10px}
.mobile.inquiry .inquiry-form .inquiry-form-list .inquiry-tit .tit{display:inline-block; font-size:14px; letter-spacing: -0.5px; color: #333; font-weight:300; margin-bottom:5px}
.mobile.inquiry .inquiry-form .inquiry-form-list .inquiry-cont .Divselect span{font-size:14px}


/* **************************************** *
*  INQUIRY-LIST 자재구매내역 상세
* **************************************** */
.mobile.inquiry h3.stit03{font-size:18px}
.mobile.inquiry .Button.small.only-ico{min-height:32px; font-size:15px}
.mobile.inquiry .inquiry-form .dash-tit{font-size:14px}
.mobile.inquiry .inquiry-form .Textinput.inquiry-detail{height:32px}

.mobile .Button.ty2{position:fixed; width:100%; background:#5D2BEE; border-radius: 0px; border:0px; height:80px; bottom:0px; color:#fff; font-size: 17px; display:flex; align-items:center; padding:0}
.mobile .Button.ty2 span{width:50%; position:relative; line-height:80px}
.mobile .Button.ty2 span:after{position:absolute; top:0; right:0; content:""; height:100%; width:1px; background:#ffffff4a}
.mobile .Button.ty2 span:last-child:after{background:none}


/* **************************************** *
*  결재기안문서
* **************************************** */
.dev-content.mobile.aprv_doc{padding:0px; height:100%;}
.dev-content.mobile.aprv_doc .stitArea.aprv-fixed{width:100%; top:0px}
.dev-content.mobile.aprv_doc .stitArea.aprv-fixed .stitL{width:initial}
.dev-content.mobile.aprv_doc .stitArea.aprv-fixed .stitR{width:100%}
.dev-content.mobile.aprv_doc .stitArea.aprv-fixed .Groupbutton .Button{margin:0px}
.dev-content.mobile.aprv_doc .stitArea.aprv-fixed .Groupbutton .Button{border-radius:0;}
.dev-content.mobile.aprv_doc .dev-content-mobile.sme-aprv{margin-top: 0px;}

.dev-content.mobile.aprv_doc .writing-ty1 .writing-list{border-bottom:0; padding:0}
.dev-content.mobile.aprv_doc .writing-ty1 .writing-tit .tit{font-size:14px}
.dev-content.mobile.aprv_doc .writing-ty1 .writing-cont{font-size:13px}
.dev-content.mobile .writing-cont .Fileupload{width:100%}
.dev-content.mobile .writing-cont .Fileupload .switch .label{font-size:14px}
.dev-content.mobile.aprv_doc .Fileupload .all-fileinfo{display:flex; flex-wrap:wrap; position:relative; top:0px; margin-bottom:8px; max-width:100%}
.dev-content.mobile.aprv_doc .Fileupload .Button.small{float:initial!important}

@media all and (max-width:430px)
{
	.dev-content.mobile.aprv_doc .aprv-wrap{flex-direction:column; width:100%}
	.dev-content.mobile.aprv_doc .flag-approval .approval-list li{width:120px; min-width:120px; max-width:120px}
	.dev-content.mobile.aprv_doc .flag-approval{width:100%; margin-top:10px}
    .dev-content.mobile.aprv_doc .Fileupload .Button.small{margin-left:0 !important; width:100%}
}

.dev-content.mobile.aprv_menu{padding:10px 0}
.dev-content.mobile.aprv_menu .aprv-tree .columnBox{border:0; padding:10px}

.mobile.aprv_doc .writing-list > li{min-height:50px; border-bottom:1px solid #e9e9e9}
.mobile.aprv_doc .writing-list:first-child{border-top:1px solid #e9e9e9}

.mobile.aprv_doc .docpilot-box.lineless{height:100%; padding:12px}
.mobile.aprv_doc .docpilot-box.lineless .doc-view{border:0px; padding:0px}
.mobile.aprv_doc .docpilot-step.final{height:100%; padding:0px}
.mobile.aprv_doc .docpilot-btn{width:100%; padding:24px 12px; background:#fff}

/* **************************************** *
*  CHAT
* **************************************** */

h4.mtit04{font-size: 13px; color:#999}

/* Chat list */
.mobile .chat-list{width:100%; margin-top: 8px;}
.mobile .chat-list li{display:flex; width:100%; gap:12px; padding:10px 0px}
.mobile .chat-list .profile-img{display:flex; justify-content:center; align-items: center; border-radius: 50%; overflow:hidden; width: 48px; height: 48px; border: 1px solid #0000000D; background:#CDD4D9}
.mobile .chat-list .profile-img.nodata::before{content:"\f264"; font-family:"remixicon"; font-size:28px; color:#fff; display:block;}
.mobile .chat-list .profile-img img{object-fit: cover; width:100%; height:100%}
.mobile .chat-list .profile-img.bg01::before,
.mobile .chat-list .profile-img.bg02::before,
.mobile .chat-list .profile-img.bg03::before,
.mobile .chat-list .profile-img.bg04::before,
.mobile .chat-list .profile-img.bg05::before,
.mobile .chat-list .profile-img.bg06::before{display:none}
.mobile .chat-list .profile-img.bg01{background:#5629EE; color:#fff}
.mobile .chat-list .profile-img.bg02{background:#FFB300; color:#fff}
.mobile .chat-list .profile-img.bg03{background:#2983ee; color:#fff}
.mobile .chat-list .profile-img.bg04{background:#f67075; color:#fff}
.mobile .chat-list .profile-img.bg05{background:#29c3a2; color:#fff}
.mobile .chat-list .profile-img.bg06{background:#9b9b9b; color:#fff}
.mobile .chat-list .profile-img span{font-size: 19px; font-weight: 300;}
.mobile .chat-list .chat-cont{flex:1; letter-spacing: -0.5px;}
.mobile .chat-list .chat-cont .cont-tit{display:flex; flex-direction: row; align-items: center; margin-top:2px}
.mobile .chat-list .chat-cont .cont-tit .label{border-radius: 50px; flex:none; display:inline-flex; justify-content:center; align-items:center; height: 20px; border-radius: 50px; font-size: 12px; margin-right: 8px;}
.mobile .chat-list .chat-cont .cont-tit .label.my{background:#8095A8; color:#fff; width: 20px; }
.mobile .chat-list .chat-cont .cont-tit .label.color01{background:#fff; color:#5629EE; border:1px solid #5629EE;  padding:0px 6px}
.mobile .chat-list .chat-cont .cont-tit .label.color02{background:#fff; color:#50C878; border:1px solid #50C878;  padding:0px 6px}
.mobile .chat-list .chat-cont .cont-tit .label.color03{background:#fff; color:#4F86F7; border:1px solid #4F86F7;  padding:0px 6px}
.mobile .chat-list .chat-cont .cont-tit .label.color04{background:#fff; color:#FA9336; border:1px solid #FA9336;  padding:0px 6px}
.mobile .chat-list .chat-cont .cont-tit .label.color05{background:#fff; color:#FA196D; border:1px solid #FA196D;  padding:0px 6px}

.mobile .chat-list .chat-cont .cont-tit .tit{display:block; color:#222; font-size: 15px; font-weight: 300; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mobile .chat-list .chat-cont .cont-tit .count{margin-right: 4px; flex:none; color:#999}
.mobile .chat-list .chat-cont .cont-tit i{color:#ccc; flex:none}
.mobile .chat-list .chat-cont .cont-txt{display:block; font-size: 13px; color:#999;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.mobile .chat-list .chat-etc{text-align: right; margin-top:4px}
.mobile .chat-list .chat-etc .date{color:#999; font-weight: normal; font-size: 12px;}
.mobile .chat-list .chat-etc .badge-color{height:18px; padding:0px 6px}
.mobile .chat-list .chat-etc .badge-color .cont-txt{font-size: 11px !important; line-height: 1.7;}
.mobile .chat-list .chat-cont .cont-tit .label{border-radius: 50px; flex:none}
.mobile .chat-list .chat-cont .cont-tit .label.me{display:inline-flex; justify-content:center; align-items:center; width: 20px; height: 20px; border-radius: 50%; background:#8095A8; color:#fff; font-size: 12px; margin-right: 8px;}
.mobile .chat-list .chat-cont .cont-tit .tit{color:#222; font-size: 16px; font-weight: 300; margin-right: 8px;}
.mobile .chat-list .chat-cont .cont-tit .count{margin-right: 4px;}
.mobile .chat-list .chat-cont .cont-tit i{color:#ccc}
.mobile .chat-list .chat-cont .cont-txt{font-size: 15px; color:#999;}
.mobile .chat-list .chat-etc{text-align: right;}
.mobile .chat-list .chat-etc .date{color:#999}
.mobile .chat-list .chat-cont .cont-tit .label{border-radius: 50px; flex:none}
.mobile .chat-list .chat-cont .cont-tit .label.me{display:inline-flex; justify-content:center; align-items:center; width: 20px; height: 20px; border-radius: 50%; background:#8095A8; color:#fff; font-size: 12px; margin-right: 8px;}
.mobile .chat-list .chat-cont .cont-tit .tit{color:#222; font-size: 16px; font-weight: 300; margin-right: 8px;}
.mobile .chat-list .chat-cont .cont-tit .count{margin-right: 4px;}
.mobile .chat-list .chat-cont .cont-tit i{color:#ccc}
.mobile .chat-list .chat-cont .cont-txt{font-size: 15px; color:#999;}
.mobile .chat-list .chat-etc{text-align: right;}
.mobile .chat-list .chat-etc .date{color:#999}

/* Chat */
.mobile .chat-wrap{position:relative; width:100%;}

.mobile .chat-wrap .chat-notice-wrap{position:fixed; width:100%; height:auto; top:0px; left:0px; background:#ffffffe6; padding:12px 24px; border-bottom:1px solid #f0f0f0;} 
.mobile .chat-wrap .chat-notice{ display:flex; flex-direction: row; }
.mobile .chat-wrap .chat-notice .notice-icon{width:16px; height:16px; display:flex; justify-content:center; align-items:center; margin-right: 12px; margin-top:3px}
.mobile .chat-wrap .chat-notice .notice-icon:before{content:"\f384"; font-family:"remixicon"; font-size: 18px; color:#FAA619}
.mobile .chat-wrap .chat-notice .notice-cont{letter-spacing: -0.5px; flex:1 auto}
.mobile .chat-wrap .chat-notice .notice-cont .tit{color:#222; font-size: 16px;}
.mobile .chat-wrap .chat-notice .notice-cont .user{color:#999; font-size: 15px; margin-top: 4px;}
.mobile .chat-wrap .chat-notice .arrow{width:16px; height:16px; display:flex; justify-content:center; align-items:center; margin-left: 8px;}
.mobile .chat-wrap .chat-notice .arrow:before{content:"\ea78"; font-family:"remixicon"; color:#aaa; font-size: 20px;}
.mobile .chat-wrap .chat-notice .arrow.open{transform:rotate(180deg)}
.mobile .chat-wrap .notice-button{display:flex; justify-content:flex-end; gap:8px}
.mobile .chat-wrap .notice-button{margin-top: 8px;}
.mobile .chat-wrap .notice-button .Button{height:26px; padding:0px 12px; font-size: 13px;}
.mobile .chat-wrap ul li > .date{background:#00000008; border-radius: 20px; padding:8px 26px; width:fit-content; color:#777; margin:0 auto; margin-bottom: 24px;}

.mobile .talk-wrap {display:flex; flex-direction: row; width:100%; gap:8px; margin-bottom: 12px;}
.mobile .talk-wrap .profile-img{display:flex; justify-content:center; align-items: center; border-radius: 50%; overflow:hidden; width: 42px; height: 42px; border: 1px solid #0000000D; background:#CDD4D9; flex:none}
.mobile .talk-wrap .profile-img.nodata::before{content:"\f264"; font-family:"remixicon"; font-size:28px; color:#fff; display:block;}
.mobile .talk-wrap .profile-img img{object-fit: cover; width:100%; height:100%}
.mobile .talk-wrap .talk-info{flex:1;}
.mobile .talk-wrap .talk-info .name{font-size: 14px; color:#999; letter-spacing: -0.6px;}
.mobile .talk-wrap .talk-info .txt{width:fit-content}

.mobile .talk-wrap .talk{display:flex; flex-direction: row; gap:8px}
.mobile .talk-wrap .talk .talk-etc{display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.2; font-size: 11px; color:#999; padding-bottom: 4px; flex:none}
.mobile .talk-wrap .talk .talk-etc .count{color:#C348FF}
.mobile .talk-wrap .talk.del .txt{border:1px dashed #AFC3D5; background:#fff !important; color:#AFC3D5 !important}
.mobile .talk-wrap.friend {padding-right: 48px;}
.mobile .talk-wrap.friend .talk-info .txt{background:#eee; border-radius: 0px 24px 24px 24px; padding:8px 14px; font-size: 14px; color:#202020; letter-spacing: -0.5px; margin-top: 6px;}

.mobile .talk-wrap.my{padding-left: 48px;}

.mobile .talk-wrap.my .talk-info{text-align: right;}
.mobile .talk-wrap.my .talk{justify-content:flex-end}
.mobile .talk-wrap.my .talk-info .txt{background:#eee; border-radius: 24px 0px 24px 24px; padding:8px 14px; font-size: 14px; color:#202020; letter-spacing: -0.5px; margin-top: 6px;}
.mobile .chat-input-area{position:fixed; left:0px; bottom:0px; height:48px; border-top:1px solid #f0f0f0; width:100%; display:flex; flex-direction: row; align-items:center; gap:4px}
.mobile .chat-input-area .Textinput{flex:1; border:0; font-size: 15px;}
.mobile .chat-input-area .Textinput:hover{border:0}
.mobile .chat-input-area .Textinput:focus,
.mobile .chat-input-area .Textinput:active{border:0; box-shadow:2px 2px 4px 0 rgba(0,0,0,0.1); outline:none}
.mobile .chat-input-area .Textinput::placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:15px; font-weight:normal; color:#ccc}


.mobile .chat-input-area .Button{flex:none}
.mobile .chat-input-area .Button.trans-ico{height:32px; width:32px; display:flex; justify-content:center; align-items: center; color:#5B5866;}
.mobile .chat-input-area .Button.send-btn{height:32px; width:32px; min-width: 32px; display:flex; justify-content:center; align-items: center; border:0; background:#5629EE; border-radius: 50%; flex:none; padding:0px; color:#fff}
.mobile .chat-input-area .Button.send-btn i{margin-top:initial}


/* **************************************** *
*  APPROVAL
* **************************************** */
.dev-content.mobile.aprv{padding:0px; min-width:initial; background:#f9f9f9; overflow:auto}

.mobile .aprv-total-wrap{display:flex; gap:8px; flex-direction:column; margin-bottom: 14px; padding:20px; background:#fff}
.mobile .aprv-total-box{background:#eaecfb; display:flex; flex-direction: row; justify-content:space-between; align-items:center; border-radius: 8px; width:100%; height:52px; padding:0px 16px}
.mobile .aprv-total-box .tit{display:flex; align-items:center; font-size: 14px; color:#555; gap:8px; letter-spacing: -0.6px;}
.mobile .aprv-total-box i{font-size: 20px; color:#0000008a;}

.mobile .aprv-total-box .count{font-size: 12px; color:#00000069; font-weight: normal; vertical-align:middle;}
.mobile .aprv-total-box .count span{font-size: 14px; color:#202020; font-weight: 300; margin-right: 4px;}
.mobile .aprv-box-wrap{background:#f9f9f9; width:100%;  position:relative; padding:8px 20px; box-sizing: border-box;}
.mobile .aprv-box-wrap .stitArea{margin-bottom: 4px;}
.mobile .aprv-box-wrap .stitArea .stitR i{color:#aaa}
.mobile .aprv-box{width:100%; border:0; background:#fff; min-width:initial; box-shadow: 1px 2px 3px rgb(0 0 0 / 2%); margin-bottom:12px; padding:8px 16px; display:flex; flex-direction:column; border-radius: 14px; align-items:flex-start}
.mobile .aprv-box:hover{box-shadow:1px 2px 3px rgb(0 0 0 / 2%)}
.mobile .aprv-cont{max-width:initial; margin-right:initial; width:100%; display:flex; align-items:center; gap:8px}
.mobile .aprv-cont .aprv-state{flex:none; border-radius: 8px;}
.mobile .aprv-cont .tit{font-size: 18px; display:flex; flex-direction:column; align-items:flex-start; flex:1 auto; letter-spacing: -0.8px; color:#202020; margin: 12px 0px;}
.mobile .aprv-cont .tit .txt{white-space:nowrap; overflow:hidden; width:100%; text-overflow:ellipsis; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 
.mobile .aprv-cont .tit .drafter{font-size: 14px; color:#333}
.mobile .aprv-cont .tit .drafter .dept{margin-left:4px;}
.mobile .aprv-cont .tit .drafter .dept:before{content:""; width:1px; height:10px; background:#999; display:inline-block; margin-right:4px;}
.mobile .aprv-box .aprv-info{display:block; font-size: 14px; color:#999; margin-top:8px; width:100%}
.mobile .aprv-box .aprv-info ul{width:100%;}
.mobile .aprv-box .aprv-info ul li{display:flex; justify-content:space-between; letter-spacing: -0.5px;}
.mobile .aprv-box .aprv-info .date{margin-right:initial; font-size: 13px;}
.mobile .aprv-box .aprv-info .approver{margin-right:initial; font-size: 13px;}
.mobile .aprv-box .aprv-info .state{font-size: 13px;}
.mobile .aprv-state{ margin: 0;   width:56px; height:56px; line-height: 1.2; padding:4px; font-size: 13px; border-radius: 20px; display:flex; justify-content:center; align-items:center; flex-direction:column; flex:none}
.mobile .aprv-state i{font-size: 24px;}
.mobile .Button.new-btn{position:fixed; bottom:12px; right:12px; border-radius: 50%; width:52px; height:52px; background:#5629EE; border:0}
.mobile .Button.new-btn i{color:#fff; font-size: 24px;}
.mobile .aprv-search .searchkey{padding:0px 12px; margin-bottom: 24px; border-bottom: 1px solid #e8e8e8; position:fixed; z-index: 1; width:100%; background:#f9f9f9}
.mobile .aprv-search .searchkey .Button{margin:0px}
.mobile .aprv-search .searchkey .Textinput{border:0; background:transparent; padding-left: 0px;}
.mobile .aprv-search .searchkey .Textinput:focus,
.mobile .aprv-search .searchkey .Textinput:active{border:0px; box-shadow:none; outline:none}
.mobile .aprv-search .searchkey button.trans-ico{color:#555}
.mobile .aprv-search .search-form{position:fixed; bottom:0px; left:0px;  border-radius: 16px 16px 0px 0px; padding:16px 12px; background:#fff; width:100%; box-shadow: -1px -1px 15px #0000001c; z-index: 2; }
.mobile .aprv-search .search-form .tit-wrap{display:flex; justify-content:space-between; margin-bottom:12px;}
.mobile .aprv-search .search-form .mtit04{ font-size: 14px; color:#222}
.mobile .aprv-search .search-form ul{margin-bottom: 24px;}
.mobile .aprv-search .search-form ul li {padding-bottom:12px}
.mobile .aprv-search .search-form ul li .tit{font-size: 14px; font-weight: 300; margin-bottom: 4px; letter-spacing: -0.5px;}
.mobile .aprv-search .search-form .Daterange{display:flex; gap:12px; align-items:center}
.mobile .aprv-search .search-form .Daterange .Dateinput{flex:1 1 auto; }
.mobile .aprv-search .search-form .Daterange .Textinput{width:100%}

/* **************************************** *
*  APPROVAL LINE
* **************************************** */
.mobile .aprv-line-wrap{padding:12px; padding-bottom: 80px;}
.mobile .aprv-line-wrap .aprv-form{display:flex; gap:14px; flex-direction:column; margin-top: 14px;}
.mobile .aprv-line-wrap .Tabs .af-tabs-content{margin-top:-1px !important}
.mobile .aprv-line-wrap .writing-ty1 .writing-list{border-bottom:0}

.sort_btn{display:flex; flex-direction:column}
.sort_btn .Button.small.only-ico{width:25px; height:25px}
.sort_btn .Button.small.only-ico:first-child{margin-bottom:2px}

/* APPROVAL LINE TREE */
.dev-content.mobile.aprv-line-tree{padding:0}
.dev-content.mobile.aprv-line-tree .aprv-tree .columnBox{border:0; padding:0 10px}


/* **************************************** *
*  APPROVAL SME
* **************************************** */
.dev-content.mobile.aprv-sme{padding:0px; min-width:initial; background:#fff; overflow:auto}

.mobile.aprv-sme .aprv-total-wrap{display:flex; gap:0px; flex-direction:row; margin-bottom: 0px; border-bottom:1px solid #f0f0f0; padding:0px; background:#fff}
.mobile.aprv-sme .aprv-total-box{background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius: 0px; width:100%; height:62px; padding:0px}
.mobile.aprv-sme .aprv-total-box.active .tit{color:#5629EE}
.mobile.aprv-sme .aprv-total-box.active .tit i{color:#5629EE}
.mobile.aprv-sme .aprv-total-box .tit{display:flex;flex-direction:column; align-items:center; font-size: 13px; color:#555; gap:0px; letter-spacing: -0.6px;}
.mobile.aprv-sme .aprv-total-box i{font-size: 20px; color:#0000008a;}

.mobile.aprv-sme .aprv-total-box .count{font-size: 12px; color:#00000069; font-weight: normal; vertical-align:middle;}
.mobile.aprv-sme .aprv-total-box .count span{font-size: 14px; color:#202020; font-weight: 300; margin-right: 4px;}
.mobile.aprv-sme .aprv-box-wrap{background:#fff; width:100%; height:calc(100% - 104px); overflow:auto;  position:relative; padding: 0px; box-sizing: border-box;}
.mobile.aprv-sme .aprv-box-wrap .stitArea{margin-bottom: 4px;}
.mobile.aprv-sme .aprv-box-wrap .stitArea .stitR i{color:#aaa}
.mobile.aprv-sme .aprv-box{width:100%; border:0; background:#fff; min-width:initial; border-bottom:1px solid #f5f5f5; padding:8px 16px; display:flex; flex-direction:row; gap:8px; border-radius: 0px; margin-bottom:0px; box-shadow:none; align-items:flex-start}
.mobile.aprv-sme .aprv-box:hover{box-shadow:1px 2px 3px rgb(0 0 0 / 2%)}
.mobile.aprv-sme .aprv-cont{max-width:initial; margin-right:initial; width:max-content; display:flex; align-items:center; gap:8px}
.mobile.aprv-sme .aprv-cont .aprv-state{flex:none; border-radius: 8px;}
.mobile.aprv-sme .aprv-cont .tit{font-size: 14px; display:flex; flex-direction:column; align-items:flex-start; flex:1 auto; letter-spacing: -0.8px; color:#202020; margin: 0px;}
.mobile.aprv-sme .aprv-cont .tit > div{display:flex; align-items:center; margin-bottom: 8px; width:100%}
.mobile.aprv-sme .aprv-cont .tit .txt{width:100%; margin-left: 0px; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp:2; white-space:normal; } 
.mobile.aprv-sme .aprv-cont .tit .drafter{font-size: 15px; color:#202020; margin-left: 8px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.mobile.aprv-sme .aprv-cont .tit .drafter .dept{margin-left:4px;}
.mobile.aprv-sme .aprv-cont .tit .drafter .dept:before{content:""; width:1px; height:10px; background:#999; display:inline-block; margin-right:4px;}
.mobile.aprv-sme .aprv-box .aprv-info{position:relative; display:block; padding-left: 12px; flex:none; font-size: 14px; color:#999; margin-top:0px; width:max-content}
.mobile.aprv-sme .aprv-box .aprv-info ul{width:100%;}
.mobile.aprv-sme .aprv-box .aprv-info ul li{display:flex; justify-content:flex-end; letter-spacing: -0.5px;}
.mobile.aprv-sme .aprv-box .aprv-info .date{margin-right:initial; font-size: 13px; color:#202020}
.mobile.aprv-sme .aprv-box .aprv-info .approver{margin-right:initial; font-size: 13px;}
.mobile.aprv-sme .aprv-box .aprv-info .state{font-size: 13px;}
.mobile.aprv-sme .aprv-box .aprv-info .file{height:48px; align-items:flex-end}
.mobile.aprv-sme .aprv-box .aprv-info .file .Button i{color:#555}
.mobile.aprv-sme .aprv-box .aprv-info .ico-btn{height:48px; align-items:flex-end}
.mobile.aprv-sme .aprv-box .aprv-info .ico-btn .Button i{color:#555}
.mobile.aprv-sme .aprv-state{ margin: 0; width:auto; height:24px; line-height: 1.2; padding:4px; font-size: 13px; border-radius: 20px; display:flex; justify-content:center; align-items:center; flex-direction:row; flex:none}
.mobile.aprv-sme .aprv-state i{font-size: 16px; margin-right:4px;}
.mobile.aprv-sme .Button.new-btn{position:fixed; bottom:12px; right:12px; border-radius: 50%; width:52px; height:52px; background:#5629EE; border:0}
.mobile.aprv-sme .Button.new-btn i{color:#fff; font-size: 24px;}
.mobile.aprv-sme .aprv-search .searchkey{padding:0px 12px; margin-bottom: 24px; border-bottom: 1px solid #e8e8e8; position:fixed; z-index: 1; width:100%; background:#f9f9f9}
.mobile.aprv-sme .aprv-search .searchkey .Button{margin:0px}
.mobile.aprv-sme .aprv-search .searchkey .Textinput{border:0; background:transparent; padding-left: 0px;}
.mobile.aprv-sme .aprv-search .searchkey .Textinput:focus,
.mobile.aprv-sme .aprv-search .searchkey .Textinput:active{border:0px; box-shadow:none; outline:none}
.mobile.aprv-sme .aprv-search .searchkey button.trans-ico{color:#555}
.mobile.aprv-sme .aprv-search .search-form{position:fixed; bottom:0px; left:0px;  border-radius: 16px 16px 0px 0px; padding:16px 12px; background:#fff; width:100%; box-shadow: -1px -1px 15px #0000001c; z-index: 2; }
.mobile.aprv-sme .aprv-search .search-form .tit-wrap{display:flex; justify-content:space-between; margin-bottom:12px;}
.mobile.aprv-sme .aprv-search .search-form .mtit04{ font-size: 14px; color:#222}
.mobile.aprv-sme .aprv-search .search-form ul{margin-bottom: 24px;}
.mobile.aprv-sme .aprv-search .search-form ul li {padding-bottom:12px}
.mobile.aprv-sme .aprv-search .search-form ul li .tit{font-size: 14px; font-weight: 300; margin-bottom: 4px; letter-spacing: -0.5px;}
.mobile.aprv-sme .aprv-search .search-form .Daterange{display:flex; gap:12px; align-items:center}
.mobile.aprv-sme .aprv-search .search-form .Daterange .Dateinput{flex:1 1 auto; }
.mobile.aprv-sme .aprv-search .search-form .Daterange .Textinput{width:100%}
.mobile.aprv-sme .aprv-more-list ul li{display:flex; align-items: center; height:54px; letter-spacing: -0.5px; padding:12px; border-bottom: 1px solid #f5f5f5;}
.mobile.aprv-sme .aprv-more-list ul li > div.tit{flex:1 auto; color:#555}
.mobile.aprv-sme .aprv-more-list ul li > div.tit i{color:#5629EE; margin-right: 4px;}
.mobile.aprv-sme .aprv-more-list ul li .count{font-size: 13px; color:#999;}



/* **************************************** *
* DRIVE MENU
* **************************************** */
.dev-content.mobile.drive .lnbArea .drive-lnb > li{padding-left:0}
.dev-content.mobile.drive .lnbArea .drive-lnb > li > .sub_menu > li button i{font-size:18px}
.dev-content.mobile.drive .lnbArea .drive-lnb > li > .sub_menu > li button span{font-size:14px}

/* DRIVE VIEW */
.content-wrap .page-content .dev-content.mobile.drive_view{overflow:initial}
.dev-content.mobile.drive_view{padding:0}
.dev-content.mobile.drive_view .drive-wrap{padding:0 15px}
.dev-content.mobile.drive_view .drive-wrap .drive-top{min-height:auto; padding:0; border-bottom:0}
.dev-content.mobile.drive_view .drive-wrap .drive-top .align-btn{padding:0 24px 0 0}
.dev-content.mobile.drive_view .drive-wrap .drive-top .align-btn:after{right:20px}
.mobile.drive_view .Button.new-btn{bottom:95px; right:15px}
.mobile.drive_view .drive_btn_list{position:fixed; bottom:0; width:100%; border-top:1px solid #ddd; height:80px}
.mobile.drive_view .drive_btn_list ul{display:flex; align-items:center; width:100%; margin-top:13px}
.mobile.drive_view .drive_btn_list ul li{width:33.33%; display:flex; justify-content:center}
.mobile.drive_view .drive_btn_list ul li .Button{display:flex; flex-direction:column; align-items:center; border:0; padding:0; font-size:13px; color:#888; width:100%; background:none}
.mobile.drive_view .drive_btn_list ul li .Button i{font-size:20px; color:#333; margin-bottom:3px}
.mobile.drive_view .drive_btn_list ul li .Button:hover,
.mobile.drive_view .drive_btn_list ul li .Button.af-hover,
.mobile.drive_view .drive_btn_list ul li .Button:focus,
.mobile.drive_view .drive_btn_list ul li .Button:active,
.mobile.drive_view .drive_btn_list ul li .Button.Checked{background:none; padding:0}
.mobile.drive_view .drive_btn_list ul li .Button:hover i,
.mobile.drive_view .drive_btn_list ul li .Button.af-hover i{color:#5629ee}

.mobile.drive_view  .drive-wrap .drive-content{padding:0; margin-top:15px}
.mobile.drive_view .drive_file_list li{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#888; margin-top:15px}
.mobile.drive_view .drive_file_list li:first-child{margin-top:0}
.mobile.drive_view .drive_file_list li .file_info{display:flex; align-items:center}
.mobile.drive_view .drive_file_list li .file_info .thumb{width:35px; height:35px; display:flex; justify-content:center; align-items:center}
.mobile.drive_view .drive_file_list li .file_info .thumb i{font-size:25px}
.mobile.drive_view .drive_file_list li .file_info .list_cont{margin-left:8px}
.mobile.drive_view .drive_file_list li .file_info .list_cont .tit{font-size:15px; margin-bottom:3px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:270px}
.mobile.drive_view .drive_file_list li .file_info .list_cont .tit .ver{font-size:12px; background: #00000070; border-radius:3px; padding:2px 5px; color: #fff; margin-right:5px;}
.mobile.drive_view .drive_file_list li .file_info .list_cont .info span{padding-left:5px}
.mobile.drive_view .drive_file_list li .file_info .list_cont .info span:first-child{padding-left:0}
.mobile.drive_view .drive_file_list li .file_info .list_cont .info span.size{position:relative; padding-left:15px}
.mobile.drive_view .drive_file_list li .file_info .list_cont .info span.size:before{content:""; background:#ddd; position:absolute; left:7px; top:4px; width:1px; height:10px}
.mobile.drive_view .drive_file_list li .toggle-btn{font-size:18px}


/* 임시 */
.mobile .drive-content{padding:0px; margin-top:15px; overflow:initial}
.mobile .drive-wrap .drive-top{padding:0; min-height: 54px;}
.mobile .drive-wrap .drive-top .view-controll {margin:0px}
.mobile .drive-wrap .main-thumb{height:100%}
.mobile .drive-wrap .thumb-item{padding:0px 16px}
.mobile .drive_scroll_icon{height:100%;}
.mobile .content-inner.left{width:100%; left:0px; right:initial; top:0px; height:100%; border-radius:0px}
.mobile .enlarge-wrap .content-enlarge{width:100%}
.all-app-nav .nav-wrap.mobile{min-height:100%; height:100%; padding:0px; padding-top: 72px;}
.all-app-nav .nav-wrap.mobile .lnbArea{height:100%; overflow-y:auto}
.all-app-nav .nav-wrap.mobile .lnbArea .drive-lnb li{position:relative;margin-bottom:1px;padding-left:12px;}
.mobile .content-inner.left .left-close .Button{z-index: 9;}

/* DRIVE VIEW ICON */
.mobile .drive_scroll_icon{border-top:0; padding:0}
.mobile .drive-wrap .main-thumb .thumb_list .thumb{width:146px; height:146px; padding:10px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb.folder{align-items:center}
.mobile .drive-wrap .main-thumb .thumb_list .thumb.folder.active .check-btn{color:#5629ee}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-content .folder_inner{width:65px; height:65px; bottom:15px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-info .tit{width:150px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-info .time{display:inline-block; width:100px}

@media screen and (max-width:374px)
{
    .mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb{width:100%}
    .mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb{margin:0px 0px 10px 0px}
}


/* 임시 */
.mobile .drive-content{padding:0px; margin-top:15px; overflow:initial}
.mobile .drive-wrap .drive-top{padding:0; min-height: 54px;}
.mobile .drive-wrap .drive-top .view-controll {margin:0px}
.mobile .drive-wrap .main-thumb{height:100%}
.mobile .drive-wrap .thumb-item{padding:0px 16px}
.mobile .drive_scroll_icon{height:100%;}
.mobile .content-inner.left{width:100%; left:0px; right:initial; top:0px; height:100%; border-radius:0px}
.mobile .enlarge-wrap .content-enlarge{width:100%}
.all-app-nav .nav-wrap.mobile{min-height:100%; height:100%; padding:0px; padding-top: 72px;}
.all-app-nav .nav-wrap.mobile .lnbArea{height:100%; overflow-y:auto}
.all-app-nav .nav-wrap.mobile .lnbArea .drive-lnb li{position:relative;margin-bottom:1px;padding-left:12px;}
.mobile .content-inner.left .left-close .Button{z-index: 9;}

/* DRIVE VIEW ICON */
.mobile .drive_scroll_icon{border-top:0; padding:0}
.mobile .drive-wrap .main-thumb .thumb_list .thumb{width:146px; height:146px; padding:10px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb.folder{align-items:center}
.mobile .drive-wrap .main-thumb .thumb_list .thumb.folder.active .check-btn{color:#5629ee}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-content .folder_inner{width:65px; height:65px; bottom:15px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-info .tit{width:150px}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .folder-info .time{display:inline-block; width:100px}
.mobile .drive-wrap .Label.ver{top:calc(100% - 30px); right:0px}
.mobile .enlarge-wrap .content-enlarge > .pedia-tit span.tit{width:100%; text-align: left;}
.mobile .enlarge-wrap .content-enlarge > .pedia-tit span{width:100%; text-align: right;}
.mobile .drive-wrap .main-thumb .thumb_list .thumb .file_cont{top:24px}
.mobile .drive-wrap .main-thumb .thumb_list .file_info .tit{font-size: 12px;}

@media screen and (max-width:374px)
{
    .mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb{width:100%}
    .mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb{margin:0px 0px 10px 0px}
}


/* **************************************** *
*  GR - List
* **************************************** */
.columnlist.ty1{margin-top: 20px;}
.columnlist.ty1 .infoTxt01 {font-size: 16px; padding:0px 12px}
.columnlist.ty1 .infoTxt01 i{margin-right: 4px; color:#5D2BEE}
.columnlist.ty1 ul{border-top:1px solid #F0F0F0;}
.columnlist.ty1 ul li{border-bottom:1px solid #F0F0F0; padding:12px 24px; }
.columnlist.ty1 ul li:hover{background:#F8F6FF}
.columnlist.ty1 ul li:focus{background:#F8F6FF}
.columnlist.ty1 ul li .list-tit{letter-spacing: -0.5px; font-weight: 300;}
.columnlist.ty1 ul li .list-tit .code{color:#5D2BEE; margin-right: 4px; font-size: 13px;  font-family:'ptd'}
.columnlist.ty1 ul li .list-tit .tit{color:#222; font-size: 15px;}
.columnlist.ty1 ul li .list-info{display:flex; justify-content:space-between; align-items:center; margin-top: 8px;}
.columnlist.ty1 ul li .list-info .count{font-size: 13px; color:#707070;}
.columnlist.ty1 ul li .list-info .count span{color:#333; font-size: 15px; font-weight: 300; margin:0px 2px; letter-spacing: -0.6px;}
.mobile .Button.ty1{position:fixed; width:100%; background:#5D2BEE; border-radius: 0px; border:0px; height:80px; bottom:0px; color:#fff; font-size: 17px; z-index: 99;}


/* **************************************** *
*  calendar
* **************************************** */
.mobile .Tabs.calendar{border-top: 1px solid#F0F0F0; padding-top:12px;}
.mobile .Tabs.calendar > ul{margin:0px 12px}

/* **************************************** *
*  status
* **************************************** */
.mobile .my-status{padding:16px}
.mobile .columnBox.my-status .fixConWrap{flex-direction:column;}
.mobile .columnBox.my-status .fixConWrap .fixCont1, 
.mobile .columnBox.my-status .fixConWrap .fixCont2, 
.mobile .columnBox.my-status .fixConWrap .fixCont3{width:100%}
.mobile .columnBox.my-status .fixConWrap .fixCont2 .stats-wrap ul{flex-direction:initial;}
.mobile .columnBox.my-status .fixConWrap .fixCont2 .stats-wrap.vacation ul li.stats-ty1{flex-direction:column}
.mobile .attend-table .aprv-search{width:100%;}
.mobile .attend-table .searchkey{position:relative; padding:0px 12px; margin-bottom:0px;  border-bottom: 1px solid #e8e8e8; background:#fff}
.mobile .attend-table .searchkey .search{margin-left: 0px;}
.mobile .attend-table .searchkey .Button{margin:0px}
.mobile .attend-table .searchkey .Textinput{border:0; background:transparent; padding-left: 0px;}
.mobile .attend-table .searchkey .Textinput:focus,
.mobile .attend-table .searchkey .Textinput:active{border:0px; box-shadow:none; outline:none}
.mobile .attend-table .searchkey button.trans-ico{color:#555}

/* **************************************** *
*  rsrc-reg
* **************************************** */
.mobile.estm_reg_form{padding:16px}
.mobile.estm_reg_form .com-table .writing-ty1{padding:12px}
.mobile.estm_reg_form .writing-ty1 .writing-list{padding:0px}
.mobile.estm_reg_form .writing-ty1 .writing-list > li{flex-direction:column; align-items:flex-start}
.mobile.estm_reg_form .writing-ty1 .writing-cont{flex:1 auto; width:100%;}
.mobile.estm_reg_form .writing-ty1 .writing-cont{align-items: flex-start;}
.mobile.estm_reg_form .writing-ty1 .writing-cont.flex-col > div{display:flex}


.content-wrap .page-content .dev-content.mobile.order,
.content-wrap .page-content .dev-content.mobile.sales,
.content-wrap .page-content .dev-content.mobile.wms,
.content-wrap .page-content .dev-content.mobile.qms,
.content-wrap .page-content .dev-content.mobile.pdm{overflow:initial; padding:0}

/* 그리드 삽입 시 전체스크롤 방지 */
.dev-content.mobile.grid-list{height:auto}

.dev-content.mobile .doc-info .info-ico{font-size:48px}

/* 리스트 세로 정렬 */
.mobile .writing-ty1.vertical .writing-list{padding:0px}
.mobile .writing-ty1.vertical .writing-list > li{flex-direction:column; align-items:flex-start}
.mobile .writing-ty1.vertical .writing-cont{flex:1 auto; width:100%; padding-left: 8px;}
.mobile .writing-ty1.vertical .writing-cont > span{color:#777; font-weight: normal;}
.mobile .writing-ty1.vertical .writing-cont.flex-col > div{display:flex}
.mobile .writing-ty1.vertical .writing-cont.checkbox{flex-direction:column; align-items:flex-start}
.mobile .writing-ty1.vertical .board-view-contents.line{display:none}
.mobile .writing-ty1.vertical .writing-tit{padding:0}

.mobile .writing-ty1.vertical .stitArea .stitL{align-items:flex-start; flex-direction:column}
.mobile .writing-ty1.vertical .stitArea .Groupbutton{flex-direction:column}
.mobile .writing-ty1.vertical .stitArea .Groupbutton .Button{margin:2px}
.mobile .writing-ty1.vertical .stitArea .Groupbutton.option_btn{flex-direction:row}
.mobile .writing-ty1.vertical .draw-list.columnBox{height:auto !important}

.mobile.estm_reg_form .writing-ty1.vertical .cusmanager_form{flex-direction:column; width:100%}
.mobile.estm_reg_form .writing-ty1.vertical .cusmanager_form li{width:100%}
.mobile.estm_reg_form .writing-ty1.vertical .cusmanager_form.reg li{display:flex; flex-direction:column}
.mobile.estm_reg_form .writing-ty1.vertical .cusmanager_form.reg li .contact{display:flex; align-items:center}
.mobile.estm_reg_form .writing-ty1.vertical .cusmanager_form.reg li .contact .dash-uni{min-width:14px; display:flex; justify-content:center}

.mobile .stitArea.item_info{display:flex; flex-direction:column; align-items:flex-start}
.mobile .stitArea.item_info .stitR{margin-left:0}

.mobile.estm_reg_form .cusmanager_form.vertical li{display:flex; flex-direction:column}
.mobile.estm_reg_form .view_list.vertical .cont{margin-left:0; word-break:break-all}
.mobile.estm_reg_form .view_list.vertical .tit:after{display:none}


/* 캘린더 비율 조절 */
.mobile .Daterange.date{width:100%; display:flex; align-items:center}


/* 게시판 - 메뉴 */
.board-lnb-area{padding:0 16px}
.board-lnb li{margin-top:4px}
.board-lnb li .board-box{width:100%; display:flex; align-items:center; justify-content:space-between; position:relative; height:35px; margin:0; padding:0; background:none; border:0; cursor:pointer; box-sizing:border-box; padding:8px 16px}
.board-lnb li:hover .board-box{background:#efeef2; border-radius:5px}
.board-lnb li .board-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;}
.board-lnb li .board-box i{font-size:16px;}


/* **************************************** *
*  조회페이지
* **************************************** */
.mobile.order .stitArea{padding:0px 14px}
.mobile.order .com-grid {padding:0px 14px}
.mobile.mtnc .stitArea{padding:0px 14px}
.mobile.mtnc .com-grid {padding:0px 14px}
.mobile.sales .stitArea{padding:0px 14px}
.mobile.sales .com-grid {padding:0px 14px}
.mobile.draw .stitArea{padding:0px 14px}
.mobile.draw .com-grid {padding:0px 14px}
.mobile.mattpr .stitArea{padding:0px 14px}
.mobile.mattpr .com-grid {padding:0px 14px}
.mobile.gimat .stitArea{padding:0px 14px}
.mobile.gimat .com-grid {padding:0px 14px}
.mobile.grmat .stitArea{padding:0px 14px}
.mobile.grmat .com-grid {padding:0px 14px}
.mobile.grinspreq .stitArea{padding:0px 14px}
.mobile.grinspreq .com-grid {padding:0px 14px}
.mobile.qms .stitArea{padding:0px 14px}
.mobile.qms .com-grid {padding:0px 14px}
.mobile.sales .stitArea{padding:0px 14px}
.mobile.sales .com-grid {padding:0px 14px}
.mobile.pms .stitArea{padding:0px 14px}
.mobile.pms .com-grid {padding:0px 14px}
.mobile.mes .stitArea{padding:0px 14px}
.mobile.mes .com-grid {padding:0px 14px}
.mobile.wms .stitArea{padding:0px 14px}
.mobile.wms .com-grid {padding:0px 14px}
.mobile.board {padding:0}
.mobile.board .stitArea{padding:0px 14px}
.mobile.board .com-grid {padding:0px 14px}

/* **************************************** *
*  search
* **************************************** */
.mobile .search-wrap{position:relative}
.mobile .search-wrap .searchkey{padding:0px 12px; margin-bottom: 24px; border-bottom: 1px solid #e8e8e8; z-index: 1; width:100%; background:#fff}
.mobile .search-wrap .searchkey .Button{margin:0px}
.mobile .search-wrap .searchkey .Textinput{border:0; background:transparent; padding-left: 0px;}
.mobile .search-wrap .searchkey .Textinput:focus,
.mobile .search-wrap .searchkey .Textinput:active{border:0px; box-shadow:none; outline:none}
.mobile .search-wrap .searchkey button.trans-ico{color:#555;}
.mobile .search-wrap .search-form{position:fixed; display:flex; flex-direction:column; max-height: 70vh; bottom:0px; left:0px;  border-radius: 16px 16px 0px 0px; padding:16px 12px; background:#fff; width:100%; box-shadow: -1px -1px 15px #0000001c; z-index: 100;}
.mobile .search-wrap .search-form .tit-wrap{display:flex; flex:none; align-items:center; justify-content:space-between; margin-bottom:12px;}
.mobile .search-wrap .search-form .tit-wrap .Button{height:40px}
.mobile .search-wrap .search-form .mtit04{ font-size: 14px; color:#222}
.mobile .search-wrap .search-form ul{overflow-y:auto; height:100%; margin-bottom: 24px;}
.mobile .search-wrap .search-form ul li {padding-bottom:12px}
.mobile .search-wrap .search-form ul li .tit{font-size: 14px; font-weight: 300; margin-bottom: 4px; letter-spacing: -0.5px;}
.mobile .search-wrap .search-form .Daterange{display:flex; gap:12px; align-items:center}
.mobile .search-wrap .search-form .Daterange .Dateinput{flex:1 1 auto; }
.mobile .search-wrap .search-form .Daterange .Textinput{width:100%}
.mobile .search-wrap .search-form .Button.info{flex:none; height:46px}
.mobile .search-wrap .Textinput-wrap{position:relative}

.mobile.grinspreq .stitArea .Groupbutton .Button{word-break:keep-all ;}
.mobile .search-wrap .search-form li .Button{flex:none; height:initial}
.wms-layout .mobile .search-wrap .search-form li .Button{flex:none; height:32px}
.mobile .writing-ty1.vertical .draw-list.columnBox{display:inline-flex; overflow-x:auto; width:100%; flex-direction:initial}
.mobile .draw-list .file-list{overflow-x:hidden;}
.mobile .draw-list > ul > li > .draw_tit{min-width: 140px;}
.mobile .fileUpB .draw-list ul li .draw-txt.file-rev{flex:none}
.mobile .fileUpB .draw-list ul li .draw-txt.name{flex:none}
.mobile .fileUpB .draw-list ul li .draw-txt.date{flex:none}
.mobile .fileUpB .draw-list.columnBox ul li .option_btn{flex:none}
.mobile .draw-list ul li .draw-txt.file-size{flex:none}


.mobile .search-wrap.ty2{display:flex; flex-direction: column; padding:12px}
.mobile .search-wrap.ty2 .col2{display:flex; gap:8px; margin-bottom:8px}
.mobile .search-wrap.ty2 .col2 .Button{flex:none}
/* **************************************** *
*  pms
* **************************************** */
.mobile.pms .schedule-list .plan-list{overflow-x:scroll}
.mobile.pms .schedule-list .plan-list.ty2 > ul{overflow:initial}

/* **************************************** *
*  approval
* **************************************** */
.mobile.sme-aprv{background:#fff; padding:0px}
.mobile.sme-aprv h3{padding-left:12px;}
.mobile.sme-aprv .sme-aprv-wrap{padding:12px; height:calc(100% - 124px); padding-top: 60px; }
.mobile.sme-aprv .sme-aprv-top{zoom:0.3 !Important}
.mobile.sme-aprv .stitArea.aprv-fixed{position:absolute;}
.mobile.sme-aprv .stitArea.aprv-fixed .Groupbutton .Button{margin:0px}
.mobile.sme-aprv .stitArea.aprv-fixed .Groupbutton .Button{border-radius: 0;}

/* **************************************** *
*  결재기안문서
* **************************************** */
.mobile.aprv-req{background:#fff; padding:16px}
.mobile.aprv-req .fixConWrap.aprv{flex-direction:column}
.mobile.aprv-req .fixConWrap.aprv .fixConWrap{flex-direction:column}
.mobile.aprv-req .fixConWrap.movectrl .fixMove{flex-direction:row; gap:8px; width:100%;justify-content:center; padding:8px}
.mobile.aprv-req .fixConWrap.movectrl .fixCont2{margin-left: 0;}





.dev-content.mobile:after{display:none}


/* **************************************** *
*  MOBILE home
* **************************************** */
.dev-content.mobile.home{padding:0; height:100%; position:relative;}

/* navbar */
.mobile-navbar{display:flex; justify-content:space-between; align-items:center; height:48px; width:100%; padding:0px 14px; background:#fff}

.mobile-navbar .user-account{display:flex; gap:8px; align-items:center;}
.mobile-navbar .user-account .account-img{position:relative; min-width:38px; max-width:38px; min-height:38px; max-height:38px; border-radius:50%; background-size:cover; background-repeat:no-repeat; overflow:hidden}
.mobile-navbar .user-account .account-img.default{background:#CDD4D9}
.mobile-navbar .user-account .account-img.default:before,
.mobile-navbar .user-account .account-img.default:after{content:''; position:absolute; left:50%; background:#ffffff50; border-radius:50%; z-index:1}
.mobile-navbar .user-account .account-img.default:before{width:14px; height:14px; top:10px; margin-left:-7px}
.mobile-navbar .user-account .account-img.default:after{width:40px; height:40px; top:28px; margin-left:-20px}
.mobile-navbar .user-account .account-img img{position:relative; display:block; width:100%; object-fit:cover; z-index:2}
.mobile-navbar .user-account .account-info{display:flex; flex-direction: column; letter-spacing: -0.8px; line-height: 1.2; max-width:120px}
.mobile-navbar .user-account .account-info .name{font-size:15px; font-weight: 300; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.mobile-navbar .user-account .account-info .group{font-size:12px; color:#999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.mobile-navbar .navbar-right .nav-btn-area{display:flex; gap:12px}
.mobile-navbar .navbar-right .nav-btn-area li{display:flex; justify-content: center; align-items: center; flex:none}
.mobile-navbar .navbar-right .nav-btn-area li i{position:relative; font-size:20px; color:#000}
.mobile-navbar .navbar-right .nav-btn-area li i.new:after{content:"N"; display:inline-flex; justify-content:center; align-items:center; position:absolute; top:0px; right:-4px; background:#FA196D; color:#fff; font-size:8px; font-weight:600; border-radius: 50%; width:14px; height:14px}

/* view */
.mobile-view{position:relative; height:calc(100% - 119px); background:#F3F6FA; overflow-y:auto; padding:0px 16px;} 
.dev-content.mobile.home .mobile-view{height:calc(100% - 0px); padding-bottom:42px}
.mobile-view .mobile-navbar{background:inherit; padding:0px}
.mobile-view .view-cont{padding:12px 0px;}
.mobile-view .view-cont .app-main {flex:none; display:flex; min-height:420px; height:calc(100% - 160px)}
.mobile-view .view-cont .app-main .app-list{display:grid; grid-template-columns: repeat(2, 1fr); align-content:center; gap:8px; height:100%; width:100%;}
.mobile-view .view-cont .app-main .app-list > li{display:flex; flex-direction:column; justify-content:space-between; border-radius:16px; background:#fff; min-height:100px; height:100%; padding:16px 12px 12px 16px}
.mobile-view .view-cont .app-main .app-list > li .tit{font-size:14px; color:#fff}
.mobile-view .view-cont .app-main .app-list > li .info{position:relative; display:flex; align-items:flex-end}
.mobile-view .view-cont .app-main .app-list > li .badge{display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0px 8px; background:#fa196d; flex:none; font-size:14px; margin-bottom:4px}
.mobile-view .view-cont .app-main .app-list > li .info > i{ font-size:42px; margin-left: auto; color:#ffffff9e}
.mobile-view .view-cont .app-main .app-list > li:nth-child(1){background:#1E5693}
.mobile-view .view-cont .app-main .app-list > li:nth-child(2){background:#3C8BC6}
.mobile-view .view-cont .app-main .app-list > li:nth-child(3){background:#41ADEE}
.mobile-view .view-cont .app-main .app-list > li:nth-child(4){background:#057DBC}
.mobile-view .view-cont .app-main .app-list > li:nth-child(5){background:#1B92E2}
.mobile-view .view-cont .app-main .app-list > li:nth-child(6){background:#4470C6}
.mobile-view .view-cont .app-main .app-list > li:nth-child(7){background:#0BB8D0}
.mobile-view .view-cont .app-main .app-list > li:nth-child(8){background:#7571E4}
.mobile-view .view-cont .quick-menu{width:100%; height:146px; border-radius: 14px; background:#fff; flex:none; box-shadow:0px 3px 6px #00000005; margin-top:5vh; padding:20px 16px 12px 16px; }
.mobile-view .view-cont .quick-menu .menu-list{display:flex; gap:22px; width:100%; overflow-x:auto; padding-bottom:32px}
.mobile-view .view-cont .quick-menu .menu-list > li{display:inline-flex; flex-direction:column; width:62px; flex:none}
.mobile-view .view-cont .quick-menu .menu-list > li .menu-ico{display:flex; justify-content:center; align-items:center; width:62px; height:62px; border-radius:16px; background:#EBE6FB; margin-bottom:4px;}
.mobile-view .view-cont .quick-menu .menu-list > li .menu-ico i{color:#5629EE; font-size:32px}
.mobile-view .view-cont .quick-menu .menu-list > li .tit{font-size:8px; word-break:auto-phrase; letter-spacing: -0.5px; color:#222; font-weight: 300; text-align: center; padding:0px 4px; line-height:1.2}

.dev-content.mobile.home .mobile-view .view-cont{display:flex; flex-direction: column; justify-content:space-between; height:calc(100% - 48px)}
/* tabbar */

.mobile-tabbar{height:70px; background:#fff; border-top:1px solid #CDD4D990}
.mobile-tabbar > ul {display:grid; grid-template-columns: repeat(5, 1fr)}
.mobile-tabbar > ul > li{display:flex; flex-direction:column; align-items: center; gap:2px; justify-content: flex-end; height:70px;  padding-bottom:14px}
.mobile-tabbar > ul > li .tit{font-size:11px; letter-spacing: -0.5px; color:#000}
.mobile-tabbar > ul > li > i{position:relative; font-family:"Material Design Icons","remixicon"; font-style: normal; font-size:24px; color:#8095A8}
.mobile-tabbar > ul > li > i.home-ico:before{content:"\F0BA7"; display:block;}
.mobile-tabbar > ul > li > i.appr-ico:before{content:"\F1782"; display:block;}
.mobile-tabbar > ul > li > i.mail-ico:before{content:"\eef6"; display:block;}
.mobile-tabbar > ul > li > i.attend-ico:before{content:"\F10D1"; display:block;}
.mobile-tabbar > ul > li > i.orga-ico:before{content:"\F199C"; display:block;}

.mobile-tabbar > ul > li > i.home-ico.active:before{content:"\F02DE"; display:block;}
.mobile-tabbar > ul > li > i.appr-ico.active:before{content:"\F11E7"; display:block;}
.mobile-tabbar > ul > li > i.mail-ico.active:before{content:"\eef3"; display:block;}
.mobile-tabbar > ul > li > i.attend-ico.active:before{content:"\F10D0"; display:block;}
.mobile-tabbar > ul > li > i.orga-ico.active:before{content:"\F04AA"; display:block;}

.mobile-tabbar > ul > li > i.new:after{content:"N"; display:inline-flex; justify-content:center; align-items:center; position:absolute; top:0px; right:-8px; background:#FA196D; color:#fff; font-size:8px; font-weight:600; border-radius: 50%; width:14px; height:14px}

.mobile .fixBtn-wrap{position:fixed; width:100%; bottom:0px; display:flex;}
.mobile .fixBtn-wrap .Button{position:relative; margin:0px; height:80px; border-radius: 0px; width:100%; font-size:17px; border-bottom:0px}

.mobile-layout .doc-convert.qms_file{left:50%}