@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
@font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Helvetica.eot');
    src: url('../fonts/Helvetica.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Helvetica.woff2') format('woff2'),
        url('../fonts/Helvetica.woff') format('woff'),
        url('../fonts/Helvetica.ttf') format('truetype'),
        url('../fonts/Helvetica.svg#Helvetica') format('svg');
 }
@font-face {
    font-family: 'Writterine Demo';
    src: url('../fonts/WritterineDemo-Regular.eot');
    src: url('../fonts/WritterineDemo-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WritterineDemo-Regular.woff2') format('woff2'),
        url('../fonts/WritterineDemo-Regular.woff') format('woff'),
        url('../fonts/WritterineDemo-Regular.ttf') format('truetype'),
        url('../fonts/WritterineDemo-Regular.svg#WritterineDemo-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amaline Trial';
    src: url('../fonts/AmalineTrial-Regular.eot');
    src: url('../fonts/AmalineTrial-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AmalineTrial-Regular.woff2') format('woff2'),
        url('../fonts/AmalineTrial-Regular.woff') format('woff'),
        url('../fonts/AmalineTrial-Regular.ttf') format('truetype'),
        url('../fonts/AmalineTrial-Regular.svg#AmalineTrial-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Local Brewery';
    src: url('../fonts/LocalBreweryEight-Regular.eot');
    src: url('../fonts/LocalBreweryEight-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LocalBreweryEight-Regular.woff2') format('woff2'),
        url('../fonts/LocalBreweryEight-Regular.woff') format('woff'),
        url('../fonts/LocalBreweryEight-Regular.ttf') format('truetype'),
        url('../fonts/LocalBreweryEight-Regular.svg#LocalBreweryEight-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter-Regular.woff') format('woff'),
        url('../fonts/Inter-Regular.ttf') format('truetype'),
        url('../fonts/Inter-Regular.svg#Inter-Regular') format('svg');
    font-weight:600;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.woff2') format('woff2'),
        url('../fonts/Inter-Light.woff') format('woff'),
        url('../fonts/Inter-Light.ttf') format('truetype'),
        url('../fonts/Inter-Light.svg#Inter-Light') format('svg');
    font-weight:300;
}

html,body{  
	font-size:17px;
	font-weight:400;
	font-family:'Helvetica','Noto Sans TC','Arial', sans-serif;
	
	color:#fff; 
	background:#fff;
	
 	width:100%; height:100%; margin:0;
	
	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{  -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1,h2,h3,h4{ font-family:inherit; font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0 0 1em 0; line-height:1.5 }
p:first-child{ margin-bottom:1em; }
p:last-child{ margin-bottom:0; }
.lightbox-body .scrollbar-inner-inner p{ font-size:1em!important; }



div:nth-child(2) > p:first-child{ margin-top:1em; }

input{ background-color:transparent; border:none; color:#000; }
input:focus, textarea:focus{ outline:none; color:#000;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:transparent; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#000; -webkit-text-fill-color:#000!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;  }
.static-page-container li{ margin-bottom:1em; list-style-position:outside; margin-left:1em!important  }
.static-page-container li:last-child{ margin-bottom:0em;   }

button{ padding:0; margin:0; border:none; background-color:transparent; font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; line-height:1; cursor:pointer; }

.clear{ clear:both; }
 
/* text style */
.txt-simchiese{ font-family:'Helvetica','Noto Sans SC','Arial', sans-serif; }
.txt-zh{ font-size:.9em; transform:translateY(-9%)}
.txt-white{ color:#fff; }
.txt-black{ color:#000; }
.txt-grey{ color:#777} 
.txt-dark{ color:#4d4d4d}
.txt-opacity-thirty{ color:rgba(255,255,255,0.30)}
.txt-blue{ color: #1c223a}

.txt-giant{ font-size:5.5rem; }
.txt-big { font-size:1.5rem; line-height: 1.2 }

.txt-subhead{ font-size:2rem;  }
.txt-large  { font-size:1.75rem;}
.txt-middle  { font-size:1.33rem;}
.txt-normal { font-size:1rem;  }
.txt-tiny  { font-size:0.66rem;}
.txt-tnc{ font-size:0.7em;text-align: justify}
.txt-tnc.ch{ font-size:0.7em;text-align: justify;line-height: 1.5}



.txt-wide{ letter-spacing:0.05em;}
.txt-bold   { font-weight:600;}

.txt-shadow{ /*text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px  1px 0 #fff, 1px  1px 0 #fff;*/ }
.txt-title{font-size:12rem; font-family: 'Amaline Trial'; -webkit-text-stroke:2px white; color: transparent;letter-spacing:-0.07em ;transform: scaleY(1.35);}
.txt-title s{font-size: 75%;vertical-align:top;padding: 0 .15em;text-decoration: none}

.txt-writterine{font-family: 'Writterine Demo'!important;}
.txt-brewery{ font-family:'Local Brewery'!important; }
.txt-inter{  font-family: 'Inter';}

.txt-outline{  -webkit-text-stroke-width:1px;  -webkit-text-stroke-color:black;}
.clip-txt{ clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); -webkit-clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 0%); }
/* text style */



/* General */
.bg-default{ background-repeat:no-repeat; background-size:cover; background-position:center; }

.site-container{position:relative; width:100%; height:100%; overflow:hidden; min-height:900px }
.page-bg-container{ position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; opacity:0; }
.page-bg-container.home{ background-image:url(../img/bg.jpg); background-position:50% 20%}
.page-bg-container.innerpage{ background-image:url(../img/bg.jpg); opacity:1; /*clip-path:circle(100%);*/ }

.page-bg-container-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } 
.page-bg-container-inner > div{ position:absolute; opacity:0}

.page-title-container{ opacity:1; width:100%;}
.page-page-container-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.page-title-container .txt-outline{  position:absolute; top:50%; left:50%; width:100%; text-align:center; transform:translate(-50%,-50%); color:transparent; }
.page-title-container .txt-title{  -webkit-text-stroke:1px black;  }


svg{ position:absolute; top:0; left:0; width:100%; text-align:left;}
#canvas, #canvas-b{ position:absolute; width:100%; height:100%; transform:translate(-50%,-50%); top:50%; left:50%; }

.canvas-container.active{ display:block }
.canvas-container{ display:none; transform:translate(-50%,-50%); opacity:0; top:50%; left:50%; position:absolute; width:65%; pointer-events:none; }
.canvas-container-inner{ position:absolute; top:0; left:0; width:100%; padding-bottom:100%; transform:translate(0%,-50%); transform-origin:center }

.canvas-new-container{ position:absolute; width:100%; height:100%; top:0; left:0; pointer-events:none; opacity:1;   }
.canvas-new-container .canvas-container-inner{  width:100%; height:100%; padding-bottom:0%; transform:translate(-25%,-25%) scale(0.5); top:0%; left:0%; border:0px solid red }
.canvas-new-container .canvas-container-inner canvas{   } 

.page-bg-container, .page-bg-container div{ /*display:none;*/ }
.canvas-container.active{ display:none!important }
 

.site-container.init .page-bg-container.innerpage{ transition:clip-path 1.3s .5s, opacity .1s 1.7s linear; /*clip-path:circle(28%);*/ opacity:0;/*keathaha*/}
.site-container.init .canvas-container{ transition:transform .9s 1.4s, opacity .1s 1.4s linear; opacity:1; }
.site-container.init .page-title-container .page-svg-title{ opacity:0; transition:opacity 1s 1.2s linear; }
.site-container.init .page-title-container .page-cnt-container{ opacity:1; transition:opacity 1s 2.2s linear; }

.page-cnt-container{ opacity:0; z-index:1}
.cnt-container{ position:absolute; width:360px; height:calc(5.4em + 1em + 1px + 1.75em); top:100%; }
.cnt-container > div:nth-child(1){ display:inline-block; border-bottom:1px solid #000; line-height:1; margin-bottom:.5em }
.cnt-container .txt-brewery{ display:inline-block; }

.ss-generic-button{ line-height:1; background:#fff; border-radius:2em; padding:.4em 1em .3em 1em; margin:.25em .5em .25em .5em; color:#000; font-family:'Local Brewery'; }
.ss-generic-button.hover{ color:#fff; background:#000 }
.ss-generic-button.active{ pointer-events:none; }
.landing-container .ss-generic-button{ position:absolute; left:-50%; top:75%; opacity:0; transform:translate(-50%,-50%); }

.ss-generic-button.enter{ background-color:rgba(0,0,0,0); height:2.48em; width:7em; background-image:url("../img/enter.svg"); background-repeat:no-repeat; background-position:center center; background-size:contain; margin:auto; }
.ss-generic-button.enter.hover{ background-image:url("../img/enter-hover.svg"); }

.ss-generic-button.enter.coming-soon{  background-image:url("../img/comingsoon.svg"); width:12em; pointer-events:none!important; cursor:auto!important}
.ss-generic-button.enter.coming-soon.hover{ background-image:url("../img/comingsoon-hover.svg"); }

.ss-generic-button.enter.tc{  background-image:url("../img/enter-tc.svg"); }
.ss-generic-button.enter.tc.hover{ background-image:url("../img/enter-hover-tc.svg"); }

.ss-generic-button.enter.sc{  background-image:url("../img/enter-sc.svg"); }
.ss-generic-button.enter.sc.hover{ background-image:url("../img/enter-hover-sc.svg"); }

.ss-generic-button.enter.coming-soon.ch{  background-image:url("../img/comingsoon-ch.svg"); width:7em; }
.ss-generic-button.enter.coming-soon.ch.hover{ background-image:url("../img/comingsoon-hover-ch.svg"); }

.site-container.init .landing-container .ss-generic-button{ opacity:1; left:50%; transition:opacity .5s 2s linear, left 0s 2s/*keat*/}

.menu-container .ss-generic-button{ background-color:rgba(255,255,255,0.8);  }
.menu-container .ss-generic-button.hover{ background-color:rgba(71, 165, 235, 1);  }
.menu-container .ss-generic-button.active{ color:rgba(71, 165, 235, 1); text-decoration:underline; }
/* General */


/*header*/
/*
.site-container.init .header-container{opacity:1;transition:opacity .2s 4.5s linear }
.site-container.init.non-home .header-container{ transition-delay:1s; }
*/

.header-container{ position:absolute; z-index:4; width: 100%; top: 0; height:5.5em; opacity:0; pointer-events:none;  }
.header-container-inner { position: relative; width: 100%; height: inherit; }

.lang-media-container{ position: relative;   margin: auto; padding-top:2em; float:right; width:calc(100% - 3em - 18em ); margin-right:3em;  }
.lang-media-container-inner{ display: flex; width: auto; align-items: center; gap:1.1em; justify-content:flex-end; height:3em; }

.lang-container, .media-container{ position: relative; display: flex; justify-content: center; align-items:center    }

.lang-container > div:nth-child(2){ width:1px; height:1.1em; background-color: #FFF; margin:auto .75em; }

.sound-icon, .instagram{ width: 1.25em; height: 1.25em; background-repeat: no-repeat; background-size: contain; margin:0 .5em; }
.sound-icon{ background-image:url("../img/sound-icon-white.svg"); }
.instagram{ background-image:url("../img/instagram-logo-white.svg"); }

.sound-icon.active{ background-image:url("../img/sound-icon-off-white.svg");}


.lang-media-container.mobile-ele .lang-container > div {background-color: #000;}

.lang-media-container.mobile-ele .sound-icon{ background-image:url("../img/sound-icon-black.svg"); }
.lang-media-container.mobile-ele .instagram{ background-image:url("../img/instagram-logo-black.svg"); }

.lang-media-container.mobile-ele .sound-icon.active{  background-image:url("../img/sound-icon-off-black.svg");}

.disclaimer-container .lang-media-container{ float:left;  margin-right:0 }


.lang-chinese{ font-size:1.2em; transform:translateY(-.05em)}
.lang-chinese.eng{ transform:translateY(.1em)}

.logo-container{ position: relative; width:16.8%; max-width:12em;  margin:1.5em 0em 0 1.5em; float:left; }
.logo-container .img-container{ width:100%; padding-bottom:50.7%;  background-repeat: no-repeat; background-size: contain; background-position:left top;  background-image: url("../img/logo.svg");  }

.img-container{ position:absolute; height:100%; top:0; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) }

.non-home .logo-container{ float:left; margin:1.5em 0 0 1.5em;  }
.non-home .menu-btn{ display:block; }
 



.menu-btn{ position:relative; width:1.8em; height:1.2em; margin:2em 2em 0 0;float:right; display:none }
.menu-btn > div{ position:absolute; width:100%; height:2px; left:0; background:#000; transition:transform 100ms, background 200ms 0ms }
.menu-btn > div:nth-child(1){ top:0; transform-origin:center}
.menu-btn > div:nth-child(2){ top:calc(50% - 1px); transform-origin:right center; transition-duration:200ms }
.menu-btn > div:nth-child(3){ bottom:0; transform-origin:center}

.menu-btn.active > div:nth-child(1){ top:50%; transform:rotate(-45deg); }
.menu-btn.active > div:nth-child(2){ opacity:0 }
.menu-btn.active > div:nth-child(3){ top:50%; transform:rotate(45deg);}
/*header*/


/* Menu */
.menu-container.active{ transform:translateX(0%); opacity:1; transition:transform .5s, opacity 0s .1s;   } 
.menu-container .menu-bg-blur-container{ display:none }

.menu-container, .menu-container > div, .menu-bg-white-container{ border-radius:1em; border-bottom-right-radius:0; border-top-right-radius:0; overflow:hidden; }

.menu-container{ position:absolute; height:100%; width:400px; top:0; right:0; overflow:hidden; transform:translateX(99%); opacity:0; transition:transform .5s, opacity .1s .4s; display:flex; z-index:3;  }
.menu-bg-container{ position:absolute; height:100%; width:100%; top:0; right:0; background:rgba(255,255,255,0); backdrop-filter:blur(.3em) saturate(150%); -webkit-backdrop-filter:blur(.3em) saturate(150%); }
.menu-bg-container > div{ position:absolute; height:100%; width:100%; top:0; right:0; }
.menu-bg-blur-container{ filter:blur(.3em); transform:scale(1.01); right:0; width:100vw!important; opacity:0.8;   }
.menu-bg-white-container{ background:linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); overflow:hidden; mix-blend-mode:hard-light}
.menu-bg-noise-container{ background-image:url("../img/menu-noise.png"); background-size:400px auto; background-position:center; opacity:0.1; mix-blend-mode:overlay; }
.menu-bg-hex-container{ background-image:url("../img/hex-pattern.svg"); background-size:9em auto; background-position:center; opacity:.7; filter:blur(.5em)}
.menu-bg-pattern-container{ /*-webkit-clip-path:url(#svgPathMenu); clip-path:url(#svgPathMenu);*/ background-position:center; background-size:cover;  background-image:url(../img/overlay-pattern-revert-menu.png);  }


/*
.menu-bg-container.another{ background-color:transparent; mix-blend-mode:multiply; opacity:1; backdrop-filter:saturate(100%); -webkit-backdrop-filter:saturate(100%); display:none }
*/
.menu-bg-container.another{ background-color:transparent; opacity:1; backdrop-filter:saturate(100%); -webkit-backdrop-filter:saturate(100%); background-blend-mode:multiply;  
}
.menu-bg-container.safari{ mix-blend-mode:multiply; background-blend-mode:normal; }

.menu-bg-container.plain{ background-color:transparent; opacity:0;}

.menu-container .menu-btn{ display:none!important; }
.menu-container-inner{ position:absolute; width:calc(100% - 0em); left:0em; height:calc(100% - 4.5em); top:4.5em; border-top-left-radius:0!important; border-top-right-radius:0!important    }

.menu-header{ text-align:center; width:calc(100% - 0em); margin-left:0em; background:linear-gradient(180deg, rgba(83,163,218,.9) 12%, rgba(255,255,255,.7) 65%, rgba(255,255,255,.8) 85%, rgba(255,255,255,0) 100%); padding:2.5em 0 2em 0;  }
.menu-header > div:nth-child(1){ height:1.45em; width:100%; background-size:contain; background-image:url("../img/menu-threesixty.svg") }
.menu-header-sep{ margin:1em 1em .75em 1em; width:calc(100% - 2em); height:1px; background:#fff}
.menu-header-btns-container{ display:flex; flex-wrap:wrap; justify-content:center  }


.menu-body{ margin:0em auto; width:calc(100% - 4.5em); text-align:right; max-height:calc(100% - 6em - 8.5em); overflow:auto; }
.menu-body .txt-big{ margin-bottom:.75em; font-family:'Local Brewery'; }
.menu-body .txt-big:last-child{ margin-bottom:5em}
.menu-body .txt-big a.hover, .menu-body .txt-big.active a  { color:#47a5eb; }
.menu-body .txt-big.active { color:#47a5eb; text-decoration:underline;   }

.menu-footer{ position:absolute; bottom:4.5em; right:2.25em; margin:0; padding:0; float:none; height:auto; width:calc(100% - 4.5em);  }
.menu-footer .lang-media-container-inner{ justify-content:flex-end;  }
.menu-footer .lang-container > div:nth-child(2){ background-color: #1c223a;  }

.menu-footer .sound-icon{ background-image:url("../img/sound-icon-blue.svg"); }
.menu-footer .sound-icon.active{ background-image:url("../img/sound-icon-off-blue.svg");}
.menu-footer .instagram{ background-image:url("../img/instagram-logo-blue.svg"); }
/* Menu */


/*landing*/
.landing-container{ position:absolute; top:0; left:0; width:100%; height:100%;  }

.tagline-container{  position:absolute; left:calc(50% - 25em); top:22%; transform:translateY(-50%); line-height:1;   }
.tagline-container > div{  opacity:0; transition:opacity .6s linear; }
.tagline-container > div:nth-child(1){ transition-delay:500ms}
.tagline-container > div:nth-child(2){ margin-left:22em; margin-top:-2.5em; transition-delay:1000ms}

.tagline-container img{ width:auto; height:8em; line-height:1;}


.landing-logo-container{  position:absolute; left:50%; top:20%; transform:translate(-50%, -50%);  width:26%; opacity:0}
.landing-logo-container > div{ background-position: center; background-repeat:no-repeat; background-size:contain; background-image: url("../img/1A/logo.svg"); width:100%; padding-bottom:50.7%; }

.site-container.init .page-bg-container{ opacity:1; transition:opacity 400ms linear; z-index:1  }
.site-container.pre-init .page-bg-container{ opacity:1; transition:opacity 0ms linear  }

.site-container.init .tagline-container > div{ opacity:1;  }
.site-container.init .tagline-container{ opacity:0; transition:opacity 1s 3.5s linear  }
.site-container.init .landing-logo-container{ opacity:1; transition:opacity 1s 4s linear  }

.site-container.init .page-bg-container-inner > div{ opacity:1; transition:opacity .5s 0s linear}

.camping-container{ width:13%; top:68%; left:64%}
.bee-container{ width:3%; top:64%; left:76%;animation:ani-bee 2s linear infinite alternate;}
.hiking-container{  width:14%; top:7%; left:80% }
.butterfly-container{ width:4%; top:37%; left:17% ;animation:ani-butterfly-y 4s alternate infinite ease-in-out;    }
.butterfly-container > div{ animation:ani-butterfly-x 8s -2s alternate infinite ease-in-out;   }
.butterfly-container > div > img{ position:relative;  animation:ani-butterfly 4s alternate infinite  ; transform-origin: center center; }

.blue-plant-container{ width:38%; bottom:0%; left:-5%; transform:translateY(1%)}
.pink-plant-container{ width:30%; top:auto; bottom:0;  left:70%; transform:translateY(2%)}
.bird-container{ width:6%; top:72.5%; left:89%}
.doll-container{  width:7%; top:48%; left:11%}
.paragliding-container{ width:12%; top:40%; left:30%; animation:ani-paragliding 12s linear infinite alternate;  transform-origin: 25% 0%}


@keyframes ani-butterfly-y {
     from { transform: translateY(-2em); }
  to   { transform: translateY(2em); }
}
@keyframes ani-butterfly-x {
    from { transform: translateX(-4em); }
  to   { transform: translateX(4em); }
}

@keyframes ani-paragliding {
    0%    {transform:rotate(0deg) translate(0%,0%)}
	25%    {transform:translate(2%,4%)}
	50%   {transform:rotate(10deg) translate(0%,0%)}
	75%    {transform:translate(2%,4%)}
    100%  {transform:rotate(0deg) translate(0%,0%)}
}

@keyframes ani-butterfly {
    0% {transform: rotate3d(1.25, 1, 0, 0deg) }
	80% {transform: rotate3d(1.25, 1, 0, 0deg) }
	90% {transform: rotate3d(1, 1.25, 0, 80deg) }
	100% {transform: rotate3d(1.25, 1, 0, 0deg) }
}

@keyframes ani-bee {
    0%   { transform:translateY(0%);}
    50%  { transform:translatey(8%);}
    100% { transform:translatey(0%);}
}

@keyframes ani-bee-m {
    0%   { transform:translateY(0%);}
    50%  { transform:translatey(8%);}
    100% { transform:translatey(0%);}
}


.site-container.init.active .page-bg-container-inner{ opacity:0; transition:opacity .5s 0s linear}
.site-container.init.active .landing-container{ opacity:0; transition:opacity .5s 0s linear!important; pointer-events:none}

.site-container.init.active .home-nav-container{ pointer-events:all; opacity:1;  transition:opacity .5s 1s linear }
.site-container.init.active .header-container{ pointer-events:all; opacity:1; transition:opacity .5s .5s linear }
.site-container.init.non-home .header-container{ pointer-events:all; opacity:1; transition-delay:1s; transition-duration:.5s!important  }
/*landing*/



/* Home Nav */
.home-nav-container{ position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; opacity:0; pointer-events:none; /*transform:translate(50vw,0%);*/  }
.home-nav-container-inner{ width:2500%; position:absolute; height:auto; top:40%; left:0%; transform:translate(-0%,-50%); display:flex; justify-content:flex-start; align-content:flex-start; align-items:flex-start; transition:transform 1s }

.home-nav-container.autorun .home-nav-container-inner{ transition:transform 0s }
.home-nav-container.sliderun .home-nav-container-inner{ transition:transform .5s }

.home-nav-ele{ position:relative; /*width:2.8%; margin-left:0.325%;*/ width:0.496%; margin-left:0.086%; }
.home-nav-ele:nth-child(1){ margin-left:0}
/*
.home-nav-ele:nth-child(1), .home-nav-ele:nth-child(2), .home-nav-ele:nth-child(3), .home-nav-ele:nth-child(14), .home-nav-ele:nth-child(15), .home-nav-ele:nth-child(16){ display:none}
*/

.home-nav-ele-inner{ position:relative; width:100%; padding-bottom:151%;  perspective: 1000px;  }

.home-nav-label{ position:absolute; top:calc(100% + 1em); left:50%; transform:translate(-50%,0); white-space:nowrap; text-align:center}

.home-nav-ele-mask{ position:absolute; width:100%; height:100%; perspective:1000px; transform:translate(-50%,-50%); top:50%; left:50%; transition:clip-path 0.8s, transform 0.8s;  cursor:pointer; }
.flip-card-inner { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:width 1s, height 1s;/*keat*/  width: 100%; height: 100%; transform-style: preserve-3d;   }
.flip-card-front, .flip-card-back { position:absolute;  width:100%;  height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-clip-path:url(#svgPath); clip-path: url(#svgPath);  } 
.flip-card-back { transform: rotateY(180deg); }
.flip-card-front-inner{ width:100vw; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-40%); transition:transform .4s cubic-bezier(0,.6,.44,1)}

.flip-card-front .flip-card-front-inner{width:100%; transform:translate(-50%,-50%); }

.home-nav-ele.active{ z-index:1; }
.home-nav-ele.active .home-nav-ele-mask{ clip-path: circle(500%);  transition:transform 0.8s 2s, clip-path .8s 2s cubic-bezier(.99,.0,1,1);  }
.home-nav-ele.active .flip-card-inner { /*keat*/transform:translate(-50%,-50%) rotateY(180deg); transition:transform 0.8s 1.1s, width 1s .1s, height 1s .1s;/*keat*/ }
.home-nav-ele.active .flip-card-front, .home-nav-ele.active .flip-card-back{ /*-webkit-clip-path:none; clip-path:none;*/ }
.flip-card-back .page-svg-title{ opacity:0; }


.flip-card-front:hover .flip-card-front-inner{  transform:translate(-50%,-50%) scale(1.1);  transition:transform .3s cubic-bezier(0,.6,.44,1)}
.home-nav-ele.blue .home-nav-ele-inner{ background:blue;}

.page-title{position: absolute;transform:translate(-50%,-50%); top:50%; left:50%;text-align:center; }

.page-svg-title, .page-cnt-container{position: absolute;transform:translate(-50%,-50%); top:50%; left:50%; background-repeat:no-repeat; background-size:contain; background-position:center; width:90%; height:45%; }
.page-svg-title.single-line, .page-cnt-container.single-line{ height:19.65%; }
/* 0114 */
.page-svg-title.three-lines, .page-cnt-container.three-lines{ height:67%; }
/* 0114 */


/*
.page-svg-title{ background-color:red; }
.canvas-container-inner{ opacity:1; border:1px solid blue; }
/* Home Nav */


/*footer*/
.footer-container{position:absolute; width: 100%; padding:1.5em 0; bottom:0; }
.footer-container-inner{ width: 95%; margin:0 auto; display:flex; align-items:center;  }

.footer-notes.txt-head.information{ text-decoration: underline; /*max-width:19em;*/ text-align:left;  line-height:1.5; width: 90%; }
.footer-container-inner .footer-notes{ width:calc(100% - 9.5rem)}
.disclaimer-button-container{ width:calc(9.5rem - 1.5em); display:flex; align-items: center;  gap:.5em; margin-left:1.5em; }
.disclaimer-chevron{ width: 0.5em; height: 0.5em; border-right: 1px solid white; border-bottom: 1px solid white; transform: translateY(-0.125em) rotate(45deg);  }
.disclaimer-button-label{ font-weight: 600;  }
.txt-dark .disclaimer-chevron{ border-color:#4d4d4d }

.section-page.footer-container{ opacity:1 }
.section-page.footer-container.init{ opacity:1; transition:opacity .5s 1.25s linear }
/*footer*/


/* Tour */
.site-container.tour.init .page-bg-container.innerpage{  clip-path:circle(100%); opacity:1;   }
.site-container .tour-container{ opacity:1; pointer-events:all; transform:translateY(0%);  transition:transform 400ms, opacity .4s 0s }

.tour-container{ opacity:1; pointer-events:none; position:absolute; width:100%; height:calc(100% - 7em); top:0; left:0; overflow:auto; display:flex; align-items:center; padding:3.5em 0; transform:translateY(99%);    }
.tour-container-inner{ position:relative; width:90%; /* 0224 */max-width:1900px;/* 0224 */ ; margin:auto;  border-radius:3em; background:rgba(255,255,255,.1); overflow:hidden; /*border:1px solid #fff;*/   /*height:calc(100% - 0px); max-height:1650px;/*keat*/ height:calc(100%); display:flex}
.tour-container .menu-bg-pattern-container{ background-image:url(../img/overlay-pattern-revert.png); opacity:0.5; }
.tour-txt-container{ position: relative; margin:auto; width:90%;/* 0224 */max-width:1600px;/* 0224 */ ; padding:4em 0 ; }

.tour-container .overlay-txt-container{ /*mix-blend-mode:color*/} 
.tour-container .lightbox-title img{ height:11rem; width:auto;  }
.tour-container .lightbox-title{ margin-bottom:1.6em }

.with-slider .tour-container-inner{ padding-bottom:0em;  }

/*
.tour-container .menu-bg-container{  background:rgba(255,255,255,0.2);   }
.tour-container .menu-bg-noise-container{ opacity:0.2; mix-blend-mode:overlay; }
.info-dis .menu-bg-noise-container{ opacity:0.2; mix-blend-mode:overlay; }
.info-dis .menu-bg-container, .info-showflat .menu-bg-container{ background:rgba(255,255,255,0.5);}
*/
.info-dis .menu-bg-container, .info-showflat .menu-bg-container{  background:rgba(255,255,255,0.1);  }

.tour-container .lightbox-body{ display:flex; justify-content:space-between; flex-direction:row-reverse; align-items:flex-end; width:100%; position:relative/*keat*/}

 


/*keat*/
.lightbox-body-container{ position:relative; width:100%; display:flex; align-items:center; height:auto;  }
.lightbox-body a{ text-decoration:underline}
/*keat*/

.tour-col:nth-child(1){ width:calc(50% - 0em);  }
.tour-col:nth-child(2){ width:calc(50% - 5em); position:relative}

.tour-col  iframe{ width:100%; height:100%}

.tour-col:nth-child(2){  padding:0em 0; }
.tour-col > .txt-big{ border-bottom:1px solid #fff; display:inline-block; line-height:1; margin-bottom:1em}
.tour-col-list{ padding-bottom:1em; overflow:hidden }
.tour-col-list button{ margin-top:1em; text-align:left}
.tour-col-list button:nth-child(1){ margin-top:0em; }


.lightbox-body.so .tour-col:nth-child(2){ border-top:1px solid #fff; border-bottom:1px solid #fff; padding:1em 0 0 0 }
.lightbox-body.so .tour-col-list{ height:7em;  }

.info-showflat img{ cursor:pointer; }

.info-dis .lightbox-body{text-align:center }
#tourlink .ss-generic-button{ margin-top:1em; opacity:0; pointer-events:none;  }
#tourlink .ss-generic-button.active{ opacity:1; pointer-events:all; transition:opacity 0s 1s linear;   }

.with-slider .overlay-txt-container{  height:calc(100% - 7em);  width:86%; display:flex; align-items:center}
.tour-slider{ width:100%; height:calc(100% - 7.5em - 6em);  }
.tour-slider-inner{  width:100%; height:100%; overflow:hidden;  }
.tour-slider-inner-inner{  width:500%; height:100%; display:flex; justify-content:flex-start; transition:transform 500ms;  }

.tour-thumbnail{ width:9.7%; margin-left:0.6%; }
.tour-thumbnail:nth-child(1){  margin-left:0%; }
.tour-thumbnail-img{ background:#333; width:100%; padding-bottom:56.5%; margin-bottom:1em; position:relative; background-size:cover; background-position:center}
.tour-thumbnail-title{ text-align:center}
.tour-thumbnail-img > button{ position:absolute; top:calc(50% - 2em); left:calc(50% - 2em); background-image:url(../img/play.svg); background-repeat:no-repeat; background-size:auto 100%; background-position:left center; width:4em; height:4em;  }
.tour-thumbnail-img > button.hover{ background-position:right center;  }
.slider-arrow{ position:absolute; background-image:url(../img/arrow.svg); background-repeat:no-repeat; background-size:contain; background-position:center; width:1.5em; height:2em; top:calc(50% - 1em); /*keat*/ transform:translate(-50%,0%); }
.slider-arrow:nth-last-child(1){ transform:translate(100%, -50%); right:-2em; }
.slider-arrow:nth-last-child(2){ transform:translate(-100%, -50%) rotate(180deg); left:-2em; }

.slider-arrow.disabled{ pointer-events:none; opacity:0.5; }

.so.slider-arrow{ left:50%;}
.so.slider-arrow:nth-last-child(1){ transform:translate(-50%, 0%) rotate(90deg); right:auto; top:calc(100% + .5em); }
.so.slider-arrow:nth-last-child(2){ transform:translate(-50%, -100%) rotate(-90deg); top:-.5em; }
.scrollbar-inner-innerxx{ transition:transform 500ms }


.site-container.tour .menu-footer .lang-container > div:nth-child(2){ background-color: #fff; }

.site-container.tour .menu-footer .sound-icon{ background-image:url("../img/sound-icon-white.svg"); }
.site-container.tour .menu-footer .sound-icon.active{ background-image:url("../img/sound-icon-off-white.svg");}
.site-container.tour .menu-footer .instagram{ background-image:url("../img/instagram-logo-white.svg"); }
/* Tour */





/* Overlayer */
.lightbox-copyright{ text-decoration:underline}

.overlay-container.active{ opacity:1; pointer-events:all; transform:translateY(0%); transition:transform 500ms, opacity .2s 0s;z-index: 2}
.overlay-container{ position:fixed; width:100%; height:calc(100% - 4em); top:0; left:0; overflow:auto; display:flex; align-items:center; padding:2em 0; opacity:0; transform:translateY(99%); pointer-events:none; transition:transform 500ms, opacity .2s .4s}
.overlay-container-inner{ position:relative; width:85%;  /* 0224 */max-width:1600px;/* 0224 */ ; margin:auto;  border-radius:3em; background:rgba(255,255,255,.2); /*border:1px solid #fff;*/ overflow:hidden}
.overlay-container .menu-bg-pattern-container{ background-image:url(../img/overlay-pattern-revert.png) }


.overlay-txt-container{ position: relative; margin:auto; width:90%;  /* 0224 */max-width:1600px;/* 0224 */ ;/*keat*/ padding:4em 0 3em 0; }
.overlay-txt-container-inner{ width: 100%; position:relative; }

.cross-button-container{ position:absolute; width:2.5em; height: 2.5em; top:2.75em; right:-1em; display: flex; justify-content: center; align-items: center; cursor:pointer; }
.cross-button-container > div { position: absolute; width: 2em; height: 2px; background-color: #000; margin: auto; }
.cross-button-container > div:nth-child(1){ transform: rotate(-45deg); }
.cross-button-container > div:nth-child(2){ transform: rotate(45deg); }

.lightbox-title{ line-height:1.2; text-align:center; margin-bottom:1em}
.overlay-container .scrollbar-inner{  height:45vh; min-height:3em }

.overlay-container.info-showflat .overlay-txt-container{ width:90%;  /* 0224 */max-width:1600px;/* 0224 */ }
.overlay-container.info-showflat  .scrollbar-inner{  height:66vh; min-height:3em }
.overlay-container.info-showflat  .cross-button-container{  top:1em;}

.tour-container .scrollbar-inner{  height:100%; min-height:3em }

/* Overlayer */


/*disclaimer*/
.disclaimer-container{ position:relative; width:100%; height:auto; background:#345E8C; }
.disclaimer-container-inner{ width: 95%; padding:2em 0; margin: auto; }

.mobile-ele{ display: none;}

.disclaimer-logo-container{ position: relative; width: 13.5em; height: 3em; margin-bottom: 2em; }
.disclaimer-logo-container.desktop-ele, .disclaimer-logo-container.mobile-ele{ float:left; }
.disclaimer-logo-container .img-container{ width: 100%; background-repeat: no-repeat; background-size: contain; background-image: url("../img/sun-hung-kai-logo.png"); }

.disclaimer-logo-container.mobile-ele .img-container{ background-image: url("../img/sun-hung-kai-logo-black.png"); }

.disclaimer-txt-box{ position: relative; width: 100%; margin-bottom: 2em; text-align:justify; }
.disclaimer-txt-box > div{ margin-bottom:1em}
.disclaimer-container-inner > div:last-child{ font-size:0.7em; color:#fff; }

.disclaimer-container .lang-media-container{ float:left; width:calc(100% - 3em - 14em ); padding:0; margin-left:3em; }
.disclaimer-container .lang-media-container-inner{ justify-content:flex-start; height:3em; }
.disclaimer-container .lang-chinese{ font-size:1.2em}
.disclaimer-container .sound-icon, .disclaimer-container .instagram{ width: 1.25em; height: 1.25em; margin: 0 .9em; }

.disclaimer-container .lang-media-container:nth-last-child(4){ display:none  }
/*disclaimer*/



/* scroll plane */
.scrollbar-inner{ width:100%; text-align:left;  /*max-height:35em;*/ overflow:auto; 
	-ms-overflow-style: none;
    -webkit-overflow-style: none;
    scrollbar-width: none; }
.scrollbar-inner::-webkit-scrollbar {
    display: none;
  }
.scrollbar-inner > .scrollbar-inner-inner{ padding-right:1.5em;  }

.side-body-container .scrollbar-inner{  /*height:5.4em;*/ height:5.4em;  }


.side-body-container{ position:absolute; width:100%; overflow:auto;}
.doc-ele{ margin-top:.8em; display:flex; justify-content:space-between;   }
.doc-ele:nth-child(1){ margin-top:0.1em; }
.doc-ele > a > div:nth-child(1){ width:1em; height:1.2em; position:relative; white-space:nowrap;}
.doc-ele > a > div:nth-child(1)::after{ content:'';  position:absolute; left:0; width:1em; height:100%; top:0; background-repeat:no-repeat; background-position:left center; background-size:contain; background-image:url("../img/dl.svg");  }

.doc-ele.hover a div:nth-child(1)::after{ background-image:url("../img/dl-hover.svg");  }

.doc-ele > a {margin-left:0.3em}


.page-deco-container, .page-floating-container{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;  }
.page-deco-container > .bg-default, .page-deco-container > div > .bg-default{ position:absolute; opacity:0; }
.page-floating-container > div{ position:absolute; opacity:0;  }
.page-floating-container > div > div{ background-size:contain; }

.init .page-deco-container > .bg-default, .init .page-deco-container > div > .bg-default, .init .page-floating-container > div{  opacity:1; transition:opacity .6s 2.5s linear }
.init .page-deco-container > .bg-default:nth-child(1){ transition-delay:1.9s  }
.init .page-deco-container > .bg-default:nth-child(2){ transition-delay:2.1s  }
.init .page-deco-container > .bg-default:nth-child(3){ transition-delay:2.3s  }
/* scroll plane */




@media only screen and (min-width:768px) { 
	.mobile-plant-container{display:none}
}

@media only screen and (min-width:0px)  and (max-width:767px) { 
	.header-container{ height:4em; }
	
	/* 0224 */
	.header-container.noaction{ pointer-events:none!important }
	/* 0224 */
	
	/* 0114 */
	/*
	.header-container, .menu-container{  position:fixed}
	*/
	.menu-container{  position:fixed}
	/* 0114 */
	
	.lightbox-title.txt-subhead{ font-size:1.75em; }
	
	.overlay-container-inner{ width:calc(100% - 4em)}
	.overlay-txt-container{  padding:3em 0 2em 0; width:85%; }
	
	
	.tour-container .overlay-txt-container{  overflow:auto; align-items:center!important}
	
	
	
	.overlay-container .overlay-txt-container{ padding-top:4em}
	.overlay-container.info-showflat .scrollbar-inner{ max-height:100vw;  }
	.overlay-container .scrollbar-inner{   padding-right:.5em;  }
	.overlay-container .scrollbar-inner-inner{ font-size:0.9em!important; padding-right:0.5em;}
	.cross-button-container{ width:2em; height:2em; top:1.25em; right:-1.2em; }
	.lightbox-title br{ display:none}
	
	.site-container{ min-height:170vw }
	.home-nav-ele{ width:2.1%; margin-left:0.3%; }
	.home-nav-container-inner{ top:45%; } 
	.flip-card-front-inner{ transform:translate(-50%,-45%); }
	
	
	.logo-container{ float:left; width:25%; height:6em; margin:0.75em 0 0 1.5em;  }
	.lang-media-container{display:none}
	
	.landing-container .ss-generic-button{  left:-50%; top:77%;   }
	
	.non-home .logo-container{  margin:0.75em 0 0 1.5em; }
	.logo-container .img-container{ background-position:left center; padding-bottom:0;  }
	
	.menu-btn{  margin:1.9em 2em 0 0; display:block}
	.menu-btn.active{ display:none}
	
	.menu-container, .menu-container > div, .menu-bg-white-container{ border-radius:1em; border-bottom-right-radius:1em; border-top-right-radius:1em; }
	.menu-container{ height:calc(100% - 3.5em); width:calc(100% - 5em); top:2em; right:2.5em; z-index:2; transform:translateX(95vw);  }
	.menu-container-inner{ height:calc(100% - 3em); top:3em; }
	.menu-container .menu-btn{ margin:0; position:absolute; top:0.9em; right:1em; display:block!important;  }
	
	.menu-header{ padding:1.5em 0 1.5em 0;   }
	.menu-header > div:nth-child(1){ background-image:url("../img/menu-threesixty-blue.svg") }
	.menu-header-sep{ background:#1c223a; margin:.8em auto .6em auto}
	.menu-header-btns-container{ margin:auto}

	.menu-header-sep, .menu-header-btns-container, .menu-body{ max-width:360px; }
	
	.menu-body{ text-align:center; max-height:calc(100% - 6em - 9.5em);  }
	.menu-body .txt-big{ margin-bottom:.4em; font-size:1.75em }
	.menu-body .txt-big:last-child{ margin-bottom:0em}
	
	.menu-footer{ bottom:0em; } 
	
	.overlay-container .menu-bg-pattern-container{  background-image:url(../img/overlay-pattern-revert-m.png) }
	.overlay-container.info-showflat  .cross-button-container{  right:0em;}
	
	/* 0120 */
	.menu-header{ padding:2.25em 0 1.75em 0;   }
	.menu-header-btns-container{ max-width:16em }
	
	.menu-container .menu-bg-container{  background:rgba(255,255,255,0.2);  } 
	.menu-container .menu-bg-blur-container{ filter:blur(.3em); transform:scale(1.01);   opacity:0.8;   }
	.menu-container .menu-bg-white-container{ background:linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 100%); }
	.menu-container .menu-bg-noise-container{  opacity:0.2;  }
	.menu-container .menu-bg-hex-container{ opacity:.8;  }
	/* 0120 */
}


/* 0120 */
@media only screen and (min-width:0px)  and (max-width:767px) and (min-height:130vw)  { 
	.menu-body{  max-height:calc(200% - 0em - 0em); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
}
/* 0120 */

.menu-bg-pattern-container.safari{  background-image:url(../img/overlay-pattern-revert-m.png) }
.overlay-container .menu-bg-pattern-container.safari, .tour-container .menu-bg-pattern-container.safari{ background-image:url(../img/overlay-pattern-revert-o.png) }

@media only screen and (min-width:0px)  and (max-width:767px) { 
	.overlay-container .menu-bg-pattern-container.safari{  background-image:url(../img/overlay-pattern-revert-m.png) }
}
@media only screen and (max-width:1023px) { /*portrait (orientation: portrait) and */
	.tour-container .menu-bg-pattern-container.safari{ background-image:url("../img/tour/pattern.png") }
}


@media only screen and (min-width:0px)  and (max-width:1023px) { 
	
	
	
	
	.tagline-container{ left:calc(50% - 16em); top:22%; transform:translateY(-50%); line-height:1;   }
	.tagline-container img{height: 6em}
	.tagline-container > div:nth-child(2){ margin-left:10em;margin-top: 0em;}
	
	.landing-logo-container{ width:55%; max-width:360px;   }
	
	/*disclaimer*/
    .footer-container, .desktop-ele{ display: none; }
    .mobile-ele{ display: block; }
    
	.disclaimer-container{ background-repeat:no-repeat; background-size:cover; background-position:center;  }
	
	
    .disclaimer-container-inner{ width: 90%;}
    .footer-notes{ margin-bottom:2em;  }
	.footer-notes.txt-head.information{ text-decoration: underline; /*max-width:19em;*/ text-align:left;  line-height:1.5; width: 90%; }
	
	.disclaimer-logo-container.mobile-ele{ margin:0 0 2.5em 0}
	.phase-disclaimer{  color:#000; font-weight:600 }
	.phase-disclaimer.ch{  color:#000; font-weight:400}
	.phase-disclaimer > span.newline{ display:block}
	
	
	.hypid-disclaimer{ display:block; margin-top:2em; font-size:1rem; color:#ababab;  }
	.disclaimer-container-inner > div:last-child{ font-size:1em; color:#000; margin-top:1em }
	
	
	.disclaimer-container .lang-media-container:nth-last-child(4){ display:block  }
	.disclaimer-container .lang-media-container:nth-child(2){ display:none  }
	.disclaimer-container .lang-media-container-inner{height:auto; margin-bottom:1em }
	.disclaimer-container .lang-media-container{ float:right; width:auto;   margin-top:0.5em; }

	
	.mobile-ele{ display: block; }
	
	
	
	
	
    /*disclaimer*/
	
	
	
}

@media only screen and (min-width:0px) and (max-width:479px) {
	.tagline-container{ left:calc(50% - 14em);  }
	.tagline-container img{height: 6em}
	.tagline-container > div:nth-child(2){ margin-left:6em;margin-top: 0em;}
	
	
	
}


@media only screen and (min-width:0px) and (max-width:374px) {
	html,body{  font-size:11px; }
	.txt-title{font-size:3rem; }
}

@media only screen and (min-width:375px) and (max-width:479px) {
	html,body{  font-size:11px; }
	.txt-title{font-size:3.5rem; }
	
}

@media only screen and (min-width:480px) and (max-width:639px) {
	html,body{  font-size:14px; }
	.txt-title{font-size:4rem; }
}

@media only screen and (min-width:640px) and (max-width:767px) {
	html,body{  font-size:14px; }
	.txt-title{font-size:5rem; }
}

@media only screen and (min-width:768px) and (max-width:1023px) { 
	html,body{  font-size:15px; }
	.txt-title{font-size:7rem; }
	
	.site-container{ min-height:90vw }
	.home-nav-ele{ width:.88%; margin-left:0.16%; } 
	.canvas-container{ width:100%;  } 
	.site-container.init .page-bg-container.innerpage{ transition:clip-path .8s .5s, opacity .1s 1.2s linear;  }
	.site-container.init .canvas-container{ transition:transform .9s 1.2s, opacity .1s 1.2s linear;  }
	.site-container.init .page-title-container .page-svg-title{ transition-delay:0.8s; }
	 
	
	.overlay-container.info-showflat .lightbox-body{ margin-top:2em }
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:15px; }
	.txt-title{font-size:8.5rem; }
	
	.site-container{ min-height:700px }
	.home-nav-ele{ width:0.68%; margin-left:0.14%; }
	
	.tour-container .lightbox-title img{ height:auto; width:100%;   }
	
	.footer-container .txt-tnc{ font-size:0.5em;line-height: 0.95}
	.footer-container .txt-tnc.ch{ font-size:0.5em;line-height: 1.5}
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:16px; }
	.txt-title{font-size:10rem; }
	
	.site-container{ min-height:750px } 
	
	.tour-container .lightbox-title img{ height:9rem;  }
	.footer-container .txt-tnc{ font-size:0.55em;line-height: 0.95}
	.footer-container .txt-tnc.ch{ font-size:0.55em;line-height: 1.5}
} 

/* 0224 */
@media only screen and (min-width:1280px) and (max-width:2099px) { 
	.tour-container .lightbox-title img{ height:11vw!important;   }
	.footer-container .txt-tnc{ line-height: 0.95}
	.footer-container .txt-tnc.ch{ line-height: 1.5}
}
/* 0224 */

@media only screen and (max-width:1023px) {/*portrait (orientation: portrait) and */
	.page-svg-title{ top:calc(5em + 33%); }
	/* Tour */ 
	
	.tour-container .lightbox-title img{ height:2em; max-height:15vw;  width:auto; margin-top:1em }
	.tour-container .menu-bg-pattern-container{ background-image:url("../img/tour/pattern.png") }
	
	.tour-container .lightbox-body{ display:block;  }
	.tour-col{ width:100%!important;padding-top:2em } 
	.tour-col:nth-child(2){ margin-top:3em;}
	
	
	.tour-container .lightbox-body > div:nth-child(1){ margin-bottom:1.5em} 
	
	/*keat*/
	.lightbox-body-container{ height:auto; }
	/*keat*/
	
	.tour-container-inner{  min-height:calc(100% - 5em) ; } 
	
	.overlay-txt-container{  padding:2em 0 2em 0; width:90%; }
	.tour-container .overlay-txt-container{  max-height:calc(100vh - 6em)!important; height:calc(100% - 7em); overflow:auto; align-items:flex-start;  }
	.tour-slider{  margin-top:3em!important;  position:relative!important }
	.tour-slider-inner{  width:82%; margin:auto; height:100%; position:relative}
	.tour-slider-inner-inner{  width:100%; height:auto; display:block;  }

	.tour-thumbnail-img{ margin-bottom:.6em;  }
	.tour-thumbnail{ width:100%; margin-left:0%; margin-bottom:2em;}

	.slider-arrow{ width:1.5em; height:2em; top:-1em; left:50%!important  }
	.slider-arrow:nth-last-child(1){ transform:translate(-50%, 0%) rotate(90deg); top:calc(100% + 0em) }
	.slider-arrow:nth-last-child(2){ transform:translate(-50%, -100%) rotate(-90deg);  }

	/* Tour */
}
@media only screen and (max-width:767px) {/*portrait (orientation: portrait) and */
	.page-bg-container.home{ background-image:url(../img/bg-m.jpg);  background-size:112% auto!important} 
	/* 0120 */
	.page-bg-container.home.bg-default{  background-size:cover!important; } 
	/* 0120 */
	.page-bg-container.innerpage{ background-image:url(../img/bg-m.jpg);  }
	
	
	.init .page-deco-container > .bg-default:nth-child(1){ transition-delay:1.2s  }
	.init .page-deco-container > .bg-default:nth-child(2){ transition-delay:1.4s  }
	.init .page-deco-container > .bg-default:nth-child(3){ transition-delay:1.6s  }
	
	
	.canvas-container{ transform:translate(-50%,0%); top:5em; position:absolute; width:140%; }
	.canvas-container-inner{ transform:translate(0%,-14.1%); }
	.site-container.init .page-bg-container.innerpage{ transition:clip-path .7s .5s, opacity .1s 1.1s linear; /*clip-path:circle(45vw at 50% calc(5em + 43.2vw + 6.48vw));*/  }
	.site-container.init .canvas-container{ transition:transform .9s 1s, opacity .1s 1s linear; opacity:1; } 
	
	 
	.page-svg-title{ top:calc(5em + 43.2vw + 6.48vw); width:90% }
	.page-title-container .page-title{ width:auto; top:auto; top:calc(60vw + 5em);  }
	
	.page-cnt-container{  width:100%; height:calc(100.8vw); top:6em; transform:translate(-50%,0); }
	.page-cnt-container.single-line{ height:calc(100.8vw); }
	/* 0114 */
	.page-cnt-container.three-lines{ height:calc(100.8vw); }
	/* 0114 */
	.cnt-container{ position:relative; width:calc(90%); margin:auto}
	
	.camping-container{ width:30%; top:58%; left:53%}
    .bee-container{ width:6%; top:56%; left:79%;animation-name:ani-bee-m}
    .hiking-container{ display:none }
    .butterfly-container{display:none}
    .blue-plant-container{ display:none}
    .pink-plant-container{ display:none}
    .bird-container{ display:none }
    .doll-container{ display:none}
    .paragliding-container{ width:26%; top:36%; left:17%}
	
	.mobile-plant-container{width:95%; bottom:9%; left:-2%; }
}


/*
@media only screen and (max-width:767px) { 
	.tour-container .lightbox-title{ position:absolute; top:1em;   left:50%; transform:translateX(-50%)}
	.tour-container .lightbox-body{ margin-top:6em}
	.tour-slider{ margin-top:6em!important}
}
*/
/* keat */
.special-z{ z-index:1}
/* 0120 */
/*
.menu-container.tour .menu-body .txt-big a{ color:#fff }
.menu-container.tour .menu-body .txt-big a.hover, .menu-container.tour .menu-body .txt-big.active a  { color:#47a5eb; }
.menu-container.tour .menu-body .txt-big.active { color:#47a5eb; text-decoration:underline;   }
*/
/* 0120 */
.flip-card-inner.selected{ width:150vw; height:150vw;}


.page-bg-container.innerpage {   position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-image:none!important; clip-path:none!important;}
.site-container.init .page-bg-container.innerpage{ clip-path:none;  }

.page-bg-container.innerpage > div{  width:110vw; height:166vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:width 1s, height 1s;  transform-style: preserve-3d; }
.site-container.init .page-bg-container.innerpage > div{ width:30vw; height:45vw; transition:width .8s .5s, height .8s .5s, opacity .1s 1.1s linear; overflow:hidden; ; opacity:0 }

.page-bg-container.innerpage > div > div{ position:absolute;  width:100%;  height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-clip-path:url(#svgPath); clip-path: url(#svgPath);   }

.page-bg-container.innerpage > div > div > .bg-default{ width:100vw; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .4s cubic-bezier(0,.6,.44,1);  }

.site-container.init .canvas-container{ transition:transform .9s 1.1s, opacity 0s 1.1s linear; opacity:1; } 

@media only screen and (max-width:767px){/*portrait (orientation: portrait) and */

	
	
	.flip-card-inner.selected{ width:100vh; height:100vh;}
	
	.flip-card-inner.selected.afterall .flip-card-front, .flip-card-inner.selected.afterall .flip-card-back{ clip-path:none; }

	
	/*
	.page-bg-container.innerpage > div{  width:200vw; height:302vw; top:calc(50% - 0vw);  }
	.site-container.init .page-bg-container.innerpage > div{ width:66vw; height:99.6vw;  }
	.page-bg-container.innerpage > div > div > .bg-default{  }
	*/ 
	
	
	
	/* 0114 */
	.site-container.init .page-bg-container.innerpage{  opacity:1; }
	/*.site-container.init .page-bg-container.innerpage > div{  opacity:0; transition:opacity .1s 1.2s linear;  }*/
	 
	.page-bg-container.innerpage > div{  width:165vw; height:249vw; top:50%; transform:translate(-50%,-50%);   }
	.site-container.init .page-bg-container.innerpage > div{ width:67vw; height:100vw; top:calc(50% - 50% + 5em + 50vw);  overflow:visible; transition:width .8s .5s, height .8s .5s, top .8s .5s, opacity .1s 1.1s linear; } 
	 
	/*
	.page-bg-container.innerpage > div > div{ -webkit-backface-visibility:visible; backface-visibility:visible; transform:translate(0%, 0%)}
	.site-container.init .page-bg-container.innerpage > div > div{ transform:translate(0%, 0%); transition:transform .8s .5s}
	/* 
	.page-bg-container.innerpage > div > div > .bg-default{ top:40%;  }
	/*
	.site-container.init .page-bg-container.innerpage > div > div{ transform:translate(0%, 0%); transition:transform .8s .5s}
	.site-container.init .page-bg-container.innerpage > div > div > .bg-default{ top:50%; transition:top .8s .5s}
	/*
	.page-bg-container.innerpage > div{ width:100%; height:100%;}
	.site-container.init .page-bg-container.innerpage > div{ width:100%; height:100%; }
	
	.page-bg-container.innerpage > div > div{ clip-path:ellipse(70% 100%); transition:clip-path .8s .5s; }
	.site-container.init .page-bg-container.innerpage > div > div{ clip-path:ellipse(32vw 45vw at 50% calc(5em + 43.2vw + 6.48vw));  }
	*/
	/* 0114 */


	
.home-nav-ele:nth-last-child(1){ width:1px; display:none }
.home-nav-ele:nth-last-child(2){ width:1px; display:none}
.home-nav-ele:nth-last-child(3){ width:1px; display:none}
.home-nav-ele:nth-last-child(4){ width:1px; display:none}
.home-nav-ele:nth-last-child(5){ width:1px; display:none}
.home-nav-ele:nth-last-child(6){ width:1px; display:none}
.home-nav-ele:nth-last-child(7){ width:1px; display:none}
.home-nav-ele:nth-last-child(8){ width:1px; display:none}
.home-nav-ele:nth-last-child(9){ width:1px; display:none} 
	
	
.home-nav-ele:nth-last-child(1) .flip-card-front, .home-nav-ele:nth-last-child(1) .flip-card-back, .home-nav-ele:nth-last-child(2) .flip-card-front, .home-nav-ele:nth-last-child(2) .flip-card-back, .home-nav-ele:nth-last-child(3) .flip-card-front, .home-nav-ele:nth-last-child(3) .flip-card-back, .home-nav-ele:nth-last-child(4) .flip-card-front, .home-nav-ele:nth-last-child(4) .flip-card-back, .home-nav-ele:nth-last-child(5) .flip-card-front, .home-nav-ele:nth-last-child(5) .flip-card-back, .home-nav-ele:nth-last-child(6) .flip-card-front, .home-nav-ele:nth-last-child(6) .flip-card-back, .home-nav-ele:nth-last-child(7) .flip-card-front, .home-nav-ele:nth-last-child(7) .flip-card-back, .home-nav-ele:nth-last-child(8) .flip-card-front, .home-nav-ele:nth-last-child(8) .flip-card-back, .home-nav-ele:nth-last-child(9) .flip-card-front, .home-nav-ele:nth-last-child(9) .flip-card-back{ -webkit-clip-path:none; clip-path:none; -webkit-backface-visibility:visible; backface-visibility:visible; } 	
		 	 
.outerscreen .flip-card-front, .outerscreen .flip-card-back{ -webkit-clip-path:none; clip-path:none; -webkit-backface-visibility:visible; backface-visibility:visible; }	
	
	
.home-nav-ele:nth-last-child(1) .bg-default, .home-nav-ele:nth-last-child(2) .bg-default, .home-nav-ele:nth-last-child(3) .bg-default, .home-nav-ele:nth-last-child(4) .bg-default, .home-nav-ele:nth-last-child(5) .bg-default, .home-nav-ele:nth-last-child(6) .bg-default, .home-nav-ele:nth-last-child(7) .bg-default, .home-nav-ele:nth-last-child(8) .bg-default, .home-nav-ele:nth-last-child(9) .bg-default, .outerscreen .bg-default{ background-image:none!important; }
	
}

@media only screen and (max-width:413px){
	.lightbox-title.txt-subhead.eng {max-width:15em; margin-left:auto; margin-right:auto; } 
}


/* 0114 */
.page-bg-container.innerpage > div > div > .bg-default, .flip-card-back .bg-default{ background-size:auto 100vh; }

/* 0120 */
@media only screen  and (orientation: landscape) and (min-aspect-ratio: 178/100) {
	.page-bg-container.innerpage > div > div > .bg-default, .flip-card-back .bg-default{ background-size:100vw auto; }
}
/* 0120 */

@media only screen and (orientation: portrait) and (min-width:1024px){/**/
.page-bg-container.innerpage > div > div > .bg-default, .flip-card-back .bg-default{ background-size: auto 100vh; }
}
@media only screen and (max-width:1023px){
	.page-bg-container.innerpage > div > div > .bg-default, .flip-card-back .bg-default{ background-size:auto 100vh}
}
/* 0114 */
.iframe-container.active{ display:block; }
.iframe-container{ position:absolute; width:100%; height:100%; top:0; left:0; display:none }
iframe{ height:100%; width:100%; border:0; background:transparent}


/*.menu-header{ background:transparent; }*/
.menu-header .bg-default, .menu-header .menu-header-sep{ opacity:0 }
.menu-header-btns-container{ display:none; pointer-events:none }


/* entrance */
.site-container.entrance .landing-keylogos-container{ width:100%;   background-image:url("../img/logo.svg"); height:10em; background-position: center; background-repeat:no-repeat; background-size:contain; position:absolute; top:15%; left:0; opacity:0; }

.site-container.entrance.init .landing-keylogos-container{ opacity:1; transition:opacity .4s linear 4.1s }


.site-container.entrance .landing-logos-container{ position:absolute; top:calc(15% + 13em); width:90%; display:flex; justify-content:center; align-items:flex-start;  left:5%; }

.site-container.entrance .landing-logos-container .landing-logo-container{ position:relative;  left:auto; top:auto; transform:translate(0,0); width:20%; margin:0 5%; min-width:18em; }


.site-container.entrance .landing-logo-container > div{  padding-bottom:0%; text-align:center; background:none; text-shadow:0 0 1em #000 }
.site-container.entrance .landing-logo-container > div:nth-child(1){  /*padding-bottom:50.7%;*/ margin-bottom:1.5em}


.landing-logo-container > a > div{ background-position: center; background-repeat:no-repeat; background-size:contain; background-image: url("../img/1A/logo.svg"); width:100%; /*padding-bottom:50.7%; margin-bottom:1.5em*/ }
.landing-logo-container:nth-child(2) > a > div{ background-image: url("../img/1B/logo.svg"); }


.site-container.entrance .page-bg-container.home{ background-image:url(../img/1B/bg.jpg); background-position:50% 80%; }


.wave-left-container{ width:42%; bottom:0%; left:0; transform:translateY(1%)}
.wave-right-container{ width:22%; bottom:0%; right:0; transform:translateY(2%)}
.woman-container{ width:22%; top:60%; right:5%;  animation:ani-land-float 10s linear infinite; }
.paddle-container{ width:5%; top:60%; right:35%;animation:ani-land-float 8s linear infinite;}
.boat-container{ width:5%; top:62%; left:25%;animation:ani-land-float 5s linear infinite;}
.bird1-container{ width:1.5%; top:37%; left:25%;animation:ani-land-bird 20s linear infinite;}
.bird2-container{ width:1%; top:32%; left:27%;animation:ani-land-bird 15s linear infinite;}
.surfing-container{ width:18%; bottom:10%; left:13%; animation:ani-land-surf 10s linear infinite;}
.mobile-wave-container{display: none}

@keyframes ani-land-float {
    0%   { transform:translate(-2%, 0%); }
    50% { transform:translate(0%, 2%);  }
	100% { transform:translate(-2%, 0%); }
}

@keyframes ani-land-bird {
    0%   { transform:translate(0%,0%) }
	50%   { transform:translate(-80%,-80%)}
	100% { transform:translate(0%,0%) }
}

@keyframes ani-land-surf {
    0%   { transform:translateY(0%) translateX(-50%)}
    50%  { transform:translateY(2%) translateX(-50%)}
    100% { transform:translateY(0%) translateX(-50%)}
}
 

@media only screen and (max-width:1023px) {/*portrait (orientation: portrait) and */
	.site-container.entrance .page-bg-container.home{ background-image:url(../img/1B/bg-m.jpg);/* SS1B */ background-position:50% 50%/* SS1B */}
	
	.site-container.entrance .landing-keylogos-container{  background-image:url("../img/logo.svg"); height:10em; ; top:12%;  }
	
	.site-container.entrance .landing-logos-container{ top:calc(12% + 12.5em); width:92%; left:50%; transform:translateX(-50%); max-width:640px; display:block}
	.site-container.entrance .landing-logos-container .landing-logo-container{  width:100%; margin:1em auto 3em auto; min-width:0; text-align:center}
	
	.site-container.entrance .landing-logos-container .landing-logo-container:nth-child(1){  margin-left: 0;   }
	.site-container.entrance .landing-logos-container .landing-logo-container:nth-child(2){  margin-right: 0; }
	/*SS1B*/
	/*
	.camping-container{ width:30%; top:58%; left:53%}
    .bee-container{ width:6%; top:56%; left:79%;animation-name:ani-bee-m}
    .hiking-container{ display:none }
    .butterfly-container{display:none}
    .blue-plant-container{ display:none}
    .pink-plant-container{ display:none}
    .bird-container{ display:none }
    .doll-container{ display:none}
    .paragliding-container{ width:26%; top:36%; left:17%}
	
	.mobile-plant-container{width:95%; bottom:9%; left:-2%; }
	
	*/ 
	
	.wave-left-container{ display:none}
    .wave-right-container{ display:none}
    .woman-container{ width:33%; top:60%; left:50%; }
    .paddle-container{display:none}
    .boat-container{ display:none}
    .bird1-container{ width:3.5%; top:45%; left:23%;}
    .bird2-container{ width:3%; top:42%; left:28%;}
	.mobile-wave-container{ display: block; width:82%; bottom:0%; left:10%; }
    .surfing-container{ width:25%; bottom:10%; left:28%}
	/*SS1B*/
}

.phase-button-container{width: 5em;border: 1px solid;text-align:center;padding:.6em .5em .4em .5em; line-height: 1; border-color:#fff}
.phase-button-container:hover{background: #FFF;color:rgba(2,31,57,0.9)}

@media only screen and (max-width:1023px){
.phase-button-container.mobile-ele{margin-bottom: 1em}
}