@charset "utf-8";

/* 동일 업종 CSS */
.cs_stock_same .scroll_box{
    position: relative;
    margin: 0 -20px;
    padding: 19px 0 17px;
    vertical-align: top;
}

.cs_stock_same .scroll_box .list_info{
    position: relative;
    overflow: hidden;
    padding: 0 0 1px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cs_stock_same .scroll_box .list_info::-webkit-scrollbar{
    display:none;
}

.cs_stock_same .scroll_box .list_info .box_list{
    display: table;
    padding: 0 20px 0;
    border-collapse: separate;
    table-layout: fixed;
}

.cs_stock_same .scroll_box .list_info .box_list .list_item{
    display:table-cell;
    position: relative;
    white-space: normal;
    vertical-align: top;
    background-color:#fff;
    z-index:2;
}

.cs_stock_same .flick_box .list_info .box_list{
    display: -webkit-box-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    -o-justify-content:space-between;
    -ms-justify-content:space-between;
    justify-content:space-between;
    padding-top:19px;
}
.cs_stock_same .flick_box .list_info .box_list .list_item{
    width:calc(25% - 4.5px);
}
.cs_stock_same .flick_box .list_info .box_list .list_item + .list_item{
    margin-left:9px;
}
.cs_stock_same .flick_box .list_info .box_list .list_item .inner{
    width:auto;
}

.cs_stock_same .list_info .box_list .list_item .inner{
    display: block;
    padding: 12px 15px 13px;
    width: 156px;
    border: 1px solid #ecf0f2;
    border-radius:3px;
    white-space: nowrap;
    line-height: 16px;
    text-decoration:none;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.cs_stock_same .scroll_box .list_info .box_list .list_item .inner{
    margin:0 9px 0 0;
}
.cs_stock_same .scroll_box .list_info .box_list .list_item:last-of-type .inner{
    margin-right:0;
}

.cs_stock_same .list_info .box_list .list_item .name{
    display:block;
    font-weight:normal;
    color:#242424;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.cs_stock_same .list_info .box_list .list_item .price{
    display:block;
    margin-top:4px;
    font-size:17px;
    font-weight:bold;
    color:#242424;
}

.cs_stock_same .list_info .box_list .list_item .price_gap{
    display:block;
    margin-top:4px;
    color:#666;
}

.cs_stock_same .list_info .box_list .list_item .per{
    padding-left:4px;
}

.cs_stock_same .list_info .box_list .list_item .stock_info{
    display:block;
    margin-top:2px;
    margin-bottom:1px;
    color:#808080;
}

.cs_stock_same .list_info .box_list .list_item .stock_info .type{
    padding-left:4px;
}

.cs_stock_same .list_info .box_list .list_item .price_gap:before{
    content: '';
    display: inline-block;
    background:url(../img/sp_ico5.png) no-repeat;
    vertical-align: top;
    transform:scale(0.89);
}

.cs_stock_same .list_info .box_list .list_item[class*="up"] .price_gap{
    color:#ff6252;
}

.cs_stock_same .list_info .box_list .list_item.up .price_gap:before{
    width:12px;
    height:9px;
    margin: 4.5px 4px 0 0;
    background-position:0 0;
}
.cs_stock_same .list_info .box_list .list_item.max_up .price_gap:before{
    width:11px;
    height:11px;
    margin: 4px 4px 0 0;
    background-position:-175px 0;
}

.cs_stock_same .list_info .box_list .list_item[class*="down"] .price_gap{
    color:#1c8ff0;
}

.cs_stock_same .list_info .box_list .list_item.down .price_gap:before{
    width:11px;
    height:8px;
    margin: 4.5px 4px 0 0;
    background-position:-17px 0;
}

.cs_stock_same .list_info .box_list .list_item.max_down .price_gap:before{
    width:11px;
    height:11px;
    margin: 4px 4px 0 0;
    background-position:-189px 0;
}

.cs_stock_same .list_info .box_list .list_item.unchange .price_gap:before{
    width:11px;
    height:2px;
    margin: 8px 4px 0 0;
    background-position:-72px -4px;
}

.cs_stock_same .pager_box{
    padding: 4px 0 5px;
}
.cs_stock_same .pager_box .cmm_pgs .cmm_dpgs{
    margin:0 1px;;
}

.cs_stock_same .box_title_area{
    position: relative;
    margin-bottom: -1px;
    padding: 0 20px;
    border-bottom: 1px solid #eff2f4;
    line-height: 49px;
    background: none;
}

.cs_stock_same .box_title_area .box_title{
    display: -webkit-box-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items:center;
    -moz-align-items:center;
    -o-align-items:center;
    -ms-align-items:center;
    align-items:center;
    padding-right:30px;
}

.cs_stock_same .box_title_area .box_title .ellipsis_text{
    -ms-flex:0 1 auto;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cs_stock_same .box_title_area .stock_type{
    flex: 0 0 auto;
    padding-left:4px;
}

.cs_stock_same .box_title_area .button_fold{
    position:absolute;
    display:block;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100%;
    cursor:pointer;
}

.cs_stock_same .box_title_area .button_fold:focus{
    outline:1px solid transparent;
}

.cs_stock_same .box_title_area .button_fold .ico_arrow{
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    width: 46px;
    height: 46px;
    margin: auto;
    background: url("../img/fold_arrow.png") no-repeat 50%;
    background-size: 18px 10px;
    -webkit-background-size: 18px 10px;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
    color: rgba(0, 0, 0, 0);
}

.cs_stock_same .box_title_area ~ .api_cs_wrap{
    display:none;
}

.cs_stock_same .box_title_area.open ~ .api_cs_wrap{
    display:block;
}

.cs_stock_same .box_title_area.open .button_fold .ico_arrow{

    -webkit-transform:rotate(0);
    -moz-transform:rotate(0);
    -o-transform:rotate(0);
    -ms-transform:rotate(0);
    transform:rotate(0);
}

.cs_stock_same .box_title_area .icon_new{
    flex: 0 0 auto;
    display: inline-block;
    width: 35px;
    height: 17px;
    margin: 1px 0 0 8px;
    vertical-align: -3px;
    background: url("../img/stock_new_icon.png") no-repeat 50% 0;
    background-size: 35px 17px;
    -webkit-background-size: 35px 17px;
}

.stock_info_area{
    margin-top:-6px;
    padding-bottom:14px;
}

.stock_info_area .text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #8f8f8f;
}