#frame_all { width:100%; height:100%; position:fixed; top:0; overflow-y:hidden; padding:0; margin:0; } #frame_all #head { position:fixed; z-index: 99999; left:0; top:0; width:100%; height:70px; font-size:13px; font-weight:bold; line-height:50px; color:#000000; padding-left:70px; padding-right:10px; background-color:#ffffff; margin:0; } #frame_all #head #top_frame { height:100%; border-bottom:1px solid #8A8B8F; } #frame_all #head li { color:#fff; padding:0; margin:0; } #frame_all #head a { color:#fff; } #frame_all #head #top_logo { float: left; padding:5px 40px; } #frame_all #head #top_menu_icon { display:none; cursor:pointer; } #frame_all #head #top_menu_icon img { width:35px; height:35px; } #frame_all #head #top_logo img { height:34px; cursor:pointer; } #frame_all_ #head #top_logo .sname { text-align:center; font-size:24px; font-weight:bold; color:#fff; line-height:35px; } #frame_all_ #head #top_logo .cname { text-align:center; font-size:14px; font-weight:bold; color:#fff; line-height:20px; } #frame_all_ #head #top_logo .pps_title { color:#ffffff; padding-top:10px; line-height:20px; margin:0; font-size:12px; } #frame_all_ #head #top_stname { float: left; font-size:110%; } #frame_all #head #top_right { position:fixed; top:0; right:0; font-size:15px; padding-right:10px; padding-top:20px; } #frame_all #head #top_right li { float: left; padding-right:20px; } #frame_all #head #top_right img { width:22px; height:22px; } #frame_all #head #top_right span { font-size:12px; font-family: Pretendard, Malgun Gothic, NanumGothic, Gulim; font-weight: 500; } -body[class^='skin'] #frame_all #head { background-color:var(--color-500); } #frame_all_ #left_menu .div_menu { width: 100%; height:100%; overflow-x:hidden; overflow-y:hidden; } #frame_all #left_menu { position:fixed; width:80px; height:100vh; font-size:12px; line-height:14px; z-index: 100000; background-color:#000000; } -body[class^='skin'] #frame_all #left_menu { background-color:var(--color-500); } #frame_all #left_menu ul { padding:0; text-align:center; } #frame_all #left_menu ul.icon img { cursor:pointer; width:30px; height: 30px; filter: brightness(0) saturate(100%) invert(100%); } #frame_all #content { position:absolute; top:70px; width: calc(100% - 310px); height: calc(100% - 70px); overflow-x:hidden; overflow-y:auto; margin-left:310px; color:#fff; background-color:#fff; font-size:12px; } #frame_all[data-fix=on] #content { width: calc(100% - 70px); margin-left:70px; } #frame_all #content .sub_title { float: left; color:#333; font-size:25px; font-weight:bold; padding-top:20px; } #frame_all #content #sub_title_etc { float: left; padding-left:20px; padding-top:25px; line-height:25px; } #frame_all #content #sub_title_etc select { background-color:#ffffff; border: 1px solid #999; font-size:13px; height:30px; } #frame_all #content .menu_location { float: right; color:#333; font-size:13px; padding-top:30px; } #frame_all #content .menu_location i{ font-size:16px; } #frame_all #content #content2 { height:98%; } #frame_all #content #content2 #content_head { height:65px; box-sizing: border-box; } #frame_all #content #content2 #content_body { height: calc(100% - 65px); box-sizing: border-box; } #frame_all #content #bookmark_icon { cursor:pointer; color:#dddddd; } #frame_all #content #bookmark_icon.on { color:#F97906; } #frame_all.mu_close #left_menu { width:0; display:none; } #frame_all.mu_close #content { width:calc(100% - 10px); padding-left:10px; margin:0; } /*대메뉴*/ #i_left_menu { width:100%; height: 100%; background-color:#000000; overflow-x:hidden; overflow-y:auto; position:relative; -webkit-user-select: none; -moz-user-select: none; -ms-use-select: none; user-select: none; } #i_left_menu div.menu { padding:0; color:#ffffff; font-size:12px; font-family: Pretendard, Malgun Gothic, NanumGothic, Gulim; } #i_left_menu div.menu ul { margin: 0; padding:0; position:relative; } #i_left_menu div.menu ul dd.icon { cursor:pointer; width:50px; height: 50px; margin:2px auto; line-height:50px; text-align:center; border-radius:6px; } #i_left_menu div.menu ul dd.icon img { width:30px; height: 30px; filter: brightness(0) saturate(100%) invert(100%); vertical-align: middle; } #i_left_menu_ div.menu ul dd.icon:hover { background-color:#ffffff; } #i_left_menu_ div.menu ul dd.icon:hover img { filter: none; } #i_left_menu div.menu ul dd.name { margin: 0; padding:0; line-height:18px; text-align:center; font-size:12px; color:#ffffff; } #i_left_menu div.menu ul.on dd.icon { background-color:#ffffff; } #i_left_menu div.menu ul.on dd.icon img { filter: none; } /*중메뉴*/ #left_sub_menu { position:fixed; z-index:2; left:80px; top:70px; width:240px; height: calc(100vh - 70px); padding:7px; background-color:#F3F4F6; overflow-x:hidden; overflow-y:auto; font-family: Pretendard, Malgun Gothic, NanumGothic, Gulim; display:none; -webkit-user-select: none; -moz-user-select: none; -ms-use-select: none; user-select: none; } #left_sub_menu.on { display:block; } #left_sub_menu select { border:1px solid #000000; width:100%; height: 35px; font-size:16px; } #left_sub_menu ul[gcode] { display:none; } #left_sub_menu ul[gcode].on { display:block; } #left_sub_menu ul[gcode] dd.mu2 { text-align:left; padding-left:10px; } #left_sub_menu ul[gcode] dd.mu2 ol { text-align:left; padding:0; } #left_sub_menu ul[gcode] dd.mu2 ol ul { text-align:left; height:40px; } #left_sub_menu ul[gcode] dd.mu2 ol img.icon { width:30px; height: 30px; margin:0; } #left_sub_menu ul[gcode] dd.mu2 ol ul { text-align:left !important; font-size:15px; font-weight: 600; } #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link i.icon { background-image: url(/images/icon/icon-folder-off.svg); background-size: 30px 30px; background-repeat: no-repeat; padding:5px 15px; line-height:30px; margin-right:5px; } #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link:hover i.icon { filter: invert(25%) sepia(84%) saturate(1790%) hue-rotate(194deg) brightness(102%) contrast(101%); } /* 폴더 아이콘 수정 - 사이즈와 위치 조정 */ #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link i.icon { background-image: url(/images/icon/icon-folder-off.svg); background-size: 22px 22px; background-repeat: no-repeat; background-position: center left; padding: 0; width: 30px; height: 30px; display: inline-block; vertical-align: middle; margin-right: 5px; } /* 활성화된 폴더 아이콘 수정 */ #left_sub_menu ul[gcode] dd.mu2 ol[mucode].on ul.link i.icon { background-image: url(/images/icon/icon-folder-on.svg); background-size: 22px 22px; background-repeat: no-repeat; background-position: center left; } #left_sub_menu ul dd.mu1 { min-height: 50px; height: auto; background-color:#000000; color:#ffffff; border-radius:7px; display: flex; align-items: center; padding: 5px 0; } #left_sub_menu ul dd.mu1 i.show_hide { display:none; } #left_sub_menu ul dd.mu1 ol { float: left; padding-left:10px; padding-right:10px; } #left_sub_menu ul dd.mu1 ol.icon { width: 40px; text-align: left; display: flex; align-items: center; height: 40px; } #left_sub_menu ul dd.mu1 ol.name { width: calc(100% - 40px); color: #ffffff; font-size: 16px; font-weight: 600; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; max-height: 42px; } /* 텍스트 길이에 따른 폰트 크기 자동 조정 */ #left_sub_menu ul dd.mu1 ol.name.long-text { font-size: 14px; } #left_sub_menu ul dd.mu1 ol.name.very-long-text { font-size: 12px; } #left_sub_menu ul dd.mu1 ol.icon img { width:30px; height: 30px; margin:0; filter: brightness(0) saturate(100%) invert(100%); } #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link { cursor:pointer; } #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link:hover { color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol[mucode].on ul.link { color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol[mucode].on ul.link i.icon { filter: invert(25%) sepia(84%) saturate(1790%) hue-rotate(194deg) brightness(102%) contrast(101%); } #left_sub_menu ul[gcode] dd.mu2 ol[mucode].on ul.link i.icon { background-image: url(/images/icon/icon-folder-on.svg); } #left_sub_menu ul[gcode] dd.mu2 ol.down_on ul.link dt { background-image: url(/images/icon/icon-plus.svg); } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on ul.link dt { background-image: url(/images/icon/icon-minus.svg); filter: invert(25%) sepia(84%) saturate(1790%) hue-rotate(194deg) brightness(102%) contrast(101%); } #bubble_tail { display:none; position:absolute; z-index:1; top:200px; left:58px; } /*중메뉴 화면 확대일때*/ #frame_all[data-fix=on] #left_menu #left_sub_menu { display:none; position:fixed; left:85px; top:70px; width:240px; height: auto; padding:7px; background-color:#F3F4F6; overflow-x:hidden; overflow-y:auto; border-radius:4px; box-shadow: 3px 3px 3px 1px rgba(100, 100, 100, 0.5); } #frame_all[data-fix=on] #bubble_tail { display:none; } #frame_all[data-fix=on].view #left_menu #left_sub_menu { display:block; } #frame_all[data-fix=on].view #bubble_tail { display:block; } #frame_all[data-fix=on] #left_menu #left_sub_menu select#favorites { display:none; } #frame_all[data-fix=on] #left_menu #left_sub_menu select#BOOKMARK { display:none; } /* 서브메뉴(중메뉴) 텍스트 처리 - ul.link 영역 설정 */ #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link { cursor: pointer; /* width: 216px; */ /* width: calc(100% - 40px); */ width: 100%; height: 40px; position: relative; display: flex; align-items: center; } /* #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link span.menu-text { */ #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; max-height: 38px; /* width: 150px; */ width: 100%; font-size: 15px; padding-right: 35px; } /* #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link span.menu-text.long-text { font-size: 15px; } */ /* #left_sub_menu ul[gcode] dd.mu2 ol[mucode] ul.link span.menu-text.very-long-text { font-size: 12px; } */ /*소메뉴*/ #left_sub_menu ul[gcode] dd.mu2 ol.down_on ul.link dt { position:absolute; right:10px; background-image: url(/images/icon/icon-plus.svg); background-size: 22px 22px; background-position: right 3px; background-repeat: no-repeat; width:30px; height:30px; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on ul.link img { vertical-align: middle; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on ul.link:hover img { filter: invert(25%) sepia(84%) saturate(1790%) hue-rotate(194deg) brightness(102%) contrast(101%); } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl { display:block; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] p.mu3 { cursor:pointer; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2]:hover p.mu3 { color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] dt { position:absolute; left:28px; font-size:9px; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2]:hover dt { display:block; color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2].on p.mu3 { color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2].on dt { display:block; color:#0C6BFB; } #left_sub_menu ul[gcode] dd.mu2 ol dl { padding-left:15px; } #left_sub_menu ul[gcode] dd.mu2 ol dl ol.mu3 { height: 30px; line-height:30px; font-size:14px; padding-left:10px; border-left:1px solid #AFB0B2; } /* 하위메뉴(소메뉴) 텍스트 처리 - p.mu3 영역 설정 */ /* #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] { position: relative; } */ #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] p.mu3 { cursor: pointer; width: 100%; font-size: 13px; display: flex; align-items: center; height: 31px; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; line-height: 1.1; } /* #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] p.mu3.long-text { font-size: 12px; } */ /* #left_sub_menu ul[gcode] dd.mu2 ol.down_on.on dl ol[mucode2] p.mu3.very-long-text { font-size: 11px; } */ /* 가로 방향 전화기부터 세로 방향 타블렛까지 */ @media (max-width: 1100px) { #frame_all #head #top_goals { display:none; } } @media (max-width: 767px) { #frame_all #head { padding-left:0; padding-right:0; } #frame_all #head #top_logo { float: none; width:100%; text-align:center; } #frame_all #head #top_menu_icon { display:block; position:fixed; top:0; padding-top:10px; padding-left:15px; } #frame_all #head #top_right { padding-right:0; padding-top:5px; } #frame_all #head #top_right li { display:none; } #frame_all #head #top_right li#top_logout { display:block; } #frame_all #left_menu { display:block; width:0; background-color:#ffffff; } #frame_all #left_menu #i_left_menu { display:none; } #frame_all #left_sub_menu { display:none; left:0; width:100%; } #frame_all[data-fix] #left_menu #left_sub_menu { display:none; left:0; width:100%; } #frame_all[data-fix] #left_menu #left_sub_menu.on.view { display:block; } #frame_all #left_sub_menu ul[gcode] { display:block; } #frame_all #left_sub_menu ul[gcode] dd.mu1 { display:block; position:relative; cursor: pointer; } #frame_all #left_sub_menu ul[gcode] dd.mu2 { display:none; } #frame_all #left_sub_menu ul[gcode].on dd.mu2 { display:block; } #frame_all #left_sub_menu ul[gcode] dd.mu1 i.show_hide { display:none; } #frame_all #left_sub_menu ul[gcode] dd.mu1 i.show_hide {display:block; width:30px; height: 30px; position:absolute; z-index:1; top:10px; right:10px; background-image: url(/images/icon/icon-plus.svg); filter: brightness(0) saturate(100%) invert(100%); } #frame_all #left_sub_menu ul[gcode].on dd.mu1 i.show_hide { background-image: url(/images/icon/icon-minus.svg); } #frame_all #content { width:100%; left:0; margin-left:0; padding:0; } #frame_all[data-fix=on] #content { width: 100%; margin-left:0; padding:0; } #frame_all #left_sub_menu ul[gcode] dd.mu1 { display: flex; flex-wrap: wrap; position: relative; cursor: pointer; align-items: center; min-height: 50px; } #frame_all #left_sub_menu ul[gcode] dd.mu1 ol.icon { width: 40px; display: flex; align-items: center; height: 40px; } #frame_all #left_sub_menu ul[gcode] dd.mu1 ol.name { width: calc(100% - 80px); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; max-height: 42px; font-size: 14px; } /* #frame_all #left_sub_menu ul[gcode] dd.mu1 ol.name.long-text { font-size: 14px; } */ /* #frame_all #left_sub_menu ul[gcode] dd.mu1 ol.name.very-long-text { font-size: 12px; } */ #frame_all #left_sub_menu ul[gcode] dd.mu1 i.show_hide { width: 30px; height: 30px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } }