@charset "utf-8";

main .bg-sea{
  position: absolute;
  bottom: 0;
  background: linear-gradient(#1f68c6, #1778d9, #83c5e5);
  width: 100%;
  height: 270px;
  overflow: hidden;
}

main .bg-sea::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 20px;
  background: linear-gradient(#6e829c, #1f68c6);
}

main .div_ches{
  position: absolute;
  z-index: 7;
  margin: auto auto 0 auto;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 10%);
}

main .model_ches{
  position: relative;
  z-index: 2;
}

main .model_ches_hand{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: angle_hand;
  animation-duration: 2.5s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-direction: alternate;
}

@keyframes angle_hand{
  0%{
      transform: rotate(1deg);
  }
  100%{
      transform: rotate(8deg);
  }
}

.hurin-suzu {
    position: relative;
    width: 150px;
    margin-left: 33%;
    z-index: 1;
    animation-name: suzuanimation;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-direction: alternate;
}
  
.hurin-suzu .suzu-circle {
    width: 100px;
    height: 80px;
    background: linear-gradient(#aab35b, #ffcdcd00);
    border-radius: 40% 40% 40% 40% / 60% 60% 30% 30%;
    position: relative;
}
  
.hurin-suzu .suzu-circle::before {
    width: 95px;
    height: 15px;
    content: '';
    border: solid 3px #866c22;
    border-radius: 50%;
    display: inline-block;
    margin: auto;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
}

.suzu-huda {
    width: 50px;
    height: 200px;
    background: #518f63;
    margin: 0 auto;
    position: relative;
    transform: skew(-3deg, -5deg) translate(-30px);
}
  
.suzu-huda::before {
    width: 50px;
    content: '';
    border-top: 2px solid #866c22;
    position: absolute;
    top: -7px;
    transform: rotate(93deg);
}

@keyframes suzuanimation{
    0%{
        transform: rotate(5deg);
    }
    100%{
        transform: rotate(20deg);
    }
}

@media screen and (max-width:1023px){
    main .div_ches{
        position: fixed;
        bottom: 0;
        left: 50%;
    }
}

@media screen and (max-width:480px){
    main .div_ches{
        position: fixed;
        bottom: 0;
        left: 50%;
    }
    main .div_ches img{
        width: 500px;
    }
}