@charset "utf-8";
/* CSS Document */
@media all and (max-width : 1180px){
	#Contents {display:flex; width:100%;padding:25px 20px 30px 20px;}
	#Contents .Content {width:100%; }
	#Contents .Content .Cont .OrderList {width:100%; position:relative; display:flex;  flex-direction: row; flex-wrap:wrap;}
	#Contents .Content .Cont .Graphbox {width:calc(54% - 10px);  height:100%; padding:15px 20px; margin:0px; }
	#Contents .Content .Cont .Graphbox dl {margin:0;}
	#Contents .Content .Cont .Graphbox .GraphArea { border-radius:13px;margin:10px 0 0 0; background:#fff; width:100%; height: calc(100 / 200 * (100vw - 60px));}
	#Contents .Content .Cont .Graphbox .GraphArea svg {height:100%;margin-top:0;}
	#Contents .Content .Cont .Graphbox p {width:100%;margin-left:0px;}

	#Contents .Content .Cont .Graphquestion {width:calc(46% - 10px); background:url(../../images/bcc/common/question_icon.png) no-repeat 0 0px; position:absolute;right:0px;top:0px;}
	#Contents .Content .Cont .GraphInfo {width:calc(46% - 10px);height:95px;background:#fff url(../../images/bcc/common/Infograph_bg.png) no-repeat center 0;margin-top:20px; border:1px solid #d9d9d9;
	 display:flex; justify-content:center; position:absolute;right:0px;top:40px;}
	#Contents .Content .Cont .GraphInfoKr {background:#fff url(../../images/bcc/common/Infograph_bg_ko.png) no-repeat center 0;}
	#Contents .Content .Cont .Graphbox dl {margin:0;}
	#Contents .Content .Cont .GraphInfo ul {margin:0;}

	#Contents .Content .Cont .GraphInfo li .slowdownInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .slowdownInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .expansionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recessionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recoveryInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}

	#Contents .Content .Cont .GraphInfo li .slowdownInfo a {display:block; text-indent:-3000px; width:29px;height:29px;
		background:#fff url(../../images/bcc/common/mobile_close.png) no-repeat center center; border:1px solid #ddd; border-radius:50px; position:absolute; right:-10px; top:-10px;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo a {display:block; text-indent:-3000px; width:29px;height:29px;
		background:#fff url(../../images/bcc/common/mobile_close.png) no-repeat center center; border:1px solid #ddd; border-radius:50px; position:absolute; right:-10px; top:-10px;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo a {display:block; text-indent:-3000px; width:29px;height:29px;
		background:#fff url(../../images/bcc/common/mobile_close.png) no-repeat center center; border:1px solid #ddd; border-radius:50px; position:absolute; right:-10px; top:-10px;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo a {display:block; text-indent:-3000px; width:29px;height:29px;
		background:#fff url(../../images/bcc/common/mobile_close.png) no-repeat center center; border:1px solid #ddd; border-radius:50px; position:absolute; right:-10px; top:-10px;}
	
	/* 체크박스 */
	/* 체크박스 */
	#Contents .Content .Cont .GraphCheck {width:calc(46% - 10px); height:calc(100% - 180px); background:#fff;margin-top:20px;padding:0px 20px; position:absolute;right:0px;top:160px;}
	#Contents .Content .Cont .GraphCheck dl { overflow : auto;padding:5px 0; width: 100%; height:calc(100% - 70px); display:flex; flex-wrap:wrap;}
	#Contents .Content .Cont .GraphCheck dl img {vertical-align:middle;margin-right:7px;}
	#Contents .Content .Cont .GraphCheck dt {width:80%;padding:0; display:flex; align-items:center; padding-right:13px;}

	#Contents .Content .Cont .GraphCheck dl dt input[type=checkbox] {min-width:16px; width:16px; height:16px; left:0; top:0; background:#666; border-radius:4px; border:none; appearance:none;  -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; margin-right:10px; vertical-align:middle;}
	#Contents .Content .Cont .GraphCheck dl dt input[type=checkbox]:checked {background:#666 url(../../images/bcc/common/checkbox_v.png) no-repeat center center;}
	#Contents .Content .Cont .GraphCheck dl dt input[type=checkbox]::-ms-check { display:none}

	#Contents .Content .Cont .GraphCheck span {border-bottom:1px solid #ebebeb;height:50px;padding-top:15px;width:100%;float:left;}
	#Contents .Content .Cont .GraphCheck span input[type=checkbox] {width:16px; height:16px; left:0; top:0; background:#666; border-radius:4px; border:none; appearance:none;  -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; margin-right:10px; vertical-align:middle;}
	#Contents .Content .Cont .GraphCheck span input[type=checkbox]:checked {background:#666 url(../../images/bcc/common/checkbox_v.png) no-repeat center center;}
	#Contents .Content .Cont .GraphCheck span input[type=checkbox]::-ms-check { display:none}
	#Contents .Content .Cont .GraphCheck button {position:absolute;right:20px;top:10px;}

	#Contents .Content .Cont .GraphCheck dd {padding:0;width:20%;display:flex; align-items:center; justify-content:flex-end; text-indent:-3000px !important;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(1) {background:#666 url(../../images/bcc/common/info_icon.png) no-repeat center center; border-radius:50px;color:#fff; font-size:0;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3) {
		background:#5175b0 url(../../images/bcc/common/statistical_icon.png) no-repeat center center; border-radius:50px;color:#fff;margin-left:10px; font-size:0; padding-right:0;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3):after {display:none;}
	#Contents .Content .Cont .GraphCheck dd a {width:26px; height:26px; }
	#Contents .Content .Cont .GraphCheck dd .InfoBox {text-indent:0px !important;}
	/* 체크박스 */
	/* 체크박스 */

	/* 20180703 타임라인 */	
	#Contents .Content .Cont .ControlBox {width:100%;height:auto; padding:10px; background:#4f73ae; display:flex; justify-content:space-between; flex-wrap:wrap; position:relative;}
	#Contents .Content .Cont .ControlBox .ManualControl {margin:0; width:calc(100% - 250px); display:flex; justify-content:center;}
	.ManualControl .YearLine {position:inherit;width:calc(100% - 250px);}
	.ManualControl .YearLine ul {position:inherit; width:100%; display:flex; justify-content:space-between;}

	#Contents .Content .Cont .ControlBox .ManualControl dd {display:flex; justify-content:space-between; position:absolute;left:10px; top:10px; width:calc(100% - 220px);}
	.ManualControl dd a:nth-child(1) {position:absolute;left:0; top:0;}
	.ManualControl dd a:nth-child(2) {position:absolute;left:46px; top:0;}
	.ManualControl dd a:nth-child(3) {position:absolute;left:calc(100% - 128px); top:0;}
	.ManualControl dd a:nth-child(4) {position:absolute;left:calc(100% - 82px);; top:0;}
	/* 20180703 타임라인 */
	#Contents .Content .Cont .ControlBox .AutoControl {position : inherit; left:0; margin:0; width:200px;}
	#Contents .Content .Cont .ControlBox .AutoControl dd {display:flex; justify-content:space-between;}
	#Contents .Content .Cont .ControlBox .AutoControl dd a {margin-right:0px;}
	
	.ControlAlea {background:#e5e8ed; border-radius:7px; margin-top:10px;width:100%; display:flex; align-items:center; justify-content:space-between; padding:7px 250px 7px 10px;}

	#Contents .Content .Cont .ControlBox .SpeedControl {position:inherit; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .SpeedControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .ShowgridControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .ShowgridControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .TraceControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .TraceControl dd {display:flex; align-items:center;}
	#Contents .Content .Cont .ControlBox label {color:#000;}
	#Contents .Content .Cont .ControlBox input[type=number] {vertical-align:middle;border:0px;width:55px;height:24px;padding-left:5px;}

	.ControlBox .ApplyBtn {bottom:16px !important;top:inherit;background:inherit;background-color:#0d0d0d;}
	
	#Footer {width:100%;background:url(../../images/bcc/common/Shadow.png) no-repeat center top;padding:30px 15px; display:flex; justify-content:center; width:100%; min-width:inherit;}
	#Footer address {width:100%;}

	.Helpwarp {width:100%;height:100%;position:fixed;background:rgba(0,0,0,0.8);z-index:999999;font-size:14px;color:#555; padding:0; display:flex; justify-content:center; align-items:center;}
	.HelpBox {width:calc(100% - 30px);height:calc(100% - 30px);min-width:inherit;}
	.HelpHeader {width:100%;}
	.HelpHeader h1 {font-size:18px; padding-top:0px; margin:0 0 0 15px; height:55px; position:relative; padding-left:77px; display:flex; align-items:center;}
	.HelpHeader h1:before {display:block;content:"";width:70px; height:19px; background:url(../../images/bcc/common/Kosis_logo_mobile.png) no-repeat center center;position:absolute;left:0;top:18px;}
	.HelpHeader h1 img {display:none;}
	.HelpHeader span {display:none;}
	.help_title_menu {width:100%; background:#f9fafb; border-top:2px solid #333; border-bottom:1px solid #d3d3d3; height:72px; padding:10px 15px; overflow:auto; display:flex; flex-wrap:wrap; word-break: break-all;}
	.help_title_menu li {height:auto; padding:2px 0 2px 7px; position:relative;}
	.help_title_menu li:before {display:block; content:""; width:2px; height:2px; position:absolute; left:0px; top:10px; background:#333;}

	.HelpCont {padding:10px 15px 15px 15px; overflow:auto}
	.calc_K {height:calc(100% - 165px);}
	.calc_E {height:calc(100% - 165px);}
	.HelpCont h3 {font-family:'나눔고딕B';font-size:16px;color:#000; width:100%;}
	.HelpCont h4 {margin-top:10px;}
	.HelpCont h5 {color:#5175b0;font-family:'나눔고딕B';font-size:14px;margin-top:10px;}
	.HelpCont p {float:left;margin-top:10px;width:100%;}
	.HelpCont p img {vertical-align:middle;}
	.HelpCont p>span {clear:both;width:100%;float:left;}
	.HelpCont p>span.Color {color:#5175b0;}
	.HelpCont .HelpEx {width:100%;border:3px solid #cfcfcf; padding:15px; margin-top:10px;}
	.controll>li {float:left;margin-right:35px;font-size:13px;}
	.HelpCont>.help_section>span {background:#e5e8ed;padding:10px;width:100%;display:block;margin-top:10px;}
	.HelpCont>.help_section {float:left;padding:15px 0px;}
	.help_section:nth-child(3)>.HelpEx img:nth-child(1), .help_section:nth-child(3)>.HelpEx img:nth-child(3) {display:none;}
	.help_section:nth-child(3)>.HelpEx img:nth-child(2) {display:block;}
	.help_section:nth-child(4)>p>.HelpEx img:nth-child(1) {display:none;}
	.help_section:nth-child(4)>p>.HelpEx img:nth-child(2) {display:block;}



	.HelpCont ol {margin-top:10px;color:#5175b0; margin-left:30px;}
	.HelpCont li {margin-bottom:3px;list-style:decimal;}

	.HelpCont dl {margin-top:5px;}
	.HelpCont dt {float:left; margin-left:0px;margin-right:0px; display:inline-block;}
	.HelpCont dd {display:inline-block;}

	.Help_copyright {float:left;text-align:center;font-family:'나눔고딕B';font-size:12px;width:100%;background:#e5e8ed;padding:10px 0;}
	.help_close {display:block; position:absolute;right:15px;top:13px; width:29px; height:29px;}
	.help_close img {width:100%;}

	.HelpEx>img {width:100%;}
}


@media all and (max-width : 930px){
	#Header {width:100%; height:80px;}
	#Header hgroup {display:flex; align-items:center; height:80px;}
	#Header hgroup h2 {display:flex; align-items:center; margin-right:7px;}
	#Header h1 a {font-size:24px;line-height:24px;}
	#Header .Gnb li {float:right;width:80px;height:80px;background:#5175b0;margin-left:1px;text-align:center;}
	#Header .Gnb li a {display:block;width:80px;height:80px;color:#fff;padding-top:30px;font-size:13px;font-family:'나눔고딕B';}
			
	#Contents {display:flex; width:100%;padding:20px 20px 30px 20px;}
	#Contents .Content .OrderList {display:flex; flex-direction:column; width:100%;}
	
	#Contents .Content .Cont {width:100%;}
	#Contents .Content .Cont .Graphbox {width:100%;height:auto; padding:15px 20px; order:3; margin-top:20px;}
	#Contents .Content .Cont .Graphbox dl {margin:0;}

	#Contents .Content .Cont .Graphbox .GraphArea { border-radius:13px;margin-top:15px; background:#fff; width:100%; height: calc(100 / 100 * (100vw - 80px)); overflow:hidden;}
	#Contents .Content .Cont .Graphbox .GraphArea svg {width:100%; margin:0; padding:0;}
	#Contents .Content .Cont .Graphbox p {float:left;font-size:12px;width:100%;margin-left:0px;line-height:15px;color:#555;}
	#Contents .Content .Cont .Graphquestion {width:100%; order:1; background:url(../../images/bcc/common/question_icon.png) no-repeat 0 0px; display:flex; align-items:center; height:32px;}
	#Contents .Content .Cont .GraphInfo {width:100%;height:95px;background:#fff url(../../images/bcc/common/Infograph_bg.png) no-repeat center 0;margin-top:45px; border:1px solid #d9d9d9; order:2; 
		display:flex; justify-content:center; position:inherit;top:inherit;}
	#Contents .Content .Cont .GraphInfoKr {background:#fff url(../../images/bcc/common/Infograph_bg_ko.png) no-repeat center 0;}
	#Contents .Content .Cont .GraphInfo ul {margin:0;}

	#Contents .Content .Cont .GraphInfo li .slowdownInfo:after {display:block;content:"";width:12px;height:9px;background:url(../../images/bcc/common/bubble_right.png) no-repeat 0 0;position:absolute;right:-12px;top:18px;}
	#Contents .Content .Cont .GraphInfo li .slowdownInfo {position:absolute;left:0px;top:0px;display:block;width:calc(50% - 84px);
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:10px;}
	
	#Contents .Content .Cont .GraphInfo li .expansionInfo:after {display:block;content:"";width:12px;height:9px;background:url(../../images/bcc/common/bubble_left.png) no-repeat 0 0;position:absolute;left:-12px;top:18px;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo {position:absolute;right:0px;top:0px;display:block;width:calc(50% - 85px);
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:10px;}
	
	#Contents .Content .Cont .GraphInfo li .recessionInfo:after {display:block;content:"";width:12px;height:9px;background:url(../../images/bcc/common/bubble_right.png) no-repeat 0 0;position:absolute;right:-12px;bottom:18px;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo {position:absolute;left:0px;top:0px;display:block;width:calc(50% - 84px);
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:10px;}
	
	#Contents .Content .Cont .GraphInfo li .recoveryInfo:after {display:block;content:"";width:12px;height:9px;background:url(../../images/bcc/common/bubble_left.png) no-repeat 0 0;position:absolute;left:-12px;bottom:18px;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo {position:absolute;right:0px;top:0px;display:block;width:calc(50% - 85px);
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:10px;}
	

	#Contents .Content .Cont .GraphCheck {width:100%;height:100%; padding:50px 20px 0px 20px; position:fixed; left:0px; top:100%; margin-top:-49px; border-radius:13px; z-index:9999; background:#fff; box-shadow:3px 0px 7px #999;}
	#Contents .Content .Cont .GraphCheck>h3 {text-align:center; width:100%; text-indent:0; height:auto; display:block;}
	#Contents .Content .Cont .GraphCheck>h3 a {position:relative;padding-left:28px;font-family:'나눔고딕B'; color:#000;display:block; background:#fff; width:100%; height:49px;
		position:absolute;left:0;top:0; z-index:99999; border-radius:13px 13px 0 0;padding-top:10px;}
	#Contents .Content .Cont .GraphCheck>h3 a:before {display:block; content:""; width:21px; height:21px; background:url(../../images/bcc/common/seting_icon.png) no-repeat center center; position:absolute; left:50%; top:14px;margin-left:-80px;}
	#Contents .Content .Cont .GraphCheck button {top:60px;}
	
	#Contents .Content .Cont .GraphCheck dt {width:60%;}
	#Contents .Content .Cont .GraphCheck dd {padding:0;width:40%;display:flex; align-items:center; justify-content:flex-end; text-indent:0px !important;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(1) {background-color:#666; background-image:none; border-radius:50px;font-size:12px;color:#fff;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3) {
		background-color:#5175b0; background-image:none; border-radius:50px;font-size:12px;color:#fff;margin-left:10px; padding-right:22px;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3):after {display:block; top:7px;}
	#Contents .Content .Cont .GraphCheck dd a {width:auto; height:auto; }

	#Contents .Content .Cont .S_up:before {display:block; content:""; background:rgba(0,0,0,0.7); width:100%; height:145px; position:fixed; left:0; top:0; z-index:9999}
	#Contents .Content .Cont .S_up:after {display:block; content:""; width:100%; height:13px; background:#fff; border-radius:13px 13px 0 0; position:absolute; left:0; top:0; z-index:9999}
	#Contents .Content .Cont .S_up {width:100%;height:calc(100% - 100px) !important;padding:50px 20px 0px 20px;position:fixed; left:0px; top:157px !important; order:4; border-radius:13px; z-index:9999; background:#fff;}
	#Contents .Content .Cont .S_up>h3 {text-align:center; width:100%; text-indent:0; height:auto; display:block;}
	#Contents .Content .Cont .S_up>h3 a {position:relative;padding-left:28px;font-family:'나눔고딕B'; color:#000;display:block; background:#fff; width:100%; height:49px;
		position:absolute;left:0;top:0; z-index:99999; border-radius:13px 13px 0 0;padding-top:10px;}
	#Contents .Content .Cont .S_up>h3 a:before {display:block; content:""; width:21px; height:21px; background:url(../../images/bcc/common/seting_icon.png) no-repeat center center; position:absolute;}
	#Contents .Content .Cont .S_up button {top:59px;}
	#Contents .Content .Cont .S_up dl {height:calc(100% - 123px); display:flex; padding:0; border-bottom:1px solid #ebebeb;}
	#Contents .Content .Cont .S_up .Set_close {display:block; border-radius:50px; width:100%; padding:11px 0; text-align:center; background:#000; color:#fff; margin-top:15px;}
	/* 20180703 인포박스 */
	.InfoBox {position:absolute;left:20px;top:100px;width:calc(100% - 40px);height:auto;background:#efefef url(../../images/bcc/common/info_bg.png) no-repeat center 50px;border-left:1px solid #ddd;border-right:1px solid #ddd; z-index:100; text-align : left;}
	.InfoBox h3 {background:#6281b7;width:100%;height:50px;font-size:16px !important;color:#fff !important;padding:0; display:flex; align-items:center; padding-left:15px;}
	.InfoBox .InfoCont {margin-top:0px;padding:10px 15px 55px 15px; background:#efefef; width:100%; display:flex;}
	.InfoBox span {position:absolute;left:0px;bottom:0px;font-size:12px;width:100%; height:45px !important; background:#6281b7;padding:0 !important;color:#fff; display:flex; align-items:center; justify-content:center;}
	.InfoBox a.close {position:absolute;right:15px;top:11px;}
	/* 20180703 인포박스 */

	/* 20180703 타임라인 */	
	#Contents .Content .Cont .ControlBox {order:5; width:100%;height:auto; padding:10px; background:#4f73ae; display:flex; justify-content:space-between; flex-wrap:wrap; position:relative;}
	#Contents .Content .Cont .ControlBox .ManualControl {margin:0; width:calc(100% - 160px); display:flex; justify-content:center;}
	.ManualControl .YearLine {position:inherit;width:calc(100% - 160px);}
	.ManualControl .YearLine ul {position:inherit; width:100%; display:flex; justify-content:space-between;}

	#Contents .Content .Cont .ControlBox .ManualControl dd {display:flex; justify-content:space-between; position:absolute;left:10px; top:10px; width:calc(100% - 180px);}
	.ManualControl dd a:nth-child(1) {position:absolute;left:0; top:0;}
	.ManualControl dd a:nth-child(2) {position:absolute;left:36px; top:0;}
	.ManualControl dd a:nth-child(3) {position:absolute;left:calc(100% - 68px); top:0;}
	.ManualControl dd a:nth-child(4) {position:absolute;left:calc(100% - 32px);; top:0;}
	/* 20180703 타임라인 */

	#Contents .Content .Cont .ControlBox .AutoControl {position : inherit; left:0; margin:0; width:140px;}
	#Contents .Content .Cont .ControlBox .AutoControl dd {display:flex; justify-content:space-between;}
	#Contents .Content .Cont .ControlBox .AutoControl dd a {margin-right:0px;}
	
	.ControlAlea {background:#e5e8ed; border-radius:7px; margin-top:10px;width:100%; display:flex; align-items:center; justify-content:space-between; padding:7px 150px 7px 10px;}

	#Contents .Content .Cont .ControlBox .SpeedControl {position:inherit; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .SpeedControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .ShowgridControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .ShowgridControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .TraceControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .TraceControl dd {display:flex; align-items:center;}
	#Contents .Content .Cont .ControlBox label {color:#000;}
	#Contents .Content .Cont .ControlBox input[type=number] {vertical-align:middle;border:0px;width:55px;height:24px;padding-left:5px;}

	.ControlBox .ApplyBtn {bottom:16px !important;top:inherit;background:inherit;background-color:#0d0d0d;}
	

	.Down_btn {background-color:#5175b0; background-image:none;color:#fff;padding:12px 30px; border-radius:50px; display:inline-block; text-indent:0;}
	.Down_btn img {display:none;}

	#Footer {width:100%;background:url(../../images/bcc/common/Shadow.png) no-repeat center top;padding:30px 15px 87px 15px; display:flex; justify-content:center;}
	#Footer address {text-align:center;}
}

@media all and (max-width : 830px){
	.BusinessPop dd {width:100%;background:#fff;padding:20px 0 20px 20px; overflow:auto; }
	.BusinessPop dd table {position:relative;}
	.BusinessPop dd table:after {display:block; content:""; width:20px; height:50px; background:#fff; position:absolute; right:-20px; top:0;}
}

@media all and (max-width : 640px){
	#Header {height:50px !important;}
	#Header hgroup {margin-left:20px; height:50px;}
	#Header hgroup h1 {display:flex; align-items:center;}
	#Header hgroup h1 a {font-size:16px; line-height:19px;}
	
	#Header .Gnb {float:right; margin-right:20px;margin-top:10px;}
	#Header .Gnb li {width:30px;height:30px;;margin-left:4px;background-color:inherit;}
	#Header .Gnb li a {display:block;width:30px;height:30px;text-indent:-3000px;}
	#Header .Gnb li:nth-child(1) a {background:url(../../images/bcc/common/ko_btn.png) no-repeat 0 0;}
	#Header .Gnb li:nth-child(2) a {background:url(../../images/bcc/common/help_btn.png) no-repeat 0 0;}
}

@media all and (max-width : 580px){
	#Contents .Content .Cont .GraphInfo li .slowdownInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .slowdownInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .expansionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recessionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recoveryInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
}

@media all and (max-width : 560px){
	
	
	#Contents .Content {width:100%;}
	#Contents .Content .Cont .Graphquestion {width:100%; order:1; background:none; height:auto; padding-left:0;}

	/* 20180703 타임라인 */	
	#Contents .Content .Cont .ControlBox {order:5; width:100%;height:auto; padding:50px 10px 45px 10px; background:#4f73ae; display:flex; justify-content:space-between; flex-wrap:wrap; position:relative;}
	#Contents .Content .Cont .ControlBox .ManualControl {margin:0; width:50%; display:flex; justify-content:flex-start;}
	.ManualControl .YearLine {position:absolute;left:10px;top:10px;width:calc(100% - 20px); }
	.ManualControl .YearLine ul {position:absolute;left:0px;top:18px; width:100%; display:flex; justify-content:space-between;}

	#Contents .Content .Cont .ControlBox .ManualControl dd {display:flex; justify-content:space-between; position:inherit;left:inherit; top:inherit; width:calc(100% - 15px);}
	#Contents .Content .Cont .ControlBox .ManualControl dd span {width:calc(50% - 20px); }
	.ManualControl dd a:nth-child(1) {position:inherit;}
	.ManualControl dd a:nth-child(2) {position:inherit;}
	.ManualControl dd a:nth-child(3) {position:inherit;}
	.ManualControl dd a:nth-child(4) {position:inherit;}
	/* 20180703 타임라인 */

	#Contents .Content .Cont .ControlBox .AutoControl { width:calc(50% - 15px); }
	#Contents .Content .Cont .ControlBox .AutoControl dd {display:flex; justify-content:space-between;}
	#Contents .Content .Cont .ControlBox .AutoControl dd a {margin-right:0px;}
	
	.ControlAlea {background:#e5e8ed; border-radius:7px; margin-top:10px;width:100%; display:flex; align-items:center; justify-content:space-between; padding:7px 10px;}

	#Contents .Content .Cont .ControlBox .SpeedControl {position:inherit; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .SpeedControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .ShowgridControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .ShowgridControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .TraceControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0;}
	#Contents .Content .Cont .ControlBox .TraceControl dd {display:flex; align-items:center;}
	#Contents .Content .Cont .ControlBox label {color:#000;}
	#Contents .Content .Cont .ControlBox input[type=number] {vertical-align:middle;border:0px;width:55px;height:24px;padding-left:5px;}

	.ControlBox .ApplyBtn {left:10px; bottom:10px !important;top:inherit;background:inherit;background-color:#0d0d0d;width:calc(100% - 20px);}
	/* 20180703 타임라인 */

	.BusinessPop dd {width:100%;background:#fff;padding:10px; overflow:auto;}
	.TB02 {padding-right:10px;width:100%; border-top:0; border-collapse:collapse;position:relative; }
	.TB02 thead th {border-top:#6f604f solid 2px;}

	.Down_btn {display:block; text-align:center;}

	#Footer {width:100%;background:url(../../images/bcc/common/Shadow.png) no-repeat center top;padding:20px 15px 80px 15px; display:flex; justify-content:center;}
	#Footer address {display:flex; justify-content:center; flex-wrap:wrap;}
	#Footer address img {margin-bottom:10px;}
	
	.HelpCont .HelpEx {padding:15px;} 

	.HelpBox {width:100%;height:100%;min-width:inherit;}
	.help_title_menu li {height:auto; padding:2px 0 2px 7px; position:relative;}

	.help_section:nth-child(3)>.HelpEx img:nth-child(1), .help_section:nth-child(3)>.HelpEx img:nth-child(2) {display:none;}
	.help_section:nth-child(3)>.HelpEx img:nth-child(3) {display:block;}
	
	/* 코시스 로고링크연결 css 추가 */
	.web_logo{display: none !important;}
	.mo_logo{display: block !important;}
	#Header hgroup h2{margin-top: -11px;}
}

@media all and (max-width : 550px){
	#Contents .Content .Cont .GraphInfo li .slowdownInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .slowdownInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .expansionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recessionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recoveryInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}

	.InfoBox {/* position:fixed; */width: calc(100% - 40px);height: calc(100% - 107px);left: 20px;top: 100px;z-index:99999;}
	.InfoBox>h3 {height:45px;font-size:14px;color:#fff;padding:0; display:flex; align-items:center; padding-left:15px !important; text-indent:15px;}
	.InfoBox .InfoCont {margin-top:0px;padding:10px 15px 10px 15px;background:#efefef;width:100%;height: calc(100% - 100px);display:flex;text-indent:0;overflow:auto;}
}

@media all and (max-width : 530px){
	#Contents .Content .Cont .GraphCheck dt {width:80%;}
	#Contents .Content .Cont .GraphCheck dt label {display:flex; line-height:18px;}
	#Contents .Content .Cont .GraphCheck dd {text-indent:-3000px !important;width:20%;}
	#Contents .Content .Cont .GraphCheck dd a {width:26px; height:26px; }
	#Contents .Content .Cont .GraphCheck dd a:nth-child(1) {background:#666 url(../../images/bcc/common/info_icon.png) no-repeat center center; border-radius:50px;color:#fff; font-size:0;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3) {background:#5175b0 url(../../images/bcc/common/statistical_icon.png) no-repeat center center; border-radius:50px;color:#fff;margin-left:10px; font-size:0; padding-right:0;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3):after {display:none;}
}

@media all and (max-width : 490px){
	#Contents {padding:15px 15px 20px 15px;}
	#Contents .Content .Cont .Graphbox span {font-size:14px;width:100%;text-align:center;margin:0;padding:0;}
	#Contents .Content .Cont .Graphbox {padding:10px; margin:0px;margin-top:15px;}

	#Contents .Content .Cont .GraphInfo {margin-top:45px;}

	#Contents .Content .Cont .GraphInfo li .slowdownInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .slowdownInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .expansionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .expansionInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recessionInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recessionInfo {position:absolute;left:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .GraphInfo li .recoveryInfo:after {display:none;}
	#Contents .Content .Cont .GraphInfo li .recoveryInfo {position:absolute;right:0px;top:0px;display:block;width:100%;
		background:#fff; border:1px solid #d3d3d3; border-radius:10px;padding:12px;}
	
	#Contents .Content .Cont .ControlBox .ManualControl {width:calc(50% - 20px);}
	#Contents .Content .Cont .ControlBox .ManualControl dd {width:100%; display:flex; justify-content:space-between;}
	#Contents .Content .Cont .ControlBox .ManualControl dd a img {width:28px; height:28px;}
	#Contents .Content .Cont .ControlBox .AutoControl { width:calc(50% - 20px); }
	#Contents .Content .Cont .ControlBox .AutoControl dd a img {width:28px; height:28px;}

	.ControlAlea {padding:7px 10px 7px 10px; display:flex; justify-content:space-between;}


	#Contents .Content .Cont .ControlBox .SpeedControl input[type=text] {width:36px !important; height:26px;border:0px ;padding-left:3px;  }
	#Contents .Content .Cont .ControlBox .SpeedControl label {margin-right:5px;}
	
	dl.ShowgridControl dd input[type=checkbox] {margin-right:5px;}

	#Contents .Content .Cont .ControlBox .TraceControl label {margin-right:5px;}
	#Contents .Content .Cont .ControlBox .TraceControl input[type=text] {width:36px !important; height:26px;border:0px;padding-left:3px;}

	.HelpCont .HelpEx {padding:10px;} 
}

@media all and (max-width : 450px){
	#Contents .Content .Cont .GraphInfo {margin-top:55px;}
	/* 20180703 인포박스 */
	.InfoBox {position:fixed; width:100%; height:100%; left:0; top:0; z-index:99999;}
	.InfoBox>h3 {height:45px;font-size:14px;color:#fff;padding:0; display:flex; align-items:center; padding-left:15px !important; text-indent:15px;}
	.InfoBox .InfoCont {margin-top:0px;padding:10px 15px 10px 15px;background:#efefef;width:100%;height: calc(100% - 100px);display:flex;text-indent:0;overflow:auto;}
	.InfoBox .InfoCont>pre>a {background-image:none !important; text-indent:0px !important; display:inline-flex; font-size:12px !important; width:auto !important; align-items:center; padding:0 15px !important;}
	.InfoBox>span {position:absolute;left:0px;bottom:0px;font-size:12px;width:100%; height:55px !important; background:#6281b7;padding:0 10px !important;color:#fff; 
		display:flex; align-items:center; justify-content:center; text-indent:0;}
	.InfoBox>a.close {position:absolute;right:15px;top:9px; text-indent:0;}
	/* 20180703 인포박스 */

	#Contents .Content .Cont .GraphCheck dd {text-indent:-3000px !important;}
	#Contents .Content .Cont .GraphCheck dd a {width:26px; height:26px; }
	#Contents .Content .Cont .GraphCheck dd a:nth-child(1) {background:#666 url(../../images/bcc/common/info_icon.png) no-repeat center center;border-radius:50px;color:#fff;font-size:0;}
	#Contents .Content .Cont .GraphCheck dd a:nth-child(3) {background:#5175b0 url(../../images/bcc/common/statistical_icon.png) no-repeat center center; border-radius:50px;font-size:12px;color:#fff;margin-left:10px; font-size:0;}
}

@media all and (max-width : 410px){
	#Contents .Content .Cont .GraphCheck span input[type=checkbox] {margin-right:5px;}

	#Contents .Content .Cont h3 {font-size:16px; text-align:center;padding:0;margin:0;}
	.titleNotice {margin-top : 15px; margin-bottom: 15px; }
	#Contents .Content .Cont .ControlBox .ManualControl {width:calc(50% - 10px);}
	#Contents .Content .Cont .ControlBox .AutoControl { width:calc(50% - 10px); }
	
	#Contents .Content .Cont .GraphCheck>h3 a {font-size:18px;}
	#Contents .Content .Cont .S_up>h3 a {font-size:18px;}

	#Contents .Content .Cont .ControlBox .TraceControl dd a.Plus {position:absolute;right:0px;top: 50%;height: 13px;/* vertical-align: middle; */ margin-top:-13px;}
	#Contents .Content .Cont .ControlBox .TraceControl dd a.Minus {position:absolute;right:0px;top:50%; height: 13px;}

	.calc_E {height:calc(100% - 182px);}
	.Help_copyright {width:100%; height:55px; background:#e5e8ed; display:flex; align-items:center; justify-content:center; padding:0 10px;}
}

@media all and (max-width : 340px){
	#Header hgroup h1 a {background:none;padding-left:0;}
	#Contents .Content .Cont .GraphInfo {margin-top:55px;}

	#Contents .Content .Cont .GraphCheck dt {width:75%;}
	#Contents .Content .Cont .GraphCheck dd {width:25%;}

	#Contents .Content .Cont .ControlBox .ManualControl {width:calc(50% - 7px);}
	#Contents .Content .Cont .ControlBox .AutoControl { width:calc(50% - 7px); }

	#Contents .Content .Cont .ControlBox .SpeedControl {position:inherit; display:flex; align-items:center; margin:0; width:33%;}
	#Contents .Content .Cont .ControlBox .SpeedControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .ShowgridControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0; width:33%;}
	#Contents .Content .Cont .ControlBox .ShowgridControl dd {display:flex; align-items:center;}

	#Contents .Content .Cont .ControlBox .TraceControl {position:inherit;left:0px;top:0px; display:flex; align-items:center; margin:0; width:33%;}
	#Contents .Content .Cont .ControlBox .TraceControl dd {display:flex; align-items:center; text-align:right;}
	#Contents .Content .Cont .ControlBox label {color:#000;}
	#Contents .Content .Cont .ControlBox input[type=number] {vertical-align:middle;border:0px;width:55px;height:24px;padding-left:5px;}
	
	#Contents .Content .Cont .GraphCheck dt label {line-height:18px; font-size:13px;}
	
	.HelpHeader h1:before {background-image:none;}
	.HelpHeader h1 {padding:0;}
	.help_title_menu a {font-size:13px;}
	
	.web_logo{display: none !important;}
	.mo_logo{display: none !important;}
}


@media all and (max-width : 330px){
	#Contents .Content .Cont .GraphInfo {margin-top:70px;}
	
	#Contents .Content .Cont .GraphCheck dt {width:75%;}
	#Contents .Content .Cont .GraphCheck dd {width:25%;}
}