@charset "UTF-8";

/* Style Reset */
.fn_no,
.fn_no *,
.fn_cnt,
.fn_cnt *,
.fn_proview,
.fn_proview * {
	margin: 0;
	padding: 0;
}


/* Footnotes Marker */

.fn_no {
	font-size: .75em;
	line-height: 180%;
}
.fn_no > a {
	position: relative;
	color: #00d;
	font-weight: normal;
	text-decoration: none;
	transition: color .4s;
}
.fn_no > a:hover {
	color: #00c;
	font-weight: bold;
	text-decoration: none;
}

/* preview edge in general */
.fn_no > a > .fn_edge {
	position: absolute;
	display: none;
	z-index: 101;
	left: 4px
}
.fn_no > a > .fn_edge:before,
.fn_no > a > .fn_edge:after {
	content: ' ';
	position: absolute;
	border: solid transparent;
}
.fn_no > a > .fn_edge:before {
	border-color: rgba(153, 153, 153, 0);
	border-width: 7px;
	margin-left: -7px;
}
.fn_no > a > .fn_edge:after {
	border-color: rgba(255, 255, 255, 0);
	border-width: 6px;
	margin-left: -6px;
}

/* preview edge when normal */
.fn_no > a.bottom > .fn_edge {
	bottom: 26px;
}
.fn_no > a.bottom > .fn_edge:before,
.fn_no > a.bottom > .fn_edge:after {
	top: 100%;
}
.fn_no > a.bottom > .fn_edge:before {
	border-top-color: #999;
}
.fn_no > a.bottom > .fn_edge:after {
	border-top-color: #fff;
}

/* preview edge when narrow */
.fn_no > a.top > .fn_edge {
	top: 26px;
}
.fn_no > a.top > .fn_edge:before,
.fn_no > a.top > .fn_edge:after {
	bottom: 100%;
}
.fn_no > a.top > .fn_edge:before {
	border-bottom-color: #999;
}
.fn_no > a.top > .fn_edge:after {
	border-bottom-color: #fff;
}

/* footnote preview */
.fn_no > a > .fn_preview {
	position: absolute;
	display: none;
    z-index: 100;
	left: -22px;
	width: 240px;
	max-height: 120px;
    background: #fff;
    border: 1px solid #999;
	border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	line-height: 1.5;
}
.fn_no > a.bottom > .fn_preview {
	bottom: 25px;
}
.fn_no > a.top > .fn_preview {
	top: 25px;
}

/* footnote preview content */
.fn_no > a > .fn_preview > .fn_preview_cnt {
	margin: 12px;
	max-height: 96px;
	color: #444;
	font-size: 1em;
	font-weight: normal;
	overflow: hidden;
}
.fn_no > a > .fn_preview > .fn_preview_cnt > .fn_img_wrap {
	margin-right: 10px;
	max-width: 96px;
	max-height: 96px;
	float: left;
	overflow: hidden;
}
.fn_no > a > .fn_preview > .fn_preview_cnt > .fn_img_wrap > img {
	max-width: 100%;
}


/* Footnotes Section */

.fn_cnt ol {
	counter-reset: li !important;
	margin-left: 0;
	padding-left: 0;
}
.fn_cnt ol > li {
	position: relative;
	// margin: 0 0 4px 24px;
	padding: 6px 12px;
	list-style: none;	
}
.fn_cnt ol > li:before {
	content: counter(li);
	counter-increment: li !important;
	position: absolute;
	left: -24px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 24px;
	border-radius: 4px;
	color: #fff;
	background: #ccc;
	font-size: .8em;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	transition: background .4s;
}
.fn_cnt ol > li:hover:before {
	background: #999;
}
.fn_cnt ol > li > .fn_li {
	position: absolute;
	top: 6px;
	left: -24px;
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.fn_cnt ol > li > p {
	font-size: 1.05rem;
	line-height: 180%;
	word-spacing: .4rem;
}
.fn_cnt ol > li > * {
	text-indent: 0 !important;
}

/* footnote preview in mobile */
.fn_proview {
	position: fixed;
	display: none;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	background: #fff;
	color: #333;
	font-size: 1em;
	z-index: 100;
}
.fn_proview > .fn_preview_cnt {
    padding: 25px 30px 20px;
}
.fn_proview > .fn_preview_cnt > .fn_img_wrap {
    margin: 0 10px 10px 0;
    max-width: 90px;
    max-height: 90px;
    float: left;
	overflow: hidden;
}
.fn_proview > .fn_preview_cnt > .fn_img_wrap > img {
	max-width: 100%;
}
.fn_proview > .fn_proview_close {
	position: absolute;
	top: 4px;
	right: 8px;
}
.fn_proview > .fn_proview_close > a {
	font-size: 1.3em;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}