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

html,body{  
	font-size:16px;
	font-weight:500;
	font-family:'Noto Sans TC','Arial', sans-serif;
	
	color:#fff; 
	background: linear-gradient(180deg, rgba(132,142,214,1) 0%, rgba(107,188,241,1) 12%, rgba(163,225,240,1) 32%);
	
 	width:100%; height:100%; margin:0; overflow:hidden;
	
	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:#111; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#ffffff; -webkit-text-fill-color:#ffffff !important;
}

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }
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:#464646; }
.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:1em; top:1em; width:3.5em; max-width:15vw }

.stars-container, .crosses-container, .papers-container{ position:absolute; width:100%; left:0; top:0; height:25%; pointer-events:none }
.star-container, .cross-container, .paper-container{ position:absolute; }
.star-container {  background:radial-gradient(#9b9b9b, #222); border-radius:1000px; mix-blend-mode:color-dodge; animation:ani-star 3s infinite alternate; filter:blur(0.1em); }
@keyframes ani-star{
	0%{ transform:scale(1); filter:blur(0.1em); }
	50%{ transform:scale(.9);  filter:blur(0.15em);  }
	100%{transform:scale(1); filter:blur(0.1em);  }
}

.crosses-container{  mix-blend-mode:screen; height:33%; }
.cross-container{ background-image:url("../img/cross.png"); background-size:contain; background-repeat:no-repeat; }

.papers-container{  height:100%; overflow:hidden}
.paper-container{ background-image:url("../img/paper-a.png"); background-size:contain; background-repeat:no-repeat; animation:ani-paper 11s infinite linear; width:2em; height:2em }

.paper-container.type-b{ background-image:url("../img/paper-b.png");  }
.paper-container.type-c{ background-image:url("../img/paper-c.png");  }
.paper-container.type-d{ background-image:url("../img/paper-d.png");  }

@keyframes ani-paper{
	0%{ transform:translateY(-100%) rotateX(0) rotateY(0); }
	100%{transform:translateY(calc(100vh)) rotateX(300deg) rotateY(720deg);  }
}
/* header */


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

.seveneleven{ position:absolute; left:40.5%; top:12%; width:19%; opacity:0;}
/* common */






/* KV */
.key-visual-container{ position:absolute; width:100%; height:100%; left:0%; top:0%; pointer-events:none; transform:scale(2) translateY(30%); transform-origin:bottom center;  }
.key-visual-container > div{ position:absolute; }
.key-visual-store-container{ opacity:0;  width:53%; padding-bottom:37.5%; left:23.5%; bottom:27%; transform:translate(0%,47%); transform-origin:bottom center}
.key-visual-carpet-container, .key-visual-carpet-clouds-container{ width:53%; left:23.5%;  top:calc(73% + 0%); height:50%;  background-size:cover; background-position:top center; }
.key-visual-carpet-container > div{ background-position:top center}

.key-visual-cloud-container{ height:80%; top:52%;  background-repeat:no-repeat; background-size:100% auto; background-position:top center;  transform-origin:center bottom; transform:scale(1.05); transition:transform 600ms 0ms cubic-bezier(0,.48,.27,1)}


.key-visual-rainbow-container, .key-visual-big-rainbow-container{ bottom:100%; padding-bottom:42.8%; width:100.6%; left:0%; background-position:center; position:absolute;   }
.key-visual-banner-container{ top:6%; height:16%; width:60%; left:20%; background-position:center   }


.key-visual-deco-container{ position:absolute; transition:left 500ms, top 500ms  }
.key-visual-deco-container > div{ width:100%; position:absolute; top:0; left:0;  transform:translate(-50%, -50%) scale(0) }

.key-visual-deco-container.sim-card{ width:6.5%; left:73.5%; top:calc(13.7%); }
.key-visual-deco-container.sim-card > div{ padding-bottom:142.7%; background-image:url("../img/8K_Sim.png"); transform:translate(-50%,-50%) scale(0) }

.key-visual-deco-container.ice-cream{ width:11.5%; left:85%; top:calc(33%); }
.key-visual-deco-container.ice-cream > div{ padding-bottom:136.8%; background-image:url("../img/8K_Icecream.png");  }

.key-visual-deco-container.tissue{ width:22%; left:89%; top:calc(60%); }
.key-visual-deco-container.tissue > div{ padding-bottom:89%; background-image:url("../img/8K_Tissue.png"); }

.key-visual-deco-container.cafe{ width:25%; left:71%; top:calc(77%); }
.key-visual-deco-container.cafe > div{ padding-bottom:128.4%; background-image:url("../img/8K_Cafe.png");  }

.key-visual-deco-container.beer{ width:25%; left:31%; top:calc(77%); }
.key-visual-deco-container.beer > div{ padding-bottom:89%; background-image:url("../img/8K_Beer.png");  }
 
.key-visual-deco-container.candy{ width:24%; left:15%; top:calc(59%); }
.key-visual-deco-container.candy > div{ padding-bottom:102.4%; background-image:url("../img/8K_Candy.png"); }

.key-visual-deco-container.chips{ width:14%; left:20%; top:calc(34%); }
.key-visual-deco-container.chips > div{ padding-bottom:128.4%; background-image:url("../img/8K_chips.png"); }

.key-visual-deco-container.bar{ width:9%; left:32%; top:calc(14%); }
.key-visual-deco-container.bar > div{ padding-bottom:119.7%; background-image:url("../img/8K_Bar.png"); transform:translate(-50%,-50%) scale(0) }
/* KV */


/* landing */
.page-container.home.active .key-visual-container{   transform:scale(1); transition:transform 1200ms cubic-bezier(0,.48,.27,1) }

.page-container.home.active .key-visual-store-container{ opacity:1; transform:translate(0,35%); transition:opacity 200ms 1000ms linear, transform 800ms 1000ms cubic-bezier(0,.48,.27,1), bottom 800ms 1000ms cubic-bezier(0,.48,.27,1)  }
.page-container.home.active .key-visual-store-container > div:nth-child(2){  animation:ani-float 2s 1200ms infinite alternate linear; }


.page-container.home .key-visual-carpet-container{ overflow:hidden; transform-origin:top center }
.page-container.home .key-visual-carpet-container > div{  transform:translateY(-100%) scale(0.2); transform-origin:top center; }
.page-container.home.active .key-visual-carpet-container{ opacity:1; transition:opacity 0s 1600ms, top 800ms 1000ms cubic-bezier(0,.48,.27,1); animation:ani-float 2s 1600ms infinite alternate linear; }
.page-container.home.active .key-visual-carpet-container > div{ transform:translateY(0%); transition:transform 1200ms 1700ms cubic-bezier(0,.48,.27,1)  }

.page-container.home .key-visual-rainbow-container, .key-visual-big-rainbow-container{ opacity:1; clip-path:circle(0%); -webkit-clip-path:circle(0%); transform:translate(-2%, 45%) scale(0.5);   }
.page-container.home.active .key-visual-rainbow-container{ clip-path:circle(100%);  -webkit-clip-path:circle(100%); transform:translate(-2%,40%) scale(1); transition:clip-path 800ms 1500ms, transform 800ms 1500ms cubic-bezier(0,.48,.27,1)  }
.page-container.home.active .key-visual-rainbow-container > div{  animation:ani-float 1s 1600ms infinite alternate linear; }


.page-container.home .key-visual-banner-container{ opacity:1; clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);  -webkit-clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);  }
.page-container.home.active .key-visual-banner-container{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:clip-path 300ms 1300ms cubic-bezier(0,.48,.27,1) }
.page-container.home.active .key-visual-banner-container > div{  animation:ani-float-ten 2s 1300ms infinite alternate linear; }

