/* 공지사항 롤링 */
.rollingbanner{
    position: relative;
    width: 600px;
    height: calc(var(--lineheight)*var(--showlines) + 54px);
    font-size: 18px;
    letter-spacing: -1px;
    padding: 25px 0px;
    box-sizing: border-box;
    /* background-color: #f0f0f0; */
    border-radius: 16px;
    color: #3d3d3d;
}

/* 타이틀 */
.rollingbanner > .title{
    font-weight: bold;
    float: left;
    padding-right: 10px;
}

/* 롤링 배너 */
.rollingbanner > .wrap{
    position: relative;
    width: auto;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}        


.rollingbanner ul{
    list-style: none;
}


.rollingbanner li{
    position: absolute;
    left: 0;
    top: calc(var(--lineheight)*-1); /* 기본 위치는 배너 뷰포트 상단에 모두 위치하도록 해서 안보이게 함. */
}


/* 멀티라인 행별 위치 */
.rollingbanner li.prev{
    top: calc(var(--lineheight)*var(--showlines)); /* 마지막으로 이동해서 감추어진 롤링 배너 텍스트의 최종 위치 */
    transition: top 0.5s ease;
}  


.rollingbanner li.next{/* 다음 표시할 배너 행 표시용 */
}


.rollingbanner li.current{
    top: calc(var(--lineheight)*-1); /* 현재 표시되는 배너들의 기본 위치 */
    transition: top .5s ease;
}


/* 최대 6개까지 현재 뷰포트에 표시하는 배너들의 순서별 위치*/
.rollingbanner li.current.line0{
    top: 0;
}


.rollingbanner li.current.line1{
    top: var(--lineheight);
}


.rollingbanner li.current.line2{
    top: calc(var(--lineheight)*2);
}


.rollingbanner li.current.line3{
    top: calc(var(--lineheight)*3);
}


.rollingbanner li.current.line4{
    top: calc(var(--lineheight)*4);
}


.rollingbanner li.current.line5{
    top: calc(var(--lineheight)*5);
}


.rollingbanner li.current.line6{
    top: calc(var(--lineheight)*6);
}


.rollingbanner li.current.line7{
    top: calc(var(--lineheight)*7);
}


.rollingbanner li.current.line8{
    top: calc(var(--lineheight)*8);
}





.rollingbanner a{
    display: block;
    display: -webkit-box;
    text-decoration: none;
    -webkit-line-clamp: 1;
    -webkit-box-orient:vertical;
    overflow: hidden;
    color: #292929;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    letter-spacing: -1px;
    cursor:pointer;
}


.rollingbanner > .wrap > ul > li > a > img{
    width: 16px;
    height: 16px;
}