@charset "utf-8";

h2 { font-size: 1.5em; padding:  10px 0;}
header {  display: unset !important;}

/*로고-하단과네비바에사용*/
.logo-gray { -webkit-filter: grayscale(100%);  filter: gray; }

/*컨텐츠 백그라운드*/
.bgcolorMain { background-color: #e3e7eb;}
.bgcolorSub { background-color: #e8c6c6;} 

/*탑-로고및데이터최근정보노출*/
.topAR { border-bottom: 1px solid #c4c4c4; height: 100px; position: relative; }
.topLOGO:hover { color: #f1f1f1;  }
.topLOGO h1{font-size: 1.04rem; color: #fff; width:180px; font-weight: 100; line-height: 1.4rem;}
.topLOGO h1 span {font-size:1.2rem; font-weight:500; display:block;}
.topLOGO img { height: 50px; padding-right: 15px; float:left }
.todaydata-info { padding: 0 50px; margin: 0; font-size: 0.85em; color:#666; margin-bottom:0;}
.todaydata-info > li > span:first-child { width: 110px !important; font-weight: 400; display: inline-block;}
.topAR .container {align-items: center}

.cityinfo  { padding:10px;  text-align: right; font-size: 1em; color: #666; line-height: 1.3em;} 
.cityinfo span:first-child, 
.cityinfo span:first-child a { font-size: 1em; color: #3a6f9b; font-weight: 400; line-height: 1.2em; }
.cityinfo span { display: block; }
.cityinfo span:last-child, 
.cityinfo span:last-child a { font-size: 1.3em; color: #080808; font-weight: 400; line-height: 1.5em; }

.mainMenu .cityinfo {  display: none;}
.mainMenu.scrolling-navbar .cityinfo {display: block; padding-right: 40px;}


.dataSearch-open { text-align: center; cursor: pointer; font-weight: 500 }
.dataSearch-open i.material-icons { display: block; font-size: 35pt !important; color:#fff; 
  /* transform:rotate(0deg);
  -moz-transform: scaleX(-1); 
  -o-transform: scaleX(-1); 
  -webkit-transform: scaleX(-1); 
  transform: scaleX(-1);   
  filter: FlipH;
 -ms-filter: "FlipH" */} 
.dataSearch-open:hover { display: block; color:#000; cursor: pointer; }
.dataSearch-close { position: absolute; bottom:-49px; right:0; background-color: #f5f5f5; border: 1px solid #666; cursor: pointer; font-size: 3em !important; color: #000;  }

.mobile-hamburger {display: none;cursor: pointer;/* position: absolute; *//* top:2rem; *//* right: 2rem; *//* transform: translate(-50%, -50%); */}
/* .mobile-hamburger { display: none; cursor: pointer;position: absolute; top:2rem; right: 2rem;  transform: translate(-50%, -50%);} */
.mobile-hamburger span {display: block; background: #333;width: 42px; height: 4px; border-radius: 3px;transition: 0.25s margin 0.25s, 0.25s transform;}
.mobile-hamburger span:nth-child(1) {margin-bottom: 8px;}
.mobile-hamburger span:nth-child(3) {margin-top: 8px;}
.mobile-hamburger.active span {transition: 0.25s margin, 0.25s transform 0.25s;}
.mobile-hamburger.active span:nth-child(1) {margin-top: 8px; margin-bottom: -4px;transform: rotate(45deg);}
.mobile-hamburger.active span:nth-child(2) {transform: rotate(45deg);}
.mobile-hamburger.active span:nth-child(3) { margin-top: -4px;transform: rotate(135deg);}

.mobile-searchBtn { display: none; cursor: pointer;}
.mobile-searchBtn > span > i {font-size: 33pt !important;}

/*메인NAV*/
 #topNAVbar .closebtn   {display: none;}  
.sticky-top {z-index: 10 !important;}
.mainMenu  { border-bottom: 1px solid #c4c4c4; padding:1.5rem 0; background-color: #005aab; }  
.mainMenu .navbar-nav { padding:0 }
.mainMenu .navbar-nav > li { padding:0 5px}
.mainMenu .nav-link {
    color:#fff; font-weight:400;
    line-height: 1.2em;
    text-align: center; 
    margin:1px;padding: 0 1rem !important;
}
.mainMenu .nav-link.active {color:#fff }
.nav-txt {  width: auto; text-align: right; padding-left: 1rem;}
.nav-txt span { display: block; }
.nav-txt span:first-child { font-size: 2em; color: #3a6f9b;}

.scrolling-navbar  {-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  transition: background .5s ease-in-out,padding .5s ease-in-out;background-color: #6f6f6f;
 height:90px}
.scrolling-navbar .nav-link {
    line-height: 1.2em; font-size:.9em ;  
    text-align: center; 
   color: #fff; margin: 0; padding:0 .85rem !important
}
.scrolling-navbar .cityinfo span:first-child, 
.scrolling-navbar .cityinfo span:first-child a { /*color:#84f8ff*/ color: #fff; }
.scrolling-navbar .cityinfo span { /*color:#fffb27*/ color: #fff;}

/*분석데이터검색하기*/
#dataSearchAR { width: 100%; background: linear-gradient(to right,  #839ca9 0%,#839ca9 50%,#f5f5f5 50%,#f5f5f5 100%); 
  position:absolute; /*top:265px;*/ text-align: left; z-index: 100; top: 98px; left: 0; border-bottom: 1px solid #666;}
#dataSearchAR input[type=radio]  {width:16px; height:16px; margin-bottom:2px; vertical-align:middle; margin-right: 10px; border-radius: 0px } 
#dataSearchAR ul { margin-block-start: 2em; margin-block-end: 1em; padding-inline-start: 20px !important }
.search-stepTitle { font-size: 1.5em; font-weight: 700; padding:1rem 0 0 1rem;  text-transform: uppercase;}
.search-step01 {padding:20px; background-color: #839ca9; color:#fff}
.search-step02 {padding:20px 0; background-color: #e3e3e3;justify-content: center !important; }
.search-step03 {padding:20px 0 0; background-color: #f5f5f5 }
.search-step03 > ul > li {min-width: 120px; }
.search-step03 > ul > li:nth-child(odd) { float: left; } /*홀수*/
.search-step03 > ul > li:nth-child(even) {float: left; } /*짝수*/

.search-step02 .search-stepTitle {margin-bottom: 0;}


.map-pcSearch svg { width: 100% !important; margin: 0 auto; padding: 0 10px;  height: /*480px*/ 560px !important; }


.topsearchInput { background-color:#fff; padding:1rem;}
.topsearchInput .container { position: relative;}
.topsearchInput span { padding: 0 3px ; margin-inline-start: 0; margin-bottom: 0 !important; }
.topsearchInput span input {float: left; min-width: 145px; margin: 5px 0;}
.topsearchInput span:first-child { padding: 0 ; font-size: 1.5em; line-height: 2em; font-weight: 500;}
.topsearchInput span:first-child::after { content: 'ㅣ';  float: right; line-height: 1.3em;font-weight: normal;}
.topsearchInput span::after { content: 'ㅣ';  float: right; font-size: 1.5em; line-height: 2em; color:#9b9b9b }
.topsearchInput span:last-child::after { content: '' }
.topsearchInput span:last-child   {  font-size: 1.2em;line-height: 2em;}
.topsearchBtn {display:flex; font-size: 1.5rem; font-weight:600; }
.topsearchBtn i { font-size:2rem; margin-top:2px; margin-left:10px;}
.topsearchInput label {margin-top: .375em; margin-bottom: 0 !important; border: 1px solid #ced4da; background: #eee; padding: .25em .75em; min-width: 145px; border-radius: .25em; letter-spacing: -.1rem;} 


/*메인 헤드라인설명  */
.main-headlineAR {text-align: right; padding:2rem;}
.main-headlineAR > span { display: block; }
.main-headlineAR .headline-title {font-weight: 700; font-size: 2em; color: #000; display: block; margin-bottom:0 !important; padding-bottom: .5em;}
.main-headlineAR > span {display: block; clear: both; font-size: 1.25em; line-height:1.4; font-weight: 400; } 


/*지도 포지션 및 타이틀 */
/*기본*/

.headline-title    { display: block;margin-bottom:0 !important; }
.headline-title span:first-child {font-weight: 700; font-size: 2em; color: #000;}
.headline-title span {display: block; clear: both; font-size: 1em; } 

.headlineInfo      { position: absolute; top: 2.5rem; right:1.5rem; z-index: 8; text-align: right;}
.headline-position {display: block;margin-bottom:0 !important;font-size: 1em;}


.headline-position .step01        {background-color:#344594; border-radius: .25em; font-weight:400;  color:#fff; padding:0 5px; float:right }
.headline-position .step01:hover  {background-color:#ccc;}
.headline-position .step01.active {background:none; color:#000; }


.headline-position .step02         {border-radius: .25em; background-color:#344594; color:#fff;padding:0 5px; float:right}
.headline-position .step02:hover   {background-color:#ccc;  border-radius: .25em;} 
.headline-position .step02.active  {background:none; color:#000;}

.headline-position .step03         {border-radius: .25em; background-color:#344594; color:#fff;padding:0 5px; float:right}
.headline-position .step03:hover   {background-color:#ccc;  border-radius: .25em;} 
.headline-position .step03.active  {background:none; color:#000;}
 
.headline-position span.active::after {content: 'ㅣ ';}


/* 
.headline-position .step01.active a,
.headline-position .step02.active a,
.headline-position .step03.active a {color:#000;}

 */
/*************************************/
.character { position: absolute; /*top:-1rem;*/ top: 0; right:0; z-index: 1; width: 130px; height: 130px;}
.character img {width: 100%;}

.pointdataAR {padding-top:2em; display: inline-block; background: linear-gradient(180deg, #f8f9fc 0%, #f8f9fc 367px,
#e3e7eb 367px, #e3e7eb 100% ) }
.pointdataAR-city {margin-block-start:2em; display: inline-block; background: linear-gradient(180deg, #ffffff 0%,
#ffffff 363px, #e8c6c6 363px, #e8c6c6 100% ) }
.pointdatabox {display: flex; flex-wrap: wrap; padding:0;}

.pointdatabox-Grid {width:53%; padding-left: 10px; text-align:right; position:relative; height:100%; }
.pointdatabox-MAP  {width:45%; margin-block-start:0; position: relative; }
.main-footer       {background-color: #f1f1f1; font-size: 0.9em; overflow: hidden; width: 100%;padding-top:1rem}

/*subpage 지도*/
.pointdatabox-MAP .map svg {height: 560px; width: 648px; padding-top: 2rem;}

/*메인에만사용하는 그리드*/

/*메인페이지 주요지표 로테이션*/
.gyeongnam-issueAR { overflow: hidden; margin: 0 auto ; background-color:#f5f5f5; padding: 3em 0;}
/*.gyeongnam-issueAR .carousel { margin: 1rem auto;}*/
.gyeongnam-issueAR .carousel-item {/*padding: 0 30px;*/ /*background-color:#f5f5f5;*/ line-height: 1.8em; }
.gyeongnam-issueAR .carousel-inner  { overflow: hidden;}
.gyeongnam-issueAR dl {
	float: left; min-height:181px;
    text-align:center; border: 1px solid #b6b6b6;
    background-color: #fff;
    /*border-radius: .3rem;*/ box-shadow: 2px 1px 3px rgb(128 128 128 / 60%);
    /* margin: 4px; */ padding: 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f1f1f1 55%, #f1f1f1 100% );
    border-left: 0;
  }
  
.gyeongnam-issueAR dl:first-child {border-left: 1px solid #b6b6b6;}

.gyeongnam-issueAR > dl dt, dd { margin-bottom:0;}
.gyeongnam-issueAR dl dt.pointdatabox-titleMain {font-size:1em; letter-spacing: -.08em; font-weight:500; color: #4f7190; } 
.gyeongnam-issueAR dl dd { margin-bottom: 0 !important; padding:0}
.gyeongnam-issueAR dl dd.pointdatabox-titleSub {line-height: 1.15em;height:18px; font-size:1em; color:#333; margin-bottom: 0 !important; padding:0 }
.gyeongnam-issueAR dl dd.pointdatabox-total { line-height: 1.3em;height:22px; font-size: 1.3em; font-weight:500; color: #666 !important; } 
.gyeongnam-issueAR dl dd.pointdatabox-description { color: #666; margin-top:15px} 
.gyeongnam-issueAR dl dd.pointdatabox-description span:last-child {font-size:1.30em; display:block; } 

.gyeongnam-issueAR dl dd.datainfo {  position: absolute; color:#333; bottom:.5rem; left:1rem; font-size: .8em; font-weight: 400; line-height: 1.3em;}
.gyeongnam-issueAR .carousel-control-prev, 
.gyeongnam-issueAR .carousel-control-next { width:auto; color: #9b9b9b !important; opacity: 1; }
.gyeongnam-issueAR .carousel-control-prev {left: -30px;}
.gyeongnam-issueAR .carousel-control-next {right: -30px;}

.gyeongnam-issueAR:after {display: block; content: ''; clear: both;}

.maindataAR {min-width:100%; display:flex; flex-flow:row wrap; padding:.5rem 0}
.maindataAR > div {width:50%; display:flex; flex-flow:row wrap; justify-content:space-around;}
.maindataAR .pointGrid-map { width:99%; margin-bottom:5px;}
.maindataAR .pointGrid-map .character {top:2rem; right:2rem; opacity: .75;}
.maindataAR .pointGrid-map svg {padding:.5rem 3rem; height:450px;}
.maindataAR .pointGrid-box {position: relative; width:49%; padding:0; border:0; border-radius:0; /* height:264px; */ text-align: left; margin-bottom:5px; margin-top:0;}
.maindataAR .pointGrid-box a {color:#fff;}
.maindataAR .pointGrid-box a:hober {color:#666;}

.gridboxContent {padding: 1.25em; min-height:223px}
.gridboxContent .gridcontentTitle {/*width:82px; height:82px; line-height: 82px; margin:0 auto .5rem; border-radius: 50%;*/ background-color: #fff; font-weight:500; 
                                   /*font-size:.85em; color:#555; letter-spacing:-0.1rem;*/ font-size: 1em; color: #555; padding: .375em .75em; border-radius: 5em;
                                   margin-bottom: 1em; display: inline-block;}
.gridboxContent .gridcontentTitle:hover {color:#000;}
.gridboxContent .gridcontent { display:block;}                                                      
.gridboxContent .gridcontent .pointdatabox-titleMain {line-height: 1.15em; font-weight: normal; height:18px; font-size:1em; color:#fff !important; margin-bottom: 0 !important; padding:0 }
.gridboxContent .gridcontent .pointdatabox-titleSub  {line-height: 2em; height:22px; font-size:.9em; color:#fff !important; margin-bottom: 0 !important; padding:0 }
.gridboxContent .gridcontent .pointdatabox-total {/*color:#515151 !important;*/ font-size:1.25em !important; font-weight:500; color: #fff !important; }
.gridboxContent .gridcontent .gridcontent-footer {font-size:1em; padding-top:1em}
.gridboxContent .gridcontent .gridcontent-footer span:first-child { display:block; color:#fff;line-height: 1em;}
.gridcontent-footer .point-down, .gridcontent-footer .point-up, .gridcontent-footer .point-equal { color:#fff; font-size:1.125em; font-weight: 500; letter-spacing: normal;}
.gridcontent-footer i { font-size:.85em; }

.maindataAR .character {top: 1.5em; right: 2.5em; width: 130px; height: 130px; }
.maindataAR .character img {width: 100%;}


/*소비박스*/
.box-bg01 {background-color:#91b6e3 !important}
.box-bg01:hover {background-color:#6d9ad1 !important;}
.box-bg02 {background-color:#7da4d3 !important}
.box-bg02:hover {background-color:#5e92d1 !important;}
.box-bg03 {background-color:#bebebe !important;}
.box-bg03:hover {background-color:#919191 !important;}
.box-bg04 {background-color:#cbcbcb !important;}
.box-bg04:hover {background-color:#acacac !important;}
.box-bg05 {background-color:#76cf99 !important}
.box-bg05:hover {background-color:#60b682 !important;}
.box-bg06 {background-color:#6cc37d !important;}
.box-bg06:hover {background-color:#52a874 !important;}
/*지도박스칼라*/
.box-bg07 {background-color:#e0e0e0 !important;}
.box-bg08 {background-color:#86d1ae !important;}
.box-bg08:hover {background-color:#57ba8c !important;}
.box-bg09 {background-color:#fff !important; border:1px solid #444 !important}

.box_blue {background: #68adea !important;}
.box_blue:hover {background: #68adea !important; opacity: .8;}
.box_gray {background: #acacac !important;}
.box_gray:hover {background: #acacac !important; opacity: .8;}
.box_green {background: #7dcdbd !important;}
.box_green:hover {background: #7dcdbd !important; opacity: .8;}

/* 
.box-bg01 {background-color:#f99696 !important;}
.box-bg01:hover {background-color:#ec8e8e !important;}
.box-bg02 {background-color:#f9b996 !important;}
.box-bg02:hover {background-color:#edb08f !important;}
.box-bg03 {background-color:#a0a19f !important;}
.box-bg03:hover {background-color:#919191 !important;}
.box-bg04 {background-color:#68b5c5 !important;}
.box-bg04:hover {background-color:#60aaba !important;}
.box-bg05 {background-color:#a9bdeb !important;}
.box-bg05:hover {background-color:#9db1df !important;}
.box-bg06 {background-color:#5e61d7 !important;}
.box-bg06:hover {background-color:#5456bb !important;}
.box-bg07 {background-color:#a9cceb !important;}
.box-bg08 {background-color:#dab0dc !important;}
.box-bg08:hover {background-color:#cca4ce !important;}
.box-bg09 {background-color:#f3f3f3 !important;}

 */

/*창원시 5개 구분라인 정리*/
.changwon5 > g > a > polygon {stroke-dasharray: 3,3; stroke: #000000; stroke-width: .3 ; font-size: .80rem; }
.changwon5 > g > a > text { font-size: .76rem !important;}
.changwon5-line polygon { stroke:#838383 !important; stroke-width: .6 !important; fill: none !important }
.changwon5-line text { fill: #fff !important;}
.changwon5-line rect { fill: rgb(99 99 99 / 70%);}
/*지도 와이드 아이콘*/
/*.map svg {  width: 100%; min-width: 350px;}  
 .mainMAP .map  svg {width: 100%; min-width: 640px; margin: 0 auto; padding: 0 3rem;  height: auto !important; } */

.map-gyeongnam-icon  { position: absolute; top:0; left:0; border-radius: 5px;
  width: 70px;
  height:70px; color:#fff;
  background-color: #525252;
  transform-origin:top left;
  transition: width 1s, height 1s;
  z-index: 9;
  overflow:hidden;
}
.map-gyeongnam-icon span{ font-size:30px; padding:20px;position: inherit;}
.map-gyeongnam-icon .map { padding: 20px; width:0; height:0; transform-origin:top left;
  transition: width 1s, height 1s;}
.map-gyeongnam-icon .map svg {height:100%; width:100%;}
.map-gyeongnam-icon:hover {width:650px; height: 628px; }
.map-gyeongnam-icon:hover .map {width:100%; height:100%;}
/*.map-gyeongnam-icon:hover span { display: none; }
.map-gyeongnam-icon:hover .map {display: block; } */


/*각메뉴별 주요지표 로테이션*/
.mainissueAR { overflow: hidden; margin: 0 auto ; /*width: 45%; height:150px; position: absolute;  right: -1rem;*/}
.mainissueYear {font-size: 2rem; font-weight: 400;color: #000;text-align: left; border-bottom: 1px solid #cccccc; margin: 0 20px 20px;}
.mainissueYear button {display:inline-block; font-weight:400; text-align:center; vertical-align: bottom; margin-bottom: 10px; margin-left: 10px; border: 1px solid transparent; font-size: 1rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;color: #fff; background-color: #00ac6c; border-color: #00ac6c;}
.mainissueYear button:hover {background-color:#fff; color:#00ac6c}
.mainissueYear button:focus {outline:none;}
.mainissueAR .carousel {width: 100%; margin-right: auto;}
.mainissueAR .carousel-item {min-height:130px;padding: 10px 46px; text-align:left;}
.mainissueAR .carousel-item dl {float:left;width: 45%; min-height: 130px; margin: 0 10px;border-right:1px solid #9b9b9b;}
.mainissueAR .carousel-item dl:last-child {border-right:none;}
.mainissueAR .carousel-item dt, 
.mainissueAR .carousel-item dd {min-height:30px; margin-bottom:0}
.mainissueAR .pointdatabox-titleMain   {font-size:.9rem; font-weight: 400; color: #000; } 
.mainissueAR .pointdatabox-titleSub    {font-size: 1.25rem; color: #454545; line-height: 30px;}
.mainissueAR .pointdatabox-total       {font-size: 1.25rem;  font-weight: 500; color: #000 !important } 
.mainissueAR .pointdatabox-description {font-size: .8rem; letter-spacing:normal  } 
.mainissueAR .pointdatabox-description span { padding-right:.25rem !important;} 
.mainissueAR .pointdatabox-description span i { font-size: 1rem;}
.mainissueAR .pointdatabox-info        {font-size: .8rem;  letter-spacing:normal; color:#000 } 
/*무역 주요지표 환율부분적용*/
.mainissueAR .exchange-rate-titleMain  {font-size:1.35rem; font-weight: 400; color: #000; padding-bottom:.5rem} 
.mainissueAR .exchange-rate-titleSub   {font-size: 1rem; color: #454545;}
.mainissueAR .exchange-rate-info       {font-size: .8rem; padding-top:.25rem }

.mainissueAR .carousel-control-prev, 
.mainissueAR .carousel-control-next { width:auto; color: #9b9b9b !important; opacity: 1; }    

/*각메뉴별 세부지표*/
.subissueAR {display:flex; flex-flow:row wrap; justify-content:space-between; margin-top:20px;}
.pointGrid-box  { border-radius: 4px; vertical-align:top; text-align:center;  border: 1px solid #acacac; background-color: #fff;  display:inline-block; width: 33%;  margin-top:3px;  padding: 12px 5px; min-height: 105px; }
.pointGrid-box .pointdatabox-titleMain   {font-size: .85rem; font-weight: 500; color: #515fa2 !important;} 
.pointGrid-box .pointdatabox-titleSub    {font-size: .85em; color: #000; height: 20px; line-height: 1em }
.pointGrid-box .pointdatabox-total       {/*font-size: 1.4em; font-weight:200;*/ font-size: 1.25em; font-weight: 500; color:#000 !important } 
.pointGrid-box .pointdatabox-description {font-size: .8rem; letter-spacing:normal  } 
.pointGrid-box .pointdatabox-description span:first-child { padding-right:.25rem !important;} 
.pointGrid-box .pointdatabox-description span i { font-size: 1rem;}
.pointGrid-box .pointdatabox-info    {font-size: .8rem;  letter-spacing: -.5px; color: #000 } 
.point-equal {color: #00881a; font-size:1rem;}
.point-up {color: #ff0000; font-size:1rem;}
.point-down {color: #4967c7; font-size:1rem;}
.point-down > i {  transform:rotate(180deg) !important;	
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1);   
    filter: FlipH;
   -ms-filter: "FlipH"  }
.datainfo {bottom:-1.5rem; position: absolute; right: 0.2rem; font-size: .8em;font-weight: 400;}
.datainfo2 {bottom:-3rem; position: absolute; right: 0.2rem; font-size: .8em;font-weight: 400;}

/* 
.pointdatabox-total { font-size: 1.1em; min-height: 32px; color: #555 !important;  } 
.pointdatabox-description { color: #797979 !important; margin-bottom:0 !important;}
.pointdatabox-description span:first-child {font-size: .8rem; padding-right: 1rem; color: #797979 !important;} 
.pointdatabox-description i { font-size: 1rem;}
.pointGrid-box a {  cursor: pointer;  } 
.pointGrid-box:hover{  background-color: #f0f0f0 !important;  } 
.pointGrid-box p { margin-bottom:0 !important;}
.pointGrid-box p:last-child {font-size:.8rem; color:#666;}
.pointdatabox-title { font-size: 1.1em; font-weight: 400; margin-bottom:0 !important; line-height: 1.15em;  color: #333 !important;}
.pointdatabox-title:nth-child(2) { color: #5a86ab !important;font-size: 1em; line-height: 1.15em; }
*/



/*chartSearch*/
.chartSearch {font-size: .9em; margin-bottom: 10px;}

.mainSearch-dark { background-color: #6c757d; color: #fff; }
.mainSearch-light { background-color: #fff; color: #000; }
/* .chartSearch .form-inline { display: flex;} */
.chartSearch select {
  margin-right: 1px;
  min-width:96px; 
  height: 27px;
  padding: 3px 10px;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color:#f1f1f1;
  border:1px solid #c5c5c5
}
.chartSearch button {     display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background-color: #00bb76;
  border: 1px solid transparent;
  padding: 3px 10px;
  font-size: .85rem;
  line-height: 1.1;
  border-radius: 0.25rem;
  height: 27px; 
 }
 .chartSearch.w-100 {border-radius: .25rem; 
 border: 1px solid #cecece;
 border-bottom: none;
 padding: .7rem 1rem;
 background-color: rgba(95, 95, 95, 0.5);
 margin: 8px 0 -8px 0;} 
/*차트영역*/
.chartAR { padding:0 0 20px 0; display: flex; flex-wrap: wrap; align-items: flex-start !important; position: relative; }
.chartAR .item-one {flex:100%; max-width:100%;}
.chartAR .item-two {flex:50%; max-width:50%;}
.chartAR .item-three {flex:33.3%; max-width:33.3%;}
.chartAR > h2, .chartAR > p {flex:100%; color:#505050; margin-bottom:0; padding:0;}

/*--차트내 이동메뉴버튼--*/
.chart-btnmenu .btn {padding: 0.25rem 0.5rem !important;
  font-size: 0.8rem !important;
  color: #6c757d !important;
  background-color:#fff;
  border-color: #6c757d;
}
.chart-btnmenu .btn:hover { background-color: #e0e0e0; }
.chart-btnmenu .btn.active {  color: #fff !important; background-color: #6c757d;}
.chart-btnmenu .btn.active:hover {  background-color: #4a555e;}
/*차트내타이틀*/
.chart-title  {line-height: 1.3em;  display: flex;
margin-top: .5rem;
font-weight: 500;
font-size: 1.3em;
}
.chart-title span  {padding: 0 .5em;  line-height: 1.5em;}
.chart-title i {margin-top: .2em} 
/*차트중간타이틀*/
.chart-subTitle  {border-radius: .25rem; 
    border: 1px solid #cecece;
    border-bottom: none;
    padding: .7rem 1rem;
    background-color: rgb(95 95 95 / 50%);
    margin: 0 0 -8px; color:#fff; font-weight: 400; }

.chartBOX{ margin:8px 0; padding:15px; min-height:130px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem;}
.chart { padding: 1rem;}
.chart-head { display: flex; margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 12px; }
.chart-head > h3 { font-size: 1.1em; color:#000; margin-right: auto; }
.chart-txt { font-size: 0.9em; margin-bottom: 0;}

.chart-iconAR > span {border:1px solid #949494; font-size: 1.2em; } 
.chart-iconAR a { color:#949494}
.chart-iconAR a:hover { color:#000} 
/*차트테이블*/
.table {text-align: center;}
.table thead tr {background-color:#dee2e6; color:#4f6d86;}
.table th {font-weight:500;}
.table th, .table td {padding:0.45rem; font-size: 0.85rem; border-top: 1px solid #dee2e6; }
.table td {border-right: 1px solid #dee2e6;}
.table td:last-child {border-right:0;}
.table tbody tr:last-child td {border-bottom: 3px double #dee2e6;}
/*modal*/
.datamodalAR {min-height: 500px; }
.datamodalAR > .modal-header {border-bottom:0 !important;}
.datamodalAR .modal-header .modal-title {font-size: 1.25rem; color: #000; font-weight: 700;}
/*.datamodalAR .close {color: #fff; text-shadow:none; opacity:1;}*/

.datamodalAR .modal-body {padding-bottom: 2rem; padding-top: 0;}

.dataModal-searchAR {display: flex; background-color: #f2f2f2; border: 1px solid #dfdfdf; padding: 6px; border-radius: 0.25rem;}
.dataModal-searchAR select { min-width:100px;}
.dataModal-info {padding:0; line-height: 1.5rem; margin-bottom: 1rem;}
.dataModal-info > .datainfo {right:1rem; bottom:0.5rem; color:#0071c5;}

.dataModal-info ul li {position: relative; padding-left: 1em;}
.dataModal-info ul li:before {position: absolute; display: block; content: ''; top: 11px; left: .25em; width: 4px; height: 4px; background: #0064af;}


.datamodalAR .nav-tabs .nav-link.active  {color: #0071c5; background-color: #ffffff; border-bottom:0; border-top:2px solid #0064af; font-weight:500;}
.datamodalAR .nav-tabs .nav-link { height:100%; word-break:keep-all; color: #f2f2f2; display: block; padding: 0.3rem; background-color: #0071c5; border-color:#0064af; border-bottom:0;}
.datamodalAR .chartAR { margin-top:6px; padding:0;}
.datamodalAR > .chartAR > .chart {padding:0;}
/*.datamodalAR .tableAR .table thead th { font-weight: normal !important;}*/

.tab-content {background-color: #fff; margin-top: -1px; padding-top: 1rem;}
/*modal 검색 버튼을 위해 임의로 넣은 chartBOX*/
.modalcontent.chartBOX {border:0; padding:0;}
/*modal table*/ /* 기본 테이블과 차별할때 .table앞에 (.tableAR 추가) */ 
.tableAR .table-head {display: flex; margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 12px;}
.tableAR .table-head h3 {font-size: 1.1em; color: #000; margin-right: auto;}
.tableAR .table-body {height:100% !important;}
.tableAR .table-body .table {height:100% !important; /*overflow-y:inherit;*/ word-break: keep-all;}

/*unset*/
.col-lg-4 { -ms-flex: 0 0 33.2511111% !important; flex: 0 0 33.2511111% !important }
.col-lg-6 { -ms-flex: 0 0 49.9% !important; flex: 0 0 49.9% !important;}
.modal-backdrop.show { opacity: 0.8 !important; } 
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
 /* padding-right:0 !important;
  padding-left:0 !important;*/} 




footer  { margin-top:1rem; font-size: 0.9em;}  
*:focus { outline:none; }  


.chartBOX .carousel-indicators {
  padding-bottom: 5px;
  position: unset;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: inherit no;;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: left;
  justify-content: left;
  padding-left: 0;
  margin-right:0 !important;
  margin-left:0 !important;
  list-style: none;
}
.carousel-indicators li {  

    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 30px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: unset;
    cursor: pointer;
    background-color: #5f5f5f;
    background-clip: padding-box;
    /* border-top: 0 !important; */
    /* border-bottom: 0 !important; */
    opacity: .5;
    transition: opacity 0.6s ease;
    border: 1px solid #777;
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: .85em; color:#fff; line-height:30px;    
}

/*메인 경상남도지도 */
.gyeongnam polygon,
.gyeongnam path {fill:#f6f6f6; stroke:#8f8f8f;stroke-width:0.3;}
.gyeongnam a:hover text, .gyeongnam a.active text {fill:#000; stroke:none;  font-weight:500;  transition: 0.3s;} 
.gyeongnam a:hover path, .gyeongnam a.active path {fill:#777; stroke:none; font-color:#fff; transition: 0.3s;} 
.gyeongnam a:hover polygon, .gyeongnam a.active polygon {fill:#cce8f5; stroke:#000;stroke-width:0.5; transition: 0.3s;} 
.gyeongnam text {font-size:.85rem; fill:#363636; font-weight:400;}  
.map-shadow polygon,
.map-shadow path  {fill:#979797  !important; opacity: .6; stroke:#000; stroke-width:0.3;} 
.map-shadow-sea polygon {fill:#5a86ab  !important}    

.gyeongnam2 polygon,
.gyeongnam2 path {fill:#f6f6f6; stroke:#8f8f8f;stroke-width:0.3;}
.gyeongnam2 a {cursor: default;}

.city polygon, 
.city path {fill:#f6f6f6; stroke:#8f8f8f;stroke-width:0.3;}
.city a:hover text, .city a.active text {fill:#000; stroke:none;  font-weight:500;  transition: 0.3s;} 
.city a:hover path, .city a.active path {fill:#cce8f5; stroke:#000;stroke-width:0.5; transition: 0.3s;} 
.city a:hover polygon, .city a.active polygon {fill:#cce8f5; stroke:#000;stroke-width:0.5; transition: 0.3s;} 
.city text {font-size:.85rem; fill:#363636; font-weight:400; cursor: pointer;}  
.city .map-shadow polygon,
.city .map-shadow path { fill: #bababa !important; stroke: #414141;  stroke-width: 0.5; } 
.city .dong-line polygon {fill:#765656  !important} 
.city .dong-line path { fill:#765656  !important} 



.marker { /*fill:#386286 !important; stroke:none;*/ position:absolute;}
.marker .btn:focus, .btn.focus {box-shadow:none;}
.marker:hover { fill:#717175; stroke:none; }
.marker-list {fill:#4c6a97; stroke:#8f8f8f; stroke-width:0; }  
.marker-list text {fill:#fff; font-size: .85em; line-height: 1.15em; font-weight: 300;  font-family: 'NotoSans', 나눔고딕; stroke-width: 0 }

#sd path,
#sd polygon {stroke-width:0.3;} 
#sd a:hover text {fill:#fff; stroke:none; transition: 0.3s;} 
#sd a:hover path {fill:#777; stroke:none; font-color:#fff; transition: 0.3s;} 
#sd a:hover polygon {fill:#777; stroke:none; font-color:#fff; transition: 0.3s;} 
#sd text {font-size:1rem; fill:#636363; font-weight:500; cursor: pointer;}  

#emd path,
#emd polygon {stroke-width:0.3;} 
#emd a:hover text {fill:#fff; stroke:none; transition: 0.3s;} 
#emd a:hover path {fill:#777; stroke:none; font-color:#fff; transition: 0.3s;} 
#emd a:hover polygon {fill:#777; stroke:none; font-color:#fff; transition: 0.3s;} 
#emd text {font-size:.35rem !important; fill:#636363; font-weight:300; cursor: pointer;}  


.noData {  width: 100%; min-height: 250px; 
    background-position: center;
    background-image: url(/images/nodata_BG.gif);
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; font-size: 0.9em;color:#66839b; text-align: center }
  
.chartAR .item-one .noData {  background-image: url(/images/nodata_itemone_BG.gif)  }


/*로딩*/
.loader-body {z-index: 1000;position: fixed; top: 0; width: 100%; height: 100%; background-color: rgb(201 201 201 / 82%); 
             display: flex; align-items: center; justify-content: center;}
.loader { position: relative; width: 75px; height: 100px; }
.loader__bar { position: absolute; bottom: 0; width: 10px; height: 50%; background: #fff; transform-origin: center bottom; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); }
.loader__bar:nth-child(1) { left: 0px; transform: scale(1, 0.2); -webkit-animation: barUp1 4s infinite; animation: barUp1 4s infinite; background-color: #f15a38}
.loader__bar:nth-child(2) { left: 15px; transform: scale(1, 0.4); -webkit-animation: barUp2 4s infinite; animation: barUp2 4s infinite; background-color: #faa61a}
.loader__bar:nth-child(3) { left: 30px; transform: scale(1, 0.6); -webkit-animation: barUp3 4s infinite; animation: barUp3 4s infinite; background-color: #005aab}
.loader__bar:nth-child(4) { left: 45px; transform: scale(1, 0.8); -webkit-animation: barUp4 4s infinite; animation: barUp4 4s infinite; background-color: #00ac6c}
.loader__bar:nth-child(5) { left: 60px; transform: scale(1, 1);   -webkit-animation: barUp5 4s infinite; animation: barUp5 4s infinite; background-color: #888888}
.loader__ball { position: absolute; bottom: 10px; left: 0; width: 10px; height: 10px; background: #fff; border-radius: 50%; -webkit-animation: ball 4s infinite; animation: ball 4s infinite; }
 @-webkit-keyframes ball {
 0% { transform: translate(0, 0);}
 5% { transform: translate(8px, -14px);}
 10% { transform: translate(15px, -10px);}
 17% { transform: translate(23px, -24px);}
 20% { transform: translate(30px, -20px);}
 27% { transform: translate(38px, -34px);}
 30% { transform: translate(45px, -30px);}
 37% { transform: translate(53px, -44px);}
 40% { transform: translate(60px, -40px);}
 50% { transform: translate(60px, 0);}
  57% { transform: translate(53px, -14px);}
 60% { transform: translate(45px, -10px);} 
 67% { transform: translate(37px, -24px);}
 70% { transform: translate(30px, -20px);}
 77% { transform: translate(22px, -34px);}
 80% { transform: translate(15px, -30px);}
 87% { transform: translate(7px, -44px);}
 90% { transform: translate(0, -40px);}
 100% { transform: translate(0, 0);}
}
 @keyframes ball { 
 0%  { transform: translate(0, 0);}
 5%  { transform: translate(8px, -14px);}
 10% { transform: translate(15px, -10px);}
 17% { transform: translate(23px, -24px);}
 20% { transform: translate(30px, -20px);}
 27% { transform: translate(38px, -34px);}
 30% { transform: translate(45px, -30px);}
 37% { transform: translate(53px, -44px);}
 40% { transform: translate(60px, -40px);}
 50% { transform: translate(60px, 0);}
 57% { transform: translate(53px, -14px);}
 60% { transform: translate(45px, -10px);}
 67% { transform: translate(37px, -24px);}
 70% { transform: translate(30px, -20px);}
 77% { transform: translate(22px, -34px);}
 80% { transform: translate(15px, -30px);}
 87% { transform: translate(7px, -44px);}
 90% { transform: translate(0, -40px);}
 100%{ transform: translate(0, 0);}
}
@-webkit-keyframes barUp1 { 
 0% {transform: scale(1, 0.2)}
 40% { transform: scale(1, 0.2);}
 50% { transform: scale(1, 1);}
 90% { transform: scale(1, 1);}
 100% { transform: scale(1, 0.2);}
}
@keyframes barUp1 { 
 0% { transform: scale(1, 0.2);}
 40% { transform: scale(1, 0.2);}
 50% { transform: scale(1, 1);}
 90% { transform: scale(1, 1);}
 100% { transform: scale(1, 0.2);}
}
@-webkit-keyframes barUp2 { 
0% { transform: scale(1, 0.4);}
 40% { transform: scale(1, 0.4);}
 50% { transform: scale(1, 0.8);}
 90% { transform: scale(1, 0.8);}
 100% { transform: scale(1, 0.4);}
}
@keyframes barUp2 { 
 0% { transform: scale(1, 0.4);}
 40% { transform: scale(1, 0.4);}
 50% { transform: scale(1, 0.8);}
 90% { transform: scale(1, 0.8);}
 100% { transform: scale(1, 0.4);}
}
@-webkit-keyframes barUp3 { 
 0% { transform: scale(1, 0.6);}
 100% { transform: scale(1, 0.6);}
}
@keyframes barUp3 { 
 0% { transform: scale(1, 0.6);}
 100% { transform: scale(1, 0.6);}
}
@-webkit-keyframes barUp4 { 
 0% { transform: scale(1, 0.8);}
 40% { transform: scale(1, 0.8);}
 50% { transform: scale(1, 0.4);}
 90% { transform: scale(1, 0.4);}
 100% { transform: scale(1, 0.8);}
}
@keyframes barUp4 { 
 0% { transform: scale(1, 0.8);}
 40% { transform: scale(1, 0.8);}
 50% { transform: scale(1, 0.4);}
 90% { transform: scale(1, 0.4);}
 100% { transform: scale(1, 0.8);}
}
@-webkit-keyframes barUp5 { 
 0% { transform: scale(1, 1);}
 40% { transform: scale(1, 1);}
 50% { transform: scale(1, 0.2);}
 90% { transform: scale(1, 0.2);}
 100% { transform: scale(1, 1);}
}
@keyframes barUp5 { 
 0% { transform: scale(1, 1);}
 40% { transform: scale(1, 1);}
 50% { transform: scale(1, 0.2);}
 90% { transform: scale(1, 0.2);} 
100% { transform: scale(1, 1);}
}

.dataSearch-open {position: relative;}
.descrip_search_txt {position: absolute; left: 0; width: max-content; font-size: .75em; color: rgba(255,255,255,.65); }

.descrip_txt_icon {font-size: 16px !important;}
.descrip_gridbox_txt {font-size: .875em; text-align: right; /*margin-top: 1em;*/ margin-bottom: -.75em;}

.descrip_chart_txt {position: absolute; right: 0; top: 10px;}

.descrip_map_txt {position: absolute; top: 0; right: 1.75em; padding: .15em .5em; background: #fff; border: 1px solid #e0e0e0; font-size: .875em;}

.mainCardWrap {padding: 2em 0;}
.rateVal .material-icons {font-size: 18px; padding-bottom: 2px;}
.gyeongnam-issueAR dl dd.pointdatabox-description span:last-child {font-size: 1.125em; font-weight: 500;}

.box-info {background: url(/images/3515462.jpg) no-repeat left bottom; background-size: /*contain*/ 65%; border: 0 !important; }
.main-headlineAR {padding: 1em;}
.main-headlineAR .headline-title {font-size: 1.5em;}
.headline-title_sub {font-size: 1.25em; font-weight: 500; color: #000; }

.dataModal-searchAR button {background: #4f6d86; height: 36px; color: #fff; border: 1px solid #4f6d86;}
.dataModal-searchAR button:hover {color: #fff;}

.mobile-searchAR-close {position: relative; left: calc(50% - .5em); top: 0; font-size: 2em !important; z-index: 1; color: #fff; cursor: pointer;}
.contact_info {display: inline-block !important; padding: .5em 1em !important; margin-top: .5em; font-size: 1rem !important; font-weight: 700 !important; color: #000; background:rgba(255,255,255,.875) !important; border-radius: 50px; border: 1px solid #000; }

.chart-footer .chart-footer-info {display: block;}

.modal canvas {height: 250px !important;}
.modal .chart-body {min-height: auto; padding-top: 1em;}
.modal .chart {padding: 0;}

.gridcontentDate {float: right; color: #fff; font-size: .875em; margin: .25em 0;}