/*@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);*/

body { margin: 0; padding: 0; background: #f9f2e0 url('../images/bg_texture.jpg') no-repeat; background-size: 100% 100%; background-attachment: fixed; }

div, span, ul, li, a { box-sizing: border-box; }

ul.list-vertical { height: 100%; float: right; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: block; margin: 0; padding: 0; list-style-type: none; text-align: left; }
ul.list-vertical li { height: 100%; padding: 0.65vw; display: inline-block; }
ul.list-vertical li a { display: inline-block; line-height: 100%; width: 100%; text-align: left; color: #333; /* transition: color 0.2s ease; */ text-decoration: none; font-size: 2em; font-family: '標楷體', serif; font-weight: bold; letter-spacing: 0.2em; }
ul.list-vertical li a:hover { color: red; }
ul#intro-menu { width: initial; }
ul#poem-menu { width: 95%; }
.author { font-size: 0.75em; margin-top: 1em; font-weight: normal; }
ul.list-vertical.icon-starter { padding-right: 32px; background: url('../images/icon_starter.svg') top right no-repeat; background-size: 1.8em auto; }
a { color: #333; text-decoration: none; }
a:hover { color: #f9351d; }
div, ul, li, a { height: auto; }
nav { padding-right: 12%; padding-top: 25vh; /*padding-top: 30vh; padding-bottom: 10vh;  padding-left: 5%; */ }
#rthklogo { width: 90px; height: 35px; position: absolute; top: 28px; left: 25px; z-index: 99; }
#menu-graphic { position: absolute; z-index: -1; left: 3%; bottom:3%; max-width: 1000px; width: 50vw; height: 40vh; background: url('../images/menu_graphic.png') left bottom no-repeat; background-size: contain; }
#menu { position: relative; z-index: 0; width: 100%; height: 100%; /* padding: 30px 150px 30px 30px; */ text-align: center; }
#logo-grp { position: absolute; top: 0%; right: 0; text-align: left; padding-top: 20vh; width: 10%; /*max-height: 40vh; */ min-width: 80px; background: url('../images/logo_graphics.png') top right no-repeat; background-size: contain; }
#series { padding-bottom: 10px; margin: 5px; }
#series img { width: 5vw; max-width: 80px; min-width: 30px; height: auto; }
#logo1 { }
#logo1 img { width: 6vw; max-width: 100px; min-width: 35px; height: auto; } 
#footer { position: absolute; bottom: 0px; width: 100%; font-size: .9em; text-align: left; padding-bottom: 4em; padding: 4%; }
#remarks { text-align: right; font-size: 1.05em; float: right; opacity: .8; }

/* MUSIC PLAYER */
#musicplayer { float: right; display: block; padding: 6px; position: absolute; top: 35px; left: 120px; }
#musicplayer .mute { display: inline-block; }
#musicplayer .music { }
#musicplayer .music a { display: inline-block; padding: 0px 2px; }
#musicplayer .music a.selected { color: #f17119; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

@media (max-width: 1800px) {
	ul.list-vertical li a { font-size: 1.8em; }
}
@media (max-width: 1366px) {
	ul.list-vertical li a { font-size: 1.6em; }
}
@media (max-width: 1150px) {
	ul.list-vertical { font-size: 0.9em; }
}
@media (max-width: 992px) {
	nav { padding-top: 18%; padding-bottom: 6%; padding-right: 5%; padding-left: 20%; }
	#footer { position: relative; padding-bottom: 3.5em; }
	ul.list-vertical { -webkit-writing-mode: horizontal-tb !important; -ms-writing-mode: rl-tb !important; writing-mode: horizontal-tb !important; text-align: left;  }
	ul#intro-menu, ul#poem-menu { width: 100%; padding-top: 1em; padding-right: 0px; padding-left: 2em; }
	ul#poem-menu { }
	ul.list-vertical.icon-starter { background-position: top left; background-size: 28px auto; }
	ul.list-vertical li { display: block; }
	ul.list-vertical li .author { padding: 0; padding-left: 1em; }
	ul.list-vertical li a { display: inline; }
	/* ul.list-vertical li { height: 22em; padding: 1vw; }
	nav { padding-top: 20vw; padding-right: 16vw; } */
	ul.list-vertical li { padding: 1.4vw; }
	#menu-graphic { position: relative; width: 80%; height: 30vw; /* margin-bottom: 2em; */ }
	#logo-grp { left: 0; padding-top: 100px; padding-left: 5vw; background: url('../images/logo_graphics_mobile.png') top left no-repeat; background-size: contain; }
	#rthklogo { left: auto; right: 15px; top: 15px; width: 50px; min-width: 55px; z-index: 10; }
	#musicplayer { left: auto; right: 80px; top: 12px; }
}
@media (max-width: 767px) {
	/*#nav { padding-right: 130px; padding-top: 50px; padding-left: 20px; }
	#menu { width: 100%; height: 90%; }
	nav { padding-right: 60px; }
	ul.list-vertical li { height: 18em; padding: 1.2vw; }
	ul#intro-menu { position: absolute; right: -38px; top: 250px; }
	ul#poem-menu { width: 100%; }*/
	#footer { position: relative; padding-bottom: 3.5em; }
}
@media (max-width: 480px) {
	ul.list-vertical li { font-size: .8em; }
}