.key-visual-deco-container > div{ transition:opacity 0s 500ms, transform .6s .5s cubic-bezier(0,.48,.27,1)  } 
.page-container.home.active .key-visual-deco-container { opacity:1; animation:ani-float-em 2s 1800ms infinite alternate linear; }
.page-container.home.active .key-visual-deco-container > div {  transform:translate(-50%,-50%);  }

.key-visual-deco-container.sim-card > div{ transition-delay:1800ms;  }
.key-visual-deco-container.ice-cream > div{ transition-delay:1850ms; }
.key-visual-deco-container.tissue > div{ transition-delay:1925ms; }
.key-visual-deco-container.cafe > div{ transition-delay:2025ms; }
.key-visual-deco-container.beer > div{ transition-delay:2150ms; }
.key-visual-deco-container.candy > div{transition-delay:2300ms; }
.key-visual-deco-container.chips > div{ transition-delay:2500ms; }
.key-visual-deco-container.bar > div{ transition-delay:2800ms; }

.page-container.home.active .seveneleven { opacity:1; transition:opacity 400ms 1800ms linear }


@keyframes ani-float{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-1%);  }
}
@keyframes ani-float-five{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(5%);  }
}
@keyframes ani-float-ten{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-10%);  }
}
@keyframes ani-float-em{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-.5em);  }
}


