#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; background-color:#ffffff; margin:0; } #frame_all #head #top_frame { height:100%; border-bottom:1px solid #8A8B8F; background-color: #000000; color: #fff; } #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; font-size: 25px; margin-top: 5px;} #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; font-size:30px; } #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:70px; 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; width: 100%; height: 100%; overflow-x:hidden; overflow-y:hidden; color:#fff; background-color:#fff; font-size:12px; } #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:100%; } #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:20px; 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:70px; 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 dd.mu1 { height: 50px; line-height:50px; background-color:#000000; color:#ffffff; border-radius:7px; } #left_sub_menu ul dd.mu1 i.show_hide { display:none; } #left_sub_menu ul dd.mu1 ol { float: left; line-height: 50px; padding-left:10px; } #left_sub_menu ul dd.mu1 ol.icon { width:40px; text-align:left; } #left_sub_menu ul dd.mu1 ol.name { width: calc(100% - 40px); color:#ffffff; font-size:18px; font-weight: 600; text-align:left; } #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; } /*소메뉴*/ #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 ul.link:hover dt { 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; } /* 가로 방향 전화기부터 세로 방향 타블렛까지 */ @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 #head #top_stname { display:none; } #frame_all #head #li_help { display:none; } #frame_all #head #li_push { display:none; } #frame_all #head #top_goals { display:none; } #i_left_menu { width:100%; } #i_left_menu div.menu ul { width:100%; } #i_left_menu div.menu ul li { width:300px; } #i_left_menu div.menu ul li dt ul.mu2 { width:300px; } #frame_all #left_menu { display:none; position:fixed; width:300px; } #frame_all #content { width:100%; left:0; margin-left:0; padding:0; } #frame_all.mu_close #left_menu { display:block; width:300px;} #frame_all #content .menu_location { display:none; } */ }