@charset "utf-8";
/* Main */

@import url(base.css);
@import url(common.css);

.btn_more { display:block; background:url(../images/main/main_btn_more.png) no-repeat left top; width:15px; height:15px; text-indent:-1000px; overflow:hidden;}

.Center { padding-top:0px;}

.MWrap {width:calc(100vw - 16px);float: left;padding: 10px 0;background: #c5dee7; margin-left: calc(-100vw/2 + 588px);}
.MWrap1 {width:calc(100vw - 16px);float: left;padding: 10px 0;background: #f7f8f9;margin-left: calc(-100vw/2 + 588px);}
.AlignCenter {width:1080px;position:relative;left:50%;margin-left:-580px;}

/* 100대지표 */
/* 100대지표 - 2017.10.12 */
.Top100 { width:800px; height:205px; float:left; margin-right:9px; position:relative;padding-top:10px;}
.Top100 h2 { font-size: 16px; color: #333; display: inline-block; line-height: 21px; position: absolute; left: 0px; top: 10px;}
.Top100 h2 span {color:#126d8d;}
.Top100 .BtnGroup { display:inline-block; position:absolute; left:0; top:10px; z-index:10;}
.Top100 .BtnGroup button { height:22px; width:23px; text-indent:-1000px; overflow:hidden; line-height:19px; background:url(../images/main/top100_icon_set1.png) no-repeat left top; }

.Top100 .Chart { width:100%; height:195px; overflow:hidden;}
.Top100 .Chart li { width:100%; height:195px; position:relative; padding-left:304px;}
.Top100 .Chart .ChartArea { display:block; height:180px; width:480px; padding-top:15px;}
.Top100 .Chart .ChartInfo { position:absolute; left:56px; top:70px; font-size:16px; color:#333;}
.Top100 .Chart .ChartInfo strong { display:block; font-size:24px;}

.Top100 .ControlArrow button { display:block; background:no-repeat left top; width:16px; height:39px; text-indent:-1000px; overflow:hidden; position:absolute; top:90px;}
.Top100 .ControlArrow button.CA_left {background-image:url(../images/main/top100_arrow_left.png); left:0;}
.Top100 .ControlArrow button.CA_right {background-image:url(../images/main/top100_arrow_right.png); right:0;}

.Top100 .Control { position:absolute; right:10px; top:10px;font-size:11px;}
.Top100 .Control .Page { float:left; line-height:17px; margin-right:10px;}
.Top100 .Control strong { font-weight:bold; color:#333;}
.Top100 .Control button  { background:no-repeat center center; text-indent:-1000px; overflow:hidden; width:16px; height:17px; border:#e1dede solid 1px; vertical-align:middle; float:left; margin-left:-1px;}
.Top100 .Control button.next { background-image:url(../images/main/main_control_next.png);}
.Top100 .Control button.Stop { background-image:url(../images/main/main_control_stop.png);}
.Top100 .Control button.Play { background-image:url(../images/main/main_control_play.png);}


/* 팝업존 */
.Popupzone { width:271px; height:205px; float:left; margin-bottom:10px; position:relative;}
.Popupzone:before {content:''; display:block; background:#000; opacity:0.1; position:absolute; left:0; top:0; width:1px; height:100%; box-sizing:border-box; z-index:10; }
.Popupzone:after {content:''; display:block; background:#000; opacity:0.1; position:absolute; right:0; top:0; width:1px; height:100%; box-sizing:border-box; z-index:10; }
.Popupzone h2 {font-size:15px; color:#333; line-height:36px; height:36px; padding-left:15px; border-top:#dfe4eb solid 1px;}
.Popupzone .Control { position:absolute; right:10px; top:10px;font-size:11px;}
.Popupzone .Control .Page { float:left; line-height:17px; margin-right:10px;}
.Popupzone .Control strong { font-weight:bold; color:#333;}
.Popupzone .Control button  { background:no-repeat center center; text-indent:-1000px; overflow:hidden; width:16px; height:17px; border:#e1dede solid 1px; vertical-align:middle; float:left; margin-left:-1px;}
.Popupzone .Control button.forward { background-image:url(../images/main/main_control_forward.png);}
.Popupzone .Control button.next { background-image:url(../images/main/main_control_next.png);}
.Popupzone .Control button.Stop { background-image:url(../images/main/main_control_stop.png);}
.Popupzone .Control button.Play { background-image:url(../images/main/main_control_play.png);}

.Popupzone ul { position:relative; width:271px; height:168px; overflow:hidden; z-index:1;}
.Popupzone ul:before { content:''; display:block; background:#000; opacity:0.1; position:absolute; left:0; top:0; width:100%; height:1px; box-sizing:border-box; }
.Popupzone ul:after { content:''; display:block; background:#000; opacity:0.1; position:absolute; left:0; bottom:0; width:100%; height:1px; box-sizing:border-box; }
.Popupzone ul a { display:block; height:100%;}

/* 주제별통계 */
.StatsInfoBox {width:1080px;position:relative;left:50%;margin-left:-580px;}
.StatsInfoBox h3{color:#333; margin-bottom:5px}
.StatsInfoBox ul {width:100%;position:relative;overflow: hidden;background: #fff;}
.StatsInfoBox ul>li { width:25%; float:left;background:#fff;}
.StatsInfoBox>ul>li.M_on>a {background:#f2f2f2;}
.StatsInfoBox>ul>li#statList_A>a{background:url(../images/main/stats_icon01.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_B>a{background:url(../images/main/stats_icon02.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_C>a{background:url(../images/main/stats_icon03.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_D>a{background:url(../images/main/stats_icon04.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_E>a{background:url(../images/main/stats_icon05.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_F>a{background:url(../images/main/stats_icon06.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_G>a{background:url(../images/main/stats_icon07.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_H1>a{background:url(../images/main/stats_icon08.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_H2>a{background:url(../images/main/stats_icon09.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_I1>a{background:url(../images/main/stats_icon10.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_I2>a{background:url(../images/main/stats_icon11.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_J1>a{background:url(../images/main/stats_icon12.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_J2>a{background:url(../images/main/stats_icon13.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_K1>a{background:url(../images/main/stats_icon14.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_K2>a{background:url(../images/main/stats_icon15.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_L>a{background:url(../images/main/stats_icon16.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_M1>a{background:url(../images/main/stats_icon17.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_M2>a{background:url(../images/main/stats_icon18.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_N1>a{background:url(../images/main/stats_icon19.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_N2>a{background:url(../images/main/stats_icon20.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_O>a{background:url(../images/main/stats_icon21.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_P1>a{background:url(../images/main/stats_icon22.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_P2>a{background:url(../images/main/stats_icon23.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_Q>a{background:url(../images/main/stats_icon24.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_R>a{background:url(../images/main/stats_icon25.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_S1>a{background:url(../images/main/stats_icon26.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_S2>a{background:url(../images/main/stats_icon27.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_T>a{background:url(../images/main/stats_icon28.png) no-repeat 10px 5px;}
.StatsInfoBox>ul>li#statList_U>a{background:url(../images/main/stats_icon29.png) no-repeat 10px 5px;}

.StatsInfoBox ul>li:nth-child(4n+4)>a{border-right:none;}
.StatsInfoBox ul>li:last-child>a{border-bottom:none;}
.StatsInfoBox ul>li>a { display:block;width:360px; height:50px;border-bottom:#ddd solid 1px;border-right:#ddd solid 1px;font-size:12px;padding-left:60px;padding-right:5px;line-height:14px;display:table-cell; vertical-align:middle;}
.StatsInfoBox ul>li.M_on {border-bottom:0px;background:#f2f2f2;color:#111;}
.StatsInfoBox ul>li.M_on>a {border-bottom:0px;background:#f2f2f2;color:#111;}
.StatsInfoBox ul>li.showChild>ul {height:auto;width:1080px;position:relative;float:left;background:#fff;border-bottom:1px solid #ddd;border-right:1px solid #ddd;background:#f2f2f2;/* border-top: 1px solid #ddd; */} /* 이부분은 클릭 이벤트시 클래스 지정해서 적용 */
.StatsInfoBox ul>li>ul { position:absolute; left:0; top:0; height:0; width:0; overflow:hidden;}
.StatsInfoBox ul>li li {float:left;border:none;width: 33%;}
.StatsInfoBox ul>li li:nth-child(3n) {width:359px;}
.StatsInfoBox>ul>li:nth-child(4n+1){clear:both;}
.StatsInfoBox>ul>li:nth-child(4n+2) ul { margin-left:-270px;}
.StatsInfoBox>ul>li:nth-child(4n+3) ul { margin-left:-540px;}
.StatsInfoBox>ul>li:nth-child(4n+4) ul { margin-left:-810px;}
.StatsInfoBox ul>li>ul>li a {border:none;background:#f2f2f2 url(../images/main/br.png) no-repeat 20px 15px;padding-left:30px;height:30px;line-height:30px;overflow:hidden; white-space:nowrap; vertical-align:middle; text-overflow:ellipsis;display:inline-block; max-width:360px;}
.StatsInfoBox>ul>li:last-child(width:100%;)

/* 시각화콘텐츠 */
.Visualize { height:130px;float:left;background:#fff; border:1px solid #dfe4eb;width:1080px;margin-top:10px;}
.Visualize h2 {font-size:20px; color:#333;background:url(../images/main/bottom_line.png) no-repeat center bottom;text-align:center;height:36px;padding-top:14px;}
.Visualize li {float:left;font-size:16px;margin-top:20px;}
.Visualize li a {display:block;width:260px;height:54px;margin-left:85px;padding-top:15px;}
.Visualize li:nth-child(1) a {background:url(../images/main/Visualization_icon1.png) no-repeat 0 0;padding-left:70px;}
.Visualize li:nth-child(2) a {background:url(../images/main/Visualization_icon2.png) no-repeat 0 0;padding-left:70px;}
.Visualize li:nth-child(3) a {background:url(../images/main/Visualization_icon3.png) no-repeat 0 0;padding-left:70px;}


/* 게시물목록 */
.BoardGroup { clear:both; padding-top:1px;float:left;}
.BoardGroup dl { border-right:#dee3eb solid 1px;  border-top:#dee3eb solid 1px;border-bottom:#dee3eb solid 1px; width:540px; float:left; height:150px; position:relative;}
.BoardGroup dl:nth-child(1), .BoardGroup dl:nth-child(3) {border-left:#dee3eb solid 1px;}
.BoardGroup dl:nth-child(1), .BoardGroup dl:nth-child(2) {border-bottom:0px;}
.BoardGroup dl:nth-child(4) {background:url(../images/main/guide_bg.png) no-repeat right bottom;}
.BoardGroup dl:nth-child(4) dd {padding:23px 11px;}
.BoardGroup dl:nth-child(4) dd li {float:left;}
.BoardGroup dl:nth-child(4) dd li:before {display:none;}
.BoardGroup dt { height:38px;  color:#036; font-size:15px; line-height:38px; padding-left:15px; background:#fff; border-bottom:#dee3eb solid 1px;}
.BoardGroup .btn_more { position:absolute; right:10px; top:11px;}
.BoardGroup dd { padding:18px 15px 0 15px;}
.BoardGroup dd li { position:relative; padding-left:10px; margin-bottom:5px;}
.BoardGroup dd li:before { content:''; width:3px; height:3px; display:block; background:#b4bfd0; position:absolute; left:0; top:9px;}
.BoardGroup dd li a { display:inline-block; max-width:460px; font-size:13px; overflow:hidden; white-space:nowrap; vertical-align:middle; text-overflow:ellipsis;}
.BoardGroup dd li img { vertical-align:middle; margin-left:2px;}
@media all and (max-width: 1160px){
	.MyIndex { overflow:auto;}
	.MyIndex .SetBox { margin-left:0; left:0;}
}

@media all and (max-width: 1180px){
	.MWrap {width:1080px; margin-left : 0px; }
	.MWrap1 {width:1080px; margin-left : 0px; }
	.StatsInfoBox { margin-left : 0px; left : 0px;}
	.BoardGroup { margin-left : 0px; left : 0px; }
}