* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 body, td, th, input, select, option { font-family:'Times New Roman', '微軟正黑體', '正黑體'; }


 a	{ text-decoration:none; }
 a:hover	{ text-decoration:none; }
 [data-replace], [data-href], [data-link] { cursor:pointer; }
 html[data -url] { cursor:initial; }
 body { margin:0px; }
 form { display:inline; }
 table { border-collapse:collapse; }
 img { max-width:100vw; vertical-align:middle; }
 caption { white-space:nowrap; }
 
 h2, section>h3, nav>h6, .hide
 { position:absolute; z-index:9; left:-1000vw; top:-100vh; }
.hide:focus, .hide:focus-within { left:0; top:5px; color:#000; background:#fff; }
 
 h3.show { position:initial; left:0; top:0; }

 cen, cen { text-align:center; }
 left, .left { text-align:left; }
 right, .right { text-align:right; }

:root 
{
	--colorB:#00b4e7;
	--colorBl:#ddf0fe;
	--colorBd:#007caa;

	--colorOl:#fdf5e0;
	--colorO:#f69173;
	--colorGl:#e7e7e7;
}

::-webkit-scrollbar { width: 1em; }
 section::-webkit-scrollbar { width: 0.5em; }

/* Track */
::-webkit-scrollbar-track { border-radius:0.5em; background: #ddd; }

/* Handle */
::-webkit-scrollbar-thumb { border-radius:0.5em; background:var(--colorB); }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }

 flex, .flex, [flex] { display:flex; }
 iflex { display:inline-flex; }
 idiv { display:inline-block; }
 
 right { display:block; text-align:right; }
 
 
 h1 { display:inline; margin:0; padding:0; font-size:1em; }
 
 body>nav { margin:0.5em; padding:0.5em; border:2px solid #888; border-radius:0.5em; }
 body>nav>ul>*, body>nav>ol>* { display:block; }
 body>nav>h, body>nav>h6, body>nav>ul , body>nav>ol { position:initial; margin:0; } 
 
 body { overflow-x:hidden; }
 body>div>* { display:flow-root; width:1000px; max-width:100vw; margin:auto; }
 body>div:nth-child(2) { background:url(img/bg01.jpg); background-size:2em; }

 header { background:#fff; }
 header>right>a { display:inline-block; margin:0.5em 1em; color:#888; font-family:sans-serif; }
 header>right>a:is(:hover, :focus) { color:#000; }
 header>h1 { position:relative; display:block; background-color:#fff; text-align:center; }
 header>h1 img { width:400px; max-width:90%; }

 header>div { position:relative; text-align:center; }
 header>div>img:nth-child(2) { position:absolute; top:0px; left:-25%; max-width:150vw; z-index:1; }

/*
 header>a:after { content:url(img/home0.png); position:absolute; right:0; bottom:0; } 
 header>a:hover:after { content:url(img/home1.png);  color:var(--colorB); }
*/
 header>div:last-child>div { position:absolute; bottom:0; width:100%; height:3em; text-align:center; z-index:2; text-shadow: 0.1em 0.1em 0.2em black; }
 header>div:last-child>div>a { display:inline-block; padding:0.5em 0.2em; line-height:1; opacity:1; color:#fff; font-size:1.2em; }
 header>div:last-child>div>a:hover { color:var(--colorB); }
 header>div:last-child>div>a.act { opacity:1; color:var(--colorB); }
 
#headBanner { width:1000px; height:500px; max-height:50vw; }

 nav.head { background:#fff; text-align:center; font:0.75em/2 sans-serif;}
 nav.head a { display:inline-block; width:12em; margin:2px; padding:0.3em;
 background-position:50% 0.2em; background-repeat:no-repeat; color:#000; }
 nav.head a>img { display:block; margin:auto; }
 nav.head a:hover>img {  }
 
 main a:hover { background:#FF8; }

 nav.head>a.act { border-bottom:var(--colorB) 2px solid; }
 
.bgf { position:absolute; keft:0; top:0; width:2em; }
.bgf>img { position:absolute; left:-100em; }
 
 
 
 main { background:#fff; font-size:1em; padding-bottom:2em; }
 main.index0 { display:flow-root;}
 main.index0>* { display:inline-block; margin:5px; width:490px; max-width:100vw; }
 
 main>article { padding:1em; }
 main>article h3 {margin:0.3em 0; font-size:1.2em; }
 
 
 section.route { float:left; max-height:500px; padding-right:0.5em; background:#fdf5e0; overflow:auto; }
 section.route>h3 { border-radius:0.2em; margin:0 0 0.2em 0; padding:0.5em; background:var(--colorO); font-size:1em; color:#fff; font-weight:normal }
 
 section.route>div { border:1px solid var(--colorO); border-radius:0.5em; padding:0.3em; }
 section.route table { width:100%; margin-bottom:0.5em; }
 section.route table caption { background:var(--colorB); color:#fff; border-radius:0.5em; padding:0.5em; text-align:left; }
 section.route table tr:first-child { background:#e0e1e3; }
 section.route table tr>* { border-bottom:1px solid #000; padding:0.5em; }
 section.route table tr>th { width:4em; }
 section.route table tr>th:first-child { border-right:1px solid #000; }



/* company */
 main.company article { display:inline-block; width:480px; max-width:95vw; margin:1em 0.5em; padding:0;
 border:#eee 1px solid; border-radius:0.5em; background:#ffffff; box-shadow:3px 3px 0px #eee;
 vertical-align:top; text-align:center; }
 main.company article:hover { border-color:var(--colorB); }
 main.company article h3 { margin:0.5em; font-size:1.5em; text-align:left; }
 main.company article .tel { border-top:#ddd 1px solid; padding:0.5em; text-align:left; font-family:'Comic Sans MS'; }
 main.company article .boat { text-align:center; margin:0.5em; border:3px inset #eee; background-size:contain; overflow:hidden; }
 main.company article .boat>img { position:relative; width:100%; }
 main.company article .boat>img.chg0
{ animation-name:chgImg0; animation-duration:2s; }
 main.company article .boat>img.chg1
{ animation-name:chgImg1; animation-duration:2s; }

 main.company article .web { float:right; margin:0.5em; }
 main.company article .web>a { display:block; width:8em; margin:auto; padding:0.2em; border-radius:0.9em; text-align:center; background:var(--colorB); color:#fff;}
 main.company article .web>a:hover { background:#000; }


@keyframes chgImg0
{
    from { left:-200%;}
    to { left:0; }
}
@keyframes chgImg1
{
    from { left:200%;}
    to { left:0; }
}


/* index */
 main.index0>aside>img { width:100%; }

/* about */
 main.index>* { margin:0 5px 10px 5px; }
 main.index flex>aside {  }


 main.index article { padding:0 1.5em; font-size:0.9em; line-height:1.5; }
 main.index article h3 { text-align:left; font-size:1.2em; }
 main.index .imgL { text-align:center; }
 main.index .imgL>img { margin:2px; width:311px; }



/* port */
 main.port>nav { margin-top:1em; text-align:center; }
 main.port>nav>a { display:inline-block; width:190px; margin:5px; padding:0.3em; border-radius:1.15em; background:#404040; color:#fff; }
 main.port>nav>a:hover, main.port>nav>a:focus { background:var(--colorB); color:#fff; }
 main.port>nav>a.act { background:var(--colorO); }
 main.port flex {  grid-gap:20px;margin-top:1em; font-family:sans-serif; }
 main.port flex img { border:2px solid #ccc; }
 main.port flex ol { margin-top:0.25em; padding:0.5em 0.5em 0.5em 2em; color:#fff;}
 main.port flex ol>li { position:relative; margin:0.5em 0; line-height:1.5; }
 main.port flex ol>li::before { content:'◯'; position:absolute; left:-1.1em; top:-0.25em; font-size:1.5em; vertical-align:middle; }

 main.teach nav { text-align:center; margin:2em 0 1em 0; }
 main.teach nav a { display:inline-block; width:12em; }
 main.teach article { font-size:0.9em; }
 
 main.teach .imgL { max-height:80vh; overflow:auto; text-align:center;  }
 main.teach .imgL>div { display:none; }
 main.teach .imgL>div.act { display:block; }
 main.teach .imgL img { width:480px; max-width:90vw; margin:2px; }

 main.route article { padding:0 2em; background:var(--colorBl); font-size:0.7em; }
 main.route article>h3 { margin:0; padding:0.5em 1em; border-radius:0.2em; background:var(--colorBd); color:#fff; font-size:1em; }
 main.route nav a { d isplay:block; margin:0.5em; box-shadow:1px 1px 2px #0004; }
 main.route flex.info>* { width:50%; margin-right:1em; }
 main.route flex.info h4 { margin:1.5em 0 0.3em 0; padding:0.5em 1em; border-radius:1.25em; background:var(--colorB); color:#fff; }
 main.route flex.info ul { margin:0; }
 main.route article a { display:inline-block; }

 table.route { width:100%; background:#fff; }
 table.route tr>* { border:1px solid #888; padding:1em 0.5em; }
 table.route th { background:#ffe294; }
 table.route tbody { display:none; }
 table.route tbody.act { display:table-row-group; }
 table.route tbody>tr:nth-child(even) { background:#d4f0fe; }

 table.route tbody>tr>td:nth- child(2) { width:7em; text-align:center; }
 table.route tbody>tr>td:nth- child(3) { width:7em; text-align:center; }
 table.route tbody>tr>td:nth- child(4) { width:8em; }



.linkL a, .link { display:inline-block; margin:0.2em; padding:0.3em 1em; border-radius:1.15em; background:#fff; color:#000; text-align:center; }
.linkL a:hover, .link:hover, .linkL a.act, .link.act  { background:var(--colorB); color:#fff; }

.linkL2>a, .link2 { display:inline-block; margin:0.2em; padding:0.3em 1em; border-radius:1.15em; background:#444; color:#fff; text-align:center; }
.linkL2>a:hover, .link2:hover, .linkL2>a.act, .link2.act{ background:var(--colorB); }

.boxL>* , .box { border:var(--colorO) 1px solid; border-radius:0.5em; margin:0.2em; }

 footer { padding:0.5em; border-radius:0.5em; background:#eee; text-align:center; color:#000; line-height:2; font-size:0.8em; }
 footer a { margin-right:1em; color:#000; text-decoration:underline; }
 
@media screen and (max-width: 800px)
{
	header>a { padding-bottom:1em; font-size:0.9em; }
	header>div { overflow:hidden; }

	flex { display:block; }
	flex>* { display:; }
	
	main.index>* { margin:0 0 10px 0; }
	main.route article { padding:0.1em; }
	main.route flex.info>* { width:100%; }

	table.route tr { display:block; border-bottom:3px solid #888; margin-bottom:0.5em; }
	table.route tr>* { display:block; }
	table.route tr>th { padding:0.2em; }


	.bgf>img { display:none; }