@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: 'Century Gothic';
    src: url('../fonts/CenturyGothic.eot');
    src: url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CenturyGothic.woff2') format('woff2'),
        url('../fonts/CenturyGothic.woff') format('woff'),
        url('../fonts/CenturyGothic.ttf') format('truetype'),
        url('../fonts/CenturyGothic.svg#CenturyGothic') format('svg');
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff2') format('woff2'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}

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-lightgrey{ color:#E6E7E8; }

.txt-giant{ font-size:5.5rem; }
.txt-big { font-size:1.9vw; line-height: 1 }

.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;}
.txt-tnc.ch{ 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;*/ font-family:'Oswald','Noto Sans TC','Arial', sans-serif!important; }
.txt-inter{  font-family: 'Inter','Noto Sans TC','Arial', sans-serif;}
.txt-gothic{ font-family: 'Century Gothic','Noto Sans TC','Arial', sans-serif;}
.txt-oswald{ font-family: 'Oswald','Noto Sans TC','Arial', sans-serif; font-style:italic;}

.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:950px }
.page-bg-container{ position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden;   }
.page-bg-container.home{ background-image:url("../img/home-full.jpg"); z-index:2 }
.page-bg-container.innerpage{ opacity:1; /*background-image:url(../img/bg.jpg);  clip-path:circle(100%);*/ }

.page-bg-container.home, .footer-container, .header-container{ filter:blur(2px);}
.site-container.init .page-bg-container.home, .site-container.init .footer-container, .site-container.init .header-container{ filter:blur(0px);}
.landing-container{ position:absolute; background-size:cover; width:100%; height:45%; left:0; background-image:url("../img/home-lower.png"); top:55%; background-position:top center; }


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



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:50%; left:50%; transform:translate(-50%,-50%) scale(1); 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{ transition:transform 1.5s ease-out;    } 
 
.canvas-container.active{ display:none!important }
 
 
.site-container.init .canvas-container{ transition:transform .9s 1.4s, opacity .1s 1.4s linear; opacity:1; } 
  
