/* =========================================
   Reset
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul li{
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;

  /* overflow: hidden; */

  
}
.wrapper{
  overflow: hidden;
    background: #42a89f;
    background: #44a397; 
        background: -webkit-linear-gradient(to right, #44a397, #f5f1bd, #44a397); 
        background: linear-gradient(to bottom, #44a397, #f5f1bd, #44a397);
}

/* =========================================
   舞台
========================================= */

.stage {

  position: relative;

  /* width: 100vw; */
  height: 100vh;

  overflow: hidden;
  background: #44a397; 
        background: -webkit-linear-gradient(to right, #44a397, #f5f1bd); 
        background: linear-gradient(to bottom, #44a397, #f5f1bd);


}




.layer {

  position: absolute;

  display: block;

  pointer-events: none;

  user-select: none;

}


/* =========================================
   背景
========================================= */

.bg {

  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

}


/* =========================================
   飄落裝飾容器
========================================= */

.falling-container {

  position: absolute;

  inset: 0;

  z-index: 10;

  pointer-events: none;

}


/* =========================================
   所有飄落 PNG
========================================= */

.falling {

  position: absolute;

  display: block;

  width: auto;
  height: auto;

  opacity: 0;

  pointer-events: none;

}


/* =========================================
   花朵
========================================= */

.flower-01 {

  width: 106px;

  right: 13%;

  top: -5%;

  --delay: 0s;

  --duration: 2.25s;

}


.flower-02 {

  width: 91px;

  right: 18%;

  top: -14%;

  --delay: .15s;

  --duration: 2.5s;

}


.flower-03 {

  width: 93px;

  right: 45%;

  top: -1%;

  --delay: .35s;

  --duration: 2.25s;

}


/* =========================================
   音符
========================================= */

.note-01 {

  width: 84px;

  right: 14%;

  top: 10%;

  --delay: .1s;

  --duration: 2.5s;

}


.note-02 {

  width: 70px;

  right: 34%;

  top: 5%;

  --delay: .4s;

  --duration: 2.5s;

}


.note-03 {

  width: 56px;

  right: 50%;

  top: 15%;

  --delay: .6s;

  --duration: 2.4s;

}


/* =========================================
   星星
========================================= */

.star-01 {

  width: 99px;

  right: 5%;

  top: 23%;

  --delay: .2s;

  --duration: 2.5s;

}


.star-02 {

  width: 48px;

  right: 28%;

  top: 18%;

  --delay: .5s;

  --duration: 2.5s;

}


.star-03 {

  width: 114px;

  right: 51%;

  top: 7%;

  --delay: .75s;

  --duration: 2.5s;

}


/* =========================================
   其他裝飾
========================================= */

.shape-01 {

  width: 70px;

  right: 18%;

  top: 28%;

  --delay: .3s;

  --duration: 2.5s;

}


/* =========================================
   飄落動畫
========================================= */

.falling {

  animation:

    fallingIn
    var(--duration)
    cubic-bezier(.2, .65, .35, 1)
    var(--delay)
    forwards;

}


@keyframes fallingIn {

  0% {

    opacity: 0;

    transform:

      translate3d(
        180px,
        -100px,
        0
      )

      rotate(-20deg)
      scale(.3);

  }


  15% {

    opacity: 1;

  }


  55% {

    opacity: 1;

  }


  100% {

    opacity: 1;

    transform:

      translate3d(
        -325px,
        250px,
        0
      )

      rotate(360deg)
      scale(1);

  }

}


/* =========================================
   Logo
========================================= */

.logo-group {

  position: absolute;

  z-index: 30;

  left: 50%;
  top: 22%;

  width: 420px;

  transform:
    translate(-50%, -50%);

}


/* =========================================
   Chill
========================================= */

.logo-chill {

  position: absolute;

  width: 100%;

  left: 0;
  top: 0;

  opacity: 0;

  transform:

    scale(.2)
    rotate(-15deg);

  transform-origin: center;

  animation:

    logoChillIn
    1s
    cubic-bezier(.16, 1.5, .3, 1)
    .4s
    forwards;

}


/* =========================================
   好時光
========================================= */

.logo-goodtime {

  position: absolute;

  width: 92%;

  left: 4%;

  top: 115px;

  opacity: 0;

  transform:

    scale(.2)
    rotate(10deg);

  transform-origin: center;

  animation:

    logoGoodTimeIn
    1s
    cubic-bezier(.16, 1.5, .3, 1)
    .7s
    forwards;

}


@keyframes logoChillIn {

  0% {

    opacity: 0;

    transform:

      scale(.2)
      rotate(-15deg);

  }


  45% {

    opacity: 1;

    transform:

      scale(1.15)
      rotate(4deg);

  }


  70% {

    transform:

      scale(.94)
      rotate(-2deg);

  }


  100% {
    opacity: 1;
    transform:
      scale(1)
      rotate(0);

  }

}


@keyframes logoGoodTimeIn {
  0% {
    opacity: 0;
    transform:      scale(.2)      rotate(10deg);
    -webkit-transform:      scale(.2)      rotate(10deg);
    -moz-transform:      scale(.2)      rotate(10deg);
    -ms-transform:      scale(.2)      rotate(10deg);
    -o-transform:      scale(.2)      rotate(10deg);
}
  45% {
    opacity: 1;
    transform:    scale(1.12)      rotate(-4deg);
    -webkit-transform: scale(1.12)      rotate(-4deg);
    -moz-transform:scale(1.12)      rotate(-4deg);
    -ms-transform:scale(1.12)      rotate(-4deg);
    -o-transform:scale(1.12)      rotate(-4deg);
}
  70% {
    transform: scale(.95)      rotate(2deg);
    -webkit-transform: scale(.95)      rotate(2deg);
    -moz-transform: scale(.95)      rotate(2deg);
    -ms-transform: scale(.95)      rotate(2deg);
    -o-transform: scale(.95)      rotate(2deg);
}
  100% {
    opacity: 1;
    transform:      scale(1)      rotate(0);
    -webkit-transform:   scale(1)      rotate(0);
    -moz-transform:   scale(1)      rotate(0);
    -ms-transform:   scale(1)      rotate(0);
    -o-transform:   scale(1)      rotate(0);
}

}


/* =========================================
   Logo 最後微微漂浮
========================================= */

.logo-group {
  animation:    logoFloat    1.5s    ease-in-out    2s    infinite;
  -webkit-animation:    logoFloat    1.5s    ease-in-out    2s    infinite;
}


@keyframes logoFloat {

  0% {

    margin-top: 0;

  }

  50% {

    margin-top: -7px;

  }

  100% {

    margin-top: 0;

  }

}


/* =========================================
   QueenShop 20週年
========================================= */

.queenshop {

  position: absolute;

  z-index: 35;

  width: 400px;

  left: 56%;

  top: 301px;

  opacity: 0;

  transform:

    translateX(70vw)
    translateY(-50%);

  animation:

    queenshopIn
    .9s
    cubic-bezier(.16, .8, .2, 1)
    1s
    forwards;

}


@keyframes queenshopIn {

  0% {

    opacity: 0;

    transform:

      translateX(70vw)
      translateY(-50%)
      rotate(4deg);

  }


  15% {

    opacity: 1;

  }


  75% {

    transform:

      translateX(-52%)
      translateY(-50%)
      rotate(-1deg);

  }


  88% {

    transform:

      translateX(-48%)
      translateY(-50%)
      rotate(1deg);

  }


  100% {

    opacity: 1;

    transform:

      translateX(-50%)
      translateY(-50%)
      rotate(0);

  }

}


/* =========================================
   左上雲
========================================= */

.cloud {

  position: absolute;

  display: block;

  z-index: 50;

  pointer-events: none;

}


/* =========================================
   左上雲進場
========================================= */

.cloud-top {

  width: 330px;

  left: 0px;

  top: -110px;

  opacity: 0;

  animation:

    cloudTopIn
    .9s
    cubic-bezier(.16, 1, .3, 1)
    2.4s
    forwards,

    cloudFloatTop
    2.5s
    ease-in-out
    3.3s
    infinite;

}


@keyframes cloudTopIn {

  0% {
    opacity: 0;
    transform:
      translate(
        -150px,
        -80px
      );

  }


  60% {

    opacity: 1;

  }


  100% {

    opacity: 1;

    transform:

      translate(
        0,
        0
      );

  }

}


@keyframes cloudFloatTop {

  0% {

    margin-top: 0;

  }

  50% {

    margin-top: 12px;

  }

  100% {

    margin-top: 0;

  }

}






/* =========================================
   手機版
========================================= */
@media (max-width: 1028px){
  .falling-container{
      display: none;
  }
}

@media (max-width: 768px) {
  .logo-group {
    /* width: 290px; */
    /* top: 30%; */
    /* background-color: #4ca285; */
  }
  .logo-group::after{
    content: '';
    background-color: #4ca285;
  }



  .queenshop {

    width: 280px;

    /* top: 64%; */

  }


  .cloud-top {

    width: 280px;

    left: -300px;

  }



}



/* =========================================
   左右邊動態
========================================= */



    .parallax * {position: absolute;} 

    .ball {
    top: 0;
    width: 100%;
    height: 100%;
    
    }
    /* .ball * {border-radius: 50%; } */

    .b1 {
    animation: oxxo forwards;    
    animation-range: 0 200px;     
    animation-timeline: scroll();
    
    }
    .b1 * {
    width: 280px;
    height: 300px;
    background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img2.png");
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover; 
    /* background: #fff3; */
    
    }
    .b1 div:nth-child(1){top:110px; left: -33px;}

    .b2 {
    animation: oxxo2 forwards;   
    animation-range: 0 300px;    
    animation-timeline: scroll();
    }
    .b2 * {
    width: 180px;
    height: 180px;
    background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img3.png");
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover; 
    /* background: #fff6; */
    }
    .b2 div:nth-child(1){top:650px; left: 178px;}

    .b3 {
    animation: oxxo forwards;    
    animation-range: 0 400px;    
    animation-timeline: scroll(); 
    }
    .b3 * {
    width: 300px;
    height: 400px;
    background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img1.png");
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover; 
    /* background: #fff9; */
    }
    .b3 div:nth-child(1){top:420px; left: -50px;}


    .b4 {
        animation: oxxo forwards;     
        animation-range: 0 200px;    
        animation-timeline: scroll();
      }
      .b4 * {
        width: 300px;
        height: 465px;
        background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img4.png");
        background-position: center; 
        background-repeat: no-repeat;
        background-size: cover; 
        /* background: #fff9; */
      }
      .b4 div:nth-child(1){top:105px; right: -83px;}


      .b5 {
        animation: oxxo forwards;     
        animation-range: 0 300px;     
        animation-timeline: scroll(); 
      }
      .b5 * {
        width: 220px;
        height: 96px;
        background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img5.png");
        background-position: center; 
        background-repeat: no-repeat;
        background-size: cover; 
        /* background: #fff9; */
      }
      .b5 div:nth-child(1){top:539px; right: 94px;z-index: 1; }


      .b6 {
        animation: oxxo forwards;     
        animation-range: 0 400px;     
        animation-timeline: scroll(); 
      }
        .b6 * {
          width: 142px;
          height: 284px;
          background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img6.png");
          background-position: center; 
          background-repeat: no-repeat;
          background-size: cover; 
            /* background: #fff9; */
        }
        .b6 div:nth-child(1){top:340px; right: 76px;}

            .b7 {
              animation: oxxo forwards;     
              animation-range: 0 400px;     
              animation-timeline: scroll(); 
              }
              .b7 * {
              width: 119px;
              height: 146px;
              background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/img7.png");
              background-position: center; 
              background-repeat: no-repeat;
              background-size: cover; 
              /* background: #fff9; */
              }
              .b7 div:nth-child(1){top:773px; right: 84px;}


            
              #section{
                position: relative;
              }

              #section::before{
              content:'';
              position: absolute;
              top:-175px;
              left: 0;
              width: 100%;
              height: 205px;
              background-image: url("https://photo.queenshop.com.tw/www/index/assets/20th/grass.png");
              background-position: center; 
              background-repeat: no-repeat;
              background-size: cover; 
              }


    h1 {
    animation: oxxo forwards;    
    animation-range: 0 500px;    
    animation-timeline: scroll(); 
    }
    h1 {
    margin-top: 120px;
    width: 100%;
    color: white;
    text-align: center;
    }
    


    @keyframes oxxo {
    0% {top: 0;}
    100% {top: -200px;}
    }
    @keyframes oxxo2 {
    0% {top: 0;}
    100% {top: 200px;}
    }


    @media screen and (max-width: 1024px){
     
      .b2 div:nth-child(1){
        top:925px;
        left: 140px;
      }
      .b3 div:nth-child(1){
        top:699px;
      }
      .b4 div:nth-child(1){
        top:523px;
        right: -50px;
        width: 338px;
        height: 554px;
      }
      .b5 div:nth-child(1){
        top:1018px;
        right: 116px;
        width: 194px;
        height: 87px;
      }
      .b6 div:nth-child(1){
        top:788px;
        right: 87px;
        width: 204px;
      }
      .b7 div:nth-child(1){
        top:1013px;
        right: 334px;
      }
    }
    @media screen and (max-width: 992px){
     
      .b2 div:nth-child(1){
        top:925px;
        left: 140px;
      }
      .b3 div:nth-child(1){
        top:699px;
      }
      .b4 div:nth-child(1){
        top:523px;
        right: -50px;
        width: 338px;
        height: 554px;
      }
      .b5 div:nth-child(1){
        top:1018px;
        right: 116px;
        width: 194px;
        height: 87px;
      }
      .b6 div:nth-child(1){
        top:788px;
        right: 87px;
        width: 204px;
      }
      .b7 div:nth-child(1){
        top:1013px;
        right: 334px;
      }
    }
    @media screen and (max-width: 820px) {
      
      .b1 div:nth-child(1){
        width: 201px;
        height: 210px;
        top:110px;
        left: -33px;
      }
      .b2 div:nth-child(1){
        top:811px;
        left:83px;
        width: 141px;
        height: 139px;
      }
      .b3 div:nth-child(1){
        top: 617px;
        left: -54px;
        width: 225px;
        height: 325px;
      }
      .b4 div:nth-child(1){
        top:467px;
        right:-58px;
        width: 248px;
        height: 420px;
      }
      .b5 div:nth-child(1){
        top:844px;
        right:66px;
        width: 143px;
        height: 67px;
      }
      .b6 div:nth-child(1){
        top:659px;
        right:48px;
        width: 136px;
        height: 257px;
      }
      .b7 div:nth-child(1){
        top:933px;
        right:179px;
        width: 85px;
        height: 118px;
      }
    }
    @media screen and (max-width: 768px) {
      
      .b2 div:nth-child(1){
        top:684px;
        left:66px;
      }
      .b3 div:nth-child(1){
        top: 475px;
        left: -37px;
      }
      .b4 div:nth-child(1){
        top:360px;
      }
      .b5 div:nth-child(1){
        top:761px;
      }
      .b6 div:nth-child(1){
        top:574px;
      }
      .b7 div:nth-child(1){
        top:872px;
      }
    }
    @media (max-width: 575.98px){
      .logo-group{
        width: 70%;
        top: 29%;
      }
      .logo-chill{
        top:-35px;
      }
      .logo-goodtime{
        top:54px
      }
      .queenshop{
        top:169px;
      }

      .b1 div:nth-child(1){
        top:28px;
        width: 191px;
        height: 196px;
      }
      .b2 div:nth-child(1){
        width: 110px;
        height: 110px;
        left: 35px;
        top:623px;
      }
      .b3 div:nth-child(1){
        width: 148px;
        height: 210px;
        top:491px;
        left: -37px;
      }
      .b4 div:nth-child(1){
        top:453px;
        right: -58px;
        width: 182px;
        height: 310px;
      }
      .b5 div:nth-child(1){
        display: none;
      }
      .b6 div:nth-child(1){
        top:586px;
        right: 48px;
        width: 99px;
        height: 194px;
      }
      .b7 div:nth-child(1){
        top:779px;
        right: 128px;
        width: 78px;
        height: 103px;
      }
    }


/* =========================================
   section 
========================================= */

  
    section .page-article{
      width: 100%;
      height: 100%;
      position: relative;
      margin: 0 auto;
      text-align: center;
      /* padding: 0 0 5%; */
    }

   

    section .page-article .infor-tit {
      background: url(https://photo.queenshop.com.tw/www/index/assets/20th/tittle.png) no-repeat center;
      background-size: 59%;
      width: 100%;
      text-align: center;
      padding: 5.6% 0 10%;
      /* margin: 3% auto 0; */
      color: #2f4960;
      font-size: 24px;
      font-weight: bold;
      font-family: "Microsoft JhengHei";
      height: 10vw;
  }

  section .page-article p.method-text{
      color:#f2f1ba;
        /* margin: 2% 0; */
        font-size: 16px;
        line-height: 17px;
        letter-spacing: .05vw;
   
  }

  @media only screen and (min-width: 769px) {
    section .page-article {
        width: 77%;
        /* padding: 22% 0 11%; */
    }
    section .page-article p.method-text{
      font-size: 18px;
    }   
    section .page-article .infor-tit {
      background-size: 34%;
      
      padding: 5.3% 0 3.2%;
      font-size: 1.5vw;
  }
  }


  section .page-article ul.infor-loc li p{
    color: #f2f1ba;
    position: relative;
    font-size: 26px;
    display: inline-block;
    line-height: 56px;
    letter-spacing: 1px;
  }


  section .page-article ul.infor-loc li p::before{
    content: '';
    position: absolute;
    top: 10px;
    left: -44px;
    width: 36px;
    height: 36px;
    background-image: url(star.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  }