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

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

.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 {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.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-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

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

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

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: #0000;
  margin-bottom: 90px;
  display: block;
  position: fixed;
  inset: auto auto 0% 50%;
  transform: translate(-50%);
}

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

.container.flex-h {
  display: flex;
}

.header-bg {
  border-radius: 100px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  overflow: hidden;
  box-shadow: 5px 3px 12px #0006;
}

.header-bg.common-gradient {
  background-image: linear-gradient(0deg, #91c97a 60%, #519e52);
}

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

.all.school-list-bg {
  background-image: url('../images/school-list-bg-2x.jpg');
  background-position: 50% 0;
  background-size: cover;
}

.all.ei-intro-all-bg {
  background-image: url('../images/lobby-2.jpg');
  background-position: 50%;
  background-size: cover;
  background-attachment: fixed;
}

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

.home-content-b {
  background-color: #5573a5;
  width: 100vw;
  height: 100vh;
  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 {
  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;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.lobby-link-hover {
  opacity: 0;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.btn-questionaire-b {
  z-index: 998;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  margin-top: 30px;
  display: flex;
  position: fixed;
  inset: 0% 0% auto auto;
}

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

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

.section-footer {
  z-index: 997;
  position: fixed;
  inset: auto 0% 0%;
}

.section-footer.common-gradient {
  background-image: linear-gradient(315deg, #91c97a 60%, #519e52);
}

.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;
  inset: auto auto 0% 0%;
}

.footer-deco.v-right {
  inset: auto 0% 0% auto;
}

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

.footer-l-title {
  border-right: 1px solid var(--white);
  color: #fffc;
  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 {
  background-color: var(--00b4ed);
  width: 2px;
  height: 20px;
  margin-left: 15px;
  margin-right: 15px;
}

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

.popup-b {
  z-index: 4000;
  opacity: 0;
  background-color: #33528f80;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0% auto auto 0%;
}

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

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

.popup-wrap {
  justify-content: center;
  align-items: center;
  height: 100%;
  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 {
  border: 4px solid var(--dcf2ff);
  background-color: var(--white);
  border-radius: 10px;
  max-height: 65vh;
  padding: 25px;
  position: relative;
  overflow: auto;
  box-shadow: 0 6px 20px #009dcf4d;
}

.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;
  flex: none;
  width: 90px;
  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;
  background-image: url('../images/icon-close.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  inset: 0% 0% auto auto;
}

.icon-close {
  background-image: url('../images/pop-close2x_1pop-close@2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  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 {
  border-radius: 20px 20px 0;
  flex: none;
  width: 170px;
  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 {
  color: var(--2c3d61);
  border-radius: 15px;
  max-height: 50vh;
  padding: 25px;
  font-weight: 300;
  line-height: 140%;
  position: relative;
  overflow: auto;
}

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

.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 {
  background-image: url('../images/questionaire-tip-top.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 10px;
  margin-top: -10px;
  margin-left: 20px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.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 {
  border: 1px solid var(--badff5);
  background-color: var(--white);
  border-radius: 20px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.radio-btn-circle-active {
  opacity: 0;
  background-image: linear-gradient(45deg, #ec661b, #ef8340 50%, #f39c61);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  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 {
  border: 1px solid var(--badff5);
  color: var(--004b92);
  border-radius: 5px;
  height: 40px;
  margin-bottom: 0;
  padding: 10px;
  font-size: 16px;
  line-height: 120%;
  transition: color .5s;
}

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

.textfield::placeholder {
  color: #4e608480;
}

.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 {
  background-image: url('../images/questionaire-btn-next.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  transition: opacity .5s, background-color .5s, color .5s;
  display: block;
  box-shadow: 0 2px 5px #0003;
}

.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 {
  justify-content: flex-start;
  align-items: flex-start;
  width: 40%;
  display: flex;
}

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

.form-table-col-radios {
  justify-content: flex-start;
  align-items: center;
  width: 60%;
  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 {
  border: 1px solid var(--badff5);
  background-color: var(--white);
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

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

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

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

.textarea::placeholder {
  color: #4e608480;
}

.btn-form-submit {
  letter-spacing: 2px;
  background-color: #0000;
  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: #0000;
  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 #00000040;
}

.inner-content-top {
  z-index: 5;
  position: sticky;
  top: 0;
}

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

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

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

.btn-common {
  background-color: var(--white);
  color: #b0b0b0;
  border: 1px solid #b0b0b0;
  border-radius: 40px;
  padding: 2px;
  font-weight: 500;
  line-height: 120%;
  transition: background-color .5s, color .5s;
  position: relative;
  overflow: hidden;
}

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

.btn-common.orange-gradient {
  color: #fff;
}

.btn-common.orange-gradient:hover {
  color: var(--midnight-blue);
}

.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: 0px solid var(--white);
  opacity: 0;
  border-radius: 40px;
  transition: opacity .5s;
  position: absolute;
  inset: 0%;
}

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

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

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

.content-bg {
  background-color: #fff;
  height: 100%;
  position: absolute;
  inset: 0% 0% auto;
}

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

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

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

.ei-intro-box {
  background-image: linear-gradient(90deg, #33cccc38, #beefef1a 77%, #fff);
  border-radius: 10px;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
}

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

.ei-intro-title {
  color: #4e6084;
  border-right: 1px solid #4e6084;
  margin-right: 20px;
  font-weight: 900;
}

.ei-intro-title.full-w {
  border-bottom: 1px solid #4e6084;
  border-right-width: 0;
  margin-bottom: 10px;
  margin-right: 0;
  padding-bottom: 10px;
}

.font-20 {
  letter-spacing: 2px;
  margin-right: 25px;
  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;
  position: relative;
}

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

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

.school-list-region-title-bg {
  z-index: 0;
  opacity: 1;
  background-image: url('../images/location-title-bg.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0%;
}

.school-list {
  overflow: hidden;
  box-shadow: 0 4px 10px #0003;
}

.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 {
  color: var(--white);
  text-align: center;
  background-color: #d2451e;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50px;
  padding: 8px 10px;
  font-weight: 700;
  display: flex;
  box-shadow: 6px 0 25px #00568740;
}

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

.school-num.chong-he {
  background-color: #005bbf;
}

.school-num.si-sai {
  background-color: #05c1b7;
}

.school-name {
  flex: 1;
  padding: 8px 35px 8px 10px;
  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-image: url('../images/school-total-bg-img.jpg');
  background-position: 50%;
  background-size: cover;
  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(--ef8340);
  font-size: 40px;
  line-height: 120%;
}

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

.common-content-box {
  border-radius: 20px;
  padding: 20px;
}

.common-link-list {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  margin-bottom: -15px;
  display: flex;
}

.common-link-item {
  margin-bottom: 0;
  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 #009dcf33;
}

.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 {
  flex: none;
  width: 50px;
  margin-right: 15px;
}

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

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

.faq-click {
  z-index: 1;
  color: #4e6084;
  line-height: 120%;
  transition: background-color .5s, color .5s;
  display: block;
  position: relative;
}

.faq-click:hover {
  color: #4e6084;
}

.faq-icon-b {
  background-color: #ffffff4d;
  border-radius: 100%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 43px;
  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 {
  flex: none;
  width: 50px;
  margin-right: 15px;
}

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

.faq-expand-wrap {
  margin-top: 15px;
  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 {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.timetable-item-title {
  color: var(--green);
  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 {
  border-radius: 30px;
  width: 560px;
  max-width: 50%;
  margin-right: 25px;
  padding: 6px;
  overflow: hidden;
}

.timetable-vid-b.deep-blue-gradient {
  border-bottom: 8px solid #fff;
  border-right: 8px solid #fff;
  padding: 0;
  position: relative;
  box-shadow: 10px 8px #2a2a2a40;
}

.timetable-vid-b.deep-green-gradient {
  border-bottom: 8px solid #fff;
  border-right: 8px solid #fff;
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow: 10px 8px #2a2a2a40;
}

.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 {
  flex: none;
  width: 20px;
  margin-top: 3px;
  margin-right: 5px;
}

.booth-content-b {
  background-color: #816652;
  background-image: url('../images/booth-bg-long2x.jpg');
  background-position: 50% 0;
  background-repeat: repeat-x;
  background-size: 100%;
  width: 100vw;
  height: 100vh;
  padding-bottom: 80px;
  padding-left: 50px;
  padding-right: 50px;
  overflow: auto;
}

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

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

.booth-item-b {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.booth-item-b.v-logo {
  background-image: url('../images/booth-logo2x.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23%;
  margin-bottom: 2%;
  margin-left: 46.2%;
  inset: auto auto 59% -15%;
}

.booth-item-b.v-vid {
  width: 22%;
  margin-top: 20.5%;
  margin-left: 52.8%;
  inset: 0% auto auto 0%;
  transform: none;
}

.booth-item-b.v-poster {
  width: 10%;
  margin-top: 8%;
  margin-left: -35.5%;
  transform: translate(-50%, -50%);
}

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

.booth-item-b.v-booth-intro {
  width: 5.5%;
  margin-top: 37.4%;
  margin-left: 68.6%;
  inset: 0% auto auto 0%;
  transform: rotate(4deg);
}

.booth-item-b.v-booth-moreinfo {
  width: 5%;
  margin-top: 5.5%;
  margin-left: -8.9%;
}

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

.booth-item-b.booth-num {
  color: var(--white);
  letter-spacing: 2px;
  text-shadow: 3px 2px 10px #00000040;
  margin-top: 3.5%;
  margin-left: 26%;
  font-size: 2vw;
  font-weight: 500;
  line-height: 120%;
  inset: 0% auto auto 0%;
  transform: none;
}

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

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

.booth-poster-inner-shadow {
  position: absolute;
  inset: 0%;
  box-shadow: inset 0 3px 5px #0003;
}

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

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

.btn-booth-moreinfo {
  color: var(--dark-slate-grey);
  word-break: keep-all;
  font-size: .7vw;
  font-weight: 700;
  transform: rotate(-2deg);
}

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

.booth-form-content-b {
  background-color: #ffc99b;
  border-radius: 20px;
  padding: 10px;
}

.booth-txtfield {
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  border-radius: 5px;
  height: auto;
  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::placeholder {
  color: #3c3d4f73;
}

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

.booth-txtarea {
  border: 1px solid var(--badff5);
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  border-radius: 5px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 150px;
  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 #0006;
}

.booth-txtarea::placeholder {
  color: #3c3d4f73;
}

.btn-booth-form-submit {
  letter-spacing: 2px;
  background-color: #0000;
  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);
}

.btn-booth-form-submit.deep-green-gradient {
  background-color: var(--green);
}

.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 {
  z-index: 2;
  border-radius: 25px;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  width: 320px;
  margin-top: 60px;
  margin-bottom: 180px;
  margin-right: 60px;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0% 0% 0% auto;
  overflow: hidden;
  box-shadow: 6px 7px 8px #00000040;
}

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

.exhibition-col-main.popup-scroll {
  background-image: url('../images/lobby-2.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 60px;
  padding-left: 0;
  padding-right: 260px;
}

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

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

.map-item {
  position: absolute;
  inset: 50% auto auto 50%;
  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;
  inset: 0% auto auto 50%;
  transform: translate(-50%);
}

.map-txt-stroked {
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: var(--white);
  text-shadow: 0 3px 2px #00000040;
  position: absolute;
  inset: 0% auto auto 0%;
}

.map-txt {
  position: relative;
}

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

.map-btn-gp {
  margin-bottom: 160px;
  margin-left: 40px;
  position: absolute;
  inset: auto auto 0% 0%;
}

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

.map-btn-item.on-school-list {
  margin-bottom: 0;
}

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

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

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

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

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

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

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

.map-search-input::placeholder {
  color: #4e608480;
}

.btn-refresh {
  border-left: 1px solid var(--gainsboro);
  width: 31px;
  height: 20px;
  margin-right: 10px;
  padding-left: 10px;
  transition: opacity .5s, color .5s;
  display: block;
  position: absolute;
  inset: 50% 0% auto auto;
  transform: translate(0, -50%);
}

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

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

.exhibition-filter-dropdown-btn {
  color: #4e6084;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  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 {
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-bottom: 3px;
  display: flex;
}

.exhibition-filter-dropdown-b {
  border-top: 1px solid var(--dcf2ff);
  border-bottom: 1px solid var(--dcf2ff);
  flex-wrap: wrap;
  width: 100%;
  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;
  inset: 0% 0% auto;
  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: #3cc3;
  border-radius: 40px;
  padding: 5px 10px;
  transition: all .5s;
  display: inline-block;
}

.exhibition-filter-dropdown-link:hover {
  color: var(--004b92);
  background-color: #33cccc80;
}

.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 {
  color: #4e6084;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: 46px;
  font-weight: 700;
  display: flex;
}

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

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

.txt-map-total.text-ff9944 {
  color: #f94;
}

.map-listing-b {
  z-index: 2;
  flex: 1;
  padding-bottom: 20px;
  position: relative;
  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 {
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-bottom: -5px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.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;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all .5s;
  position: absolute;
  inset: 0%;
}

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

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

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

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

.btn-common-hover-bg.green-gradient {
  background-image: linear-gradient(#519e52, #91c97a 60%);
}

.common-title-b {
  border: 2px solid var(--white);
  background-image: linear-gradient(0deg, #91c97a 60%, #519e52);
  border-radius: 15px;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px #0003;
}

.popup-gradient-bg {
  background-image: linear-gradient(135deg, #eefbff8c, #cbebfb 45%, #def7ff73);
}

.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 #0003;
}

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

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

.no-margin {
  margin: 0;
}

.common-txt-b {
  background-color: var(--white);
  border-bottom: 1px solid #ddd;
  border-radius: 30px;
  padding: 30px 25px;
  display: block;
  position: relative;
  overflow: hidden;
}

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

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

.faq-expand-txt-col.green-text {
  color: var(--green);
  padding: 0;
  font-weight: 700;
}

.faq-tip {
  background-image: url('../images/faq-expand-icon.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 10px;
  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-color: #fff;
  border-radius: 0;
  flex-flow: column;
  padding: 40px 20px 20px;
  display: flex;
  position: relative;
}

.white-text-shadows {
  color: var(--white);
  text-shadow: 0 1px 2px #00abf4bf;
}

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

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

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

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

.school-list-region-title-color.chong-he {
  background-color: #005bbf;
}

.school-list-region-title-color.si-sai {
  background-color: #05c1b7;
}

.school-list-region-title-color.com-su {
  z-index: -1;
}

.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 #0003;
}

.common-shahows-btn:hover {
  color: var(--dark-slate-blue);
  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-shahows-btn.padding-top-bottom-10.deep-green-gradient {
  background-image: linear-gradient(#519e52, #91c97a 60%);
}

.common-shahows-btn.padding-top-bottom-10.deep-green-gradient._5px-padding {
  padding-top: 5px;
  padding-bottom: 5px;
}

.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(--ef8340);
  font-size: 32px;
  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;
  color: var(--ef8340);
  -webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: var(--white);
  font-size: 32px;
  font-weight: 700;
  line-height: 120%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.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;
  object-fit: fill;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0% auto 0% 0%;
}

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

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

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

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

.btn-floormap {
  margin-right: 5px;
  position: absolute;
  inset: 50% 0% auto auto;
  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 #0003;
}

.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;
  inset: auto auto 0% 0%;
}

.lobby-bottom-mask {
  background-image: linear-gradient(#5573a500, #5573a5);
  height: 100px;
  position: absolute;
  inset: auto 0% 0%;
}

.display-none {
  display: none;
}

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

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

.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 {
  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;
  height: 100vh;
  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: 42.5px;
  padding: 7px 15px 7px 60px;
  position: relative;
  box-shadow: 0 3px 4px #0000004d;
}

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

.btn-questionaire-txt {
  z-index: 2;
  color: var(--white);
  letter-spacing: 2px;
  width: 90px;
  padding-top: 5px;
  font-size: 20px;
  font-weight: 700;
  position: relative;
}

.btn-questionaire-img-b {
  z-index: 2;
  width: 70px;
  margin-left: -10px;
  position: absolute;
  inset: auto auto 0% 0%;
  overflow: hidden;
}

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

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

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

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

.floorplan-botth-btn {
  color: var(--white);
  text-align: center;
  background-color: #ffffff80;
  width: 100%;
  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 {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  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 {
  border-style: none solid solid;
  border-width: 1px;
  border-color: var(--dark-slate-blue-3);
  width: 50px;
  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 {
  border: 1px solid var(--dark-slate-blue-3);
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  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 {
  background-color: #000;
  width: 100%;
  height: 35px;
  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 {
  background-color: var(--white);
  color: var(--dark-slate-blue-3);
  max-width: 1200px;
  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 {
  border: 2px solid var(--white);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

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

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

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

.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 {
  transform-style: preserve-3d;
  width: 18%;
  margin-top: 22%;
  margin-right: 5%;
  position: absolute;
  inset: 0% 0% auto auto;
  transform: perspective(660px)rotateX(6deg)rotateY(-60deg)rotateZ(0);
}

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

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

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

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

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

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

.form-select::placeholder {
  color: #4e608480;
}

.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: #ef8340e6;
  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;
}

.symbol-titile-block {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  align-items: stretch;
  width: 455px;
  margin-top: 50px;
  margin-left: 60px;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.symbol-titile-block.realative {
  margin-left: 0;
  position: relative;
}

.symbol-titile-line {
  background-image: linear-gradient(0deg, #91c97a 50%, #519e52);
  width: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.symbol-titile-name {
  letter-spacing: 10px;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: var(--white);
  white-space: pre-wrap;
  word-break: keep-all;
  align-items: center;
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
  display: flex;
}

.symbol-titile-name-top {
  color: #007e85;
  -webkit-text-stroke-width: 0px;
  line-height: 40px;
  position: absolute;
}

.btn-questionaire-bg {
  z-index: 1;
  background-color: var(--green);
  position: absolute;
  inset: 0%;
}

.btn-questionaire-bg.sign-up {
  background-color: var(--orange);
}

.img-sign-up {
  width: 100%;
  margin-bottom: 0;
  display: block;
}

.symbol-titile-logo {
  flex: 1;
}

.map-search-icon {
  height: 80%;
  margin-top: 2px;
  margin-left: 5px;
  position: absolute;
}

.school-list-title-b {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-right: 115px;
  display: flex;
}

.school-list-title-b.center {
  justify-content: center;
}

.school-list-title-b.center._45-down-margin {
  margin-bottom: 45px;
}

.school-list-bg {
  background-color: #6b6b6b;
}

.school-list-text-b {
  position: relative;
}

.school-list-station-b {
  background-image: url('../images/school-list-station-02-2x.png');
  background-position: 50%;
  background-repeat: repeat-y;
  background-size: contain;
  background-attachment: scroll;
  width: 100%;
  padding-top: 20%;
  padding-bottom: 20%;
  position: relative;
}

.school-list-inner-b {
  margin: 0% 9.3vw 0% 8.9vw;
  position: absolute;
  inset: 0%;
  overflow: auto;
}

.school-list-inner-row-b {
  align-items: stretch;
  display: flex;
}

.school-list-inner-log {
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  flex-flow: column;
  width: 32%;
  display: flex;
}

.school-list-inner-line {
  background-color: #ed522e;
  width: 2%;
}

.ei-intro-title-b {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  width: 100%;
  margin-top: -20px;
  padding-left: 20px;
  padding-right: 115px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

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

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

.ei-intro-graphic-01 {
  z-index: 1;
  width: 15%;
  margin-top: 40px;
  margin-right: -1.6%;
  position: relative;
}

.ei-intro-graphic-02 {
  z-index: 1;
  width: 15%;
  margin-top: 40px;
  margin-left: -1.2%;
  position: relative;
}

.titile-name, .titile-name-text {
  letter-spacing: 10px;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: var(--white);
  white-space: pre-wrap;
  word-break: keep-all;
  align-items: center;
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
  display: flex;
}

.titile-name-top {
  color: #007e85;
  -webkit-text-stroke-width: 0px;
  line-height: 40px;
  position: absolute;
}

.school-list-station-top-b {
  position: relative;
}

.school-list-station-top-map-btn {
  margin-bottom: 10px;
  padding-top: 10px;
  padding-right: 115px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.common-title-txt-2 {
  z-index: 1;
  color: #fff;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
  position: relative;
}

.booth-form-content-2 {
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
}

.common-title-b-2 {
  background-color: #ef8340;
  border: 2px solid #fff;
  border-radius: 15px 15px 15px 0;
  margin-bottom: 15px;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px #0003;
}

.booth-txtarea-2 {
  color: #3c3d4f;
  background-color: #fff;
  border: 1px solid #badff5;
  border-radius: 5px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 150px;
  margin-bottom: 0;
  padding: 3% 6%;
  font-size: 16px;
  transition: border-color .5s, color .5s;
}

.booth-txtarea-2:focus {
  border-color: #3cc;
  box-shadow: 0 1px 2px #0006;
}

.booth-txtarea-2::placeholder {
  color: #3c3d4f73;
}

.booth-form-content-b-2 {
  background-color: #badff5;
  border-radius: 20px;
  padding: 10px;
}

.booth-form-success-b-2 {
  color: #3e4651;
  background-color: #ebebeb;
  border-radius: 10px;
  font-size: 1.2vw;
  font-weight: 700;
  line-height: 120%;
}

.booth-txtfield-2 {
  color: #3c3d4f;
  background-color: #fff;
  border: 1px solid #badff5;
  border-radius: 5px;
  height: auto;
  margin-bottom: 0;
  padding: 3% 6%;
  font-size: 16px;
  line-height: 120%;
  transition: border-color .5s, color .5s;
}

.booth-txtfield-2:focus {
  border-style: solid;
  border-color: #00b4ed;
}

.booth-txtfield-2::placeholder {
  color: #3c3d4f73;
}

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

.btn-booth-form-submit-2:hover {
  color: #86ead7;
}

.resource-centre-block {
  min-height: 65vh;
  margin-top: 40px;
  position: relative;
}

.resource-centre-block-bg {
  flex-flow: column;
  display: flex;
  position: absolute;
  inset: 0%;
}

.resource-centre-block-bg-top-part {
  display: flex;
}

.resource-centre-block-bg-top-part-l {
  background-color: #fff;
  border-top-left-radius: 10px;
  flex: 1;
  width: auto;
}

.resource-centre-block-bg-top-part-r {
  background-image: url('../images/resource-centre-block-bg-top.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  width: 10vw;
  height: 10vw;
}

.resource-centre-block-bg-bottom-part {
  background-color: #fff;
  flex: 1;
  width: auto;
}

.resource-centre-info-block {
  z-index: 2;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  padding: 60px;
  display: flex;
  position: relative;
}

.resource-centre-sort-block.top {
  padding-left: 10%;
  padding-right: 10%;
}

.resource-centre-title-block {
  color: var(--green);
  border-bottom: 1px solid #b0b0b0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 900;
  line-height: 120%;
}

.resource-centre-row-block {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  display: flex;
}

.resource-centre-col-block {
  border-left: 5px solid var(--green);
  color: #4e6084;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  transition: background-color .8s;
}

.resource-centre-col-block:hover {
  color: #4e6084;
  background-color: #ddd;
}

.resource-centre-info-top-l-image {
  width: 15vw;
  height: 15vw;
  margin-top: -2vw;
  margin-left: -2vw;
  position: absolute;
  inset: 0% auto auto 0%;
}

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

.img-minus {
  width: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.timetable-vid-pop-icon {
  width: 50px;
  height: 50px;
  margin-top: -30px;
  margin-right: -30px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.replay-video-block {
  border-radius: 30px;
  overflow: hidden;
}

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) {
  .container {
    padding-left: 100px;
    padding-right: 100px;
  }

  .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-moreinfo {
    margin-left: -8.8%;
  }

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

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

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

  .exhibition-col-main.popup-scroll {
    padding-right: 260px;
  }

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

  .icon-locator {
    width: 22px;
  }

  .no-margin {
    margin: 0;
  }

  .common-shahows-btn.padding-top-bottom-10.deep-green-gradient {
    background-image: linear-gradient(0deg, #91c97a 60%, #519e52);
  }

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

  .booth-content-wrap {
    z-index: 1;
    position: relative;
  }

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

  .booth-num-txt {
    line-height: 100%;
  }

  .booth-bg-img-bigger {
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 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;
  }

  .school-list-inner-b {
    margin-left: 9.5%;
    margin-right: 10%;
  }

  .school-list-inner-log {
    flex-flow: column;
    width: 32%;
    display: flex;
  }

  .school-list-inner-line {
    width: 3%;
  }

  .ei-intro-graphic-01 {
    justify-content: flex-end;
    align-items: flex-start;
    margin-right: -15px;
    display: flex;
  }

  .ei-intro-graphic-02 {
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: -10px;
    display: flex;
  }

  .image-2 {
    width: 280px;
  }

  .ei-intro-graphic-image {
    max-height: 300px;
  }

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

  .resource-centre-sort-block.top {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

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

  h2 {
    font-size: 28px;
  }

  .header {
    margin-bottom: 0;
    display: inline-block;
    inset: 0% 0% auto auto;
    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;
    background-color: var(--white);
    width: 100vw;
    height: 100vh;
    padding-top: 100px;
    padding-bottom: 40px;
    position: fixed;
    inset: 0% auto auto 0%;
    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: #0000;
  }

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

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

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

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

  .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 {
    background-image: url('../images/booth-bg-long2x.jpg'), linear-gradient(90deg, #3c281d, #483429 27%, #4e382d 54%, #573d2e 67%, #3d2b23);
    background-position: 50% 0, 0 0;
    background-repeat: repeat-x, repeat;
    background-size: 100%, auto;
    height: 100dvh;
    padding-left: 20px;
    padding-right: 20px;
  }

  .booth-item-b.v-booth-intro {
    width: 6%;
    margin-left: 68.4%;
    transform: rotate(3deg);
  }

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

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

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

  .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;
    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%;
    width: 60px;
    height: 60px;
    margin-top: 90px;
    margin-right: 40px;
    padding-bottom: 0;
    padding-right: 0;
    transition: background-color .5s;
    display: block;
    position: fixed;
    inset: 0% 0% auto auto;
  }

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

  .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: 28px;
    margin-left: -24.5px;
  }

  .btn-questionaire-txt {
    width: 70px;
    padding-top: 4px;
    font-size: 15px;
  }

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

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

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

  .symbol-titile-block {
    width: 44%;
    margin-top: 15px;
    margin-left: 15px;
  }

  .symbol-titile-line {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .symbol-titile-name {
    font-size: 30px;
    line-height: 30px;
  }

  .symbol-titile-name-top {
    line-height: 30px;
  }

  .school-list-title-b {
    justify-content: space-between;
    align-items: center;
    padding-left: 60px;
    padding-right: 60px;
  }

  .school-list-station-b {
    padding-top: 25vh;
    padding-bottom: 25vh;
  }

  .school-list-inner-b {
    margin-left: 9vw;
    margin-right: 9.4vw;
  }

  .titile-name, .titile-name-text {
    font-size: 30px;
    line-height: 30px;
  }

  .titile-name-top {
    line-height: 30px;
  }

  .school-list-station-top-map-btn {
    padding-right: 0;
    right: 50%;
    transform: translate(50%);
  }

  .school-list-station-top-map-btn.m-hides {
    display: none;
  }

  .school-list-bottom-b {
    position: relative;
  }

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

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

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

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

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

  .resource-centre-info-block {
    padding: 40px;
  }

  .timetable-vid-pop-icon {
    width: 50px;
    height: 50px;
  }
}

@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 #0000001a;
  }

  .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;
    inset: auto 0% 0% auto;
  }

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

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

  .footer-deco.v-right {
    inset: 0% 0% auto auto;
  }

  .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;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }

  .icon-drag {
    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%;
    width: 100px;
    height: 100px;
    padding-top: 56px;
    font-size: 12px;
    line-height: 14px;
  }

  .popup-b {
    height: 100dvh;
  }

  .popup-b.popup-scroll {
    opacity: 0;
    display: none;
  }

  .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 {
    flex: none;
    width: 100%;
    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 {
    flex-wrap: wrap;
    align-items: flex-start;
    width: auto;
    margin-bottom: -10px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .form-radio-col {
    flex: 0 auto;
    width: 50%;
    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 {
    width: 100%;
    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;
    padding-top: 20px;
    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-vid-b.deep-green-gradient {
    border-radius: 15px;
  }

  .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 {
    margin-top: 3.2%;
    font-size: 21px;
  }

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

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

  .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;
    margin-right: 0;
  }

  .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;
    display: none;
  }

  .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: 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: 3vw;
  }

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

  .symbol-titile-block {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .symbol-titile-name {
    letter-spacing: 5px;
    -webkit-text-stroke-width: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
  }

  .symbol-titile-name-top {
    line-height: 20px;
  }

  .school-list-title-b {
    padding-left: 20px;
    padding-right: 20px;
  }

  .school-list-title-b.center._45-down-margin {
    margin-bottom: 20px;
  }

  .school-list-station-b {
    padding-top: 25vh;
    padding-bottom: 25vh;
  }

  .school-list-inner-b {
    margin-left: 9.5%;
    margin-right: 9.5%;
  }

  .school-list-inner-row-b {
    flex-flow: column;
  }

  .school-list-inner-log {
    width: 100%;
  }

  .school-list-inner-line {
    display: none;
  }

  .ei-intro-title-b {
    z-index: 2;
    justify-content: space-between;
    margin-top: -10px;
    padding-right: 20px;
  }

  .ei-intro-graphic-01, .ei-intro-graphic-02 {
    display: none;
  }

  .titile-name {
    letter-spacing: 5px;
    -webkit-text-stroke-width: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
  }

  .titile-name-text {
    letter-spacing: 5px;
    -webkit-text-stroke-width: 2px;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
  }

  .titile-name-top {
    font-size: 30px;
    line-height: 30px;
  }

  .school-list-station-top-map-btn {
    margin-bottom: 5px;
  }

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

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

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

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

  .resource-centre-block-bg-top-part-r {
    width: 12vw;
    height: 12vw;
  }

  .resource-centre-info-block {
    padding: 20px;
  }

  .resource-centre-sort-block.top {
    padding-left: 15%;
  }

  .resource-centre-col-block {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .timetable-vid-pop-icon {
    width: 40px;
    height: 40px;
    margin-top: -15px;
    margin-right: -15px;
  }

  .replay-video-block {
    border-radius: 15px;
  }

  .image-3 {
    width: 45px;
    height: 45px;
  }
}

@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 {
    flex: none;
    width: 100%;
    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: 1px solid #4e6084;
    border-right-width: 0;
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
    padding-bottom: 10px;
    display: inline-block;
  }

  .school-list-b {
    padding-top: 20px;
  }

  .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 {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .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: 68px;
  }

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

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

  .symbol-titile-block {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 70%;
  }

  .symbol-titile-name {
    letter-spacing: 4px;
    -webkit-text-stroke-width: 2px;
    font-size: 16px;
    line-height: 16px;
  }

  .symbol-titile-name-top {
    line-height: 16px;
  }

  .school-list-title-b {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
  }

  .titile-name {
    letter-spacing: 4px;
    -webkit-text-stroke-width: 2px;
    font-size: 16px;
    line-height: 16px;
  }

  .titile-name-text {
    letter-spacing: 4px;
    -webkit-text-stroke-width: 2px;
  }

  .titile-name-top {
    font-size: 30px;
    line-height: 30px;
  }

  .school-list-station-top-map-btn {
    padding-top: 40px;
    inset: 0% auto auto 0%;
    transform: none;
  }

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

  .resource-centre-block-bg-top-part-r {
    width: 20vw;
    height: 20vw;
  }

  .resource-centre-sort-block.top {
    margin-top: 40px;
    padding-left: 0%;
    padding-right: 0%;
  }

  .resource-centre-col-block {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .resource-centre-info-top-l-image {
    width: 100px;
    height: 100px;
    margin-top: -40px;
    margin-left: -10px;
  }
}

#w-node-_19755af1-ed59-d39a-fcf8-444b1f31e61d-057ea0a6 {
  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-057ea0a6, #w-node-a532012f-366d-167f-c65c-b1b01cb87e55-057ea0a6 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-_0b8df61b-bea8-e8df-5b05-b9e072e02c37-057ea0a6 {
  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-057ea0a6, #w-node-_0b8df61b-bea8-e8df-5b05-b9e072e02d31-057ea0a6 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}