:root {
  --white: white;
  --004b92: #004b92;
  --hot-pink: #ff5aa9;
  --00b4ed: #00b4ed;
  --dcf2ff: #dcf2ff;
  --dark-slate-blue-2: #33528f;
  --2c3d61: #2c3d61;
  --badff5: #badff5;
  --transparent: rgba(255, 255, 255, 0);
  --white-2: #fcfcfc;
  --ef8340: #ef8340;
  --dark-slate-grey: #3e4651;
  --royal-blue: #2a5aa5;
  --dark-slate-blue-3: #3c3d4f;
  --turquoise: #86ead7;
  --ec661b: #ec661b;
  --midnight-blue: #28284b;
  --dark-slate-blue: #1c4597;
  --alice-blue: #e1e9f6;
  --gainsboro: #ddd;
  --medium-turquoise: #81ddde;
}

.w-form-formradioinput--inputType-custom {
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

body {
  background-color: var(--white);
  color: var(--004b92);
  letter-spacing: 1px;
  font-family: Noto Sans TC, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: 900;
  line-height: 120%;
}

h2 {
  letter-spacing: 6px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 120%;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--hot-pink);
  text-decoration: none;
  transition: color .5s;
}

a:hover {
  color: #9c064e;
}

.header {
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0);
  margin-bottom: 90px;
  display: block;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: 50%;
  right: auto;
  transform: translate(-50%);
}

.container {
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}

.header-bg {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  overflow: hidden;
  box-shadow: 5px 3px 12px rgba(0, 0, 0, .4);
}

.header-wrap {
  width: 100%;
}

.img-full {
  width: 100%;
  display: block;
}

.nav-menu {
  flex-wrap: nowrap;
  align-items: center;
  display: flex;
}

.nav-item {
  padding-left: 20px;
  padding-right: 20px;
}

.nav-link {
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  display: block;
  position: relative;
}

.nav-link:hover {
  color: #fff;
}

.nav-link-txt {
  word-break: keep-all;
  padding-top: 10px;
  padding-bottom: 10px;
}

.section-content {
  position: relative;
  overflow: hidden;
}

.home-content-b {
  width: 100vw;
  height: 100vh;
  background-color: #5573a5;
  overflow: auto;
}

.zoom-mask {
  overflow: hidden;
}

.lobby-img-b, .lobby-bg-b {
  position: relative;
}

.lightbox-100 {
  display: block;
}

.lightbox-100.v-booth-poster {
  border: 2px solid var(--white);
  transition: border-color .5s, color .5s;
}

.lightbox-100.v-booth-poster:hover {
  border-width: 2px;
  border-color: var(--00b4ed);
}

