/** ul, ol, li ÅÂ±× ÂüÁ¶: http://webberstudy.com/html-css/html-1/ol-ul-dl-list-element/  **/

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
	font-family: "Nanum Gothic", sans-serif;
	color: #777;
}


.ol-list {
    list-style: none;
    width: 660px;
    max-width: 98%;
    margin-left:-30px;

}

.ol-item {
    display: block;
    clear: both;
    counter-increment: list;
    padding-bottom: 2rem; /** ¹­À½ »óÇÏ°£°Ý  **/
    /** font-size: .85rem; **/
    line-height: 1.375; /** ÀÚ°£ **/
    position: relative;
}

.ol-item:before {
    content: counter(list);
    width: 3rem; /** ¸ð¾ç-¿ø Å©±â **/
    height: 3rem; /** ¸ð¾ç-¿ø Å©±â **/
    float: left;
    margin: .2rem .8rem 0.3rem 0;
    background: #99CC00; /** ¸ð¾ç-¿ø »ö **/
    font-size: 1.5rem; /** ¼ýÀÚ Å©±â **/
    font-weight: bold;
	color: #FFF; /** ¼ýÀÚ»ö **/
    /**text-shadow: 0 0 2px; ¼ýÀÚ ±×¸²ÀÚ**/
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    shape-outside: ellipse();
    z-index: 1;
}

.ol-item:after {
    width: 1.5rem; /** ¸ð¾ç-¼¼¸ð Å©±â **/
    height: 1.5rem; /** ¸ð¾ç-¼¼¸ð Å©±â **/
    margin: .2rem 0;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: #99CC00; /** ¸ð¾ç-¼¼¸ð »ö **/
    z-index: -1;
    border-top-left-radius: 3px;
}


.ol-headline {
    padding: 0rem 0 0 0;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

/* Demo styles */