.rMateH5__Chart{
	/******************************************************
	 *
	 *			rMateH5 Global
	 *
	 *****************************************************/
	
	 .rMateH5__Root{
		color:#000000;
		font-size:11px;
		font-style:normal;
		line-height:normal;
		font-weight:normal;
		font-variant:normal;
		font-stretch:normal;
		text-decoration:none;
		font-family:inherit;
	
		box-sizing : border-box;
		-moz-box-sizing : border-box;
		-webkit-box-sizing : border-box;
	
		width:0px;
		height:0px;
	}
	
	.rMateH5__Root *{
		box-sizing : border-box;
		-moz-box-sizing : border-box;
		-webkit-box-sizing : border-box;
	
		/* 모바일에서 꾹 누르고 있을 경우 발생하는 회색 박스 삭제 */
		-webkit-tap-highlight-color : rgba(0, 0, 0, 0);
	}
	
	.rMateH5__Main div, .rMateH5__Main span, .rMateH5__Main canvas, .rMateH5__PopUp{
		position:absolute;
	}
	
	.rMateH5__UnAvailableComponent > div{
		width:90%;
		height:90%;
		font-size:15px;
		border:1px solid #ccc;
		-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
	}
	
	/******************************************************
	 *
	 *			rMateChart
	 *
	 *****************************************************/
	
	.rMateH5__rMateChart, .rMateH5__TrialMarkBox{
		color:#777777;
		cursor:default;
	}
	
	.rMateH5__rMateChart .center{
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		position:absolute;
	}
	
	/******************************************************
	 *
	 *			Chart Common
	 *
	 *****************************************************/
	
	.rMateH5__Main{
		/* html요소가 드래그 되거나 더블 클릭 등 셀렉트 되었다고 판단 시 나오는 파란 박스 삭제 */
		user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
	}
	
	.rMateH5__Main canvas, .rMateH5__Main .pen{
		pointer-events:none;
	}
	
	.rMateH5__rMateChart .cp{
		cursor:pointer;
	}
	
	/******************************************************
	 *
	 *			Preloader
	 *
	 *****************************************************/
	
	.rMateH5__Preloader{
		top:0px;
		left:0px;
		z-index:2;
		width:100%;
		height:100%;
		opacity:0.7;
		background:url("./loader.gif") 50% 50% no-repeat #FFF;
	}
	
	/******************************************************
	 *
	 *			ContextMenu
	 *
	 *****************************************************/
	
	.rMateH5__ContextMenu {
		padding : 4px;
		font-size:12px;
		border: #eee solid 1px;
		background-color : #fff;
		color : #999;
		text-align : center;
	
		-ms-user-select : none;
		-moz-user-select : none;
		-webkit-user-select : none;
		user-select : none;
	
		-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
	}
	
	.rMateH5__ContextMenu span{
		cursor:pointer;
		position:relative;
		padding:4px 8px;
		white-space:nowrap;
		background-color:#fff;
		transition:background-color 0.2s;
	}
	
	.rMateH5__ContextMenu span:hover{
		background-color:#eee !important;
	}
	
	.rMateH5__ContextMenu span.disabled{
		color:#cecece;
	}
	
	.rMateH5__ContextMenu hr {
		border:solid 0.5px #ccc;
		margin:4px 1px;
	}
	
	/******************************************************
	 *
	 *			ScrollBar
	 *
	 *****************************************************/
	
	.rMateH5__ScrollBar {
		background-color:#fff;
	}
	
	.rMateH5__HScrollTrack, .rMateH5__VScrollTrack {
		border:1px solid #e6e6e6;
	}
	
	.rMateH5__HScrollThumb, .rMateH5__VScrollThumb {
		cursor:pointer;
		background-color:#e6e6e6;
		transition:background-color 0.2s;
	}
	
	.rMateH5__HScrollThumb:hover, .rMateH5__VScrollThumb:hover{
		background-color:#888888;
	}
	
	.rMateH5__HScrollThumbHeader{
	}
	
	.rMateH5__HScrollUpArrow {
		border:1px solid #e6e6e6;
		cursor:pointer;
		background:url("./scroll_left_arrow.png") no-repeat 50% 50%;
	}
	
	.rMateH5__HScrollDownArrow {
		border:1px solid #e6e6e6;
		cursor:pointer;
		background:url("./scroll_right_arrow.png") no-repeat 50% 50%;
	}
	
	.rMateH5__VScrollThumbHeader{
	}
	
	.rMateH5__VScrollUpArrow {
		border:1px solid #e6e6e6;
		border-right:none;
		cursor:pointer;
		background:url("./scroll_up_arrow.png") no-repeat 50% 50%;
	}
	
	.rMateH5__VScrollDownArrow {
		border:1px solid #e6e6e6;
		border-right:none;
		cursor:pointer;
		background:url("./scroll_down_arrow.png") no-repeat 50% 50%;
	}
	
	/******************************************************
	 *
	 *			SymboldDiv
	 *
	 *****************************************************/
	
	 .rMateH5__SymbolDiv{
		cursor:pointer;
		text-align:center;
	 }
	
	 /******************************************************
	 *
	 *			DataEditor
	 *
	 *****************************************************/
	
	.rMateH5__DataEditor{
		overflow-y:hidden;
		overflow-x:auto;
	}
	
	.rMateH5__DataEditor table{
		height:100%;
		border:solid 1px #5a6477;
		text-decoration:none;
		font-style:normal;
		font-weight:normal;
		font-size:11px;
		text-align:center;
		cursor:default;
	}
	
	/* default th */
	.rMateH5__DataEditor th{
		color:#ffffff;
		font-weight:bold;
		font-size:11px;
		letter-spacing:0;
		text-align:center;
		height:22px;
		padding:2px 4px;
		background:-ms-linear-gradient(270deg, #737d8f 20%, #737d8f 100%);
		background:-moz-linear-gradient(270deg, #737d8f 20%, #737d8f 100%);
		background:-o-linear-gradient(270deg, #737d8f 20%, #737d8f 100%);
		background:-webkit-linear-gradient(270deg, #737d8f 20%, #737d8f 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff737d8f', endColorstr='#ff737d8f');
	}
	
	.rMateH5__DataEditor th.column{
		border-right:solid 1px #5a6477;
	}
	
	.rMateH5__DataEditor th.row{
		border-bottom:solid 1px #5a6477;
	}
	
	.rMateH5__DataEditor td{
		padding:2px 4px;
	}
	
	.rMateH5__DataEditor td.column{
		border-right:solid 1px #5a6477;
	}
	
	.rMateH5__DataEditor td.row{
		border-bottom:solid 1px #5a6477;
	}
	
	.rMateH5__DataEditor td.oddRow{
		background-color:#EFEEEE;
	}
	
	.rMateH5__DataEditor td.evenRow{
		background-color:#FFFFFF;
	}
	
	.rMateH5__DataEditor td:hover{
		background-color:#E3FFD6;
	}
	
	.rMateH5__DataEditor td:focus{
		background-color:#D1EBB4;
		color:#ff0000;
	}
	
	.rMateH5__CloseButton{
		background:url("./close_btn.png") no-repeat;
		cursor:pointer;
		position:absolute;
		width:13px;
		height:13px;
	}
	
	.rMateH5__CloseButton:hover{
		background:url("./hover_close_btn.png") no-repeat;
	}
	
	 /******************************************************
	 *
	 *			AxisLineLabel
	 *
	 *****************************************************/
	
	 .rMateH5__AxisLineLabel{
		position:absolute;
		background-color:#fff;
	 }
	
	/******************************************************
	 *
	 *			DrillDownMenu
	 *
	 *****************************************************/
	
	 .rMateH5__DrillDownMenu{
		left:0px;
		top:0px;
		position:absolute;
		text-align:center;
	 }
	
	 .rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton,
	 .rMateH5__DrillDownMenu > .rMateH5__DrillDownFirstButton{
		position:relative;
		min-width:83px;
		min-height:29px;
		text-align:center;
		color:#666;
		background-color:rgba(255, 255, 255, 0.8);
		transition:box-shadow 0.2s;
		cursor:pointer;
		float:left;
		margin-right:8px;
		padding:8px;
	
		-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
		-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
		box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	 }
	
	.rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton:hover,
	.rMateH5__DrillDownMenu > .rMateH5__DrillDownFirstButton:hover{
		-webkit-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
		-moz-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
		box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
	 }
	
	/******************************************************
	 *
	 *			History
	 *
	 *****************************************************/
	
	.rMateH5__ChartRangeSelector{
		pointer-events:auto;
	}
	
	.rMateH5__ChartRangeSelector_LeftThumb, .rMateH5__ChartRangeSelector_RightThumb{
		width:10px;
		height:100%;
		cursor:col-resize;
		border-bottom:solid 1px #b5b5b7;
		background:url("./selector.png") no-repeat 50% 50%;
		background-color:rgba(236, 240, 241, 0.6);
	}
	
	.rMateH5__ChartRangeSelector_Left, .rMateH5__ChartRangeSelector_Right{
		border:solid 1px #eee;
		border-bottom:solid 1px #b5b5b7;
		background-color:rgba(236, 240, 241, 0.6);
	}
	
	.rMateH5__ChartRangeSelector_Center{
		cursor:pointer;
		background-color:rgba(255, 255, 255, 0);
	}
	
	/******************************************************
	 *
	 *			SlideChart
	 *
	 *****************************************************/
	
	.rMateH5__SlideController{
	}
	
	.rMateH5__PrevCanvas, .rMateH5__NextCanvas{
		position:absolute;
		z-index:1;
	}
	
	/* 슬라이드 이전 버튼 */
	.rMateH5__SlidePrevButton{
		background:url("./slide_left.png") no-repeat 50% 50%;
	}
	
	/* 슬라이드 다음 버튼 */
	.rMateH5__SlideNextButton{
		background:url("./slide_right.png") no-repeat 50% 50%;
	}
	
	.rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
		width:20px;
		height:20px;
	}
	
	/* 슬라이드 버튼 */
	.rMateH5__SlideButton{
		width:15px;
		height:15px;
		background:url("./slide_button.png") no-repeat 50% 50%;
	}
	
	/* 선택된 슬라이드의 버튼 */
	.rMateH5__SlideActiveButton{
		background:url("./slide_active_button.png") no-repeat 50% 50%;
	}
	
	.rMateH5__SlideButton, .rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
		cursor:pointer;
		position:absolute;
	}
	
	/******************************************************
	 *
	 *			Slider
	 *
	 *****************************************************/
	
	.rMateH5__Slider, .rMateH5__HSlider, .rMateH5__VSlider {
		position : absolute;
		cursor : default;
		font-size : 11px;
	
		-ms-user-select : none;
		-moz-user-select : none;
		-webkit-user-select : none;
		user-select : none;
	}
	.rMateH5__Slider_Track {
		width : 200px;
		height : 4px;
		border-width : 1px;
		border-style : inset;
		border-color : #DDDDDD;
		position : absolute;
	
		-ms-user-select : none;
		-moz-user-select : none;
		-webkit-user-select : none;
		user-select : none;
	}
	.rMateH5__Slider_HighlightTrack {
		width : 1px;
		height : 2px;
		border-width : 1px;
		border-style : inset;
		border-color : #FF0000;
		position : absolute;
	}
	.rMateH5__Slider_TrackHitArea {
		position : absolute;
	}
	
	.rMateH5__Slider_Ticks {
		position : absolute;
	}
	.rMateH5__Slider_Tick {
		position : absolute;
		border-width : 1px;
		border-left-style : solid;
	}
	.rMateH5__Slider_Labels .rMateH5__Label {
		position : absolute;
	
		-ms-user-select : none;
		-moz-user-select : none;
		-webkit-user-select : none;
		user-select : none;
	}
	.rMateH5__SliderThumb {
		display : inline-block;
		position : absolute;
		width : 16px;
		height : 16px;
		background:#f5f5f5;
		background:linear-gradient(rgb(255, 255, 255), rgb(213, 213, 213));
		border:solid 1px rgb(200, 200, 200);
		border-radius : 12px;
		outline : none;
	
		-ms-user-select : none;
		-moz-user-select : none;
		-webkit-user-select : none;
		user-select : none;
	}
	
	/******************************************************
	 *
	 *			MotionController
	 *
	 *****************************************************/
	
	.rMateH5__MotionController{
		height:33px;
		padding:4px 4px 4px 19px;
		border:solid 1px #dbdbdb;
		border-radius:3px;
		background-color:#f5f5f5;
	}
	
	.rMateH5__PlayButton{
		position:absolute;
		width:11px;
		height:13px;
		border-style:none;
		cursor:pointer;
		text-align:center;
		padding-top:5px;
		background:url(./motion_play_button.png) no-repeat;
		background-position-x:50%;
	}
	
	.motion_pause{
		background-position-y:100%;
	}
	
	.rMateH5__Pause{
		background:url("./loader.gif") no-repeat 50% 50%;
	}
	
	.rMateH5__MotionController .rMateH5__HSlider{
		height:14px;
		position:absolute;
		font-size:1px;
		cursor:pointer;
	}
	
	.rMateH5__MotionController .rMateH5__Slider_Track{
		border-top:solid 2px #cecece;
		border-bottom:solid 2px #e5e5e5;
		background-color:#fff;
		height:10px;
		border-radius:6px;
	}
	
	.rMateH5__MotionController .rMateH5__Slider_HighlightTrack{
		border:none;
		height:8px;
		border-radius:6px;
		border-top:solid 1px #ff9600;
		border-bottom:solid 1px #fba72d;
		background:url(./background_highlight_track.png);
	}
	
	.rMateH5__MotionController .rMateH5__SliderThumb{
		position:absolute;
	}
	
	/******************************************************
	 *
	 *			Caption, SubCaption
	 *
	 *****************************************************/
	
	.rMateH5__Caption{
		font-size : 14px;
		color : #333333;
		text-align : center;
	}
	
	.rMateH5__SubCaption{
		font-size : 11px;
		color : #999999;
		text-align : center;
	}
	
	
	/******************************************************
	 *
	 *			Axis2DRenderer
	 *
	 *****************************************************/
	
	.rMateH5__Axis2DRenderer{
	}
	
	.rMateH5__Axis2DRenderer.horizontal{
		text-align:center;
	}
	
	
	/******************************************************
	 *
	 *			DataTip, AxisDataTip
	 *
	 *****************************************************/
	
	.rMateH5__DataTip{
		opacity:0;
		color:#888;
		font-size:12px;
		font-style:normal;
		padding:4px 10px;
		cursor:default;
		white-space:nowrap;
		border:solid 1px #e9e9e9;
		border-radius:4px;
		background-color:rgba(255, 255, 255, 0.9);
		z-index:1;
	
		transition:left 0.2s, top 0.2s, opacity 0.5s, border 0.5s;
		-webkit-transition:left 0.2s, top 0.2s, opacity 0.5s, border 0.5s;
		transition-timing-function:ease-out;
		-webkit-transition-timing-function:ease-out;
	}
	
	.rMateH5__DataTip.axis{
		color:#fff;
		background-color:rgba(119, 119, 119, 0.9);
		transition:left 0.1s, top 0.1s, opacity 0.5s, border 0.5s;
		-webkit-transition:left 0.1s, top 0.1s, opacity 0.5s, border 0.5s;
	}
	
	.rMateH5__DataTip.delay{
		transition-delay:0.5s;
	}
	
	.rMateH5__DataTip.show{
		opacity:1;
	}
	
	.rMateH5__DataTip.hide{
		opacity:0;
	}
	
	.rMateH5__DataTip.mouse{
		transition:opacity 0.5s, border 0.5s;
		-webkit-transition:opacity 0.5s, border 0.5s;
		transition-timing-function:ease-out;
		-webkit-transition-timing-function:ease-out;
	}
	
	.rMateH5__DataTip.transition, .rMateH5__AxisDataTip.transition{
	}
	
	.rMateH5__DataTip span{
		position:relative;
	}
	
	.rMateH5__DataTipMarker{
		float:left;
		width:9px;
		height:9px;
		margin-top:3px;
		border:1px solid #ffffff;
	}
	
	/******************************************************
	 *
	 *			RangeSelector
	 *
	 *****************************************************/
	
	 .rMateH5__RangeSelector{
		position:absolute;
		border:solid 1px rgb(27, 161, 226);
		background-color:rgba(27, 161, 226, 0.5);
	 }
	
	
	/******************************************************
	 *
	 *			Legend
	 *
	 *****************************************************/
	
	.rMateH5__Legend, .rMateH5__SubLegend{
		color:#888;
		border:1px solid #e9e9e9;
		background-color:#ffffff;
		cursor:default;
	}
	
	.rMateH5__Legend .rMateH5__ContentPane, .rMateH5__SubLegend .rMateH5__ContentPane{
		padding:5px;
	}
	
	.rMateH5__LegendItem, .rMateH5__CheckableLegendItem{
		padding:0;
		border:0px none;
		background-color:rgba(255, 255, 255, 0);
		white-space:nowrap;
	}
	
	.rMateH5__UnChecked{
		color:#ccc;
	}
	
	.rMateH5__UnFocused{
		opacity:0.2;
	}
	
	/******************************************************
	 *
	 *			ColorRangeLegend
	 *
	 *****************************************************/
	
	/* ColorRangeLegend */
	.rMateH5__ColorRangeLegend{
		position:absolute;
		overflow:hidden;
		font-size:11px;
		color:#555555;
		cursor:default;
	}
	
	/* ColorRangeLegend - Label */
	.rMateH5__ColorRangeLegend_Label{
		position:absolute;
	}
	
	/* ColorRangeLegend - Horizontal Arrow */
	.rMateH5__ColorRangeLegend_HArrow{
		width:5px;
		height:5px;
		border-top:5px solid #555555;
		border-left:2.5px solid transparent;
		border-right:2.5px solid transparent;
		border-bottom:5px solid transparent;
		position:absolute;
		box-sizing:border-box;
	}
	
	/* ColorRangeLegend - Vertical Arrow */
	.rMateH5__ColorRangeLegend_VArrow{
		width:5px;
		height:5px;
		border-top:2.5px solid transparent;
		border-left:5px solid transparent;
		border-right:5px solid #555555;
		border-bottom:2.5px solid transparent;
		position:absolute;
		box-sizing:border-box;
	}
	
	/*********************************************************
	
		Holder
	
	 *********************************************************/
	
	.rMateH5__BackgroundElementHolder,
	.rMateH5__AnnotationElementHolder,
	.rMateH5__CanvasElementHolder,
	.rMateH5__SeriesHolder{
		width:100%;
		height:100%;
	}
	
	/*********************************************************
	
		BackgroundElementHolder, AnnotationElemenetHolder
	
	 *********************************************************/
	
	.rMateH5__BackgroundElementHolder{
		pointer-events:none;
	}
	
	/*********************************************************
	
		CanvasLabel
	
	 *********************************************************/
	
	 .rMateH5__CanvasLabel{
		pointer-events:auto;
	 }
	
	/*********************************************************
	
		SeriesHolder
	
	 *********************************************************/
	
	.rMateH5__SeriesHolder *{
		text-align:center;
	}
	
	/*********************************************************
	
		ColumnSet, BarSet, AreaSet
	
	 *********************************************************/
	
	/*.rMateH5__ColumnSet > div, .rMateH5__BarSet > div, .rMateH5__AreaSet > div, .rMateH5__Column .rMateH5__WindRoseSet > div{*/
	
	.rMateH5__StackedSeries > div{
		width:100%;
		height:100%;
	}
	
	/*********************************************************
	
		WindRoseChart
	
	 *********************************************************/
	
	 .rMateH5__WindRoseChart{
		padding-top:20px;
		padding-bottom:20px;
	 }
	
	/*********************************************************
	
		CrossRangeZoomer
	
	 *********************************************************/
	 
	.rMateH5__CrossRangeZoomer{
		pointer-events:auto;
	}
	
	.rMateH5__CrossRangeZoomer *{
		pointer-events:none;
	}
	
	.rMateH5__CrossHair_Label{
		color:#ffffff;
		background-color:#999;
		border:1px solid #999;
		padding:2px 4px;
		text-align:center;
		visibility:hidden;
		cursor:default;
	}
	
	.rMateH5__CrossRangeZoomer_Restore{
		top:1px;
		right:1px;
		cursor:pointer;
		font-size:12px;
		color:#666;
		text-align:center;
		padding:8px;
		min-width:83px;
		min-height:29px;
		transition:box-shadow 0.2s;
		background-color:#fff;
		background-color:rgba(255, 255, 255, 0.8);
	
		-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
		-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
		box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
	}
	
	.rMateH5__CrossRangeZoomer_Restore:hover{
		-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
		-moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
		box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
	}
	
	/******************************************************
	 *
	 *			SlideChart
	 *
	 *****************************************************/
	
	.rMateH5__SlideController{
	}
	
	.rMateH5__PrevCanvas, .rMateH5__NextCanvas{
		position:absolute;
		z-index:1;
	}
	
	/* 슬라이드 이전 버튼 */
	.rMateH5__SlidePrevButton{
		background:url("./slide_left.png") no-repeat 50% 50%;
	}
	
	/* 슬라이드 다음 버튼 */
	.rMateH5__SlideNextButton{
		background:url("./slide_right.png") no-repeat 50% 50%;
	}
	
	.rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
		width:20px;
		height:20px;
	}
	
	/* 슬라이드 버튼 */
	.rMateH5__SlideButton{
		width:15px;
		height:15px;
		background:url("./slide_button.png") no-repeat 50% 50%;
	}
	
	/* 선택된 슬라이드의 버튼 */
	.rMateH5__SlideActiveButton{
		background:url("./slide_active_button.png") no-repeat 50% 50%;
	}
	
	.rMateH5__SlideButton, .rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
		cursor:pointer;
		position:absolute;
	}
	
	/******************************************************
	 *
	 *			Line2DSeries DisplayName
	 *
	 *****************************************************/
	
	.rMateH5__DisplayName{
		cursor:default;
		white-space:nowrap;
	}
	
	/******************************************************
	 *
	 *			UserContent
	 *
	 *****************************************************/
	
	 .rMateH5__UserDefineWrapper{
		left:0;
		top:0;
		position:absolute;
		white-space:nowrap;
	}
	
	.rMateH5__UserDefineWrapper > div{
		position:relative;
	}
	
	/******************************************************
	 *
	 *			PopUp
	 *
	 *****************************************************/
	
	.rMateH5__rMateChart{
		
		& .rMateH5__PopUp{
			width:196px;
			background-color:#fff;
		}
		
		& .rMateH5__PopUp div{
			position:relative;
			color:#fff;
		}
		
		& .rMateH5__PopUp .rMateH5__Title{
			width:100%;
			height:26px;
			background-color:#4452a8;
			padding:6px 0 0 10px;
			border-top-left-radius:6px;
			border-top-right-radius:6px;
		}
		
		& .rMateH5__PopUp .rMateH5__Content{
			color:#222;
			border-left:solid 1px #dbdbdb;
			border-right:solid 1px #dbdbdb;
			padding:26px 30px;
			text-align:center;
		}
		
		& .rMateH5__PopUp .rMateH5__Button{
			border:solid 1px #dbdbdb;
			border-top:none;
			border-bottom-left-radius:6px;
			border-bottom-right-radius:6px;
			padding-bottom:12px;
		}
		
		& .rMateH5__PopUp .rMateH5__Button > div{
			border-radius:10px;
			width:57px;
			height:16px;
			background-color:#c4c5c9;
			margin:0 auto;
			text-align:center;
			transition:background-color 0.2s;
			cursor:pointer;
		}
		
		
		& .rMateH5__PopUp .rMateH5__Button > div:hover{
			background-color:#999;
		}
	}
		
		/******************************************************
		 *
		 *			Chart Menu
		 *
		 *****************************************************/
		
		/* Chart Menu */
		.rMateH5__ChartMenu{
			top:4px;
			right:4px;
			width:20px;
			height:20px;
			font-size:12px;
			border-radius:1px;
			border:1px solid #ccc;
			
			z-index:1;
			overflow:hidden;
			opacity:0;
			position:absolute;
			transition:width 0.2s, height 0.2s, opacity 0.2s;
			background:url(./menu.png) #fff no-repeat 50% 50%;
			
			padding-left:18px;
			padding-top:18px;
			white-space:nowrap;
		}
		
		/* Chart 영역에 마우스 오버시 ChartMenu */
		.rMateH5__chart_menu_hover{
			opacity:1;
		}
		
		/* ChartMenu에 마우스 오버시 */
		.rMateH5__chart_menu_expand{
			width:70px;
			height:auto;
			padding:4px;
			background-position:-20px -20px;
		}
		
		/* ChartMenu에 붙는 아이템 들 */
		.rMateH5__ChartMenuItem{
			width:60px;
			padding-left:2px;
			
			cursor:pointer;
			background-color:#ffffff;
			transition:background-color 0.2s;
			white-space:nowrap;
		}
		
		/* ChartMenuItem에 설정된 img */
		.rMateH5__ChartMenuItem_Img{
			width:12px;
			height:12px;
			margin-right:4px;
		}
		
		/* ChartMenuItem 마우스 오버시 */
		.rMateH5__ChartMenuItem:hover{
			background-color:#555555;
			color:#ffffff;
		}
		
		/******************************************************
		 *
		 *			PictorialChart
		 *
		 *****************************************************/
		
		.rMateH5__PictorialChart svg{
			top:0;
			left:0;
			
			pointer-events:none;
		}
		
		.rMateH5__PictorialChart svg use{
			top:0;
			left:0;
			
			pointer-events:auto;
		}
		
		.rMateH5__PictorialChart .rMateH5__SeriesHolder{
			width:100%;
			height:100%;
		}
		
		.rMateH5__PictorialChart .rMateH5__PictorialSeries{
			overflow:hidden;
			pointer-events:none;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv{
			width:100%;
			height:100%;
			
			pointer-events:none;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv > .rMateH5__LabelArea{
			display:flex;
			align-items:center;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.up > .rMateH5__LabelArea,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.down > .rMateH5__LabelArea{
			flex-direction: column;
			justify-content: center;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.left > .rMateH5__LabelArea,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.right > .rMateH5__LabelArea{
			flex-direction: row;
			justify-content: center;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv > .rMateH5__LabelArea > div{
			position:relative;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv > .rMateH5__LabelArea > .rMateH5__Label{
			white-space:nowrap;
			position:absolute;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv > .rMateH5__LabelArea > .rMateH5__Label *{
			display:inline-block;
			position:relative;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.up > .rMateH5__LabelArea > .rMateH5__CalloutLine,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.down > .rMateH5__LabelArea > .rMateH5__CalloutLine{
			border-left:1px solid #000;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.left > .rMateH5__LabelArea > .rMateH5__CalloutLine,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.right > .rMateH5__LabelArea > .rMateH5__CalloutLine{
			border-bottom:1px solid #000;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.down > .rMateH5__LabelArea > .rMateH5__Label,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.right > .rMateH5__LabelArea > .rMateH5__Label{
			order:1;
		}
		
		.rMateH5__PictorialChart .rMateH5__LabelDiv.down > .rMateH5__LabelArea > .rMateH5__CalloutLine,
		.rMateH5__PictorialChart .rMateH5__LabelDiv.right > .rMateH5__LabelArea > .rMateH5__CalloutLine{
			order:0;
		}
		
		.rMateH5__PictorialChart .rMateH5__AnnotationElementHolder{
			pointer-events:none;
		}
	}
}