@CHARSET "utf-8";

.Hidden { visibility:hidden; height:0; width:0; font-size:0; padding:0;  margin:0;}


body {
	background: #e9f0f9;
	background-repeat: repeat-x;
	overflow-x: visible;
	color: #000;
	min-width:850px;
	font-size: 14px;
	line-height: 16px;
	font-family: "나눔고딕",serif;
}

/* bottom train*/

#train {
    width:100%;
    position: fixed;
    bottom:0;
	left:0;
    z-index: 6000;
}


.train_container {
    margin: 0 auto;
    overflow-y: hidden;
    width: 100%;
	height:85px;
	display: block;
	z-index: 70;
	background:url(/image/chart/rail.png) repeat-x left bottom;
}

#train_sprite {
    background:url(/image/chart/train.png) no-repeat scroll left top transparent;
    display: block;
	position:absolute;
    height: 53px;
    width: 1800px;
    z-index: 100;
	left:50%;
	bottom:25px;
	margin-left:-143px;
    
}
.train_tree { position:absolute; left:50%; top:8px; margin-left:-400px;}

/* intro */
.intro { z-index:56; position:relative;  }
.intro h1 {font-weight:bold; font-size:72px; color:#000; margin:80px 0 20px 50px; line-height:1.2; }
.intro h1 strong { display:block; font-size:40px; color:#003399; }
.intro h1 strong span { font-size:18px; color:#3366cc;}
.intro p {font-family:"나눔고딕B";  font-size:16px; color:#333; line-height:1.5; margin-left:50px;}
.intro nav.MainMenu { padding:50px 0 0 50px; }
.intro nav.MainMenu a {font-family:"나눔고딕B"; display:block; background:url(/image/chart/menu01.png) no-repeat left top; width:165px; height:134px; float:left; margin-right:30px; color:#fff; font-size:24px; text-align:center; text-decoration:none; padding-top:20px;}
.intro nav.MainMenu a:hover {height:170px;}
.intro nav.MainMenu a.MM01 { background-image:url(/image/chart/menu01.png);}
.intro nav.MainMenu a.MM02 { background-image:url(/image/chart/menu02.png);}
.intro nav.MainMenu a.MM03 { background-image:url(/image/chart/menu03.png);}
.intro nav.MainMenu a.MM04 { background-image:url(/image/chart/menu04.png);}
.intro .Logo { position:absolute; top:-40px; right:50px;}
.GoNext{ background:url(/image/chart/scroll-arrow-down1.png) no-repeat left top; text-indent:-9999px; width:88px; height:88px; opacity:0.8; position:absolute; left:50%;  bottom:150px; margin-left:-44px; z-index:55; }
.GoNext:hover {opacity:1;}


/* page common */
.Header { width:100%; height:60px; position:relative;}
.Header h1 { height:60px; background:url(/image/chart/title_png.png) no-repeat left top; width:224px; color:#fff; text-align:center; float:left; margin-right:20px;}
.Header h1 span { display:block; background:url(/image/chart/icon_train1.png) no-repeat left bottom; height:38px; font-weight:bold; font-size:24px; text-align:left; padding:22px 0 0 48px; width:100px; margin-left:40px;}
.Header .Menu { float:left; padding-top:15px; font-family:"나눔고딕B"; font-size:17px;}
.Header .Menu a { color:#fff; opacity:0.8; padding:4px 10px; line-height:1.8; letter-spacing:-1px;}
.Header .Menu a:hover { color:#fff; opacity:1; }
.Header .Menu a.M_on { border-radius:15px; opacity:1;}
.Header .Menu a.M_off { color:#fff; opacity:1;}

.Header .Pagemenu { position:absolute; right:0; top:0;z-index:500;}
.Header .Pagemenu li {border-left:#288a69 solid 1px; float:left; position:relative;}
.Header .Pagemenu li:first-child {border-left:none;}
.Header .Pagemenu a {display:block;height:22px; width:70px;  opacity:0.8; font-family:"나눔고딕B"; font-size:11px; letter-spacing:-1px; color:#fff;text-align:center; padding-top:38px;}
.Header .Pagemenu a:hover {opacity:1;}
.Header .Pagemenu li a.M_on { background-color:#000;}
.Header .Pagemenu li.Home a { background:url(/image/chart/icon_top0.png) no-repeat center 13px;}
.Header .Pagemenu li.Chart a { background:url(/image/chart/icon_top1.png) no-repeat center 12px;}
.Header .Pagemenu li.Grid a { background:url(/image/chart/icon_top2.png) no-repeat center 13px;}
.Header .Pagemenu li.Setting a { background:url(/image/chart/icon_top3.png) no-repeat center 12px;}
.Header .Pagemenu li.MenuOpen a { background:url(/image/chart/icon_top4.png) no-repeat center 14px;}
.Header .Pagemenu li a.M_on { background-color:#000; opacity:1;}
.Header .Pagemenu li a.M_on:after { content:''; display:block; background:url(/image/chart/arrow_this.png) no-repeat left top; width:21px; height:11px; position:absolute; left:50%; margin-left:-11px; top:60px;}

.Header .Pagemenu li.Setting {float:left;}
.Header .Pagemenu li.Setting a.M_on { background:#fff url(/image/chart/common/pagemenu_3_1.png) no-repeat center 12px; color:#000;}
.Header .Pagemenu li.Setting a.M_on:hover { background:#fff url(/image/chart/common/pagemenu_3_1.png) no-repeat center 12px;color:#000;}
.Header .Pagemenu div.Setting { position:absolute; right:22px; top:60px;  background:#fff; border:#333 solid 1px; z-index:1; width:137px; padding:17px 15px 15px 15px; border-top:0; height:auto; } 
/*.Header .Pagemenu .Setting:hover a { background:#fff url(/image/chart/common/pagemenu_3_1.png) no-repeat center center; opacity:1; }*/
.Header .Pagemenu div.Setting select { width:100%; margin-bottom:4px;}
.Header .Pagemenu div.Setting button { margin-top:2px; width:100%;font-family:"나눔고딕"; color:#fff; font-size:12px; background:#cc3333; border:none; padding:4px 0; cursor:pointer;}


.MenuAll { position:absolute;  display:none;top:60px; left:0; width:100%; opacity:0.8; background:#000; padding:30px 0; z-index:600;}
.MenuAll li { display:block; float:left; width:18%; height:70px; padding:7px 0 0 7%; position:relative;}
.MenuAll li li { float:none; width:auto; padding:0 0 0 0 ;height:auto;}
.MenuAll li a { color:#e1e1e1;font-family:"나눔고딕B"; font-size:13px;  position:absolute; left:7%; top:0; display:block;width:50px; height:0px;  border-radius:50px; white-space:nowrap; text-align:center; padding-top:50px; line-height:2; background:#555 url(/image/chart/icon_train1.png) no-repeat center bottom; background-size:58%; }
.MenuAll li.Menu01 a { background-image:url(/image/chart/icon_train1.png);}
.MenuAll li.Menu02 a { background-image:url(/image/chart/icon_train2.png);background-size:64%; }
.MenuAll li.Menu03 a { background-image:url(/image/chart/icon_train3.png);}
.MenuAll li.Menu04 a { background-image:url(/image/chart/icon_train4.png);}
.MenuAll li ul {}
.MenuAll li li a { float:none; font-size:12px; position:relative; left:0; background-image:none !important; background-color:#000; width:auto; height:auto;text-align:left;padding-top:0; line-height:1.6;  }
.MenuAll li a:hover { color:#fff;}

#slide1 .Header {background:#02754f;}
#slide2 .Header {background:#006666;}
#slide3 .Header {background:#1849ac;}
#slide4 .Header {background:#4c33a4;}

#slide1 .Header .Menu a.M_on { background:#014b32;}
#slide2 .Header .Menu a.M_on { background:#004141;}
#slide3 .Header .Menu a.M_on { background:#0f2f6e;}
#slide4 .Header .Menu a.M_on { background:#312069;}

#slide1 .Header h1 span { background-image:url(/image/chart/icon_train1.png);}
#slide2 .Header h1 span { background-image:url(/image/chart/icon_train2.png);}
#slide3 .Header h1 span { background-image:url(/image/chart/icon_train3.png);}
#slide4 .Header h1 span { background-image:url(/image/chart/icon_train4.png);}

#slide2 .Header .Pagemenu li {border-left-color:#267d7d;}
#slide3 .Header .Pagemenu li {border-left-color:#3a64b8;}
#slide4 .Header .Pagemenu li {border-left-color:#6751b2;}



/* 컨텐츠 상단 공통 */
.ContTop { position:relative; width:100%; top:65px; text-align:center; z-index:300;}
.BtnGroup { position:absolute; left:30px; bottom:0; background:#8ea7ca; border-radius:7px;}
.BtnGroup button {font-family:"나눔고딕B"; font-size:16px; color:#fff; background:none; border:none; padding:5px 13px; cursor:pointer;}
.BtnGroup button.M_on { background-color:#006699;border-radius:7px; box-shadow:2px 0px 2px #666;}
.DataAlign {position:absolute; right:30px; bottom:0;font-weight:bold; color:#006699; font-size:14px;}
.TotalData { font-weight:bold; color:#000; font-size:45px; text-align:center; }
.TotalData span {font-family:"나눔고딕";}
#slide1 .TotalData span {color:#02754f;}
#slide2 .TotalData span {color:#006666;}
#slide3 .TotalData span {color:#1849ac;}
#slide4 .TotalData span {color:#4c33a4;}


.ImageArea { z-index:50; }
.ImageArea img { position:absolute; bottom:25px; display:block;}
.ImageArea img#Img0-1 { margin-left:-545px; z-index:2; left:50%;}
.ImageArea img#Img0-2 { margin-left:-630px; z-index:3; left:50%;}
.ImageArea img#Img0-3 { margin-left:-400px; z-index:4; left:50%;}
.ImageArea img#Img0-4 { right:45px; top:50px; z-index:1; left:auto; left:50%;}

.ImageArea img#Img1-1 { left:20px; bottom:120px;}
.ImageArea img#Img1-2 { right:20px; bottom:60px;}
.ImageArea img#Img2-2 { right:20px;}


@media (max-width:1400px) {
	
	.ImageArea img#Img0-1 { margin-left:-580px;width:85%;}
.ImageArea img#Img0-2 { margin-left:-590px;width:85%;}
.ImageArea img#Img0-3 { margin-left:-560px;width:85%;}
.Header .Menu { font-size:15px;}
}
@media (max-width:1100px) {	
	.ImageArea img#Img0-1 { margin-left:-480px; width:80%;}
.ImageArea img#Img0-2 { margin-left:-550px; width:80%;}
.ImageArea img#Img0-3 { margin-left:-500px; width:80%;}
.intro h1 {font-size:60px; }
.Header .Menu { font-size:14px;}
.Header .Pagemenu a {display:block;width:50px;text-indent:-9999px; overflow:hidden;}
.Header .Pagemenu a:hover {opacity:1;}
.Header .Pagemenu li a.M_on { background-color:#000;}
.Header .Pagemenu li a { background-position:center center !important;}

}

@media (max-width:1024px) {
	
	.ImageArea img#Img0-1 { margin-left:-330px;width:70%;}
.ImageArea img#Img0-2 { margin-left:-330px;width:70%;}
.ImageArea img#Img0-3 { margin-left:-360px;width:70%;}
.intro h1 {font-size:55px; }
.Header .Menu { font-size:12px;}
.Header .Pagemenu a {display:block;width:40px;text-indent:-9999px; overflow:hidden;}
.Header .Pagemenu a:hover {opacity:1;}
.Header .Pagemenu li a.M_on { background-color:#000;}
.Header .Pagemenu li a { background-position:center center !important;}
}

@media (max-width:900px) {
	
	.ImageArea img#Img0-1 { margin-left:-350px;width:70%;}
.ImageArea img#Img0-2 { margin-left:-350px;width:70%;}
.ImageArea img#Img0-3 { margin-left:-380px;width:70%;}
.intro h1 {font-size:50px; }    
}
#slide1 .ImageArea, #slide2 .ImageArea, #slide3 .ImageArea, #slide4 .ImageArea { display:none;}

.Header .Pagemenu li.Setting a.M_on:after { visibility:hidden;}


.intro h1 strong span { font-size:24px; color:#3366cc;}
.intro p.Infotext1 {font-weight:bold;  font-size:20px; color:#555; line-height:1.5; margin-left:60px; margin-bottom:10px;}
.intro p.Infotext2 {font-family:"나눔고딕B";  font-size:16px; color:#336699;line-height:1.4;margin-left:60px;}

.train_copy { position:absolute; width:100%; text-align:center;bottom:4px;font-family:"나눔고딕"; font-size:11px; color:#fff; opacity:0.8;}


#inpop_info{position:absolute;width:100%;height:110px;padding-top:20px;background-color:#004060;background-image: url(/image/chart/inpop_inf_bghd_b.gif);background-repeat:no-repeat;border-bottom:solid 1px #FFF;z-index:1000}
#inpop_info h2{float:left;padding:0 20px}
#inpop_info p{color:#FFF;line-height:18px}
#inpop_info a{float:right;margin:12px 20px 0 0;padding:0 6px 0 10px;display:block;height:25px;color:#fff;line-height:25px;border-top:solid 1px #FFF;border-right:solid 1px #FFF;border-left:solid 1px #FFF;background-color:#004060}
#inpop_info a img{vertical-align:middle;margin-left:10px}

.ImgAnimated1 {
	-webkit-animation-delay:0.2s;
	-webkit-animation-name:"myLeftIn";
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode:both;}
	.ImgAnimated2 {
	-webkit-animation-delay:0.5s;
	-webkit-animation-name:"myLeftIn";
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode:both;}
	.ImgAnimated3 {
	-webkit-animation-delay:0.7s;
	-webkit-animation-name:"myLeftIn";
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode:both;}
	.ImgAnimated4 {
	-webkit-animation-delay:1s;
	-webkit-animation-name:"myLeftIn";
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode:both;}
	.ImgAnimated0 {
	-webkit-animation-delay:0s;
	-webkit-animation-name:"train";
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode:both;}
	
	@-webkit-keyframes myLeftIn{	
		0% {
			bottom:-200px;
			
		}
		
		50% { bottom:40px;}
	
		100% { 
			bottom:25px;
		}
	}
	@-webkit-keyframes train{	
		0% {left:100%;}
		100% {left:50%;}
	}