body,html{
    background-image: url(../img/result3/bg.jpg);
    background-size: cover;
    background-position: fixed;
    background-repeat: no-repeat;
}
.vi-sand {
    width:85%;
    position: fixed;
    z-index: 4;
    left:-5%;
    top: -3%;
    transform:rotate(-3deg);
  }
.section3{
    background-image: url(../img/result4/sea.png);
    background-repeat:no-repeat ;
    background-position: center 30px;
    }
.section3bg{
    width: 100%;
    height:98%;
    position: absolute;
    top:2%;
    display: block;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2%);
    z-index:0;
}
.figure-boat{
    width:90%;
    margin-left: -5%;
    max-width:1000px;
    position: relative;
    z-index: 1;
}
.imginfo .text3{ color:rgba(255,255,255,1);}
.site-footer {
    padding-bottom: 30px;
    background-image: url(../img/result3/stone.png);
    background-repeat:no-repeat ;
    background-position: center bottom;
}
.imginforesult4{
    color:rgba(255,255,255,0.7);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    clear: both;
    font-size: 0.8em;
    opacity: 0.8;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;
    display: flex;
    justify-content: start;
    align-items: start;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 100%;
}
.imginforesult4:before{ content:"圖│";
    display: flex;
    flex:0 0 30px}
@media screen and (min-width: 768px) {
    .vi-sand {
        width: 70%;
        left:-5%;
        top: -18%;
        transform:rotate(-10deg);
      }

  .section3{
    background-position: center 100px;
}
.section3bg{
    height:100%;
    top:0%;
   
 }
 .imginforesult4{
    margin-left: 5%;
    margin-right: auto;
    max-width: 300px;
}
}


@media screen and (min-width: 1440px) {
.section3bg{
    height:100%;
    top:0%;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 30%);
 }
}