.cloud-container{ position:absolute; left:0%!important; animation:ani-cloud-float 40s 0ms infinite linear; }
.cloud-container > div{ height:0; }
.cloud-container:nth-child(even) > div{ background-image:url("../img/checkin/cloud-a.png"); padding-bottom:57%;   }
.cloud-container:nth-child(odd) > div{ background-image:url("../img/checkin/cloud-b.png");  padding-bottom:50.3%; }

.cloud-container:nth-child(4n+1){ width:13%!important;  top:17%; animation-delay:-2s  }
.cloud-container:nth-child(4n+2){ width:16%!important;  top:8%; animation-delay:-34s }
.cloud-container:nth-child(4n+3){ width:7.2%!important; top:15%; animation-delay:-24s }
.cloud-container:nth-child(4n+4){ width:7.5%!important; top:7.5%; animation-delay:-6s }



@keyframes ani-cloud-float{
	0%{ transform:translate(-100%, 0%); }
	100%{transform:translate(100vw, 0%);  }
}

.page-container.home.panning .key-visual-container{  transform:scale(1) translateY(100%); transition:transform 1000ms 0ms cubic-bezier(.66,0,.8,.67)  }
.page-container.home.panning .seveneleven{ opacity:0; transform: translate(0%, 50%); transition:opacity 400ms 100ms linear, transform 400ms 100ms }
.page-container.home.panning .key-visual-deco-container > div {  transform:translate(-50%,-50%) scale(0); transition-delay:2s!important }



.page-container.home.charin .seveneleven{ opacity:0}
.page-container.home.charin .key-visual-container{  transform:scale(1); transition:transform 1000ms 0ms cubic-bezier(.66,0,.8,.67)  } 
.page-container.home.charin .key-visual-cloud-container{  transform:scale(1) translateY(12%);  }


.page-container.home.charin .key-visual-rainbow-container{  opacity:0;  clip-path:circle(100%);  -webkit-clip-path:circle(100%);   }


.page-container.home.charin .key-visual-store-container .key-visual-banner-container{ opacity:0 }

.page-container.home.charin .key-visual-store-container{ bottom:9.5%; transform:translate(0,20%) scale(0.55); transition:opacity 200ms 500ms linear, transform 800ms 500ms cubic-bezier(0,.48,.27,1)}
 
.page-container.home.charin .key-visual-carpet-container{ top:90.5%; transform:scale(0.55) translateY(0%);   transition:opacity 0s 700ms; animation:none; }

.key-visual-big-rainbow-container{ bottom:auto; width:42%; left:29%; top:5%; padding-bottom:19.3%; } 
.key-visual-big-rainbow-container > div{ background-position:top center}
.page-container.home.charin .key-visual-big-rainbow-container{ clip-path:circle(100%); -webkit-clip-path:circle(100%); transform:translate(-2%,0%) scale(1); transition:clip-path 800ms 1200ms, transform 800ms 1200ms cubic-bezier(0,.48,.27,1)  }

.page-container.home .key-visual-big-rainbow-container .key-visual-banner-container{ clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); -webkit-clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);}
.page-container.home.charin .key-visual-big-rainbow-container .key-visual-banner-container{ top:55%; height:30%; width:70%; left:15%;  transition:clip-path 300ms 1600ms cubic-bezier(0,.48,.27,1); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);  }
 
.page-container.home.charin .key-visual-deco-container > div {  transform:translate(-50%,-50%) scale(0.66); transition-delay:0!important }

.page-container.home.charin .key-visual-deco-container.sim-card{ width:9%; left:75%; top:calc(15%); } 

.page-container.home.charin .key-visual-deco-container.ice-cream{ width:11.5%; left:76%; top:calc(55%); }

.page-container.home.charin .key-visual-deco-container.tissue{ width:22%; left:82%; top:calc(70%); }

.page-container.home.charin .key-visual-deco-container.cafe{ width:25%; left:70%; top:calc(80%); }

.page-container.home.charin .key-visual-deco-container.beer{ width:25%; left:31%; top:calc(80%); }
 
.page-container.home.charin .key-visual-deco-container.candy{ width:24%; left:17%; top:calc(65%); }

.page-container.home.charin .key-visual-deco-container.chips{ width:15%; left:18%; top:calc(40%); }

.page-container.home.charin .key-visual-deco-container.bar{ width:11%; left:30%; top:calc(14%); }

.page-container.home.restart div{ transition-delay:0s!important; transition-duration:1000ms }
.page-container.home.restart .key-visual-big-rainbow-container{  transition-duration:200ms!important }
/* landing */



