@charset "utf-8";

/* ======================== 차트 ======================== */
.standard_table_tb td{color:#222}
.standard_table_tb td.red{color:#ff0000}

.section_graph{height: auto !important;}

/* 그래프 */
.graph_box .graph01{
	width: 100%; padding: 30px 0;
	/* background: #efefef; */
	background: #fff;
}
.graph_box .graph01:nth-of-type(2n){
	background: #f5f5f5;
}
.graphWrap > .btn_box{
	display: none;
}
.graph_box .graph01 .graphWrap .graph_contain{
	display: flex;
	justify-content: space-between;
}
/* graph */
.graph_box .graph{width: 60%;height:500px;float: left;display: flex;flex-wrap: wrap;}
.graph_box .graph li{flex: 1 1 30%;height: 250px;border: 1px solid #dedede;margin-right: 2%;text-align: center;}
.graph_box .graph li:nth-child(1), .graph_box .graph li:nth-child(2), .graph_box .graph li:nth-child(3){margin-bottom: 10px;}
.graph_box .graph li:nth-child(3), .graph_box .graph li:nth-child(6){margin-right: 0;}

.graph01 h3{margin:40px 0;}
.graph_box .graph li h3{margin:20px 0 0;font-size: 18px;}
.graph_box .graph li:hover{border: 1px solid #1474f8;transition: ease-in 0.3s;}
.graph_box .graph li:hover h3{color:#1474f8;transition: ease-in 0.3s;}

/* .graph_box .graph01:hover{border: 1px solid #1474f8;transition: ease-in 0.3s;}
.graph_box .graph01:hover h3{color:#1474f8;transition: ease-in 0.3s;} */

.graph_con_box{display: none;}

/*.tab-content {display: none;}*/

.graph_each {
	width: calc(40% - 50px); height: 526px; padding:20px; margin-right: 50px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
}
.graph_main_img_wrap{
	width:100%; 
	height:100%; 
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.graph_box .graph_each .graph_main_img_wrap p{
	display: none;
}
.graph_each_img_wrap{width:100%; height: 100%; margin:0 auto; padding:20px 0; cursor:pointer}
.graph_each .highcharts-title{display: none;}

.section_table{margin-top: 50px !important;height: auto !important;margin-bottom:200px !important;}
.section_table h3{color: #333;}

.graph01 .table_box .btn_box {
	padding: 40px 0; padding-left: 50px; margin-bottom: 18px;
	display: flex;
	align-items: center;
	position: relative;
}
.graph01 .table_box .btn_box:before{
	content: "";
    width: 100px;
    height: 100%;
	background: url(../img/icon_graph_b.png) no-repeat left 6px;
	position: absolute;
    left: 0;
    top: 0;
    opacity: .3;
}
.graph01 .table_box .btn_box h2, .graphWrap > .btn_box h2{
	color: #333;
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
}
.graph01 .table_box .btn_box .moreBtn, .graphWrap > .btn_box .moreBtn{
	padding-right: 26px; margin-left: 20px;
	background: url(../img/icon_double_arrow_b.png) no-repeat right center;
	background-size: 20px 20px;
	color: #333; 
	font-size: 18px;
	font-weight: 500;
	transition: .3s;
}
.graph01 .table_box .btn_box .moreBtn:hover{
	padding-right: 32px;
	color: #1474f8;
}
.graphWrap > .btn_box .moreBtn:hover{
	color: #1474f8;
}

/* 테이블 */
.table_box{
	width: 60%;
	/* width: calc(100% - 650px); */
}
.table_box .type04{
	width: 100%; min-height: 396px; 
	text-align: left;
	position: relative;
}
.table_box .type04 .table_row{
	padding: 10px 20px;	margin-bottom: 15px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: .3s;
	position: relative;
	overflow: hidden;
}
.table_box .type04 .table_row:last-child{
	margin-bottom: 0;
}
.table_box .type04 .table_row:hover{
	background: #fafafa;
	padding-left: 250px;
}
.table_box .type04 .table_row .hoverBox {
	width: 200px; height: 100%;
	background: #1474f8;
	font-size: 16px;
	position: absolute;
	top: 0;
	left: -250px;
	justify-content: center;
	transition: .3s;
}
.table_box .type04 .table_row .hoverBox:after{
	content: "";
	width: 25px; height: 100%;
	display: block;
	border-top: 32px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 32px solid transparent;
    border-left: 25px solid #1474f8;
	position: absolute;
    right: -25px;
    top: 0;
}
.table_box .type04 .table_row:hover .hoverBox{
	left: 0;
}
.table_box .type04 .table_row > div{
  display: flex;
  align-items: center;
}
.table_box .type04 .type04_tb {
	color: #333;
}
.table_box .type04 .tr_left{
	width: calc(100% - 115px);
	transition: .3s;
}
.table_box .type04 .table_row:hover .tr_left{
	/* width: 620px; */
}
.table_box .type04 .tb1{
	min-width: 80px;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	border-radius: 5px;
	font-size: 12px;
	text-align: center;
	line-height: 40px;
	color: #fff;
}
.table_box .type04 .tb1.table_cate_logo{
	background: #eaf4fa;
	color: #333;
	display: flex;
    justify-content: center;
    align-items: center;
}
.table_box .type04 .tb1.table_cate_logo + .tb2{
	
}
.table_box .type04 .tb1.table_cate_logo img{
	width: 20px; height: 20px; margin-right: 5px;
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
	display: block;
}
.table_box .type04 .tb1.table_cate_logo .country{
	width: 36px; height: 20px; margin-right: 5px;
	object-fit: contain;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid #bbb;
	display: block;
}
.table_box .type04 .tb2{
	flex: 1 1 70%;
	width: 700px;
	font-size: 16px;
	font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	transition: .3s;
}
.table_box .type04 .table_row:hover .tb2{
	flex: 1 1 30%;
}
.table_box .type04 .tb2 .delItem{
    padding: 0px 7px;
    background: #ff1818;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    font-weight: normal;
    margin-right: 3px;
}
.table_box .type04 .tb2 .addItem {
	padding-left: 30px;
	background: url(../img/connection.png) no-repeat 10px 3px;
	background-size: 15px 12px;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;    
	display: block;
}
.table_box .type04 .tb2 .addItem span{
	color: #555;
}
.table_box .type04 .table_row:hover .tb2{
	width: 500px;
	font-weight: 500;
}
.table_box .type04 .tb3{
	width: 95px;
	/* flex: 1 1 8%; */
	font-weight: bold;
	font-size: 16px;
}
.table_box .type04 .tb3.red{
	color: #ff1818;
}
.table_box .type04 .tb4{
	margin-right: 0;
	text-align: center;
}
.table_box .type04 .tb4 span{
	font-size: 30px;
	display: block;
}

/* 데이터 없을경우 화면표시 */
.graph_box .no_data{
	display: flex;
}
.graph_box .no_data .graph_each {
	position: relative;
}
.graph_box .no_data .graph_each img{
	width: 100%; height: 100%;
    object-fit: contain;
}
.graph_box .no_data .graph_each p{
	width: 100%;
	color: #333;
	font-size: 24px;
    font-weight: 500;
    text-align: center;
    display: block;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
}
.graph_box .no_data .table_box .moreBtn{
	display: none;
}
.graph_box .no_data .table_box .no_data_txtBox{
	height: 396px; padding: 70px 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	color: #333;
}
.graph_box .no_data .table_box .no_data_txtBox p{
	font-size: 24px;
	font-weight: 500;
}
.graph_box .no_data .table_box .no_data_txtBox p:last-child{
	margin-top: 50px;
	color: #f5f5f5;
	font-size: 86px;
}


.table_box table.type04 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  text-align: left;
  line-height: 1.5;
  border-top: 1px solid #ccc;
  margin : 20px auto;
}
.table_box table.type04 tr{
  border-bottom: 1px solid #ccc;
  display: flex;flex-wrap: wrap;
  padding: 10px 0;
  cursor: pointer;
  transition: .2s;
}
.table_box table.type04 tr:hover{
	background: #fafafa;
}

.table_box table.type04 th {
  flex: 1 1 40px;
  padding: 5px;
  font-size: 12px;
  /* margin-right: 20px; */
  margin: 0 20px;
  text-align: center;
  border-radius: 5px;
  vertical-align: top;
  line-height: 2.3;
  align-items: center;
  height: 40px;
  
}
.table_box table.type04 td {
  padding: 5px;
  vertical-align: top;
}
.table_box table.type04 td:nth-child(2) {
  flex: 1 1 70%;font-weight: 400;
  transition: .2s;
}
.table_box table.type04 tr:hover td:nth-child(2) {
	font-weight: 500;
}
.table_box table.type04 td:nth-child(3) {
  flex: 1 1 10%;
}
.table_box table.type04 td:nth-child(4) {
  flex: 1 1 2%;
  text-align: center;
}

.table_cate_1{background-color: #11388a;color: #fff;}
.table_cate_2{background-color: #ea3b74;color: #fff;}
.table_cate_3{background-color: #f77c22;color: #fff;}
.table_m{display: none;}

/* ======================== 애니메이션 ======================== */
@keyframes hoverRotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
/* ======================== 품목지식맵 ======================== */
.section_map1{
	background: #f4f4f4;
	position: relative;
}
.section_map1 *{color: #333; font-weight: normal; font-size: 16px;}
.section_map1 .map_box{
	padding-top: 50px;
	padding-bottom: 50px;
}
.section_map1 .map_box .title-area {
	margin-bottom: 30px;
}
.section_map1 .map_box .title-area .title-box {
	display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 10px;
}
.section_map1 .map_box .title-area .title-box h1{
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}
.section_map1 .map_box .title-area .title-box h1 + .tooltipS {
    margin-top: 2px;
}
.section_map1 .map_box .title-area .title-box h1 + .tooltipS[data-tooltip]:hover::before{
    top: 16px;
}
.section_map1 .map_box .title-area .title-box h1 + .tooltipS[data-tooltip]:hover::after{
    top: 26px;
}
.section_map1 .map_box .title-area .small-tit{
	font-size: 16px;
	text-align: center;
	color: #555;
	font-weight: normal;
}
.section_map1 .itemMapWrap{
	height: 500px;
	display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 25px;
}
.section_map1 .itemMapWrap > div, .section_map1 .itemMapWrap .itemBox{
	width: calc((100% - 75px) / 4); height: 100%; 
	padding-bottom: 10px;
	background: #fff;
	border: 1px solid;
	border-radius: 10px;
	position: relative;
}
.section_map1 .itemMapWrap .itemDoubleBox{
	padding-bottom: 0;
	margin-right: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}
.section_map1 .itemMapWrap .itemDoubleBox .itemBox{
	width: 100%; height: calc((100% - 25px) / 2);
	margin-right: 0;
}
/* .section_map1 .itemMapWrap > div::before{
	content: "";
	width: 100%; height: 100%;
	background: ;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
} */
.section_map1 .itemMapWrap h2{
	padding: 20px;
	font-size: 21px;
	line-height: 21px;
	font-weight: 700;
}
.section_map1 .itemMapWrap .scrollBox{
	height: calc(100% - 58px);
	border-top: 1px solid #eee;
	overflow-y: auto;
}
.section_map1 .itemMapWrap .scrollBox li{
	padding: 15px 20px;
	border-bottom: 1px solid #eee;
	font-size: 16px;
	line-height: 31px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: .3s;
}
.section_map1 .itemMapWrap .scrollBox li:hover{
	font-weight: bold;
	background: #fafafa;
}
.section_map1 .itemMapWrap .scrollBox li.on{
	font-weight: bold;
}
.section_map1 .itemMapWrap .scrollBox li.noData, .section_map1 .itemMapWrap .scrollBox li.noData:hover{
	background: #fff;
	font-weight: normal;
	color: #333;
}
/* list */
.section_map1 .itemMapWrap .itemMapListBox{
	border-color: #1474f8;
}
.section_map1 .itemMapWrap .itemMapListBox h2{
	color: #1474f8;
	cursor: help;
}
.section_map1 .itemMapWrap .itemMapListBox li.on{
	background: #cce0eb;
}
.section_map1 .itemMapWrap .itemMapListBox li.on:hover{
	background: #1474f8;
	color: #fff;
}
.section_map1 .itemMapWrap .itemMapListBox .scrollBox li{
	padding-left: 45px;
}
.section_map1 .itemMapListBox .scrollBox li::before{
	content: "";
	width: 16px; height: 16px;
	background: url(../img/icon_list_style_2.png) no-repeat left center;
	background-size: contain;
	display: block;
	position: absolute;
	left: 20px;
	top: 22px;
	transition: .3s;
}
.section_map1 .itemMapListBox .scrollBox li.on::before{
	animation: hoverRotate 3s linear infinite;
}
.section_map1 .itemMapListBox .scrollBox li:hover::before{
	animation: hoverRotate 3s linear infinite;
}
/* .section_map1 .itemMapListBox .scrollBox li::before{
	content: "";
	width: 6px; height: 18px;
	background: #1474f8;
	background: linear-gradient(#1474f8, #1d58aa);
	border-radius: 3px;
	display: block;
	position: absolute;
	left: 20px;
	top: 20px;
	transition: .3s;
}
.section_map1 .itemMapListBox .scrollBox li.on:hover::before{
	background: linear-gradient(#92bcf5, #4885d7);
} */
/* cert */
.section_map1 .itemMapWrap .itemCertBox{
	border-color: #f6940d;
}
.section_map1 .itemMapWrap .itemCertBox::after{
	background: #f6940d;
}
.section_map1 .itemMapWrap .itemCertBox h2{
	color: #f6940d;
}
.section_map1 .itemMapWrap .itemCertBox .ikm_category_span{
	padding: 5px 10px; margin-right: 7px;
	background: #ffeceb;
	border-radius: 5px;
	color: #fc3434;
	font-weight: 500;
	line-height: 21px;
	display: inline-block;
}
.section_map1 .itemCertBox li.on{
	background: #eed7b6;
}
.section_map1 .itemCertBox li:hover span:last-child{
	font-weight: 500;
}
.section_map1 .itemCertBox li.on:hover{
	background: #f6940d;
}
.section_map1 .itemCertBox li.on span:last-child{
	font-weight: bold;
}
.section_map1 .itemCertBox li.on:hover span:last-child{
	color: #fff;
}
/* tech */
.section_map1 .itemMapWrap .itemTechBox{
	border-color: #36b170;
}
.section_map1 .itemMapWrap .itemTechBox::after{
	background: #36b170;
}
.section_map1 .itemMapWrap .itemTechBox h2{
	color: #36b170;
}
.section_map1 .itemMapWrap .itemTechBox li.on{
	background: #c5dfd1;
}
.section_map1 .itemMapWrap .itemTechBox li.on:hover{
	background: #36b170;
	color: #fff;
}
/* str */
.section_map1 .itemMapWrap .itemStrBox{
	margin-bottom: 25px;
	border-color: #c46ee9;
}
.section_map1 .itemMapWrap .itemStrBox::after{
	background: #c46ee9;
}
.section_map1 .itemMapWrap .itemStrBox h2{
	color: #c46ee9;
}
.section_map1 .itemMapWrap .itemStrBox li.on{
	background: #c3adcc;
}
.section_map1 .itemMapWrap .itemStrBox li:hover{
	background: #c46ee9; 
	color: #fff;
}
/* ks */
.section_map1 .itemMapWrap .itemKsBox{
	border-color: #f3604e;
}
.section_map1 .itemMapWrap .itemKsBox::after{
	display: none;
}
.section_map1 .itemMapWrap .itemKsBox h2{
	color: #f3604e;
}
.section_map1 .itemMapWrap .itemKsBox li:hover{
	background: #f3604e;
	color: #fff;
}


/* ======================== 연관지식맵 ======================== */
.section_map2{background-color: #eaf4fa;}
.section_map2 .map_box{
	padding-top: 50px;
	padding-bottom: 50px;
}
.section_map2 .map_box h1{
	margin-bottom: 70px;
	font-size: 36px;color: #333;text-align: center; font-weight: bold;
}
.section_map2 .map_box .map_list{
	display: flex;
	justify-content: space-between;
}
.section_map2 .map_box .map_list>li{
	width: 32%;
	padding: 20px 20px; 
	background-color: #fff;
	border: 1px solid #dedede;
	border-top: 5px solid #1474f8;
	color: #000;
	text-align: center; 
	position:relative; 
}
.section_map2 .map_box .map_list>li h3{
	padding: 30px 0;
	color: #333;
	font-size: 24px;
	font-weight: 500;
}
.section_map2 .map_box .map_list>li .map_graph_inner{
	width: 100%;height: 280px;
	margin-bottom: 20px;
	border: 1px solid #dedede;
	background: #fafafa;
	position:relative; 
	overflow: hidden;
	cursor: pointer;
}
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon{
	width: 30px; height: 30px; padding: 2px;
	background: #fff; 
	border: 4px solid #1474f8;
	border-radius: 5px;
	position: absolute;
	right: 30px;
	top: 120px;
	opacity: .5;
	transition: .3s;
	cursor: pointer;
}
.section_map2 .map_box .map_list>li .map_graph_inner:hover + .relMap_icon,
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon:hover{
	opacity: 1;
}
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon span{
	width: 100%; height: 100%;
	display: block;
	position: relative;
}
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon span::before,
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon span::after{
	content: "";
	background: #1474f8;
	border-radius: 2px;
	display: block;
	position: absolute;
	transition: .3s;
}
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon span::before{
	width: 4px; height: 100%;
	top: 0;
	left: 7px;
}
.section_map2 .map_box .map_list>li .map_graph_inner + .relMap_icon span::after{
	width: 100%; height: 4px;
	top: 7px;
	left: 0;
}
.section_map2 .map_box .map_list>li .map_list_Wrap{
	width: 100%;height: 150px;background-color: #eaf4fa;border-radius: 10px;padding: 15px;
}
.section_map2 .map_box .map_list>li .map_list_inner{
	width: 100%;
    height: 100%;
    padding: 0 10px;
    padding-right: 20px;
    overflow-y: auto;
}
.section_map2 .map_box .map_list>li .map_list_inner li{
	padding-left: 24px; margin-bottom: 8px;
	text-align: left;
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	color: #333;
	position: relative;
	cursor:pointer;
	transition: .3s;
}
.section_map2 .map_box .map_list>li .map_list_inner li:last-child{
	margin-bottom: 0;
}
.section_map2 .map_box .map_list>li .map_list_inner li:hover{
	color: #0056b3;
}
.section_map2 .map_box .map_list>li .map_list_inner p{
	font-size: 16px;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.section_map2 .map_box .map_list>li .map_list_inner .CircleOn{
	color: #ff1818;
	font-weight: 500;
}
.section_map2 .map_box .map_list>li .map_list_inner .CircleOn:hover{
	color: #d12121;
}
.section_map2 .map_box .map_list>li .map_list_inner li::before{
	content: "";
	width: 16px; height: 16px;
	background: url(../img/icon_list_style.png) no-repeat center;
	background-size: contain;
	display: block;
	position: absolute;
	left: 0;
	top: 4px; 
	transition: .3s;
}
.section_map2 .map_box .map_list>li .map_list_inner .CircleOn::before{
	animation: hoverRotate 3s linear infinite;
}
.section_map2 .map_box .map_list>li .map_list_inner li:hover::before{	
	animation: hoverRotate 3s linear infinite;
}
/* .section_map2 .map_box .map_list>li .map_list_inner li::before,
.section_map2 .map_box .map_list>li .map_list_inner li::after{
	content: "";
	width: 12px;
	height: 4px;
	background: #1474f8;
	border-radius: 2px;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%); 
	transition: .3s;
} 
.section_map2 .map_box .map_list>li .map_list_inner li.CircleOn::before{
	transform: rotate(45deg);
	top: calc(50% - 3px);
} 
.section_map2 .map_box .map_list>li .map_list_inner li.CircleOn::after{
	transform: rotate(-45deg);
	top: calc(50% + 3px);
}
*/

.section_map1 .itemMapWrap .itemMapBox{
	width: calc(100% - 300px); padding: 0 30px;
	border-left: none;
	display: flex;
	align-items: center;
}


#related_map_wrap {padding-bottom:50px}
.related_map_circle01{
	max-width: 250px;
	background:#033c8b; 
	border-radius: 5px; 
	color:#fff; 
	text-align:center; 
	cursor:pointer;
	position:absolute; 
	left:50%; top:50%; 
	transform:translate(-50%, -50%); 
	transition: .3s;
}
.related_map_circle01 span{
	padding: 5px 15px;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	display: block;
}
.related_map_circle01 p{
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* .related_map_circle01 span{display:inline-block; vertical-align:middle; line-height:20px;width: 60px; text-align: center; word-break: break-all; padding-top: 10px;} */

.related_map_circle01:hover{background:#efefef; color:#033c8b;}

.related_map_circle01 hr{display:inline-block; padding:0; margin:0; position:absolute; width:1px; height:100px; border-left:1px solid #033c8b; transform-origin:0% 100%;; display:none}
.related_map_hr0101 {transform:rotate(-54deg); left:5px; top:-80px;}
.related_map_hr0102 {transform:rotate(58deg); left:60px; top:-75px;}
.related_map_hr0103 {transform:rotate(135deg); left:60px; top:-45px;}

.related_map_circle02_wrap{position:relative}
.related_map_circle02_common{
	max-width: 200px;
	background:#ebf4fb; 
	border:1px solid #d2d6d7; 
	border-radius: 5px; 
	color:#033c8b; 
	font-size: 14px;
	font-weight: 500;
	text-align:center; 
	cursor:pointer;
	position:absolute; 
	transition: .3s;
}
.related_map_circle02_common:hover{border-color:#033c8b}
.related_map_circle02_common span{
	padding: 5px 15px;
	display: block;	
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* .related_map_circle02_common span{display:inline-block; vertical-align:middle; line-height:16px; font-size:11px; width: 55px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; white-space: nowrap; padding: 3px;} */
.related_map_circle0201{left:20px; top:20px;}
.related_map_circle0202{right:20px; top:35px;}
.related_map_circle0203{right:40px; top:170px;}

.related_map_circle03_common{
	max-width: 90px;
	background: #fff;
	font-size:12px; 
	line-height:12px; 
	position:absolute; 
	cursor:pointer;
}
.related_map_circle03_common span{
	display: block;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* .related_map_circle03_common span{display: inline-block; width: 90px; margin-top:-3px; -webkit-line-clamp: 1; word-break: break-all; text-overflow: ellipsis; white-space: nowrap;} */
.related_map_circle0301{left:30px; top:0;}
.related_map_circle0302{left:-50px; top:140px;}
.related_map_circle0303{left:-170px; top:50px;}

.related_map_hr02{display:inline-block; padding:0; margin:0; position:absolute; width:1px; border-left:1px solid #033c8b; transform-origin:0% 100%;}
.related_map_hr0201 {height:25px; left:58px; top:-5px; transform:rotate(59deg);}
.related_map_hr0202 {height:85px; left:20px; top:-29px; transform:rotate(190deg);}
.related_map_hr0203 {height:28px; left:2px; top:13px; transform:rotate(243deg);}

.circle_position01{right:150px; top:180px;}
.circle_position02{left:-55px; top:-80px;}
.circle_position03{left:215px; top:110px;}

.deg01{transform:rotate(195deg); height:30px !important; left:25px; top:35px;}
.deg02{transform:rotate(166deg); height:70px !important; left:5px; top:-140px;}
.deg03{transform:rotate(99deg); height:30px !important; left:65px; top:10px;}

/* 연관지식맵 위치 지정 1 */
.rmc_position121 {left:20px; top:40px;}
.rmc_position122 {right:20px; top:45px;}
.rmc_position123 {right:50px; bottom:50px;}

.rmc_position1311 {left:90px; top:10px;}
.rmc_position1312 {left:10px; top:100px;}

.rmc_position1321 {right:80px; top:100px;}
.rmc_position1322 {right:30px; top:10px;}

.rmc_position1331 {right:30px; bottom:10px;}
.rmc_position1332 {right:200px; bottom:10px;}

/* 연관지식맵 위치 지정 2 */
.rmc_position221 {left:20px; top:50px;}
.rmc_position222 {left:40px; bottom:45px;}
.rmc_position223 {right:40px; bottom:60px;}

.rmc_position2311 {left:80px; top:15px;}
.rmc_position2312 {left:10px; top:120px;}

.rmc_position2321 {left:90px; bottom:10px;}
.rmc_position2322 {left:20px; bottom:20px;}

.rmc_position2331 {right:90px; top:45px;}
.rmc_position2332 {right:20px; top:85px;}

/* 연관지식맵 위치 지정 3 */
.rmc_position321 {left:30px; top:45px;}
.rmc_position322 {right:20px; top:35px;}
.rmc_position323 {right:90px; bottom:30px;}

.rmc_position3311 {left:80px; top:10px;}
.rmc_position3312 {left:10px; top:120px;}

.rmc_position3321 {right:90px; top:10px;}
.rmc_position3322 {right:30px; top:140px;}

.rmc_position3331 {right:30px; bottom:5px;}
.rmc_position3332 {right:160px; bottom:5px;}

/* 연관지식맵 팝업 */
.map_popup{
	width: 100%; height: 100%;
	position: fixed;
	left: 0;
	bottom: -100%;
	z-index: 99999999;
	/* display: none; */
}
.map_popup .mpWrap{
	width: 100%; height: 100%; padding: 20px;
	background: rgba(52, 52, 52, .5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.map_popup .mpBox{
	width: 100%; max-width: 1200px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(52, 52, 52, .3);
	overflow: hidden;
}
/* 상단 타이틀 */
.map_popup .mpTitle{
	padding: 20px;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.map_popup .mpTitle h3{
	color: #333;
	font-size: 21px;
	font-weight: bold;
}
.map_popup .mpTitle button{
	width: 30px; height: 30px;
	position: relative;
	transition: .5s;
}
.map_popup .mpTitle button span{
	width: 30px; height: 4px;
	background: #333;
	border-radius: 2px;
	display: block;
	position: absolute;
	left: 0;
	top: 14px;
	transition: .2s;
}
.map_popup .mpTitle button span:nth-of-type(1){
	transform: rotate(45deg);
}
.map_popup .mpTitle button span:nth-of-type(2){
	transform: rotate(-45deg);
}
.map_popup .mpTitle button:hover{
	transform: rotate(90deg);
}
.map_popup .mpTitle button:hover span{
	background: #1474f8;
}
/* 하단 컨텐츠 */
.map_popup .mpContent {
	height: 70vh; min-height: 500px; max-height: 100vh;
	background: #f3f3f3;
	overflow: hidden;
}
#relatedMap{
	width: 100%; height: 100%;
	overflow: hidden;
}
#relateMapWrap{
	width: 150%; height: 150%;
	margin-left: -250px;
	margin-top: -150px;
	position: relative;
	overflow: hidden;
}
#relateMapWrap svg{
	width: 130%; 
	height: 130%;
}
#debug1 {
	display:block;
}
.js-mindmap-active .node {
  position:absolute;
  top:0;
  left:0;
  font-size:11px;
  color:#fff;
  /* opacity:0.9; */
  padding:0 7px;
  cursor:pointer;
  z-index:100;
  list-style:none;
  font-weight: 400;
}
.js-mindmap-active a.node {
	min-width: 100px; max-width: 150px;
	padding: 10px 15px;
	background: #ebf4fb;
	border: 1px solid #83b3f5;
	border-radius: 7px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	text-align:center;
	text-overflow: hidden;
    overflow: hidden;
    outline: none;
}
.js-mindmap-active a.node.active {
	background: #033c8b;
	border: 1px solid #033c8b;
	color: #fff;
	font-weight: 500;
}
.js-mindmap-active a.node.activeparent {
	background:#223747;
	border: 1px solid #223747;
	color: #fff;
}
.ctItem {
	max-height: 70px; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	display: -webkit-box; 
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical; 
	white-space: normal;
}

/* ============================================= */
/* tablet */
/* max-width: 1060px; */
@media screen and (max-width:1060px) {

	
	.graphWrap > .btn_box {
		padding: 0 10px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.graphWrap > .btn_box h2 {
		font-size: 24px;
		line-height: 24px;
	}
	.graphWrap > .btn_box .moreBtn {
		font-size: 16px;
		line-height: 16px;
	}
	.graphWrap .graph_contain{
		border: 1px solid #eee;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
	}
	.graph_each{
		width: 250px;
		height: auto;
		margin-right: 0;
		border: none;
		border-right: 1px solid #eee;
		border-radius: 0;
	}
	.table_box{
		width: calc(100% - 250px);
	}
	.graph01 .table_box .btn_box {
		display: none;
	}
	.table_box .type04{
		min-height: 260px;
	}
	.table_box .type04 .table_row{
		margin-bottom: 0;
		border: none;
		border-bottom: 1px solid #eee;
		border-radius: 0;
	}
	.table_box .type04 .table_row:nth-of-type(5){
		border-bottom: none;
	}
	.table_box .type04 .table_row:hover{
		padding-left: 20px;
	}
	.table_box .type04 .table_row .hoverBox{
		display: none;
	}
	.table_box .type04 .table_row .tr_left {
		width: 100%;
		align-items: flex-start;
    	flex-direction: column;
	}
	.table_box .type04 .tb1{
		min-width: auto;
		height: 30px;
		margin-bottom: 10px;
		line-height: 30px;
	}
	.table_box .type04 .tb2{
		width: 100%;
	}
	.table_box .type04 .table_row:hover .tb2{
		width: 100%;
	}
	.table_box .type04 .tb2 .addItem {
		margin-top: 5px;
	}
	.table_box .type04 .table_row .tr_right {
		position: absolute;
		right: 20px;
		top: 10px;
	}
	.table_box .type04 .tb3 {
		text-align: right;
		line-height: 30px;
	}
	/* no-data */
	.graph_box .no_data .graph_each p{
		font-size: 18px;
	}
	.graph_box .no_data .table_box .no_data_txtBox{
		height: auto;
		padding: 40px 20px;
		border: none;
	}
	.graph_box .no_data .table_box .no_data_txtBox p{
		font-size: 18px;
	}
	.graph_box .no_data .table_box .no_data_txtBox p:last-child{
		font-size: 60px;
		margin-top: 20px;
	}
	
	/* 품목지식맵 */
	.section_map1 .map_box .title-area .title-box h1{
		font-size: 32px;
	}
	.section_map1 .itemMapWrap{
		height: 700px;
		flex-wrap: wrap;
	}
	.section_map1 .itemMapWrap > div, .section_map1 .itemMapWrap .itemBox{
		width: calc((100% - 25px) / 2);
		height: calc((100% - 25px) / 2);
	}
	.section_map1 .itemMapWrap h2{
		padding: 18px 15px;
		font-size: 18px;
		line-height: 18px;
	}
	.section_map1 .itemMapWrap .scrollBox li{
		padding: 10px 15px;
		font-size: 14px;
	}
	.section_map1 *{
		font-size: 14px;
	}
	
	/* 표준지식맵 */
	.section_map2 .map_box h1{
		margin-bottom: 30px;
		font-size: 32px;
	}
	.section_map2 .map_box .map_list{
	    flex-direction: column;
	    gap: 20px;
	}
	.section_map2 .map_box .map_list>li{
		width: 100%;
	}
	.section_map2 .map_box .map_list>li h3{
		padding: 0 0 20px;
		font-size: 21px;
	}
	
}

/* ============================================= */
/* mobile 가로 */
/* max-width: 768px; */
@media screen and (max-width:768px) {
	
	.graphWrap .graph_contain{
		flex-direction: column;
    	align-items: center;
	}
	.graph_each{
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #eee;
	}
	.graph_main_img_wrap{
		max-height: 250px;
	}
	.graph_main_img_wrap img{
		display: block;
	    height: 100%;
	    margin: 0 auto;
	    max-width: 250px;
	}
	.table_box{
		width: 100%;
	}
	
	/* 품목지식맵 */
	.section_map1 .map_box .title-area .title-box h1{
		font-size: 28px;
	}
	.section_map1 .itemMapWrap{
		height: auto;
	}
	.section_map1 .itemMapWrap > div, .section_map1 .itemMapWrap .itemBox{
		width: 100%;
		height: 200px;
	}
	.section_map1 .itemMapWrap .itemDoubleBox{
		height: auto;
	}
	.section_map1 .itemMapWrap .itemDoubleBox .itemBox{
		height: 200px;
	}
	.section_map1 .itemMapWrap h2{
		font-size: 16px;
		line-height: 16px;
	}
	
	/* 표준지식맵 */
	.section_map2 .map_box h1{
		font-size: 28px;
	}
	
}

/* ============================================= */
/* mobile 세로 */
/* max-width: 480px; */
@media screen and (max-width:480px) {

	
	
}