/* 清除預設邊距 */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

/*聲波樣式*/
.music{
    width: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}
.item {
    position: absolute;
    width: 5px;
    border-radius: 6px;
    background-image: linear-gradient(to top, #99aaff00,#99aaff, #99aaff00);
    }  
.music .one { height: 72px;transform: translateX(-60px); }
.music .two { height: 212px;transform: translateX(-40px); }
.music .three { height: 144px;transform: translateX(-20px); }
.music .four { height: 280px;transform: translateX(0); }
.music .five { height: 120px;transform: translateX(20px); }
.music .six { height: 160px;transform: translateX(40px); }
.music .seven { height: 200px;transform: translateX(60px); }
.music .eight { height: 100px;transform: translateX(-80px); }
.music .nine { height: 160px;transform: translateX(-100px); }
.music .ten { height: 190px;transform: translateX(80px); }
.music .eleven { height: 85px;transform: translateX(100px); }
.music .twelve { height: 150px;transform: translateX(-120px); }
.music .thirteen { height: 240px;transform: translateX(120px); }
.music .fourteen { height: 110px;transform: translateX(-140px);}
.music .fifteen { height: 175px;transform: translateX(140px); }
.music .sixteen { height: 215px;transform: translateX(-160px); }
.music .seventeen { height: 95px;transform: translateX(160px); }
.music .eighteen { height: 135px;transform: translateX(-180px); }
.music .nineteen { height: 185px;transform: translateX(180px); }
.music .twenty { height: 70px;transform: translateX(-200px); }
.music .twenty_one { height: 165px; transform: translateX(200px); }
.music .twenty_two { height: 230px; transform: translateX(-220px); }
.music .twenty_three { height: 105px; transform: translateX(220px); }
.music .twenty_four { height: 140px; transform: translateX(-240px); }
.music .twenty_five { height: 195px; transform: translateX(240px); }
.music .twenty_six { height: 80px; transform: translateX(-260px); }
.music .twenty_seven { height: 250px; transform: translateX(260px); }
.music .twenty_eight { height: 125px; transform: translateX(-280px); }
.music .twenty_nine { height: 160px; transform: translateX(280px); }
.music .thirty { height: 210px; transform: translateX(-300px); }
.music .thirty_one { height: 90px; transform: translateX(300px); }
.music .thirty_two { height: 170px; transform: translateX(-320px); }
.music .thirty_three { height: 225px; transform: translateX(320px); }
.music .thirty_four { height: 115px; transform: translateX(-340px); }
.music .thirty_five { height: 155px; transform: translateX(340px); }
.music .thirty_six { height: 205px; transform: translateX(-360px); }
.music .thirty_seven { height: 75px; transform: translateX(360px); }
.music .thirty_eight { height: 180px; transform: translateX(-380px); }
.music .thirty_nine { height: 235px; transform: translateX(380px); }
.music .forty { height: 100px; transform: translateX(-400px); }
.music .forty_one { height: 145px; transform: translateX(400px); }
.music .forty_two { height: 190px; transform: translateX(-420px); }
.music .forty_three { height: 85px; transform: translateX(420px); }
.music .forty_four { height: 220px; transform: translateX(-440px); }
.music .forty_five { height: 130px; transform: translateX(440px); }
.music .forty_six { height: 165px; transform: translateX(-460px); }
.music .forty_seven { height: 245px; transform: translateX(460px); }
.music .forty_eight { height: 110px; transform: translateX(-480px); }
.music .forty_nine { height: 175px; transform: translateX(480px); }
.music .fifty { height: 60px; transform: translateX(-500px); }
.music .fifty_one { height: 200px; transform: translateX(500px); }
.music .fifty_two { height: 140px; transform: translateX(-520px); }
.music .fifty_three { height: 260px; transform: translateX(520px); }
.music .fifty_four { height: 95px; transform: translateX(-540px); }
.music .fifty_five { height: 185px; transform: translateX(540px); }
.music .fifty_six { height: 225px; transform: translateX(-560px); }
.music .fifty_seven { height: 120px; transform: translateX(560px); }
.music .fifty_eight { height: 170px; transform: translateX(-580px); }
.music .fifty_nine { height: 240px; transform: translateX(580px); }
.music .sixty { height: 80px; transform: translateX(-600px); }
.music .sixty_one { height: 150px; transform: translateX(600px); }
.music .sixty_two { height: 210px; transform: translateX(-620px); }
.music .sixty_three { height: 105px; transform: translateX(620px); }
.music .sixty_four { height: 195px; transform: translateX(-640px); }
.music .sixty_five { height: 255px; transform: translateX(640px); }
.music .sixty_six { height: 130px; transform: translateX(-660px); }
.music .sixty_seven { height: 165px; transform: translateX(660px); }
.music .sixty_eight { height: 215px; transform: translateX(-680px); }
.music .sixty_nine { height: 90px; transform: translateX(680px); }
.music .seventy { height: 180px; transform: translateX(-700px); }
.music .seventy_one { height: 230px; transform: translateX(700px); }

/*響應式*/
@media(max-width:1400px){
.music .sixty { display: none; }
.music .sixty_one { display: none;  }
.music .sixty_two { display: none;  }
.music .sixty_three { display: none;  }
.music .sixty_four { display: none;  }
.music .sixty_five { display: none;  }
.music .sixty_six { display: none;  }
.music .sixty_seven { display: none;  }
.music .sixty_eight { display: none;  }
.music .sixty_nine { display: none;  }
.music .seventy { display: none;  }
.music .seventy_one { display: none;  }
}

@media(max-width:1200px){
.music .forty { display: none; }
.music .forty_one { display: none; }
.music .forty_two { display: none; }
.music .forty_three { display: none; }
.music .forty_four { display: none; }
.music .forty_five { display: none; }
.music .forty_six { display: none; }
.music .forty_seven { display: none; }
.music .forty_eight { display: none; }
.music .forty_nine { display: none; }
.music .fifty { display: none; }
.music .fifty_one { display: none; }
.music .fifty_two { display: none; }
.music .fifty_three { display: none; }
.music .fifty_four { display: none; }
.music .fifty_five { display: none; }
.music .fifty_six { display: none; }
.music .fifty_seven { display: none; }
.music .fifty_eight { display: none; }
.music .fifty_nine { display: none; }
}
@media(max-width:800px){
.music .thirty { display: none; }
.music .thirty_one { display: none; }
.music .thirty_two { display: none; }
.music .thirty_three { display: none; }
.music .thirty_four { display: none; }
.music .thirty_five { display: none; }
.music .thirty_six { display: none; }
.music .thirty_seven { display: none; }
.music .thirty_eight { display: none; }
.music .thirty_nine { display: none; }
}
@media(max-width:570px){
.item {
    width: 3px;
    border-radius: 10px;
    } 
.music .one { height: 72px;transform: translateX(-60px); }
.music .two { height: 212px;transform: translateX(-40px); }
.music .three { height: 144px;transform: translateX(-20px); }
.music .four { height: 280px;transform: translateX(0); }
.music .five { height: 180px;transform: translateX(20px); }
.music .six { height: 160px;transform: translateX(40px); }
.music .seven { height: 200px;transform: translateX(60px); }
.music .eight { height: 100px;transform: translateX(-80px); }
.music .nine { height: 160px;transform: translateX(-100px); }
.music .ten { height: 190px;transform: translateX(80px); }
.music .eleven { height: 89px;transform: translateX(100px); }
.music .twelve { height: 150px;transform: translateX(-120px); }
.music .thirteen { height: 240px;transform: translateX(120px); }
.music .fourteen { height: 110px;transform: translateX(-140px);}
.music .fifteen { height: 175px;transform: translateX(140px); }
.music .sixteen { height: 215px;transform: translateX(-160px); }
.music .seventeen { height: 95px;transform: translateX(160px); }
.music .eighteen { display: none; }
.music .nineteen { display: none; }
.music .twenty { display: none; }
.music .twenty_one { display: none; }
.music .twenty_two { display: none; }
.music .twenty_three { display: none; }
.music .twenty_four { display: none; }
.music .twenty_five { display: none; }
.music .twenty_six { display: none; }
.music .twenty_seven { display: none; }
.music .twenty_eight { display: none; }
.music .twenty_nine { display: none; }
}
/*動畫*/
@keyframes radius-animation {
    100% {
        height: 10px;
        border-radius: 50%;
        filter: contrast(2);
    }
}
.music .one { animation: radius-animation 1.2s ease; }
.music .two { animation: radius-animation 2.4s ease; }
.music .three { animation: radius-animation 2.28s ease; }
.music .four { animation: radius-animation 2.08s ease; }
.music .five { animation: radius-animation 1.6s ease; }
.music .six { animation: radius-animation 1.2s ease; }
.music .seven { animation: radius-animation 2.8s ease; }
.music .eight { animation: radius-animation 2.5s ease; }
.music .nine { animation: radius-animation 2.32s ease; }
/* 以下為十到 twenty (10-20) 動畫時間 2 倍速 */
.music .ten { animation: radius-animation 2.6s ease; }
.music .eleven { animation: radius-animation 1.5s ease; }
.music .twelve { animation: radius-animation 2.16s ease; }
.music .thirteen { animation: radius-animation 3.0s ease; }
.music .fourteen { animation: radius-animation 1.84s ease; }
.music .fifteen { animation: radius-animation 2.24s ease; }
.music .sixteen { animation: radius-animation 2.7s ease; }
.music .seventeen { animation: radius-animation 1.36s ease; }
.music .eighteen { animation: radius-animation 2.44s ease; }
.music .nineteen { animation: radius-animation 2.9s ease; }
.music .twenty { animation: radius-animation 1.7s ease; }
/* 以下為 21 到 50 動畫時間 2 倍速 */
.music .twenty_one { animation: radius-animation 2.36s ease; }
.music .twenty_two { animation: radius-animation 1.44s ease; }
.music .twenty_three { animation: radius-animation 2.76s ease; }
.music .twenty_four { animation: radius-animation 1.9s ease; }
.music .twenty_five { animation: radius-animation 2.48s ease; }
.music .twenty_six { animation: radius-animation 1.3s ease; }
.music .twenty_seven { animation: radius-animation 2.96s ease; }
.music .twenty_eight { animation: radius-animation 2.04s ease; }
.music .twenty_nine { animation: radius-animation 1.76s ease; }
.music .thirty { animation: radius-animation 2.62s ease; }
.music .thirty_one { animation: radius-animation 1.58s ease; }
.music .thirty_two { animation: radius-animation 2.3s ease; }
.music .thirty_three { animation: radius-animation 2.84s ease; }
.music .thirty_four { animation: radius-animation 1.68s ease; }
.music .thirty_five { animation: radius-animation 2.12s ease; }
.music .thirty_six { animation: radius-animation 2.54s ease; }
.music .thirty_seven { animation: radius-animation 1.24s ease; }
.music .thirty_eight { animation: radius-animation 2.38s ease; }
.music .thirty_nine { animation: radius-animation 2.92s ease; }
.music .forty { animation: radius-animation 1.82s ease; }
.music .forty_one { animation: radius-animation 2.22s ease; }
.music .forty_two { animation: radius-animation 2.68s ease; }
.music .forty_three { animation: radius-animation 1.54s ease; }
.music .forty_four { animation: radius-animation 2.82s ease; }
.music .forty_five { animation: radius-animation 1.96s ease; }
.music .forty_six { animation: radius-animation 2.42s ease; }
.music .forty_seven { animation: radius-animation 2.98s ease; }
.music .forty_eight { animation: radius-animation 1.74s ease; }
.music .forty_nine { animation: radius-animation 2.26s ease; }
.music .fifty { animation: radius-animation 1.38s ease; }
/* 以下為 51 到 71 動畫時間 2 倍速 */
.music .fifty_one { animation: radius-animation 2.5s ease; }
.music .fifty_two { animation: radius-animation 1.64s ease; }
.music .fifty_three { animation: radius-animation 2.88s ease; }
.music .fifty_four { animation: radius-animation 1.42s ease; }
.music .fifty_five { animation: radius-animation 2.34s ease; }
.music .fifty_six { animation: radius-animation 2.68s ease; }
.music .fifty_seven { animation: radius-animation 1.88s ease; }
.music .fifty_eight { animation: radius-animation 2.18s ease; }
.music .fifty_nine { animation: radius-animation 2.86s ease; }
.music .sixty { animation: radius-animation 1.32s ease; }
.music .sixty_one { animation: radius-animation 2.24s ease; }
.music .sixty_two { animation: radius-animation 2.66s ease; }
.music .sixty_three { animation: radius-animation 1.56s ease; }
.music .sixty_four { animation: radius-animation 2.44s ease; }
.music .sixty_five { animation: radius-animation 3.0s ease; }
.music .sixty_six { animation: radius-animation 1.78s ease; }
.music .sixty_seven { animation: radius-animation 2.1s ease; }
.music .sixty_eight { animation: radius-animation 2.58s ease; }
.music .sixty_nine { animation: radius-animation 1.48s ease; }
.music .seventy { animation: radius-animation 2.42s ease; }
.music .seventy_one { animation: radius-animation 2.78s ease; }

/*無線反向播放，寫最後*/
.music .item {
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-direction: alternate;
    -webkit-animation-direction: alternate; 
}