/* Fonts */
  @font-face {
    font-family: 'Spoqa-Regular';
    src: url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.eot');
    src: url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.eot?#iefix') format('embedded-opentype'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.svg#SpoqaHanSansNeo-Regular') format('svg'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.ttf') format('truetype'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.woff') format('woff'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Regular/SpoqaHanSansNeo-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Spoqa-Medium';
    src: url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.eot');
    src: url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.eot?#iefix') format('embedded-opentype'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.svg#SpoqaHanSansNeo-Medium') format('svg'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.ttf') format('truetype'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.woff') format('woff'),
         url('/static/css/webfonts/SpoqaHanSansNeo-Medium/SpoqaHanSansNeo-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Roboto-Regular';
    src: url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.eot');
    src: url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.svg#Roboto-Regular') format('svg'),
         url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.ttf') format('truetype'),
         url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.woff') format('woff'),
         url('/static/css/webfonts/Roboto-Regular/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'NotoSans-Regular';
    src: url('/static/css/webfonts/NotoSansCJKkr-Regular/NotoSansCJKkr-Regular.eot');
    src: url('/static/css/webfonts/NotoSansCJKkr-Regular/NotoSansCJKkr-Regular.eot?#iefix') format('embedded-opentype'),
         url('/static/css/webfonts/NotoSansCJKkr-Regular/NotoSansCJKkr-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

html {
  font-size:62.5%;
}
body {
    width:100%;
    height:100%;  
    min-width:1700px;
    min-height:750px;  
    overflow-x: hidden;
}
.container {
    width:100vw;    
    height:100vh; 
    min-height:750px;  
}

/* flex 공통 */
.aj-c{
    align-items:center;
    justify-content: center;  
}

/*헤더 */
header {
  position:relative;
  display:flex;
  min-width: 1700px;
  width:100%;
  height:4.07%;
  padding-left:22px;
  background: #005685;   
}
header > h1 {
  display:flex;
  align-items:center;
}
header > h1 > a {
  display:flex;
  height:100%;
  padding: 3px 0;
}
header .header_menu {
  position:relative;
  display:flex;  
  align-items:center;
}
header .header_menu .company {
  display:flex;  
  padding:0 18px;
  height:100%;
  justify-content: space-between;
  align-items:center;  
  font-family: 'Spoqa-Regular',sans-serif;
  font-size:2.2rem;
  color:#fff;
  cursor: pointer;  
}
header .header_menu > ul {
  display:flex;
  align-items:center;

  height:68.18%;
  background: #003653;
  border: 1px solid #63C8FF;
  border-radius: 5px;
}
header .header_menu > ul > li {  
  display:flex;
  align-items:center;
  height:100%;
}
header .header_menu > ul > li.on {
  background: #63C8FF;
}
header .header_menu > ul > li.on > a  {
  background: #63C8FF;
  color: #003653;
  font-weight: bold;
}
header .header_menu > ul > li > a  {
  display:block;
  padding:0 15px;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-family: 'Spoqa-Regular',sans-serif;

}
header .header_menu > ul > div {
	width: 1px; 
	height: 25px; 
	background: #63C8FF;
}


header .today_weather {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  height: 56.8%;
  padding:0 40px;
  font-size:1.8rem;
  background: #003653;    
  color:#ffffff;
  font-family: 'Spoqa-Regular',sans-serif;  
  border-radius: 50vw;
}
header .today_weather .w_txt {
  padding:0 30px;
}
header .today_weather .w_c,
header .today_weather .w_s {
  padding-right:5px;
}
header .today_weather .w_c_txt {
  padding-right:30px;
}
header .my_profile {
  display: flex;
  align-items:center;
  margin-left: auto;
  font-family: 'Spoqa-Regular',sans-serif;  
  font-size:1.5rem;
  color: #FFFFFF;
  margin-right:8px;
}
header .my_profile > a {
  font-family: 'Spoqa-Regular',sans-serif;
  font-size: 1.5rem;
  color: #FFFFFF;
}
header .btn_logout {
  width:4rem;
  height:100%;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
header .icon-sound {  
  display:inline-block;
  width:3.5rem;
  height:100%;  
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
header .icon-sound.on .ri-volume-mute-fill:before { 
  content: "\f2a1";
}
header .icon-download {  
  width:3.5rem;
  height:100%;  
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/*안전대시보드 왼쪽 고정 메뉴*/
.content_wrap {
  display:flex;  
  justify-content: space-between;
  position:relative;
  width:100%;
  height: calc(100% - 4.07%);
  min-height:700px;
  background:#f3f3f3; 
}

.content_wrap .static-leftmenu {
  position:relative;
  display: flex;
  height:100%;
   transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
}

.content_wrap .static-leftmenu .static-wrap {  
  width:120px;
  /* height: 100%; */
  min-width:120px;
  background: #57A0CC;
  z-index:2;
}
.content_wrap .static-leftmenu .static-menu {
  display:flex;
  flex-direction: column;
  width:100%; 
  height:100%;  
}
.content_wrap .static-leftmenu .static-menu > li {   
  height:120px;  
  width:100%;  
  border-bottom:2px solid #68B8E8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#57A0CC;
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
}
.content_wrap .static-leftmenu .static-menu > li > a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.content_wrap .static-leftmenu .static-menu > li.m_3d {
  position:relative;
}
.content_wrap .static-leftmenu .static-menu > li > a > span {
  display: flex;  
  justify-content: center;
  width:100%;  
  padding-top: 70px;
  background:url('/static/img/viewer/boardmenu/icon_menu_n01.svg') center 0px no-repeat;
  background-size: 70px;    
  color: #FFFFFF;
  font-size:1.5rem;
  font-family: 'Spoqa-Regular',sans-serif;   
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  text-align:center;
  line-height:19px;
}
.content_wrap .static-leftmenu .static-menu > li.on ,
.content_wrap .static-leftmenu .static-menu > li:hover { 
  background-color: #F9F9F9;
}
.content_wrap .static-leftmenu .static-menu > li.on > a > span,
.content_wrap .static-leftmenu .static-menu > li:hover > a > span { 
  color: #002940;
  font-family: 'Spoqa-Medium',sans-serif;
}
.content_wrap .static-leftmenu .static-menu > li.m01 > a > span {
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n01.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m_3d > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n02.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m03 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n03.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m04 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n04.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m05 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n05.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m06 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n06.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m07 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n07.svg');
  text-align: center;
  line-height: 19px;
}
.content_wrap .static-leftmenu .static-menu > li.on.red.m07 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n07_on.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m08 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n08.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m09 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n09.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m10 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n10.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m11 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n11.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m12 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n12.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m13 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n13.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m14 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n14.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m15 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n15.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m16 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n16.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m17 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n17.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m18 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n18.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m19 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n19.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m20 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n20.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m21 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n21.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m22 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n22.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m23 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n23.svg');
}
.content_wrap .static-leftmenu .static-menu > li.m24 > a > span{
  background-image: url('/static/img/viewer/boardmenu/icon_menu_n24.png');
}
.content_wrap .content {
  position:relative;
  width:calc(100vw - 120px); 
  min-width: calc(1700px - 120px);   
  background:#f3f3f3;
  transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
}
.content_wrap.today_on .content {  
  width: calc(100vw - 120px - 16.75vw);  
  min-width: calc(100vw - 120px - 320px);
  left:0;
}

/*로딩중*/
.loader {
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50% , -50%);
  padding:20px;
  background:#ffffff;
  box-shadow: 3px 5px 5px rgb(0 0 0 / 30%);
  font-size:1.4rem;
  font-family: 'Spoqa-Regular',sans-serif; 
  vertical-align: top;
  border-radius: 3px;
  z-index:2;
}
.loader > img {
  vertical-align: middle;
  padding-right: 10px;
}

/*하단 경고창*/

.alert-bottom.on {  
  bottom:20px;
}
.alert-bottom {
  position:fixed;
  right:30px;
  bottom:-100%;
  transition:0.3s;
  z-index:999;
}
.alert-bottom .alert-wrap {
  display:flex;
  flex-direction: column-reverse;
  width:280px;   
  position: absolute;
  bottom: 0px;
  right: 0px;
  transition: all 0.5s;
}
.alert-bottom .alert-wrap > li { 
  position:relative;
  height:80px;
  margin-top:5px;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.alert-bottom .alert-wrap > li:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:100%;
  background:transparent;
 }
 .alert-bottom .alert-wrap > li.red:before {
  background: #CA0000;
 }
 .alert-bottom .alert-wrap > li.orange:before {
  background: #FFAA6C;
 }
 .alert-bottom .alert-wrap > li.yellow:before {
  background: #FFF960;
 }
 .alert-bottom .alert-wrap > li .info_wrap {
   display:flex;
   width:100%;
   height:100%;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_i {
  width:calc(30% - 8px);
  height:100%;
  background:url('/static/img/viewer/pictogram/test_11.png') center no-repeat;
  background-size:50px 50px;
  margin-left:8px;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info {
  display:flex;
  flex-direction: column;
  justify-content: center;
  width:calc(70%);
  height:100%;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li {
  line-height:18px;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li span {
  font-family: 'Roboto-Regular';
  font-size: 12px;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .date,
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .roe {
  color: #77797B;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .state {
  color: #DC0000;
  display: block;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .state > span {
  
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .state > span:after {
  content:'';
  display:inline-block;
  font-size:0;
  margin-left:5px;
  margin-right:4px;
  width:1px;
  height:10px;
 background:#DC0000;
}
.alert-bottom .alert-wrap > li .info_wrap .warning_info > li .state > span:last-child:after {
  display:none;
}

.alert-bottom .alert-wrap > li .close {
  position:absolute;
  top:0;
  right:0;
  width:22px;
  height:22px;
  background:url('/static/img/viewer/common/popup_x.png') center no-repeat;
  background-size:100%;
  z-index:3;
}
.go {
  display:block;
  width:100%;
  height:100%;
}




@media only screen and (width:4096px) and (height:2160px) {
  html {
    font-size: 87.5%;
  }
}

@media only screen and (max-width:1700px) {
  body {
    overflow-x: auto;
  }
}
@media only screen and (max-height:900px) {
  .content_wrap .static-leftmenu .static-menu > li > a > span {
    padding-top: 55px;
    background-size: 55px;
  }
}