.page-cnt-container{ opacity:1; z-index:1;  left:0!important; transform:none!important; }
.cnt-container{ position:absolute; width:320px; height:calc(5.4em + 1em + 1px + 1.75em); color:#fff!important;  filter:drop-shadow(0 0 1px #000)}
.cnt-container > div:nth-child(1){ display:inline-block; line-height:1; margin-bottom:.4em }
.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.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.sc{  background-image:url("../img/enter-sc.svg"); }

/*
.ss-generic-button.enter.hover{ background-image:url("../img/enter-hover.svg"); }
.ss-generic-button.enter.tc.hover{ background-image:url("../img/enter-hover-tc.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*/
.header-container{ position:absolute; z-index:3; width: 100%; top: 0; height:5.5em; opacity:1;    }
.header-container.active{ z-index:5;}
.header-container-inner { position: relative; width: 100%; height: inherit; }

.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"); display:none }
.sound-icon.active{ background-image:url("../img/sound-icon-off-white.svg");}

.lang-media-container{ position: relative;   margin: auto; padding-top:2em; float:left; width:calc(100% - 3em - 18em ); margin-left:3em;  }
.lang-media-container-inner{ display: flex; width: auto; align-items: center; gap:1.1em; justify-content:flex-start; height:3em; }
.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");}


.phase-button{ border:1px solid #fff; line-height:1; padding:.5em 1em; text-align:center; margin-left:.25em  }
.phase-button.hover{ background: #fff; color:#000;}

.lang-chinese{ font-size:1.2em}

.logo-container{ position: relative; width:16.8%; max-width:12em;   margin:1.5em 0 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 .menu-btn{ display:block}

.menu-btn{ position:relative; width:3em; height:3em; margin:2em 2em 0 0;float:right; display:block; border:2px solid #fff; border-radius:1000px; cursor:pointer}
.menu-btn > div{ position:absolute; width:50%; height:2px; left:25%; background:#fff; transition:transform 100ms, background 200ms 0ms }
.menu-btn > div:nth-child(1){ top:30%; 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:30%; transform-origin:center}

.menu-btn.active{ background:#000!important; border-color:rgba(0,0,0,0) }
.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);}

.non-home .menu-btn{ border-color:#000 }
.non-home .menu-btn > div{ background:#000; }
.non-home .menu-btn.active > div{ background:#fff; }
/*header*/



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

.menu-container, .menu-container > div, .menu-bg-white-container{  overflow:hidden; }

.menu-container{ position:absolute; height:100%; width:100%; top:0; right:0; overflow:hidden; transform:translateY(-100%); opacity:0; transition:transform .5s, opacity .1s .4s; display:flex;  background:rgba(60,192,237,0.8); align-items:center; z-index:3;  }
 
.menu-bg-container{ position:absolute; height:100%; width:100%; top:0; right:0;   }
.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-container .lang-media-container-inner{ position:absolute; bottom:0; right:0;}

 
.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{ overflow:auto; display:flex; align-items:center}
.menu-container .menu-btn{ display:none!important; }
.menu-container-inner{ position:absolute; width:calc(90% - 0em); left:50%; height:100%; background:rgba(0,0,0,0); transform:translate(-50%, 0em); display:flex;  align-items: center;  max-width:1600px; } 

.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; max-height:calc(100% - 4em); /*overflow:auto;*/  display:flex; justify-content:space-between; flex-wrap:wrap; align-items:stretch;    }
.menu-body .txt-big{ border:2px solid #000; background:#fff; line-height:1; border-radius:1em; display:inline-block; padding:.5em 0em;  margin:0 0em 1.8em 0em;  height:1em; position:relative; letter-spacing:.03em; text-align:center; font-size:2.25vw} 
.menu-body .txt-big:before{ content:''; position:absolute; background:#fff; top:calc(100% - 1.5px); height:2px; width:calc(.4em + 0px) ; right:calc(1em - .5px)}
.menu-body .txt-big.hover{ background:#000}

@media only screen and (min-width:1777px) { 
	.menu-body .txt-big{ font-size:40px} 
}

.menu-body .txt-big:nth-child(1){ width:20%;}
.menu-body .txt-big:nth-child(2){ width:14.3%;}
.menu-body .txt-big:nth-child(3){ width:27%;}
.menu-body .txt-big:nth-child(4){ width:24.8%;}

.menu-body .txt-big:nth-child(5){ width:31.4%;}
.menu-body .txt-big:nth-child(6){ width:31.8%;}
.menu-body .txt-big:nth-child(7){ width:19.2%;}

.menu-body .txt-big:nth-child(8){ width:19.2%;}
.menu-body .txt-big:nth-child(9){ width:19.2%;}
.menu-body .txt-big:nth-child(10){ width:11.7%;}
.menu-body .txt-big:nth-child(11){ width:25.2%;}

.menu-body .txt-big:nth-child(12){ width:24%;}
.menu-body .txt-big:nth-child(13){ width:39.1%;}
.menu-body .txt-big:nth-child(14){ width:30%;} 



.menu-btn-canvas{ position:absolute; width:1em; height:1em;  top:calc(100% - 2px); right:.4em;  }
.menu-btn-canvas.random{ top:calc(100% - 2px); left:.5em; right:auto;}
.menu-body .txt-big.random .menu-btn-canvas{ top:calc(100% - 2px); left:.5em; right:auto;}
.menu-body .txt-big.random:before{ left:1em}
.menu-body .txt-big.hover:before{ background:#000}


.menu-body .txt-big{ transform-origin:calc(100% - .5em) calc(100% + 1em); transform:translateY(0.9em) scale(0); transition:transform .1s .4s }
.menu-body .txt-big.random{ transform-origin:.5em calc(100% + 1em)  }
.menu-container.active .menu-body .txt-big{ transform:translateY(0.9em) scale(1); transition:transform .6s .3s }

/* to:Blue, edit menu color here */
.menu-green span, .menu-green.hover{ color:#82c458;}
.menu-grey span, .menu-grey.hover{ color:#5d5988;}
.menu-skyblue span, .menu-skyblue.hover{ color:#43b9d4;}
.menu-dustgreen span, .menu-dustgreen.hover{ color:#91d1ba;}
.menu-orange span, .menu-orange.hover{ color:#eb9870;}
.menu-redpink span, .menu-redpink.hover{ color:#ef6da6;}
.menu-pink span, .menu-pink.hover{ color:#e0ada4;}
.menu-deepgreen span, .menu-deepgreen.hover{ color:#207e7b;}
.menu-brown span, .menu-brown.hover{ color:#985a46;}
.menu-dustpurple span, .menu-dustpurple.hover{ color:#ac8aa6;}
.menu-blue span, .menu-blue.hover{ color:#217f7c;}
.menu-purple span, .menu-purple.hover{ color:#8655a1;}
.menu-yellow span, .menu-yellow.hover{ color:#e8e517;}
.menu-fungreen span, .menu-fungreen.hover{ color:#578ec3;}

/* to:Blue, edit menu color here */


.menu-footer{ position:absolute; bottom:0.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 */






 
/*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: 92%; }

.disclaimer-button-container{ width:auto; display:flex; align-items: center;  gap:.5em; margin-left:1em; }
.disclaimer-chevron{ width: 0.75em; height: 0.75em; /*border-right: 1px solid white; border-bottom: 1px solid white; transform: translateY(-0.125em) rotate(45deg);*/
background-image:url(../img/arrow-down.svg); background-repeat:no-repeat; background-position:center;  
}
.disclaimer-button-label{ font-weight: 600;  }
.txt-dark .disclaimer-chevron{ border-color:#4d4d4d }

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


.site-container.home .page-bg-container, .site-container.home .page-bg-container.home div, .site-container.home .menu-btn{ cursor:none!important;}
.cursor{ position:absolute; width:0em; height:4.5em; background-image:url("../img/cursor.png"); background-repeat:no-repeat; background-position:center;  background-size:contain; transform:translate(-50%,-50%); pointer-events:none; cursor:none; z-index:3;  }
.cursor.clicked{ /*transform:translate(-50%,-50%) rotate(-40deg)*/ transform:translate(-50%,-50%) scale(.8) }
.site-container.init .cursor{ width:4.5em }

#canvas-sequence-z{ position:absolute; top:100%; left:0; width:100%; height:100%; transform:translate(0%,-90%); }

.site-container.init .logotype-container{ transform:translate(-50%,0%); opacity:1; transition:transform .6s .2s, opacity .3s .2s linear}


.logotype-container{ width:100%;  position:absolute; bottom:42%; left:50%; transform:translate(-50%,50%); opacity:0;  /*background:redmix-blend-mode:screen;*/ }
.logotype-container-inner{ margin:auto; position: relative; width:38%; padding-bottom:38%;  }
.logotype-container-inner > video{ width:100%; position:absolute; height:100%;   }

.bird-container{ position:absolute; animation:ani-bird 30s linear infinite; }
.bird-container-inner{  background-repeat:no-repeat; background-position:center; background-size:contain;  width:100%; padding-bottom:100%; /*animation:ani-bird-inner 1s linear infinite; animation-direction:alternate;*/  animation:ani-mascot-frames 1.5s steps(1) infinite; animation-direction:alternate;  }

.bird-container  > div{ background-image:url(../img/holes/bird.png); background-size:1100% auto; }

.bird-container:nth-child(odd){ left:100%; top:24%; width:10%;   }
.bird-container:nth-child(even){ left:100%; top:15%; width:6%; animation-delay:-3s  }
/*
.bird-container:nth-child(odd) > div{ background-image:url("../img/bird-001.png") }
.bird-container:nth-child(even) > div{ background-image:url("../img/bird-002.png") }
*/
@keyframes ani-bird {
    0%   { transform:translateX(0)} 
	100% { transform:translateX(-105vw)} 
}
@keyframes ani-bird-inner {
    0%   { transform:translateY(0)} 
	100% { transform:translateY(-1vw)} 
}

/* Holes */
.hole-container{ position:absolute; width:15%; padding-top:15%; /*background:blue; overflow:hidden;*/ 
	
}
.hole-container-inner{ position:absolute; width:100%; height:100%; top:0; left:0; 
	clip-path:polygon(0% 0%, 100% 0%, 100% 96%, 99% 97%, 98% 97.3%, 97% 97.6%, 94% 98%, 91% 98.4%, 88% 98.6%, 85% 98.8%, 82% 99%, 79% 99.2%, 76% 99.4%, 73% 99.6%, 70% 99.8%, 67% 100%, 50% 100%, 33% 100%, 30% 99.8%, 27% 99.6%, 24% 99.4%, 21% 99.2%, 18% 99%, 15% 98.8%, 12% 98.6%, 9% 98.4%, 6% 98.0%, 3% 97.6%, 2% 97.3%, 1% 97.0%, 0% 96%);
	 -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 96%, 99% 97%, 98% 97.3%, 97% 97.6%, 94% 98%, 91% 98.4%, 88% 98.6%, 85% 98.8%, 82% 99%, 79% 99.2%, 76% 99.4%, 73% 99.6%, 70% 99.8%, 67% 100%, 50% 100%, 33% 100%, 30% 99.8%, 27% 99.6%, 24% 99.4%, 21% 99.2%, 18% 99%, 15% 98.8%, 12% 98.6%, 9% 98.4%, 6% 98.0%, 3% 97.6%, 2% 97.3%, 1% 97.0%, 0% 96%);
}


.hole-container-inner > .shape-container{ position:absolute; width:100%; padding-bottom:9%; background-image:url(../img/hole.svg); background-size:contain; transform:translateY(4%); bottom:0; }
.hole-container-inner  .mascot-container{ position:absolute; top:100%; width:76%; padding-bottom:100%; left:12%; transform:translateY(-20%); cursor:pointer; transition:transform .4s}
.hole-container-inner  .mascot-container > div{ position:absolute; width:100%; height:100%;  background-size:contain;  background-position:left top; animation:ani-mascot 1s linear infinite; animation-direction:alternate;  }
@keyframes ani-mascot {
    0%   { transform:translateY(0%)} 
	100% { transform:translateY(2%)} 
}

.hole-container .mascot-container.hover > div{ animation:ani-mascot-frames 1.5s  steps(1) infinite; animation-direction:alternate;   }
@keyframes ani-mascot-frames  {
    0%   { background-position:0% 0% } 
	3.125%   { background-position:10% 0% } 
	6.25%   { background-position:20% 0% } 
	9.375%   { background-position:30% 0% } 
	12.5%   { background-position:40% 0% } 
	15.625% {  background-position:50% 0% } 
	18.75% {  background-position:60% 0% } 
	21.875% {  background-position:70% 0% } 
	25% {  background-position:80% 0% } 
	28.125% {  background-position:90% 0% } 
	31.25% { background-position:100% 0% } 
	34.375%   { background-position:0% 50% } 
	37.5%   { background-position:10% 50% } 
	40.625%   { background-position:20% 50% } 
	43.75%   { background-position:30% 50% } 
	46.875%   { background-position:40% 50% } 
	50% {  background-position:50% 50% } 
	53.125%   { background-position:60% 50% } 
	56.25%   { background-position:70% 50% } 
	59.375%   { background-position:80% 50% } 
	62.5%   { background-position:90% 50% } 
	65.625% {  background-position:100% 50% } 
	68.75% {  background-position:0% 100% } 
	71.875% {  background-position:10% 100% } 
	75% {  background-position:20% 100% } 
	78.125% {  background-position:30% 100% } 
	81.25% { background-position:40% 100% } 
	84.375%   { background-position:50% 100% } 
	87.5%   { background-position:60% 100% } 
	90.625%   { background-position:70% 100% } 
	93.75%   { background-position:80% 100% } 
	96.875%   { background-position:90% 100% }
	100% { background-position:100% 100% } 
}


.hole-container.hover{ z-index:2!important}
.mascot-container.hover{ transform:translateY(-60%); }

.speech-bubble-container{ position:absolute; bottom:55%; background-size:contain; background-position:top left; background-repeat:no-repeat; /*background-image:url("../img/speech-bubble.png"); width:15em; padding-bottom:8.01em;*/ left:85%; transform:scale(0); transform-origin:left bottom   }
.speech-bubble-container:before{ content:''; position:absolute; background-size:contain; background-position:top left; background-repeat:no-repeat; /*background-image:url("../img/speech-bubble-legs.png");*/ width:12%; height:20%; top:90%; left:0; transform:scale(-1,1)    }
.speech-bubble-container > div{ width:calc(100% - 3em); left:1.5em; position:absolute; top:50%; transform:translate(0,-50%); color:#000; font-size:1.6em; line-height:1.3;  display:none}

.speech-bubble-container.txt-center > div{ text-align:center}
/*.speech-bubble-container.larger{ width:18em; padding-bottom:9.62em; }
.speech-bubble-container.smaller{ width:13.5em; padding-bottom:7.2em; }
*/
.hole-container.hover .speech-bubble-container{  transform:scale(1); transition:transform 400ms  }

/* to:Blue, edit mascot here */
.hole-container-inner > .mascot-container{    }
.hole-container:nth-child(1) .hole-container-inner{   height:130%; top:-30%;  }
.hole-container:nth-child(1) .mascot-container{ transform:translate(0%,-23%); width:130%; left:-20%;  padding-bottom:130%; }
.hole-container:nth-child(1) .mascot-container > div{ background-image:url("../img/holes/triangle.png");  background-size:1100% auto; transform:scale(-1,1)!important  }
.hole-container:nth-child(1) .mascot-container.hover{  transform:translate(0%,-85%);  }
.hole-container:nth-child(1) .speech-bubble-container{  background-image:url("../img/holes/bubble-sb.png"); width:126.72%; padding-bottom:73.04%;  left:70%; bottom:95%; top:auto;  }

.hole-container:nth-child(2) .mascot-container{ width:90%; left:5%;  padding-bottom:90%; transform:translateY(-38%);}
.hole-container:nth-child(2) .mascot-container > div{ background-image:url("../img/holes/mountain.png");  background-size:1100% auto;   }
.hole-container:nth-child(2) .mascot-container.hover{  transform:translateY(-80%);  }
.hole-container:nth-child(2) .speech-bubble-container{  background-image:url("../img/holes/bubble-ap.png"); width:236%; padding-bottom:135.63%; bottom:54%; left:72%   }
 
.hole-container:nth-child(3) .hole-container-inner{   height:150%; top:-50%;  }
.hole-container:nth-child(3) .mascot-container{ width:130%; left:-15%;  padding-bottom:130%; transform:translateY(-23%);}
.hole-container:nth-child(3) .mascot-container > div{  background-size:1100% auto; background-image:url("../img/holes/elephant.png");  }
.hole-container:nth-child(3) .mascot-container.hover{  transform:translateY(-95%);  }
.hole-container:nth-child(3) .speech-bubble-container{  background-image:url("../img/holes/bubble-anm.png"); width:222.5%; padding-bottom:128.9%;  left:auto; right:78%; bottom:62%;  transform-origin:right bottom;  }

.hole-container:nth-child(4) .hole-container-inner{   height:150%; top:-50%;  }
.hole-container:nth-child(4) .mascot-container{ width:150%; left:-25%;  padding-bottom:150%;transform:translateY(-27%); }
.hole-container:nth-child(4) .mascot-container > div{  background-image:url("../img/holes/icecream.png");  background-size:1100% auto;  }
.hole-container:nth-child(4) .mascot-container.hover{  transform:translateY(-65%);  }
.hole-container:nth-child(4) .speech-bubble-container{   background-image:url("../img/holes/bubble-sa.png"); width:160%; padding-bottom:91.2%;  left:auto; right:78%; bottom:75%;  transform-origin:right bottom;   }


.hole-container:nth-child(5) .speech-bubble-container{ bottom:90%; }
.hole-container:nth-child(5) .hole-container-inner{   height:140%; top:-40%;  }
.hole-container:nth-child(5) .mascot-container{ width:85%; left:7.5%; padding-bottom:136%; transform:translateY(-23%);  }
.hole-container:nth-child(5) .mascot-container > div{  background-image:url("../img/holes/roller.png");  background-size:1100% auto; animation-duration:1s  }
.hole-container:nth-child(5) .mascot-container.hover{  transform:translateY(-66%);  }
.hole-container:nth-child(5) .speech-bubble-container{   background-image:url("../img/holes/bubble-r.png"); width:189.4%; padding-bottom:109.36%;  left:60%; bottom:70%;   }


.hole-container:nth-child(6) .mascot-container{ width:100%; left:0%;  transform:translateY(-35%);  }
.hole-container:nth-child(6) .mascot-container > div{  background-size:1100% auto;/*background-image:url(../img/mascot/005.png);*/ background-image:url("../img/holes/bee.png");  }
.hole-container:nth-child(6) .mascot-container.hover{  transform:translateY(-80%);  }
.hole-container:nth-child(6) .speech-bubble-container{   background-image:url("../img/holes/bubble-td.png"); width:142.7%; padding-bottom:81.24%;  left:auto; right:60%; bottom:60%;  transform-origin:right bottom;   }

.hole-container:nth-child(7) .mascot-container{ width:100%; left:0%;  transform:translateY(-40%);  }
.hole-container:nth-child(7) .mascot-container > div{  /*background-image:url(../img/mascot/013.png);*/ background-size:1100% auto; background-image:url("../img/holes/bird.png");  }
.hole-container:nth-child(7) .mascot-container.hover{  transform:translateY(-85%);  }
.hole-container:nth-child(7) .speech-bubble-container{   background-image:url("../img/holes/bubble-domc.png"); width:189.9%; padding-bottom:108.1%;  left:auto; right:70%; bottom:45%;  transform-origin:right bottom;   }

.hole-container:nth-child(8) .mascot-container{ width:100%; left:0%; padding-bottom:100%;   transform:translateY(-36%);  }
.hole-container:nth-child(8) .mascot-container > div{  /*background-image:url(../img/mascot/010.png);*/ background-size:1100% auto; background-image:url("../img/holes/chick.png");  }
.hole-container:nth-child(8) .mascot-container.hover{  transform:translateY(-80%);  }
.hole-container:nth-child(8) .speech-bubble-container{   background-image:url("../img/holes/bubble-pl.png"); width:147.7%; padding-bottom:84.5%;  left:auto; right:78%; bottom:45%;  transform-origin:right bottom;   }

.hole-container:nth-child(9) .mascot-container{ width:95%; left:2.5%; padding-bottom:105.45%;  transform:translateY(-35%);  }
.hole-container:nth-child(9) .mascot-container > div{  /*background-image:url(../img/mascot/002.png);*/ background-size:1100% auto; background-image:url("../img/holes/butterfly.png");  }
.hole-container:nth-child(9) .mascot-container.hover{  transform:translateY(-80%);  }
.hole-container:nth-child(9) .speech-bubble-container{   background-image:url("../img/holes/bubble-rot.png"); width:177.73%; padding-bottom:101.18%;  left:75%; bottom:50%;   }

.hole-container:nth-child(10) .mascot-container{ width:110%; left:-10%; padding-bottom:110%;  transform:translateY(-43%);  }
.hole-container:nth-child(10) .mascot-container > div{ /*background-image:url(../img/mascot/012.png);*/ background-size:1100% auto; background-image:url("../img/holes/cloud.png");  }
.hole-container:nth-child(10) .mascot-container.hover{  transform:translateY(-80%);  }
.hole-container:nth-child(10) .speech-bubble-container{   background-image:url("../img/holes/bubble-g.png"); width:211.5%; padding-bottom:120.4%;  left:auto; right:85%; bottom:60%;  transform-origin:right bottom;   }

.hole-container:nth-child(11) .mascot-container{ width:100%; left:0%; padding-bottom:100%;  transform:translateY(-44%);  }
.hole-container:nth-child(11) .mascot-container > div{  /*background-image:url(../img/mascot/004.png);*/ background-size:1100% auto; background-image:url("../img/holes/unicorn.png");  }
.hole-container:nth-child(11) .mascot-container.hover{  transform:translateY(-73%);  }
.hole-container:nth-child(11) .speech-bubble-container{   background-image:url("../img/holes/bubble-br.png"); width:158.95%; padding-bottom:90.5%;  left:60%; bottom:50%;   }

.hole-container:nth-child(12) .mascot-container{ width:90%; left:5%; padding-bottom:90%;  transform:translate(1%, -33%);  }
.hole-container:nth-child(12) .mascot-container > div{  /*background-image:url(../img/mascot/014.png);*/ background-image:url("../img/holes/sun.png");  background-size:1100% auto;  }
.hole-container:nth-child(12) .mascot-container.hover{  transform:translate(1%, -83%);  }
.hole-container:nth-child(12) .speech-bubble-container{   background-image:url("../img/holes/bubble-vt.png"); width:191.82%; padding-bottom:109.6%;  left:auto; right:60%; bottom:55%;  transform-origin:right bottom;   }

.hole-container:nth-child(13) .speech-bubble-container{ bottom:95%; }
.hole-container:nth-child(13) .hole-container-inner{   height:130%; top:-30%;  }
.hole-container:nth-child(13) .mascot-container{ width:150%; left:-35%; padding-bottom:150%;  transform:translate(0%, -25%);  }
.hole-container:nth-child(13) .mascot-container > div{  /*background-image:url(../img/mascot/007.png);*/ background-size:1100% auto; background-image:url("../img/holes/shopping.png"); animation-duration: 1s;  }
.hole-container:nth-child(13) .mascot-container.hover{  transform:translateY(-75%);  }
.hole-container:nth-child(13) .speech-bubble-container{   background-image:url("../img/holes/bubble-psd.png"); width:182.45%; padding-bottom:104.22%;  left:auto; right:70%; bottom:100%;  transform-origin:right bottom;   }

.hole-container:nth-child(14) .speech-bubble-container{ bottom:95%; }
.hole-container:nth-child(14) .hole-container-inner{   height:120%; top:-20%;  }
.hole-container:nth-child(14) .mascot-container{ width:300%; left:-100%; padding-bottom:270%;  transform:translate(0%, -43%);  }
.hole-container:nth-child(14) .mascot-container > div{  /*background-image:url(../img/mascot/003.png);*/ background-image:url("../img/holes/golf.png");  background-size:1100% auto;  }
.hole-container:nth-child(14) .mascot-container.hover{  transform:translateY(-78%);  }

.hole-container:nth-child(14){ }
.hole-container:nth-child(14) .hole-container-inner, .hole-container:nth-child(13) .hole-container-inner, .hole-container:nth-child(4) .hole-container-inner{ 
	clip-path:polygon(-50% -50%, 150% -50%, 150% 96%, 99% 97%, 98% 97.3%, 97% 97.6%, 94% 98%, 91% 98.4%, 88% 98.6%, 85% 98.8%, 82% 99%, 79% 99.2%, 76% 99.4%, 73% 99.6%, 70% 99.8%, 67% 100%, 50% 100%, 33% 100%, 30% 99.8%, 27% 99.6%, 24% 99.4%, 21% 99.2%, 18% 99%, 15% 98.8%, 12% 98.6%, 9% 98.4%, 6% 98.0%, 3% 97.6%, 2% 97.3%, 1% 97.0%, -50% 96%); 
	 -webkit-clip-path:polygon(-50% -50%, 150% -50%, 150% 96%, 99% 97%, 98% 97.3%, 97% 97.6%, 94% 98%, 91% 98.4%, 88% 98.6%, 85% 98.8%, 82% 99%, 79% 99.2%, 76% 99.4%, 73% 99.6%, 70% 99.8%, 67% 100%, 50% 100%, 33% 100%, 30% 99.8%, 27% 99.6%, 24% 99.4%, 21% 99.2%, 18% 99%, 15% 98.8%, 12% 98.6%, 9% 98.4%, 6% 98.0%, 3% 97.6%, 2% 97.3%, 1% 97.0%, -50% 96%);
}
.hole-container:nth-child(14) .speech-bubble-container{   background-image:url("../img/holes/bubble-sbfps.png"); width:190.63%; padding-bottom:108.9%;  left:60%; bottom:120%;   }

/* to:Blue, edit mascot here */


.holes-container{ width:100%; height:100%; position:relative; margin:auto; opacity:0;}
.holes-container.active { opacity:1;}

.hole-container:nth-child(1){  /*left:61%; bottom:21.5%;*/   left:8%; bottom:30%;  }
.hole-container:nth-child(2){ /*left:8%; bottom:30%;*/  left:34%; bottom:73%; width:8%; padding-top:8%; z-index: 1}
.hole-container:nth-child(3){   left:57%; bottom:82.5%; width:8.5%; padding-top:8.5%;  z-index: 1  }
.hole-container:nth-child(4){ left:62%; bottom:28%; width:12%; padding-top:12%; }


.hole-container:nth-child(5){ left:56%; bottom:54.5%; width:10%; padding-top:10%; }
.hole-container:nth-child(6){ left:80%; bottom:38.5%; width:13.5%; padding-top:13.5%; }
.hole-container:nth-child(7){  left:82%; bottom:83.5%; width:10%; padding-top:10%;  }
.hole-container:nth-child(8){ left:37%; bottom:39%; width:13%; padding-top:13%; }
.hole-container:nth-child(9){left:4%; bottom:78%; width:10.8%; padding-top:10.8%;  }
.hole-container:nth-child(10){ left:73%; bottom:67%; width:9%; padding-top:9%; }

.hole-container:nth-child(11){left:19%; bottom:59%; width:12%; padding-top:12%; } 
.hole-container:nth-child(12){ left:71%; bottom:92.5%; width:10%; padding-top:10%; } 
.hole-container:nth-child(13){ left:42%; bottom:86%; width:10.5%; padding-top:10.5%;  }
.hole-container:nth-child(14){  left:15.5%; bottom:94%; width:10%; padding-top:10%; } 
/*
.hole-container .speech-bubble-container.dalign{ left:auto; right:85%; transform-origin:right bottom }
.hole-container .speech-bubble-container.dalign:before{ left:auto; right:0; transform:scale(1,1)    }
/* Holes */




/* Tour */
.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}
.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; z-index:3;}
.overlay-container-inner{ position:relative; width:85%; max-width:1400px; margin:auto;  border-radius:4em; background:rgba(163,216,214,.8); /*border:1px solid #fff;*/ overflow:hidden; background-repeat:no-repeat; background-size:30% auto; background-image: url("../img/overlay-right.png"); background-position:top right;  }

.overlay-container-inner:before{ content:''; background-repeat:no-repeat; background-size:35% auto; background-image: url("../img/overlay-left.png"); background-position:bottom left; position:absolute; width:100%; height:100%; left:0; top:0;}

.overlay-txt-container{ position: relative; margin:auto; width:90%; max-width:1200px;/*keat*/ padding:8em 0 7em 0; }

.cross-button-container{ position:absolute; width:2.5em; height: 2.5em; top:2.75em; right:0em; display: flex; justify-content: center; align-items: center; cursor:pointer; background:#000; border-radius:1000px; padding:1.5em;  }
.cross-button-container > div { position: absolute; width:1.5em; height:2px; background-color: #fff; 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:40vh; min-height:3em }

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


/*disclaimer*/
.disclaimer-txt-box, .footer-notes{ font-family: 'Century Gothic','Noto Sans TC','Arial', sans-serif; }

.disclaimer-container{ position:relative; width:100%; height:auto; background-color:#a2b5bc; background-repeat:no-repeat; background-size:28% auto; background-image: url("../img/footer-right.jpg"); background-position:top right;  }
.disclaimer-container:before{ content:''; background-repeat:no-repeat; background-size:22.5% auto; background-image: url("../img/footer-left.jpg"); background-position:bottom left; position:absolute; width:100%; height:100%; left:0; top:0;}

.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;}
.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:6em;  }


cnt-container{ position:absolute; width:100%; overflow:auto;}
.doc-ele{ margin-top:.5em; display:flex; justify-content:space-between; margin-left:1.5em    }
.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{ color:#fff; text-decoration:underline}
.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 */


/* vt */
.vt-overlay-container.active{ left:0vw; transition:left 0s}
.vt-overlay-container.active .vt-overlay-container-inner{  transform:translateY(0); }

.vt-overlay-container{ position:fixed; width:100%; height:100%; top:0; left:-1000vw;  display:flex; align-items:center; justify-content:center; z-index:3; transition:left 0s .4s  } 
.vt-overlay-container-inner{ background:rgba(199,169,185,0.95); border-radius:1.5rem; width:90%; max-width:1400px;  filter:drop-shadow(0 0 1em rgba(0,0,0,0.5)); position:relative; transform:translateY(150%); transition:transform .4s }

.vt-overlay-container-inner-inner{ width:100%; height:0%; padding-bottom:53%;  overflow:auto; display:flex; align-items:center; position:relative; }
.vt-overlay-container-inner-inner-inner{  width:100%; position:absolute; height:100%; top:0; left:0 }
.vt-overlay-cnt-container{ margin:auto; }

.vt-btn{ position:absolute; width:3em; height:3em; top:2em; left:2em;  display:block; border:2px solid #000; border-radius:1000px; cursor:pointer!important}
.vt-btn > div{ position:absolute; width:50%; height:2px; left:25%; background:#000; transition:transform 100ms, background 200ms 0ms }
.vt-btn > div:nth-child(1){ top:50%; transform:rotate(-45deg);}
.vt-btn > div:nth-child(2){ top:50%;  transform:rotate(45deg); } 
   
.vt-overlay-headline{ width:calc(100% - 2em); margin-right:2em; margin-top:3em;  text-align:right; }
.vt-overlay-headline img{ height:7em; width:auto; }


.vt-slideshow-container.two-column{  overflow:visible}
.vt-slideshow-container.two-column .vt-slideshow-container-inner{ left:5em;  width:calc(100% - 10em); overflow:hidden}
.vt-slideshow-container.two-column .vt-slideshow-thumb{ transform:scale(1); }
.vt-slideshow-container.two-column .vt-slideshow-ele{ position:relative; left:auto; transform:translateX(0); width:25%; margin-right:12.5%; pointer-events:all;  } 
.vt-slideshow-container-inner-inner{ position:relative; width:160%; display:flex; align-items:flex-start; justify-content:flex-start; height:100%;  transition:transform .4s  }

.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(1){ width:12%; left:9%; top:10%; transform:rotate(0deg)}	
.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(2){ width:8%; left:80%; top:85%; transform:rotate(0deg)  }	

.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(1) > div{ padding-bottom:44.8%;} 
.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(2) > div{ padding-bottom:50.8%;}

.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(1) > div > div{ background-image:url("../img/vt/so-cloud-001.svg"); animation:ani-deco-sliding 4s linear infinite; animation-direction:alternate  } 
.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(2) > div > div{ background-image:url("../img/vt/so-cloud-002.svg");  animation:ani-deco-sliding 3s linear infinite;  animation-direction:alternate  }	


.show-flat .vt-overlay-container-inner-inner-inner{ display:flex;  align-items:center;}
.show-flat-container{ width:calc(100% - 4em); margin:auto; display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse    }
.show-flat-container > div:nth-child(2){ width:45%; }
.show-flat-container > div:nth-child(1){ width:55%;   position:relative;}
.show-flat-container > div:nth-child(1) iframe{ height:100%; position:absolute;}
.show-flat-container .vt-overlay-headline{ text-align:left}

.show-flat-container > div:nth-child(1) .vt-overlay-headline{ text-align:center; display:none}
.show-flat-container > div:nth-child(1) > div:nth-child(2){ width:100%; padding-bottom:65%;  position:relative;}


.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(1){ width:8%; left:16%; top:6%; transform:rotate(0deg)}	
.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(1) > div{ padding-bottom:47%; transform:translate(0%,-0%)}
.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(1)> div > div{  background-image:url("../img/psd/deco-004.svg"); animation:none  }

.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(2){ width:8%; left:88%; top:85%; transform:rotate(0deg) }	
.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(2) > div{ padding-bottom:40%; transform:translate(0%,-0%)}
.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(2) > div > div{  background-image:url("../img/psd/deco-005.svg"); animation:none  }




.show-flat-container .cnt-container{ position:relative; margin-top:1em; width:95%}

.show-flat-container .doc-ele >  div:nth-child(2){ width:1em; height:1.2em; position:relative; white-space:nowrap;}
.show-flat-container .doc-ele > div:nth-child(2)::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"); transform:rotate(-90deg)}

.info-showflat .vt-overlay-headline{ position:absolute; right:2em; top:3em; margin:0em; }
.info-show-flat-img{ margin:5em auto; width:85%; padding-bottom:5em }


.vt-slideshow-container{ left:0; top:32%;  width:100%; height:calc(43% + 3.5em); position:absolute; overflow:hidden; }
.vt-slideshow-container-inner{ position:relative; width:calc(100% - 0em); height:100%; top:0; left:0; }

.vt-slideshow-ele{ position:absolute; width:42%; height:100%; top:0; text-align:center}
.vt-slideshow-thumb{ position:relative; width:100%; height:calc(100% - 3.5em); margin-bottom: 1em; background:blue; transform:scale(0.7); transition:transform .6s cubic-bezier(0,.5,.33,1); background-position:center; background-size:cover; }
.vt-thumb-btn{ position:absolute; width:4em; height:4em; border:1px solid #fff; border-radius:1000px; top:calc(50% - 2em); left:calc(50% - 2em); background-position:60% center; background-size:40% auto; background-repeat:no-repeat; background-image:url(../img/vt/thumb-play.svg) }

.vt-slideshow-ele{ animation-duration:.6s; animation-delay:0s; animation-timing-function:cubic-bezier(0,.5,.33,1);  animation-fill-mode:forwards;  animation-iteration-count:1; transform:translateX(-100%);  left:50%; pointer-events:none; }
.vt-slideshow-ele.active{ pointer-events:all }
.vt-slideshow-ele.sw-center-to-left{  animation-name:ani-slideshow-center-to-left;  } 
.vt-slideshow-ele.sw-right-to-center{ animation-name:ani-slideshow-right-to-center; animation-duration:.6s; } 
.vt-slideshow-ele.sw-center-to-right{ animation-name:ani-slideshow-center-to-right;  } 
.vt-slideshow-ele.sw-left-to-center{  animation-name:ani-slideshow-left-to-center;  animation-duration:.6s;  } 
.vt-slideshow-ele.sw-outer-to-right{  animation-name:ani-slideshow-outer-to-right;  } 
.vt-slideshow-ele.sw-left-to-outer{  animation-name:ani-slideshow-left-to-outer;  } 
.vt-slideshow-ele.sw-outer-to-left{  animation-name:ani-slideshow-outer-to-left;  } 
.vt-slideshow-ele.sw-right-to-center .vt-slideshow-thumb, .vt-slideshow-ele.sw-left-to-center .vt-slideshow-thumb{ transform:scale(1)}

.vt-slideshow-nav{ position:absolute; top:calc(50% - 1.3em - 1.5em); width:2.6em; height:2.6em; left:1em; background-image:url(../img/vt/slide-nav.svg); background-position:center; background-size:contain; background-repeat:no-repeat;  }
.vt-slideshow-nav:last-child{ left:auto; right:1em;  transform:scale(-1,1);   }

@keyframes ani-slideshow-center-to-left{
0%   { transform:translateX(-50%) }
100% { transform:translateX(-150%)  }
}
@keyframes ani-slideshow-right-to-center{
0%   { transform:translateX(50%) }
100% { transform:translateX(-50%)  }
}
@keyframes ani-slideshow-center-to-right{
0%   { transform:translateX(-50%) }
100% { transform:translateX(50%)  }
}
@keyframes ani-slideshow-left-to-center{
0%   { transform:translateX(-150%) }
100% { transform:translateX(-50%)  }
}
@keyframes ani-slideshow-outer-to-right{
0%   { transform:translateX(150%) }
100% { transform:translateX(50%)  }
}
@keyframes ani-slideshow-left-to-outer{
0%   { transform:translateX(-150%) }
100% { transform:translateX(-250%)  }
}
@keyframes ani-slideshow-outer-to-left{
0%   { transform:translateX(-250%) }
100% { transform:translateX(-150%)  }
}

 
.vt-deco-ele > div > div{ background-repeat:no-repeat; background-position:center; background-size:contain; position:absolute;  width:100%; height:100%; top:0; left:0;}

.vt-deco-ele{position:absolute;   }
.vt-deco-ele:nth-last-child(1){ width:3%; left:10%; top:20%; transform:rotate(-12deg)}	
.vt-deco-ele:nth-last-child(2){ width:3%; left:14%; top:22%; transform:rotate(9deg)  }	

.vt-deco-ele:nth-last-child(3){ width:3%; left:72%; top:83%;transform:rotate(-10deg)  }	
.vt-deco-ele:nth-last-child(4){ width:3%; left:76%; top:88.5%; transform:rotate(12deg) }	

.vt-deco-ele:nth-last-child(1) > div, .vt-deco-ele:nth-last-child(2) > div, .vt-deco-ele:nth-last-child(3) > div, .vt-deco-ele:nth-last-child(4) > div{ padding-bottom:100%;}
.vt-deco-ele:nth-last-child(1) > div > div, .vt-deco-ele:nth-last-child(2) > div > div, .vt-deco-ele:nth-last-child(3) > div > div, .vt-deco-ele:nth-last-child(4) > div > div{ background-image:url("../img/ap/deco-004.png");  transform-origin:bottom center; animation:ani-deco-stomp 3s linear infinite; animation-direction:alternate;   }	

.vt-deco-ele:nth-last-child(2) > div > div, .vt-deco-ele:nth-last-child(4) > div > div{ animation-delay:0s; animation-direction:alternate; animation-name:ani-deco-stomp-reverse  }
 
/* VT */



.s-mobile-ele{display:none; } 

@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.noaction{ pointer-events:none!important }
	   
	
	.tour-container .overlay-txt-container{  overflow:auto; align-items:center!important}
	
	.header-container{ height:4em; position:fixed; }
	 
	.page-bg-container.home{  z-index:1 }
	.menu-container{  position:fixed; z-index:1}  
	.s-mobile-ele{display:flex; }
	.s-desktop-ele{display:none; }
	
	
	
	.menu-container-inner{ height:calc(100% - 8em); transform:translateY(0em); display:flex; align-items: center; left:5%}

	.menu-body .txt-big:nth-child(1){ width:34.3%;} .menu-body .txt-big:nth-child(2){ width:24%;} .menu-body .txt-big:nth-child(3){ width:19.9%;} .menu-body .txt-big:nth-child(4){ width:45.8%;} .menu-body .txt-big:nth-child(5){ width:41.8%;} .menu-body .txt-big:nth-child(6){ width:52.9%;} .menu-body .txt-big:nth-child(7){ width:42.4%;} .menu-body .txt-big:nth-child(8){ width:53.7%;} .menu-body .txt-big:nth-child(9){ width:32.4%;} .menu-body .txt-big:nth-child(10){ width:32.4%;} .menu-body .txt-big:nth-child(11){ width:53.7%;} .menu-body .txt-big:nth-child(12){ width:34.3%;} .menu-body .txt-big:nth-child(13){ width:41%;} .menu-body .txt-big:nth-child(14){ width:70%;}

	.menu-body .txt-big{ margin:0 0em 1.5em 0em; letter-spacing:.02em; font-size:3.8vw; border-width:1px }
	
	
	
	.lightbox-title.txt-subhead{ font-size:1.5em; }
	.overlay-container-inner{ width:calc(90% - 0em)}
	
	
	.menu-body .txt-big{ padding:.5em 0em;  margin:0 0em 1.5em 0em;  letter-spacing:.02em  } 
	.txt-big { font-size:4.2vw; }
	
	.hole-container:nth-child(3){ z-index:auto}
	.hole-container:nth-child(1){ left:58%; bottom:8%; width:32.8%; padding-top:32.8%;  }
	.hole-container:nth-child(2){ left:7%; bottom:15%;  width:32%; padding-top:32%;}
	.hole-container:nth-child(3){ left:33%; bottom:27%; width:26%; padding-top:26%;  }
	.hole-container:nth-child(4){ left:60%; bottom:36%; width:33%; padding-top:33%; }

	.hole-container:nth-child(5){ left:7.5%; bottom:44%; width:33%; padding-top:33%; }
	.hole-container:nth-child(6){ left:54%; bottom:48%; width:22%; padding-top:22%; }
	.hole-container:nth-child(7){ left:42%; bottom:61%; width:22%; padding-top:22%; }
	.hole-container:nth-child(8){ left:70%; bottom:67%; width:23%; padding-top:23%;  }

	.hole-container:nth-child(9){ left:6%; bottom:68%; width:27%; padding-top:27%;   }
	.hole-container:nth-child(10){ left:68%; bottom:79%; width:18%; padding-top:18%; }
	
	
	.hole-container:nth-child(11){ left:26%; bottom:76%; width:29%; padding-top:29%; }
	.hole-container:nth-child(12){ left:45%; bottom:85%; width:23.6%; padding-top:23.6%; }
	.hole-container:nth-child(13){ left:11%; bottom:88%; width:26%; padding-top:26%; }
	.hole-container:nth-child(14){ left:62%; bottom:92%; width:22%; padding-top:22%; }
	
	
	.hole-container:nth-child(1) .speech-bubble-container{  background-image:url("../img/holes/bubble-sb-m.png");  width:155.86%; padding-bottom:89.84%;  }
	.hole-container:nth-child(2) .speech-bubble-container{  width:162.84%; padding-bottom:93.6%; }
	.hole-container:nth-child(3) .speech-bubble-container{   background-image:url("../img/holes/bubble-anm-m.png"); width:198%; padding-bottom:114.7%;  left:58%; right:auto; bottom:120%;  transform-origin:left bottom;  }
	.hole-container:nth-child(5) .speech-bubble-container{  width:159.1%; padding-bottom:91.86%;  }
	.hole-container:nth-child(6) .speech-bubble-container{  width:238.3%; padding-bottom:135.67%;  }
	.hole-container:nth-child(7) .speech-bubble-container{  width:243%; padding-bottom:138.36%;  right:45%; bottom:60%;  }
	.hole-container:nth-child(8) .speech-bubble-container{  width:228.9%; padding-bottom:130.97%;  bottom:50%;  }
	.hole-container:nth-child(9) .speech-bubble-container{  width:193.73%; padding-bottom:110.3%;   bottom:53%;   }
	.hole-container:nth-child(10) .speech-bubble-container{ width:291.87%; padding-bottom:166.15%;   }
	.hole-container:nth-child(11) .speech-bubble-container{ width:181.2%; padding-bottom:103.2%;  left:62%; }
	.hole-container:nth-child(12) .speech-bubble-container{ width:224.42%; padding-bottom:128.23%;   }
	.hole-container:nth-child(13) .speech-bubble-container{ background-image:url("../img/holes/bubble-psd-m.png"); width:204.34%; padding-bottom:116.72%; left:68%; right:auto; transform-origin:left bottom;   }
	.hole-container:nth-child(14) .speech-bubble-container{ background-image:url("../img/holes/bubble-sbfps-m.png"); width:238.3%; padding-bottom:136.12%;  }
	
	
	
	.bird-container  > div{ background-image:url(../img/holes-m/bird.png); }  
	.hole-container:nth-child(1) .mascot-container > div{ background-image:url("../img/holes-m/triangle.png");   }  
 
	.hole-container:nth-child(2) .mascot-container > div{ background-image:url("../img/holes-m/mountain.png");   }  

	.hole-container:nth-child(3) .mascot-container > div{   background-image:url("../img/holes-m/elephant.png");  }  

	.hole-container:nth-child(4) .mascot-container > div{  background-image:url("../img/holes-m/icecream.png");    } 


	.hole-container:nth-child(5) .mascot-container > div{  background-image:url("../img/holes-m/roller.png");   } 


	.hole-container:nth-child(6) .mascot-container > div{ background-image:url("../img/holes-m/bee.png");  } 

	.hole-container:nth-child(7) .mascot-container > div{  background-image:url("../img/holes-m/bird.png");  } 

	.hole-container:nth-child(8) .mascot-container > div{   background-image:url("../img/holes-m/chick.png");  } 

	.hole-container:nth-child(9) .mascot-container > div{ background-image:url("../img/holes-m/butterfly.png");  } 

	.hole-container:nth-child(10) .mascot-container > div{ background-image:url("../img/holes-m/cloud.png");  } 

	.hole-container:nth-child(11) .mascot-container > div{   background-image:url("../img/holes-m/unicorn.png");  } 

	.hole-container:nth-child(12) .mascot-container > div{  background-image:url("../img/holes-m/sun.png");   } 

	.hole-container:nth-child(13) .mascot-container > div{  background-image:url("../img/holes-m/shopping.png")  } 

	.hole-container:nth-child(14) .mascot-container > div{ background-image:url("../img/holes-m/golf.png");   }
	
	
	
	.speech-bubble-container{ bottom:55%; width:15em; padding-bottom:8.01em; left:85%;   } 
	.speech-bubble-container > div{ width:calc(100% - 3.2em); left:1.5em;    }
	
	.hole-container .speech-bubble-container.dalign{ right:auto; left:85%; transform-origin:left bottom }
	.hole-container .speech-bubble-container.dalign:before{ right:auto; left:0; transform:scale(-1,1)    }
	
	.hole-container .speech-bubble-container.malign{ left:auto; right:85%; transform-origin:right bottom }
	.hole-container .speech-bubble-container.malign:before{ left:auto; right:0; transform:scale(1,1)    }
	
	.page-bg-container.home, .page-bg-container.home div{ cursor:auto!important;}
	.cursor{ display:none; }
	.page-bg-container.home{ background-position:center -22vw; }
	.landing-container{ height:60%; top:40%;  }
	.logotype-container{ width:100%;  bottom:60%;     }
	.logotype-container-inner{  width:60%; padding-bottom:60%;  }
	
	
	.overlay-container .overlay-txt-container{ padding-top:5em}
	.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;  }
	.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{  width:3.5em; height:3.5em; margin:2em 5vw 0 0;  }
	
	.menu-header{ padding:1.5em 0 1.5em 0;   } 
	.menu-header-sep{ background:#1c223a; margin:.8em auto .6em auto}
	.menu-header-btns-container{ margin:auto}

	.menu-header-sep, .menu-header-btns-container{ max-width:360px; }
	 
	
	.menu-footer{ bottom:0em; } 
	 
	.overlay-container.info-showflat  .cross-button-container{  right:0em;}
	
	.overlay-container-inner{  background-size:50% auto;    }
	.overlay-container-inner:before{  background-size:65% auto;  }
	
	
	/* 0120 */
	.menu-header{ padding:2.25em 0 1.75em 0;   }
	.menu-header-btns-container{ max-width:16em }
	
	.menu-bg-container.another{ opacity:0.7}
	
	.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 */
}


  
  

@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-size:80% auto;   } 
	.disclaimer-container:before{  background-size:75% auto; z-index:0 }
	.disclaimer-container .mobile-ele{ position:relative; z-index:1;}
	
	
    .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*/
	
	
	/* vt */  
	.vt-overlay-container-inner{ height:calc(100% - 6em);}
	.vt-overlay-container-inner-inner{  height:100%; padding:0 0; overflow:auto; display:block;  }  

	.vt-btn{  width:3em; height:3em; top:2em; left:2em;  } 

	.vt-overlay-headline{ width:calc(100% - 0em); margin:6em auto 2em auto;  text-align:center;  }
	.vt-overlay-headline img{ height:6em;  }

	.vt-slideshow-container{ left:auto; top:auto;  width:90%; margin:auto; height:calc(100% - 16em); position:relative; overflow:hidden;   }
	.vt-slideshow-container-inner{ position:relative; width:90%; height:calc(100% - 6em); top:3em; left:5%; overflow:hidden;  }

	.vt-slideshow-ele{ position:relative; width:100%; height:calc(40vw + 3.5em); top:auto; animation:none!important; transform:translateX(0%);  left:auto; margin:0 auto 2em auto}
	.vt-slideshow-ele:last-child{ margin-bottom: 0}
	.vt-slideshow-thumb{ position:relative; width:100%; height:calc(100% - 3.5em); margin-bottom: 1em;  transform:scale(1);  }
	.vt-thumb-btn{   width:4em; height:4em; top:calc(50% - 2em); left:calc(50% - 2em);   }


	.vt-slideshow-nav{   left:calc(50% - 1em)!important;  width:2em; height:2em; transform:rotate(90deg); top:0;}
	.vt-slideshow-nav:last-child{ right:auto;  transform:rotate(-90deg); bottom:0em; top:auto}
	
	
	.vt-deco-ele:nth-last-child(1){ width:6%; left:7%; top:20%;  }	
	.vt-deco-ele:nth-last-child(2){ width:6%; left:14%; top:22%;  }	

	.vt-deco-ele:nth-last-child(3){ width:5%; left:80%; top:92%;   }	
	.vt-deco-ele:nth-last-child(4){ width:5%; left:86%; top:95%;  }	
	
	
	 
	.vt-slideshow-container.two-column .vt-slideshow-container-inner{  width:calc(90% - 0em);  left:5%;  } 
	.vt-slideshow-container.two-column .vt-slideshow-ele{   width:100%; margin-right:0% } 
	.vt-slideshow-container-inner-inner{ display:block;   height:100%;  transition:transform 0s  }

	.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(1){ width:19%; left:39%; top:3%;}	
	.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(2){ width:14%; left:80%; top:94%;  }	
  
	.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(1) > div > div{ animation:ani-deco-sliding 4s linear infinite; animation-direction:alternate  } 
	.vt-overlay-container.sales-office .vt-deco-ele:nth-last-child(2) > div > div{ animation:ani-deco-sliding 3s linear infinite;  animation-direction:alternate }	
	
	
	.show-flat-container{ display:block}
	.show-flat-container > div:nth-child(2){ width:100%;margin-top:3em }
	.show-flat-container > div:nth-child(1){ width:100%; margin-bottom:1em}
	.show-flat-container > div:nth-child(1) > div:nth-child(2){ width:100%; padding-bottom:65%;  }
	
	.show-flat-container > div:nth-child(2) .vt-overlay-headline{ display:none}
	.show-flat-container > div:nth-child(1) .vt-overlay-headline{   display:block; }
	
	.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(1){ width:15%; left:26%; top:9%; }	 

.vt-overlay-container.show-flat .vt-deco-ele:nth-last-child(2){ width:15%; left:80%; top:auto; bottom:1em  }	 
	/* vt */  
	
	
	
}

@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;}
	
	.site-container.home .page-bg-container, .site-container.home .page-bg-container.home div, .site-container.home .menu-btn{ cursor:auto!important;}
	
}


@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 .canvas-container{ transition:transform .9s 1.2s, opacity .1s 1.2s linear;  } 
	 
	
	.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:5em 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 */
	/* 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 .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-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%; }
}

  
.special-z{ z-index:1}
.footer-container{z-index:2}


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

.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 */ 
}

@media only screen and (max-width:413px){
	.lightbox-title.txt-subhead.eng {max-width:15em; margin-left:auto; margin-right:auto; } 
}
 
.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; z-index:9 }
iframe{ height:100%; width:100%; border:0; background:transparent; position:absolute}


/*.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-logos-container{ position:absolute; top:15%; 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/1B/logo-a.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:4.7%; top:69%; right:38%;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:15%;animation:ani-land-bird 20s linear infinite;}
.bird2-container{ width:1%; top:32%; left:17%;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-logos-container{ top:15%; width:92%; left:50%; transform:translateX(-50%); max-width:640px}
	.site-container.entrance .landing-logos-container .landing-logo-container{  width:47%; margin:0 3%; min-width:0; }
	
	.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{ display:inline-block; border: 1px solid;text-align:center;padding:.6em .75em .4em .75em; line-height: 1; border-color:#fff}
.phase-button-container:hover{background: #FFF;color:rgba(2,31,57,0.9)}
.phase-button-container.mobile-ele{ display:none }
@media only screen and (max-width:1023px){
.phase-button-container.mobile-ele{margin-bottom: 1em; display:inline-block;}
	.phase-button-container{ border-color:#000; color:#000;}
	.phase-button-container:hover{ border-color:#000; color:#fff; background:#000}
}


.s-desktop-ele > div:nth-child(12),.s-desktop-ele > div:nth-child(13),.s-desktop-ele > div:nth-child(14),.s-mobile-ele > div:nth-child(11),.s-mobile-ele > div:nth-child(13),.s-mobile-ele > div:nth-child(14), .hole-container:nth-child(12), .hole-container:nth-child(13), .hole-container:nth-child(14){
	display:none;
}