/* CSS Document
   airLine / city island 專用 CSS
*/
/* ===============================
   基本設定
================================ */
.islandWrapper, .islandWrapper * {
  box-sizing: border-box;
}
.islandWrapper {
  width: 100%;
  overflow-x: hidden;
}
.islandWrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.clear {
  clear: both;
}
/* ===============================
   動畫
================================ */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce {
  animation-name: bounce;
  animation-timing-function: ease;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ===============================
   PC：1201px 以上
================================ */
@media screen and (min-width: 1201px) {
  .NoShowInPC {
    display: none !important;
  }
  .NoShowInMobile {
    display: block !important;
  }
  .islandWrapper {
    width: 100%;
    min-width: 1200px;
    background: linear-gradient(to bottom, #f8e5c7 0%, #f8e5c7 60%, #abc4c6 80%, #57c1d1 100%);
  }
  .islandcontainer {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .cityIntro {
    display: block;
    width: 1200px;
    min-width: 1200px;
    height: auto;
    margin: 0 auto;
  }
  .cityList {
    position: relative;
    width: 1200px;
    min-width: 1200px;
    height: 1000px;
    margin: 0 auto;
    background: url("../images/event/island/cityLand.svg") no-repeat center top;
    background-size: 100% auto;
  }
  /* 各城市位置 */
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: -1%;
    right: 33%;
    width: 27%;
    height: 30%;
    z-index: 91;
  }

  .FranceGallery {
    display: block;
    position: absolute;
    top: 13%;
    left: 5%;
    width: 27%;
    height: 30%;
    z-index: 90;
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 25%;
    left: 22%;
    width: 28%;
    height: 31%;
    z-index: 91;
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 20%;
    left: 56%;
    /*transform: translate(-50%, -30%);*/
    width: 26%;
    height: 28%;
    z-index: 92
  }
  .MeowVerse {
    display: block;
    position: absolute;
    top: 50%;
    left: 19%;
    /*transform: translate(-50%, -30%);*/
    width: 23%;
    height: 28%;
    z-index: 98;
  }
  .EnglandSchool {
    display: block;
    position: absolute;
    top: 45%;
    left: 40%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 99;
  }
  .BrazilCarnival {
    display: block;
    position: absolute;
    top: 62%;
    left: 33%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 99
  }
  /* 城市圖與 tag */
  .city {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
  }
  .tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    opacity: 0;
  }
  .tag:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  .transUp {
    transition: .5s, color .10s;
    -webkit-transition: .5s, color .10s;
    -moz-transition: .5s, color .10s;
  }
  .transUp:hover {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
  }
  /* 地圖 pin */
  .mapPinKorea, .mapPinVerse, .mapPinEngland, .mapPinBrazil, .mapPinFrance, .mapPinAmerica, .mapPinEgypt {
    position: absolute;
    width: 20%;
    height: auto;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 990;
  }

  .mapPinFrance {
    bottom: 20%;
    left: 10%;
  }
  .mapPinAmerica {
    bottom: 20%;
    left: 50%;
  }
  .mapPinEgypt {
    bottom: 20%;
    left: 50%;
  }
  .mapPinKorea {
    bottom: 10%;
    right: 10%;
  }
  .mapPinVerse {
    bottom: 20%;
    left: 10%;
  }
  .mapPinEngland {
    bottom: 20%;
    left: 50%;
  }
  .mapPinBrazil {
    bottom: 20%;
    left: 50%;
  }
}
/* ===============================
   平板：801px ～ 1200px
   重點：不要 min-width:1200px
================================ */
@media screen and (min-width: 801px) and (max-width: 1200px) {
  .NoShowInPC {
    display: none !important;
  }
  .NoShowInMobile {
    display: block !important;
  }
  .islandWrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #f8e5c7 0%, #f8e5c7 60%, #abc4c6 80%, #57c1d1 100%);
  }
  .islandcontainer {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
  }
  .cityList {
    position: relative;
    width: 100% !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    aspect-ratio: 1200 / 1000;
    height: auto;
    background: url("../images/event/island/cityLand.svg") no-repeat center top;
    background-size: contain;
    overflow: visible;
  }
  .cityIntro {
    width: 100% !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  /* 各城市位置 */
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: -1%;
    right: 33%;
    width: 27%;
    height: 30%;
    z-index: 91;
  }

  .FranceGallery {
    display: block;
    position: absolute;
    top: 10%;
    left: 8%;
    width: 27%;
    height: 30%;
    z-index: 90;
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 22%;
    left: 25%;
    width: 28%;
    height: 31%;
    z-index: 91;
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 20%;
    left: 56%;
    /*transform: translate(-50%, -30%);*/
    width: 26%;
    height: 28%;
    z-index: 92
  }
  .MeowVerse {
    display: block;
    position: absolute;
    top: 50%;
    left: 19%;
    /*transform: translate(-50%, -30%);*/
    width: 23%;
    height: 28%;
    z-index: 98;
  }
  .EnglandSchool {
    display: block;
    position: absolute;
    top: 40%;
    left: 45%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 99;
  }
  .BrazilCarnival {
    display: block;
    position: absolute;
    top: 62%;
    left: 33%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 99
  }
  /* 城市圖與 tag */
  .city {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 5;
  }
  .tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 101;
    opacity: 1;
  }
  .city img, .tag img {
    width: 100%;
    height: auto;
  }
  /* 地圖 pin */
  .mapPinKorea, .mapPinVerse, .mapPinEngland, .mapPinBrazil, .mapPinFrance, .mapPinAmerica, .mapPinEgypt {
    position: absolute;
    width: 20%;
    height: auto;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 990;
  }
 .mapPinKorea {
    bottom: 20%;
    right: 10%;
  }
  .mapPinFrance {
    bottom: 20%;
    left: 10%;
  }
  .mapPinAmerica {
    bottom: 20%;
    left: 50%;
  }
  .mapPinEgypt {
    bottom: 20%;
    left: 50%;
  }
    .mapPinVerse {
    bottom: 20%;
    left: 50%;
  }
       .mapPinEngland {
    bottom: 20%;
    left: 50%;
  }
     .mapPinBrazil {
    bottom: 20%;
    left: 50%;
  }
}
/* ===============================
   手機 / 小平板：800px 以下
================================ */
@media screen and (max-width: 800px) {
  .NoShowInPC {
    display: block !important;
  }
  .NoShowInMobile {
    display: none !important;
  }
  .islandWrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #79c7e8 0%, #eceed9 10%, #79c7e8 25%, #ebbfd6 80%);
  }
  .islandcontainer {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    height: auto;
    display: block;
    overflow-x: hidden;
  }
  .cityIntroM {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .cityList {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    height: 1150px;
    margin: 0 auto;
    background: url("../images/event/island/cityLandM.svg") no-repeat center top;
    background-size:cover;
    overflow:hidden;
 
  }
  /* 各城市位置 */
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: 0%;
    left: 15%;
    width: 60%;
    height: 18%;
    z-index: 71;
  }

  .FranceGallery {
    display: block;
    position: absolute;
    top: 42%;
    left: -3%;
    width: 60%;
    height: 18%;
    z-index: 73;
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 60%;
    right: 15%;
    width: 60%;
    height: 18%;
    z-index: 74;
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 60%;
    right: 15%;
    width: 60%;
    height: 18%;
    z-index: 72;
  }
 
  .EnglandSchool {
    display: block;
    position: absolute;
    top: 60%;
    right: 15%;
    width: 60%;
    height: 18%;
    z-index: 76;
  }
  .BrazilCarnival {
    display: block;
    position: absolute;
    top: 60%;
    right: 15%;
    width: 60%;
    height: 18%;
    z-index: 77;
  }
     .MeowVerse {
    display: block;
    position: absolute;
    top: 60%;
    right: 15%;
    width: 60%;
    height: 18%;
    z-index: 78;
  }
  /* 城市圖與 tag */
  .city {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 5;
  }
  .tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 101;
    opacity: 1;
  }
  .city img, .tag img {
    width: 100%;
    height: auto;
  }
  .tag:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  .mapPinKorea, .mapPinVerse, .mapPinEngland, .mapPinBrazil, .mapPinFrance, .mapPinAmerica, .mapPinEgypt {
    position: absolute;
    width: 20%;
    height: auto;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 990;
  }

  .mapPinFrance {
    top: 60%;
    right: 10%;
  }
  .mapPinAmerica {
    top: 95%;
    right: 30%;
  }
  .mapPinEgypt {
    top: 70%;
    right: 30%;
  }
}
/* ===============================
   小手機微調：430px 以下
   這段只放需要微調的位置即可
================================ */
@media screen and (max-width: 430px) {
  .cityList {
     
    height: 1250px;
  }
  .EgyptPoopPicker {
    top: 0%;
    left: 10%;
    width: 60%;
    height: 18%;
  }

  .FranceGallery {
    top: 30%;
    left: -6%;
    width: 60%;
    height: 18%;
  }
  .AmericaArtSquare {
    top: 43%;
    right: 0%;
    width: 60%;
    height: 18%;
  }
  .KoreaClinic {
    top: 13%;
    right: 20%;
    width: 60%;
    height: 18%;
  }
  .MeowVerse {
    top: 51%;
    left: -10%;
    width: 60%;
    height: 18%;
  }
  .EnglandSchool {
    top: 61%;
    right: 15%;
    width: 60%;
    height: 18%;
  }
  .BrazilCarnival {
    top: 75%;
    right: 25%;
    width: 60%;
    height: 18%;
  }
 
  .mapPinFrance {
    top: 45%;
    right: 10%;
  }
  .mapPinAmerica {
    top: 55%;
    right: 30%;
  }
  .mapPinEgypt {
    top: 60%;
    left: 10%;
  }
    
  .mapPinVerse {
    top: 60%;
    right: 30%;
  }
      .mapPinEngland {
    top: 60%;
    right: 15%;
  }
      .mapPinBrazil {
    top: 50%;
    right: 30%;
  }
      .mapPinKorea {
    top: 60%;
    right: 10%;
  }
    
    
}