@font-face {
  font-family: NotoSansTC;
  src: url("font/NotoSansTC-VariableFont_wght.ttf");
}

body {
  background-color: #eaf6fd;
}

.cover {
  position: relative;
  /* display: flex; */
  margin: 10px auto 0 auto;
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: flex-start; */
  width: 1500px;
  height: 815px;
}

.cover-image {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./images/cover/Cover.png") no-repeat center center/cover;
  z-index: 1;
}

.chi .cover-image{
  background: url("./images/cover/Cover_chi.png") no-repeat center center/cover !important;
}

#suggestion{
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
  height: 815px;
  overflow: hidden;
}

#suggestion:before{
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
  width: 1024px;
  height: 546px;
  opacity: 0.5;
  background-image: url("./images/cover/coverMobile.png");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.chi#suggestion:before{
  background-image: url("./images/cover/coverMobile_chi.png") !important;
}

#suggestion >div{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 1.2em;
  font-weight: 600;
  color: #000;
  text-align: center;
  width: 90%;
  padding-left: 5%;
  padding-right:5%;
}

.chi#suggestion > div{
  font-weight: 500 !important;
  font-size: 1.3em !important;
}

#learnMoreBtn {
  position: absolute;
  top: 52%;
  left: 10.5%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.chi #learnMoreBtn {
  left: 9.1% !important;
}

#learnMoreBtn:hover {
  content: url("./images/cover/LearnMoreBut_color.png?v=2");
}

.chi #learnMoreBtn:hover {
  content: url("./images/cover/LearnMoreBut_color_chi.png");
}

#text {
  position: absolute;
  top: 31%;
  left: 3%;
  z-index: 2;
  width: 40%;
  font-weight: 600;
  color: #2c88bc;
  text-align: justify;
}

.chi #text{
  width: 41%;
  font-size: 23px;
  font-weight: 500 !important;
  top: 29% !important;
  font-family: sans-serif;
  font-weight: bold;
}

#langBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
#langBtn:hover {
  content: url("./images/cover/LangBtn_color.png?v=2");
}

.chi #langBtn:hover {
  content: url("./images/cover/LangBtn_color_chi.png?v=2");
}

.container {
  width: 1500px;
  max-width: 1500px;
  height: 815px;
  padding: 0;
  margin: 10px auto 0 auto;
  /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
  /* display: flex;
    align-items: center;
    justify-content: center; */
  /* border: 1px solid #dddddd; */
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /* overflow: hidden; */
  display: none;
}
/* .autoCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.btn-group.d-flex {
  width: 100%;
  border-bottom: 6px solid #b9d0ea;
}

.btn-group:last-child(2) img{
  width: 18px;
}

.btn-group:nth-last-child(2) .dropdown-menu img{
  width: 20px;
  height: auto;
}

.btn-group:last-child .dropdown-menu{
  width: 300px;
}

.btn-default {
  background-color: #dbdbdb;
  color: #000000;
  border-width: 0;
  line-height: 1rem;
  margin-right: 5px;
  padding: 6px 12px;
}

.itss-navbar .btn-default {
  background: linear-gradient(to bottom, #e7e7e7, white 80%);
  color: #000000;
  margin-right: 0;
  padding: 6px 24px 6px 12px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0% 100%);
  border-radius: 10px 50px 0 0 !important;
  white-space: nowrap;
  font-weight: bold;
  /* box-sizing: content-box; */
}

.itss-navbar .btn-default.tier3 {
  background: linear-gradient(to bottom, #ede9e6, #ede9e6 80%);
}

.itss-navbar .btn-default.tier3 img {
  height: 30px;
  margin: -10px 10px -10px 30px;
}

.dropdown-menu {
  background-color: transparent;
  border: 0;
  width: 536px;
}

.itss-navbar .dropdown-menu .btn-default {
  border-bottom: solid 6px #b9d0ea;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.active,
.itss-navbar .btn-default.tier3:hover,
.itss-navbar .btn-default.tier3:focus,
.itss-navbar .btn-default.tier3:active {
  background: #8a95a1 !important;
  /* border-color: #8a95a1; */
  color: #ffffff;
}

.btn-default.unset:hover,
.btn-default.unset:focus,
.btn-default.unset:active {
  background-color: unset !important;
  background: linear-gradient(to bottom, #e7e7e7, white 80%) !important;
  color: #000000;
  cursor: context-menu;
}


.dropdown-item {
  color: #333333;
  margin-bottom: 5px;
  height: 35px;
}

.section {
  height:auto;
  display: none;
}

.section.active {
  display: block;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

/************************************ Seciton 2 CSS Start ************************************/
#section2-1,
#section2-2 {
  position: relative;
}

#section2-1 > img,
#section2-2 > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

#section2-1 > a,
#section2-2 > a {
  position: absolute;
}

#section2-1 > a > img,
#section2-2 > a > img {
  height: 75px;
}

.selection select {
  width: 200px;
}

#section2-1 a#pointer1 {
  left: 1080px;
  top: 120px;
}
#section2-1 a#pointer2 {
  left: 365px;
  top: 370px;
}

