@charset "utf-8";
/* CSS Document */

body{
    background-image: url('../images/topmnback.gif'), url('../images/idxback01.png'), url('../images/idxback.gif');
    background-repeat: no-repeat,  no-repeat, repeat-x;
    background-position: 100% 0%, calc(50% - 190px) 0%, 0% 500px;
    background-size: calc(50% - 540px) 30px, auto, 1px auto;    
}

#wrap{ width:1120px;margin:0px auto; color:#636363; }
header{height:120px;position:relative;z-index:auto; }
#topmn { position:absolute;z-index:auto;top:0px;right:0px; font-size:95%; letter-spacing:-0.05em; color:#ccc; background: #9bb70d; height:30px; line-height: 30px; padding:0px 10px; border-bottom-left-radius: 10px; }
#topmn>a{ color:#fff; opacity:0.7; display: inline-block; padding:0px 5px; }
#topmn>a>img{ vertical-align:-2px;  }
#topmn>a>img:hover{opacity:1 }
.idxgtxt { color:#BEE400; }
.idxytxt { color:#EDB815; }

/*navigation*/
#nav {float:right;width:600px;display:block;margin-top:55px;}
#nav>li{list-style:none;float:left;position:relative;z-index:3; font-family: "Noto Sans KR";  }
#nav>li>a {display:inline-block; width:100px; border-left: 1px solid #e6e6e6; padding:0px 25px 0px 20px; margin-bottom:20px; font-size:17px; font-weight:500; color:#000; letter-spacing:-0.05em; }
#nav>li>a.nvon { color:#9BB70D; animation-name: nvonmovie; animation-duration: 0.5s;}
@keyframes nvonmovie {
    from {color: #000;}
    to {color: #9BB70D;}
}
#nav>li>a>span{ font-family: "Malgun Gothic"; font-size: 75%; font-weight: normal; color:#999; }
#nav>li>section{
    position:absolute;z-index:4;top:40px; line-height:35px; height:35px; display:none; font-size: 110%; font-weight:400;
    background:#9CB70F; border-radius:20px; padding:0px 10px 
}
#nav>li>section>img{ position: absolute; top:-7px; }
#nav>li>section>a{float:left;display:block;padding:0px 10px; letter-spacing:-0.03em;color:#fff; opacity:0.7}
#nav>li>section>a:hover{color:#fff; opacity:1}
#logoz{ display: block; padding-top:42px; }
#voucher{ display: block; position: absolute; top:20px; left:220px; }

#ctsWrap {min-height:560px; word-break: keep-all; }

#blzone{ min-height: 420px; background: #444141 url("../images/idxlfback.png") no-repeat 50% 50%; width:380px; padding: 25px; border-radius: 7px; float: left; font-family: "Noto Sans KR"; }
#blzone>div>h1{ color:#BEE400; font-size: 115%; font-weight: 500; }
#ntcbox{ width: 380px; height:35px; line-height: 35px; background:#fff; border-radius: 5px;  margin:10px 0px 10px 0px; overflow: hidden; }
#ntcbox>ul{ position: relative; width: inherit; margin:0px;}
#ntcbox>ul>li{
    height: 35px; line-height: 35px; display: block; position: absolute; z-index: auto; top:0px; left:0px; color:#222; padding-left: 10px; border:0px;  width:calc(100% - 30px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ntcbox>ul>li>a{ color:#222; }
#ntcbox>ul>li>a:hover{ color:#589A00; }

.idxNotic{ margin:20px 0px;}
.idxNotic>h1>a{ display:block; float: right; color:#BEE400; font-size: 80%; font-weight: 400; }
.idxNotic>ul>li>a{ display:inline-block; max-width: calc(100% - 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.idxNotic>ul>li>img, .idxNotic>ul>li>span{ vertical-align: middle;}

#idxservice{ letter-spacing: -0.03em; }
#idxservice>h1{ margin-bottom: 10px; font-family: "Noto Sans KR"; }
#idxservice>div:first-of-type{ background:#fff; border-radius: 5px; float: left; width: 200px; padding:10px 20px; font-size: 165%; font-weight: 600; text-align: center; color:#000;  }
#idxservice>div:first-of-type>p{ font-size: 60%; border-top:1px dotted #ccc; margin-top:10px; padding-top:10px;  }
#idxservice>div:first-of-type+div{ padding-top:10px; width: calc(100% - 255px); color:#87867F; float: right; font-size: 110%;}
#idxservice>div.bank{ clear: both; color:#fff; font-size: 115%; font-weight: 500; padding: 10px 0px; border-bottom: 1px dotted #555; }

#quick{ text-align: center; padding:20px 0px 10px 0px;}
#quick>a{ display: inline-block; padding:0px 10px;font-size: 110%; color:#CCC; font-weight: 500;}
#quick>a:hover{ color:#E8BA00; }
#quick>a:not(:last-of-type){ border-right: 1px dotted #555; }

#anizone{ float: right; width: 670px;  min-height: 380px; position: relative; letter-spacing: -0.05em; font-weight: 600; line-height: 100%; }
#anizone .ani{display: block; position: absolute; z-index: auto; opacity: 0;}
#ani01{ bottom:5px; left:20px; }
#ani02{ bottom:0px; right: 20px;}
#ani03{ bottom:0px; right: -10px;}
#ani04{ top:60px; left:0px; font-family: "Noto Sans KR"; font-size:300%; font-weight: 600; color:#96b300; }
#ani05{ top:90px; left:70px; font-family: "Noto Sans KR"; font-size:230%;  line-height: 100%; color:#000; }
#ani06{ top:220px; left:50px; font-family: "Noto Sans KR"; font-size:120%;  }
#ani07{ top:245px; left:50px; font-family: "Noto Sans KR"; font-size:120%;  }
#ani08{ top:270px; left:50px; font-family: "Noto Sans KR"; font-size:120%;  }

#barconts { float: right; width: 670px;  min-height: 180px; font-family: "Noto Sans KR"; letter-spacing: -0.03em; }
#barconts .barz{ float: left; width: 285px; padding: 0px 20px; margin-top:30px; }
#barconts .barz:first-of-type{ border-right: 1px dotted #B2C744;}
#barconts .barz>h1{ background: url("../images/yarrow.png") no-repeat 0% 50%; padding-left: 20px; font-size: 140%; font-weight: 500; color:#fff; }
#barconts .barz>h1+p{ margin: 15px; color:#475500; font-size: 120%; font-weight: 500; line-height: 150%; }
#barconts .barz>a{ margin-left:10px; display: inline-block; background:#EDB815; border:3px solid #fff; border-radius: 20px; color:#705500; font-size: 110%; font-weight: 500; padding:5px 20px;  }

#bannerzone { clear:both; height:65px;overflow: hidden;  }
#bannerzone>ul{ list-style: none; position: relative;}
#bannerzone>ul>li{ height: 65px; line-height: 65px; display: block; position: absolute; z-index: auto; top:0px; left:0px; }
#bannerzone>ul>li>a{ display: inline-block; line-height: 1; vertical-align: middle; text-align: center; width: 181px; border:1px solid #ccc; background:#fff; border-radius: 5px; }
#bannerzone>ul>li>a>img{ vertical-align: middle; display: inline-block;}

#partner{ overflow: auto; font-family: "Noto Sans KR"; min-height: 60px; line-height: 60px; vertical-align: middle; padding: 5px 0px 0px 0px; border-top:1px dotted #ccc; }
#partner>h1{ float: left; width: 230px; color:#9BB70D; text-align: center; font-size: 160%; font-weight: 700; }
#partner>ul{ float: right; width: 890px; list-style: none; margin-bottom: 3px; }
#partner>ul>li{ display: block; width: 420px; float: left; line-height: 1.7; background:#DDDDD2; margin:0px 2px 2px 0px; padding:0px 10px ;  }

footer {  height:100px; border-top:1px dotted #ccc; overflow: auto; padding:20px 0px; letter-spacing: -0.03em; line-height: 170%; font-size: 100%;  }
footer>img{ display: block; float:left; padding:0px 0px 0px 20px; }
footer>div{ float: right; width: 890px; opacity: 0.8;}
footer>div>div{ margin-top: 10px; opacity: 0.7; }


/*popup*/
#popupsys{ display:none; }

/*bbs*/
.idxbbs{margin:7px 0px 7px 0px; list-style: none; font-family: "Malgun Gothic" }
.idxbbs>li{ line-height: 220%; width:calc(100%); font-size: 110%; letter-spacing: -0.05em; color:#c6c6c6; }
.idxbbs>li:not(:last-of-type){ border-bottom: 1px solid #555;}
.idxbbs>li>a{ color:#c6c6c6; }
.idxbbs>li>a:hover{ color:#BEE400; }
.idxntc{ display: inline-block; text-align: center; line-height: 150%; border-radius: 3px; margin-right: 5px; width: 30px; padding: 0px 3px; font-size: 90%; color:#fff; background:#636363; font-family: "Noto Sans KR" }