.page-container.flying{ transform:translateY(-100%); overflow:hidden; transition:transform 1000ms 0ms cubic-bezier(.66,0,.8,.67); }
.page-container.flying.active{ transform:translateY(0%);  ; }
.page-container.flying.active .cloud-container{ animation-name:ani-cloud; animation-duration:3s;  animation-iteration-count:5;  top:0; transform:translateY(-20vw); animation-fill-mode:forwards;   }
.page-container.flying.active .cloud-container.faster{ animation-duration:1.4s }

@keyframes ani-cloud{
	0%{ transform:translate(0%, -20vw); }
	100%{transform:translate(0%, 100vh);  }
}

.page-container-flying-bg{  position:absolute; width:100%; height:100%; top:0; left:0;background: linear-gradient(180deg, rgba(132,142,214,1) 0%, rgba(107,188,241,1) 12%, rgba(163,225,240,1) 32%); opacity:0; transition:opacity .5s 1.5s linear }

.page-container.flying.active .page-container-flying-bg{ opacity:1;   }
.page-container.flying.active .page-container-flying-bg.inactive{ opacity:0; transition:opacity .5s 0s linear  }

.page-container.flying .cloud-container:nth-child(4n+1){ width:13%!important;  left:-5%!important;  animation-delay:2.4s  }
.page-container.flying .cloud-container:nth-child(4n+2){ width:16%!important;  left:23%!important;  animation-delay:-1.2s }
.page-container.flying .cloud-container:nth-child(4n+3){ width:8%!important;  left:65%!important; animation-delay:1.7s }
.page-container.flying .cloud-container:nth-child(4n+4){ width:10%!important; left:95%!important;  animation-delay:3s }

.page-container.flying .cloud-container.larger:nth-child(even){ width:30%!important; left:80%!important;  animation-delay:-.5s; filter:blur(.3em); }
.page-container.flying .cloud-container.larger:nth-child(odd){ width:23%!important; left:8%!important;  animation-delay:1.5s; filter:blur(.2em)}


.page-container.flying .cloud-container.faster:nth-child(4n+1){  animation-delay:.3s  }
.page-container.flying .cloud-container.faster:nth-child(4n+2){ animation-delay:-0s }
.page-container.flying .cloud-container.faster:nth-child(4n+3){ animation-delay:.5s }
.page-container.flying .cloud-container.faster:nth-child(4n+4){ animation-delay:.7s }

.page-container.flying .cloud-container.larger.faster:nth-child(even){ animation-delay:-.2s; filter:blur(.4em); }
.page-container.flying .cloud-container.larger.faster:nth-child(odd){ animation-delay:.4s; filter:blur(.3em)}



.avatar-select-container{ position:absolute; width:44%;   left:28%; bottom:calc(68% - 25vw); height:44vw; transform:translateY(0%); }
.avatar-select-container-inner{ position:relative; width:100%; height:100%; background-color:rgba(255,0,0,0);  }
.avatar-select-ele{ position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); 
	animation-duration:.5s; animation-delay:0s; animation-timing-function:ease-out;  animation-fill-mode:forwards;  animation-iteration-count:3; border:0px solid blue
}

.avatar-select-ele > div{ position:absolute; width:100%; height:100%; top:50%; left:50%;  background-size:contain; background-repeat:no-repeat; background-position:center; animation:ani-avatar-float 3s 0ms infinite alternate linear;  }

.spaceship-logo{ background-repeat:no-repeat; background-size:contain; background-position:center; position:absolute; width:33%!important; top:33%!important; height:33%!important; transform:translateZ(10)!important; right:-23%!important; left:auto!important; z-index:1; background-image:url(../img/logo-frame.png); }
.spaceship-logo .bg-child{ transform:scale(0.7);}

@keyframes ani-avatar-float{
	0%{ transform:translate(-50%, -50%); }
	25%{transform:translate(-50%, -50.5%);  }
	50%{transform:translate(-50%, -50%);  }
	75%{transform:translate(-50%, -49.5%);  }
	100%{transform:translate(-50%, -50%);  }
}


.shipbase-container{ position:absolute; width:60%; padding-bottom:40.5%; left:20%; top:32%; transform:translateY(40vh); opacity:0;  } 
.shipbase-container > div{ position:absolute; width:100%; height:100%; top:0; left:0; background-image:url("../img/checkin/ship-base.png"); }
.shipbase-container.light{mix-blend-mode:screen; background-blend-mode:screen;  transform:translateY(1em); }
.shipbase-container.light > div{ background-image:url("../img/checkin/ship-base-light.png");  }

