@charset "utf-8";
/************************************************
YUANTA
commnet : chart
*************************************************/

/* chart base set
.wrapper {width: 700px;}
.wrap {width: 700px; height: 400px; position: relative;} */
/* .chartWrap {padding:1px;background: #f8f8f8;border: 1px solid #eaeaea;} */

fieldset.search {border: 1px solid #ebebeb; padding: 0; margin: 0 0 10px; position: relative; display: block;}
fieldset.search legend {font-size: 0; text-indent: -9999px; visibility: hidden; line-height: 0; position: absolute; left: -9999px; top: 0;}
fieldset.search div.input {display: block; padding: 15px 65px 15px 10px;}
fieldset.search div.input input {vertical-align: middle;}
fieldset.search div.btn {position: absolute; right: 10px; top: 7px;}
fieldset.search div.btn input {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_search.png") left top no-repeat; border: 0; margin: 0; padding: 0; width: 58px; height: 33px; cursor: pointer; color: #fff; line-height: 100%; font-weight: bold;}

div.tip {background: #f9f9f9 !important; border:1px solid #999 !important; padding: 4px !important;}
div.tip div.text {background: #465866; color: #fff; padding: 5px 10px; border: 1px solid #fff; border-radius: 2px;}
div.tip div.arrow {height:6px;background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/tooltip_arrow.png") no-repeat center top; margin-top: -1px; font-size: 6px;}
div.tip .WEBPONENT-CHART-TIP-TITLE {  padding: 3px 0; font-weight: bold;color: #333333 !important; }
div.tip table {  width: auto; min-width: 100px; max-width: 200px; margin: 0; border: 0; }
div.tip table th, div.tip table td { height: 19px;line-height: 19px; padding: 0; border: 0; background: none; color: #333333 !important; }
div.tip table th {width: 35%;text-align: left;font-weight: normal;padding-right: 5px;color: #333333 !important;}
div.tip table td {font-size: 12px; text-align: right;color: #333333 !important;}


div.axisTip {background: #465866; color: #fff; padding: 5px 10px; border: 1px solid #fff; border-radius: 2px;}

.controller {border: 1px solid #eaeaea; border-top: 0; position: relative; padding: 5px 10px 2px;}
.controller.two {}
.controller .slider { width: 65%; position: absolute; left: 100px; top: 14px;}
.controller.two .slider {width: 55%;}
.controller button {width: 26px; height: 26px; border: 0; padding: 0; margin: 0;}
.controller button span {position: absolute; left: -9999px;}
.controller .play_btn 	{background: url("/WEB-APP/webponent/chart2.0/sample/chart//img/timeslice_play.png") no-repeat;}
.controller .pause_btn 	{background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/timeslice_pause.png") no-repeat;}
.controller .stop_btn 	{background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/timeslice_stop.png") no-repeat;}

.controller .ui-state-default {background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/timeslice_dot.png"); border: 0;}
.controller .ui-slider-horizontal {height: 0.7em;}
.controller .ui-widget-content {border: 0; background: #e0e4e9;}
.controller .ui-widget-header {background: #2bcdba;}

.controller .info {position: absolute; top: 11px; right: 10px;}

.lnb_banner {margin-top: 50px;}
.lnb_banner div {text-align: left; margin-bottom: 5px;}

.black {}
.controller.black {background: #47586a; border: 1px solid #2a2f35; border-top: 0;}
.controller.black .info {color: #cccccc;}
.controller.black .ui-widget-content {border: 0; background: #ffffff;}

.top-98	{top: -98px !important;}
.btnbox {top: -40px; right: 0; position: absolute; font-size: 0;}
.btnbox button {margin : 0 0 0 5px; padding: 0; width: 76px; height: 37px; position: relative; cursor: pointer;}
.btnbox button span {position: absolute; left: -9999px; text-indent: -9999px;}
.btnbox .btn01 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_mobile.png") no-repeat;}
.btnbox .btn02 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_ref.png") no-repeat;}
.btnbox .btn03 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_pub.png") no-repeat;}
.btnbox .btn04 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_exportpng.png") no-repeat;}
.btnbox .btn05 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_resize.png") no-repeat;}
.btnbox .btn06 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_rt_stack.png") no-repeat;}
.btnbox .btn07 {background: url("/WEB-APP/webponent/chart2.0/sample/layout/img/btn_rt_renew.png") no-repeat;}

dl.chartBox {}
dl.chartBox > dt {padding:0 13px;line-height:38px;height:38px;font-size:14px;color:#000;font-weight:bold;letter-spacing:-1px;}
dl.chartBox > dd {border-top:1px solid #e8e8e8;padding:10px 13px;}
.lyWrap .rCont dl.chartBox  {border-left:0;}

@media (min-width: 320px) and (max-width: 640px){
	body {padding: 0;}
	.wrapper {width: 90%; background: #fff; margin: 0 auto;}
	.wrap {width: 100%; height: 300px;}
	.controller {border: 1px solid #eaeaea; border-top: 0; padding: 15px 5px 12px 5px; position: relative;}
	.controller .info {position: absolute; top: 30px; right: 10px;}
}

/* page chart */
.MA_0202000_T1 {width:383px;height:300px;}
.IN_0000000_P1 {width:358px; height:218px;}
.IN_0000000_P1 .tip .text { background: #465866;color: #fff;padding: 5px 10px;border: 1px solid #fff;border-radius: 2px;}
.IN_0000000_P1 .tip .arrow {height: 6px;background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/tooltip_arrow.png") no-repeat center top;margin-top: -1px;font-size: 6px;}
.MA_0601001_P1{width:790px;height:400px}
.IN_0000000_P1 .tip .arrow {height: 6px;background: url("/WEB-APP/webponent/chart2.0/sample/chart/img/tooltip_arrow.png") no-repeat center top;margin-top: -1px;font-size: 6px;}
.MA_0204002_L2T2, .MA_0204002_L2T3 {height:180px;width:672px;}
.PE_0401001_T2_1{width:790px;height:375px;}
.PE_0401001_T2_2{width:790px;height:405px;}
.PE_0401001_T3_1{width:790px;height:381px;}
.PE_0401001_T3_2{width:790px;height:461px;}
.PE_0401001_T4_1{width:790px;height:315px;}
.PE_0401001_T4_2{width:790px;height:355px;}
.BA_0102000_T8.chart1 {width:790px;height:400px;}
.BA_0102000_T8.chart2 {width:385px;height:200px;}
.BA_0102000_P1{border: 1px solid #e1e1e1;padding-left: 1px;}
.BA_0102000_P1.chart{padding-left: 0;}
tr.MA_0106000_L2 td {padding:0;}
tr.MA_0106000_L2 .chart {height:195px;}
div.MA_0106000_L2 {width:772px;border:1px solid #e1e1e1;}
div.MA_0106000_L2 .lineChart {height:362px;width:772px;}
div.MA_0106000_L2 .chartLegend {padding: 0 10px 10px 10px;}
div.MA_0106000_L2 .chartLegend > span {display: block;}
div.MA_0106000_L2 .remark{margin-left:80px}
.MA_0102002_T1_1{position:relative;width:498px;height:284px; border: 1px solid #e1e1e1;}
.MA_0102002_T1.pie {border: 1px solid #e1e1e1; padding-left: 1px;}
.w450 .MA_0102002_T1_1{width: 450px}
.MA_0102002_T1_1 .chartWrap {height: 250px}
.MA_0102002_T1_1 .MA_0102002_T1_1T{position:absolute;top:248px;width:100%;text-align:center;font-size:12px;color:#3d3d3d}
.MA_0102002_T1_1 .MA_0102002_T1_1T>span{display:inline-block;margin:0px 8px}
.MA_0102002_T1_1 .MA_0102002_T1_1T>span>span{vertical-align:middle;}
.MA_0102002_T1_1 .MA_0102002_T1_1T span.b1{display:inline-block;width:11px;height:11px;background-color:#bdbdbd}
.MA_0102002_T1_1 .MA_0102002_T1_1T span.b2{display:inline-block;width:33px;height:2px;background-color:#1779cc}
.MA_0102002_T1_1 .MA_0102002_T1_1T span.b3{display:inline-block;width:33px;height:2px;background-color:#ff5624}
.MA_0102002_T1_2{position:relative;height: 311px;border: 1px solid #e1e1e1;}
.MA_0102002_T1_2 .chartWrap {height: 255px}
.MA_0102002_T1_2 .MA_0102002_T1_2T{position:absolute;top:260px;width:100%;text-align:center;font-size:12px;color:#6d6d6d;letter-spacing:-1px}
.MA_0102002_T1_2 .MA_0102002_T1_2T>span{display:inline-block;margin:0px 8px}
.MA_0102002_T1_2 .MA_0102002_T1_2T>span>span{vertical-align:middle;position:relative;top:-1px;}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b1{display:inline-block;width:11px;height:11px;background-color:#40d2c1}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b2{display:inline-block;width:11px;height:11px;background-color:#a3a3a3}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b3{display:inline-block;width:11px;height:11px;background-color:#d8d8d8}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b4{display:inline-block;width:11px;height:11px;background-color:#2483d3}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b5{display:inline-block;width:11px;height:11px;background-color:#61c42a}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b6{display:inline-block;width:11px;height:11px;background-color:#be30d8}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b7{display:inline-block;width:11px;height:11px;background-color:#7752e3}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b8{display:inline-block;width:11px;height:11px;background-color:#f23b23}
.MA_0102002_T1_2 .MA_0102002_T1_2T span.b9{display:inline-block;width:11px;height:11px;background-color:#ff723c}
.MA_0102002_T1_4 .chartWrap {height: 255px;}
.MA_0102002_T1_4 .chartLegend {text-align: center;}

.ma_0101000_l1{/*width:784px;*/height:320px; border: 1px solid #e1e1e1;}
.BA_0103000_P2T1 {height: 250px}
.MA_0202000_T3T1 {width:385px;height:324px;}
.MA_0102002_T3_1, .MA_0102002_T3_3{width:324px;height:228px;border:1px solid #e8e8e8;background-color:#f8f8f8}
.MA_0102002_T3_2{width:790px;height:442px;border:1px solid #e8e8e8;}
.MA_0102002_T3_4{width:444px;height:261px;border:1px solid #e8e8e8;}
.MA_0202000_T3T2, .MA_0202000_T3{border:1px solid #e8e8e8;}
.invStypeWrap .chartWrap{height:255px;}
.invStypeWrap .chartLegend{text-align: center;}
.h286{height:286px}
.h300{height:300px}
.h320{height:320px}
.h379{height:379px}
.h286{height:286px}
.h198{height:198px}
.h162{height:162px}
.h177{height:177px}
.h151{height:151px}
.h169{height:169px}