/* 사이드바 [S] */
.sidebar { width:100%; max-width:285px; position:fixed; z-index:10; background:#fff; left:0; top:0; height:100%; transition: 0.3s; box-shadow: 0 0 21px 0 rgb(89 102 122 / 10%); font-size:14px; }
.sidebar .logo { width:100%; max-height:70px; display:flex; padding:15px 27px; justify-content: space-between; align-items: center; box-shadow: -9px 0 20px rgb(89 102 122 / 10%);}
.sidebar .general { color:#444; padding-bottom:12px; }
.sidebar .general h1 { padding:28px 20px; font-weight:600; padding-bottom:10px; }
.sidebar .general h2 { border-top:1px solid #e1e1e1; font-weight:600; width:calc(100% - 40px); margin-left:20px; padding:22px 0px; margin-top:10px; padding-bottom:10px; }
.sidebar .general li.sb_one { }
.sidebar .general li.sb_one span { display:flex; position:relative; cursor:pointer; font-weight:500; width:100%; padding:12px 20px; align-items: center; flex-wrap: wrap;}
.sidebar .general li.sb_one span.is-active { color:#7366ff; font-weight:600; background:#f1f0ff; position:relative; }
.sidebar .general li.sb_one span.is-active::after { content:''; position:absolute; right:0; top:10%; height:80%; width:4px; background:#7366ff; border-radius: 5px 0px 0px 5px; }
.sidebar .general li.sb_one  i { max-width:18px; margin-right:7px; }
.sidebar .general li.sb_one span > i { max-width:18px; margin-right:10px; }
.sidebar .general li.sb_one span > i.arrow { position:absolute; right:20px; }
.sidebar .general li.sb_one > .sb_two { width:100%; padding:2px 20px; }
.sidebar .general li.sb_one > .sb_two > a { display:block; width:100%; position:relative; padding:10px 0; padding-left:12px; }
.sidebar .general li.sb_one > .sb_two > a.active,
.sidebar .general li.sb_one > .sb_two > a:hover { cursor:pointer; color:#7366ff; font-weight:600;}
.sidebar .general li.sb_one > .sb_two > a.active::before,
.sidebar .general li.sb_one > .sb_two > a:hover::before { background:#7366ff; }
.sidebar .general li.sb_one > .sb_two > a::before { content:''; width:4px; height:4px; background:#444; border-radius:100%; position:absolute; left:0; top:calc(50% - 2px); }
.sidebar .general li.sb_one > .is-hidden { display:none; }

.sb_sum { position:absolute; right:60px; top:11px; background-color:rgba(115, 102, 255, 0.1); color:#7366ff; font-size:11px; padding:2px 5px; border-radius:3px;}

.sidebar .information { position:fixed; display:flex; bottom:0; left:0; }
.sidebar .information a { width:50%; }
/* 사이드바 [E] */


/* 헤드 [S] */

#phantom_header { position:fixed; top:0; left:0; width:100%; z-index:5; padding:10px 30px; padding-left:315px; height:100%; max-height:70px; display:flex; align-items: center; background:#fff; box-shadow: 0px 4px 40px rgb(39 32 120 / 5%); transition:0.5s; }

#phantom_header .phantom_news { width:50%; align-content: center; overflow:hidden; display:flex; justify-content: flex-start; align-items: center; height: 100%; z-index: 99999; position: relative; flex-wrap: wrap;}
#phantom_header .phantom_news .swiper-wrapper { width:100%; text-align:left; line-height:1em; }
#phantom_header .phantom_news .swiper-wrapper .swiper-slide { font-size:14px; line-height:1em; letter-spacing:-0.5px; align-items: center;}
#phantom_header .phantom_news .swiper-wrapper .swiper-slide > b { color:#7366ff; font-weight:400; margin:0 3px;}
#phantom_header .phantom_news .swiper-wrapper .swiper-slide > img { max-height:26px; margin-top:-8px; }


#phantom_header .phantom_profile { width:50%; align-content: center; display:flex; justify-content: flex-end; align-items: center; height: 100%; z-index: 99999; position: relative; flex-wrap: wrap;}
#phantom_header .phantom_profile .user_profile { position:relative; padding:20px 0; display:flex; flex-wrap:wrap; }

#phantom_header .phantom_profile .user_profile .profile_image { margin-right:10px; }
#phantom_header .phantom_profile .user_profile .profile_image img { max-height:30px; border-radius:100%; border:1px solid #e1e1e1; }
#phantom_header .phantom_profile .user_profile .profile_content { font-size:13px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }

#phantom_header .phantom_profile .user_profile:hover .profile_ul { display:block; top:70px; right:0; width:100%; position:absolute;  background:#fff; box-shadow: 0 0 21px 0 rgb(89 102 122 / 10%); border-radius:8px; font-size:12px; }
#phantom_header .phantom_profile .user_profile .profile_ul { display:none; }
#phantom_header .phantom_profile .user_profile .profile_ul a { padding:10px 20px; display:inline-block; width:100%; border-bottom:1px solid #dcdcdc; }
#phantom_header .phantom_profile .user_profile .profile_ul a:nth-last-child(1) { border:none; }
#phantom_header .phantom_profile .user_profile .profile_ul a:hover { transition:0.3s ease all; color:#7366ff; }
#phantom_header .phantom_profile .user_profile .profile_content b { margin-right:5px; }



#phantom_header .clock { font-size: 14px; color: #666; font-weight: 350; letter-spacing: -0.5px; white-space: nowrap;}
#phantom_header .clock > i { margin-right:3px; }
#phantom_header .clock .clock_ampm { font-size:14px; }
/* 헤드 [E] */


/* 컨텐츠 [S] */

#phantom_content { width:calc(100% - 285px); margin-left:285px; min-height:calc(100vh - 70px); margin-top:70px; }
#phantom_content .navigator { display:inline-block; width:100%; padding:14px 30px; } 
#phantom_content .navigator .nav_row { width:100%; display:flex; justify-content: space-between; }
#phantom_content .navigator .nav_row h1 { font-size:20px; letter-spacing:-1px;}
#phantom_content .navigator .nav_row .right_nav { position:relative; display:flex; font-size:13px; }
#phantom_content .navigator .nav_row .right_nav li:nth-child(1)::after { position:relative; content:'/'; margin:0 10px; font-size:10px;}
#phantom_content .navigator .nav_row .right_nav li:nth-child(2) { color:#7366ff; font-weight:500; }

#phantom_content .content_wrap {display: flex; flex-wrap: wrap; padding: 24px; background:rgba(242, 243, 247, 0.5); }



.main_section_01 { width:100%; display:inline-block; }
.main_section_01 .ms01_content { width:100%; display:flex; }
.main_section_01 .ms01_content .ms_menu { width:100%; display:flex; flex-wrap:wrap; }
.main_section_01 .ms01_content .ms_menu .mnb { width:calc(100% / 5 - 20px); margin-bottom:24px; margin-right:24px; align-items: center; box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); display:flex; background:#fff; padding:20px; border-radius:8px; }
.main_section_01 .ms01_content .ms_menu .mnb:nth-child(5n) { margin-right:0; }
.main_section_01 .ms01_content .ms_menu .mnb span { box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); display:flex; align-items: center; justify-content: center; min-width:50px; min-height:50px; background:#fff; color:#ff1e1e; border:1px solid #ff1e1e; border-bottom:2px solid #ff1e1e; border-left:2px solid #ff1e1e; border-radius:100%; }

.main_section_01 .ms01_content .ms_menu .mnb span.bg_purple { color:#7366ff; border:1px solid #7366ff; border-bottom:2px solid #7366ff; border-left:2px solid #7366ff; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_orange { color:#FFAA05; border:1px solid #FFAA05; border-bottom:2px solid #FFAA05; border-left:2px solid #FFAA05; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_green { color:#54BA4A; border:1px solid #54BA4A; border-bottom:2px solid #54BA4A; border-left:2px solid #54BA4A; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_mint { color:#4abaab; border:1px solid #4abaab; border-bottom:2px solid #4abaab; border-left:2px solid #4abaab; }


.main_section_01 .ms01_content .ms_menu .mnb span.bg_dpurple { color:#c000ff; border:1px solid #c000ff; border-bottom:2px solid #c000ff; border-right:2px solid #c000ff; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_blue { color:#00a9ff; border:1px solid #00a9ff; border-bottom:2px solid #00a9ff; border-right:2px solid #00a9ff; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_dmint { color:#0c00ff; border:1px solid #0c00ff; border-bottom:2px solid #0c00ff; border-right:2px solid #0c00ff; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_pink { color:#e668db; border:1px solid #e668db; border-bottom:2px solid #e668db; border-right:2px solid #e668db; }
.main_section_01 .ms01_content .ms_menu .mnb span.bg_gray { color:#999; border:1px solid #999; border-bottom:2px solid #999; border-right:2px solid #999; }

.main_section_01 .ms01_content .ms_menu .mnb span > i { font-size:24px; }
.main_section_01 .ms01_content .ms_menu .mnb:hover span > i { animation: tada 1.5s ease infinite; }
.main_section_01 .ms01_content .ms_menu .mnb p { margin-left:10px; display:flex; flex-wrap: wrap; font-size:16px; font-weight:400; color:#555; letter-spacing:-1px; }
.main_section_01 .ms01_content .ms_menu .mnb p b { width:100%; font-weight:600; font-size:24px; color:#000; }

#phantom_main_chart_01 { width:100%; position: relative; height: 100vh; max-height:300px; overflow: hidden; }

.main_wrap { width:100%; display:flex; flex-wrap:wrap; }

.main_section_02 { display:flex; width:60%; position:relative; background:#fff; border-radius:8px; padding:24px; box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); }
.main_section_02 .ms02_content { width: 100%; display: flex; max-width: 240px; margin-left: 24px; flex-wrap: wrap; align-items: center; justify-content: flex-start; align-content: flex-end; }
.main_section_02 .ms02_content .graph_sum_box { width:100%; margin-bottom:10px; display:flex; padding:12px 20px; background:#f9f9f9; border-radius:8px; }
.main_section_02 .ms02_content .graph_sum_box .gs_box { box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); font-weight:300; font-size:20px; display:flex; align-items: center; justify-content: center; min-width:48px; min-height:48px; background:#fff; color:#333; border-radius:20%; }
.main_section_02 .ms02_content .graph_sum_box p { margin-left:12px; font-size:14px; color:#777; display:flex; flex-wrap:wrap; letter-spacing:-0.5px; }
.main_section_02 .ms02_content .graph_sum_box p b { width:100%; font-size:16px; color:#222; font-weight:500;}

.main_section_03 { display:flex; flex-wrap:wrap; align-content: flex-start; width:calc(40% - 24px); margin-left:24px; background:#fff; border-radius:8px; padding:24px; box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); }
.main_section_03 > h1 { font-size:20px; margin-bottom:24px; line-height:1em; width:100%; font-weight:600; }
.main_section_03 .ms03_content { width:calc(100% - 200px); display:flex; flex-wrap:wrap; justify-content: flex-start; align-items: center; }
.main_section_03 .ms03_content .ms03_box { display:flex; flex-wrap:wrap; align-items: center;position:relative; padding-left:24px; font-size:14px; letter-spacing:-1px; font-weight:500; color:#666; }
.main_section_03 .ms03_content .ms03_box p { width:100%; margin-left:11px; }
.main_section_03 .ms03_content .ms03_box p b { font-size:24px; color:#000; }
.main_section_03 .ms03_content .recent_circle.rc_blue { background:#5db2f3 }
.main_section_03 .ms03_content .recent_circle.rc_pink { background:#e668db }

.main_section_03 .ms03_content .recent_circle { position:relative; width:6px; height:6px; border-radius:100%; margin-right:5px; background:#7366ff }


.main_section_04 { display:flex; margin-top:24px; flex-wrap:wrap; align-content: flex-start; width:100%;  }
.main_section_04 .phantom_latest { width:calc(100% / 3 - 16px); border-radius:8px; margin-right:24px;background:#fff; box-shadow: 1px 2px 21px -2px rgb(214 214 227 / 80%); }
.main_section_04 .phantom_latest > h1 { font-size:20px; padding:24px; letter-spacing:-1px; line-height:1em; width:100%; font-weight:600; }
.main_section_04 .phantom_latest:nth-child(3) { margin-right:0; }
.main_section_04 .phantom_latest ul.download { width:100%; display:flex; flex-wrap:wrap; max-height:670px; overflow-x:hidden; overflow-y:scroll; }
.main_section_04 .phantom_latest ul.download::-webkit-scrollbar-thumb { width:5px; border-radius: 8px; background: rgba(115, 102, 255, 0.2);}
.main_section_04 .phantom_latest ul.download::-webkit-scrollbar-track { width:5px; border-radius: 8px; background:white; }
.main_section_04 .phantom_latest ul.download::-webkit-scrollbar { width:5px; border-radius: 8px; background:white; }
.main_section_04 .phantom_latest ul.download > a { width:100%; border-top:1px solid #e1e1e1; padding:24px; display:flex; flex-wrap:wrap; transition:0.3s ease all; }
.main_section_04 .phantom_latest ul.download > a:hover { background:#f2f3f8; transition:0.3s ease all; }
.main_section_04 .phantom_latest ul.download > a > li { width:100%; }
.main_section_04 .phantom_latest ul.download > a > li > p.title { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.main_section_04 .phantom_latest ul.download > a > li > p.title b { background:rgba(220, 220, 220, 0.45); color:#666; font-weight:400; padding:4px 8px; border-radius:4px; }
.main_section_04 .phantom_latest ul.download > a > li > h1 { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; color:#222; letter-spacing:-1px; margin:8px 0; }
.main_section_04 .phantom_latest ul.download > a > li > p.content { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#888; letter-spacing:-0.5px; }
.main_section_04 .phantom_latest ul.download img { max-width:100%; height:auto; }
.main_section_04 .phantom_latest ul.maintenance { width:100%; display:flex; flex-wrap:wrap; max-height:670px; overflow-x:hidden; overflow-y:scroll; }
.main_section_04 .phantom_latest ul.maintenance::-webkit-scrollbar-thumb { width:5px; border-radius: 8px; background: rgba(115, 102, 255, 0.2);}
.main_section_04 .phantom_latest ul.maintenance::-webkit-scrollbar-track { width:5px; border-radius: 8px; background:white; }
.main_section_04 .phantom_latest ul.maintenance::-webkit-scrollbar { width:5px; border-radius: 8px; background:white; }
.main_section_04 .phantom_latest ul.maintenance > a { width:100%; border-top:1px solid #e1e1e1; padding:23px; display:flex; flex-wrap:wrap; transition:0.3s ease all; }
.main_section_04 .phantom_latest ul.maintenance > a:hover { background:#fafafa; transition:0.3s ease all; }
.main_section_04 .phantom_latest ul.maintenance > a > li { width:100%; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.title { display: flex; width: 100%; align-items: center; justify-content: flex-start; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.title b { background:#7366ff; margin-right:4px; color:#fff; font-weight:400; padding:4px 8px; border-radius:4px; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.title b:nth-last-child(1) { margin-right:0; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.title b.category {background:rgba(115, 102, 255, 0.08); color:#7366FF; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.title b.day {background:#FFAA05; color:#fff; }
.main_section_04 .phantom_latest ul.maintenance > a > li > p.content { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#888; margin-top:4px; letter-spacing:-0.5px; }


/* 컨텐츠 [E] */

/* 스와이퍼 배너 [S] */

.swiper { width:100%; height: 100%; text-align:left; }
.swiper-slide {text-align: left; background: #fff; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex; -webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: flex-start; justify-content: flex-start;-webkit-box-align: center;-ms-flex-align: center; -webkit-align-items: center; align-items: center; }

/* 스와이퍼 배너 [E] */

.ms03_sc { width:100%; position:relative; max-width:200px; }
.ms03_sc .circle { margin-top:20px; width: 100%; display: inline-block; position: relative; text-align: center; line-height: 1.2; }
.ms03_sc .circle strong {
 position: absolute;
 top: calc(50% - 30px);
 left: 0;
 width: 100%;
 text-align: center;
 line-height: 1;
 font-size: 36px;
}
.ms03_sc .circle span {
 position: absolute;
 top: calc(50% + 12px);
 left: 0;
 width: 100%;
 text-align: center;
 line-height: 1;
 font-size: 12px;
}
.ms03_sc canvas { position:relative; width:100% !important; height:100% !important; }