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

/*리스트 레이아웃 스타일*/
.list_wrap { width:100%; max-width:1200px; height:auto; overflow:hidden; }
.list_cont { background:#fff; box-sizing:border-box; overflow:hidden; } 
.list_cont.non_list { width:100%; height:200px !important; padding:0 !important; border:1px solid #ddd; background:transparent !important; color:#777; font-size:14px !important; text-align:center; line-height:200px; } 
.list_cont.list_hidden { display:none !important; } 
.list_cont .cm_badge_wrap { display:block; float:left; }
.list_cont .cm_satisfaction { display:block; float:right; height:25px; line-height:25px; }
.list_cont .cm_mentor_name { display:block; font-size:20px; }
.list_cont .cm_mentor_name image { margin-top:-6px; font-size:80%; }
.list_cont .cm_txt{ display:block; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden; }
.list_cont .list_info { float:left; width:100%; height:75px; margin-top:10px; border:1px solid #ddd; border-top:2px solid #222; overflow:hidden; }
.list_cont .list_info .cm_btn_intro { float:right; }
.list_cont .list_info .list_info_tit { float:left; width:calc(100% - 83px); height:100%; padding:13px; border-right:1px solid #ddd; box-sizing:border-box;}


/*종목 상세 뉴스*/
.list_cont.horizon01 { position:relative; padding:20px; border-bottom:1px solid #ededed; cursor:pointer; }
.list_cont.horizon01 .cm_thumb_wrap { position:absolute; top:50%; right:20px; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:75px; height:65px; 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%); }
.list_cont.horizon01 .box_txt { float:left; width:calc(100% - 95px); }
.list_cont.horizon01 .box_txt .cm_txt { display:block; width:100%; height:22px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.list_cont.horizon01 .box_txt .cm_txt + .cm_smtxt { display:-webkit-box; 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.non_img .box_txt{ width:100%; }
.list_cont.horizon01.non_data { color:#999; font-size:13px; line-height:76px; text-align:center; cursor:default; }
.list_cont.horizon01 .box_keyword .word { padding-right:2px; border-bottom:1px solid #777; line-height:20px; }
.list_cont.horizon01 .box_keyword span + span { margin-left:15px; }
.list_cont.horizon01 .box_keyword span:last-child { margin-right:15px; }


/*테마 포커스*/
.list_cont.horizon02 { float:left; padding:20px; overflow:hidden; }
.list_cont.horizon02 .box_txt { float:left; width:calc(100% - 200px); }
.list_cont.horizon02 .box_txt .box_tit { display:block; }
.list_cont.horizon02 .cm_thumb_wrap { float:right; width:155px; height:135px; border-radius:10px; }
.list_cont.horizon02 .cm_thumb_wrap img { display:block; width:100%; height:100%; }
.list_cont.horizon02 .box_keyword .word { padding-right:2px; border-bottom:1px solid #777; line-height:20px; }
.list_cont.horizon02 .box_keyword span + span { margin-left:15px; }
.list_cont.horizon02 .box_keyword span:last-child { margin-right:15px; }
.list_cont.horizon02.non_img .box_txt { width:100%; }


/*이슈종목/테마, 체결 순위*/
.list_cont.horizon03 { overflow:hidden; }
.list_cont.horizon03 + .list_cont.horizon03 { margin-top:10px; }
.list_cont.horizon03 .box_label { float:left; width:300px; }
.list_cont.horizon03 .box_label .ic_new { display:inline-block; margin-left:5px; margin-top:-2px; font-family:BMJUA; vertical-align:middle; }
.list_cont.horizon03 .box_value { float:right; width:80px; line-height:47px; text-align:right; }

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

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


/*실시간 이슈 종목 알림*/
.list_cont.horizon04 { padding:15px 0; border-bottom:1px solid #ededed; overflow:hidden; }
.list_cont.horizon04 .box_name { float:left; width:calc(100% - 130px); text-align:left; }
.list_cont.horizon04 .box_name > span { display:block; }
.list_cont.horizon04 .box_value { float:right; width:130px; text-align:right;  }
.list_cont.horizon04 .box_value > span { display:block; }
.list_cont.horizon04 .box_value .value { font-weight:700; }
.list_cont.horizon04 .box_value .value small { font-weight:400; }

.list_cont.horizon04 .box_name .price .percent.up { color:#e8373d; }
.list_cont.horizon04 .box_name .price .percent.down { color:#373fe8; }

.list_cont.horizon04 .box_value .value.up { color:#e8373d; }
.list_cont.horizon04 .box_value .value.down { color:#373fe8; }



/*테마 상세 유사 테마*/
.list_cont.vertical01 { float:left; width:25%; height:140px; padding:20px; border-right:1px solid #ededed; border-bottom:1px solid #ededed; cursor:pointer; }
.list_cont.vertical01:last-child { border:0; }
.list_cont.vertical01 .cm_txt { text-align:center; }
.list_cont.vertical01 .box_desc { height:20px; text-align:center; overflow:hidden; }
.list_cont.vertical01 .box_desc .cm_smtxt { display:block; float:left; width:50%; padding:0 15px; color:#999; font-size:13px; line-height:20px; text-align:right; overflow:hidden; }
.list_cont.vertical01 .box_desc .cm_smtxt strong { display:inline-block; margin-left:7px; }
.list_cont.vertical01 .box_desc .cm_smtxt + .cm_smtxt { border-left:1px solid #ddd; text-align:left; }

.list_cont.vertical01 .box_include { width:100%; height:40px; padding:9px 25px; border-radius:10px; background:#f8f8f8; text-align:right; overflow:hidden; }
.list_cont.vertical01 .box_include span { color:#999; font-size:13px; line-height:22px;  }
.list_cont.vertical01 .box_include span.label { float:left; }
.list_cont.vertical01 .box_include span strong { font-weight:700; font-size:15px; vertical-align:top; }
.list_cont.vertical01 .btn_move { display:none; width:200px; padding:10px 25px; margin:0 auto; border-radius:10px; background:#f8f8f8; overflow:hidden; }
.list_cont.vertical01 .btn_move .im { float:right; font-size:95%; line-height:20px; vertical-align:middle; }

.list_cont.vertical01:hover { padding:30px 20px; }
.list_cont.vertical01:hover .box_desc { display:none; }
.list_cont.vertical01:hover .box_include { display:none; }
.list_cont.vertical01:hover .btn_move { display:block; color:#999; text-align:left; }

.list_cont.vertical01.non_data { padding:60px 20px; border-bottom:1px solid #ededed; cursor:default; }

/*-- E : 페이지 스타일 -- */