@charset "UTF-8";

html,body{
	width:100%; height:100%; margin:0;
	
	font-size:16px;
	color:#fff; 
	background:#000;
	
	font-family:'Noto Sans TC','Gotham','Arial', sans-serif;
	font-weight:500;
	
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
body, html, div, select, input, textarea, img, span{  font-family:'Noto Sans TC','Gotham','Arial', sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1,h2,h3{ font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0; }

input{ background-color:transparent; border:none; color:#fff;  }
input:focus, textarea:focus{ outline:none; color:#fff;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#111; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#ffffff; -webkit-text-fill-color:#ffffff !important;
}

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }

.clear{ clear:both; }

.txt-bold{ font-weight:700; }

.txt-giant{ font-size:3.5em; }
.txt-huge{ font-size:2.5em; }
.txt-menu{ font-size:1.8em; }
.txt-large{ font-size:1.8em; }
.txt-big{ font-size:1.25em; }
.txt-small{ font-size:.8em; }

.nav-container.txt-large{ font-size:2.5em}


.txt-wide{ letter-spacing:0.1em}

.txt-section-head{ margin-bottom:0.5em; letter-spacing:0.1em}
.txt-section-body{ line-height:180%;}

.txt-black{ color:#000;}
.txt-lightgrey{ color:#aaa;}
.txt-pink, .fd-button-container.pink.hover, .fd-button-container.pink.active, .lang-container.hover{ color:#e63278;}
.txt-green, .fd-button-container.green.hover, .fd-button-container.green.active{ color:#00b4af;}
.txt-brown, .fd-button-container.brown.hover, .fd-button-container.brown.active{ color:#8c6e5a;}
.txt-orange, .fd-button-container.orange.hover, .fd-button-container.orange.active{ color:#ff9600;}
.fd-button-container.static.hover, .fd-button-container.static.active{ color:#fff} 

.backdrop-container{ position:fixed; width:100%; height:100%; top:0; left:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.25; background-image:url("../img/kv.jpg");  }
.backdrop-container.white{ background:#fff; opacity:1; }

.shadow-container{ height:4em; width:100%; position:absolute; background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);} 


.menu-container{ z-index:2; position:fixed; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; background-image:url("../img/kv.jpg"); overflow:scroll; transform:translateX(-100%); opacity:0; transition:opacity 400ms linear, transform 0ms 400ms }
.menu-container.active{  transform:translateX(-0%); opacity:1; transition:opacity 400ms linear }


.menu-cover-container{ position:fixed; top:0; left:0; width:100%; height:100vh; background:#000; opacity:0}
 
.menu-container-inner{ display:flex; align-items:center; min-height:calc(100% - 0em); position:relative; background:rgba(0,0,0,.8) }
.menu-eles-container{ width:auto; margin:6em auto; text-align:center; height:auto; }

.menu-ele-container{ margin:auto; text-align:left; line-height:1;  margin-bottom:1.2em; letter-spacing:0.1em; position:relative; }
.menu-ele-container-inner{ display:inline-block; position:relative; padding:0.2em 0.6em 0.3em 0.8em;  }

.menu-ele-container a > div:nth-child(1){ position:absolute; background:#ff0000; width:0.3em; height:100%; top:0; left:0; transition:width 400ms ease-out  }
.menu-ele-container a > div:nth-child(2){ position:relative; }

.menu-ele-container:nth-child(1) a > div:nth-child(1){ background:#e63278;}
.menu-ele-container:nth-child(2) a > div:nth-child(1){ background:#00b4af;}
.menu-ele-container:nth-child(3) a > div:nth-child(1){ background:#8c6e5a;}
.menu-ele-container:nth-child(4) a > div:nth-child(1){ background:#ff9600;}
.menu-ele-container:nth-child(4) a > div:nth-child(1){ background:#ff9600;}
.menu-ele-container:nth-child(5) a > div:nth-child(1){ background:#fff;}
.menu-ele-container:nth-child(6) a > div:nth-child(1){ background:#fff;}
.menu-ele-container:nth-child(7) a > div:nth-child(1){ background:#fff;}
.menu-ele-container:nth-child(8) a > div:nth-child(1){ background:#fff;} 

.menu-ele-container.inactive{ pointer-events:none; opacity:0.8 } 
.menu-ele-container.inactive a > div:nth-child(1){ background:#333; }
.menu-ele-container.inactive a > div{ color:#333!important}

.menu-ele-container:last-child{ margin-bottom:0; }


.menu-ele-container .menu-ele-container-inner.hover a > div:nth-child(1){ width:100%; transition:width 200ms ease-out}
/* 0324 */
.menu-ele-container:nth-child(5) .menu-ele-container-inner.hover a > div:nth-child(2){ color:#000;}
.menu-ele-container:nth-child(6) .menu-ele-container-inner.hover a > div:nth-child(2){ color:#000;}
.menu-ele-container:nth-child(7) .menu-ele-container-inner.hover a > div:nth-child(2){ color:#000;}
.menu-ele-container:nth-child(8) .menu-ele-container-inner.hover a > div:nth-child(2){ color:#000;}
/* 0324 */

.menu-ele-container.active .menu-ele-container-inner a > div:nth-child(1){ width:100%;  }
.menu-ele-container.active .menu-ele-container-inner a { pointer-events:none;  }

.langs-container{ display:flex; justify-content:center; line-height:1;  bottom:2.5em; align-items:center;  text-align:center; width:90%; position:absolute; left:5%;}
.lang-sep-container{ width:2px; height:0.8em; background:#fff; margin:0 1em; transform:translateY(0.05em)}


.header-container{ position:fixed; width:100%; height:5em; background:#000; z-index:3; transition:background-color 400ms linear}

.header-container.menu{ background-color:transparent;  }
.header-space{ height:5em; }
.inner-container{ margin:auto; height:100%; position:relative; width:90%; max-width:1280px; }

.logo-container{ position:absolute; width:15em; left:0; top:50%; transform:translateY(-50%)}
.logo-container-inner{ width:100%; padding-bottom:17.3%; background-image:url("../img/logo.svg"); background-size:contain; background-position:center left; background-repeat:no-repeat;  }

.menu-icon-container, .lightbox-icon-container{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:2em; height:1.5em; cursor:pointer; }
.menu-icon-container > div, .lightbox-icon-container > div{ position:absolute; width:100%; height:3px; background:#fff; }
.menu-icon-container > div:nth-child(1), .lightbox-icon-container > div:nth-child(1){ top:0; transition:transform 200ms, opacity 200ms; transition-delay:100ms  }
.menu-icon-container > div:nth-child(2), .lightbox-icon-container > div:nth-child(2){ top:calc(50% - 1.5px); transition:transform 200ms, opacity 200ms  }
.menu-icon-container > div:nth-child(3), .lightbox-icon-container > div:nth-child(3){ top:calc(50% - 1.5px); transition:transform 200ms, opacity 200ms  }
.menu-icon-container > div:nth-child(4), .lightbox-icon-container > div:nth-child(4){ bottom:0; transition:transform 200ms, opacity 200ms; transition-delay:100ms  }

.menu-icon-container.active > div:nth-child(1){ transform:translateY(0.6em); opacity:0;  transition-delay:0ms}
.menu-icon-container.active > div:nth-child(4){ transform:translateY(-0.6em); opacity:0; transition-delay:0ms}

.menu-icon-container.active > div:nth-child(2){ transform:rotate(-45deg); transition-delay:100ms }
.menu-icon-container.active > div:nth-child(3){ transform:rotate(45deg); transition-delay:100ms }


.lightbox-icon-container{ width:0em; height:0em; transform:translate(0,0); top:0;}
.lightbox-icon-container > div:nth-child(1){ transform:translateY(0.6em); opacity:0;  transition-delay:0ms}
.lightbox-icon-container > div:nth-child(4){ transform:translateY(-0.6em); opacity:0; transition-delay:0ms}

.lightbox-icon-container > div:nth-child(2){ transform:rotate(-45deg); transition-delay:100ms }
.lightbox-icon-container > div:nth-child(3){ transform:rotate(45deg); transition-delay:100ms }


.header-container.white{ background:#fff; }
.header-container.white .logo-container-inner{ background-image:url("../img/logo-black.svg"); }
.header-container.white .menu-icon-container > div{ background:#000; }
.header-container.white .shadow-container{ top:100%; height:.5em; opacity:0.2; }

.header-container.menu{ background-color:transparent;  }
.header-container.menu .logo-container-inner{ background-image:url("../img/logo.svg"); }
.header-container.menu .menu-icon-container > div{ background:#fff; }
.header-container.menu .shadow-container{ opacity:0; }

.footer-container{ background:#fff; width:100%; padding:0em 0 2em 0; z-index:1; position:relative; }
.footer-logo-container{ width:15em; margin-bottom:3em; }
.footer-info-container{ display:flex; justify-content:flex-start; margin-bottom:3em; }
.footer-info-col{ width:24%; margin-right:10%; }
.footer-info-col:last-child{ margin-right:0; margin-left:8%;   }

.footer-heading{ line-height:1; border-bottom:1px solid #333; padding-bottom: 1em; margin-bottom:1em }

.footer-sns-container{ display:flex; justify-content:flex-end; }
.footer-sns-container a{  margin-left:1em }
.footer-sns-container div{ width:2em; height:2em;  background-repeat:no-repeat; background-position:center; background-size:contain;  }

.footer-cr-container{ text-align:right}

.fd-button-container{ margin-top:1.5em; position:relative; line-height:1; padding:1em 3em;  display:inline-block; }
.fd-button-container canvas{ position:absolute; top:1px; left:1px; width:100%; height:100%; opacity:1; }
.fd-button-container div{ position:relative; }
.fd-button-container.static{ margin-top:0; margin-left:0em; padding:.75em 2em .75em 1.8em;   }

.landing-container{ width:100%; position:relative; background:#000; height:calc(100% - 5em); transition:opacity 0ms linear; }
.landing-shadow-container{ position:relative; width:100%; height:100%; }
.landing-container .shadow-container:nth-last-child(3){ height:100vh; top:0; background:radial-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); }
.landing-container .shadow-container:nth-last-child(2){ top:0 }
.landing-container .shadow-container:nth-last-child(1){ bottom:-1em; transform:scale(1,-1)}
 

.landing-container{ position:fixed; top:5em; }
.landing-container.off{ opacity:0; }
.landing-container.off .landing-nav-container{ opacity:0;   }

.cover-scroll-container{ height:100vh; }

.landing-img-container{ width:100%; height:100%; position:absolute; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0 } 

.landing-container .nav-container{ opacity:0; pointer-events:none; transform:translateY(-1em); }
.landing-container.active .nav-container{ opacity:1; pointer-events:none; transform:translateY(0em); transition:opacity 400ms linear, transform 500ms ease-out  }

.landing-container.active .nav-container:nth-child(1){ transition-delay:400ms}
.landing-container.active .nav-container:nth-child(2){ transition-delay:600ms}
.landing-container.active .nav-container:nth-child(3){ transition-delay:800ms}
.landing-container.active .nav-container:nth-child(4){ transition-delay:1000ms}

.landing-container.active .landing-img-container{ opacity:1; transition:opacity 1000ms linear;  } 
.landing-container.active .landing-img-container:nth-child(1){ transition:opacity 800ms 0ms linear; animation-delay:2s;  animation-iteration-count:infinite; animation-timing-function:linear;  animation-name:ani-breathing; animation-duration:10000ms; }

.landing-container.active .landing-img-container:nth-child(2), .landing-container.active .landing-img-container:nth-child(3), .landing-container.active .landing-img-container:nth-child(4){ /*animation-duration:0ms; animation-delay:0s;  animation-iteration-count:infinite; animation-timing-function:linear;  animation-name:ani-hide;*/ }


.landing-logo-container{ background-image:url("../img/logo-portrait.svg"); background-size:contain; background-position:center left; background-repeat:no-repeat; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:15em; height:15em; opacity:1; }
.landing-logo-container.active{ opacity:1; transition:opacity 2000ms ease-in-out; }
.landing-container.active .landing-logo-container.active{ opacity:0; transition:opacity 2000ms 1000ms ease-in-out; }

.header-container.home > .inner-container{ opacity:0; }
.header-container.home.active > .inner-container { opacity:1; transition:opacity 1000ms 3000ms ease-in-out; }

.landing-container.home.active .nav-container:nth-child(1){ transition-delay:2800ms}
.landing-container.home.active .nav-container:nth-child(2){ transition-delay:3000ms}
.landing-container.home.active .nav-container:nth-child(3){ transition-delay:3200ms}
.landing-container.home.active .nav-container:nth-child(4){ transition-delay:3400ms}

.landing-container.home.active .landing-img-container:nth-child(1){  transition:opacity 2000ms 7250ms linear;  }
.landing-container.home.active .landing-img-container:nth-child(2){  transition:opacity 1450ms 6700ms linear;  }
.landing-container.home.active .landing-img-container:nth-child(3){  transition:opacity 1800ms 5500ms ease-out;  }
.landing-container.home.active .landing-img-container:nth-child(4){  transition:opacity 3000ms 2500ms linear;  }

.landing-container.home.active .landing-img-container:nth-child(1){ animation-delay:7s; }

.landing-container.home.active .landing-img-container:nth-child(2), .landing-container.home.active .landing-img-container:nth-child(3), .landing-container.home.active .landing-img-container:nth-child(4){ animation-delay:8s;}
@keyframes ani-hide{
	0%   { opacity:0;  } 
	100% { opacity:0;  }
}

@keyframes ani-breathing{
	0%   { transform:scale(1,1);  }
	50%   { transform:scale(1.02,1.02);  }
	100% { transform:scale(1,1);   }
}

.landing-nav-container{ position:absolute; width:100%; bottom:4em; opacity:0; pointer-events:none!important  }
.landing-nav-container .inner-container{ display:flex; }
.nav-container{ writing-mode: vertical-lr; line-height:1; letter-spacing:.2em; font-weight:700; padding-left:0.5em; position:relative; margin-right:1em; display:inline-block; }
.nav-container div:nth-child(1){ display:inline-block; position:relative;  }
.nav-container div:nth-child(1) > div:nth-child(1){ height:calc(100% - 0.25em); width:0.15em; background:#e63278; position:absolute; left:-0.4em; top:0.1em; }

.nav-container.green div:nth-child(1) > div:nth-child(1){  background:#00b4af;}
.nav-container.brown div:nth-child(1) > div:nth-child(1){  background:#8c6e5a;}
.nav-container.orange div:nth-child(1) > div:nth-child(1){ background:#ff9600;}


.nav-container.hover  div:nth-child(1) > div:nth-child(1){  animation-duration:400ms; animation-fill-mode:forwards; animation-iteration-count:1; animation-name:ani-nav-line; transform-origin:bottom;  }
.nav-container.active  div:nth-child(1) > div:nth-child(1){  animation-duration:0ms; animation-name:ani-nav-line; }
@keyframes ani-nav-line{
	0%   { transform:scale(1,0);  }
	100% { transform:scale(1,1);   }
}


.landing-container.active .nav-container.inactive a{ opacity:0.3; transition:opacity 400ms linear;  }
.landing-container.active .nav-container.inactive.hover a{ opacity:1!important; }

.banner-cover{ width:100%; height:100%; position:absolute; background:#000; opacity:0.3; top:0; left:0}
.banner-title-container{ position:absolute!important; top:.75em; left:.75em }
.banner-title-container.nav-container{ padding-left:0.5em; filter:drop-shadow(0 0 .2em rgba(0,0,0,0.7)); }
.banner-title-container.nav-container div:nth-child(1) > div:nth-child(1){ width:0.2em; left:-0.5em; }

.grid-container{ width:100%; position:relative; padding-bottom:70%; background:#000}
.grid-container > div{ background-color:#e63278; position:absolute; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0;  }

.grid-container > div.active{ opacity:1; transition:opacity 800ms linear;  }

.grid-container > div:nth-child(1){ top:0; left:0; width:33%; height:33.33%;  }
.grid-container > div:nth-child(2){ top:33.33%; left:0; width:16.5%; height:16.66%;  }
.grid-container > div:nth-child(3){ top:49.99%; left:0; width:16.5%; height:16.67%;  }
.grid-container > div:nth-child(4){ top:33.33%; left:16.5%; width:16.5%; height:33.33%;  }
.grid-container > div:nth-child(5){ top:66.66%; left:0%; width:50%; height:33.34%;  }

.grid-container > div:nth-child(6){ top:0%; left:33%; width:17%; height:16.5%;  }
.grid-container > div:nth-child(7){ top:0%; left:50%; width:17%; height:16.5%;  }
.grid-container > div:nth-child(8){ top:16.5%; left:33%; width:34%; height:50.16%;  }
.grid-container > div:nth-child(9){ top:66.6%; left:50%; width:17%; height:33.34%;  }

.grid-container > div:nth-child(10){ top:0%; left:67%; width:33%; height:40%;  }
.grid-container > div:nth-child(11){ top:40%; left:67%; width:33%; height:33%;  }
.grid-container > div:nth-child(12){ top:73%; left:67%; width:16.5%; height:27%;  }
.grid-container > div:nth-child(13){ top:73%; left:83.5%; width:16.5%; height:27%;  }

.grid-container > div > div{ position:absolute; background-position:center; background-size:cover; background-repeat:no-repeat; width:100%; height:100%; animation-iteration-count:infinite; animation-timing-function:linear;  animation-name:ani-grid; animation-duration:9000ms; animation-direction:alternate-reverse;    }

@keyframes ani-grid{
	0%   { opacity:0;  }
	33.33%   { opacity:0;  }
	66.66% { opacity:1;   }
	100% { opacity:1;   }
}



.section-container{ background-position:center; background-size:cover; background-repeat:no-repeat; position:relative }
.section-inner-container{ position:absolute; bottom:10%; }
.section-inner-container.half{ width:50%; }
.section-inner-container.right{ right:0;}
.section-inner-container.auto{ position:relative;  bottom:auto; }
.section-inner-container.center{ text-align:center; width:100%; top:50%; filter:drop-shadow(0 0 .2em rgba(0,0,0,0.7)); transform:translateY(-50%); }

.fadeintext{ transition:transform 500ms ease-out, opacity 400ms linear; opacity:0; transform:translateY(2em);}
.fadeintext.active{ transform:translateY(0%); opacity:1; }


.section-container .shadow-container{ height:100%; top:0; background:radial-gradient(rgba(0,0,0,0.1), rgba(0,0,0,1)); }

.section-container.about-place{ min-height:50vw;  height:calc(100% - 5em); background:#000 } 
.section-container.transparent{ background:none;   } 

.section-container.transparent  > .shadow-container{ top:0; bottom:auto; width:100%; height:10em;  background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); transform:translateY(-5em)}

.about-place-bg-container{ background-position:center; background-size:cover; background-repeat:no-repeat; background-image:url("../img/bg-about-place.jpg"); width:100%; height:100%; position:absolute; left:0; top:0; }

.about-place .inner-container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);  } 

.about-place .txt-section-body > div:nth-child(1){ margin-left:-4em; }
.about-place .txt-section-body > div:nth-child(2){ margin-left:4em; }
.about-place .txt-section-body > div:nth-child(3){ margin-left:-2em; }
.about-place .txt-section-body > div:nth-child(4){ margin-left:2em; }

.deco-container{ position:absolute; left:0; top:0; height:60%; width:17em; background-position:left top; background-size:contain; background-repeat:no-repeat; background-image:url(../img/deco-typeone.svg);    }


.landing-banner-container{ width:100%; background:#000; padding-bottom:42%; background-size:cover; background-position:center; position:relative;}
.section-container.landing-banner .inner-container:nth-child(1){ margin-top:5em }
.landing-banner-txt-container{ width:100%; position: relative; padding:3em 0 9em 0;  }
 

.section-container.landing-banner .inner-container:nth-child(odd) .deco-container{ right:0; left:auto; background-position:right center; }
.section-container.landing-banner .inner-container:nth-child(even) .deco-container{ left:0; background-position:right center; transform:scale(-1,1)    }
.landing-banner-txt-container .deco-container{ height:100%; background-size:30em auto; width:50%; }

.section-inner-container.auto.right{ margin-left:50%; }


.columns-container{ display:flex; justify-content:flex-start; flex-direction:row-reverse; margin-bottom:10em;  }
.columns-container .txt-section-head{ margin-top:-0.3em} 


.columns-container .column-txt-container{ width:40%; margin-right:8%; }
.columns-container .column-img-container{ width:52%; position:relative; }

.column-img-container-inner{ position:relative; width:100%; padding-bottom:67%;  overflow:hidden; }
.column-img-indicator{ position:absolute; width:100%; /*bottom:1.25em;*/ margin-top:-2em; height:1em; display:flex; justify-content:center;}
.column-img-indicator > div{ border-radius:1000px; background:#fff; width:.8em; height:.8em; margin:0 0.5em; cursor:pointer; -webkit-filter: drop-shadow(0 0 .5em rgba(0, 0, 0, 0.6)); filter:drop-shadow(0 0 .5em rgba(0, 0, 0, 0.6)) }

.slideshow-ele{ width:100%; height:100%; position:absolute; top:0%; left:0; transform:translateX(-100%); animation-duration:600ms; animation-fill-mode:forwards; animation-iteration-count:1; background-size:auto 100%; background-repeat:no-repeat; background-position:center; opacity:0; transition:opacity 0ms 600ms linear;  }

.slideshow-ele.active{ transform:translateX(0%); opacity:1; transition:opacity 0ms 0ms linear; }

.slideshow-ele.slideshow-right-center{ animation-name:slideshow-right-center;  }
.slideshow-ele.slideshow-center-left{ animation-name:slideshow-center-left; }
.slideshow-ele.slideshow-left-center{ animation-name:slideshow-left-center; }
.slideshow-ele.slideshow-center-right{ animation-name:slideshow-center-right; }
  
@keyframes slideshow-right-center{
	0%   { transform:translateX(100%);  }
	100% { transform:translateX(0%);   }
}
@keyframes slideshow-center-left{
	0%   { transform:translateX(0%);  }
	100% { transform:translateX(-100%);  }
}
@keyframes slideshow-left-center{
	0%   { transform:translateX(-100%);  }
	100% { transform:translateX(0%);   }
}
@keyframes slideshow-center-right{
	0%   { transform:translateX(0%);  }
	100% { transform:translateX(100%);  }
}


.section-container.culture .column-img-indicator > div.hover, .section-container.culture .column-img-indicator > div.active{ background:#e63278 }
.section-container.building .column-img-indicator > div.hover, .section-container.building .column-img-indicator > div.active{ background:#00b4af }
.section-container.history .column-img-indicator > div.hover, .section-container.history .column-img-indicator > div.active{ background:#8c6e5a }
.section-container.hakka .column-img-indicator > div.hover, .section-container.hakka .column-img-indicator > div.active{ background:#ff9600 }



.columns-container:nth-child(even){ flex-direction:row;    }
.columns-container:nth-child(even) .column-txt-container{ width:40%; margin-left:8%; margin-right:0; }
.columns-container:nth-child(even) .column-img-container{ width:52%; }

.columns-container.full{ display:block }
.columns-container.full .column-img-container{ width:100%; }
.columns-container.full .column-txt-container{ margin:0em 0 1em 0; width:66%; }

.columns-container.empty { display:none}
.columns-container.single {  flex-direction:row;  }
.columns-container.single .column-txt-container{ margin:0; }

.columns-container.half{ margin-bottom:6em; }
.columns-container.half .column-txt-container{ width:calc(50% - 1.5em); margin-left:0em; margin-right:1.5em  }
.columns-container.half .column-img-container{ width:calc(50% - 1.5em); margin-left:1.5em; }
.columns-container.half:nth-child(even) .column-txt-container{  margin-left:1.5em; margin-right:0; }
.columns-container.half:nth-child(even) .column-img-container{  margin-right:1.5em; margin-left:0; }


.route-map a{ margin-right:0em }
.route-map .txt-small{ margin-top:1em }
.route-map .column-img-container > div{ position:absolute; width:100%; height:100%; top:0; left:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; }

.route-map > div:nth-child(2){ float:left; position:relative; width:100%;}
.route-map > div:nth-child(3){ float:left; position:relative; width:100%;}

.route-map > div:nth-child(3){ width:calc(100% - 20em)!important;   }
.route-map > div:nth-child(2){ width:20em!important;  }
 
.route-map a:nth-child(1) .fd-button-container{ margin-top:0; }
.route-map .column-img-container > div.active{ opacity:1; }



.timeline-container{ display:flex; margin-bottom:7.5em;  }
/*
.timeline-imgs-container{ width:50%; margin-right:5%;  }

.timeline-img-container{ float:right; width:50%; clear:both; margin-top:1em; margin-bottom:1em  }
.timeline-img-container:nth-child(even){ float:left; }
.timeline-img-container .txt-small{ margin-top:.5em } */


.timeline-checkpoints-container{ width:80%; position:relative; margin:auto   }
.timeline-checkpoints-container > div:nth-child(odd) { transform:translateX(100%); }
.timeline-checkpoints-container > div:nth-child(even) { text-align:right  }

.timeline-checkpoints-container > div:nth-child(even) .timeline-year-container{  margin-right:1.5em; margin-left:0 }
.timeline-checkpoints-container > div:nth-child(even) .timeline-checkpoint-cnt-container{ padding-left:0; padding-right:1.5em;  }


.timeline-checkpoints-line-container{ position:absolute; width:1px; height:calc(100% - 2em - 1.5em); top:0; left:calc( 50% - 1px ); background:rgba(255,255,255,0.3); transform:translateX(-50%);  }



.timeline-checkpoint-container{ width:50%; margin-bottom:3em;  position:relative }
.timeline-year-container{ line-height:1; margin-left:1.5em; margin-bottom:1.5em; letter-spacing:0.1em }
.timeline-checkpoint-cnt-container{ padding-left:1.5em; position:relative; }

.timeline-checkpoint-cnt-line{ position:absolute; width:0.3em; height:100%; top:0; left:-1px; background:#00b4af }

.timeline-checkpoints-container > div:nth-child(even) .timeline-checkpoint-cnt-line{ left:auto; right:-1px; }



.timeline-checkpoint-cnt-container .txt-big{ line-height:1; margin-bottom:1em; letter-spacing:0.1em}


.landmarks-maps-container{ background:#fff; width:100%; padding-bottom:40%;  }

.thumbs-container{ margin-top:4em; }
.thumbs-container > div:nth-child(even) { margin-right:0 }
.thumb-container{ float:left; width:47.5%;   margin-bottom:5em; padding-bottom:2em;   margin-right:5%  }
.thumb-img-container{ width:100%; padding-bottom:60%; background:#fff; margin-bottom:1.25em; background-size:cover; background-position:center;   }

.thumb-container:nth-child(2n+1){ clear:both; }
.thumb-title-container{ margin-bottom:0.5em }
/*
.thumb-container:nth-child(3n+2){ margin-left:3em; margin-right:3em }
.thumb-container:nth-child(3n+1){ clear:both;  }
*/

.thumbs-container.squares .thumb-img-container{ padding-bottom:95%; }
/*
.expandable-head{ padding:1em 2em 1em 2.5em; margin:1em 0; border-bottom:1px solid rgba(0,0,0,0.4); line-height:1; position:relative; cursor:pointer;}
.expandable-body{ margin-left:2.5em; line-height:1.8; display:none }

.expandable-head > div:nth-child(1){ position:absolute; width:2.5em; height:60%;  left:0; top:20%;  background-size:50% auto; background-position:center; background-repeat:no-repeat; }
.expandable-head > div:nth-child(2){ position:absolute; width:2em; height:60%;  right:0; top:20%;  background-size:contain; background-position:center right; background-repeat:no-repeat; transform-origin:center;  }

.expandable-head.active > div:nth-child(2){ transform:scale(1,-1);  }
*/

.expandable-head{ padding:1em 2em 0.75em 3em; margin:1em 0 0.5em 0; border-bottom:1px solid rgba(0,0,0,0.4); line-height:1; position:relative; cursor:pointer; pointer-events:none}
.expandable-body{ margin-left:3em; line-height:1.8; margin-bottom:1.25em; position:relative; }

.expandable-body > div{ position:relative; margin-bottom:1em;}
.expandable-body > div > div{ position:absolute; left:-2.5em; top:0; width:2em; height:2em;  background-repeat: no-repeat; background-size:contain; background-position: center;  }

/* Bus Icons */
.expandable-body > div:nth-child(1) > div{ background-image:url(/img/bus-icon-green.svg); }
.expandable-body > div:nth-child(2) > div{ background-image:url(/img/bus-icon-orange.svg); }
.expandable-body > div:nth-child(3) > div{ background-image:url(/img/bus-icon-brown.svg); }
/* Bus Icons */

.expandable-head > div:nth-child(1){ position:absolute; width:2.5em; height:60%; left:0; top:25%; background-size:50% auto; background-position:center; background-repeat:no-repeat; }

.expandable-head.bus > div:nth-child(1){ background-size:80% auto; }

.expandable-head > div:nth-child(2){ position:absolute; width:0.5em; height:1.2em; right:5px; top:25%; background-size:contain; background-position:center right; background-repeat:no-repeat; transform-origin:center; display:none }

.expandable-head.active > div:nth-child(2){ transform:rotate(90deg); transition:transform 200ms linear }


.inner-container.location .column-img-container { position:relative; }
.location-ele-container { width:100%; margin-bottom:10em;} 
.location-ele-img { width:100%; padding-bottom:67%; margin-bottom:1.25em; background-size:cover; background-position:center; position:relative;}
.location-ele-img .column-img-container-inner{  padding-bottom:0%!important; height:100%; position:absolute; top:0; left:0;}

.inner-container.location .txt-section-head { margin-bottom:1em }

.location-landscape-container{ position:relative; width:100%;}
.location-landscape-container > div:nth-child(1) { width:40%!important; float:left; margin-right:5%;  position:relative;}
.location-landscape-container > div:nth-child(2) { width:55%; float:right; position:relative; margin-bottom:15em }

.column-txt-container-inner{ position:relative; width:100%; margin:auto; }

.inner-container.location .txt-section-body{ position:absolute; width:100%; opacity:0; transform:translateY(3em); pointer-events:none} 


.inner-container.location .txt-section-body.show{ opacity:1;  transform:translateY(0em); transition:opacity 300ms linear, transform 400ms ease-out; pointer-events:all!important  }
.inner-container.location .column-txt-container-inner  { margin-bottom: 4em } 

.location-block { width:4%; height:4%; position:absolute; cursor:pointer;}
.location-block-container > div:nth-child(2) { top:5%; left:85% }
.location-block-container > div:nth-child(3) { top:10%; left:88% }
.location-block-container > div:nth-child(4) { top:12%; left:63% }
.location-block-container > div:nth-child(5) { top:31%; left:33% }
.location-block-container > div:nth-child(6) { top:30%; left:48% }
.location-block-container > div:nth-child(7) { top:26%; left:57%; width:9%; height:7%; }
.location-block-container > div:nth-child(1) { top:37%; left:72%; }
.location-block-container > div:nth-child(8) { top:41%; left:59%; }
.location-block-container > div:nth-child(9) { top:46%; left:62%; }
.location-block-container > div:nth-child(10) { top:90%; left:11%; }
.location-block-container > div:nth-child(11) { top:89%; left:72%; height:6%;}

.location-info-svg {  background-size:100%; background-position:center center; background-repeat:no-repeat; background-origin:left bottom; opacity:0; width:120px; padding-bottom:100px; transform-origin:top right; transform:translate(-90%,0%) scale(0.5); pointer-events:none }

.location-block.hover .location-info-svg { opacity:1; transform:translate(-90%,0%) scale(1); transition:transform 300ms ease-in-out; pointer-events:auto;  }

.location-block.hover{ z-index: 1;}

.location-block.active .location-info-svg{ opacity:1;}

.location-block-container > div:nth-child(4) .location-info-svg { transform-origin:bottom right; transform:translate(-90%,-70%) scale(0.5);}
.location-block-container > div:nth-child(4).hover .location-info-svg, .location-block-container > div:nth-child(4).active .location-info-svg  { transform:translate(-85%,-70%); }

.location-block-container > div:nth-child(5) .location-info-svg { transform:translate(-90%,10%) scale(0.5);  width:140px; }
.location-block-container > div:nth-child(5).hover .location-info-svg, .location-block-container > div:nth-child(5).active .location-info-svg  { transform:translate(-90%,10%); }

.location-block-container > div:nth-child(6) .location-info-svg { transform:translate(-90%,-50%) scale(0.5);}
.location-block-container > div:nth-child(6).hover .location-info-svg, .location-block-container > div:nth-child(6).active .location-info-svg  { transform:translate(-90%,-70%); }

.location-block-container > div:nth-child(7) .location-info-svg { transform:translate(-80%,-50%) scale(0.5); }
.location-block-container > div:nth-child(7).hover .location-info-svg, .location-block-container > div:nth-child(7).active .location-info-svg  { transform:translate(-80%,-70%); }

.location-block-container > div:nth-child(1) .location-info-svg { transform:translate(22%,20%) scale(0.5); width:70px; padding-bottom:70px; transform-origin:top left }
.location-block-container > div:nth-child(1).hover .location-info-svg, .location-block-container > div:nth-child(1).active .location-info-svg  { transform:translate(22%,20%); }

.location-block-container > div:nth-child(8) .location-info-svg { transform:translate(17%,-65%) scale(0.5); width:90px; padding-bottom:90px; transform-origin:bottom left }
.location-block-container > div:nth-child(8).hover .location-info-svg, .location-block-container > div:nth-child(8).active .location-info-svg  { transform:translate(17%,-65%); }

.location-block-container > div:nth-child(9) .location-info-svg { transform:translate(8%,-10%) scale(0.5);  transform-origin:top left }
.location-block-container > div:nth-child(9).hover .location-info-svg, .location-block-container > div:nth-child(9).active .location-info-svg  { transform:translate(8%,-10%); }

.location-block-container > div:nth-child(10) .location-info-svg { transform:translate(8%,-70%) scale(0.5);  transform-origin:bottom left; width:140px; padding-bottom:70px;}
.location-block-container > div:nth-child(10).hover .location-info-svg, .location-block-container > div:nth-child(10).active .location-info-svg  { transform:translate(8%,-70%); }

.location-block-container > div:nth-child(11) .location-info-svg { transform:translate(-90%,-70%) scale(0.5);  transform-origin:bottom right; width:100px; padding-bottom:70px; }
.location-block-container > div:nth-child(11).hover .location-info-svg, .location-block-container > div:nth-child(11).active .location-info-svg { transform:translate(-90%,-70%); }











@media only screen and (min-width:0px) and (max-width:1023px) {

	.expandable-body > div > div{ left:-3em;  }
	.expandable-body > div { left:3em;  }
	.expandable-body > div { width:calc(100% - 3em);  }
	.logo-container, .footer-logo-container{  width:12em; }
	
	.menu-icon-container > div{  height:2px;  }
	.menu-icon-container > div:nth-child(2), .menu-icon-container > div:nth-child(3){ top:calc(50% - 1px) }
	
	/*
	.header-container, .header-space{ height:4.5em; }
	.landing-container{ height:calc(100% - 4.5em);  }  
	.landing-container{ top:4.5em; }
	*/
	.landing-container{ height:calc(100vh - 9em); }
	
	.section-inner-container.half{ width:calc(100% - 0em); margin-top:1em }
	.section-inner-container.auto.right{ margin-left:0%; }
	
	.landing-container .shadow-container:nth-last-child(3){   background:radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));}
	
	.section-container.about-place{ height:auto; padding-bottom:0em; } 
	.about-place-bg-container{ position:relative; height:120vw; }
	.section-inner-container{ position:relative; bottom:auto; } 
	.deco-container{ height:50vw; }
	.section-container .shadow-container:nth-child(2){ height:5em; top:calc(120vw - 5em); background:linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
	
	.section-container.about-place .shadow-container:nth-child(3){ background:radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8)); }
	.section-container.about-place .section-inner-container.half{ margin-top:0em }
	
	.landing-banner-txt-container .deco-container{ width:6em; height:4em; background-size:15em auto}
	.section-container.landing-banner .inner-container:nth-child(odd) .deco-container{  background-position:left top; }
	.section-container.landing-banner .inner-container:nth-child(even) .deco-container{ background-position:left top; transform:scale(-1,1)    }
	
	.columns-container{ display:block; margin-bottom:6em }

	.column-txt-container > .fadeintext > div:nth-child(1){ margin-top:1.3em; }
	.column-txt-container > .fadeintext > .txt-section-head{ margin-top:1em!important; }
	.columns-container .column-txt-container{ width:100%; margin-right:0%; }
	.columns-container .column-img-container{ width:100%; }
 
	.columns-container:nth-child(even) .column-txt-container{ width:100%; margin-left:0%; margin-right:0; }
	.columns-container:nth-child(even) .column-img-container{ width:100%; }
	
	.columns-container.half .column-txt-container{ width:100%;   margin-left:0em; margin-right:0em  }
	.columns-container.half .column-img-container{  width:100%;  margin-left:0em; }
	.columns-container.half:nth-child(even) .column-txt-container{ width:100%;  margin-left:0em; margin-right:0; }
	.columns-container.half:nth-child(even) .column-img-container{ width:100%;  margin-right:0em; margin-left:0; }
	
	.route-map > div:nth-child(3){ width:calc(100% - 0em)!important;   }
	.route-map > div:nth-child(2){ width:100%!important; margin-bottom:2em } 
	.route-map a{ margin-right:1em }
	
	/*location*/
	.inner-container.location .column-txt-container {  margin-bottom:3em  } 
	
	.location-landscape-container > div:nth-child(1) { position:fixed!important; width:100vw!important; left:0; top:5em; height:100%; background:#000; z-index:2; display:none; overflow:scroll;}
	
	.location-landscape-container > div.active:nth-child(1){ display:block; }
	
	.column-txt-container-inner{ width:90%;  }
	.column-txt-container-inner > div{ width:100%!important; top:4em; }
	
	.location-landscape-container > div:nth-child(2) { width:100%; }
	
	.lightbox-icon-container{ width:2em!important; height:2em!important; top:1em; left:5%; right:auto; position:absolute;  }
	/*location*/
	
	
	.timeline-checkpoints-container{ width:100%; position:relative; margin:auto; }
	.section-container.general > div:nth-child(2) .column-img-container { margin-bottom:1.5em }
	.expandable-body{ margin-left:0em; }

}

@media only screen and (min-width:0px) and (max-width:639px) {
	
	.grid-container{ padding-bottom:100%; }	
	.grid-container > div:nth-child(1){ top:0; left:0; width:50%; height:25%;  }
	.grid-container > div:nth-child(2){ top:25%; left:0; width:25%; height:12.5%;  }
	.grid-container > div:nth-child(3){ top:37.5%; left:0; width:25%; height:12.5%;  }
	.grid-container > div:nth-child(4){ top:25%; left:25%; width:25%; height:25%;  }
	.grid-container > div:nth-child(5){ top:50%; left:0%; width:62.5%; height:25%;  }

	.grid-container > div:nth-child(6){ top:0%; left:50%; width:25%; height:12.5%;  }
	.grid-container > div:nth-child(7){ top:0%; left:75%; width:25%; height:12.5%;  }
	.grid-container > div:nth-child(8){ top:12.5%; left:50%; width:50%; height:37.5%;  }
	.grid-container > div:nth-child(9){ top:50%; left:62.5%; width:37.5%; height:25%;  }

	.grid-container > div:nth-child(10){ top:75%; left:37.5%; width:37.5%; height:25%;   }
	.grid-container > div:nth-child(11){ top:75%; left:0%; width:18.75%; height:25%;  }
	.grid-container > div:nth-child(12){ top:75%; left:18.75%; width:18.75%; height:25%; }
	.grid-container > div:nth-child(13){ top:75%; left:75%; width:25%; height:25%;   }
	
	
	.thumb-container{  width:100%;  }
	.thumb-container:nth-child(3n+2){ margin-left:0em; margin-right:0em }
	.thumb-container:nth-child(3n+1){ clear:none;  }
	
	.timeline-imgs-container{ width:35%; margin-right:4%;  }
	.timeline-img-container:nth-child(even){ float:right; } 
	.timeline-checkpoints-container{  width:100%;   }
	.timeline-checkpoint-container{ width:100%; margin-bottom:5em; }
	

	.timeline-checkpoints-container > div:nth-child(odd) { transform:translateX(0%); }
	.timeline-checkpoints-container > div:nth-child(even) { text-align:left  }
	.timeline-checkpoints-container > div:nth-child(even) .timeline-year-container{  margin-right:0;margin-left:1.5em}
	.timeline-checkpoints-container > div:nth-child(even) .timeline-checkpoint-cnt-container{ padding-left:1.5em; padding-right:0;  }
	.timeline-checkpoints-container > div:nth-child(even) .timeline-checkpoint-cnt-line{ left:-1px; right:0; }
	.timeline-checkpoints-line-container{ height:calc(100% - 2em - 1.5em); top:0; left:0; transform:translateX(0%);  }
	
	/*mia-0325*/
	
	.columns-container{ display:block; margin-bottom:6em }

	.column-txt-container > .fadeintext > div:nth-child(1){ margin-top:1.3em; }
	.column-txt-container > .fadeintext > .txt-section-head{ margin-top:1em!important; }
	.columns-container .column-txt-container{ width:100%; margin-right:0%; }
	.columns-container .column-img-container{ width:100%; }
 
	.columns-container:nth-child(even) .column-txt-container{ width:100%; margin-left:0%; margin-right:0; }
	.columns-container:nth-child(even) .column-img-container{ width:100%; }
	
	.columns-container.half .column-txt-container{ width:100%;   margin-left:0em; margin-right:0em  }
	.columns-container.half .column-img-container{  width:100%;  margin-left:0em; }
	.columns-container.half:nth-child(even) .column-txt-container{ width:100%;  margin-left:0em; margin-right:0; }
	.columns-container.half:nth-child(even) .column-img-container{ width:100%;  margin-right:0em; margin-left:0; }
	
	/*mia-0325*/
}



@media only screen and (min-width:0px) and (max-width:479px) {
	html,body{ font-size:12px; }
	
	.txt-giant{ font-size:2.5em; }
	.txt-huge{ font-size:1.8em; }
	.txt-menu{ font-size:1.5em; }
	.txt-large{ font-size:1.3em; }
	.txt-small{ font-size:0.9em; }
	
	.banner-title-container.txt-huge{ font-size:1.4em; }
	.nav-container.txt-large{ font-size:1.5em;}
	
	.footer-info-container{ display:block; margin-bottom:3em; }
	.footer-info-col{ width:75%; margin-right:0%; margin-bottom:3em }
	.footer-info-col:last-child{ margin-right:0; margin-left:0%;   }
 
	.footer-sns-container{  justify-content:flex-start; } 
	.footer-sns-container a{  margin-right:1em; margin-left:0 }
	.footer-cr-container{ text-align:left}
	
	.location-block.hover .location-info-svg { display:none }
}

@media only screen and (min-width:0px) and (max-width:400px) {
	.section-container.about-place .txt-big { font-size:1.15em }
	.section-container.about-place .txt-wide { letter-spacing:0 }
	
	
}


@media only screen and (min-width:0px) and (max-width:359px) {
	.txt-giant{ font-size:2em; }
	.txt-huge{ font-size:1.5em; }
	.txt-menu{ font-size:1.2em; }
	.txt-large{ font-size:1.2em; }
	.banner-title-container.txt-huge{ font-size:1.2em; }
	.section-container.about-place .txt-big { font-size:1.15em }
}

@media only screen and (min-width:0px) and (max-width:320px) {
	.section-container.about-place .txt-big { font-size:1.1em }
}


@media only screen and (min-width:480px) and (max-width:639px) {
	html,body{ font-size:12px; }
	
	.txt-huge{ font-size:2em; }
	.txt-menu{ font-size:1.66em; }
	.txt-large{ font-size:1.5em; }
	
	.nav-container.txt-large{ font-size:2em;}
	
	.nav-container.txt-huge{ font-size:1.75em;}
	
	.footer-info-container{ margin-bottom:3em; position:relative; }
	.footer-info-col{ width:45%; margin-right:10%; margin-bottom:3em }
	.footer-info-col:nth-child(2){ margin-right:0%; }
	.footer-info-col:last-child{ position:absolute; top:100%; margin-left:0 }
 
	.footer-sns-container{  justify-content:flex-start; } 
	.footer-sns-container a{  margin-right:1em; margin-left:0 }

	.footer-cr-container{ text-align:left}
}

@media only screen and (min-width:640px)  and (max-width:1023px) {
	html,body{ font-size:13px; }
	 
	.txt-huge{ font-size:2.2em; }
	.txt-menu{ font-size:1.75em; }
	.txt-large{ font-size:1.6em; }
	
	.footer-info-col{ width:40%; margin-right:5%; margin-bottom:3em } 
	.footer-info-col:last-child{ width:10% }
   
/* 	.thumb-container{  width:calc(50% - 1em);   }
	.thumb-container:nth-child(3n+2){ margin-left:0em; margin-right:0em }
	.thumb-container:nth-child(3n+1){ clear:none;  }
	.thumb-container:nth-child(odd){ clear:both;  }
	.thumb-container:nth-child(even){ margin-left:2em;  }
	*/
	.timeline-imgs-container{ width:45%; margin-right:4%;  }
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{ font-size:14px; }
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{ font-size:15px; }
}

#home-intro br{ display:none; }
#home-intro{ font-size:1.33em; }
@media only screen and (min-width:375px) and (max-width:639px) {
	#home-intro{ font-size:1.2em; }
}
@media only screen and (min-width:0px) and (max-width:374px) {
	#home-intro{ font-size:1.1em; }
}