@import url(common.css);
input[type=button] {cursor:pointer}
#wrap { min-width:1080px}
/* header */
.header { height:80px}
.header .top {position:relative; height:30px; background-color:#3f3f3f}
.header .top h2 { position:absolute; top:0; left:50%; width:180px; height:30px; margin-left:-90px; text-indent:-1000px; 
background-image:url(../images/logo.png); background-repeat: no-repeat; background-position:left top; background-size:auto 90px}
.header .top .control {position:absolute; top:0; right:1px}
.header .top .control li {width:40px; height:30px; float:left; border-left:1px solid #555}
.header .top .control li:hover {background-color:#494949}
.header .top .control .min {background-image:url(../images/btn_mini.png)}
.header .top .control .win {background-image:url(../images/btn_max.png)}
.header .top .control .max {background-image:url(../images/btn_nomal.png)}
.header .top .control .cls {background-image:url(../images/btn_close.png)}
.header .top .control .cls:hover {background-color:#be1d2a}
.header .top .set {position:absolute; top:0; right:120px; width:40px; height:30px; z-index:100}
.header .top .set > li {width:40px; height:30px; background-image:url(../images/btn_set.png); background-repeat:no-repeat; background-position:center top }
.header .top .set > li:hover {background-position:center -30px; background-color:#4a4a4a}
.header .top .set .click {top:30px}

.header .menubar {position:absolute; top:0; left:3px; z-index:100}
.header .menubar li {float:left; width:28px; height:30px; background-repeat:no-repeat; background-position:left top}
.header .menubar li.on {background-position:0 -30px}
.header .menubar .bak {background-image:url(../images/back.png)}
.header .menubar .fwd {background-image:url(../images/forward.png)}

.header .lnb {position:relative; width:100%; height:50px; background:#555}
.header .lnb .menu {width:540px; height:inherit; margin-left:10px; padding-top:10px; font-family:'Noto Sans KR'; font-size:16px}
.header .lnb .menu li {float:left; width:calc(100% /4); height:30px; color:#fff; text-align:center}
.header .lnb .menu .on {color: #111; border:none; border-radius:15px; background:#fddd3f}
.header .lnb .menu li a {font-weight:400; line-height:30px}
.header .lnb .search {position:absolute; right:12px; top:12px; font-family:'Noto Sans KR'; font-size:14px; color:#fff}
.header .lnb .search input[type=text] {width:200px; height:25px; padding-left:15px; border:1px solid #777; border-radius:13px; background-color:#444; background:linear-gradient(to bottom, #222 0%,  #444 40%)}
.header .lnb .search input[type=submit] {width:30px; height:25px; text-indent:-9999px; border:none; background-color:transparent; background-image:url(../images/btn_search.png); background-position:center; background-repeat:no-repeat}
.header .lnb .search a {display:inline-block; width:40px; height:25px; text-indent:-9999px; border:none; background-color:transparent; background-image:url(../images/btn_all.png); background-position:center; background-repeat:no-repeat}

.header .lnb .rank {position:absolute; right:300px; top:12px; width:200px; height:24px; border-left:1px solid #777; padding-left:10px; background:url(../images/rank_bg.png) no-repeat right 5px}
.header .lnb .rank > li { position:relative; width:inherit; height:inherit; line-height:24px}
.header .lnb .rank_roll span { display:inline-block; color:#fc0; margin-right:5px;}
.header .lnb .rank_roll li {color:#fff; font-size:14px}
.header .lnb .rank_list { display:none; position:absolute; top:-12px; right:0; width:280px; height:340px; padding:10px 15px; border:1px solid #777; background:#555; z-index:1000}
.header .lnb .rank_list h2 {font-size:16px; color:#fff; line-height:30px; margin-bottom:5px;}
.header .lnb .rank_list > a {display:block; position:absolute; top:15px; right:15px; padding-right:10px; font-size:12px; color:#eee; background:url(../images/rank_all.png) no-repeat right 5px}
.header .lnb .rank_list ul { font-family:Gulim, Dotum; font-size:12px; color:#fff;}
.header .lnb .rank_list .tab { height:22px; border:1px solid #777}
.header .lnb .rank_list .tab li { float:left; width:50%; line-height:22px; text-align:center; height:inherit; cursor:pointer}
.header .lnb .rank_list .tab .on {background:#58b10b}
.header .lnb .rank_list .list {padding:10px 0}
.header .lnb .rank_list .list li { position:relative; line-height:22px;}
.header .lnb .rank_list .list span {position:absolute; top:0; right:5px}
.header .lnb .rank_list .list .up {color:#ffc600}
.header .lnb .rank_list .list .dn {color:#79d4ff}
.header .lnb .rank_list .list li label {display:inline-block; width:20px; text-align:center}
.header .lnb .rank_list .time { padding:5px 0 0 5px; border-top:1px solid #777; color:#ccc}

.contents {position:absolute; top:80px; left:0; bottom:121px; width:100%; overflow-y:auto; overflow-x:hidden; background-color:#eee}
.contents .top {position:relative; height:50px; font-family:"dotum, gulim"; font-size:13px}
.contents .top .pick {position:absolute; top:10px; left:30px; }
.contents .top .pick select {width:200px; height:25px}
.contents .top .pick .cat_view {width:100px; height:25px; border:1px solid #ccc; padding-right:20px; background-color:#fff; background-image:url(../images/category.png); background-position:right top; background-repeat:no-repeat}
.contents .top .pick .cat_hide {background-position:right -20px;}
.contents .top .group {position:absolute; top:20px; left:50%; width:240px; margin-left:-120px; z-index:200 }
.contents .top .group select {width:190px; height:30px; padding:0 10px; background: url(../images/group.png) #fff no-repeat 95% 50%; border:none; border-radius:15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none}
.contents .top .group .cnt {font-size:15px}
.contents .top .sort {position:absolute; top:10px; right:30px; }
.contents .top .sort li {display:inline-block}
.contents .top .sort li input {width:80px; text-align:center; border:none; color:#fff; line-height:24px;  background-color:#999}
.contents .top .sort li.on input {background-color:#38a526}
.contents .top .mode li input {width:25px; text-indent:-999px; background-image:url(../images/btn_all.png); background-repeat:no-repeat}
.contents .top .mode li:first-child input {background-image:url(../images/view_mode1.png);}
.contents .top .lately {position:absolute; top:10px; left:140px; height:28px; margin-right:80px; overflow:hidden}
.contents .top .lately h2 {display:inline-block; color:#38a526; font-size:12px; margin-right:10px}
.contents .top .lately li {display:inline-block; padding-left:10px; font-size:12px; margin-right:5px; margin-bottom:5px; font-family:Gulim, Dotum; color:#555; line-height:25px; border:1px solid #ddd; cursor:pointer; background-color:#f8f8f8}
.contents .top .lately li a {display:inline-block; width:15px; text-align:center; margin:0 5px; line-height:13px}

.contents .move {position:absolute; top:20px; left:50%; width:450px; height:0; margin-left:-225px; z-index:100}
.contents .move .fl input {float:right}
.contents .move .fr input {float:left}
.contents .move input {display:block; margin:0 2px; text-indent:-9000px; width:30px; height:30px; border:1px solid #ccc; border-radius:15px; background-color:#fff; background-repeat:no-repeat; opacity:0.7}
.contents .move input:hover {border:1px solid #ff7719; background-color:#fff; opacity:1}
.contents .move .start {background-image:url(../images/btn_move_left.png); background-position:0 -60px}
.contents .move .start:hover {background-position:-30px -60px}
.contents .move .first {background-image:url(../images/btn_move_left.png); background-position:0 0}
.contents .move .first:hover {background-position:-30px 0}
.contents .move .prev {background-image:url(../images/btn_move_left.png); background-position:0 -30px}
.contents .move .prev:hover {background-position:-30px -30px}
.contents .move .next {background-image:url(../images/btn_move_right.png); background-position:-30px 0}
.contents .move .next:hover {background-position:0 0}
.contents .move .last {background-image:url(../images/btn_move_right.png); background-position:-30px -30px}
.contents .move .last:hover {background-position:0 -30px}
.contents .move .end {background-image:url(../images/btn_move_right.png); background-position:-30px -60px}
.contents .move .end:hover {background-position:0 -60px}

.category {position:absolute; top:35px; left:30px; bottom:50px; width:550px; padding:10px; border:1px solid #ccc; box-shadow:3px 3px 3px #ccc; overflow-y:auto; background:#fff; z-index:100; display:none}
.category div {float:left; width:150px;; margin:0 10px}
.category dl {width:150px; margin-bottom:50px}
.category dl dt {font-size:13px; line-height:24px; text-align:center; font-weight:bold; background:#eee}
.category dl dd {font-size:12px; line-height:24px; padding-left:5px; margin-bottom:1px}
.category dl dd.on { background:#ffefa2}
.category dl dd a {white-space:nowrap}
.category dl dd a:hover { color:#f00}

/* 메인 */
.thema_list {padding:20px 0px; text-align:center}
.thema_list > div {width:360px; display:inline-block; margin-bottom:50px; margin:0 10px; text-align:left; vertical-align:top; box-shadow:2px 2px 3px #ccc}
.thema_list h2 {position:relative; height:40px; font-family:"Nanum Gothic"; font-weight:500; padding-left:40px; color:#fff; background-color:#55a915}
.thema_list h2 label {display:inline-block; font-size:14px; vertical-align:top; line-height:39px}
.thema_list h2 input[type=image] {position:absolute; right:10px; top:8px; display: none}
.thema_list h2 p { display:inline-block; line-height:39px; font-family:"Noto Sans KR"; font-size:17px; font-weight:500}
.thema_list h2 .fav {display:inline-block; width:20px; height:20px; border:none; margin-left:5px; vertical-align:middle; background-image:url(../images/favorite.png); background-position:0 -1px}
.thema_list h2 .on {background-position:0 -21px}
.thema_list h2 span {position:absolute; top:10px; left:5px; display:block; width:25px; line-height:20px; text-align:center; font-size:12px; color:#eee; border:none; border-radius:3px; background-color:#444}
.thema_list h2.best {background-color:#f46847}
.thema_list h2.best span {top:-3px; left:5px; width:31px; height:33px; text-indent:-3px; padding-top:13px; color:#fff; font-size:14px; border-radius:0px; background-image:url(../images/best_bg.png); background-repeat:no-repeat; background-color:transparent}
.thema_list dl {position:relative; height:30px; background-color:#ddd }
.thema_list dl dd {float:left; line-height:30px; font-family:'gulim'; font-size:12px; font-weight:300; text-align:center; cursor:pointer}
.thema_list div > ul > li {height:30px; font-family:'gulim'; font-size:12px; font-weight:300; border-bottom:1px solid #eee; cursor:pointer; background-color:#fff}
.thema_list div > ul > li a {float:left }
.thema_list div > ul > li p {float:left; line-height:30px; text-align:right;}
.thema_list div > ul > li p span {display:block; float:left}
.thema_list div > ul > li p .chg em, .chg em {text-align:right; padding-left:10px; background-image:url(../images/chg_bl.png); background-repeat:no-repeat}
.thema_list div > ul > li p.s1 em {background-position:0 0}
.thema_list div > ul > li p.s2 em {background-position:0 -23px}
.thema_list div > ul > li p.s3 em {background-position:0 -98px}
.thema_list div > ul > li p.s4 em {background-position:0 -73px}
.thema_list div > ul > li p.s5 em {background-position:0 -48px}
.thema_list div > ul .blink { background-color:#d3e6ea}
.thema_list div > ul .cht { height:100%; float:left; padding-top:5px}
.thema_list div > ul .cht ul {position:relative; width:5px; height:20px; margin:0 auto}
.thema_list div > ul .cht ul li {background:#888}
.thema_list div > ul .cht .cht-bdy {position:absolute; top:10%; left:0; width:5px; height:20%}
.thema_list div > ul .cht .cht-til {position:absolute; top:5%; left:2px; width:1px; height:50%}
.thema_list div > ul .cht .up li {; background:#f10a0a}
.thema_list div > ul .cht .dn li {; background:#0a66f1}
.thema_list .itm {width:80px}
.thema_list .itm span {display:block; width:78px; line-height:30px; padding-left:5px;; overflow:hidden; white-space:nowrap; /*text-overflow:ellipsis;  word-wrap:normal*/}
.thema_list .prc {width:50px}
.thema_list .chg {width:50px}
.thema_list .rat {width:50px}
.thema_list .vol {width:55px; white-space:nowrap}
.thema_list .per {width:45px}
.thema_list .cht {width:30px; height:30px}
.click { display:none; position:absolute; top:35px; right:5px; width:180px; font-family:'gulim'; font-size:12px; line-height:24px; border:1px solid #ccc; z-index:100}
.click li {color:#444; background-color:#fff; padding-left:10px; border-bottom:1px solid #eee}
.click li:hover {color:#222; background-color:#777; background:linear-gradient(to bottom, #ccc 0%,  #eee 20%)}
.up, .s1, .s2 {color:#f10a0a}
.dn, .s4, .s5 {color:#0a72f1}

/*종목팝업*/
#w-itempop-wrap {position:absolute; display:none; z-index:1000;}
.itempop { width:452px; min-height:462px; border:1px solid #555; font-size:12px; color:#222; font-family:Gulim, Dotum; background:#fff; box-shadow:1px 1px 3px #999}
.itempop .itempop-top {min-height:35px; background:#333; color:#fff}
.itempop .itempop-top dt {height:30px}
.itempop .itempop-top dt h2 {float:left; width:25%; line-height:30px; padding-left:10px}
.itempop .itempop-top dt p {float:left;  width:70%; line-height:30px}
.itempop .itempop-top dt p span {margin-right:8px}
.itempop .itempop-top dt p .chg em {background-image:url(../images/chg_bl2.png); background-repeat:no-repeat}
.itempop .itempop-top dt > a { display:block; float:right; width:5%; line-height:30px; font-size:20px; cursor:pointer; text-align:left }
.itempop .itempop-top dd { min-height:24px; padding:5px 10px; text-align:left; background-color:#555}
.itempop .itempop-top dd a {display:inline-block; margin-right:5px}
.itempop .itempop-top dd .up, .itempop .itempop-top dt .s1, .itempop .itempop-top dt .s2 {color:#ffc600}
.itempop .itempop-top dd .dn, .itempop .itempop-top dt .s4, .itempop .itempop-top dt .s5 {color:#79d4ff}
.itempop .itempop-basic { position:relative; padding:5px; margin-bottom:5px}
.itempop .itempop-basic .tab { height:18px; margin-bottom:2px; background:#eee}
.itempop .itempop-basic .tab a { display:block; float:left; width:50px; text-align:center; line-height:18px; color:#777; cursor:pointer }
.itempop .itempop-basic .tab a.on { color:#fff; background:#f46847}
.itempop .itempop-basic p {margin-bottom:5px}
.itempop .itempop-basic table {width:100%; line-height:22px; border-top:1px solid #ccc}
.itempop .itempop-basic table th {text-align:center; border-bottom:1px solid #ccc; background:#eee}
.itempop .itempop-basic table td {text-align:right; border-bottom:1px solid #ccc; padding-right:10px}
.itempop .itempop-basic table td:nth-child(3) {width:45px; padding-right:5px}
.itempop .itempop-detail {position:relative; padding:5px;}
.itempop .itempop-detail table {width:100%; line-height:20px;}
.itempop .itempop-detail thead th {width:65px; text-align:center; border-bottom:1px solid #ccc; background:#eee}
.itempop .itempop-detail thead th:first-child {width:90px}
.itempop .itempop-detail tbody th {text-align:left; padding-left:5px; border-bottom:1px solid #ddd; color:#000; background:#eee}
.itempop .itempop-detail tbody td { text-align:right; line-height:21px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; color:#222; padding-right:5px; background:#fff}
.itempop .itempop-news {padding-bottom:5px}
.itempop .itempop-news li {position:relative; margin:0 5px; padding-left:5px; line-height:21px; border-bottom:1px solid #ccc}
.itempop .itempop-news li:last-child {border-bottom:none}
.itempop .itempop-news li a {display:block; width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.itempop .itempop-news li span { position:absolute; top:0; right:0; font-size:11px}

.chg span {display:inline-block; text-align:right; margin-left:5px}
.chg span em {text-align:right; padding-left:10px; background-image:url(../images/chg_bl.png); background-repeat:no-repeat}
.s1 em {background-position:0 0}
.s2 em {background-position:0 -23px}
.s3 em {background-position:0 -97px}
.s4 em {background-position:0 -72px}
.s5 em {background-position:0 -48px}

.news_bar {display: none; position:fixed; bottom:120px; width:100%; height:25px; line-height:25px; border-top:1px solid #aaa; border-bottom:1px solid #aaa; font-size:12px; font-family:gulim; color:#444; background-color:#fff; z-index:10}
.news_bar .news_list {width:calc(100% - 52px); height:23px; padding-left:15px}
.news_bar .news_list .nm { display:inline-block; line-height:17px; padding:0 5px; margin-right:5px; color:#444; background-color:#eee}
.news_bar .news_list .tit {display:inline-block; margin-right:10px}
.news_bar .news_list .dt {color:#888;}
.news_bar .control { position:absolute; top:0; right:0; width:52px; height:23px; overflow:hidden}
.news_bar .control > li {float:left; border-left:1px solid #aaa; cursor:pointer}
.news_bar .control > li input {border:none}

/* 마이페이지 */
.my_list { height:250px; padding:0 40px; text-align:left; overflow:auto}
.my_list dl {width:230px; display:inline-block; margin:0 5px 15px; text-align:left; vertical-align:top; box-shadow:2px 2px 3px #ccc}
.my_list dl dt {position:relative; height:50px; line-height:20px; font-family:"Nanum Gothic"; font-weight:500; font-size:14px; cursor:move; padding-left:35px; color:#fff; background-color:#777}
.ui-sortable-disabled dl dt { cursor:default}
.my_list dl dt label {font-size:12px; line-height:1}
.my_list dl dt input[type=image] {position:absolute; right:5px; top:10px}
.my_list dl dt.pick {background-color:#3aac26}
.my_list dl dt.pick span {background-color:#2a5f41}
.my_list dl dt span {position:absolute; top:10px; left:5px; display:block; width:25px; line-height:20px; text-align:center; font-size:12px; color:#eee; border:none; border-radius:3px; background-color:#444}
.my_list dl dd {position:relative; line-height:30px; font-family:'gulim'; font-size:12px; font-weight:300; padding-left:10px; border-bottom:1px solid #eee; background-color:#fff}
.my_list dl dd p {position:absolute; top:0px; right:5px; display:block; line-height:30px;}
.my_list .click {position:absolute; top:45px; right:5px; width:180px; font-family:'gulim'; font-size:12px; line-height:24px; border:1px solid #ccc; z-index:100}
.my_list .click li {color:#444; background-color:#fff; padding-left:10px; border-bottom:1px solid #eee}
.my_list .click li:hover {color:#222; background-color:#777; background:linear-gradient(to bottom, #ccc 0%,  #eee 20%)}

/* 분석 */
.overview {position:relative; height:230px; margin:0 30px 20px}
.overview .tit { position:relative; width:350px; height:36px; line-height:36px}
.overview .tit label {display:inline-block; margin-right:5px; font-size:12px; color:#fff; padding:0 5px; line-height:20px; background-color:#999}
.overview .tit h2 {display:inline-block; font-family:"Noto Sans KR"; font-size:20px; font-weight:500 }
.overview .tit .add {display:block; position:absolute; top:5px; right:5px; height:24px; line-height:22px; padding:0 5px; border:1px solid #ddd; font-size:12px; font-family:Gulim, Dotum; font-weight:300; color:#999; background-color:#fff;}
.overview .tit .addon {color:#fff; background-color:#2fa619}
.overview .pic {position:relative; width:350px; height:194px; overflow:hidden}
.overview .pic img {width:350px; height:auto; margin-top:-18px;}
.overview .pic li {position:absolute; left:0; bottom:0; width:100%; height:30px; line-height:20px; text-align:left; padding:5px 10px; color:#fff; font-family:gulim; font-weight:500; background-color:rgba(0,0,0,0.7)}
.overview .pic li span {display:block; float:left; margin-right:5px; font-size:14px; font-family:"Nanum Gothic"; font-weight:400 }
.overview .pic li span:nth-child(2) {width:30%}
.overview .pic li em {display:inline-block; font-style:normal; font-size:10px; font-weight:normal; line-height:25px}
.overview .pic .up {color:#ff7800; margin-right:10px}
.overview .pic .dn {color:#14b1fe}
.overview .sum {position:absolute; top:0; left:360px; right:0; min-width:480px; height:230px; border:1px solid #ccc; background:#fff}
.overview .sum .tab {height:35px; border-bottom:1px solid #ddd; background:#f8f8f8}
.overview .sum .tab a {display:block; float:left; width:100px; line-height:35px; text-align:center; color:#777; border-right:1px solid #ccc; font-family:'Noto Sans KR'; font-size:14px}
.overview .sum .tab a.on { color:#169601; font-weight:500; background:#fff}
.overview .sum .ctt { height:193px; overflow-x:hidden; overflow-y:auto}
.overview .sum .ctt > div { margin:20px 5px}
.overview .sum .ctt * {font-size:14px !important; font-family:"Nanum Gothic"; line-height:1.6 }
.overview .sum .line { position:relative; border-bottom:1px solid #ddd; margin:0 15px; cursor:pointer; padding:0 5px}
.overview .sum .line .dt { position:absolute; right:0; color:#888; padding-left:10px}
.overview .sum .ctt .line a {line-height:30px;}
.overview .move {display:none}

.contents .list {position:fixed; top:374px; bottom:115px; width:100%; padding:0 15px; border-top:1px solid #ccc; font-size:12px; font-family:Gulim, Dotum; background:#fff; transition:all 0.5s ease .1s; z-index:10}
.contents .list .rnk {width:70px; text-align:center}
.contents .list .itm {width:120px; text-align:left; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.contents .list .prc {width:70px; text-align:right; padding-right:10px}
.contents .list .chg {width:70px; text-align:right; padding-right:10px}
.contents .list .rat {width:70px; text-align:right; padding-right:10px}
.contents .list .avr {width:80px; text-align:right; padding-right:10px}
.contents .list .vol {display:none}
.contents .list .vch {display:none}
.contents .list .tot {display:none}
.contents .list .per {display:none}
.contents .list .pbr {display:none}
.contents .list .ctt {position:absolute; left:400px; right:0; width:calc(100% - 420px); padding-left:10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.contents .list .th {height:40px; color:#444; border-bottom:2px solid #3aac26; background:#fff}
.contents .list .th ul {position:relative}
.contents .list .th ul > li {float:left; line-height:40px; text-align:center; padding:0; cursor:pointer}
.contents .list .th ul > li.ctt, .contents .list .th ul > li.rnk {cursor:default}
.contents .list .th .btn {position:absolute; top:10px; right:10px; width:100px; height:21px}
.contents .list .th .btn input {display:none; float:left}
.contents .list .th .btn input.on {display:block; border:none; border-radius:5px; margin-right:5px; padding:0 10px; line-height:18px; color:#fff; padding-top:3px; background-color:#2fa619}
.contents .list .th .btn_up {display:block; float:left; width:21px; height:21px; background-image:url(../images/list_up.png)}
.contents .list .td {height:calc(100% - 40px); overflow-y:auto}
.contents .list .td ul {position:relative; clear:both; height:40px; border-bottom:1px solid #eee; background:#fff}
.contents .list .td ul > li {float:left; line-height:40px}
.contents .list .td ul > li.itm {cursor:pointer}
.contents .list.listup {top:80px; transition:all 0.5s ease .1s; z-index:10}
.contents .list.listup .th .btn_up {background-position:0 -21px}
.contents .info .ctt {display:none}
.contents .info .vol {display:block; width:100px; text-align:right}
.contents .info .vch {display:block; width:80px; text-align:right; white-space:nowrap}
.contents .info .tot {display:block; width:80px; text-align:right}
.contents .info .per {display:block; width:60px; text-align:right}
.contents .info .pbr {display:block; width:60px; text-align:right}
#anal_list .list {position:absolute; top:50px;}

.news {position:absolute; top:50px; bottom:0; width:100%; font-size:12px; font-family:Gulim, Dotum; overflow-y:auto; border-top:1px solid #ccc}
.news dl {clear:both; min-height:30px; border-bottom:1px solid #eee; background:#fff}
.news dl > li {float:left; height:30px; line-height:30px}
.news dt {position:relative; height:36px; line-height:36px}
.news .emp { background-color:#d3e6ea}
.news dt .cat {display:block; float:left; width:120px; height:inherit; font-size:12px; padding-left:20px;  border-right:1px solid #eee; color:#c42e2e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.news dt .tit {position:absolute; top:0; left:120px; right:120px; padding-left:10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; cursor:pointer}
.news dt .dat {display:block; float:right; width:120px; font-size:12px; color:#777}
.news dd {display:none; font-size:14px; padding:10px 80px 30px 130px; border-top:1px solid #eee; line-height:1.8; white-space:pre-wrap}
.news dd p {margin-bottom:20px}
.news .on dt { height:50px; font-size:18px; line-height:50px}
.news .on dd {display:block}
.news .more {text-align:center; font-size:16px; font-family:Noto Sans KR; padding-right:65px; line-height:50px; cursor:pointer; background:url(../images/news_more.png) #f8f8f8 no-repeat 50% 19px}

.login {position:absolute; top:30px; bottom:0; width:100%; background:#494949}
.login_box {position:absolute; top:50%; left:50%; width:500px; height:340px; margin:-180px 0 0 -250px; font-size:14px; font-family:Nanum Gothic; font-weight:400; box-shadow:1px 1px 5px #333; background:#f1f1f1}
.login_box .top {height:40px; padding-left:20px; line-height:39px; color:#fff; margin-bottom:30px; font-family:Noto Sans KR; font-weight:500; font-size:18px; background:#23b400}
.login_box .mem_class {padding-left:70px; margin-bottom:10px}
.login_box .mem_class select {width:220px}
.login_box > div {margin:0 20px}
.login_box h2 {font-family:Noto Sans KR; font-size:24px; font-weight:500; margin-bottom:20px}
.login_box .ipt {position:relative; height:95px; margin-bottom:5px}
.login_box .ipt li {margin-bottom:5px; line-height:40px;}
.login_box .ipt label { display:inline-block; width:65px}
.login_box .ipt input {height:40px; width:220px; border:1px solid #ccc; padding-left:5px}
.login_box .ipt .btn {position:absolute; right:0; top:2px}
.login_box .ipt .btn input[type=submit] {width:160px; height:85px; color:#fff; font-size:18px; border:none; background:#23b400;}
.login_box .chk {padding-left:70px; padding-bottom:20px; border-bottom:1px solid #ccc}
.login_box .chk label {margin-right:10px}
.login_box .member {padding-left:70px; padding-top:20px; font-size:13px; line-height:24px; border-top:1px solid #fff;}
.login_box .member li {margin-bottom:5px}
.login_box .member a {display:block; width:160px; float:right; text-align:center; color:#fff; background:#999}
.login_box .member .join a {background:#777}

.thema_all {padding:0px}
.thema_box {float:left; width:350px; margin:10px; background:#fff}
.thema_box h2 {color:#fff; text-align:center; font-size:14px; line-height:30px; margin-bottom:5px; background-color:#777}
.thema_box div  ul {height:30px; margin:0 10px}
.thema_box div  ul li {float:left; font-size:12px; line-height:30px; font-family:Gulim}
.thema_box div  ul .nam {width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.thema_box div  ul .nam span { display:inline-block; min-width:18px; height:17px; line-height:17px; background:#ddd; margin-right:5px; text-align:center }
.thema_box div  ul .rat {width:60px; text-align:right}
.thema_box div  ul .upi {width:40px; text-align:right}
.thema_box div  ul .dni {width:40px; text-align:right}
.thema_box div  ul .avr {width:80px; text-align:right}
.thema_box div  ul:first-child  {border-bottom:1px solid #ccc}


.search_title {font-size:18px; line-height:50px; padding:0 5%; font-family:"Noto Sans KR"; font-weight:500}
.search_title span {font-size:12px; font-family:Gulim; color:#e21}
.search_result {position:absolute; top:50px; bottom:0; width:100%; padding-top:20px; font-family:Gulim, Dotum; background:#fff; overflow-y:auto; border-top:1px solid #777}
.search_thema {family:"Nanum Gothic"}
.search_thema h2 { height:60px; margin:0 5%; font-size:18px; line-height:20px; font-family:"Noto Sans KR"; font-weight:700; margin-bottom:10px; color:#e61; cursor: pointer;}
.search_thema h2 > span {display:inline-block; min-width:40px; line-height:20px; vertical-align:top; text-align:center; border:none; border-radius:3px; margin-right:5px; font-size:14px; font-weight:400; color:#fff; background-color:#aaa}
.search_thema h2 > label {display:inline-block; min-width:40px; border:none; border-radius:3px; vertical-align:top; text-align:center; line-height:20px; font-size:13px; font-weight:400; color:#fff; background-color:#f3735a}
.search_thema h2 li { padding:0 5px; display:inline-block; font-size:14px; color:#444; margin-right:10px}
.search_thema .add {display:inline-block; height:24px; line-height:22px; padding:0 5px; border:1px solid #ddd; margin-left:10px; font-size:12px; font-family:Gulim, Dotum; font-weight:300; color:#999; background-color:#fff;}
.search_thema .addon {color:#fff; background-color:#2fa619}
.search_thema dl {}
.search_thema > ul {margin:0 5%; font-size:13px; margin-bottom:20px; border-bottom:1px solid #ddd; padding-bottom:10px;}
.search_thema > ul > li {margin-bottom:10px; cursor:pointer; color:#444}
.search_thema > ul h3 {margin-bottom:10px; font-weight:700}
.search_thema > ul b {font-weight:700}
.search_thema .s-item li {margin-bottom:20px;}
.search_thema .s-item li p { display:inline-block; margin-right:5px}
.search_thema .s-item li p.itm {color:#222}
.search_thema .s-item li p.itm span {font-weight:normal}
.search_thema .s-item li p span {display:inline-block; margin-left:5px}
.search_thema .s-item li p .chg { padding-left:10px; background-image:url(../images/chg_bl.png); background-repeat:no-repeat}
.search_thema .s-item li .s2 .chg {background-position:0 -21px; }
.search_thema .s-item li .s5 .chg {background-position:0 -46px; }
.search_thema .s-item li p.ctt { display:block; max-width:90%; word-break:keep-all; padding-top:5px; padding-left:10px; margin-bottom:10px; line-height:1.5; background:url(../images/bl_sch.png) no-repeat 0 11px}
.search_thema .s-news li {padding-left:10px; background:url(../images/bl_sch.png) no-repeat left center}
.search_thema .s-news li p {display:inline}
.search_thema .s-news li span {color:#888; padding-left:15px}

.bottom {position:fixed; bottom:22px; width:100%; height:99px; font-size:12px; font-family:gulim; color:#777; border-top:1px solid #ccc; background:#fff; z-index:20}
.g-market {height:29px; background:#f4f4f4}
.g-market ul {margin:0 15px}
.g-market ul li { float:left; margin-right:15px; line-height:30px}
.g-market ul li label {margin-right:5px}
.g-market ul li p {display:inline-block}
.g-market ul li p .chg {display:inline-block; margin-left:10px; padding-left:10px; background-image:url(../images/chg_bl.png); background-repeat:no-repeat}
.g-market ul li .up .chg {background-position:0 -17px; }
.g-market ul li .dn .chg {background-position:0 -42px; }
.t-list {height:70px; border-top:1px solid #aaa; background:#fff}
.t-list > div {position:relative;  padding:0}
.t-list .t-btn {position:absolute; top:-25px; right:5px; width:115px; height:25px; padding-top:3px; text-align:center; border:1px solid #aaa; border-bottom:1px solid #fff; border-radius:3px 3px 0 0; background:#fff}
.t-list .t-btn .t-all {display:inline-block; width:80px; height:21px; color:#222; line-height:21px; padding-left:5px; text-align:center; vertical-align:top; border:1px solid #ddd; border-radius:3px; background:#eee }
.t-list .t-btn .t-up {display:inline-block; width:21px; height:21px; line-height:21px; vertical-align:top; background-image:url(../images/list_up.png)}
.t-list ul {height:70px; overflow-y:auto}
.t-list ul li {float:left; position:relative; width:192px; height:35px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:0 15px}
.t-list ul li label { display:inline-block; width:17px; height:17px; border:1px solid #4c9e0e; text-align:center; line-height:17px; color:#fff; margin-right:5px; background:#55a915}
.t-list ul li a {display:inline-block; width:120px; line-height:34px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.t-list ul li span { position:absolute; right:15px; text-align:right; line-height:34px}

.footer {position:fixed; bottom:0; width:100%; height:22px; border-top:1px solid #ccc; background:url(../images/size.png) no-repeat #f0f0f0 right bottom; z-index:100}
.footer ul { padding:0 15px}
.footer ul li { float:right; font-size:14px;}
.footer ul li a {display:inline-block; margin-right:10px; padding:0 10px; border:1px solid #777; border-radius:5px; color:#fff; font-size:12px; background:#888}
.footer #time {width:85px; height:20px; font-size:14px; color:#222; border:none; border-radius:10px; padding-left:22px; line-height:19px; background:url(../images/ico_time.png) no-repeat}

/*체크박스*/
.checks {position: relative; height:30px; font-size:12px; line-height:30px; overflow:hidden}

.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute; width: 1px;  height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;
}
.checks input[type="checkbox"] + label {
  display: inline-block;  position: relative;  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 15px;  /* 체크박스의 너비를 지정 */
  height: 15px;  /* 체크박스의 높이를 지정 */
  line-height: 15px; /* 세로정렬을 위해 높이값과 일치 */
  vertical-align: middle;
  background: #eee;
  border: 1px solid #cacece;
  border-radius : 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.5), inset 0px -15px 10px -12px rgba(0,0,0,0.5);
}

.checks.etrans input[type="checkbox"] + label {
  padding-left:25px; overflow:hidden
}
.checks.etrans input[type="checkbox"] + label:before {
  position: absolute; left:0; top:6px; margin-top: 0; opacity: 0.6; box-shadow: none; border-color: #ef9800;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.checks.etrans input[type="checkbox"]:checked + label:before {
  position: absolute; content: ""; width: 11px;  top: 0px; left: 0px; border-radius: 2px; border-width:2px; opacity:1;
  background: transparent; border-color:transparent #ef9800 #ef9800 transparent;
  border-top-color:transparent;
  border-left-color:transparent;
  -ms-transform:rotate(40deg);
  -webkit-transform:rotate(40deg);
  transform:rotate(40deg);
}
/* mobile */
@media only screen and (max-width:640px){
	#wrap {min-width:360px}
    .header .menubar {display:none}
    .header .top {height: 40px}
	.header .top .control {display:none}
    .header .top .ht {display: none}
    .header .top .set {display: none}
	.header .top h2 {margin-left:0; left: 0; top: 5px; background-position:left 0 top -15px; background-size:auto 45px}
    .header .lnb {height: 40px}
    .header .lnb .menu {width: 100%; padding-top: 0; margin-left: 0; display: flex; justify-content:space-around; align-items: center; font-size: .9em}
    .header .lnb .menu li {width: auto}
    .header .lnb .menu .on {padding: 0 5px}
    .header .lnb .search {position: fixed; top: 5px; right: 5px}
    .header .lnb .search input[type=text] {width: 120px}
    .contents .move {position:fixed; top: 90px; width: 100%; margin-left: -50%; z-index: 100}
    .contents .top {padding-top: 10px}
    .contents .top .group {position: static; margin: 0 auto; text-align: center}
    .contents .top .group select {width: 140px}
    .thema_list {padding: 10px 0}
	.login_box {left:0; width:100%; margin:0}
    .thema_list > div {margin-bottom: 20px}
    .overview {height: auto; margin: 0 10px}
    .overview .tit {position: absolute; width: 100%; z-index: 10}
    .overview .tit label {position: absolute; left:0; background-color: rgba(0,0,0,0.7)}
    .overview .tit h2 {position: absolute; left:40%; width: 60%; padding-left: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
    .overview .sum {position: static; min-width: 10%; height: 160px}
    .overview .sum .tab {height: 30px}
    .overview .sum .tab a {line-height: 30px}
    .overview .sum .ctt {height: 120px;}
    .overview .sum .ctt > div {margin: 5px; }
    .overview .pic {width: 100%; height: 100px}
    .overview .pic figure {width: 40%; height: 90px; vertical-align: top; overflow: hidden}
    .overview .pic img {width: 100%; }
    .overview .pic li {top: 30px; left: 40%; width: 60%; height: 60px; color: #555; bottom: auto; background-color: transparent}
    .overview .pic li span {margin-bottom: 5px}
    .overview .pic li span:nth-child(2) {width: 50%}
    .contents {bottom: 99px}
    .contents .top .lately h2 {display: none}
    .contents .top .pick {left: 10px}
    .contents .top .lately {left: 120px; margin-right: 10px}
    .contents .top .sort {position: static; text-align: center}
    .contents .list {top: 400px; bottom:60px; font-size: 1em }
    .contents .list .rnk {width:10%}
    .contents .list .itm {width:30%}
    .contents .list .prc {width:25%}
    .contents .list .chg {width:15%}
    .contents .list .rat {width:20%}
    .contents .list .th .ctt {display: none}
    .contents .list .th .btn {width: 21px}
    .contents .list .th .btn_up {float: right}
    .contents .list .th .btn input[value=주가정보] {display: none}
    .contents .list .td ul {height: 60px;}
    .contents .list .td ul > li {line-height: 30px}
    .contents .list .ctt {position:absolute; top:25px; left:0; right:0; width:100%; padding-left:5px; color: #777}
    .category {left: 0; width: 100%; bottom: 0}
    .thema_box {width:100%; margin: 10px 0}
    .bottom {bottom: 0; display: flex; justify-content:flex-start; align-items: center; flex-direction:column-reverse}
    .bottom .t-list {width: 100%}
    .bottom .g-market {width: 100%}
    .p_analysis .bottom {height: 30px}
    .p_analysis .bottom .t-list {display: none}
    .p_all .contents .top .pick {display: none}
    .resize {display: none}
    .footer {display: none}
    #w-itempop-wrap {position:fixed; top: 0 !important; left: 0 !important; align-items: center;  width: 100%; height: 100vh; background-color: rgba(0,0,0,0.6) }
    #w-itempop-wrap .itempop { width: 100%}
    #w-itempop-wrap .itempop img {width: 100%; height: auto}
    .contents .list .td ul > li.rnk span {display: none}
}

/* ios 
.ios .header .lnb .menu li:nth-child(3),
.ios .header .lnb .menu li:nth-child(4) {display: none}*/