@charset "UTF-8";
/*
    [제목] 종목 테마 메인페이지 CSS
    [생성일] 2022-01-13
    [내용] 메인페이지 에 있는 레이아웃, 플로우팅 버튼, 배너, 팝업 등의 스타일을 포함하고 있음.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/
.main_wrap { word-break:keep-all; }
.main_wrap .contents01 { overflow:visible; }
.main_wrap .contents01 +.contents01 { padding-top:0; }
.main_wrap .contents01::after { display:block; content:''; clear:both; }
.main_wrap .contents01 h2.cm_subtit { font-weight:700; }
.main_wrap .contents01 h2.cm_subtit .im-question { margin:-2px 0 0 0; font-size:70%; vertical-align:middle; cursor:pointer; }

.main_wrap .box_focuse { position:relative; }
.main_wrap .box_focuse .btn_arrow { opacity:0; position:absolute; top:125px; left:-31px; width:40px; height:40px; background:url('/Images/common/img-slide-arrow.png') no-repeat; background-position:0 -40px; z-index:99; }
.main_wrap .box_focuse .btn_arrow.btn_next { left:auto; right:-31px; background-position:-40px -40px;}
.main_wrap .box_focuse .btn_arrow.slick-disabled { background-position-y: 0;}

.main_wrap .box_rank { position:relative; overflow:hidden; }
.main_wrap .box_rank .box_issue { float:left; position:relative; width:380px; margin-right:30px; overflow:hidden; }
.main_wrap .box_rank .box_issue:nth-of-type(3) { margin-right:0; }
.main_wrap .box_rank .box_issue .label { position:absolute; top:8px; right:0; }
.main_wrap .box_rank .list_wrap { padding:25px 0; border-top:2px solid #222; border-bottom:1px solid #ededed; }
.main_wrap .box_rank .btn_reset { float:right; padding-right:2px; }
.main_wrap .box_rank .btn_reset .im { margin:-2px 0 0 0; font-size:90%; vertical-align:middle; }

.main_wrap .box_category { float:left; width:790px; }
.main_wrap .box_category .box_tab { overflow:hidden; }
.main_wrap .box_category .box_tab li { display:inline-block; float:left; padding:0 20px; border-radius:10px; background:#ededed; font-size:15px; line-height:35px; cursor:pointer; }
.main_wrap .box_category .box_tab li + li { margin-left:10px; }
.main_wrap .box_category .box_tab li.on { background:#222; color:#fff; }

.main_wrap .box_category .tab_cont { display:none; }
.main_wrap .box_category .tab_cont.on { display:block; }

.main_wrap .box_category .list_wrap { border-top:2px solid #222; }
.main_wrap .box_category .list_wrap .list_cont.horizon01 { width:100%; border-bottom:1px solid #ededed; }
.main_wrap .box_category .list_wrap .list_cont.horizon01 .box_txt { width:655px; }
.main_wrap .box_category .list_wrap .list_cont.horizon01 .box_txt .box_tit { display:-webkit-box; height:auto; max-height:44px; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; white-space:unset; overflow:hidden; }
.main_wrap .box_category .list_wrap .list_cont.horizon01 .cm_thumb_wrap { width:75px; height:65px; }

.main_wrap .box_category .cm_paging_wrap { margin-bottom:0; }

.main_wrap .box_info { float:right; width:380px; }
.main_wrap .box_info .box_import { position:relative; padding:25px 15px 15px; border:1px solid #ededed; border-radius:10px; }
.main_wrap .box_info .box_import table { border-collapse: separate; border-spacing: 0 10px; }
.main_wrap .box_info .box_import table tbody tr td { font-size:15px; line-height:22px;}
.main_wrap .box_info .box_import table tbody tr + tr { padding-top:15px; }
.main_wrap .box_info .box_import table tbody tr td .im { margin:-2px 5px 0 0; font-size:5px; vertical-align:middle; }

.main_wrap .box_info .box_import table tbody tr.up td.vlaue { color:#e8373d; }
.main_wrap .box_info .box_import table tbody tr.down td.vlaue { color:#373fe8; }

.main_wrap .box_info .box_import table tbody tr.down td.vlaue { color:#373fe8; }

.main_wrap .box_info .btn_reset { position:absolute; bottom:-30px; right:0; }
.main_wrap .box_info .btn_reset .im { margin:-2px 0 0 0; font-size:90%; vertical-align:middle; }

.main_wrap .box_info .box_alarm { position:relative; padding:25px 15px 0; margin-top:55px; margin-bottom:30px; border:1px solid #ededed; border-radius:10px; }
.main_wrap .box_info .box_alarm .btn_radar { padding:25px 0; overflow:hidden; }
.main_wrap .box_info .box_alarm .btn_radar img { display:block; float:left; width:32px; height:30px; margin-right:20px; }
.main_wrap .box_info .box_alarm .btn_radar .cm_txt { line-height:30px; }
.main_wrap .box_info .box_alarm .btn_radar .im { float:right; margin-top:9px; font-size:90%; vertical-align:middle; }

/* 메인 배너 */
.main_wrap .main_banner_wrap {position: relative; width: 1200px;  padding: 0;  margin: 60px auto 0;  box-sizing: border-box;  overflow: hidden;}
.main_wrap .main_banner_wrap .container {display: flex;touch-action: pan-y pinch-zoom;}
.main_wrap .main_banner_wrap .item {display: flex; flex: 0 0 100%; overflow:hidden; border-radius:10px;}
.main_wrap .main_banner_wrap .item img { width:100%; height:auto; }
.main_wrap .main_banner_wrap .box_count { display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; gap:0 3px; position:absolute; top:10px; right:10px; width:auto; height:20px; z-index:990;}
.main_wrap .main_banner_wrap .box_count .box_control{ display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-self:center; width:auto; height:20px; padding:0 10px; border-radius:10px; background-color:rgba(0,0,0,0.6); color:#fff; font-size:0.688rem; line-height:20px; justify-content:center; overflow:hidden;}
.main_wrap .main_banner_wrap .box_count .box_control b { color:#fff; font-size:0.688rem; font-weight:bold; vertical-align:middle; }
.main_wrap .main_banner_wrap .box_count .btn_all { display:flex; align-items:center; justify-content:center; position:relative; width:20px; height:20px; border-radius:15px; background-color:rgba(0,0,0,0.6); cursor:pointer; }
.main_wrap .main_banner_wrap .box_count .btn_all .im { color:#fff; font-size:10px; line-height:20px; }