#nav,
		#nav ul,
		#nav li,
		#nav a {
			border:none;
			outline:none;
			-webkit-tap-highlight-color:rgba(0,0,0,0);
		}
		#nav #cur {
			background:rgba(135,206,250,1);
			/* background:rgba(255,110,100,.2); */
		}
		#nav ul {
			float:left;
			font-family:Arial,Helvetica,sans-serif;
			font-weight:300;
			list-style:none;
			max-height:40em;
			position:absolute;
			z-index:1;
		}
		#nav div {
			text-align:right; 
			height:0; 
			position:relative; 
			left:-.7em; 
			top:.97em;
		}
		#nav a {
			color:#1C1C1C;
			display:block;
			padding:1em 1em;
			white-space:nowrap;
		}
		#nav ul li	{
			background:rgba(255,255,255,1);
			position:relative;
			width:10em; /* main width of the first column */
			
			/* fix bug (CSS column count overflow issue in chrome) */
			-webkit-column-break-inside:avoid;
            page-break-inside:avoid;
            break-inside:avoid;
		}
		#nav ul ul {
			/* display:none; */
			/* box-shadow:0.3em 0.3em 0.5em rgba(122,122,122,0.5); */

			/* left:0; */		/* horizontal menu */
			/* top:100%; */ 	/* horizontal menu */
			left:100%;			
			top:0;
			z-index:2;
			
			/* ul max-width animaton */
			max-width:0;
			overflow:hidden;
			-webkit-transition:max-width .35s ease .2s;
			-moz-transition:max-width .35s ease .2s;
			-o-transition:max-width .35s ease .2s;
			-ms-transition:max-width .35s ease .2s;
			transition:max-width .35s ease .2s;
		}
		#nav ul ul li{
			border-left:1px solid #ccc;
			width:12em; /* main width of the second and more columns */
		}
		#nav ul ul ul {
			z-index:3;
		}
		#nav ul ul ul ul {
			z-index:4;
			column-gap:0;
		}
		#nav ul ul ul ul.col_2 {
			/* 2 columns */
			-moz-column-count:2;
			-webkit-column-count:2;
			column-count:2;
		}
		#nav ul ul ul ul.col_4 {
			/* 4 columns */
			-moz-column-count:4;
			-webkit-column-count:4;
			column-count:4;
		}
		
		#nav a:active:only-child {
			/* background:rgba(240,240,240,1); */
		}
		#nav ul li:hover {
			background:rgba(248,248,248,1);
		}
		
		#nav ul input[type='checkbox'] {
			display:none;
			position:absolute;
			z-index:2;
		}
		#nav ul label {
			display:inline-block;
			width:100%;
		}
		#nav ul label a {
			pointer-events:none; /* fix label unclickable */
		}
		#nav ul input[type='checkbox']:checked + li {
			background:rgba(230,230,230,1);
			font-weight:600;
		}
		#nav ul input[type='checkbox']:checked + li[tag='folder'] > ul {
			max-width:48em;
		}
				
	@media 
	/* iPhone 4 */
	only screen 
	and (min-device-width :320px) 
	and (max-device-width :480px)
	and (-webkit-device-pixel-ratio:2),
	
	/* iPhone 5 */
	only screen 
	and (min-device-width :320px) 
	and (max-device-width :568px)
	and (-webkit-device-pixel-ratio:2),
	
	/* iPhone 6 */
	only screen 
	and (min-device-width :375px) 
	and (max-device-width :667px)
	and (-webkit-device-pixel-ratio:2),
	
	/* iPhone 6+ */
	only screen 
	and (min-device-width :414px) 
	and (max-device-width :736px)
	and (-webkit-device-pixel-ratio:2),
	
	/* iPhone X */
	only screen 
	and (device-width : 375px) 
	and (device-height : 812px) 
	and (-webkit-device-pixel-ratio : 3),
	
	/* Android high density */
	only screen
	and (min-resolution :163dpi)
	/* and (max-width :1080px)  */
	{
		#nav #cur {
			background:rgba(255,255,255,1);
		}
		#nav ul {
			font-size:50px;
			max-height:500em;
			width:100%;
		}
		#nav ul::after {
			color:silver;
			content:"\a9\2002 2019 design by Tera Ltd.\2002";
			display:block;
			font-family:Arial,Helvetica,sans-serif;
			font-size:0.7em;
			padding-top:0.1em;
			text-align:right;
			width:100%;
		}
		#nav ul li	{
			border-left:0;
			border-bottom:2px solid silver;
			max-height:100%;
			width:100%;
		}
		#nav a {
			color:black;
		}
		#nav ul ul {
			left:0;
			top:100%;
			
			-webkit-transition:max-width .15s linear .1s;
			-moz-transition:max-width .15s linear .1s;
			-o-transition:max-width .15s linear .1s;
			-ms-transition:max-width .15s linear .1s;
			transition:max-width .15s linear .1s;
		}
		#nav ul ul li	{
			width:100%;
		}
		#nav ul ul ul ul.col_2, #nav ul ul ul ul.col_4 {
			/* 1 columns */
			-moz-column-count:1;
			-webkit-column-count:1;
			column-count:1;
		}
		
		#nav a:active {
			background:rgba(150,225,255,1);
		}
		#nav a:active:only-child {
			font-weight:700;
		}
		#nav ul:hover::after {
			display:inherit;
		}
		#nav ul li:hover {
			background:rgba(255,255,255,1);
			font-weight:300;
		}
		#nav ul li:hover > ul {
			max-width:0;
		}

		#nav ul input[type='checkbox']:checked + li {
			background:rgba(135,206,250,1);
		}
		#nav ul input[type='checkbox']:checked + li[tag='folder'] > ul {
			max-width:100%;
		}
		#nav ul input[type='checkbox']:checked + li[tag='folder'] ~ li {
			max-height:0;
			opacity:0;
		}
		
	}