@charset "UTF-8";


html,body{
	width:100%; height:100%; margin:0; position:relative; 
	color:#000;
	font-family:'Rubik','Noto Sans TC','Arial', sans-serif;
	font-weight:600;
	text-align:center; 
	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;
	font-size:15px;
	
	
}


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, select, input, textarea, img{  font-family:'Rubik','Noto Sans TC','Arial', sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0); }
h1,h2,h3,h4,h5{ font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }

p{ margin:0; }

select{ }
input{ background-color:transparent!important; border:none; color:#000; font-size:1.1em;  }
input:focus, textarea:focus, select:focus{ outline:none; color:#000;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, select:-webkit-autofill:hover {
    background-color:#ffffff!important;  background-clip:content-box !important;
	-webkit-box-shadow:0 0 0 9999px #ffffff inset; box-shadow:0 0 0px 9999px #ffffff inset;
	color:#000!important; -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:2em; margin-top:0; padding-bottom:1em; }
ol li{ margin-bottom:0em; list-style-position:outside;  }
ol ul{ margin-left:1.5em; list-style-position:outside; }
ol ul li{ list-style-type:disc!important;  }
ul li{ margin-bottom:1em;  }
.clear{ clear:both; }

/* text style */
.txt-display { font-family:'Rubik'; font-size:7em }
.txt-large{ font-size:2.5em; }
.txt-big{ font-size:1.3em; }
.txt-body { font-size:1.2em}
.txt-tiny { font-size:0.8em }
.txt-small { font-size:0.6em }
.txt-grey {color:#646464}
.txt-lightgrey { color:#C8C8C8 }
.txt-white { color:#ffffff }
.txt-blue { color:#005A8D }
.txt-green { color:#057850 }
.txt-red { color:#FF1455 }
.txt-lightpink { color:#F9C7D6 }
.txt-lightgreen{ color:#00eb9a; }
/* text style */

.clear {clear:both;}
.mobile-all-container{ position:relative; width:100%; max-width:767px; min-height:147vw; height:100%; margin:auto; background-image:url("../img/bg_sky.jpg"); background-size:100% auto; }
.mobile-content-container { position:relative; padding:5em 1.5em 1.5em 1.5em; width:auto; max-width:767px }

.header-container { position:fixed; width:calc(100% - 2em ); padding:1em; margin:auto; background-color:rgba(255, 255, 255, 0.9);  z-index:99 }
.hkgb-logo-container { position:relative; width:8em; height:auto; float:left; }
.hkgbw-logo-container{ /*position:absolute; left:0%; top:50%; transform:translate(-0%,-50%);*/ float:left; width:50%; text-align:left; height:3em;  }

.logo-image { width:100%; padding-bottom:37.5%; background-image:url("../img/logo.svg"); background-repeat:no-repeat; background-position:center; background-size:cover;  }

.menu-icon-container { position:relative; width:2.5em; height:2.5em; float:right; cursor:pointer; border:solid 2px #c8c8c8; border-radius:10px;  }
.menu-rectangle-container { position:relative; left:50%; top:50%; transform:translate(-50%,-50%); width:70%; padding-bottom:50%; }
.menu-rectangle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%; height:2px; background-color:#c8c8c8 }
.menu-rectangle:nth-child(1){ top:0; }
.menu-rectangle:nth-child(2){ top:50%; }
.menu-rectangle:nth-child(3){ bottom:0; top:auto }

.gotop-button-container { position:fixed; bottom:2.5em; right:5%; width:3.5em; height:3.5em; background-color:rgba(0, 235, 145, 0.85); border-radius:100px; z-index:98; cursor:pointer; box-shadow: 0 0 3px #C8C8C8, 0 0 5px #C8C8C8; display:none;}
.gotop-button-arrow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2em; padding-bottom:2em; background-image:url("../img/gotop.svg"); background-repeat:no-repeat; background-position:center; background-size:contain }
.gotop-button-container.white{ background-color:rgba(255, 255, 255, 0.85); }
.gotop-button-container.active{ display:block; }

.hyperlink{ display:inline-block;}
.hyperlink > a > div{ height:2px; background:#C8C8C8; width:calc(100% - 2px); }


/*front-page*/
.frontpage-tagline { position:relative; width:100%; padding-bottom:47.5%; margin:2em auto; background-image:url("../img/tagline.svg"); background-repeat:no-repeat; background-position:center; background-size:cover }

.frontpage-subheading { position:relative; width:100%; padding-bottom:10.8%; background-image:url("../img/headline.svg"); background-repeat:no-repeat; background-position:center; background-size:cover; }

.frontpage-mark { position:relative; margin:auto; width:100%; color:#4fac28; text-shadow:0px 5px #FFFFFF;}

.frontpage-body { position:relative; width:100%; letter-spacing:.1em }
.frontpage-button-container { position:relative; width:60%; margin:1.5em auto 0 auto;}
.button-inner-container { position:relative; width:90%; padding-bottom:23%; background:#4fac28; border-radius:10px; margin:0 auto 1.2em auto; cursor:pointer;  }

.button-inner-txt { position:absolute; width:90%; left:50%; top:50%; transform:translate(-50%,-50%); }
.frontpage-registered { position:relative; width:auto; text-align:center; margin:auto; /*text-decoration:underline; text-decoration-thickness:2px;*/ letter-spacing:2px; cursor:pointer}

.people-image { position:absolute; bottom:0%; left:6%; transform:translate(-50%,0%); width:38%; padding-bottom:70%; background-image:url("../img/character/man-a.png"); background-repeat:no-repeat; background-position:center; background-size:contain; overflow:hidden;   }
.people-image-right-container { position:absolute; bottom:0%; right:0%; transform:translate(0%,0%); width:22%; padding-bottom:70%;  overflow:hidden;  }
.people-image-right { position:absolute; bottom:0%; left:50%; transform:translate(-45%,0%); width:155%; height:155%; background-image:url("../img/character/girl-b.png"); background-position:bottom center; background-repeat:no-repeat; background-size:contain;  }

/*front-page*/


/*grey-area*/
.dotline-container{ height:3px; background-image:url(../img/dotline-grey.svg); background-repeat:repeat-x; background-size:8px 3px; background-position:left center; position:relative; width:100%; }
.greyarea-tagline-container > div{ z-index:1; }
.greyarea-tagline-container > .dotline-container{ z-index:0; margin-top:0.25em; }

.greyarea-all-container { position:relative; width:100%; background:#E6E6E6; border-bottom-left-radius:50px; border-bottom-right-radius:50px; z-index:1 }
.greyarea-content-contaier { position:relative; padding:2.5em 1.5em; width:auto; max-width:767px }
.greyarea-tagline-container { position:relative; width:100%; /*border-bottom:dotted 3px #646464;*/     }
.greyarea-tagline-left-character { position:relative; float:left; top:.5em; width:32%; padding-bottom:30%; background-image:url("../img/character/action-run.svg"); background-position:left bottom; background-repeat:no-repeat; background-size:contain;    }
.greyarea-tagline { position:relative; float:left; top:1em; width:36%; padding-bottom:25%; background-image:url("../img/introduction-heading.svg"); background-position:center center; background-repeat:no-repeat; background-size:contain;  }

.greyarea-tagline-left-character.right { position:relative; float:left; top:.5em; width:32%; padding-bottom:30%; background-image:url("../img/character/action-stand.svg"); background-position:right bottom; background-repeat:no-repeat; background-size:contain;    }

.greyarea-heading-paragraph { position:relative; width:100%; margin:2em auto; line-height:1.5; letter-spacing:0px  }
.greyarea-two-guide-container { position:relative; width:100%; margin:1em auto }
.greyarea-guidetour-container { position:relative; float:left; width:38.5%; height:auto }
.guidetour-img { position:relative; width:65%; padding-bottom:63.1%; margin:auto auto auto 1em; background-image:url("../img/character/guide-people.svg"); background-position:left center; background-repeat:no-repeat; background-size:contain; }
.guidetour-name { position:relative; width:100%; padding-bottom:23%; margin:.5em auto; background-image:url("../img/tour-guide.svg"); background-position:bottom center; background-repeat:no-repeat; background-size:contain; }
.guidetour-description { position:relative; width:110%; letter-spacing:0px; margin-left:-5%; }
.guide-tour-character-mos { position:relative; float:left; top:-1em; width:18%; margin:auto 2.5%; padding-bottom:51.5%; background-image:url(../img/character.svg); background-position:center center; background-repeat:no-repeat; background-size:contain;  }

.greyarea-guidetour-container.right .guidetour-img { width:65%; padding-bottom:68%; margin:-.4em .8em auto auto; background-image:url("../img/character/voice-people.svg"); background-position:right center; }
.greyarea-guidetour-container.right .guidetour-name { background-image:url("../img/voice-tour.svg");  }

.calendar-content-container { position:relative; width:100%; height:auto; margin:1em auto; }
.calendar-inner { position:relative; width:100%; padding:.5em 0;  }
.calendar-inner-month { position:relative; float:left; width:10%; top:.4em }
.calendar-inner-month-img {position:relative; width:80%; padding-bottom:50%; float:right; background-image:url(../img/september.svg); background-position:right center; background-repeat:no-repeat; background-size:contain }
.calendar-inner-date-ele { position:relative; float:left; width:76%; margin:auto 2%; justify-content:space-between; display:flex }
.calendar-inner-circle { position:relative; width:2em; height:2em; background:#0096FF; border-radius:50% }
.calendar-inner-circle.grey { background:#C8C8C8; }
.calendar-inner-circle.half { background:linear-gradient(to left, #0096FF 0%, #0096FF 50%, #00E6A0 50%, #00E6A0 100%);}
.inner-circle-date { font-family:'Rubik';  position:absolute; width:auto; left:50%; top:50%; transform:translate(-50%,-50%); }
.calendar-inner.second .calendar-inner-month { float:right; background-image:url(../img/october.svg) }
.calendar-inner.second .calendar-inner-date-ele { float:right }
.calendar-inner.bottom .calendar-inner-date-ele { float:none; margin:auto}
.calendar-cloud-container { position:absolute; top:0%; right:0%; transform:translate(30%,-40%); width:20%; height:25%; overflow:hidden}
.calendar-ele-cloud { position:absolute; right:-15%; width:100%; padding-bottom:42%; background-image:url(../img/cloud-b.svg); background-position:center center; background-repeat:no-repeat; background-size:contain; overflow:hidden }

.calendar-ele-cloud.left { position:absolute; width:20%; top:25%; left:-12%; padding-bottom:15%; background-image:url(../img/cloud-a.svg); }

.greyarea-divide-line { position:relative; width:100%; height:1px; border:none; border-top:3px dotted #646464; margin:2em auto;  }

.greyarea-building-tagline { position:relative; width:60%; padding-bottom:8%; margin:auto; background-image:url(../img/building-tagline.svg); background-position:center; background-repeat:no-repeat; background-size:contain }

.greyarea-building-column-container { position:relative; width:100%; margin:2em auto 0 auto }
.greyarea-building-column-container > div:nth-child(even) { margin-right:0 }

.building-inner { position:relative; width:45%; padding-bottom:45%; float:left; margin:0 10% 5% 0;  }
.building-circle-bg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; padding-bottom:100%; border-radius:1000px; background-color:#00E6A0 }
.building-inner-txt { position:absolute; left:50%; top:35%; transform:translate(-50%,-50%); width:75%; padding-bottom:30.2%; background-image:url(../img/building/build-aa.svg); background-position:center; background-repeat:no-repeat; background-size:contain }
.building-vector { position:absolute; left:50%; top:75%; transform:translate(-50%,-50%); width:115%; padding-bottom:29%; background-image:url(../img/building/building-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain; }

.building-inner-txt.b { top:25%; width:50%; padding-bottom:30.2%; background-image:url(../img/building/build-b.svg); }
.building-vector.b { left:50%; top:70%; width:38%; padding-bottom:64%; background-image:url(../img/building/building-b.svg); }
.building-circle-bg.b { background:linear-gradient(to left, #0096FF 0%, #0096FF 50%, #00E6A0 50%, #00E6A0 100%); }

.building-inner-txt.c { top:50%; background-image:url(../img/building/build-c.svg); }
.building-vector.c { left:10%; top:50%; width:16%; padding-bottom:90%; background-image:url(../img/building/building-c.svg); }

.building-inner-txt.d { top:50%; background-image:url(../img/building/build-d.svg?v=2); }
.building-vector.d { left:88%; top:70%; width:50%; padding-bottom:56.5%; background-image:url(../img/building/building-d.svg); }

.building-circle-bg.blue { background-color:#0096FF }

.building-inner-txt.e { width:75%; background-image:url(../img/building/build-e.svg); }
.building-vector.e { left:50%; top:80%; width:70%; padding-bottom:42%; background-image:url(../img/building/building-e.svg); }

.building-inner-txt.f { width:50%; background-image:url(../img/building/build-f.svg); }
.building-vector.f { left:50%; top:76.5%; width:88%; padding-bottom:63%; background-image:url(../img/building/building-f.svg); }

/*grey-area*/

/*instruction*/
.frontpage-instruction-all-container { position:relative; width:100%; max-width:767px; min-height:191vw; height:auto; margin:-50px auto;  background-image:url(../img/bg_sky2.jpg); background-position:center; background-repeat:no-repeat; background-size:120% auto; border-bottom-left-radius:50px; border-bottom-right-radius:50px; }
.frontpage-instruction-content { position:relative; padding:6em 1.5em 2em 1.5em; width:auto; max-width:767px; min-height:161vw; }
.instruction-tagline { position:relative; width:80%; padding-bottom:20%; margin:auto; background-image:url(../img/instruction.svg); background-position:center; background-repeat:no-repeat; background-size:contain }
.instruction-step-all-container { position:relative; width:100%; margin-top:2em;  }
.step-title-container { position:relative; float:left; width:28%; height:auto; margin-right:3em }
.step-title-container.left { float:right; width:40% }
.step-title-ele-circle { position:relative; width:2em; height:2em; top:-.8em; border-radius:100px; background:#F9C7D6 }
.step-title-inner-txt { position:absolute; top:50%; left:70%; transform:translate(-50%,-50%); width:100%; padding-bottom:25%; background-image:url(../img/step-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain }
.step-title-inner-txt.left { top:30%; left:65%; width:110%; padding-bottom:30%; background-image:url("../img/step-b.svg") }
.step-title-inner-txt.step-three{  background-image:url("../img/step-c.svg") }
.step-dotted-line { position:relative; float:right; width:calc(100% - 28% - 3em );  margin-top:1em; /*height:auto; border:none; border-top:3px dotted #FF1455;*/
	
height:3px; background-image:url(../img/dotline-red.svg); background-repeat:repeat-x; background-size:8px 3px; background-position:left center;
}
.step-dotted-line.left { float:left; width:calc(100% - 45% - 3em ); margin-top:0em; }
.step-inner-ele-container{ position:relative; margin-top:1em;  }
.step-vector-a { position:relative; float:left; margin:0 1.5em 0 1em; width:20%; padding-bottom:40%; background-image:url(../img/character/action-ball.svg); background-position:top center; background-repeat:no-repeat; background-size:contain;  }
.step-vector-a.left { float:right; margin:0; background-image:url(../img/character/run-action.svg); width:25%; padding-bottom:30%; transform:translateX(1em); margin-top:-1.2em;  }
.step-vector-c { position:relative; float:left; margin:0 1.5em 0 1em; width:20%; padding-bottom:40%; background-image:url(../img/character/action-stand-with.svg); background-position:top center; background-repeat:no-repeat; background-size:contain }

.step-content-text-container { position:relative; float:left; width:64%; margin-bottom:.5em }
.step-content-text-container.left { width:64%; float:right }
.step-content-text-point-inner { position:relative; float:left; width:20%; }
.text-point-circle { width:60%; padding-bottom:60%; border-radius:50px; background:#FFFFFF  }
.text-point-img { position:absolute; width:70%; padding-bottom:60%; left:-20%; top:5%; transform:translate(-50%-50%); background-image:url(../img/point.svg?v=1); background-position:center; background-repeat:no-repeat; background-size:contain  }

.text-point-wording { position:absolute; left:65%; top:50%; transform:translate(-50%,-50%); text-align:left; width:100%; 
	letter-spacing:1px; }
/*.text-point-wording.left { left:60%; width:90% }*/
.text-point-wording.second { top:70%; width:100%; left:65%;  }
.text-point-img.fifty {background-image:url(../img/fifty-points.svg); width:70%; padding-bottom:60%; }
.step-dotted-line-vertical { position:absolute; right:0; top:100%; width:45%; /*height:auto; border:none; border-top:3px dotted #FF1455;*/  transform:rotate(90deg);  transform-origin:top right; height:3px; background-image:url(../img/dotline-red.svg); background-repeat:repeat-x; background-size:8px 3px; background-position:left center; } 
.step-dotted-line-vertical.left { left:0; top:0%;  width:48%; transform-origin:top left; margin-top:-3em; transform:rotate(90deg) translateY(-3px);  } 
.step-man-image { position:absolute; width:15%; padding-bottom:28%; right:-10%; top:0; transform:translate(-50%,-50%); background-image:url(../img/character/man-b.png); background-position:top center; background-repeat:no-repeat; background-size:contain;  }

.instruction-step-all-container.second { margin-top:.5em;  }
.step-mission-container { position:relative; width:75%; padding-bottom:auto; margin-left:1em; margin-top:-0em; display:flex; justify-content:space-between; transform:translateY(0%)}
.step-mission-img { position:relative; width:25%; padding-bottom:25%; background-image:url(../img/mission-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain; margin-right:2% }
.step-mission-img.b { background-image:url(../img/mission-b.svg) }
.step-mission-img.c { background-image:url(../img/mission-c.svg) }
.step-mission-img.d { background-image:url(../img/mission-d.svg); margin-right:0%  }

.step-bottom-girl-container { position:absolute; top:110%; right:0%; transform:translate(7.5%,-39%); width:80%; padding-bottom:60%; overflow:hidden; border-bottom-right-radius:50px }
.bottom-girl-img { position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; background-image:url(../img/character/girl-a.png); background-position:top center; background-repeat:no-repeat; background-size:100% auto; }

.instruction-remark-container { position:absolute; bottom:1%; right:0%; width:60%  }
.remark-icon { position:relative; float:left; width:13%; padding-bottom:13%; background-image:url(../img/unknown-point.svg); background-position:top center; background-repeat:no-repeat; background-size:contain }
.remark-txt { position:relative;  float:left; width:80%; text-align:left; margin-left:5%;   }
/*instruction*/

/*award*/
.frontpage-awards-all-container { position:relative; width:auto; height:auto; padding:7em 1.5em 1.5em 1.5em; background:#FF4F80; border-bottom-left-radius:50px; border-bottom-right-radius:50px;  }
.frontpage-awards-content-container { position:relative; width:100%; height:auto  }
.awards-headline { position:relative; width:50%; padding-bottom:13.5%; margin:auto; background-image:url(../img/award.svg); background-position:top center; background-repeat:no-repeat; background-size:contain }

.awards-container{ position:relative; float:left; width:100%; padding-bottom:auto;  }
.awards-container.right{ float:right; margin-top:0em }
.awards-container.d { margin-top:-4em; width:50%; float:right;}
.awards-container.e { margin-top:-3em;}
.awards-container.f { margin-top:-1em;}

.awards-building-container { position:relative; float:left; width:100%  }
.awards-building { position:relative; background-image:url(../img/building/building-b.svg); background-position:center center; background-repeat:no-repeat; background-size:contain; float:left; }
.awards-building.a { margin-top:-2em; width:14.6%; padding-bottom:25%; margin-left:1.5em;  }
.awards-building.b { float:right; width:24%; padding-bottom:16%; margin-right:1.5em; background-image:url(../img/building/building-e.svg); background-position:bottom center; }
.awards-building-container.c { width:55%; margin-top:-5em  }
.awards-building.c { margin-top:.3em; width:32%; padding-bottom:50%; margin-right:3em; background-image:url(../img/building/building-d.svg); float:right  }
.awards-building.d { margin-left:3em; width:10%; padding-bottom:50%; background-image:url(../img/building/building-c.svg); }
.awards-building-container.e { position:relative; float:left; width:55% }
.awards-building.e { width:70%; padding-bottom:17%; margin-left:1em; background-image:url(../img/building/building-a.svg); }
.awards-building.f { float:right; width:30%; padding-bottom:16%; margin-right:1em; background-image:url(../img/building/building-f.svg); background-position:bottom center }

.awards-ele-bubble-container { position:relative; width:50%; float:left; height:3em; opacity:1; cursor:pointer; }
.awards-ele-bubble-container.right { float:right; }
.awards-container.d .awards-ele-bubble-container { position:relative; width:100%; height:3em; }
.awards-container.f .awards-ele-bubble-container { margin-top:-.2em }
.awards-white-bubble { width:100%; height:3em; position:absolute; background-color:#ffffff; border-radius:50px }

.awards-name { position:absolute; /*width:90%; padding-bottom:22.2%; left:50%; top:50%; transform:translate(-50%,-50%);*/ width:90%; height:80%; top:10%; left:5%;  background-image:url(../img/awards/awards-name-a.svg); background-position:center center; background-repeat:no-repeat; background-size:contain }
.awards-name.b {background-image:url(../img/awards/awards-name-b.svg);}
.awards-name.c {background-image:url(../img/awards/awards-name-c.svg);}
.awards-name.d {background-image:url(../img/awards/awards-name-d.svg);}
.awards-name.e {background-image:url(../img/awards/awards-name-e.svg);}
.awards-name.f {background-image:url(../img/awards/awards-name-f.svg);}

.awards-grey-bubble { position:absolute; width:100%; height:3em; background-color:rgba(100, 100, 100, 0.95); border-radius:50px; opacity:0; transition:opacity 300ms; }
.awards-remark { position:absolute; width:90%; text-align:center; left:50%; top:50%; transform:translate(-50%,-50%); letter-spacing:1px; }
/*.frontpage-awards-all-container .calendar-cloud-container { top:40%; right:0%; transform:translate(0%,-90%); width:20%; padding-bottom:5%; overflow:hidden} */

.awards-ele-bubble-container.hover .awards-grey-bubble{ opacity:1; }


.awards-building.right { float:right; width:40%; padding-bottom:20%; margin-left:0em; margin-right:1em; background-image:url(../img/building/building-e.svg); background-position:right center; }

.awards-gift-img-container { position:relative; float:right; margin-top:-2.5em; margin-right:1.1em; width:45%; height:auto; }
.awards-gift-img { position:relative; width:auto; padding-bottom:100%; background-image:url(../img/awards/awards-a.png); background-position:center; background-repeat:no-repeat; background-size:contain; }
.awards-gift-txt { position:relative; width:100%; margin-top:1em }
.awards-girl-center-img { position:absolute; left:50%; top:31%; width:45%; padding-bottom:50%; transform:translate(-50%,-50%);  background-image:url(../img/character/girl-c.png); background-position:center; background-repeat:no-repeat; background-size:contain;    }

.awards-gift-img-container.b { margin-top:-9em; margin-right:0em; width:40%; }
.awards-gift-img-container.b .awards-gift-img { width:100%; padding-bottom:100%; background-image:url(../img/awards/awards-b.png); }
.awards-gift-img-container.camera { margin-top:1em }
.awards-gift-img-container.camera .awards-gift-img { background-image:url(../img/awards/awards-c.png); width:85%; padding-bottom:85% }
.awards-gift-img-container.camera .awards-gift-txt { width:85%; margin-top:0em }
.awards-gift-img-container.speaker { margin-top:-6em }
.awards-gift-img-container.speaker .awards-gift-img { width:100%; padding-bottom:68%; background-image:url(../img/awards/awards-d.png)}
.awards-gift-img-container.speaker .awards-gift-txt { width:100%; margin-top:0em }

.awards-gift-img-container.bag { margin-top:-5em; margin-right:0em; width:50%; float:left  }
.awards-gift-img-container.bag .awards-gift-img { background-image:url(../img/awards/awards-e.png); width:100%; padding-bottom:71% }
.awards-gift-img-container.bag .awards-gift-txt { margin-top:-.5em}
.awards-gift-img-container.shoes { margin-top:2em }
.awards-gift-img-container.shoes .awards-gift-img { background-image:url(../img/awards/awards-f.png); width:100%; padding-bottom:47.4%}

.awards-man-container { position:relative; float:left; width:50%; padding-bottom:65%; margin-top:2em;  }
.awards-cloud-img { position:absolute; bottom:0; right:-2em; width:100%; padding-bottom:42.64%; background-image:url(../img/cloud-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain;} 
.awards-man-img { position:absolute; top:0; left:0; width:80%; padding-bottom:118%; background-image:url(../img/character/man-c.png); background-position:left center; background-repeat:no-repeat; background-size:contain; pointer-events:none; }

.awards-gift-img-container.coupon { float:left; width:50% }
.awards-gift-img-container.coupon .awards-gift-img { width:90%; padding-bottom:50%; background-image:url(../img/awards/awards-g.png); }
.awards-gift-img-container.coupon .awards-gift-txt { width:90% }
.awards-termcondition-txt { margin:2em auto 4em auto; /*text-decoration:underline; text-decoration-thickness:2px;*/ letter-spacing:2px }
.awards-cloud-container { position:absolute; right:0; top:3em; width:21%; padding-bottom:42.64%; background-image:url(../img/cloud-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain; }
.awards-cloud-img-a { position:absolute; top:5em; right:0; width:30%; padding-bottom:8%; background-image:url(../img/cloud-a.svg); background-position:center; background-repeat:no-repeat; background-size:contain; }
.awards-cloud-img-a.b { top:30%; right:none; left:-2em; background-position:left center;  }
.awards-cloud-img-a.c { position:absolute; top:92%; right:none; width:30%; padding-bottom:10%;}

.awards-gift-img-container .txt-lightpink.txt-tiny{ line-height:1}
/*award*/


/* KM */
/* text style */
.txt-display { font-family:'Rubik'; font-size:5em }
.txt-body { font-size:1.1em}
.txt-tiny { font-size:0.8em }
.txt-grey {color:#646464}
.txt-lightgrey { color:#C8C8C8 }
.txt-white { color:#ffffff }
.txt-blue { color:#005A8D }
.txt-green { color:#057850 }
.txt-red{ color:#ff1455!important; }
.txt-sharp-green{ color:#4fac28; }
/* text style */

.header-container { position:fixed; width:calc(100% - 2em); top:0; left:0; padding:1em; margin:auto; background-color:rgba(255, 255, 255, 0); transition:background 300ms;  }
.header-container.active{ background-color:rgba(255, 255, 255, 0.9);  }
.logo-image { width:100%; padding-bottom:calc(2em + 4px); background-size:contain; background-position:left center; }
.menu-icon-container {  width:2em; height:2em;  }
.hkgbw-logo-container{ height:calc(2.4em + 4px); margin-top: calc(-0.2em - 0px); }
.menu-rectangle-container { top:calc(50% + 1px); }
.menu-rectangle{  height:2px; }
.menu-rectangle:nth-child(2){ top:calc(50% - 1px); }

.menu-cover-container{ position:fixed; top:0; right:0; height:100%; width:100%; overflow:hidden; /*transition:width 0ms 400ms;*/  z-index:100; pointer-events:none;  }
.menu-back-container{ position:absolute; top:0; left:0; height:100%; width:100%;  }
.menu-container{ background:rgba(0,230,160,0.85); width:50%; height:100%; position:absolute; right:0; top:0; border-radius:1em; overflow:scroll; transform:translate(100%,0); transition:transform 400ms;  }

.menu-cover-container.active{ /*width:100%; transition:width 0ms 0ms;*/ pointer-events:all;  }
.menu-cover-container.active .menu-container{ transform:translate(0,0);  }

.menu-container-inner{ position:relative; margin:auto; display:flex; flex-wrap:wrap; align-items:stretch; height:100%; }
.menu-item{ margin-top:1.1em; cursor:pointer; letter-spacing:.2em  }
.menu-container-upper{ width:calc(100% - 2em); margin:1em auto;  }
.menu-container-upper .lightbox-close-container{ position:relative; right:auto; top:auto; border:2px solid #fff; float:right; }
.menu-container-upper .lightbox-close-container > div{ background:#fff}
 
.menu-container-lower{ color:#057850; width:90%; margin:auto;  position:absolute; bottom:1em; left:5%;}
.menu-container-lower > img{ margin-bottom:1em; }
.menu-container-lower .confirm-info-container{ width:90%; max-width:240px }
.menu-container-lower .confirm-info-container > div:last-child{  width:calc(100% - 6.5em);  }
.menu-container-lower .confirm-info-container:nth-child(2){ margin-bottom:0em; }
.menu-container-lower .confirm-info-container:nth-child(3){ margin-bottom:2em; margin-top:0.66em }
.propic-container{ border-radius:1000px; background:#fff; width:35%; padding-bottom:35%;  background-position:center; background-repeat:no-repeat; background-size:cover; margin:0 auto 1.5em auto }

/* HOME */
.mobile-content-container.home{ display:flex; position:relative; align-items:center; padding:0em 1.5em 0 1.5em; min-height:calc(100vh - 6.5em); height:100%; }
.home-container{ width:100%;  }

.people-image {  top:auto; bottom:0%; transform:translate(-50%,-5%); width:38%; padding-bottom:70%;    }
.people-image-right-container { top:auto; bottom:0%; right:0%; transform:translate(0%,-5%); width:22%; padding-bottom:70%; }
.people-image-right { bottom:0%; transform:translate(-45%,0%); width:155%; height:155%; }

.calendar-cloud-container { right:-1.5em; transform:translate(0%,-40%);  }
.calendar-ele-cloud { right:0;}
 
.building-vector.d { left:auto; right:-1.2em; top:auto; bottom:5%; width:calc(40% + .5em); padding-bottom:76.5%; background-position:center bottom;  transform:translate(0, -0%);  }

.step-bottom-girl-container { top:auto; bottom:0; right:0%; transform:translate(0%,0%); width:calc(100% - 1.5em - 25%);    } 
.bottom-girl-img {  left:auto; right:0; transform:translate(0%,-50%);  }
.instruction-remark-container { bottom:2em; width:92%; left:8%;  }
/*
.awards-cloud-container {  top:auto; bottom:8em; transform:translate(0%,0%); }
.awards-man-container {  top:auto; bottom:8em;  transform:translate(0%,-16%);  }
*/
.greyarea-all-container {  z-index:2 } 

.frontpage-instruction-content { border-bottom-left-radius:50px; border-bottom-right-radius:50px; background-image:url(../img/bg_sky2.jpg); background-position:center; background-repeat:no-repeat; background-size:120% auto; min-height:0; height:auto;  }
.frontpage-instruction-all-container { margin:-50px auto 0 auto; z-index:1; min-height:0; background:#FF4F80; border-bottom-left-radius:0px; border-bottom-right-radius:0px;  }
.frontpage-awards-all-container { position:relative; width:auto; height:auto; padding:5em 1.5em 1.5em 1.5em; background:#FF4F80; /*border-bottom-left-radius:0px; border-bottom-right-radius:0px;*/   }

.text-point-wording.second { width:100%; left:65%;  }
.step-vector-a.left {  transform:translateX(1em)}
/* HOME */






/* LIGHTBOX */
.lightbox-container{ position:fixed; top:0; left:0; width:100%; height:100%; overflow:scroll; display:none; z-index:101;   }
.lightbox-container.active{ display:block; }

.lightbox-container-inner{ position:relative; width:calc(90% - 2em); max-width:540px; min-height:calc(100% - 12em); height:auto; margin:auto; padding:6em 0;  display:flex; align-items:center; justify-content:center;  overflow:scroll; }
.lightbox-container-inner-inner{  position:relative;  border-radius:1em; background:rgba(255,255,255,0.95);  padding:2em 1em; width:calc(100%); margin:auto}
.lightbox-close-container{ position:absolute; right:1em; top:1em ; border:2px solid #646464; border-radius:.5em; cursor: pointer; width:2em; height:2em }
.lightbox-close-container > div{ position:absolute; height:2px; width:75%; left:50%; top:50%; transform:translate(-50%,-50%); background:#646464; }
.lightbox-close-container > div:nth-child(1){ transform:translate(-50%,-50%) rotate(-45deg); }
.lightbox-close-container > div:nth-child(2){ transform:translate(-50%,-50%) rotate(45deg); }

.coming-soon-char-container{ margin:1em auto 1em auto; width:28%; }
.congrats-char-container{ margin:1em auto 1em auto; width:69.4%; }


.switch-to-audio .coming-soon-char-container, .switch-to-tour .coming-soon-char-container, .fin-one .coming-soon-char-container{ width:50%; }


.lightbox-container.coming-soon .txt-tiny{ margin-top:0.5em}
.lightbox-container.fin-one .txt-tiny{ margin-top:0.5em}
/* LIGHTBOX */


.reg-success-button-visual-container{ width:90%; margin:0em auto;  }
.reg-success-button-visual-container > img{  transform:translateY(0.5em)}
.frontpage-button-container.reg-success {  margin:0 auto 0 auto;}



.mobile-all-container{  min-height:167vw!important;   }
.mobile-content-container {  background-image:url("../img/bg_sky.jpg"); background-size:cover;   }
.frontpage-tagline{ margin: 1em auto; width:85%; padding-bottom:40.38%; }
.frontpage-subheading{   width:85%; margin:auto; padding-bottom:9.18%; }

.frontpage-button-container { width:50%; min-width:200px;  } 
.button-inner-container { width:100%; max-width:320px;  padding-bottom:0%; padding:1.6em 0; line-height:1; margin-bottom:1em  }
.button-inner-container.red-button { background:#ff1455; }
.button-inner-container.blue-button{ background:#fff; color:#0096ff; }
.button-inner-container.green-button{ background:#fff; color:#00e6a0; }
.button-inner-container.grey-button{ background:#646464; color:#fff; }

.mobile-all-container.flexi{ max-width:none; min-height:100%!important; height:auto; background-size:cover; display:flex; align-items:center; justify-content:center    }
.mobile-all-container.flexi .mobile-content-container{ background-image:none;  }

.mobile-all-container.confirmed{  min-height:100%!important; height:auto; max-width:none; background:#0096ff!important  }
.mobile-all-container.confirmed.guide{  background:#00e6a0!important;  }
.mobile-all-container.confirmed .mobile-content-container{ height:auto; margin:auto;  width:100%; max-width:none; padding:0; background-image:none; }
.mobile-all-container.confirmed .mobile-content-upper-container{ background-image:url("../img/bg_sky.jpg"); background-size:cover; background-position:50% 90%; width:100%; border-bottom-right-radius:2em; border-bottom-left-radius:2em; padding:4.5em 0 1em 0; }
.mobile-all-container.confirmed .mobile-content-upper-container .mobile-content-upper-container-inner, .mobile-all-container.confirmed .mobile-content-lower-container .mobile-content-lower-container-inner{ position:relative; width:90%; margin:auto; max-width:640px; line-height:1.66; letter-spacing:0.1em; }
.mobile-all-container.confirmed .mobile-content-lower-container{ padding:1.25em 0 1em 0; position:relative; }

.mobile-all-container.confirmed .mobile-content-lower-container .txt-body{ margin-bottom:0.8em; } 
.mobile-content-lower-container{ align-items:stretch; display:flex; flex-wrap: wrap; flex-direction:column;  }
.mobile-content-lower-container > div{ flex-basis:100%;  }
.mobile-content-lower-container .frontpage-button-container{ align-items:stretch; }

.mobile-content-upper-container-inner > div:nth-child(1){ width:37%; margin:auto; }
.mobile-content-upper-container-inner > div:nth-child(3){ width:32%; margin:auto; }
.confirm-char-container{ margin:0 auto 0em auto; width:36%; }
.confirm-info-container{ display:flex; line-height:1.2;  width:15em; justify-content:space-between; margin:0.75em auto 0.5em auto; align-items:flex-start  }
.confirm-info-container:last-child{ margin-top:0; }

.confirm-info-container > div:first-child{ text-align:left;  }
.confirm-info-container > div:last-child{ text-align:right;   width:8em; letter-spacing:0; }

/* TNC */ 
.mobile-all-container.tnc{ background-color:#e7e7e7!important; border-bottom-right-radius:50px; border-bottom-left-radius:50px; }
.tnc .mobile-content-upper-container-inner{ padding:0.5em 0 2em 0; }
.tnc .mobile-content-upper-container-inner > div:nth-child(1){ width:90%; margin:auto; }
/* TNC */

.footer-container{ background:#fff; width:100%; position:relative; padding:2em 0;}
.footer-container-inner{ margin:auto; width:16em; max-width:calc(90% - 7em); }
.footer-headline-container{ width:49%; margin-bottom:0.2em; }
.footer-logos-container{ width:100%;  display:flex; justify-content:space-between; align-items:center;   }

.footer-logos-container > div:nth-child(1){ width:43.57%; }
.footer-logos-container > div:nth-child(2){ width:46.32%; }

.footer-space-container{ width:100%; height:50px;   background-color:#fff }
.footer-space-container-inner{ width:100%; height:50px; border-bottom-right-radius:50px; border-bottom-left-radius:50px; background-color:#e7e7e7 }

.mobile-all-container.confirmed.tnc .mobile-content-lower-container{ padding-bottom:0!important; }
.mobile-all-container.confirmed.tnc .mobile-content-container{ padding-bottom:0!important; }

@media only screen and (min-width:1024px) {	  
	.mobile-all-container.flexi .mobile-content-container {  padding:0em 1.5em; width:calc(90% - 3em); max-width:640px;  margin:7em auto 7em auto;  }
	.mobile-all-container.flexi .people-image-right-container{ overflow:visible;  }
	
	.frontpage-button-container { width:60%; } 
	.button-inner-container { padding:1.8em 0; }
	.button-inner-container, .lightbox-container{ font-size:1.1em }
	
	.txt-tiny{ font-size:.9em }
	.txt-body{ font-size:1.4em }
	
	.menu-item{ margin-top:2em;   }
	
	.guidetour-description {  letter-spacing:1px }
	
	.header-container{ font-size:21px; padding-top:3em; }
	/*.hkgbw-logo-container{   top:calc(1em + 50%);   }*/
	
	.mobile-all-container.confirmed .mobile-content-upper-container{ padding:8.5em 0 1em 0; }
	
	.lightbox-container{  overflow:hidden; position:absolute; }
}

@media only screen and (min-width:768px) and (max-width:1023px) {	
	/*.button-inner-container, .lightbox-container{ font-size:1.2em }
	.txt-tiny{ font-size:1.1em }
	.txt-body{ font-size:1.5em }
	*/
	.header-container{ font-size:17px; padding-top:2.5em; }
	/*.hkgbw-logo-container{ top:calc(.75em + 50%);; height:2.5em; width:30%;  }*/
}

@media only screen and (min-width:768px) {	
	html,body{ background-image:url(../img/landscape.jpg); background-size:cover; background-position:center; min-height:1060px;  }
	
	.mobile-all-container.flexi{ min-height:0!important;}
	.mobile-all-container.confirmed{ min-height:0!important;}
	
	.header-container { position:absolute; }
	.menu-cover-container{  position:absolute; height:960px; top:calc(50% - 480px); right:calc(50% - 240px);  width:480px; background:rgba(0,0,0,0) }
	 
	.menu-container-upper .lightbox-close-container{   right:0.5em; top:2.4em ; width:2.8em; height:2.8em }
	.menu-item:nth-child(3){ margin-top:3em;}
	
	.menu-container{ border-bottom-right-radius:0em;   }
	.menu-container-lower{ bottom:2em; }
	
	.gotop-button-container { position:fixed; }
	.gotop-button-container { right:calc(50% - 240px + 24px); bottom:calc(50% - 480px + 1.5em) }
	
	.mobile-all-container{ width:480px; height:960px!important; min-height:0!important; overflow:scroll; border-radius:10px; }
	.mobile-mask-container{ background-image:url("../img/iphonecase.svg"); background-size:contain; background-position:center; background-repeat:no-repeat;  width:527px; height:1055px; pointer-events:none; z-index:101; }
	
	.mobile-all-container, .mobile-mask-container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
	
	.mobile-content-container.home{  min-height:calc(100% - 6.5em); height:100%; }
	  
	.lightbox-container-inner{ width:calc(480px - 2em);    }
	 
	.mobile-all-container.confirmed .mobile-content-lower-container{ padding:1.5em 0 2em 0; }
	
	.mobile-content-upper-container-inner > div:nth-child(1){ width:52%;  }
	.mobile-content-upper-container-inner > div:nth-child(3){ width:44%; }
	.confirm-char-container{ width:50%; margin:1em auto}
	.confirm-info-container{ margin:1.5em auto 1em auto; }
	 
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	html,body{   min-height:760px;  }
	.mobile-all-container{ width:360px!important; height:720px!important;   }
	.mobile-mask-container{ width:395px; height:790px; }
	.menu-cover-container{  height:720px; top:calc(50% - 360px);  right:calc(50% - 180px);  width:360px; }
	
	.menu-container-upper .lightbox-close-container{  right:0.25em; top:1.33em ; width:2.26em; height:2.26em }
	.menu-item:nth-child(3){ margin-top:2.5em;}
	
	.gotop-button-container { right:calc(50% - 180px + 18px); bottom:calc(50% - 360px + 1.5em) }
	
	.lightbox-container-inner{ width:calc(360px - 2em);  }
	
	.mobile-all-container.confirmed .mobile-content-upper-container{ padding:7em 0 1em 0; }
	
	.greyarea-guidetour-container {  width:39%;   }
	.guide-tour-character-mos { width:17%; margin:auto 2.5%;   }
	.guidetour-description {  letter-spacing:0px }
}



@media only screen and (min-width:0px) and (max-width:767px) {	
	.mobile-all-container{ min-height:162vw!important;  }
	
	.menu-container-inner{ min-height:143vw;}
}


@media only screen and (min-width:0px) and (max-width:374px) {	
	.txt-display {  font-size:3.6em }
	.txt-body { font-size:0.9em}
	.txt-tiny { font-size:0.8em }
	.txt-large{ font-size:2em; }
	.button-inner-container, .lightbox-container{ font-size:0.9em!important }
	.mobile-all-container{ min-height:160vw!important;  }
	
	.text-point-wording.txt-tiny{ font-size:0.7em; letter-spacing:0px}
}

@media only screen and (min-width:375px) and (max-width:767px) {	
	.txt-display {  font-size:4.5em }
	
	.greyarea-guidetour-container {  width:37.5%;   }
	.guide-tour-character-mos { width:20%; margin:auto 2.5%;   }
	.guidetour-description {  letter-spacing:1px }
	.awards-gift-img-container.b  { margin-top:-6em; }
	.awards-girl-center-img{ top:31%; left:50%;  width:45%; padding-bottom:50%;  }
}

@media only screen and (min-width:0px) and (max-width:374px) {
	.mobile-content-container { padding:3em 1.5em 1.5em 1.5em; }	
	.awards-gift-img-container.ipad { margin-right:1.2em; width:35%; margin-top:-2em; }	
	.awards-gift-img-container.b  { margin-top:-3em; }
	.awards-container.c { margin-top:-5em }
	.awards-building-container.c { margin-top:-0em } 
	.awards-gift-img-container.camera { width:40% }
	.awards-container.d { margin-top:-1em }
	.awards-gift-img-container.speaker { margin-left:2.5em; margin-top:-2.5em }
	.awards-gift-img-container.speaker .awards-gift-img { width:80%; padding-bottom:58%; margin:auto  }
	.awards-container.e	{ margin-top:-4em }
	.awards-container.f { margin-top:1em }
	.awards-gift-img-container.shoes { margin-top:0em  }
	.awards-man-container {   margin-top:-3em  }
	.step-mission-container { margin-top:.5em }
	.awards-girl-center-img{ top:30%; }
}
@media only screen and (min-width:768px) and (max-width:1023px) {
	.mobile-content-container { padding:3em 1.5em 1.5em 1.5em; }	
	.awards-gift-img-container.ipad { margin-right:2.5em; width:35%; margin-top:-2em; }	
	.awards-gift-img-container.b  { margin-top:-4em; }
	.awards-container.c { margin-top:-5em }
	.awards-building-container.c { margin-top:-0em } 
	.awards-gift-img-container.camera { width:40% }
	.awards-container.d { margin-top:-1em }
	.awards-gift-img-container.speaker { margin-left:2em; margin-top:-2.8em }
	.awards-gift-img-container.speaker .awards-gift-img { width:80%; padding-bottom:58%; margin:auto  }
	.awards-container.e	{ margin-top:-4em }
	.awards-container.f { margin-top:1em }
	.awards-gift-img-container.shoes { margin-top:-1em  }
	.awards-gift-img-container.bag { margin-top:-7em; }
	.awards-man-container {  margin-top:-3em  }
	
	.awards-girl-center-img{ top:29%; }
}
/* KM */