@-webkit-keyframes up-marquee {

    0%   { top:   20em }

    100% { top: -20em }

}

@-moz-keyframes up-marquee {

    0%   { top:   20em }

    100% { top: -20em }

}

@-o-keyframes up-marquee {

    0%   { top:   20em }

    100% { top: -20em }

}

@keyframes up-marquee {

    0%   { top:   20em }

    100% { top: -20em }

}



@-webkit-keyframes down-marquee {

    0%   { top:   -10em }

    100% { top: 20em }

}

@-moz-keyframes down-marquee {

    0%   { top:   -10em }

    100% { top: 20em }

}

@-o-keyframes down-marquee {

    0%   { top:   -10em }

    100% { top: 20em }

}

@keyframes down-marquee {

    0%   { top:   -10em }

    100% { top: 20em }

}



.notice-list {

    list-style: none;

}



.scroll-up, .scroll-down {

    height    : 20em;

    margin    : 1em auto;

    overflow  : hidden;

    position  : relative;

    -webkit-box-sizing: border-box;

    -moz-box-sizing   : border-box;

    box-sizing        : border-box;

}



.scroll-up .notice-list,

.scroll-down .notice-list {

    top               : 6em;

    position          : relative;

    -webkit-box-sizing: border-box;

    -moz-box-sizing   : border-box;

    box-sizing        : border-box;

}



.scroll-up .notice-list {

    -webkit-animation: up-marquee 15s linear infinite;

    -moz-animation   : up-marquee 15s linear infinite;

    -o-animation     : up-marquee 15s linear infinite;

    animation        : up-marquee 15s linear infinite;

}



.scroll-down .notice-list {

    -webkit-animation: down-marquee 15s linear infinite;

    -moz-animation   : down-marquee 15s linear infinite;

    -o-animation     : down-marquee 15s linear infinite;

    animation        : down-marquee 15s linear infinite;

}



.scroll-up:hover .notice-list,

.scroll-down:hover .notice-list {

    -webkit-animation-play-state: paused;

    -moz-animation-play-state   : paused;

    -o-animation-play-state     : paused;

    animation-play-state        : paused;

}