ul, ol {
	list-style: none;
	margin-left: -20px;

}



/* line */
.sample01 li {
	position: relative;
}
.sample01 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .7em;
	left: -1em;
	width: 8px;
	height: 1px;
	background-color: #666;
}



/* arrow 01 */
.sample02 li {
	position: relative;
}
.sample02 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #0036b3;
	border-bottom: 1px solid #0036b3;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* arrow 02 */
.sample03 li {
	position: relative;
}
.sample03 li::after,
.sample03 li::before {
	display: block;
	content: '';
	position: absolute;
}
.sample03 li::after {
	top: 8px;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.sample03 li::before {
	top: 11px;
	left: -1.025em;
	width: 8px;
	height: 1px;
	background-color: #666;
}



/* original disc 01 */
.sample04 li {
	position: relative;
}
.sample04 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #666;
	border-radius: 100%;
}



/* original disc 02 */
.sample05 li {
	position: relative;
}
.sample05 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border: 1px solid #3498db;
	border-radius: 100%;
}



/* arrow x disc */
.sample06 li {
	position: relative;
}
.sample06 li::after,
.sample06 li::before {
	display: block;
	content: '';
	position: absolute;
}
.sample06 li::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #3498db;
	border-radius: 100%;
}
.sample06 li::before {
	z-index: 2;
	top: .625em;
	left: -.975em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* diamond */
.sample07 li {
	position: relative;
}
.sample07 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* check mark */
.sample08 li {
	position: relative;
}
.sample08 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #0036b3;
	border-bottom: 2px solid #0036b3;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* character */
.sample09 li {
	position: relative;
}
.sample09 li::after {
	display: block;
	position: absolute;
	top: .4em;
	left: -1.2em;
	font-size: 12px;
	line-height: 1;
}
.sample09 li:nth-of-type(1)::after {
	content: '\002713';
	color: #3498db;
}
.sample09 li:nth-of-type(2)::after {
	content: '\00266b';
	color: #e67e22;
}
.sample09 li:nth-of-type(3)::after {
	content: '\002665';
	color: #e74c3c;
}
.sample09 li:nth-of-type(4)::after {
	content: '\00272a';
	color: #f1c40f;
}
.sample09 li:nth-of-type(5)::after {
	content: '\002731';
	color: #9b59b6;
}



/* ranking */
.sample10 li {
	position: relative;
	padding-left: 3.5em;
	counter-increment: li;
}
.sample10 li::before {
	content: 'Rank ' counter(li) ' -';
	display: block;
	position: absolute;
	top: .3em;
	left: -1em;
	color: #666;
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
}
.sample10 li:nth-of-type(1)::before {
	color: #e4aa1d;
}
.sample10 li:nth-of-type(2)::before {
	color: #9eaeb9;
}
.sample10 li:nth-of-type(3)::before {
	color: #b76901;
}