.chi #section2-1 a#pointer2 {
  left: 365px;
  top: 360px !important;
}

#section2-1 a#pointer3 {
  left: 510px;
  top: 465px;
}

#section2-2 a#pointer1 {
  left: 1085px;
  top: 125px;
}
#section2-2 a#pointer2 {
  left: 355px;
  top: 375px;
}

.chi #section2-2 a#pointer2 {
  left: 355px;
  top: 360px !important;
}


#section2-2 a#pointer3 {
  left: 510px;
  top: 470px;
}

.chi #section2-2 a#pointer3 {
  left: 510px;
  top: 465px !important;
}

#section2-1 a#pointer1 img:hover,
#section2-2 a#pointer1 img:hover {
  content: url("images/other-icon/pointer1_o.png?v=2");
}

#section2-1 a#pointer2 img:hover,
#section2-2 a#pointer2 img:hover {
  content: url("images/other-icon/pointer2_o.png?v=2");
}

#section2-1 a#pointer3 img:hover,
#section2-2 a#pointer3 img:hover {
  content: url("images/other-icon/pointer3_o.png?v=2");
}





/************************************ Seciton 2 CSS End ************************************/

.remark ol {
  font-size: 0.8rem;
  padding-left: 0.8rem;
  text-align: justify;
  padding-bottom: 10px;
}


@media (max-width: 1499px) {
  .container{
    width: 1024px;
  }

  /*Fanling/Sheung Shui*/
  #section2-1 a#pointer1{
    left: 725px !important;
    top: 68px !important;
  }

    /*Tin Shui Wai*/
    #section2-1 a#pointer2{
      left: 237px !important;
      top: 241px !important;
    }
  
    /*YuenLong*/
    #section2-1 a#pointer3 {
      left: 339px !important;
      top: 301px !important;
    }
  

  /*Tin Shui Wai*/
  .chi #section2-1 a#pointer2{
    left: 237px !important;
    top: 230px !important;
  }

  /*YuenLong*/
  .chi #section2-1 a#pointer3 {
    left: 339px !important;
    top: 299px !important;
  }


  /*Orthophotos*/
  /*Fanling/Sheung Shui*/
  #section2-2 a#pointer1{
    left: 725px !important;
    top: 68px !important;
  }

  /*Tin Shui Wai*/
  #section2-2 a#pointer2{
    left: 237px !important;
    top: 241px !important;
  }

  /*YuenLong*/
  #section2-2 a#pointer3{
    left: 339px !important;
    top: 301px !important;
  }

  /*Tin Shui Wai*/
  .chi #section2-2 a#pointer2{
    left: 237px !important;
    top: 230px !important;
  }

  /*YuenLong*/
  .chi #section2-2 a#pointer3{
    left: 339px !important;
    top: 299px !important;
  }


  /*Menu*/
  .dropdown-menu{
    width: 300px;
    font-size: 13px !important;
  }

  .btn-group:nth-last-child(2) .dropdown-menu img{
    width: 18px;
    height: auto;
  }
  
  .btn-group:last-child .dropdown-menu{
    width: 200px;
  }

  .btn-group:nth-last-child(2) .dropdown-menu{
    width: 400px;
  }

  .itss-navbar .dropdown-menu .btn-default{
    font-size: 13px;
  }

  .btn-group:nth-last-child(2) .dropdown-menu >a:last-child{
    height: 50px;
    white-space: break-spaces;
  }

  /*Cover*/
  .cover{
    width: 1024px;
    height:546px;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }

  #learnMoreBtn{
    height: 38px;
  }

  #text {
    width: 48%;
    font-size: 0.8em;
  }

  .chi #text{
    font-size: 1.1em;
  }

  .chi #text {
    width: 45%;
  }

  #learnMoreBtn{
    top: 54.5%;
  }

  .chi .btn-group:nth-last-child(2) .dropdown-menu >a:last-child{
    height: auto!important;
    white-space: break-spaces;
  }

}



/* @media (min-width: 1024px) and (max-width: 1499px) { */
/* @media (max-width: 1499px) {
  .container {
    width: 1024px;
    max-width: 1024px;
    height: 700px;
  }

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

  .section {
    height: 638px;
    display: none;
  }

  #section2 a#pointer1 {
    left: 735px;
    top: 65px;
  }

  #section2 a#pointer2 {
    left: 240px;
    top: 235px;
  }

  #section2 a#pointer3 {
    left: 340px;
    top: 300px;
  }
} */

/* @media (max-width: 1023px) {
    .container {
        width: 375px;
        max-width: 375px;
        height: auto;
    }

    .section {
        height: auto;
        display: none;
    }
} */