/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap');
/* general styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@keyframes float {
  0% {
    /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
    transform: translatey(0px);
  }
  50% {
    /*box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
    transform: translatey(-20px);
  }
  100% {
    /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
    transform: translatey(0px);
  }
}
article {
  /*background-image: url("../images/event/island/bgpatten.png");
  background-repeat: repeat;
  background-color: #f6d7c2;*/
}
#open {
  display: none
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce {
  animation-name: bounce;
  animation-timing-function: ease;
}
.shake:hover {
  animation-name: shake;
  -webkit-animation-name: shake;
  -moz-animation-name: shake;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
.swing:hover {
  animation-name: swing;
  -webkit-animation-name: swing;
  -moz-animation-name: swing;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
  .islandWrapper {
    width: 100%;
    min-width: 1200px;
    background: linear-gradient(to bottom, #79c7e8 0%, #eceed9 30%, #79c7e8 60%, #ebbfd6 100%);
    /*background-image: url("../images/event/island/theme.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;*/
    /*height: 1000px*/
  }
  .cityContainer {
    background-image: url("../images/event/island/theme.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    padding: 5%;
  }
  .cityWrap {
    background: #fff;
    _filter: alpha(opacity=80); /*IE6*/
    filter: alpha(opacity=80); /*IE7*/
    -moz-opacity: 0.60; /*fireFox*/
    background: rgba(255, 255, 255, 0.85); /*白色, 透明度75% /*chrome*/
    padding: 30px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }
  .islandcontainer {
    /*  background-image: url("../images/event/island/theme.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;*/
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .cityIntro {
    display: block;
    height: auto;
    min-width: 1200px;
    margin: 0 auto;
  }
  .cityGuide {
    display: block;
    height: 0px;
    min-width: 1200px;
    margin: 0 auto 0 auto;
    z-index: 20px
  }
  .cityList {
    position: relative;
    min-width: 1200px;
    height: 1000px;
    background: url("../images/event/island/cityLand.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 0px;
  }
  .FranceGallery {
    display: block;
    position: absolute;
    top: 15%;
    left: 5%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 90;
  }
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: -1%;
    right: 30%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 91;
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 20%;
    left: 56%;
    /*transform: translate(-50%, -30%);*/
    width: 26%;
    height: 28%;
    z-index: 92
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 27%;
    left: 25%;
    /*transform: translate(-50%, -30%);*/
    width: 25%;
    height: 28%;
    z-index: 91;
  }
  .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: 43%;
    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 {
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 101;
    opacity: 0;
    /*	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;*/
  }
  .tag:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  .city {
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5
  }
  .city:hover {}
  .mapPin {
    position: absolute;
    bottom: 15%;
    right: 0%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinL {
    position: absolute;
    bottom: 40%;
    right: 0%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinLL {
    position: absolute;
    bottom: 20%;
    left: 5%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinLLL {
    position: absolute;
    bottom: 20%;
    left: 20%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinLLLL {
    position: absolute;
    bottom: 20%;
    left: 50%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .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);
  }
  .fade-in:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
  }
 /* @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }*/
  .GuideContainer {
    display: block;
    background-image: url("../images/event/island/guideBG.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
     height: 2300px;
    z-index: 23px;
    margin-top: 0px
  }
  .chooseList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    
    padding-top: 30%;
  }
  .guideList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 30%;
  }
  .choose {
    width: 30%;
    /*    margin: 0.5%;*/
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 3s ease-in-out infinite;
    text-align: center;
    /*cursor: pointer;*/
  }
  .choose a img {
    width: 95%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    /* CSS3淡出淡入效果,1秒 */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    transform: scale(0.9, 0.9);
    transition: all 1s ease-out;
  }
  .choose a:hover img {
    width: 100%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    transform: scale(1, 1);
  }
  .vote {
    width: 100%;
    /*    margin: 0.5%;*/
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 3s ease-in-out infinite;
    text-align: center;
  }
  .vote a img {
    width: 90%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    /* CSS3淡出淡入效果,1秒 */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    transform: scale(0.9, 0.9);
    transition: all 1s ease-out;
  }
  .vote a:hover img {
    width: 100%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    transform: scale(1, 1);
  }
  .guide {
    width: 30%;
    margin: 0.5%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .guide a img {
    width: 95%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    /* CSS3淡出淡入效果,1秒 */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    transform: scale(0.9, 0.9);
    transition: all 0.5s ease-out;
  }
  .guide a:hover img {
    width: 100%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    transform: scale(1, 1);
  }
  .Narrator {
    display: block;
    width: 50%;
    margin: 0 auto 0 auto
  }
}
/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
  .islandWrapper {
    width: 100%;
    background: linear-gradient(to bottom, #79c7e8 0%, #eceed9 30%, #79c7e8 60%, #ebbfd6 100%);
  }
  .Train {
    width: 100%;
    background-image: url("../images/event/island/themeTrainM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    /*padding-bottom: 40%;*/
    height: 520px;
    text-align: center;
  }
  .countdown {
    display: inline-block;
    text-align: center;
    margin-top: 310px;
  }
  .countdown li {
    display: inline-block;
    font-size: 13px;
    list-style-type: none;
    padding: 2px;
    text-transform: uppercase;
    font-family: "Oswald";
  }
  .countdown li span {
    display: block;
    height: 60px;
    width: 60px;
    font-size: 30px;
    border-radius: 20%;
    background: #fff;
    color: #000;
    padding: 15px 10px 10px 10px;
    font-family: 'Oswald', 'Noto Sans TC', sans-serif;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 5px #474747;
    border: 3px solid #000000;
  }
  .islandcontainer {
    /*    background-image: url("../images/event/island/themeM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;*/
    width: 100%;
    height: 600px;
    /*    height: 100%;*/
  }
  .islandList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 80%;
  }
  .island {
    width: 80%;
    margin: 0.5%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .island a img {
    width: 100%;
    /*height: auto;*/
    opacity: 0.8;
    filter: alpha(opacity=80); /*  IE8 以及更早的版本 */
    /* CSS3淡出淡入效果,1秒 */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    transform: scale(0.9, 0.9);
    /*transition: all 1s ease-out;*/
  }
  .island a:hover img {
    width: 100%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    transform: scale(1, 1);
  }
  .GuideContainer {
    display: block;
    /*background-image: url("../images/event/island/guideBGM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;*/
    width: 100%;
  }
  .chooseList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 32%;
  }
  .guideList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 58%;
  }
  .choose {
    width: 100%;
    margin: 0%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .guide {
    width: 80%;
    margin: 0%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .Narrator {
    display: block;
    width: 80%;
    margin: 0 auto 0 auto
  }
  .Narrator h2 {
    font-size: 15px
  }
  .islandcontainer {
    /*  background-image: url("../images/event/island/themeM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;*/
    width: 100%;
    height: 1100px;
    display: flex;
    align-items: flex-start;
    justify-content: center
  }
  .cityIntroM {
    display: block;
    height: auto;
    width: 100%;
    margin: 0 auto;
  }
  .cityGuideM {
    display: block;
    height: auto;
    width: 100%;
    margin-top: 40px;
  }
  .cityList {
    position: relative;
    display: block;
    width: 100%;
    background: url("../images/event/island/cityLandM.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
  }
  .BrazilCarnival {
    display: block;
    position: absolute;
    top: 0%;
    left: 5%;
    /*transform: translate(-50%, -30%);*/
    width: 48%;
    height: 50%;
    z-index: 70;
  }
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: 7%;
    right: 12%;
    /*transform: translate(-50%, -30%);*/
    width: 45%;
    height: 28%;
    z-index: 71
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 18%;
    right: 0%;
    /*transform: translate(-50%, -30%);*/
    width: 52%;
    height: 28%;
    z-index: 72
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 32%;
    right: 15%;
    /*transform: translate(-50%, -30%);*/
    width: 52%;
    height: 28%;
    z-index: 73
  }
  .EnglandSchool {
    display: block;
    position: absolute;
    top: 49%;
    right: 7%;
    /*transform: translate(-50%, -30%);*/
    width: 46%;
    height: 28%;
    z-index: 75
  }
  .FranceGallery {
    display: block;
    position: absolute;
    top: 73%;
    right: 10%;
    /*transform: translate(-50%, -30%);*/
    width: 47%;
    height: 28%;
    z-index: 77
  }
  .MeowVerse {
    display: block;
    position: absolute;
    top: 58%;
    left: 7%;
    /*transform: translate(-50%, -30%);*/
    width: 45%;
    height: 28%;
    z-index: 76
  }
  .tag {
    top: 0px;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 101;
    opacity: 1;
    /*	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;*/
  }
  .tag:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  .city {
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5
  }
  .mapPin {
    position: absolute;
    bottom: 35%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinL {
    position: absolute;
    bottom: 45%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinLL {
    position: absolute;
    bottom: 60%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
     
  .mapPinLLL {
    position: absolute;
    top: 35%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
     .mapPinLLLL {
    position: absolute;
    top: 30%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
}
/*------------------for mobile------------------------*/
@media screen and (max-width:430px) {
  .islandWrapper {
    width: 100%;
    background: linear-gradient(to bottom, #79c7e8 0%, #eceed9 10%, #79c7e8 25%, #ebbfd6 80%);
  }
  .Train {
    width: 100%;
    background-image: url("../images/event/island/themeTrainM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    /*padding-bottom: 40%;*/
    height: 520px;
    text-align: center;
  }
  .countdown {
    display: inline-block;
    text-align: center;
    margin-top: 310px;
  }
  .countdown li {
    display: inline-block;
    font-size: 13px;
    list-style-type: none;
    padding: 2px;
    text-transform: uppercase;
    font-family: "Oswald";
  }
  .countdown li span {
    display: block;
    height: 60px;
    width: 60px;
    font-size: 30px;
    border-radius: 20%;
    background: #fff;
    color: #000;
    padding: 15px 10px 10px 10px;
    font-family: 'Oswald', 'Noto Sans TC', sans-serif;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 5px #474747;
    border: 3px solid #000000;
  }
  .islandcontainer {
    /*    background-image: url("../images/event/island/themeM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;*/
    width: 100%;
    height: 600px;
    /*    height: 100%;*/
  }
  .islandList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 80%;
  }
  .island {
    width: 80%;
    margin: 0.5%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .island a img {
    width: 100%;
    /*height: auto;*/
    opacity: 0.8;
    filter: alpha(opacity=80); /*  IE8 以及更早的版本 */
    /* CSS3淡出淡入效果,1秒 */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    transform: scale(0.9, 0.9);
    transition: all 1s ease-out;
  }
  .island a:hover img {
    width: 100%;
    /*height: auto;*/
    opacity: 1;
    filter: alpha(opacity=100); /*  IE8 以及更早的版本 */
    transform: scale(1, 1);
  }
  .GuideContainer {
    display: block;
       background-image: url("../images/event/island/guideBGM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
  }
  .chooseList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 65%;
  }
  .guideList {
    display: flex;
    /*flex-wrap: wrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-top: 72%;
  }
  .choose {
    width: 80%;
    margin: 0%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  }
  .guide {
    width: 80%;
    margin: 5%;
    /*height: 250px;*/
    /*box-sizing: border-box;*/
    /*border: 5px #20232c solid;*/
    /*  border-radius: 50%;*/
    /* overflow: hidden;*/
    /*box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.3);*/
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
  
  }
  .Narrator {
    display: block;
    width: 80%;
    margin: 0 auto 0 auto
  }
  .Narrator h2 {
    font-size: 15px
  }
  .islandcontainer {
    /*  background-image: url("../images/event/island/themeM.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;*/
    width: 100%;
    height: 1100px;
    display: flex;
    align-items: flex-start;
    justify-content: center
  }
  .cityIntroM {
    display: block;
    height: auto;
    width: 100%;
    margin: 0 auto;
  }
  .cityGuideM {
    display: block;
    height: 100px;
    width: 100%;
    margin-top: 0px;
  }
  .cityList {
    position: relative;
    display: block;
    width: 100%;
    background: url("../images/event/island/cityLandM.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    height: 1150px;
  }
  .EgyptPoopPicker {
    display: block;
    position: absolute;
    top: -3%;
    left: 15%;
    /*transform: translate(-50%, -30%);*/
    width: 55%;

    z-index: 71
  }
  .KoreaClinic {
    display: block;
    position: absolute;
    top: 10%;
    right: 25%;
    /*transform: translate(-50%, -30%);*/
    width: 55%;

    z-index: 72;
    
  }
  .FranceGallery {
    display: block;
    position: absolute;
    top: 30%;
    left: -3%;
    /*transform: translate(-50%, -30%);*/
    width: 52%;
  
    z-index: 73;
    
  }
  .AmericaArtSquare {
    display: block;
    position: absolute;
    top: 42%;
    right: 18%;
    /*transform: translate(-50%, -30%);*/
    width: 54%;
   
    z-index: 74;
  }
     .MeowVerse {
    display: block;
    position: absolute;
    top: 51%;
    left: -7%;
    /*transform: translate(-50%, -30%);*/
    width: 49%;
    
    z-index: 77
  }
  .EnglandSchool {
    display: block;
    position: absolute;
    top: 63%;
    right: 15%;
    /*transform: translate(-50%, -30%);*/
    width: 54%;

    z-index: 75
  }
 
  .BrazilCarnival {
    display: block;
    position: absolute;
    top: 79%;
    left: 19%;
    /*transform: translate(-50%, -30%);*/
   width: 50%;
   
    z-index: 78
  }
  .tag {
    top: 0px;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 101;
    opacity: 1;
    /*	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;*/
  }
  .tag:hover {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  }
  .city {
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5
  }
  .mapPin {
    position: absolute;
    bottom: 40%;
    right: 10%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinL {
    position: absolute;
    top: 40%;
    right: 10%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10;
   
  }
  .mapPinLL {
    position: absolute;
    bottom: 60%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  
  .mapPinLLL {
    position: absolute;
    top: 35%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
  .mapPinLLLL {
    position: absolute;
    top: 30%;
    right: 30%;
    /*align-self: flex-end;*/
    width: 20%;
    height: 20%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    z-index: 10
  }
}