.shipbase-container.spot{ mix-blend-mode:screen; background-blend-mode:screen; width:89%; left:5.5%; padding-bottom:58.5%; bottom:68%; top:auto; }
.shipbase-container.spot > div{ background-image:url("../img/checkin/ship-base-spot.png?v=2"); transform:translateY(43%) }

.page-container.flying.active .shipbase-container{  animation:ani-float-shipbase 5s 1.5s 1 cubic-bezier(0,.48,.27,1); }
.page-container.flying.active .shipbase-container.light{   animation:ani-float-shipbase-light 4.2s 2.2s 1 cubic-bezier(0,.48,.27,1)!important;  }
.page-container.flying.active .shipbase-container.spot{  animation:ani-float-shipbase-spot 4s 2.4s 1 cubic-bezier(0,.48,.27,1)!important;   }


@keyframes ani-float-shipbase{
	0%{ transform:translateY(40vh); } 
	20%{ transform:translateY(0); opacity:1;  }
	60%{ transform:translateY(0vh); opacity:1;  }
	70%{transform:translateY(30vh) scale(0.6); opacity:0; }
	100%{transform:translateY(30vh) scale(0.6); opacity:0; }
}
@keyframes ani-float-shipbase-light{
	0%{ transform:translateY(1em); } 
	20%{ transform:translateY(0); opacity:1;  }
	55%{ transform:translateY(0vh); opacity:1;  }
	70%{transform:translateY(1em) scale(1); opacity:0; }
	100%{transform:translateY(1em) scale(1); opacity:0; }
}
@keyframes ani-float-shipbase-spot{
	0%{ transform:translateY(1em); } 
	20%{ transform:translateY(0); opacity:1;  }
	50%{ transform:translateY(0vh); opacity:1;  }
	60%{transform:translateY(1em) scale(1); opacity:0; }
	100%{transform:translateY(1em) scale(1); opacity:0; }
}



.page-container.flying.active .shipbase-container > div{ animation:ani-float 1.5s 3s infinite alternate linear;  }
.page-container.flying.active .shipbase-container.spot > div{ animation:ani-float-spot 1.5s 3s infinite alternate linear;  }
@keyframes ani-float-spot {
	0%{ transform:translateY(43%); }
	100%{transform:translateY(42%);  }
}

.avatar-select-container{ opacity:0; transform:translateY(5%)}
.page-container.flying.active .avatar-select-container{ opacity:1; transform:translateY(0%); transition:transform 500ms 2.3s, opacity 400ms 2.3s linear;  animation:ani-avatar 4.5s 4.5s 1 cubic-bezier(0,.48,.27,1); animation-fill-mode:forwards  }

@keyframes ani-avatar{
	0%{ transform:translateY(0); }  
	5%{ transform:translateY(10vw); }  
	70%{ transform:translateY(10vw); }  
	100%{transform:translateY(10vw) scale(0.8);  }
}


.tag-container{ position:fixed; left:4%; bottom:calc(5% + 25px); height:159px; display:flex; font-family: 'HWT'; }
.tag-container > img{ width:auto; height:100%;}
.tag-container > div{ width:auto; min-width:294px; background-image:url("../img/checkin/tag_02.png"); background-size:auto 100%; background-repeat:repeat-x; background-position:left center; position:relative; }
.tag-container > div > div:last-child{ position:absolute; top:50%; border-top:3px dashed white; width:100%; left:0%;}
.tag-container > div > div:nth-child(1){ position:absolute; bottom:58%;  left:-1%; font-size:28px; font-family: 'HWT'; }
.tag-container > div > div:nth-child(2){ position:absolute; top:58%; left:-1%; font-size:28px; font-family: 'HWT'; }


.tag-container{ /*clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);  transition:clip-path 400ms 800ms cubic-bezier(0,.48,.27,1);*/ opacity:0; transform:translateY(50%); transition:transform 400ms 800ms cubic-bezier(0,.48,.27,1), opacity 400ms 800ms linear}
.tag-container.active { /*clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:clip-path 400ms 2.75s cubic-bezier(0,.48,.27,1);*/ opacity:1; transform:translateY(0%); transition:transform 400ms 2.75s cubic-bezier(0,.48,.27,1), opacity 400ms 2.75s linear; }
/* avatar */

.skip-button{ position:fixed; left:0; top:0; width:10vw; height:10vw; }

@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; }
}


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

@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 }
}