html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-family:sans-serif}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-0.43em}.pure-u{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}.pure-button{display:inline-block;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-0.43em}.pure-button-group .pure-button{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:rgba(0,0,0,.8);border:none transparent;background-color:#e6e6e6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;border-color:#000}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:none;background-image:none;opacity:.4;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none;pointer-events:none}.pure-button-hidden{display:none}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-button-group .pure-button{margin:0;border-radius:0;border-right:1px solid rgba(0,0,0,.2)}.pure-button-group .pure-button:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.pure-button-group .pure-button:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:none}.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 3px #ddd;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}.pure-form input:not([type]){padding:.5em .6em;display:inline-block;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 3px #ddd;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.pure-form input[type=color]{padding:.2em .5em}.pure-form input[type=color]:focus,.pure-form input[type=date]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=email]:focus,.pure-form input[type=month]:focus,.pure-form input[type=number]:focus,.pure-form input[type=password]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=text]:focus,.pure-form input[type=time]:focus,.pure-form input[type=url]:focus,.pure-form input[type=week]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;border-color:#129fea}.pure-form input:not([type]):focus{outline:0;border-color:#129fea}.pure-form input[type=checkbox]:focus,.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus{outline:thin solid #129FEA;outline:1px auto #129FEA}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input[type=color][disabled],.pure-form input[type=date][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=email][disabled],.pure-form input[type=month][disabled],.pure-form input[type=number][disabled],.pure-form input[type=password][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=text][disabled],.pure-form input[type=time][disabled],.pure-form input[type=url][disabled],.pure-form input[type=week][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input:not([type])[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly]{background-color:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid{color:#b94a48;border-color:#e9322d}.pure-form input[type=checkbox]:focus:invalid:focus,.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{height:2.25em;border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input[type=color],.pure-form-stacked input[type=date],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=email],.pure-form-stacked input[type=file],.pure-form-stacked input[type=month],.pure-form-stacked input[type=number],.pure-form-stacked input[type=password],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=text],.pure-form-stacked input[type=time],.pure-form-stacked input[type=url],.pure-form-stacked input[type=week],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-stacked input:not([type]){display:block;margin:.25em 0}.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline{display:inline-block;vertical-align:middle}.pure-form-aligned textarea{vertical-align:top}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 11em}.pure-form .pure-input-rounded,.pure-form input.pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input,.pure-form .pure-group textarea{display:block;padding:10px;margin:0 0 -1px;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus,.pure-form .pure-group textarea:focus{z-index:3}.pure-form .pure-group input:first-child,.pure-form .pure-group textarea:first-child{top:1px;border-radius:4px 4px 0 0;margin:0}.pure-form .pure-group input:first-child:last-child,.pure-form .pure-group textarea:first-child:last-child{top:1px;border-radius:4px;margin:0}.pure-form .pure-group input:last-child,.pure-form .pure-group textarea:last-child{top:-2px;border-radius:0 0 4px 4px;margin:0}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-3-4{width:75%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:.875em}.pure-form-message{display:block;color:#666;font-size:.875em}@media only screen and (max-width :480px){.pure-form button[type=submit]{margin:.7em 0 0}.pure-form input:not([type]),.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form label{margin-bottom:.3em;display:block}.pure-group input:not([type]),.pure-group input[type=color],.pure-group input[type=date],.pure-group input[type=datetime-local],.pure-group input[type=datetime],.pure-group input[type=email],.pure-group input[type=month],.pure-group input[type=number],.pure-group input[type=password],.pure-group input[type=search],.pure-group input[type=tel],.pure-group input[type=text],.pure-group input[type=time],.pure-group input[type=url],.pure-group input[type=week]{margin-bottom:0}.pure-form-aligned .pure-control-group label{margin-bottom:.3em;text-align:left;display:block;width:100%}.pure-form-aligned .pure-controls{margin:1.5em 0 0 0}.pure-form-message,.pure-form-message-inline{display:block;font-size:.75em;padding:.2em 0 .8em}}.pure-menu{-webkit-box-sizing:border-box;box-sizing:border-box}.pure-menu-fixed{position:fixed;left:0;top:0;z-index:3}.pure-menu-item,.pure-menu-list{position:relative}.pure-menu-list{list-style:none;margin:0;padding:0}.pure-menu-item{padding:0;margin:0;height:100%}.pure-menu-heading,.pure-menu-link{display:block;text-decoration:none;white-space:nowrap}.pure-menu-horizontal{width:100%;white-space:nowrap}.pure-menu-horizontal .pure-menu-list{display:inline-block}.pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator{display:inline-block;vertical-align:middle}.pure-menu-item .pure-menu-item{display:block}.pure-menu-children{display:none;position:absolute;left:100%;top:0;margin:0;padding:0;z-index:3}.pure-menu-horizontal .pure-menu-children{left:0;top:auto;width:inherit}.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:absolute}.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after{content:"\25BE"}.pure-menu-scrollable{overflow-y:scroll;overflow-x:hidden}.pure-menu-scrollable .pure-menu-list{display:block}.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list{display:inline-block}.pure-menu-horizontal.pure-menu-scrollable{white-space:nowrap;overflow-y:hidden;overflow-x:auto;padding:.5em 0}.pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator{background-color:#ccc;height:1px;margin:.3em 0}.pure-menu-horizontal .pure-menu-separator{width:1px;height:1.3em;margin:0 .3em}.pure-menu-horizontal .pure-menu-children .pure-menu-separator{display:block;width:auto}.pure-menu-heading{text-transform:uppercase;color:#565d64}.pure-menu-link{color:#777}.pure-menu-children{background-color:#fff}.pure-menu-heading,.pure-menu-link{padding:.5em 1em}.pure-menu-disabled{opacity:.5}.pure-menu-disabled .pure-menu-link:hover{background-color:transparent;cursor:default}.pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover{background-color:#eee}.pure-menu-selected>.pure-menu-link,.pure-menu-selected>.pure-menu-link:visited{color:#000}.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:.5em 1em}.pure-table thead{background-color:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td{background-color:#f2f2f2}.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child>td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px 0;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child>td{border-bottom-width:0}@media screen and (min-width:35.5em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-sm-1-24{width:4.1667%}.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%}.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%}.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%}.pure-u-sm-1-5{width:20%}.pure-u-sm-5-24{width:20.8333%}.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%}.pure-u-sm-7-24{width:29.1667%}.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%}.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%}.pure-u-sm-2-5{width:40%}.pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%}.pure-u-sm-11-24{width:45.8333%}.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%}.pure-u-sm-13-24{width:54.1667%}.pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%}.pure-u-sm-3-5{width:60%}.pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%}.pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%}.pure-u-sm-17-24{width:70.8333%}.pure-u-sm-18-24,.pure-u-sm-3-4{width:75%}.pure-u-sm-19-24{width:79.1667%}.pure-u-sm-4-5{width:80%}.pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%}.pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%}.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%}.pure-u-sm-23-24{width:95.8333%}.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}}@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%}.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%}.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%}.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%}.pure-u-md-1-5{width:20%}.pure-u-md-5-24{width:20.8333%}.pure-u-md-1-4,.pure-u-md-6-24{width:25%}.pure-u-md-7-24{width:29.1667%}.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%}.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%}.pure-u-md-2-5{width:40%}.pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%}.pure-u-md-11-24{width:45.8333%}.pure-u-md-1-2,.pure-u-md-12-24{width:50%}.pure-u-md-13-24{width:54.1667%}.pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%}.pure-u-md-3-5{width:60%}.pure-u-md-15-24,.pure-u-md-5-8{width:62.5%}.pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%}.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}@media screen and (min-width:64em){.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-1-12,.pure-u-lg-1-2,.pure-u-lg-1-24,.pure-u-lg-1-3,.pure-u-lg-1-4,.pure-u-lg-1-5,.pure-u-lg-1-6,.pure-u-lg-1-8,.pure-u-lg-10-24,.pure-u-lg-11-12,.pure-u-lg-11-24,.pure-u-lg-12-24,.pure-u-lg-13-24,.pure-u-lg-14-24,.pure-u-lg-15-24,.pure-u-lg-16-24,.pure-u-lg-17-24,.pure-u-lg-18-24,.pure-u-lg-19-24,.pure-u-lg-2-24,.pure-u-lg-2-3,.pure-u-lg-2-5,.pure-u-lg-20-24,.pure-u-lg-21-24,.pure-u-lg-22-24,.pure-u-lg-23-24,.pure-u-lg-24-24,.pure-u-lg-3-24,.pure-u-lg-3-4,.pure-u-lg-3-5,.pure-u-lg-3-8,.pure-u-lg-4-24,.pure-u-lg-4-5,.pure-u-lg-5-12,.pure-u-lg-5-24,.pure-u-lg-5-5,.pure-u-lg-5-6,.pure-u-lg-5-8,.pure-u-lg-6-24,.pure-u-lg-7-12,.pure-u-lg-7-24,.pure-u-lg-7-8,.pure-u-lg-8-24,.pure-u-lg-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-lg-1-24{width:4.1667%}.pure-u-lg-1-12,.pure-u-lg-2-24{width:8.3333%}.pure-u-lg-1-8,.pure-u-lg-3-24{width:12.5%}.pure-u-lg-1-6,.pure-u-lg-4-24{width:16.6667%}.pure-u-lg-1-5{width:20%}.pure-u-lg-5-24{width:20.8333%}.pure-u-lg-1-4,.pure-u-lg-6-24{width:25%}.pure-u-lg-7-24{width:29.1667%}.pure-u-lg-1-3,.pure-u-lg-8-24{width:33.3333%}.pure-u-lg-3-8,.pure-u-lg-9-24{width:37.5%}.pure-u-lg-2-5{width:40%}.pure-u-lg-10-24,.pure-u-lg-5-12{width:41.6667%}.pure-u-lg-11-24{width:45.8333%}.pure-u-lg-1-2,.pure-u-lg-12-24{width:50%}.pure-u-lg-13-24{width:54.1667%}.pure-u-lg-14-24,.pure-u-lg-7-12{width:58.3333%}.pure-u-lg-3-5{width:60%}.pure-u-lg-15-24,.pure-u-lg-5-8{width:62.5%}.pure-u-lg-16-24,.pure-u-lg-2-3{width:66.6667%}.pure-u-lg-17-24{width:70.8333%}.pure-u-lg-18-24,.pure-u-lg-3-4{width:75%}.pure-u-lg-19-24{width:79.1667%}.pure-u-lg-4-5{width:80%}.pure-u-lg-20-24,.pure-u-lg-5-6{width:83.3333%}.pure-u-lg-21-24,.pure-u-lg-7-8{width:87.5%}.pure-u-lg-11-12,.pure-u-lg-22-24{width:91.6667%}.pure-u-lg-23-24{width:95.8333%}.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-24-24,.pure-u-lg-5-5{width:100%}}@media screen and (min-width:80em){.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-1-12,.pure-u-xl-1-2,.pure-u-xl-1-24,.pure-u-xl-1-3,.pure-u-xl-1-4,.pure-u-xl-1-5,.pure-u-xl-1-6,.pure-u-xl-1-8,.pure-u-xl-10-24,.pure-u-xl-11-12,.pure-u-xl-11-24,.pure-u-xl-12-24,.pure-u-xl-13-24,.pure-u-xl-14-24,.pure-u-xl-15-24,.pure-u-xl-16-24,.pure-u-xl-17-24,.pure-u-xl-18-24,.pure-u-xl-19-24,.pure-u-xl-2-24,.pure-u-xl-2-3,.pure-u-xl-2-5,.pure-u-xl-20-24,.pure-u-xl-21-24,.pure-u-xl-22-24,.pure-u-xl-23-24,.pure-u-xl-24-24,.pure-u-xl-3-24,.pure-u-xl-3-4,.pure-u-xl-3-5,.pure-u-xl-3-8,.pure-u-xl-4-24,.pure-u-xl-4-5,.pure-u-xl-5-12,.pure-u-xl-5-24,.pure-u-xl-5-5,.pure-u-xl-5-6,.pure-u-xl-5-8,.pure-u-xl-6-24,.pure-u-xl-7-12,.pure-u-xl-7-24,.pure-u-xl-7-8,.pure-u-xl-8-24,.pure-u-xl-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-xl-1-24{width:4.1667%}.pure-u-xl-1-12,.pure-u-xl-2-24{width:8.3333%}.pure-u-xl-1-8,.pure-u-xl-3-24{width:12.5%}.pure-u-xl-1-6,.pure-u-xl-4-24{width:16.6667%}.pure-u-xl-1-5{width:20%}.pure-u-xl-5-24{width:20.8333%}.pure-u-xl-1-4,.pure-u-xl-6-24{width:25%}.pure-u-xl-7-24{width:29.1667%}.pure-u-xl-1-3,.pure-u-xl-8-24{width:33.3333%}.pure-u-xl-3-8,.pure-u-xl-9-24{width:37.5%}.pure-u-xl-2-5{width:40%}.pure-u-xl-10-24,.pure-u-xl-5-12{width:41.6667%}.pure-u-xl-11-24{width:45.8333%}.pure-u-xl-1-2,.pure-u-xl-12-24{width:50%}.pure-u-xl-13-24{width:54.1667%}.pure-u-xl-14-24,.pure-u-xl-7-12{width:58.3333%}.pure-u-xl-3-5{width:60%}.pure-u-xl-15-24,.pure-u-xl-5-8{width:62.5%}.pure-u-xl-16-24,.pure-u-xl-2-3{width:66.6667%}.pure-u-xl-17-24{width:70.8333%}.pure-u-xl-18-24,.pure-u-xl-3-4{width:75%}.pure-u-xl-19-24{width:79.1667%}.pure-u-xl-4-5{width:80%}.pure-u-xl-20-24,.pure-u-xl-5-6{width:83.3333%}.pure-u-xl-21-24,.pure-u-xl-7-8{width:87.5%}.pure-u-xl-11-12,.pure-u-xl-22-24{width:91.6667%}.pure-u-xl-23-24{width:95.8333%}.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-24-24,.pure-u-xl-5-5{width:100%}}
/* 1. 配色系统 */
:root {
--primary-color: #8B4513;
--secondary-color: #D2B48C;
--accent-color: #9E2A2B;
--light-bg: #F5F2E9;
--dark-text: #333333;
--light-text: #FFFFFF;
--border-color: #E6D5B8;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Serif SC', serif;
color: var(--dark-text);
background-color: var(--light-bg);
line-height: 1.8;
margin: 0;
padding-top: 80px;
}
h1, h2, h3, h4 {
font-weight: 700;
color: var(--primary-color);
margin-top: 0;
line-height: 1.4;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #7D2223;
text-decoration: underline;
}
.pure-g [class*=pure-u] {
font-family: 'Noto Serif SC', serif;
}
.text-sm {
font-size: 0.9rem;
font-family: 'Noto Sans SC', sans-serif;
}
.no-markers {
list-style-type: none;
padding-left: 0;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 20px;
}
.header-container {
max-width: 1400px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
.site-title {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
}
.site-title a {
color: var(--primary-color);
display: flex;
align-items: center;
}
.site-title i {
margin-right: 10px;
font-size: 1.5em;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
margin-right: 15px;
}
nav ul {
display: flex;
margin: 0 20px;
padding: 0;
list-style: none;
flex: 1;
}
nav li {
margin: 0 12px;
}
nav a {
font-size: 1rem;
font-weight: 500;
padding: 5px 0;
position: relative;
white-space: nowrap;
color: var(--primary-color);
}
nav a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
nav a:hover {
text-decoration:none;
}
nav a:hover:after {
width: 100%;
}
.search-container {
position: relative;
width: 250px;
white-space: nowrap;
}
.search-input-group {
display: flex;
}
.search-input {
width: 100%;
padding: 8px 15px;
border: 1px solid var(--border-color);
border-right: none;
border-radius: 20px 0 0 20px;
font-family: 'Noto Sans SC', sans-serif;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.search-button {
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 0 20px 20px 0;
padding: 0 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-button:hover {
background-color: #7D2223;
}
.search-input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(158, 42, 43, 0.1);
}
.search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px 0;
display: none;
z-index: 1001;
max-height: 300px;
overflow-y: auto;
}
.search-results.active {
display: block;
}
.search-category {
padding: 5px 15px;
font-size: 0.8rem;
color: #888;
background-color: #f9f9f9;
font-family: 'Noto Sans SC', sans-serif;
}
.search-item {
padding: 8px 15px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-item:hover {
background-color: var(--light-bg);
}
.mobile-nav-panel {
position: fixed;
top: 80px;
left: 0;
right: 0;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 999;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.mobile-nav-panel.active {
max-height: 500px;
}
.mobile-nav-menu {
list-style: none;
padding: 15px 20px;
margin: 0;
}
.mobile-nav-menu li {
margin-bottom: 10px;
}
.mobile-nav-menu a {
display: block;
padding: 8px 0;
font-size: 1.1rem;
border-bottom: 1px solid var(--border-color);
}
.mobile-scroll-nav {
display: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
background-color: white;
border-bottom: 1px solid var(--border-color);
}
.mobile-scroll-nav::-webkit-scrollbar {
display: none;
}
.scroll-nav-list {
display: flex;
list-style: none;
padding: 10px 15px;
margin: 0;
width: max-content;
}
.scroll-nav-list li {
margin: 0 10px;
}
.scroll-nav-list a {
color: var(--primary-color);
white-space: nowrap;
padding: 5px 0;
}
main {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.main-content {
padding-right: 2.5%;
}
.swiper-container {
width: 100%;
height: 400px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: relative;
}
.swiper-slide {
display:block;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
a.swiper-slide:hover {
text-decoration: none;
}
.carousel-content {
text-align: center;
color: white;
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
max-width: 70%;
}
.carousel-title {
font-size: 2.2rem;
margin-bottom: 10px;
color: white;
}
.carousel-author {
font-size: 1.2rem;
font-style: italic;
margin-bottom: 20px;
}
.carousel-text {
font-size: 1.4rem;
line-height: 2;
}
.swiper-button-prev, .swiper-button-next {
color: white;
background-color: rgba(0, 0, 0, 0.4);
width: 45px;
height: 45px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.swiper-button-prev {
left: 20px;
}
.swiper-button-next {
right: 20px;
}
.swiper-button-prev:after, .swiper-button-next:after {
font-size: 18px;
font-weight: bold;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
.swiper-pagination-bullet-active {
background-color: white;
transform: scale(1.2);
}
section {
background-color: white;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.section-title {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 2px solid var(--secondary-color);
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
color: var(--accent-color);
}
.two-column-list {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.two-column-item {
width: 50%;
padding: 0 10px 20px;
}
.content-card {
display: flex;
height: 100%;
border: 1px solid var(--border-color);
border-radius: 6px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.content-card-img {
display:inline-block;
width: 35%;
height: 100%;
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 120px;
}
.card-content {
width: 65%;
padding: 15px;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 1.1rem;
margin-bottom: 10px;
flex: 1;
}
.card-meta {
font-size: 0.85rem;
color: #777;
display: flex;
justify-content: space-between;
font-family: 'Noto Sans SC', sans-serif;
}
.required-classics {
margin-bottom: 20px;
}
.required-header {
display: flex;
margin-bottom: 20px;
width: 100%;
}
.required-header-image {
width: 25%;
margin-right: 20px;
border-radius: 6px;
overflow: hidden;
}
.required-header-image img {
width: 100%;
height: auto;
object-fit: cover;
}
.required-header-content {
flex: 1;
}
.required-header-title {
margin-bottom: 10px;
}
.required-header-desc {
color: #555;
margin-bottom: 15px;
}
.classics-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.classics-item {
width: 50%;
}
.classics-link {
display: inline-block;
padding: 10px;
transition: all 0.2s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.classics-title {
font-size: 1.05rem;
display: inline;
margin-right: 8px;
}
.classics-author {
font-size: 1.05rem;
color: #666;
display: inline;
}
.classics-author:hover {
color: var(--accent-color);
}
.poetry-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.poetry-item {
display: flex;
padding: 15px;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.poetry-item:hover {
background-color: var(--light-bg);
}
.poetry-info {
flex: 1;
}
.poetry-item-title {
font-size: 1.1rem;
margin-bottom: 5px;
}
.poetry-meta {
font-size: 0.9rem;
color: #666;
margin-bottom: 8px;
font-family: 'Noto Sans SC', sans-serif;
}
.poetry-meta span {
margin-right: 10px;
}
.poetry-meta span:not(:last-child):after {
content: "·";
margin-left: 10px;
color: #999;
}
.poetry-item-excerpt {
font-size: 0.95rem;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more-link {
display: inline-block;
color: var(--accent-color);
font-weight: 500;
transition: all 0.3s ease;
}
.more-link:hover {
color: #7D2223;
transform: translateX(5px);
text-decoration: none;
}
.dual-blocks {
display: flex;
gap: 20px;
}
.dual-block {
flex: 1;
}
.block-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.block-item {
padding: 10px;
border-left: 3px solid var(--secondary-color);
transition: all 0.3s ease;
}
.block-item:hover {
background-color: var(--light-bg);
border-left-color: var(--accent-color);
transform: translateX(5px);
}
.triple-column {
display: flex;
gap: 15px;
}
.triple-column-item {
flex: 1;
background-color: var(--light-bg);
border-radius: 6px;
padding: 15px;
transition: transform 0.3s ease;
}
.triple-column-item:hover {
transform: translateY(-5px);
}
.triple-title {
font-size: 1.2rem;
margin-bottom: 15px;
text-align: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.triple-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.triple-list-item {
font-size: 0.95rem;
transition: all 0.2s ease;
padding-left: 5px;
}
.triple-list-item:hover {
padding-left: 10px;
}
aside {
padding-left: 2.5%;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.tag {
display: inline-block;
padding: 5px 12px;
background-color: var(--light-bg);
border-radius: 20px;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.tag:hover {
background-color: white;
border-color: var(--accent-color);
transform: translateY(-2px);
text-decoration: none;
}
.tag i {
margin-right: 5px;
font-size: 0.8em;
}
footer {
#background-color: var(--primary-color);
background-color: var(--dark-text);
color: var(--light-text);
padding: 40px 0 20px;
margin-top: 50px;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.footer-links-row {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-links-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.footer-link-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.footer-link-list li {
margin: 0;
}
.footer-link-list a {
color: var(--light-text);
opacity: 0.9;
font-family: 'Noto Sans SC', sans-serif;
font-size: 0.95rem;
}
.footer-link-list a:hover {
opacity: 1;
text-decoration: underline;
color: var(--secondary-color);
}
.copyright {
font-size: 0.9rem;
font-family: 'Noto Sans SC', sans-serif;
text-align: center;
margin-top: 15px;
opacity: 0.8;
}
.copyright a {
color: var(--secondary-color);
text-decoration: underline;
}
.article-list {
list-style: none;
padding: 0;
margin: 0;
}
.article-item {
padding: 20px 0;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
}
.article-item:last-child {
border-bottom: none;
}
.article-image {
flex: 0 0 150px;
margin-right: 20px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.article-image:hover {
transform: translateY(-3px);
}
.article-image img {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
}
.article-content {
flex: 1;
}
.article-title {
margin: 0 0 10px 0;
font-size: 1.2rem;
}
.article-title a {
color: var(--primary-color);
}
.article-title a:hover {
color: var(--accent-color);
text-decoration: underline;
}
.article-desc {
margin: 0 0 10px 0;
color: #666;
font-size: 0.95rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-meta {
font-size: 0.85rem;
color: #888;
font-family: 'Noto Sans SC', sans-serif;
display: flex;
align-items: center;
gap: 15px;
}
.article-meta i {
margin-right: 5px;
font-size: 0.9em;
}
.author-list, .book-list {
display:grid;
grid-template-columns:repeat(3,1fr);
margin:0;
padding:0;
list-style: none;
}
.author-list li, .book-list li {
position: relative;
padding-left: 15px;
}
.author-list li::before, .book-list li::before {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: url('../images/marker.jpg') no-repeat;
background-size: contain;
}
.author-list li span, .book-list li span {
font-size:0.8rem;
}
.breadcrumb {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
font-family: 'Noto Sans SC', sans-serif;
}
.breadcrumb a {
color: #666;
}
.breadcrumb span {
margin: 0 5px;
color: #999;
}
.chengyu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chengyu-title {
margin: 0;
font-size: 2rem;
}
.audio-button {
background: none;
border: 1px solid var(--border-color);
color: var(--primary-color);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.audio-button:hover {
background-color: var(--light-bg);
border-color: var(--primary-color);
}
.update-time {
font-size: 0.9rem;
color: #666;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed var(--border-color);
font-family: 'Noto Sans SC', sans-serif;
}
.chengyu-pinyin {
font-size: 1.2rem;
color: #666;
margin-bottom: 20px;
}
.chengyu-attribute {
margin-bottom: 20px;
}
.attribute-item {
display: inline-block;
background-color: var(--light-bg);
padding: 5px 12px;
border-radius: 4px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 0.9rem;
}
.related-words {
margin-bottom: 20px;
}
.related-words-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.related-word-item {
padding: 5px 10px;
background-color: var(--light-bg);
border-radius: 4px;
transition: all 0.2s ease;
}
.related-word-item:hover {
background-color: var(--secondary-color);
color: var(--dark-text);
text-decoration: none;
}
.chengyu-detail h2.section-title{
border-bottom: 1px solid var(--secondary-color);
}
.chengyu-content p {
margin-bottom: 1.5rem;
text-align: justify;
}
.example-sentence {
padding: 15px;
background-color: var(--light-bg);
border-left: 3px solid var(--accent-color);
margin: 15px 0 25px;
}
.chengyu-links {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}
.chengyu-link-item {
flex: 1;
min-width: 200px;
padding: 15px;
background-color: var(--light-bg);
border-radius: 6px;
transition: all 0.3s ease;
}
.chengyu-link-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.chengyu-link-title {
font-size: 1.1rem;
margin-bottom: 10px;
color: var(--primary-color);
}
.chengyu-jielong {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.pagination-links {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.pagination-link {
display: flex;
align-items: center;
padding: 8px 15px;
background-color: white;
border: 1px solid var(--border-color);
border-radius: 4px;
transition: all 0.3s ease;
}
.pagination-link:hover {
background-color: var(--light-bg);
border-color: var(--primary-color);
text-decoration: none;
}
.pagination-link i {
margin-right: 8px;
}
.pagination-link.next i {
margin-right: 0;
margin-left: 8px;
}
.breadcrumb a {
color: #666;
}
.breadcrumb span {
margin: 0 5px;
color: #999;
}
.book-header {
margin-bottom: 20px;
}
.book-meta {
color: #666;
font-size: 0.95rem;
margin: 10px 0 20px;
padding-left: 5px;
border-left: 3px solid var(--secondary-color);
}
.book-intro {
line-height: 2;
margin-bottom: 20px;
text-indent: 2em;
}
.type-section,.chapter-section {
margin-bottom: 30px;
}
.chapter-title {
font-size: 1.2rem;
color: var(--primary-color);
margin: 25px 0 15px;
padding-left: 10px;
border-left: 4px solid var(--accent-color);
}
.grid-article-list, .grid-chapter-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-article-list li,.grid-chapter-list li {
padding: 10px 15px;
border: 1px dashed var(--border-color);
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
transition: all 0.3s ease;
}
.grid-article-list li:hover, .grid-chapter-list li:hover {
background-color: var(--light-bg);
transform: translateY(-2px);
border-color: var(--secondary-color);
}
.grid-article-list a, .grid-chapter-list a {
display: inline-block;
font-size: 0.95rem;
}
.grid-article-list span {
font-size: 0.8rem;
color:#999999;
}
.chapter-number {
display: inline-block;
width: 25px;
text-align: center;
margin-right: 8px;
color: var(--accent-color);
font-weight: 600;
}
.book-navigation {
display: flex;
justify-content: space-between;
margin: 40px 0 20px;
padding: 15px;
background-color: var(--light-bg);
border-radius: 8px;
}
.book-nav-item {
display: flex;
align-items: center;
}
.book-nav-item i {
margin-right: 8px;
color: var(--primary-color);
}
.book-nav-prev {
justify-content: flex-start;
}
.book-nav-next {
justify-content: flex-end;
}
.chapter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.chapter-title {
margin: 0;
}
.view-toggle {
display: flex;
gap: 10px;
}
.toggle-btn {
background-color: var(--light-bg);
border: 1px solid var(--border-color);
color: var(--primary-color);
padding: 6px 15px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.toggle-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.toggle-btn:hover {
background-color: var(--secondary-color);
color: white;
border-color: var(--secondary-color);
}
.chapter-content {
font-size: 1.1rem;
line-height: 2;
margin-bottom: 30px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 8px;
}
.chapter-content p {
margin: 0 0 1.5rem 0;
text-indent: 2em;
}
.chapter-content p:last-child {
margin-bottom: 0;
}
.chapter-content span {
display: none;
color: #666;
font-style: italic;
margin-left: 1em;
}
.chapter-content span.visible {
display: inline;
}
.navigation-links {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin: 30px 0;
}
.nav-prev, .nav-next {
flex: 1;
}
.nav-prev {
text-align: left;
}
.nav-next {
text-align: right;
}
.nav-index {
flex: 1;
text-align: center;
font-weight: 500;
}
.guoxue .article-header {
display: block;
margin-bottom: 30px;
}
.guoxue .article-title {
text-align: center;
margin-bottom: 15px;
line-height: 1.6;
}
.guoxue .article-meta {
display: block;
text-align: center;
color: #666;
font-size: 0.9rem;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed var(--border-color);
font-family: 'Noto Sans SC', sans-serif;
}
.guoxue .article-meta span {
margin: 0 10px;
}
.guoxue .article-content {
font-size: 1.1rem;
line-height: 2;
margin-bottom: 30px;
}
.guoxue .article-content p {
margin-bottom: 1.5rem;
text-indent: 2em;
}
.guoxue .article-section {
margin-bottom: 30px;
}
.guoxue .related-list {
list-style: none;
padding: 0;
margin: 0;
}
.guoxue .related-item {
padding: 12px 0;
transition: background-color 0.3s ease;
}
.guoxue .related-item:last-child {
border-bottom: none;
}
.guoxue .related-item:hover {
background-color: var(--light-bg);
}
.guoxue .related-item i {
color: var(--accent-color);
margin-right: 10px;
flex-shrink: 0;
}
.guoxue .related-item a {
transition: all 0.3s ease;
}
.guoxue .related-item a:hover {
padding-left: 5px;
}
.shiwen {
width: 100%;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 30px;
}
.yzs-span {
font-size: 11px;
color: #FFFFFF;
text-align: center;
background-color: #A8A69D;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-right: 5px;
padding: 3px 4px 3px 4px;
position: relative;
top: -2px;
}
.poem-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.poem-title {
margin: 0;
}
.poem-meta {
margin: 10px 0 20px;
color: #666;
font-size: 0.95rem;
}
.poem-meta span {
margin-right: 15px;
}
.tab-container {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
}
.tab-button {
padding: 8px 15px;
background-color: white;
border: none;
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.tab-button.active {
background-color: var(--primary-color);
color: white;
}
.tab-button:not(:last-child) {
border-right: 1px solid var(--border-color);
}
.tab-content {
margin: 20px 0;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.poem-text {
font-size: 1.2rem;
line-height: 2.2;
text-align: left;
margin: 20px 0;
}
.shiwen .pinyin-content, .shiwen .pinyinContson {
clear:both;
overflow:hidden;
margin-top:10px;
}
.shiwen .pinyin-content span, .shiwen .pinyinContson span{
line-height:100%;
width:39px;
text-align:center;
display:inline-block;
}
.shiwen .pinyin-content .pinyin, .shiwen .pinyinContson .pinyin {
clear:both;
line-height:160%;
font-size:12px;
font-weight:normal;
float:left;
width:36px;
}
.shiwen .pinyin-content .hanzi, .shiwen .pinyinContson .hanzi {
clear:both;
margin-bottom:10px;
text-align:center;
float:left;
font-size:20px;
height:36px;
width:36px;
line-height:36px;
text-align:center;
background:url(/assets/images/pinyingbg.png) no-repeat 2px;
background-size:32px 32px;
font-family:KaiTi;
}
.shiwen .reference{ height:auto; margin-bottom:15px; border-top:1px solid #DAD9D1; overflow:hidden; padding-top:10px;}
.shiwen .reference h4, .shiwen .reference li{
display:block;
color: #999999;
margin: 0px;
font-size: 12px;
line-height: 160%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
list-style-type:none;
}
.section {
margin: 30px 0;
padding: 20px;
background-color: var(--light-bg);
border-radius: 8px;
}
.section-title {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.collapsible-content {
max-height: 200px;
overflow: hidden;
transition: max-height 0.5s ease;
}
.collapsible-content.expanded {
max-height: 2000px;
}
.expand-btn {
background: none;
border: 1px solid var(--accent-color);
color: var(--accent-color);
padding: 5px 15px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.expand-btn:hover {
background-color: var(--accent-color);
color: white;
}
.author-info {
display: flex;
margin: 30px 0;
padding: 20px;
background-color: white;
border: 1px solid var(--border-color);
border-radius: 8px;
}
.author-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-right: 20px;
border: 3px solid var(--light-bg);
}
.author-details {
flex: 1;
}
.author-name {
margin: 0 0 5px 0;
font-size: 1.4rem;
}
.author-dynasty {
color: #666;
margin: 0 0 10px 0;
font-size: 0.95rem;
}
.author-bio {
text-align: justify;
}
.related-poems {
margin: 30px 0;
}
.shiwen .related-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.shiwen .related-item {
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.shiwen .related-item:hover {
transform: translateY(-5px);
}
.shiwen .related-title {
margin: 0 0 10px 0;
font-size: 1.1rem;
}
.shiwen .related-author {
color: #666;
font-size: 0.9rem;
margin-bottom: 10px;
}
.shiwen .related-excerpt {
font-size: 0.95rem;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1200px) {
nav li {
margin: 0 8px;
}
nav a {
font-size: 0.9rem;
}
.swiper-container {
height: 350px;
}
.carousel-title {
font-size: 2rem;
}
.carousel-text {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
header {
height: 80px;
padding: 0 15px;
}
.header-container {
justify-content: space-between;
}
.menu-toggle {
display: block;
}
nav ul {
display: none;
}
.mobile-scroll-nav {
display: block;
}
.site-title {
font-size: 1.5rem;
margin-bottom: 0;
}
.search-container {
width: auto;
flex: 1;
margin-left: 15px;
}
body {
padding-top: 120px;
}
.main-content, aside {
width: 100% !important;
padding: 0;
}
.shiwen {
padding: 20px 15px;
}
.two-column-item, .classics-item {
width: 100%;
}
.dual-blocks, .triple-column {
flex-direction: column;
}
.swiper-container {
height: 300px;
}
.swiper-button-prev, .swiper-button-next {
display: none !important;
}
.carousel-title {
font-size: 1.6rem;
}
.carousel-text {
font-size: 1rem;
}
.required-header {
flex-direction: column;
}
.required-header-image {
width: 100%;
margin-right: 0;
margin-bottom: 15px;
height: 200px;
}
.guoxue .article-item {
flex-direction: column;
align-items: flex-start;
}
.guoxue .article-image {
flex: 0 0 100%;
margin-right: 0;
margin-bottom: 15px;
}
.guoxue .article-image img {
height: 180px;
}
}
@media (max-width: 480px) {
.content-card {
flex-direction: column;
}
.content-card-img, .card-image, .card-content {
width: 100%;
}
.card-image {
height: 150px;
}
section {
padding: 15px;
}
.section-title {
font-size: 1.3rem;
}
.footer-link-list {
gap: 10px;
font-size: 0.9rem;
}
.article-image img {
height: 140px;
}
.author-list li, .book-list li {
position: relative;
padding-left: 0;
}
.author-list li span,.book-list li span{
display: none;
}
.author-list li::before, .book-list li::before {
background: none;
}
.mingju-list article a {
display:block;
}
.mingju-list article a:last-child {
font-size:0.9rem;
color: #999999;
font-weight: 400;
}
.mingju-list article span {
display:none;
}
.author-avatar-link {
display:none;
}
.grid-article-list, .grid-chapter-list {
grid-template-columns: repeat(2, 1fr);
}
}
section {
background-color: white;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.section-title {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 2px solid var(--secondary-color);
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
color: var(--accent-color);
}
.filters {
margin-bottom: 30px;
}
.filter-group {
display: flex;
justify-content: flex-start;
}
.filter-header {
width:50px;
}
.filter-title {
width:50px;
font-size: 0.9rem;
color: var(--secondary-color);
cursor: pointer;
}
.filter-icon {
margin-left: 10px;
transition: transform 0.3s ease;
}
.filter-icon.rotate {
transform: rotate(180deg);
}
.filter-content {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
max-height: 26px;
overflow: hidden;
transition: max-height 0.5s ease;
}
.filter-content.expanded {
max-height: 1500px;
}
.filter-content a{
color: var(--primary-color);
}
.filter-item {
padding: 0;
font-size: 0.9rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.filter-item.active {
color: var(--accent-color);
text-decoration: none;
}
/* 文章列表样式 */
.article-list {
margin-top: 20px;
}
.article-list article {
padding: 20px;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.3s ease;
}
.article-list article:last-child {
border-bottom: none;
}
.article-list article:hover {
background-color: rgba(245, 242, 233, 0.5);
}
.article-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.article-title {
margin: 0;
font-size: 1.3rem;
font-weight:700;
}
.article-title a {
color: var(--primary-color);
}
.article-title a:hover {
color: var(--accent-color);
}
.article-actions {
display: flex;
gap: 10px;
}
.action-link {
font-size: 0.9rem;
color: #666;
padding: 2px 5px;
border: 1px solid transparent;
border-radius: 3px;
}
.action-link:hover {
color: var(--accent-color);
border-color: var(--accent-color);
text-decoration: none;
}
.article-meta {
margin-bottom: 10px;
font-size: 0.9rem;
color: #666;
}
.article-meta a {
color: #666;
}
.article-meta a:hover {
color: var(--accent-color);
}
.article-content {
margin-bottom: 15px;
line-height: 1.8;
position: relative;
}
.article-content.expanded .content-more {
display: none;
}
.article-footer {
display: flex;
flex-wrap:wrap;
gap: 15px;
font-size: 0.9rem;
}
.footer-action {
display: flex;
align-items: center;
}
.footer-action i {
margin-right: 5px;
font-size: 0.9em;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 40px;
gap: 15px;
}
.page-btn {
padding: 8px 20px;
background-color: white;
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--primary-color);
font-family: 'Noto Sans SC', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.page-btn i {
margin: 0 5px;
}
.page-btn:hover {
background-color: var(--primary-color);
color: white;
text-decoration: none;
}
.page-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: #f1f1f1;
color: #999;
border-color: #ddd;
}