@charset "UTF-8";
/*
    [제목] 종목 테마 리스트 페이지 CSS
    [생성일] 2022-01-18
    [내용] 종목 테마 리스트 페이지 에 있는 레이아웃 스타일을 포함하고 있음.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

.list_wrap { overflow:hidden; }
.list_wrap .list_cont { position:relative; box-sizing:border-box; overflow:hidden; }
.list_wrap .list_cont.non_data { padding:20px 10px; color:#999; font-size:70%; line-height:20px; text-align:center; }

/*뉴스*/
.list_cont.horizon01 { position:relative; padding:10px; cursor:pointer; }
.list_cont.horizon01 .cm_thumb_wrap { position:absolute; top:50%; right:10px; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:70px; height:60px; border:1px solid #ededed; border-radius:10px; overflow:hidden; }
.list_cont.horizon01 .cm_thumb_wrap img { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); max-width:100%; height:100%; }
.list_cont.horizon01 .box_txt { float:left; width:calc(100% - 80px); min-height:60px; }
.list_cont.horizon01 .box_txt .date { font-size:70%; line-height:14px; }
.list_cont.horizon01 .box_txt .cm_smtxt_13 { display:-webkit-box; width:100%; max-height:40px; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; word-wrap:break-word; overflow:hidden }
.list_cont.horizon01 .box_txt .cm_smtxt_13 + .cm_smtxt { display:-webkit-box; height:40px; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all; word-wrap:break-word; overflow:hidden; }
.list_cont.horizon01.non_img .box_txt { float:none; width:100%; min-height:auto }

/*관련종목*/
.list_cont.horizon02 { margin-top:15px; overflow:hidden; }
.list_cont.horizon02:first-child { margin-top:0; }
.list_cont.horizon02 .box_txt { float:left; width:calc(100% - 175px); height:34px; font-size:80%; line-height:34px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_cont.horizon02:first-child .box_txt { font-weight:700; }
.list_cont.horizon02 .box_value { float:right; overflow:hidden; }
.list_cont.horizon02 .box_value li { float:left; width:70px; }
.list_cont.horizon02 .box_value .box_price span { display:block; text-align:right; }
.list_cont.horizon02 .box_value .box_price .price { margin-top:4px; font-size:70%; line-height:14px; }
.list_cont.horizon02 .box_value .box_price .percent { font-size:80%; line-height:16px; }

.list_cont.horizon02 .box_value .box_deal { width:75px; padding:3px 6px; margin-left:10px; border-radius:5px; background:#f4f4f4; overflow:hidden; }
.list_cont.horizon02 .box_value .box_deal span { display:block; }
.list_cont.horizon02 .box_value .box_deal .lable { font-size:7px; line-height:14px; text-align:center; }
.list_cont.horizon02 .box_value .box_deal .value { font-size:80%; line-height:14px; text-align:right; }

/*테마포커스*/
.list_cont.horizon03 { padding:20px 10px; overflow:hidden; }
.list_cont.horizon03 .box_txt { float:left; width:calc(100% - 80px); min-height:60px; }
.list_cont.horizon03 .cm_thumb_wrap { float:right; width:70px; height:60px; border-radius:3px; }
.list_cont.horizon03 .cm_thumb_wrap img { display:block; width:100%; height:100%; }
.list_cont.horizon03 .box_desc { display:-webkit-box; float:left; width:100%; height:60px; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:keep-all; word-wrap:break-word; overflow:hidden; }
.list_cont.horizon03 .box_keyword { float:left; overflow:hidden;}
.list_cont.horizon03 .box_keyword .word { padding-right:2px; border-bottom:1px solid #777; line-height:20px; }
.list_cont.horizon03 .box_keyword span + span { margin-left:10px; }
.list_cont.horizon03 .box_keyword span:last-child { margin-right:10px; }

/*이슈종목/테마, 체결 순위*/
.list_cont.horizon04 { overflow:hidden; }
.list_cont.horizon04 + .list_cont.horizon04 { margin-top:10px; }
.list_cont.horizon04 .box_label { float:left; width:180px; }
.list_cont.horizon04 .box_label .box_tit { height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_cont.horizon04 .box_label .ic_new { display:inline-block; margin-left:5px; margin-top:-2px; font-family:BMJUA; vertical-align:middle; }
.list_cont.horizon04 .box_value { float:right; width:70px; line-height:40px; text-align:right; }
.list_cont.horizon04 .box_value small { font-size:90%; }
.list_cont.horizon04 .box_value .num { font-size:75%; }

.list_cont.horizon04.up .box_label .box_subtit .value { color:#e8373d; }
.list_cont.horizon04.up .box_value { color:#e8373d; }

.list_cont.horizon04.down .box_label .box_subtit .value { color:#373fe8; }
.list_cont.horizon04.down .box_value { color:#373fe8; }

/*메인 카테고리 리스트 (가운데 정렬로 테이블로 코딩)*/
.list_cont.horizon05 td { padding:10px; }
.list_cont.horizon05 td + td { padding-left:0; }
.list_cont.horizon05:first-child td { padding-top:20px; }
.list_cont.horizon05:last-child td { padding-bottom:20px; }
.list_cont.horizon05 .cm_thumb_wrap { display:inline-block; width:70px; height:60px; border-radius:3px; }
.list_cont.horizon05 .cm_thumb_wrap img { display:block; width:100%; height:100%; }


/*유사 테마*/
.list_cont.vertical01 { float:left; width:calc(50% - 4px); padding:7px 10px 10px; margin-right:8px; margin-top:8px; border:1px solid #ddd; border-radius:10px; }
.list_cont.vertical01:nth-child(1) { margin-top:0; }
.list_cont.vertical01:nth-child(2) { margin-top:0; }
.list_cont.vertical01:nth-child(2n) { margin-right:0; }
.list_cont.vertical01 p.cm_txt { height:22px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_cont.vertical01 p.cm_smtxt { display:block; height:18px; font-size:75%; line-height:18px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_cont.vertical01 .box_desc { color:#999!important; margin-top:10px; }
.list_cont.vertical01 .box_desc span { display:block; padding:0 1px; font-size:70%; line-height:15px; overflow:hidden; }
.list_cont.vertical01 .box_desc span strong { float:right; font-weight:700; }
.list_cont.vertical01 .box_include { width:100%; padding:9px 10px 7px; margin-top:7px; border-radius:5px; background:#f4f4f4; color:#999; font-size:70%; line-height:14px; }
.list_cont.vertical01 .box_include strong { float:right; font-weight:700; }