/* resets
--------------------------------------------------------------------------
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -moz-box-sizing: inherit; -webkit-box-sizing: inherit; box-sizing: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }

svg:not(:root) { overflow: hidden; }

img, iframe { border: 0; vertical-align: middle; }

strong { font-weight: bold; }
em { font-style: italic; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }

button, input, optgroup, select, textarea { margin: 0; font: inherit; line-height: normal; vertical-align: baseline; color: inherit; outline: 0; border-radius: 0; -webkit-font-smoothing: inherit; }
button, input, textarea { padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
legend { white-space: normal; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
input[type="checkbox"], input[type="radio"] { padding: 0; }
label, button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
button { width: auto; overflow: visible; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input[type="search"] { -webkit-appearance: none; border-radius: 0; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { font-weight: normal; text-align: left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

ul, ol { list-style: none; }
li { display: list-item; }

a { color: #000; background: transparent; text-decoration: none; cursor: pointer; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }

.hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

a, span, button { -webkit-transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; -moz-transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; -ms-transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .4s ease; }

/* global
--------------------------------------------------------------------------
*/

body { font: 62.5%/1 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif; background: #fff; color: #000; text-align: center; }

#guzheng { width: 1000px; height: 219px; position: absolute; top: 50%; left: 50%; margin: -109px 0 0 -500px; }
#guzheng form { position: absolute; top: 0; left: 30px; }
#guzheng form label { margin: 0 .5em 0 0; font-size: 1.2em; color: #ccc; display: inline-block; }
#guzheng form label input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
#guzheng form label input:checked + span { color: #000; }
#guzheng img { width: 100%; height: 100%; }
#guzheng a { width: 8px; height: 8px; border-radius: 50%; position: absolute; right: 125px; background: #fff; }
#guzheng img ~ a { right: 655px; }
#guzheng a span { position: absolute; top: 16px; left: 16px; color: #fff; background: #000; font-size: 1.2em; width: 2em; height: 2em; line-height: 2em; text-align: center; border-radius: 50%; font-weight: bold; display: none; }
#guzheng a:hover span { display: block; }
#guzheng a.note-1D { top: 190px; }
#guzheng a.note-2B { top: 181px; }
#guzheng a.note-3A { top: 172px; }
#guzheng a.note-4Fsharp { top: 163px; }
#guzheng a.note-5E { top: 154px; }
#guzheng a.note-6D { top: 144px; }
#guzheng a.note-7B { top: 134px; }
#guzheng a.note-8A { top: 124px; }
#guzheng a.note-9Fsharp { top: 115px; }
#guzheng a.note-10E { top: 105px; }
#guzheng a.note-11D { top: 96px; }
#guzheng a.note-12B { top: 86px; }
#guzheng a.note-13A { top: 77px; }
#guzheng a.note-14Fsharp { top: 67px; }
#guzheng a.note-15E { top: 58px; }
#guzheng a.note-16D { top: 49px; }
#guzheng a.note-17B { top: 40px; }
#guzheng a.note-18A { top: 31px; }
#guzheng a.note-19Fsharp { top: 23px; }
#guzheng a.note-20E { top: 15px; }
#guzheng a.note-21D { top: 6px; }

#guzheng a.note-2aCsharp { top: 171px; }
#guzheng a.note-4aG { top: 156px; }
#guzheng a.note-7aCsharp { top: 132px; }
#guzheng a.note-9aG { top: 117px; }
#guzheng a.note-12aCsharp { top: 93px; }
#guzheng a.note-14aG { top: 75px; }
#guzheng a.note-17aCsharp { top: 50px; }
#guzheng a.note-19aG { top: 30px; }

/* clearfix
--------------------------------------------------------------------------
*/

.clearfix:before, .clearfix:after, div:before, div:after, header:before, header:after, main:before, main:after, section:before, section:after, article:before, article:after, nav:before, nav:after, ul:before, ul:after, ol:before, ol:after, footer:before, footer:after { content: " "; display: table; }
.clearfix:after, div:after, header:after, main:after, section:after, article:after, nav:after, ul:after, ol:after, footer:after { clear: both; }