.icon-current-vid-hover {
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: url('../images/lobby-icon-play-hover2x_1lobby-icon-play-hover@2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.lobby-link-hover {
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.btn-questionaire-b {
  z-index: 998;
  margin-bottom: 160px;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
}

.btn-questionaire-b.booth {
  margin-right: 300px;
}

.img-questionaire {
  width: 100%;
  margin-bottom: -20px;
  display: block;
}

.section-footer {
  z-index: 997;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.footer-wrap {
  z-index: 1000;
  color: var(--white);
  letter-spacing: 2px;
  justify-content: space-between;
  align-items: center;
  padding: 13px 50px 10px;
  font-size: 14px;
  line-height: 120%;
  display: flex;
  position: relative;
}

.footer-deco {
  width: 134px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.footer-deco.v-right {
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
}

.footer-l-b {
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.footer-l-title {
  border-right: 1px solid var(--white);
  color: rgba(255, 255, 255, .8);
  margin-right: 15px;
  padding-right: 15px;
}

.footer-l-data-col {
  margin-bottom: -5px;
  font-weight: 700;
}

.footer-l-data {
  margin-bottom: 5px;
}

.footer-r-b {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.footer-link {
  color: var(--white);
  font-weight: 700;
}

.footer-link:hover {
  color: var(--00b4ed);
}

.footer-link-separator {
  width: 2px;
  height: 20px;
  background-color: var(--00b4ed);
  margin-left: 15px;
  margin-right: 15px;
}

.home-drag-b {
  display: none;
}

.popup-b {
  z-index: 4000;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: rgba(51, 82, 143, .5);
  display: none;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.popup-b.v-lobby {
  opacity: 1;
  display: block;
}

.pop-important-note {
  width: 100%;
  display: none;
}

.popup-wrap {
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

.common-pop-box {
  background-color: var(--dcf2ff);
  border-radius: 15px;
  padding: 20px;
  position: relative;
}

.common-popup-content {
  max-height: 65vh;
  border: 4px solid var(--dcf2ff);
  background-color: var(--white);
  border-radius: 10px;
  padding: 25px;
  position: relative;
  overflow: auto;
  box-shadow: 0 6px 20px rgba(0, 157, 207, .3);
}

.common-popup-content.v-questionaire {
  background-image: url('../images/questionaire-bg.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 486px;
}

.section-heading-b {
  color: var(--dark-slate-blue-2);
  margin-bottom: 15px;
}

.section-heading-wrap {
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.section-heading-icon-b {
  z-index: 1;
  width: 90px;
  flex: none;
  position: relative;
}

.section-heading-txt-b {
  z-index: 0;
  border-bottom: 2px solid var(--2c3d61);
  border-radius: 0 0 0 35px;
  flex: 1;
  margin-left: -28px;
  padding-bottom: 15px;
  padding-left: 40px;
  position: relative;
}

.section-heading-txt {
  z-index: 1;
  color: var(--white);
  position: relative;
}

.important-note-item {
  margin-bottom: 50px;
}

.ordered-list {
  margin-bottom: 0;
  padding-left: 20px;
  list-style-type: decimal;
}

.ol-item {
  color: var(--004b92);
  margin-bottom: 8px;
  padding-left: 10px;
  font-weight: 400;
}

.btn-pop-close {
  z-index: 4000;
  width: 40px;
  height: 40px;
  background-image: url('../images/icon-close.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
}

.icon-close {
  width: 40px;
  height: 40px;
  background-image: url('../images/pop-close2x_1pop-close@2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 7px;
  margin-left: 14px;
}

.pop-welcome {
  width: 100%;
  display: block;
}

.welcome-item {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.welcome-photo-b {
  width: 170px;
  border-radius: 20px 20px 0;
  flex: none;
  margin-right: 25px;
  padding: 10px;
}

.welcome-txt-b {
  flex: 1;
}

.common-title-txt {
  z-index: 1;
  color: var(--white);
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
  position: relative;
}

.common-popup-content-b {
  max-height: 50vh;
  color: var(--2c3d61);
  border-radius: 15px;
  padding: 25px;
  font-weight: 300;
  line-height: 140%;
  position: relative;
  overflow: auto;
}

.welcome-tip {
  width: 10px;
  height: 20px;
  background-image: url('../images/welcome-bubble-icon.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 25px;
  margin-left: -10px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.pop-privacy, .pop-questionaire {
  width: 100%;
  display: none;
}

.form-b {
  margin-bottom: 0;
}

.hide {
  display: none;
}

.questionaire-title-b {
  letter-spacing: 1px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 900;
  line-height: 120%;
  display: flex;
}

.questionaire-title {
  flex: 1;
  margin-top: 5px;
  margin-left: 15px;
}

.questionaire-tip {
  width: 20px;
  height: 10px;
  background-image: url('../images/questionaire-tip-top.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: -10px;
  margin-left: 20px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.questionaire-radio-gp-b {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: -10px;
  margin-left: -10px;
  margin-right: -10px;
  display: flex;
}

.questionaire-radio-item {
  width: 50%;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.questionaire-radio-item.v-100 {
  width: 100%;
}

.form-radio-btn-field {
  color: var(--004b92);
  cursor: pointer;
  margin-bottom: 0;
  padding-left: 0;
  font-weight: 400;
}

.radio-btn-content {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.radio-btn-content.v-table {
  justify-content: center;
}

.radio-btn-circle {
  width: 20px;
  height: 20px;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  border-radius: 20px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.radio-btn-circle-active {
  width: 10px;
  height: 10px;
  opacity: 0;
  background-image: linear-gradient(45deg, #ec661b, #ef8340 50%, #f39c61);
  border-radius: 50%;
  transition: all .5s;
  transform: scale(0);
}

.radio-btn-txt {
  margin-left: 10px;
}

.radio-btn-txt.v-table {
  display: none;
}

.other-field {
  flex: 1;
  margin-top: 10px;
  margin-left: 30px;
}

.textfield {
  height: 40px;
  border: 1px solid var(--badff5);
  color: var(--004b92);
  border-radius: 5px;
  margin-bottom: 0;
  padding: 10px;
  font-size: 16px;
  line-height: 120%;
  transition: color .5s;
}

.textfield:focus {
  border-color: var(--00b4ed);
}

.textfield::-ms-input-placeholder {
  color: rgba(78, 96, 132, .5);
}

.textfield::placeholder {
  color: rgba(78, 96, 132, .5);
}

.textfield.v-other {
  margin-top: 10px;
}

.questionaire-btn-b {
  justify-content: flex-end;
  align-items: center;
  margin-top: 25px;
  display: flex;
}

.questionaire-btn-item {
  margin-left: 20px;
}

.btn-slider-arrow {
  width: 50px;
  height: 50px;
  background-image: url('../images/questionaire-btn-next.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  transition: opacity .5s, background-color .5s, color .5s;
  display: block;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.btn-slider-arrow:hover {
  opacity: .5;
}

.btn-slider-arrow.arrow-prev {
  background-image: url('../images/questionaire-btn-pre.svg');
}

.btn-slider-arrow.v-disabled {
  opacity: .3;
}

.form-table-row {
  border-bottom: 1px solid var(--white);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
}

.form-table-row.v-top {
  border-bottom-style: none;
}

.form-table-col-txt {
  width: 40%;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.form-table-col-txt.v-other {
  width: 100%;
}

.form-table-col-radios {
  width: 60%;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.form-radio-col {
  text-align: center;
  flex: 1;
  font-weight: 700;
}

.q-num {
  width: 20px;
  font-weight: 700;
}

.q-txt-b {
  flex: 1;
}

.q-txt {
  font-weight: 700;
}

.form-pref-list {
  margin-bottom: -10px;
}

.form-pref-item {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.form-pref-col.col-field {
  width: 100px;
}

.form-pref-col.col-title {
  flex: 1;
  padding-left: 25px;
}

.form-checkbox-field {
  padding-left: 0;
  font-weight: 400;
}

.checkbox-btn-content {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.checkbox-btn-box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.checkbox-tick {
  width: 15px;
  height: 13px;
  opacity: 0;
  background-image: url('../images/checkbox-checked.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  transition: all .5s;
  transform: scale(0);
}

.textarea {
  width: 100%;
  max-width: 100%;
  min-height: 250px;
  min-width: 100%;
  border: 1px solid var(--badff5);
  color: var(--004b92);
  border-radius: 15px;
  margin-bottom: 0;
  padding: 10px;
  font-size: 16px;
  line-height: 120%;
  transition: color .5s;
}

.textarea:focus {
  border-color: var(--00b4ed);
}

.textarea::-ms-input-placeholder {
  color: rgba(78, 96, 132, .5);
}

.textarea::placeholder {
  color: rgba(78, 96, 132, .5);
}

.btn-form-submit {
  letter-spacing: 2px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 40px;
  padding: 15px 30px;
  font-weight: 700;
  transition: color .5s;
}

.btn-form-submit:hover {
  color: var(--badff5);
}

.form-success {
  text-align: left;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
}

.form-success-message {
  color: var(--2c3d61);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
}

.section-banner {
  z-index: 10;
  margin-bottom: 30px;
  position: relative;
}

.inner-banner-b {
  text-align: center;
  background-image: url('../images/inner-banner-v03-2x.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 160px;
  padding-bottom: 160px;
}

.inner-page-heading {
  color: var(--white);
  letter-spacing: 10px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

.inner-content-top {
  z-index: 5;
  background-color: var(--white);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.inner-content-top.v-norm {
  position: relative;
  top: 0;
}

.shortcut-btn-b {
  min-height: 52px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
}

.shortcut-item {
  margin-left: 20px;
}

.btn-common {
  background-color: var(--004b92);
  color: var(--white);
  border-radius: 40px;
  padding: 2px;
  font-weight: 500;
  line-height: 120%;
  transition: background-color .5s, color .5s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.btn-common:hover, .btn-common.w--current {
  background-color: var(--transparent);
  color: var(--white);
}

.btn-common-content {
  z-index: 1;
  padding: 7px 20px;
  transition: border-color .5s, background-color .5s;
  position: relative;
  overflow: hidden;
}

.relative {
  position: relative;
}

.btn-common-hover {
  border: 1px solid var(--white);
  opacity: 0;
  border-radius: 40px;
  transition: opacity .5s;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.inner-content-top-edge {
  height: 25px;
  background-color: var(--white);
  display: none;
}

.inner-content-b {
  padding-bottom: 140px;
  position: relative;
}

.section-div {
  margin-bottom: 30px;
  position: relative;
}

.content-bg {
  height: 280px;
  background-image: linear-gradient(#00b4ed, rgba(0, 180, 237, 0));
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.ei-intro-b {
  padding-top: 40px;
}

.ei-intro-col {
  flex: 1;
  position: relative;
}

.ei-intro-col.col-txt {
  margin-right: -150px;
}

.ei-intro-col.col-img {
  width: 35%;
  max-width: 650px;
  flex: 0 auto;
  margin-top: -80px;
}

.ei-intro-box {
  border-bottom: 1px solid var(--white);
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 0 150px 15px 20px;
  display: flex;
}

.ei-intro-box.v-plan {
  display: block;
}

.ei-intro-title {
  background-color: var(--white);
  color: var(--00b4ed);
  border-radius: 20px 20px 20px 0;
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 10px 20px;
  font-weight: 900;
}

.font-20 {
  letter-spacing: 2px;
  font-size: 20px;
  line-height: 120%;
}

.ei-intro-content-b {
  flex: 1;
  padding-top: 2px;
}

.list-item {
  margin-bottom: 5px;
}

.unordered-list {
  padding-left: 20px;
  list-style-type: disc;
}

.school-list-b {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
}

.school-list-col {
  width: 33.3%;
  padding-left: 5px;
  padding-right: 5px;
}

.school-list-region-title-b {
  border: 2px solid var(--white);
  color: var(--white);
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  background-color: #ef1b2b;
  border-radius: 15px;
  margin-bottom: 10px;
  padding: 10px 25px;
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.school-list-region-title-bg {
  background-image: url('../images/schoollist-title-pattern-2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.school-list {
  border: 2px solid var(--badff5);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.school-item {
  border-bottom: 1px solid var(--badff5);
  background-color: var(--white-2);
  color: var(--004b92);
  justify-content: flex-start;
  align-items: stretch;
  transition: background-color .5s, color .5s;
  display: flex;
}

.school-item:hover {
  background-color: var(--dcf2ff);
  color: var(--004b92);
}

.school-num {
  width: 50px;
  border-right: 2px solid var(--white);
  color: var(--white);
  text-align: center;
  background-color: #d2451e;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  font-weight: 700;
  display: flex;
  box-shadow: 6px 0 25px rgba(0, 86, 135, .25);
}

.school-num.hon-fai {
  background-color: #9a004f;
}

.school-name {
  flex: 1;
  padding: 8px 35px 8px 20px;
  position: relative;
}

.region-b {
  margin-bottom: 10px;
}

.school-total-b {
  color: var(--white);
  border-radius: 30px;
  margin-bottom: 15px;
  padding: 5px;
}

.school-total-b.v-map {
  text-align: center;
  background-color: #5079c8;
  border-radius: 100px;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 120%;
  position: relative;
  overflow: hidden;
}

.txt-total {
  color: var(--004b92);
  font-size: 60px;
  line-height: 120%;
}

.txt-total.stroke {
  -webkit-text-stroke-color: var(--white);
}

.common-content-box {
  border: 4px solid var(--white);
  background-color: var(--dcf2ff);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 157, 207, .2);
}

.common-link-list {
  margin-bottom: -15px;
}

.common-link-item {
  margin-bottom: 15px;
  position: relative;
}

.common-link-b {
  border: 4px solid var(--dcf2ff);
  background-color: var(--white);
  color: var(--004b92);
  border-radius: 20px;
  padding: 15px 25px;
  font-size: 20px;
  font-weight: 900;
  line-height: 119%;
  transition: background-color .5s, color .5s;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 157, 207, .2);
}

.common-link-b:hover {
  background-color: var(--white-2);
  color: var(--00b4ed);
}

.common-link-wrap {
  z-index: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.common-link-wrap.v-top {
  align-items: flex-start;
}

.common-item-title-b {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  padding-right: 20px;
  display: flex;
}

.common-item-img {
  width: 50px;
  flex: none;
  margin-right: 15px;
}

.common-item-bottom-bar {
  height: 10px;
  background-image: linear-gradient(#b7fbe7, rgba(255, 255, 255, 0));
  margin-bottom: -10px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.common-arrow {
  width: 22px;
  flex: none;
}

.faq-click {
  z-index: 1;
  color: var(--004b92);
  font-size: 20px;
  font-weight: 900;
  line-height: 119%;
  transition: background-color .5s, color .5s;
  display: block;
  position: relative;
}

.faq-click:hover {
  color: var(--00b4ed);
}

.faq-icon-b {
  width: 43px;
  height: 43px;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 100%;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 4px;
  display: flex;
  position: relative;
  transform: rotate(0);
}

.faq-click-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.faq-item-title-b {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  padding-right: 20px;
  display: flex;
}

.faq-item-img {
  width: 50px;
  flex: none;
  margin-right: 15px;
}

.faq-expand-b {
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.faq-expand-wrap {
  margin-top: 10px;
  padding-left: 65px;
}

.timetable-b {
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -25px;
  margin-right: -25px;
  display: flex;
}

.timetable-col {
  width: 50%;
  padding-left: 25px;
  padding-right: 25px;
}

.timetable-item-time {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.timetable-item-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 120%;
}

.timetable-item-content {
  border-top: 1px solid var(--ef8340);
  margin-top: 15px;
  margin-bottom: -15px;
  padding-top: 15px;
}

.timetable-item-sub-content {
  margin-bottom: 15px;
}

.timetable-item-sc-title {
  margin-bottom: 10px;
  font-weight: 700;
}

.timetable-item-time-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  display: flex;
}

.timetable-replay-gp {
  margin-bottom: 40px;
}

.timetable-replay-content {
  flex: 1;
  padding-top: 20px;
}

.timetable-vid-b {
  width: 560px;
  max-width: 50%;
  border-radius: 30px;
  margin-right: 25px;
  padding: 6px;
  overflow: hidden;
}

.timetable-replay-pdf-b {
  margin-top: 25px;
  margin-bottom: 15px;
}

.btn-pdf {
  color: var(--white);
  border-radius: 40px;
  padding: 10px 20px;
  font-weight: 700;
}

.btn-pdf:hover {
  color: var(--badff5);
}

.btn-pdf-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.icon-pdf {
  width: 20px;
  flex: none;
  margin-top: 3px;
  margin-right: 5px;
}

.booth-content-b {
  width: 100vw;
  height: 100vh;
  background-color: #edf7ff;
  background-image: url('../images/booth-bg2x.jpeg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 80px;
  overflow: auto;
}

.booth-img-b {
  flex: 1;
  position: relative;
}

.booth-bg-b {
  position: relative;
}

.booth-item-b {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.booth-item-b.v-logo {
  width: 38%;
  background-image: url('../images/booth-logo2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 3.5%;
  margin-left: 46%;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.booth-item-b.v-vid {
  width: 28.3%;
  margin-top: 18.5%;
  margin-left: 26.25%;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: none;
}

.booth-item-b.v-poster {
  width: 10%;
  margin-top: 5%;
  margin-left: 26%;
}

.booth-item-b.v-poster.v-right {
  margin-left: 40.2%;
}

.booth-item-b.v-booth-intro {
  width: 7%;
  margin-top: 39%;
  margin-left: 16.1%;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: none;
}

.booth-item-b.v-booth-moreinfo {
  width: 15%;
  margin-top: 10%;
  margin-left: 6%;
}

.booth-item-b.v-booth-form {
  margin-left: 1%;
  margin-right: 1.5%;
  position: static;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: none;
}

.booth-item-b.booth-num {
  color: var(--white);
  letter-spacing: 2px;
  text-shadow: 3px 2px 10px rgba(0, 0, 0, .25);
  margin-top: 2%;
  margin-left: 1.5%;
  font-size: 2vw;
  font-weight: 500;
  line-height: 120%;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: none;
}

.booth-logo-img {
  width: 100%;
  padding-top: 23%;
}

.enlarge-img {
  width: 100%;
  display: block;
}

.booth-poster-inner-shadow {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
}

.btn-booth-intro {
  color: var(--dark-slate-grey);
  font-size: 1.3vw;
  font-weight: 700;
  line-height: 120%;
  transition: box-shadow .5s, color .5s;
  display: block;
}

.btn-booth-intro:hover, .btn-booth-moreinfo:hover {
  color: var(--royal-blue);
}

.booth-form-content-b {
  background-color: var(--badff5);
  border-radius: 20px;
  padding: 10px;
}

.booth-txtfield {
  height: auto;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  border-radius: 5px;
  margin-bottom: 0;
  padding: 3% 6%;
  font-size: 16px;
  line-height: 120%;
  transition: border-color .5s, color .5s;
}

.booth-txtfield:focus {
  border-style: solid;
  border-color: var(--00b4ed);
}

.booth-txtfield::-ms-input-placeholder {
  color: rgba(60, 61, 79, .45);
}

.booth-txtfield::placeholder {
  color: rgba(60, 61, 79, .45);
}

.booth-form-row {
  margin-bottom: 10px;
}

.booth-txtarea {
  width: 100%;
  max-width: 100%;
  min-height: 150px;
  min-width: 100%;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  border-radius: 5px;
  margin-bottom: 0;
  padding: 3% 6%;
  font-size: 16px;
  transition: border-color .5s, color .5s;
}

.booth-txtarea:focus {
  border-color: #3cc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.booth-txtarea::-ms-input-placeholder {
  color: rgba(60, 61, 79, .45);
}

.booth-txtarea::placeholder {
  color: rgba(60, 61, 79, .45);
}

.btn-booth-form-submit {
  letter-spacing: 2px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 40px;
  padding: 5% 10%;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
  transition: color .5s;
}

.btn-booth-form-submit:hover {
  color: var(--turquoise);
}

.booth-form-success-b {
  color: var(--dark-slate-grey);
  background-color: #ebebeb;
  border-radius: 10px;
  font-size: 1.2vw;
  font-weight: 700;
  line-height: 120%;
}

.exhibition-b {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.exhibition-col-r {
  width: 300px;
  height: 100vh;
  border-left: 5px solid var(--white);
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  position: relative;
}

.exhibition-col-main {
  height: 100vh;
  background-image: linear-gradient(45deg, #00b3ec, #53cbf2 18%, #90def6 37%, #c0ecfa 62%, #e2f6fc 77%, #f7fcfe 91%, var(--white));
  text-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  flex: 1;
  padding: 40px;
  position: relative;
  overflow: auto;
}

.exhibition-map {
  max-width: 1200px;
  color: var(--dark-slate-blue-3);
  margin-top: 10px;
  position: relative;
}

.exhibition-h1 {
  color: var(--white);
  letter-spacing: 10px;
}

.map-item {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.map-item.v-gansu {
  margin-top: -12%;
  margin-left: -1.9%;
}

.map-item.v-sichuan {
  margin-top: -6%;
  margin-left: -7.9%;
}

.map-item.v-yunnan {
  margin-top: 2%;
  margin-left: -11.5%;
}

.map-item.v-shanxi {
  margin-top: -9%;
  margin-left: 2.8%;
}

.map-item.v-chongching {
  margin-top: -4.5%;
  margin-left: 0%;
}

.map-item.v-hunan {
  margin-top: -.2%;
  margin-left: 5.5%;
}

.map-item.v-gzz {
  margin-top: 5%;
  margin-left: 0%;
}

.map-item.v-hainan {
  margin-top: 11%;
  margin-left: 0%;
}

.map-item.v-henan {
  margin-top: -9%;
  margin-left: 10.5%;
}

.map-item.v-hubei {
  margin-top: -5%;
  margin-left: 7.5%;
}

.map-item.v-anhui {
  margin-top: -5.8%;
  margin-left: 15%;
}

.map-item.v-jiangxi {
  margin-top: .2%;
  margin-left: 12.2%;
}

.map-item.v-jiangsu {
  margin-top: -7.8%;
  margin-left: 19%;
}

.map-item.v-shanghai {
  margin-top: -5.1%;
  margin-left: 21%;
}

.map-item.v-zhejiang {
  margin-top: -1.1%;
  margin-left: 19%;
}

.map-item.v-fujian {
  margin-top: 2.9%;
  margin-left: 15%;
}

.map-item.v-guangdong {
  margin-top: 5%;
  margin-left: 7.5%;
}

.map-item.v-beijing {
  margin-top: -19%;
  margin-left: 15.5%;
}

.map-item.v-tianjing {
  margin-top: -17%;
  margin-left: 16.5%;
}

.map-item.v-shanfong {
  margin-top: -12%;
  margin-left: 17.5%;
}

.map-item.v-liaoling {
  margin-top: -20%;
  margin-left: 24%;
}

.map-item.v-jilin {
  margin-top: -22%;
  margin-left: 30%;
}

.map-link {
  color: var(--004b92);
  font-weight: 700;
  position: relative;
}

.map-link:hover {
  color: var(--004b92);
}

.map-txt-b {
  white-space: nowrap;
  font-size: 20px;
  line-height: 120%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%);
}

.map-txt-stroked {
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: var(--white);
  text-shadow: 0 3px 2px rgba(0, 0, 0, .25);
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.map-txt {
  position: relative;
}

.icon-locator {
  width: 1.7vw;
  transform-origin: 50% 100%;
  margin-left: auto;
  margin-right: auto;
}

.map-btn-gp {
  margin-bottom: 80px;
  margin-left: 40px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.map-btn-item {
  margin-bottom: 10px;
}

.hkceec-logo {
  width: 160px;
  position: relative;
}

.map-top-b {
  z-index: 100;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
}

.utility-page-wrap {
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.utility-page-content {
  width: 260px;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.map-search {
  margin-bottom: 10px;
  display: flex;
  position: relative;
}

.map-search-input {
  height: auto;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--004b92);
  letter-spacing: 1px;
  border-radius: 40px;
  margin-bottom: 0;
  margin-left: 5px;
  padding: 8px 30px 8px 20px;
  font-size: 16px;
}

.map-search-input::-ms-input-placeholder {
  color: rgba(78, 96, 132, .5);
}

.map-search-input::placeholder {
  color: rgba(78, 96, 132, .5);
}

.btn-refresh {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  transition: opacity .5s, color .5s;
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: translate(0, -50%);
}

.btn-refresh:hover {
  opacity: .5;
}

.exhibition-filter-dropdown-link-alp-txt {
  width: 100%;
  text-align: center;
}

.exhibition-filter-dropdown-btn {
  height: 46px;
  color: var(--white);
  text-align: left;
  text-shadow: 0 2px 2px rgba(0, 171, 244, .75);
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 20px;
  font-weight: 700;
  transition: all .5s;
  display: flex;
}

.exhibition-filter-dropdown-btn:hover {
  color: var(--ec661b);
}

.exhibition-filter-dropdown-btn.w--open {
  background-color: var(--white);
}

.exhibition-filter-dropdown-btn.v-subject {
  border: 1px #ddd;
  border-style: none solid;
}

.exhibition-filter-dropdown-link-alp-align {
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-bottom: 3px;
  display: flex;
}

.exhibition-filter-dropdown-b {
  width: 100%;
  border-top: 1px solid var(--dcf2ff);
  border-bottom: 1px solid var(--dcf2ff);
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: relative;
}

.exhibition-filter-dropdown-list {
  z-index: 1;
  background-color: #fff;
  margin-top: 41px;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.exhibition-filter-dropdown-list.w--open {
  margin-top: 56px;
}

.exhibition-filter-dropdown {
  width: 33.33%;
  margin-left: 0;
  margin-right: 0;
  position: static;
}

.exhibition-filter-dropdown-content {
  border-bottom: 1px solid var(--00b4ed);
  padding: 15px;
}

.icon-dropdown-arrow {
  width: 15px;
}

.exhibition-filter-dropdown-link {
  color: var(--004b92);
  letter-spacing: 0;
  text-indent: 0;
  background-color: rgba(51, 204, 204, .2);
  border-radius: 40px;
  padding: 5px 10px;
  transition: all .5s;
  display: inline-block;
}

.exhibition-filter-dropdown-link:hover {
  color: var(--004b92);
  background-color: rgba(51, 204, 204, .5);
}

.exhibition-filter-dropdown-link.v-alphabet {
  width: 30px;
  height: 30px;
}

.map-filter-item {
  margin-bottom: 5px;
  padding-left: 3px;
  padding-right: 3px;
}

.map-filter-item-wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: -5px;
  margin-left: -3px;
  margin-right: -3px;
  display: flex;
}

.btn-dw {
  width: 33.33%;
  height: 46px;
  color: var(--white);
  text-shadow: 0 2px 2px rgba(0, 171, 244, .75);
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.btn-dw:hover {
  color: var(--ec661b);
}

.txt-map-total {
  font-size: 24px;
  line-height: 120%;
}

.map-listing-b {
  flex: 1;
  padding-bottom: 100px;
  overflow: auto;
}

.exhibition-filter-mobile-btn, .pop-map-filter-m {
  display: none;
}

.pop-graduateshare {
  width: 100%;
  display: none;
}

.graduate-share-intro {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 25px;
  display: flex;
}

.graduate-intro-txt-b {
  flex: 1;
}

.graduate-title {
  letter-spacing: 1px;
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
}

.graduate-content-bubble {
  border-radius: 15px;
  padding: 25px;
  position: relative;
}

.graduate-name {
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
}

.graduate-table {
  margin-bottom: -10px;
}

.graduate-row {
  border-bottom: 1px solid var(--00b4ed);
  background-image: url('../images/list-dot.svg');
  background-position: 0 3px;
  background-repeat: no-repeat;
  background-size: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: flex;
}

.graduate-fieldname {
  width: 150px;
  margin-right: 10px;
  font-weight: 700;
}

.graduate-data {
  flex: 1;
}

.graduate-feature {
  background-color: var(--royal-blue);
  color: var(--white);
  border-radius: 20px;
  margin-bottom: 25px;
  padding: 20px;
  font-weight: 500;
  line-height: 130%;
}

.common-gradient {
  background-image: linear-gradient(to right, #00b4ed, #0bb4d9 20%, #2ab4a6 80%, #41b580);
}

.section-heading-dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-bottom: -5px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
}

.orange-gradient {
  background-image: linear-gradient(45deg, #ec661b, #ef8340 50%, #f39c61);
}

.section-heading-txt-wrap {
  align-items: center;
  display: flex;
}

.common-pop {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.common-link-b-hover {
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, var(--004b92), #1270c8 52%, #00b9f3);
  opacity: 0;
  border-radius: 20px;
  transition: all .5s;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.section-heading-txt-col {
  position: relative;
}

.section-heading-txt-stoke {
  z-index: 0;
  -webkit-text-stroke-width: 9px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.section-heading-txt-stoke.orange {
  -webkit-text-stroke-color: var(--ec661b);
}

.btn-common-hover-bg {
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 40px;
  transition: opacity .5s;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.common-title-b {
  border: 2px solid var(--white);
  background-color: var(--ef8340);
  border-radius: 15px 15px 15px 0;
  margin-bottom: 15px;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

.popup-gradient-bg {
  background-image: linear-gradient(135deg, rgba(238, 251, 255, .55), #cbebfb 45%, rgba(222, 247, 255, .45));
}

.deep-blue-gradient {
  background-image: linear-gradient(to right, #004b92, #1270c8 50%, #00b9f3);
}

.welcome-photo {
  border: 4px solid var(--white);
  border-radius: 15px 15px 0;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .2);
}

.common-title-bg {
  z-index: 0;
  height: 60%;
  background-color: #e67a40;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.text-ec661b {
  color: var(--ec661b);
}

.no-margin {
  margin: 0;
}

.common-txt-b {
  border: 4px solid var(--dcf2ff);
  background-color: var(--white);
  border-radius: 20px;
  padding: 15px 25px;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 157, 207, .2);
}

.faq-icon-img {
  background-color: var(--white);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
}

.faq-expand-txt-col {
  color: var(--white);
  border-radius: 20px;
  padding: 20px;
}

.faq-tip {
  width: 20px;
  height: 10px;
  background-image: url('../images/faq-expand-icon.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: 15px;
}

.faq-tip-b {
  text-align: right;
}

.text-2c3d61 {
  color: var(--2c3d61);
}

.ei-intro-graphic {
  max-width: 40%;
}

.ei-intro-bg {
  background-image: linear-gradient(#00b4ed 50%, rgba(0, 180, 237, 0));
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  padding-top: 40px;
  padding-bottom: 120px;
  padding-left: 20px;
  display: flex;
}

.white-text-shadows {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 171, 244, .75);
}

.white-text-link {
  color: var(--white);
}

.white-text-link:hover {
  color: var(--ec661b);
}

.school-list-region-title-color {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background-color: #d2451e;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.school-list-region-title-color.hon-fai {
  background-color: #9a004f;
}

.school-list-region-title-color.other {
  opacity: .4;
  mix-blend-mode: normal;
}

.z-index-1 {
  z-index: 1;
  position: relative;
}

.section-heading-txt-row {
  flex-wrap: wrap;
  align-items: center;
  margin-top: -15px;
  margin-left: -10px;
  margin-right: -10px;
  display: flex;
}

.common-btn-txt-wrap {
  align-items: center;
  display: flex;
}

.common-shahows-btn {
  color: var(--white);
  border-radius: 50px;
  padding: 5px 20px;
  transition: transform .5s, color .5s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.common-shahows-btn:hover {
  color: var(--badff5);
  transform: translate(0, -3px);
}

.common-shahows-btn.deep-blue-gradient {
  word-break: keep-all;
}

.common-shahows-btn.padding-top-bottom-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.common-btn-icon {
  margin-right: 5px;
}

.school-total-inner-b {
  border: 2px solid var(--white);
  border-radius: 25px;
  padding: 10px 35px 15px 55px;
}

.school-total-txt {
  z-index: 1;
  color: var(--00b4ed);
  font-size: 40px;
  font-weight: 700;
  line-height: 120%;
  position: relative;
}

.school-total-txt-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.school-total-txt-stroke {
  z-index: 0;
  -webkit-text-stroke-width: 12px;
  font-size: 40px;
  font-weight: 700;
  line-height: 120%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.school-total-col {
  z-index: 0;
  border-bottom: 2px solid var(--2c3d61);
  border-radius: 0 0 0 35px;
  flex: 1;
  margin-left: -28px;
  position: relative;
}

.school-total-bg-img {
  z-index: 0;
  height: 100%;
  object-fit: fill;
  display: block;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.school-total-map-txt {
  z-index: 1;
  width: 100%;
  color: var(--00b4ed);
  font-weight: 700;
  position: relative;
}

.school-total-map-txt.stroke {
  z-index: 0;
  width: 100%;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: var(--white);
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%);
}

.school-total-map-b {
  z-index: 1;
  position: relative;
}

.text-004b92 {
  color: var(--004b92);
}

.btn-floormap {
  margin-right: 5px;
  position: absolute;
  top: 50%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: translate(0, -50%);
}

.white-btn {
  background-color: var(--white);
  color: var(--white);
  border-radius: 40px;
  padding: 2px;
  font-weight: 500;
  line-height: 120%;
  transition: background-color .5s, color .5s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.white-btn:hover {
  background-color: var(--dcf2ff);
  color: var(--white);
}

.white-btn.w--current {
  background-color: var(--transparent);
  color: var(--white);
}

.map-back-btn {
  margin-bottom: 140px;
  margin-left: 40px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.lobby-bottom-mask {
  height: 100px;
  background-image: linear-gradient(rgba(85, 115, 165, 0), #5573a5);
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.display-none {
  display: none;
}

.welcom-slider {
  height: auto;
  background-color: var(--transparent);
}

.welcom-slider-nav {
  height: auto;
  text-align: left;
}

.welcom-slider-slide, .welcom-slider-mask {
  height: auto;
}

.section-heading-txt-col-r, .section-heading-txt-col-l {
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

.floorplan-col-main {
  height: 100vh;
  background-image: url('../images/floorplan-bg-top-2x.png'), linear-gradient(to right, #004b92 15%, #1270c8 60%, #00b9f3);
  background-position: 50% 0, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100%, auto;
  flex: 1;
  padding: 40px 40px 100px;
  overflow: auto;
}

.align-center {
  text-align: center;
}

.booth-form-content {
  background-color: var(--white);
  border-radius: 20px;
  padding: 10px;
}

.align-right {
  text-align: right;
}

.btn-questionaire {
  height: 47px;
  background-image: linear-gradient(to right, #c65868, #de6a7d 50%, #f37f91);
  padding: 7px 15px 7px 60px;
  position: relative;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .3);
}

.btn-questionaire-tip {
  width: 30px;
  margin-left: -25px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.btn-questionaire-txt {
  width: 82px;
  position: relative;
}

.btn-questionaire-img-b {
  width: 70px;
  margin-left: -10px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
  overflow: hidden;
}

.booth-content-wrap {
  align-items: flex-end;
  padding-top: 100px;
  display: flex;
}

.booth-form-deco-bottom-img {
  max-width: 75px;
}

.booth-num-txt {
  font-size: 5vw;
  font-weight: 700;
  line-height: 120%;
}

.booth-bg-img-bigger {
  display: none;
}

.floorplan-botth-btn {
  width: 100%;
  color: var(--white);
  text-align: center;
  background-color: rgba(255, 255, 255, .5);
  font-size: 1.15vw;
  transition: all .5s, color .5s;
  display: block;
}

.floorplan-botth-btn:hover {
  background-color: var(--white);
  color: var(--white);
  box-shadow: 0 2px 10px #37c0c2;
}

.floorplan-botth-btn-content {
  background-color: #d2451e;
  padding: 5px;
  position: relative;
}

.floorplan-botth-btn-content.kong-tong {
  background-color: #9e28b5;
}

.floorplan-botth-btn-col {
  width: 100%;
  display: block;
}

.floorplan-circle-col {
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.floorplan-circle-img {
  width: 30px;
  display: block;
}

.blue-link-text {
  color: var(--004b92);
}

.blue-link-text:hover {
  color: var(--ec661b);
}

.floorplan-map {
  border: 1px solid var(--dark-slate-blue-3);
  background-color: #fdf9e4;
  padding-top: 20px;
  padding-left: 20px;
}

.kong-tong {
  background-color: #9e28b5;
}

.shanghai {
  background-color: #c2a6e1;
}

.lui-ling {
  background-color: #00c08b;
}

.fong-kin {
  background-color: #8dd4bd;
}

.si-cong {
  background-color: #ff6c0e;
}

.tin-chon {
  background-color: #cb9700;
}

.kong-so {
  background-color: #38d430;
}

.com-su {
  background-color: #79242f;
}

.hang-lam {
  background-color: #0033a1;
}

.won-lam {
  background-color: #f3be9a;
}

.k07 {
  background-color: #d0d0aa;
}

.sai-cui {
  background-color: #fca3bb;
}

.wu-bug {
  background-color: #ff40b4;
}

.hon-fai {
  background-color: #9a004f;
}

.ho-lam {
  background-color: #002a3a;
}

.kong-sai {
  background-color: #c06b13;
}

.ga-lam {
  background-color: #ea0029;
}

.chai-tong {
  background-color: #205a41;
}

.wu-lam {
  background-color: #abc8e7;
}

.chong-he {
  background-color: #c1a292;
}

.si-sai {
  background-color: #888b8d;
}

.floorplan-map-bottom-row {
  align-items: flex-start;
  display: flex;
}

.floorplan-map-bottom-col-l {
  width: 50px;
  border-style: none solid solid;
  border-width: 1px;
  border-color: var(--dark-slate-blue-3);
  padding: 12px;
}

.floorplan-map-row {
  margin-left: -1%;
  margin-right: -1%;
  display: flex;
}

.floorplan-map-col-l {
  width: 25%;
  padding-left: 1%;
  padding-right: 1%;
}

.floorplan-map-col-r {
  flex: 1;
  padding-left: 1%;
  padding-right: 1%;
}

.floorplan-map-top-r-row {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.floorplan-botth-table {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding: 0;
}

.other {
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
}

.floorplan-map-col-b {
  margin-top: 40px;
}

.floorplan-map-col-r-row {
  flex-direction: column;
  margin-top: -40px;
  display: flex;
}

.floorplan-map-top-col {
  padding-left: 5%;
  padding-right: 5%;
}

.floorplan-map-top-text-b-grey-col {
  padding-top: 10px;
}

.floorplan-map-top-text-b-grey {
  text-align: center;
  background-color: #dcdddd;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 1.25vw;
  line-height: 120%;
  display: flex;
}

.floorplan-map-col-l-row {
  height: 100%;
  margin-left: -5%;
  margin-right: -5%;
  display: flex;
}

.floorplan-map-col-l-col {
  width: 50%;
  padding: 40px 5%;
}

.floorplan-map-col-l-col.stage {
  padding-top: 100px;
  padding-bottom: 100px;
}

.floorplan-map-col-l-col-content {
  height: 100%;
  border: 1px solid var(--dark-slate-blue-3);
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 120%;
  display: flex;
}

.floorplan-map-bottom-col-r {
  flex: 1;
}

.floorplan-map-bottom-col-r-row {
  justify-content: flex-end;
  display: flex;
}

.floorplan-map-col-l-b {
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.floorplan-map-bottom-col-r-content-col {
  width: 150px;
  padding-left: 1%;
  padding-right: 1%;
}

.floorplan-map-bottom-black-b {
  width: 100%;
  height: 35px;
  background-color: #000;
  margin-top: -35px;
}

.floorplan-map-last-row {
  border-left: 1px solid var(--dark-slate-blue-3);
  display: flex;
}

.floorplan-map-top-l-row {
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.floorplan-map-icon-b {
  width: 20px;
  margin-bottom: 3px;
}

.floorplan-map-last-b {
  margin-bottom: 20px;
}

.floorplan {
  max-width: 1200px;
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  margin-top: 10px;
  margin-bottom: 100px;
  padding: 10px;
  position: relative;
}

.floorplan-b {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.floorplan-map-last-col {
  border-style: solid solid solid none;
  border-width: 1px;
  border-color: var(--dark-slate-blue-3);
  text-align: center;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 1vw;
  line-height: 120%;
  display: flex;
}

.floorplan-map-top-text-b {
  border: 1px solid var(--dark-slate-blue-3);
  text-align: center;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 1vw;
  line-height: 120%;
  display: flex;
}

.floorplan-botth-btn-border {
  width: 100%;
  height: 100%;
  border: 2px solid var(--white);
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.home-r-logo-top {
  width: 15%;
  transform-style: preserve-3d;
  margin-top: 10%;
  margin-right: 4%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: perspective(800px)rotateX(14deg)rotateY(-60deg)rotateZ(0);
}

.home-logo-slider-mask {
  height: auto;
}

.home-logo-slider {
  height: auto;
  background-color: var(--transparent);
}

.home-logo-slider-nav, .home-logo-slider-arrow-l, .home-logo-slider-arrow-r {
  display: none;
}

.home-logo-slider-slide {
  height: auto;
}

.home-r-logo-middle {
  width: 18%;
  transform-style: preserve-3d;
  margin-top: 22%;
  margin-right: 5%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: perspective(660px)rotateX(6deg)rotateY(-60deg)rotateZ(0);
}

.home-r-logo-bottom {
  width: 20%;
  transform-style: preserve-3d;
  margin-top: 32%;
  margin-right: -2%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  transform: perspective(660px)rotateX(-1deg)rotateY(-60deg)rotateZ(0);
}

.home-l-logo-top {
  width: 25%;
  transform-style: preserve-3d;
  margin-top: 10%;
  margin-left: -2%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: perspective(900px)rotateX(12deg)rotateY(65deg)rotateZ(0);
}

.home-l-logo-middle {
  width: 17%;
  transform-style: preserve-3d;
  margin-top: 23%;
  margin-left: 6%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: perspective(900px)rotateX(2deg)rotateY(70deg)rotateZ(0);
}

.home-l-logo-bottom {
  width: 9%;
  transform-style: preserve-3d;
  margin-top: 33%;
  margin-left: 2%;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  transform: perspective(900px)rotateX(-7deg)rotateY(65deg)rotateZ(0);
}

.form-select {
  height: 40px;
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--004b92);
  border-radius: 5px;
  margin-bottom: 0;
  padding: 0 10px;
  line-height: 120%;
  transition: color .5s;
}

.form-select:focus {
  border-color: var(--00b4ed);
}

.form-select::-ms-input-placeholder {
  color: rgba(78, 96, 132, .5);
}

.form-select::placeholder {
  color: rgba(78, 96, 132, .5);
}

.floorplan-top-b {
  max-width: 1200px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.floorplan-top-col {
  border: 2px solid var(--white);
  background-color: rgba(239, 131, 64, .9);
  border-radius: 15px 15px 15px 0;
  padding: 20px;
}

.floorplan-top-content-row {
  flex-wrap: wrap;
  margin-top: -15px;
  margin-left: -10px;
  margin-right: -10px;
  display: flex;
}

.floorplan-top-content-b {
  margin-top: 15px;
}

.floorplan-top-content-link-b {
  border: 1px solid var(--white);
  background-color: var(--dark-slate-blue-2);
  color: var(--white);
  border-radius: 50px;
  padding: 10px;
  transition-property: all;
}

.floorplan-top-content-link-b:hover {
  background-color: var(--ef8340);
  color: var(--white);
  box-shadow: 0 2px 10px #37c0c2;
}

.floorplan-top-content-col {
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

.align-left {
  text-align: left;
}

html.w-mod-js [data-ix="init-opacity-0"] {
  opacity: 0;
}

html.w-mod-js [data-ix="init-height-0"] {
  height: 0;
}

html.w-mod-js [data-ix="common-scale-in"] {
  opacity: 0;
  transform: scale(1.2);
}

html.w-mod-js [data-ix="common-fade-from-bottom"] {
  opacity: 0;
  transform: translate(0, 50px);
}

html.w-mod-js [data-ix="lobby-drag-icon-animation"] {
  opacity: 0;
}

html.w-mod-js [data-ix="zoom-out"] {
  transform: scale(1.1);
}

html.w-mod-js [data-ix="init-questionaire"] {
  opacity: 0;
  display: none;
}

html.w-mod-js [data-ix="init-map-txt"] {
  opacity: 0;
}

@media screen and (min-width: 1280px) {
  .lobby-img-b {
    height: 100vh;
  }

  .btn-questionaire-b.booth {
    margin-right: 350px;
  }

  .inner-banner-b {
    padding-bottom: 12%;
  }

  .ei-intro-col.col-img {
    width: 45%;
  }

  .booth-content-b {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
  }

  .booth-item-b.v-booth-form {
    width: 20%;
  }

  .booth-item-b.booth-num {
    margin-top: 4%;
  }

  .booth-txtfield {
    font-size: 16px;
  }

  .exhibition-col-r {
    width: 350px;
  }

  .exhibition-map {
    margin-left: auto;
    margin-right: auto;
  }

  .icon-locator {
    width: 22px;
  }

  .no-margin {
    margin: 0;
  }

  .map-back-btn {
    z-index: 2;
  }

  .booth-content-wrap {
    z-index: 1;
    padding-top: 60px;
    position: relative;
  }

  .booth-form-deco-bottom-img {
    max-width: 120px;
  }

  .booth-num-txt {
    font-size: 64px;
    line-height: 100%;
  }

  .booth-bg-img-bigger {
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .floorplan-botth-btn {
    font-size: 15px;
  }

  .floorplan-map-top-text-b-grey {
    font-size: 16px;
  }

  .floorplan-map-col-l-col-content {
    font-size: 20px;
  }

  .floorplan {
    margin-left: auto;
    margin-right: auto;
  }

  .floorplan-map-last-col, .floorplan-map-top-text-b {
    font-size: 14px;
  }

  .home-r-logo-top {
    transform: perspective(900px)rotateX(13deg)rotateY(-59deg)rotateZ(0);
  }

  .home-r-logo-middle {
    transform: perspective(1400px)rotateX(2deg)rotateY(-65deg)rotateZ(0);
  }

  .home-r-logo-bottom {
    margin-right: -3%;
    transform: perspective(1400px)rotateX(-5deg)rotateY(-60deg)rotateZ(0);
  }

  .home-l-logo-top {
    transform: perspective(1600px)rotateX(13deg)rotateY(65deg)rotateZ(0);
  }

  .home-l-logo-middle {
    transform: perspective(1600px)rotateX(3deg)rotateY(65deg)rotateZ(0);
  }

  .home-l-logo-bottom {
    transform: perspective(1600px)rotateX(-7deg)rotateY(60deg)rotateZ(0);
  }

  .align-left {
    text-align: left;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 28px;
  }

  .header {
    margin-bottom: 0;
    display: inline-block;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
    transform: none;
  }

  .container {
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .container.v-header {
    padding-right: 0;
  }

  .header-bg {
    z-index: 1000;
    display: none;
  }

  .header-wrap {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .nav-menu {
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    padding-top: 100px;
    padding-bottom: 40px;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
    overflow: auto;
  }

  .nav-item {
    text-align: center;
    margin-bottom: 20px;
    margin-left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .nav-link {
    color: var(--004b92);
    display: inline-block;
  }

  .nav-link:hover {
    color: var(--004b92);
  }

  .nav-link-txt {
    padding-top: 0;
  }

  .btn-menu {
    z-index: 1000;
    float: none;
    border-radius: 100%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: 15px;
    padding: 15px 12px;
  }

  .btn-menu.w--open {
    background-color: rgba(0, 0, 0, 0);
  }

  .btn-menu-line-1, .btn-menu-line-3 {
    width: 30px;
    height: 2px;
    background-color: var(--white);
    padding: 0;
  }

  .btn-menu-line-2 {
    width: 30px;
    height: 2px;
    background-color: var(--white);
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0;
  }

  .section-content {
    margin-bottom: -40px;
  }

  .btn-questionaire-b {
    margin-top: 140px;
    margin-bottom: 100px;
  }

  .btn-questionaire-b.booth {
    margin-right: 0;
  }

  .footer-wrap {
    padding-left: 110px;
    padding-right: 110px;
  }

  .footer-deco {
    width: 100px;
  }

  .popup-wrap {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .section-heading-icon-b {
    width: 90px;
  }

  .section-heading-txt-b {
    padding-left: 30px;
  }

  .section-heading-txt {
    padding-left: 20px;
  }

  .btn-pop-close.v-map {
    border-top-right-radius: 0;
  }

  .common-title-txt.booth {
    font-size: 16px;
  }

  .section-banner {
    margin-bottom: 20px;
  }

  .ei-intro-b {
    display: block;
  }

  .ei-intro-col.col-txt {
    margin-right: 0;
  }

  .ei-intro-col.col-img {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .ei-intro-box {
    padding-right: 20px;
  }

  .school-list-region-title-b {
    font-size: 20px;
  }

  .school-name {
    padding-left: 15px;
  }

  .school-total-b {
    margin-bottom: 10px;
  }

  .txt-total {
    font-size: 50px;
  }

  .common-link-b {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .common-link-wrap {
    flex-wrap: wrap;
  }

  .timetable-b {
    margin-left: -10px;
    margin-right: -10px;
  }

  .timetable-col {
    padding-left: 10px;
    padding-right: 10px;
  }

  .booth-content-b {
    height: 100dvh;
  }

  .booth-item-b.v-booth-form {
    width: 20%;
    margin-right: 0%;
  }

  .btn-booth-moreinfo {
    font-size: 1vw;
  }

  .booth-txtfield {
    font-size: 14px;
  }

  .booth-txtarea {
    min-height: 120px;
    font-size: 14px;
  }

  .btn-booth-form-submit {
    font-size: 1.4vw;
  }

  .exhibition-col-r {
    display: none;
  }

  .exhibition-col-r.v-mobile {
    width: 100%;
    padding-top: 40px;
    display: flex;
  }

  .exhibition-col-main {
    height: 100dvh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .exhibition-map {
    margin-left: -2vw;
    margin-right: -2vw;
  }

  .icon-locator {
    width: 2vw;
  }

  .map-btn-gp {
    margin-bottom: 60px;
    margin-left: 5vw;
  }

  .exhibition-filter-dropdown-list.w--open {
    margin-top: 56px;
  }

  .icon-dropdown-arrow {
    width: 25px;
  }

  .exhibition-filter-mobile-btn {
    z-index: 2;
    width: 60px;
    height: 60px;
    background-color: #01b5ee;
    background-image: url('../images/icon-search.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    border: 1px solid #fff;
    border-radius: 100%;
    margin-top: 90px;
    margin-right: 40px;
    padding-bottom: 0;
    padding-right: 0;
    transition: background-color .5s;
    display: block;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
  }

  .exhibition-filter-mobile-btn:hover {
    background-color: var(--badff5);
  }

  .pop-map-filter-m {
    background-color: var(--white);
    flex: 1;
    margin-left: -5vw;
    margin-right: -5vw;
    display: none;
    position: relative;
  }

  .section-heading-txt-stoke {
    padding-left: 20px;
  }

  .common-title-b.booth {
    margin-bottom: 10px;
    padding: 8px 15px;
  }

  .no-margin {
    margin: 0;
  }

  .common-txt-b {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .school-total-inner-b {
    padding-left: 40px;
    padding-right: 25px;
  }

  .school-total-txt, .school-total-txt-stroke {
    font-size: 36px;
  }

  .school-total-col {
    padding-left: 12px;
  }

  .map-back-btn {
    margin-bottom: 100px;
    margin-left: 5vw;
  }

  .floorplan-col-main {
    height: 100dvh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .btn-questionaire {
    height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 40px;
  }

  .btn-questionaire-tip {
    width: 25.5px;
    margin-left: -25.5px;
  }

  .btn-questionaire-txt {
    width: 70px;
  }

  .btn-questionaire-img-b {
    width: 60px;
    margin-left: -20px;
  }

  .booth-content-wrap {
    padding-top: 60px;
  }

  .floorplan-botth-btn {
    font-size: 12px;
  }

  .floorplan-map-top-text-b-grey {
    font-size: 14px;
  }

  .floorplan-map-col-l-col-content {
    font-size: 16px;
  }

  .floorplan {
    margin-left: -2vw;
    margin-right: -2vw;
  }

  .floorplan-map-last-col, .floorplan-map-top-text-b {
    font-size: 12px;
  }

  .floorplan-top-b {
    margin-left: -2vw;
    margin-right: -2vw;
  }

  .align-left {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    letter-spacing: 2px;
    font-size: 24px;
  }

  .container {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .header-bg {
    box-shadow: 0 4px rgba(0, 0, 0, .1);
  }

  .header-wrap {
    height: 60px;
  }

  .nav-menu {
    padding-top: 90px;
  }

  .home-content-b {
    height: auto;
    min-height: 100vh;
  }

  .zoom-mask {
    width: 900px;
    position: relative;
  }

  .btn-questionaire-b {
    margin-top: 0;
    margin-bottom: 110px;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 0%;
  }

  .footer-wrap {
    flex-wrap: wrap;
    padding: 15px 5vw;
    font-size: 13px;
    display: block;
  }

  .footer-deco {
    margin-top: 0;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
    overflow: hidden;
    transform: translate(0, -100%);
  }

  .footer-deco.v-right {
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
  }

  .footer-l-b {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
  }

  .footer-l-title {
    border-right-style: none;
    margin-bottom: 5px;
    margin-right: 0;
    padding-right: 0;
  }

  .footer-r-b {
    justify-content: flex-start;
    margin-top: 20px;
  }

  .footer-link-separator {
    margin-left: 10px;
    margin-right: 10px;
  }

  .home-drag-b {
    z-index: 10;
    display: block;
    position: fixed;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .icon-drag {
    width: 100px;
    height: 100px;
    background-color: var(--00b4ed);
    color: #fefefc;
    text-align: center;
    background-image: url('../images/icon-drag.svg');
    background-position: 50% 12px;
    background-repeat: no-repeat;
    background-size: 35px;
    border-radius: 50%;
    padding-top: 56px;
    font-size: 12px;
    line-height: 14px;
  }

  .popup-b {
    height: 100dvh;
  }

  .popup-wrap {
    align-items: flex-start;
    padding: 0;
  }

  .common-pop-box {
    padding: 6px;
  }

  .common-popup-content {
    height: 100dvh;
    max-height: none;
    padding: 15px 15px 150px;
  }

  .common-popup-content.v-questionaire {
    background-size: 400px;
  }

  .section-heading-icon-b {
    width: 80px;
  }

  .section-heading-txt {
    padding-left: 10px;
  }

  .important-note-item {
    margin-bottom: 30px;
  }

  .btn-pop-close {
    width: 50px;
    height: 50px;
  }

  .btn-pop-close.v-map {
    border-top-right-radius: 0;
  }

  .icon-close {
    width: 30px;
    height: 30px;
  }

  .welcome-item {
    margin-bottom: 30px;
  }

  .welcome-photo-b {
    width: 40%;
    margin-right: 0;
  }

  .welcome-txt-b {
    width: 100%;
    flex: none;
    margin-top: 15px;
  }

  .common-title-txt {
    font-size: 18px;
  }

  .common-popup-content-b {
    max-height: none;
    padding: 15px;
  }

  .welcome-tip {
    width: 8px;
    height: 16px;
    margin-top: 15px;
    margin-left: -8px;
  }

  .questionaire-title-b {
    margin-bottom: 15px;
    font-size: 18px;
  }

  .radio-btn-content.v-table {
    justify-content: flex-start;
  }

  .radio-btn-txt.v-table {
    display: block;
  }

  .questionaire-btn-b {
    margin-top: 15px;
  }

  .questionaire-btn-item {
    margin-left: 15px;
  }

  .btn-slider-arrow {
    width: 35px;
    height: 35px;
  }

  .form-table-row {
    display: block;
  }

  .form-table-row.v-top {
    display: none;
  }

  .form-table-col-txt {
    margin-bottom: 10px;
  }

  .form-table-col-radios {
    width: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .form-radio-col {
    width: 50%;
    flex: 0 auto;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .form-pref-col.col-title {
    padding-left: 15px;
  }

  .section-banner {
    margin-bottom: 10px;
  }

  .inner-banner-b {
    padding: 70px 120px;
  }

  .inner-page-heading {
    letter-spacing: 5px;
  }

  .shortcut-btn-b {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .shortcut-item {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
  }

  .btn-common {
    font-size: 14px;
  }

  .btn-common-content {
    padding: 3px 8px;
  }

  .inner-content-top-edge {
    height: 10px;
  }

  .ei-intro-b {
    padding-top: 20px;
  }

  .ei-intro-col.col-img {
    width: auto;
    margin-top: -60px;
  }

  .font-20 {
    letter-spacing: 1px;
    font-size: 18px;
  }

  .school-list-b {
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .school-list-col {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .school-total-b {
    border-radius: 10px;
    margin-bottom: 5px;
  }

  .txt-total {
    font-size: 30px;
  }

  .common-content-box {
    padding: 15px;
  }

  .common-link-b {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
  }

  .common-item-img {
    width: 40px;
    margin-right: 10px;
  }

  .common-arrow {
    width: 18px;
  }

  .faq-click {
    font-size: 16px;
  }

  .faq-icon-b {
    width: 35px;
    height: 35px;
  }

  .faq-item-img {
    width: 40px;
    margin-right: 10px;
  }

  .faq-expand-wrap {
    margin-top: 5px;
    padding-top: 10px;
    padding-left: 0;
  }

  .timetable-b {
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .timetable-col {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .timetable-item-title {
    font-size: 18px;
  }

  .timetable-item-content {
    margin-top: 10px;
    padding-top: 10px;
  }

  .timetable-item-time-row {
    margin-bottom: 10px;
  }

  .timetable-vid-b {
    width: auto;
    max-width: none;
    margin-right: 0;
  }

  .timetable-replay-pdf-b {
    margin-top: 15px;
  }

  .booth-content-b {
    height: auto;
    min-height: 100dvh;
    padding-top: 60px;
    padding-bottom: 130px;
  }

  .booth-item-b.booth-num {
    font-size: 21px;
  }

  .btn-booth-intro {
    font-size: 14px;
  }

  .btn-booth-moreinfo {
    font-size: 10px;
  }

  .booth-txtfield, .booth-txtarea {
    font-size: 12px;
  }

  .btn-booth-form-submit {
    font-size: 14px;
  }

  .exhibition-col-r {
    padding-top: 60px;
  }

  .exhibition-col-r.v-mobile {
    border-left-style: none;
  }

  .exhibition-map {
    min-width: 750px;
    margin-left: 0;
    margin-right: 0;
  }

  .exhibition-h1 {
    letter-spacing: 5px;
  }

  .map-txt-b {
    font-size: 16px;
  }

  .icon-locator {
    width: 16px;
  }

  .map-btn-gp {
    margin-bottom: 140px;
  }

  .map-btn-item {
    margin-bottom: 5px;
  }

  .hkceec-logo {
    width: 120px;
  }

  .exhibition-filter-dropdown-btn {
    height: 40px;
  }

  .exhibition-filter-dropdown-b {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .exhibition-filter-dropdown-list.w--open {
    margin-top: 46px;
  }

  .btn-dw {
    height: 35px;
  }

  .exhibition-filter-mobile-btn {
    width: 50px;
    height: 50px;
    margin-top: 75px;
    margin-right: 15px;
  }

  .pop-map-filter-m {
    margin-left: 0;
    margin-right: 0;
  }

  .graduate-share-intro {
    display: block;
  }

  .graduate-intro-txt-b {
    margin-top: 20px;
  }

  .graduate-title {
    font-size: 18px;
  }

  .graduate-content-bubble {
    padding: 15px;
  }

  .section-heading-txt-stoke {
    padding-left: 10px;
  }

  .common-title-b {
    margin-bottom: 10px;
  }

  .no-margin {
    margin: 0;
  }

  .common-txt-b {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
  }

  .ei-intro-bg {
    padding-top: 25px;
  }

  .school-total-inner-b {
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 15px;
  }

  .school-total-txt {
    font-size: 20px;
  }

  .school-total-txt-stroke {
    -webkit-text-stroke-width: 7px;
    font-size: 20px;
  }

  .white-btn {
    font-size: 14px;
  }

  .map-back-btn {
    margin-bottom: 160px;
  }

  .floorplan-col-main {
    padding-bottom: 130px;
  }

  .booth-content-wrap {
    padding-top: 0;
  }

  .booth-num-txt {
    font-size: 48px;
  }

  .floorplan {
    min-width: 750px;
    margin-left: 0;
    margin-right: 0;
  }

  .floorplan-top-b {
    min-width: 750px;
    margin-left: 0;
    margin-right: 0;
  }

  .align-left {
    text-align: left;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 30px;
  }

  .btn-menu {
    padding: 12px;
  }

  .btn-menu-line-1, .btn-menu-line-3, .btn-menu-line-2 {
    width: 25px;
  }

  .common-popup-content.v-questionaire {
    background-size: 300px;
  }

  .section-heading-icon-b {
    width: 70px;
  }

  .welcome-item {
    display: block;
  }

  .welcome-photo-b {
    width: 60%;
    padding: 5px;
  }

  .common-title-txt {
    text-align: center;
  }

  .common-popup-content-b {
    padding-left: 10px;
    padding-right: 10px;
  }

  .welcome-tip {
    display: none;
  }

  .questionaire-title-b {
    flex-wrap: wrap;
  }

  .questionaire-title {
    width: 100%;
    flex: none;
    margin-top: 12px;
    margin-left: 0;
  }

  .questionaire-radio-gp-b {
    display: block;
  }

  .questionaire-radio-item, .questionaire-radio-item.v-100 {
    width: auto;
  }

  .form-radio-col {
    width: 100%;
  }

  .inner-banner-b {
    padding-left: 15%;
    padding-right: 15%;
  }

  .ei-intro-col.col-img {
    margin-top: -40px;
  }

  .ei-intro-box {
    padding: 15px;
    display: block;
  }

  .ei-intro-title {
    border-bottom-width: 1px;
    border-bottom-color: var(--004b92);
    margin-right: 0;
    padding-bottom: 10px;
    display: inline-block;
  }

  .common-link-b {
    padding-left: 10px;
    padding-right: 10px;
  }

  .map-btn-gp {
    margin-left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .hkceec-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .graduate-intro-txt-b {
    margin-top: 10px;
  }

  .graduate-content-bubble {
    padding-left: 10px;
    padding-right: 10px;
  }

  .graduate-row {
    display: block;
  }

  .graduate-fieldname {
    width: auto;
    margin-bottom: 5px;
    margin-right: 0;
  }

  .no-margin {
    margin: 0;
  }

  .common-txt-b {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ei-intro-graphic {
    max-width: 55%;
  }

  .ei-intro-bg {
    background-image: linear-gradient(#00b4ed 70%, rgba(0, 180, 237, 0));
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding-top: 0;
    padding-left: 0;
  }

  .school-total-inner-b {
    padding-left: 15px;
  }

  .school-total-txt-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .common-shahows-btn-col {
    margin-top: 15px;
  }

  .map-back-btn {
    width: 100%;
    margin-left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .btn-questionaire-txt {
    width: 60px;
  }

  .btn-questionaire-img-b {
    width: 50px;
    margin-left: -20px;
  }

  .align-left {
    text-align: left;
  }
}

#w-node-_19755af1-ed59-d39a-fcf8-444b1f31e61d-2422636e {
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#w-node-_315e5caa-bec6-2bce-606e-4dd53b992555-2422636e, #w-node-a532012f-366d-167f-c65c-b1b01cb87e55-2422636e {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-_0b8df61b-bea8-e8df-5b05-b9e072e02c37-2422636e {
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#w-node-_0b8df61b-bea8-e8df-5b05-b9e072e02d12-2422636e, #w-node-_0b8df61b-bea8-e8df-5b05-b9e072e02d31-2422636e {
  grid-area: span 2 / span 2 / span 2 / span 2;
}