html, body{
    background-color: #7CDDD1;
}


.top-img1{
    background-image: url(../img/top_img1.png);
    background-size: contain;
    background-position: center;
    display: block;
    width: 100%;
    min-height: 275px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    padding-top: 56.4%;
    background-repeat: no-repeat;
}
.top-img2{
    background-image: url(../img/top_img2.png);
    background-size: contain;
    background-position: center;
    display: block;
    width: 100%;
    min-height: 160px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 0;
    /*padding-bottom: 247%;*/
    background-repeat: no-repeat;
}

.top-bt-block ul li {
    width: 55%;
    padding-top: 3%;

}

.top-bt-block ul {
    margin-bottom: 0;
    text-align: center;
}

.top-bt-block {
    position: absolute;
    padding-top: 71%;
}

.top-bt-block ul li:first-child {
    padding-right: 1%;
}

.top-bt-block ul li:last-child {
    padding-left: 1%;
}

.shadow-series{
    -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
      filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
}

@media only screen and (min-width : 375px) and (max-width : 413px){
    /*.top-img2 {
        top: 315px;
    }*/
    .top-img1 {
        min-height: 250px;
    }
}

@media only screen and (min-width : 360px) and (max-width : 374px){
    .top-bt-block {
        position: absolute;
        padding-top: 78%;
    }
    /*.top-img2 {
        top: 315px;
    }*/
    .top-img1 {
        min-height: 270px;
    }
}

@media only screen and (min-width : 320px) and (max-width : 359px){
    /*.top-img2 {
        top: 247px;
    }*/
    .top-img1 {
        min-height: 215px;
    }
}





@media only screen and (min-width: 660px){

}

@media only screen and (min-width: 736px){

}