/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poetsen+One&display=swap');
@font-face {
  font-family: 'PangMen';
  src: 
      url('../images/Dance/蒙纳繁清华字体-Xbold.otf') format("truetype"), 
     
}
.major-mono-display-regular {
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
}
.poetsen-one-regular {
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*-----------------------for both-----------------------*/
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
  #intro {
    background: url("../images/Dance/themeBG.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
      #saleIntro {
    background: url("../images/Dance/themeBG.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #one {
    background: url("../images/Dance/BG-1.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    height: 900px;
  }
  .inner h1 {
    font-size: 40px;
    padding: 0px;
    margin: 0px;
    color: #ff79be
  }
  .inner h3 {
    text-align: center;
    font-size: 60px;
    font-family: 'PangMen', "ar-fangxinshuh7b5std", sans-serif;
    font-weight: bolder;
    font-style: normal;
  }
  .inner h4 {
  /*  font-weight: normal;*/
    /*font-size: 20px;*/
    /*color: #fff;*/
    /*margin: 20px 0px;*/
  }
  .eventWrapper {
    display: flex;
    /*flex-wrap: nowrap;
    flex-direction: row;*/
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .eventWrapper li {
    display: block;
    width: 24%;
    margin: 1%;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 30px 10px 20px 10px;
    border: 1px solid #fff;
    font-family: "Poetsen One", "adobe-fan-heiti-std", sans-serif;
    /*font-weight:bolder;*/
    /* font-style: normal;*/
    transition: 400ms;
    cursor: pointer;
  }
  .eventWrapper li:hover {
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #FFED00;
    color: #FFF500
  }
  .eventWrapper li h2 {
    font-size: 130%;
    transition: 400ms;
  }
  .eventWrapper li img {
      width: 100%;
    display: block;
    padding-bottom: 20px;
    transform: scale(.9, .9);
    transition: all .5s ease-out;
  }
  .eventWrapper li:hover img {
    transform: scale(.95, .95);
  }
  .eventWrapper li a:hover h2 {
    color: #FFFD00;
    font-size: 140%;
  }
  #two {
    background: url("../images/Dance/BG-2.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    height: 900px;
  }
  #three {
    background: url("../images/Dance/BG-3.png") #450026;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    height: 900px;
  }
  .btnP {
    margin: 0 auto;
    text-align: center;
  }
  /*  .contentA {
    padding: 5% 10% 0% 10%;
    background: url("../images/Dance/BG-32.png") #181743;
    background-position: top center;
    background-repeat: no-repeat;
    background-size:contain;
      padding: 0px;
  }*/
  /*.contentA {
    background-image: url(../images/Dance/BG-32.png), url(../images/Dance/BG-33.png), ;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 100PX 200PX;
    background-size: contain, 100PX 100PX;
    padding: 0px;
  }*/
  .multi_bg {
    background-image: url(../images/Dance/BG-12.png), url(../images/Dance/BG-13.png), linear-gradient(to right, rgba(52, 17, 109, 1), rgba(52, 17, 109, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743
  }
     .multi_bg_m {
    background-image: url(../images/Dance/BG-22.png), url(../images/Dance/BG-23.png), linear-gradient(to right, rgba(35, 7, 77, 1), rgba(35, 7, 77, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743
  }
    .multi_bg_b {
    background-image: url(../images/Dance/BG-32.png), url(../images/Dance/BG-33.png), linear-gradient(to right, rgba(24, 23, 67, 1), rgba(24, 23, 67, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743
  }
  #main {
    padding: 5% 2%;
    margin: 10%;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.4);
  }
    
     .eventList li {
    border-bottom: 1px solid #ddd;
    display: block;
    position: relative;
    padding: 10px 0;
    width: auto;
  }
  .eventList li:first-child {
    padding-top: 0;
  }
  .eventList li div.left {
    width: 160px;
    float: left;
    position: relative;
  }
  .eventList li div.right {
    width: auto;
    margin-left: 180px;
  }
  .eventList li div.right h4 em {
    font-weight: bold;
  }
  .eventList li div.right h4 span {
    font-size: 15px;
  }
  .eventList li div.left img {
     width: 30px;
      margin: 5px;
  }
  .eventList li div.left ol {
    display: flex;
    /*flex-wrap: nowrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }
  .eventList li div.left ol li {
    width: 20%;
    border: none;
      padding: 0px;
    margin: 5px;
   /* border: 1px solid #FFBBBC;*/
  }
  .eventList li div.right p {
    text-decoration: none;
  }
}
/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
  #intro {
    background: url("../images/Dance/themeM.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 290px;
    height: 700px;
  }
      #saleIntro {
    background: url("../images/Dance/saleM.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 290px;
    height: 700px;
  }
  #one {
    background: url("../images/Dance/BG-1.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 40px;
    height: 700px;
  }
  #two {
    background: url("../images/Dance/BG-2.png") #450026;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 40px;
    height: 700px;
  }
  #three {
    background: url("../images/Dance/BG-3.png") #441933;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 40px;
    height: 700px;
  }
  .inner p {}
  .inner h1 {
    font-size: 28px;
    padding: 0px;
    color: #ff79be;
    margin-bottom: 5px;
  }
  .inner h3 {
    text-align: center;
    font-size: 50px;
    font-family: 'PangMen', "ar-fangxinshuh7b5std", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0px;
  }
  .inner h4 {
   /* font-weight: normal;
    font-size: 20px;
    color: #fff*/
  }
  .eventWrapper {
    display: flex;
    /*flex-wrap: nowrap;
    flex-direction: row;*/
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0px;
  }
  .eventWrapper li {
    display: block;
    width: 48%;
    margin: 1%;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 5px;
    border: 1px solid #fff;
    font-family: "Poetsen One", "adobe-fan-heiti-std", sans-serif;
    /*font-weight:bolder;*/
    /* font-style: normal;*/
    transition: 400ms;
    cursor: pointer;
  }
  .eventWrapper li:hover {
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #FFED00;
    color: #FFF500
  }
  .eventWrapper li h2 {
    font-size: 100%;
    transition: 400ms;
  }
  .eventWrapper li img {
    display: block;
    padding-bottom: 10px;
    transform: scale(.9, .9);
    transition: all .5s ease-out;
  }
  .eventWrapper li:hover img {
    transform: scale(.95, .95);
  }
  .eventWrapper li a:hover h2 {
    color: #FFFD00;
    font-size: 140%;
  }
  .botton {
    border: 1px solid #FF0084
  }
 .multi_bg {
    background-image: url(../images/Dance/BG-12.png), url(../images/Dance/BG-13.png), linear-gradient(to right, rgba(52, 17, 109, 1), rgba(52, 17, 109, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743;
    padding: 30px 0px 70px 0px;

   
  }
        .multi_bg_m {
    background-image: url(../images/Dance/BG-22.png), url(../images/Dance/BG-23.png), linear-gradient(to right, rgba(35, 7, 77, 1), rgba(35, 7, 77, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743;
    padding: 30px 0px 70px 0px;

   
  }
     .multi_bg_b {
    background-image: url(../images/Dance/BG-32.png), url(../images/Dance/BG-33.png), linear-gradient(to right, rgba(24, 23, 67, 1), rgba(24, 23, 67, 1));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, bottom center, right;
    background-size: contain, contain;
    border: 1px solid #181743;
    padding: 30px 0px 70px 0px;

   
  }
  #main {
    padding: 1% 1%;
    margin: 3%;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.4);
  }
    .mobileIntro h1{ font-size: 40px;font-family: 'PangMen', "ar-fangxinshuh7b5std", sans-serif; font-weight: 400;
    font-style: normal; color: #EED44B; }
    .mobileIntro h3{ margin-top: 60px;font-size: 17px;font-family:"ar-fangxinshuh7b5std", sans-serif; margin-bottom: 10px; color: #FF0084 }
    .mobileIntro h3 span{color: #EED44B;}
    .mobileIntro h4{ font-size: 16px;}
    
    .eventList li {
    border-bottom: 1px solid #ddd;
    display: block;
    width: auto;
    padding: 10px 0;
  }
  .eventList li:first-child {
    padding-top: 0;
  }
  .eventList li div.left {
    width: 22%;
    float: left;
    position: relative;
  }
  .eventList li div.right h4 {
    font-size: 21px
  }
  .eventList li div.right h5 {
    font-size: 18px
  }
  .eventList li div.right {
    width: auto;
    margin-left: 25%;
  }
  .eventList li div.left img {
    width: 30px; margin: 3px;
  }
  .eventList li div.left ol {
    display: flex;
    /*flex-wrap: nowrap;
    flex-direction: row;*/
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  .eventList li div.left ol li {
    width: 40%;
    border: none;
      padding: 0px;
    margin: 5px;
   /* border: 1px solid #FFBBBC;*/
  }
  .eventList li div.right p {
    text-decoration: none;
  }
}