@charset "utf-8";

/* **************************************** *
*  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:300; font-size:18px; line-height:125%; color:#333}
.header-wrap .header-cont .prev{left:15px; font-size:25px}    
.header-wrap .header-cont .close,
.header-wrap .header-cont .set, .header-wrap .header-cont .r_ico_list{right:15px}
.header-wrap .header-cont .r_ico_list{position:absolute; height:20px}
.header-wrap .header-cont .r_ico_list .r_ico01{right:35px}
.header-wrap .header-cont .r_ico_list .r_ico02{right:0}
.header-wrap .header-cont .r_ico_list .r_ico02.check{font-size:20px; bottom:-4px}


/* **************************************** *
*  MOBILE TABS
* **************************************** */
.mobile .Tabs > ul > li{margin:0 10px; padding:10px 13px}
.mobile .Tabs > ul > li span{font-size:16px}


/* **************************************** *
*  MAIN
* **************************************** */
.dev-content.mobile.main{padding:20px; 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 .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}


/* **************************************** *
*  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}


/* **************************************** *
*  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 .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:20px}
.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}


/* **************************************** *
*  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;}


/* 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','line', '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}

.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; 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}


/* **************************************** *
* 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}
.dev-content.mobile.drive_view .drive-wrap .drive-top .top-controller{padding:0 15px}
.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; background:#fff}
.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; overflow:initial}
.mobile.drive_view .drive_file_list{padding-bottom:85px}
.mobile.drive_view .drive_file_list li{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#888; padding:10px 15px; cursor:pointer}
.mobile.drive_view .drive_file_list li:first-child{margin-top:0}
.mobile.drive_view .drive_file_list li.active{background:#f6f5fa}
.mobile.drive_view .drive_file_list li.active .check-btn{color:#5629ee}
.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:235px}
.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_view .check-btn{font-size:20px; color:#999}
.mobile.drive_view .drive_scroll_icon .check-btn{position:absolute; top:8px; right:15px}

/* DRIVE VIEW ICON */
.mobile.drive_view .drive_scroll_icon{border-top:0; padding:0 15px 85px 15px}
.mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb{width:158px; height:158px; padding:10px}
.mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb.folder{align-items:center}
.mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb.folder.active .check-btn{color:#5629ee}
.mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb .folder-content .folder_inner{width:65px; height:65px; bottom:15px}
.mobile.drive_view .drive-wrap .main-thumb .thumb_list .thumb .folder-info .tit{width:150px}
.mobile.drive_view .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}
}


/* **************************************** *
*  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}