@charset "UTF-8";
/* CSS Document */

html,body{  
	font-size:16px;
	font-weight:500;
	font-family:'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; 
}
body.flat{ background:#fff;  }

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

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

input{ background-color:transparent; border:none; color:#fff;  }
input:focus, textarea:focus{ outline:none;    }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#fff; -webkit-box-shadow:inset 0 0 0px 9999px #fff; box-shadow:inset 0 0 0px 9999px #fff; 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;  }
ul li{ margin-bottom:0.75em }
ul li:last-child{ margin-bottom:0em }

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

#canvasQR{ position:absolute; left:-1000vw; z-index:10; background:red; pointer-events:none; opacity:0.5 }

.clear{ clear:both; }
.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center;  }
.bg-child{ width:100%; height:100%; top:0; left:0; position:absolute; }
.bg-ani-linear{  animation-iteration-count:infinite; animation-timing-function:linear; }
 
.desktop-only{display:none }
.mobile-only{  }

/* text style */
.txt-black{ color:#000; }
.txt-white{ color:#fff; }
.txt-grey{ color:#565656; }
.txt-drakgreen{ color:#023A29; }
.txt-lightgrey{ color: #B0B0B0; }

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

.txt-giant{ font-size:3.5em; }
.txt-big{ font-size:1.6em; }
.txt-hl{ font-size:1.2em; }
.txt-small{ font-size:0.9em; }
.txt-mini{ font-size:0.8em; }


.txt-hl .lang-en{ font-size:.9em; }
.txt-inter{ font-family: 'Inter', 'Noto Sans TC', sans-serif; }
/* text style */


/* header */
.logo-container{ position:absolute; left:1.5em; top:1.5em; /*width:3.5em; max-width:15vw ;*/}
.logo-container > div{display: flex}

.logo-container >  div > img:nth-child(1){ width:4.5em; height:auto}
.logo-container >  div > img:nth-child(3){ width:5.5em; height:auto}

.logo-container >  div > img:nth-child(2){ margin:0 1.3em; width:1.5px; height:6em}

.langs-container{ position:absolute; right:1em; top:1em; z-index:1;}
.langs-container button{ line-height:1; border-radius:0.5em; border:1px solid rgba(255,255,255,0); padding:.5em}
.langs-container button:nth-child(1){  padding:.4em .5em .6em .5em}
.langs-container button:nth-child(2){ transform:translateY(-0.05rem)}
.langs-container button.active{ border-color:rgba(255,255,255,1)}

/* header */

/* cloud */
.cloud-container{ position:absolute; top:0; left:0; width:100%; height:100%;   }
.cloud-container > .bg-default{ position:absolute; background-repeat: no-repeat;}


.cloud-container > .bg-default > div{  opacity:1; transition:opacity .6s 2.5s linear }
.cloud-container > .bg-default:nth-child(1){ transition-delay:1.9s  }
.cloud-container > .bg-default:nth-child(2){ transition-delay:2.1s  }
.cloud-container > .bg-default:nth-child(3){ transition-delay:2.3s  }
.cloud-container > .bg-default:nth-child(4){ transition-delay:1.9s  }
.cloud-container > .bg-default:nth-child(5){ transition-delay:1.6s  }


.cloud-container > .bg-default:nth-child(1){ background-image:url("../img/cloud-left.png"); background-position:top right; left:7%; top:20%; width:8%; height:50%; background-size:contain;animation:ani-cloud  20s linear infinite alternate;}
.cloud-container > .bg-default:nth-child(2){ background-image:url("../img/cloud-left.png"); background-position:top left; left:16%; top:28%; width:4%; height:50%; background-size:contain;animation:ani-cloud  10s linear infinite alternate ;}
.cloud-container > .bg-default:nth-child(3){ background-image:url("../img/cloud-right.png"); background-position:right top; right:5%; top:10%; width:4%; height:50%; background-size:contain;  animation:ani-cloud 15s linear infinite;  }
.cloud-container > .bg-default:nth-child(4){ background-image:url("../img/cloud-right.png"); background-position:right top; right:18%; top:38%; width:8%; height:50%; background-size:contain;  animation:ani-cloud 20s linear infinite;  }
.cloud-container > .bg-default:nth-child(5){ background-image:url("../img/cloud-right.png"); background-position:right top; right:29%; top:44%; width:4%; height:50%; background-size:contain;  animation:ani-cloud 15s linear infinite; }

@keyframes ani-cloud {
    0%   { transform:translateX(0%) }
	50%   { transform:translateX(-40%)}
	100% { transform:translateX(0%) }
}

/* cloud */


/* common */
.lang-en{ display:none}
.lang-zh{ display:inline}

.page-container.en .lang-en, .footer-container.en .lang-en, .overlay-container.en .lang-en, .loader-container.en .lang-en{ display:inline}
.page-container.en .lang-zh, .footer-container.en .lang-zh, .overlay-container.en .lang-zh, .loader-container.en .lang-zh{ display:none}
.footer-container.en .footer-container-inner{ max-width:calc(29em);  }


.page-container{  position:absolute; width:100%; height:100%; min-height:900px; display:flex; justify-content:center; align-items:center; overflow:hidden; border:0px solid #ff0; background-image:url("../img/bg.jpg") ; background-size: cover;background-repeat: no-repeat; opacity:0; pointer-events:none }
.page-container-inner{  position:relative; margin:auto; width:90%; text-align:center; border:0px solid #f00;}

.page-container.active{ opacity:1; pointer-events:all; }

.footer-container{ position:fixed; width:100%; left:0; bottom:0; padding:.8em 0; line-height:1; background:#fff;  }
.footer-container-inner{  width:90%; max-width:calc(20em);  margin:auto; display:flex; justify-content:space-between }

.btw-button{ line-height:1; font-weight:500; padding:0.6em 0.8em; background: #FFB991;
background: linear-gradient(180deg,rgba(255, 185, 145, 1) 0%, rgba(255, 94, 0, 1) 50%); border:solid 1px;border-radius:10em; min-width:11em; letter-spacing:.1em; box-shadow: 0px .25em 0px 0px #D0D0D0,
  0 .25em 1em rgba(0,0,0,0.25);}


.en .form-container.done-reg .btw-button{ line-height:1.4; min-width:18em;  }


.btw-button.disabled{ pointer-events:none;   background:#B6B4B4; box-shadow: 0px .25em 0px 0px #808080;}
.btw-button.invisible{ pointer-events:none; opacity:0; }
/* common */




/* section */
.overlay-container{ position:fixed; width:100%; height:calc(100% - 0em);  top:0; left:0; background: rgba(227, 227, 227, 0.85);
background-blend-mode: screen; overflow:auto; transform:translate(-1000%,0); opacity:0;  transition:transform 0ms 400ms, opacity 200ms 300ms linear }
.overlay-container.active{ transform:translate(0,0); opacity:1; transition:transform 0ms 0ms, opacity 200ms linear}
.overlay-container-inner{  padding:2em 0em; width:100%; position:relative; min-height:calc(100% - 4em); display:flex; align-items:center; }

.overlay-close{ position:absolute; right:0; top:0; border-radius:1000px; border:3px solid #000; width:3.5em; height:3.5em; background:#fff; transform:translate(40%, -40%)}
.overlay-close > div{ position:absolute; top:50%; left:50%; background:#000; width:3px; height:66%; border-radius:100px; transform:translate(-50%, -50%) rotate(-45deg)}
.overlay-close > div:nth-child(2){ transform:translate(-50%, -50%) rotate(45deg)}

.overlay-container-body{ background:#00764d; border:3px solid #000; padding:2em 1em; margin:0em auto; border-radius:1.5em; width:calc(80% - 2em); max-width:640px; position:relative;   }
.overlay-container .tnc-button-inner{ pointer-events:none }


.overlay-panel-container{ border-radius: 2em; background:rgba(62, 188, 237, 0.95); height:auto; width:calc(100% - 6em); margin:auto; padding:4em 0 2em 0; text-align:center; transform:translate(0,100vh); transition:transform 400ms  }
.overlay-panel-container .btw-button{ display:block; margin:auto; margin-bottom:1em}

.overlay-container.active .overlay-panel-container{  transform:translate(0,0) }
/* section */



/* KV */

/* KV */


/* landing */
.page-container.home.inactive .home-intro-container, .page-container.avatar.tix .key-visual-rainbow-container, .page-container.avatar.tix .avatar-option-container{ display:none!important}


.home-intro-container{ position:absolute; width:90%; left:5%; top:auto; display:flex; text-align:center; align-items:center; }
.home-intro-txt-container, .home-intro-container-inner{  width:100%; max-width:1024px; margin:auto;}
.home-intro-txt-container{ margin-bottom:0em;}
.qrcode-container{ position:relative; margin:1em auto 0em auto; background:#fff; width:8em; height:8em}

.home-desktop-intro-container{ display:none; opacity:0; }

.page-container.home{ opacity:1; position:relative; background-image:url("../img/sky.jpg") }
.home-city-container{ background-image:url("../img/city.png"); background-position:top center; position:absolute; bottom:0; left:0; width:100%; height:46%; background-repeat:no-repeat; background-size:120% auto}

.home-intro-container-inner{  transform:translate(-50%, 0); position:absolute; bottom:50%; left:50%;}
.home-desktop-intro-container{  transform:translateY(1em); } 

.home-intro-txt-container > div{ position:relative; opacity:0; transform:translateY(1em)}
.home-intro-txt-container > div.qrcode-container{ transform:scale(0); }


.page-container.home.active .home-intro-txt-container > div{ opacity:1; transform:translateY(0); transition:opacity .4s 0ms linear, transform 500ms 0ms cubic-bezier(0,.48,.27,1)}
.page-container.home.active .home-intro-txt-container > div:nth-child(2){ transition-delay:100ms }
.page-container.home.active  .home-intro-txt-container > div:nth-child(3){ transition-delay:300ms }

 
.home-intro-container .btw-button{ transform:translateY(.5em); left:-100vw; position:relative; }
.page-container.home.active .home-intro-container{ opacity:1; transform:translateY(0); transition:opacity .5s 1200ms linear, transform 800ms 1200ms cubic-bezier(0,.48,.27,1)}
.qrcode-container{ transform:scale(0); }
.page-container.home.active .home-intro-container .btw-button{ left:0; opacity:1; transform:translateY(0); transition:left 0s 600ms linear, opacity .4s 600ms linear, transform 500ms 600ms cubic-bezier(0,.48,.27,1)}
/* landing */


.page-container.form{ background:rgba(227,227,227,0.85); top:0; left:0;  background-blend-mode: screen; transition:opacity 200ms 300ms linear } 
.page-container.form .page-container-inner{ background:#7ECFA0; box-shadow: 0 8px 0 0 #469D7D; border-radius:2.5em; width:90%; margin:auto; height:calc(100% - 10em); transform:translate(0,100vh); transition:transform 400ms 0ms;   }

.page-container.form.active{ transition:opacity 300ms linear }
.page-container.form.active .page-container-inner{ transform:translate(0,0); transition:transform 400ms 200ms }

/*
.page-container.form .page-container-inner > div:nth-child(1){ position:absolute; top:0; right:-5%;  width:60%; transform:translate(10%,-20%)}
.page-container.form .page-container-inner > div:nth-child(2){ position:absolute; bottom:0; left:-25%;  width:66%; transform:translate(0%,20%) }
.page-container.form .page-container-inner > div:nth-child(3){ position:absolute; top:15%; left:0%;  width:20%;  }
.page-container.form .page-container-inner > div:nth-child(4){ position:absolute; bottom:10%; right:0%;  width:30%; }
*/
/*
.form-container{ position:absolute; width:90%; left:5%; height:90%; top:5%; display:flex; align-items:center; text-align:center; justify-content:center; transform:translateX(100vw);  transition:transform 300ms; background-color: #333}
.form-container.active{ transform:translateX(0vw)}
.form-container.inactive{ transform:translateX(-100vw)}
*/
.form-deco{ position:absolute; background-position:center; background-size:contain; background-repeat:no-repeat; opacity:0; pointer-events:none; }
.form-deco.cake{ background-image:url("../img/cake.png"); width:30vw; height:38.1vw; bottom:0; left:6%;   animation:ani-float 3s linear infinite alternate;}
.form-deco.ballon{ background-image:url("../img/balloon.png"); width:20vw; height:29vw; top:3.5em; right:8%;  animation:ani-float 10s linear infinite alternate;}
.form-deco.cloud{ background-image:url("../img/cloud.png"); width:10vw; height:7.8vw; top:4.5em; left:55%; animation:ani-cloud 20s linear infinite alternate; }

.form-deco.cloud:nth-last-child(1){  width:6vw; height:4.7vw; top:6em; left:50%; animation-duration:18s }
.form-deco.cloud:nth-last-child(2){  width:15vw; height:11.7vw; top:25%; left:88%; animation-duration:17s}
.form-deco.cloud:nth-last-child(3){  width:12vw; height:9.36vw; top:70%; left:90%; animation-duration:19s}
.form-deco.cloud:nth-last-child(4){  width:25vw; height:19.5vw; top:calc(70% + 10vw); left:78%; animation-duration:18.5s }

@keyframes ani-cloud {
    0%   { transform:translateX(0%) }
	50%   { transform:translateX(-40%)}
	100% { transform:translateX(0%) }
}
@keyframes ani-float {
    0%   { transform:translateY(0%) }
	50%   { transform:translateY(-10%)}
	100% { transform:translateY(0%) }
}

.page-container.form.active .form-deco{ opacity:1; transition:opacity .4s linear}


.form-container.active{ left:5%; transform:translate(0,-50%);}
.form-container{ position:absolute; width:90%; margin:auto; height:auto; top:50%; display:flex; align-items:center; text-align:center; justify-content:center; transform:translate(0,0%);  transition:transform 300ms; left:-1000vw;   }


.form-title{ margin-bottom:1.5em}
.form-title .lang-zh{ letter-spacing:.1em }
.form-field{ background:#fff; border-radius:.5em; position:relative; padding:1em 0; width:17.5em;  margin-bottom:1.8em; box-shadow: 0 4px 0 0 #C5C5C5; border: 3px solid #F2F2F2; }
.form-field-placeholder{ pointer-events:none; line-height:1; text-align:left; margin-left:1em; letter-spacing:0.1em}
.form-field-placeholder.inactive{ opacity:0}
.form-field input{ position:absolute; width:calc(100% - 2em); top:50%; left:1em; margin:0!important; padding:0!important;   transform:translateY(-50%); font-size:inherit }

.form-error{ position:absolute; top:calc(100% + 0.7em); left:0; color:red; opacity:0;}

.form-field.error .form-error{ opacity:1; }
.form-field.error input, .form-field.error .form-field-placeholder{ color:red!important; }

.form-back-button{ position:absolute; top:2em; left:2em; width:2em; height:2em; background-image:url("../img/back-arrow.svg"); background-repeat:no-repeat; background-position:left center;  }


.dropdown-container{ position:absolute; top:calc(100% - 0.5em); border-radius:.5em; border-top-left-radius:0; border-top-right-radius:0; background:#fff; width:100%; left:0; text-align:left; z-index:1; padding:1em 0 1.5em 0; clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); pointer-events:none; transition:clip-path 400ms  }
.dropdown-container-inner{ width:calc(100% - 2em); margin:auto; overflow:scroll; max-height:11em; }
.dropdown-container-inner > button{ margin:.7em 0!important; display:block; width:100%; text-align:left; line-height:1.4 }
.dropdown-container-inner > button:nth-child(1){ margin-top:0!important}
.dropdown-container-inner > button:last-child{ margin-bottom:0!important}

.form-field.dropdown input{ pointer-events:none }
.form-field.dropdown.active .dropdown-container{  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); pointer-events:all;}

.form-field.dropdown:after{ position:absolute; content:''; right:1em; top:50%; transform:translateY(-50%); width:2em; height:2em; background-image:url(../img/down-btn.svg); background-size:contain; background-repeat:no-repeat }

.form-field.dropdown.inactive{ pointer-events:none; background:#E5E5E5  }
.form-field.dropdown.inactive:after{ width:0}
.form-field.dropdown.inactive .form-field-placeholder{ opacity:0 }

.checkbox-field{ text-align: left; padding-left:2em; margin-bottom:1.75em; position:relative; line-height:1; cursor:pointer; }
.checkbox-field:after{ position:absolute; content:''; left:0em; top:calc(50% + 1px); transform:translateY(-50%); width:1.25em; height:1.25em; border:2px solid #023A29; border-radius:2px}
.checkbox-field.active:after{ background-image:url(../img/checkbox.svg); background-size:80% auto; background-repeat:no-repeat; background-position:center}


.form-container.second .form-title > div { display:none}
.form-container.second .form-title > div.active{ display:block}

.form-container.done-reg .form-container-inner{ display:none}
.form-container.done-reg .form-container-inner.active{ display:block}


.form-container.regged .btw-button:last-child{ margin-top:1.5em}



/* cam */
.cam-container{  position:absolute; width:100%; height:100%; top:0; left:0; }
.cam-qr-container{  position:absolute; width:33%; padding-bottom:33%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); border-radius:0px; border:0px solid #000; background:#fff; background-size:450px auto; background-position:top center;   }
.cam-qr-container.active{ transform:translate(-50%,-50%);  transition:transform .4s 0s cubic-bezier(0,.45,.5,1) }
.cam-qr-container > img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
/* cam */



/* tix */
.page-container.home.tix .home-intro-container{ display:none; }
.page-container.home.tix .langs-container{ display:none; }
.page-container.home.tix .logo-container{ display:none; }

.page-container.avatar.tix .langs-container{ display:none; }
.page-container.avatar.tix .logo-container{ display:none; }


.page-container.ticket .page-container-inner{ background:#FFF; box-shadow: 0 8px 0 0 #D0D0D0, 0 8px 12px 0 rgba(0, 0, 0, 0.25);
 border: 8px solid #D0D0D0;  border-radius:2.5em; width:90%; margin:auto;   transform:translate(0,0vh); transition:transform 400ms 0ms;  padding:2em 0 1em 0   }
.page-container.ticket .page-container-inner > div{ margin:auto; width:95%;}

.page-container.ticket{ opacity:0;top:0; left:0; transform:translateX(-100vw); background:transparent; overflow:auto; display:block;   height:100%; }
.page-container.ticket.active{ opacity:1;  transform:translateX(0vw); transition:transform 0s}

.ticket-container{ position:relative;  width:100%; min-height:100%;  margin:auto; /*overflow:scroll*/}
.ticket-container-inner{ position:relative; width:100%;  padding:4em 0 4.5em 0; overflow:hidden; text-align:center;  }

.btw-tag{ margin:auto; border-radius: .6em; background:#007350; padding:.6em 2em; line-height:1; display:inline-block;  border:.25em solid #fff; filter:drop-shadow(0 .5em .5em rgba(50,50,50,0.4)); }


.tic-head{ position:relative; width:100%; padding-bottom:15.2%; background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; background-image:url("../img/tix-head.png"); }
.tic-tail{ position:relative; width:100%; }
.tic-body{ position:relative; width:99.8%;  background-repeat:repeat-y; background-size:100% auto; background-position:center; background-image:url("../img/tix-body.png"); text-align:center; padding-bottom:1em}

.round-bar{ border-radius:1em; max-width:85%; margin:0em auto 0 auto; padding:0.5em 1.5em;; line-height:1; text-align:center; display:inline-block; letter-spacing:0.05em  }
.round-bar.green{ background-color:#127450; }

.tix-intro{ line-height:1.4; margin:1em auto; }
 
.tix-qrcode-container{ width:50%; padding-bottom:50%; background:#eee; margin:1.5em auto; position:relative; }
.tix-qrcode-container > img{ position:absolute; width:100%; height:100%; top:0; left:0; transform:scale(0.9) }
.ticket-container.active .qrcode-container{  transform:scale(1); transition:transform 500ms 400ms cubic-bezier(0,.48,.27,1); }

.ticket-container .btw-button{ display: block; margin:1em auto; /*padding:0.7em 2em 0.8em 2em;*/ }
.btw-button.red{ background:#E81C2D;  box-shadow: 0px .25em 0px 0px #AA1E1E; position:relative;}
.btw-button.red > img{ position:absolute; width:100%; height:105%; top:0; left:0; opacity:0}


.en .ticket-container .btw-button{ line-height:1.4; min-width:18em;  }

#hammer-tix{ position:relative!important;   width:70vw; height:70vw; margin:0 auto 1em auto!important; transform:translate(0,0)}
/* tix */

.scanner-info-container{ position:fixed; left:0; top:0; width:100%; height:100%; text-align:center; display:flex; align-items:center; font-size:25px; color:#333; justify-content:center}

@media (max-aspect-ratio:1.2) {
.home-city-container{  background-size:auto 125%; }
}
 
@media only screen and (min-width:0px)  and (max-width:1023px) {
}
@media only screen and (min-width:0px)  and (max-width:768px) {
	.page-container{ min-height:165vw;  }
	
	.page-container.home{ background-image:url("../img/sky-m.jpg")}
	.home-intro-container{ height:100%}
	.home-intro-container-inner.mobile-ele{ bottom:47% }
	.home-city-container{ height:42%; }
	
	
	
	.logo-container >  div > img:nth-child(1){ width:5em; }
    .logo-container >  div > img:nth-child(3){ width:5.5em; }

    .logo-container >  div > img:nth-child(2){ margin:0 1em; width:1.5px; height:5.8em}
	
	.cloud-container > .bg-default:nth-child(1){ left:-4%; top:52%; width:18%; }
	.cloud-container > .bg-default:nth-child(2){ left:5%; top:62%; width:10%;}
	.cloud-container > .bg-default:nth-child(3){ right:-11%; top:-8%; width:18%; }
	.cloud-container > .bg-default:nth-child(4){ right:-5%; top:62%; width:10%; }
	.cloud-container > .bg-default:nth-child(5){ right:3%; top:65%; width:16%; }
	
}


@media only screen and (min-width:0px) and (max-width:479px) {
	html,body{  font-size:13px; }
	.logo-container {left:1em;top:1em}
	.logo-container >  div > img:nth-child(1){ width:2.3em; }
    .logo-container >  div > img:nth-child(3){ width:2.7em; }

    .logo-container >  div > img:nth-child(2){ margin:0 .6em; width:1px; height:3em}
}

@media only screen and (min-width:480px) and (max-width:768px) {
	html,body{  font-size:13px; }
}

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

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:15px; }
	 
	.page-container{   min-height:800px; }
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:16px; }
	.txt-hl{ font-size:1.3em }
	 
	.page-container{   min-height:900px; }
}
@media only screen and (min-width:1600px) {
	html,body{  font-size:17px; }
	.txt-hl{ font-size:1.4em }
}

@media only screen and (min-width:0px) and (max-width:400px) {
	.page-container.en .home-intro-txt-container.txt-hl br{ display:none}
}

.desktop-ele{ display:none }
.mobile-ele{ }

.three-container{ /*background:#eee;*/ margin:0 auto 1em auto; width:60%;  position:relative; top:auto;  } 

@media only screen and (min-width:769px) {  
	.desktop-ele{ display:block}
	.mobile-ele, .footer-container, .langs-container{ display:none}
	.home-desktop-intro-container{ position:absolute; width:90%; left:5%; top:6em; display:flex; text-align:center; align-items:center; height:calc(42% - 6em - 0vw);   }
	
}

.loader-container{ position:fixed; width:100%; height:100%; top:0; left:0; text-align:center; align-items:center; background:rgba(62, 188, 237, 0.9);display:none; z-index:99}
.loader-container-inner{ text-align:center; margin:auto; font-family: 'Inter', 'Noto Sans TC', sans-serif;  }
.loader-container.active{ display:flex}


.video-container{ position:fixed; width:100%; height:100%; top:0; left:0; overflow:hidden; }
.video-container > video{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}