body{
    background-image: url('https://s2.loli.net/2022/04/03/vcKLAFzGWXIhDY8.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #282D2E;
}
.pro1{
    float: left;
    margin-top: 3%;
    margin-left: 10%;
    margin-bottom: 6%;
    width: 35%;
    height: 39.3vw;
    box-shadow: 2px 2px 15px black;
    cursor: pointer;
}
.pro1:hover{
    box-shadow: 5px 5px 28px black;
}
.pro2{
    float: right;
    margin-top: 3%;
    margin-right: 10%;
    margin-bottom: 6%;
    width: 35%;
    height: 39.3vw;
    box-shadow: 2px 2px 15px black;
    cursor: pointer;
}
.pro2:hover{
    box-shadow: 5px 5px 28px black;
}
.pro3{
    float: left;
    margin-top: 3%;
    margin-left: 10%;
    margin-bottom: 6%;
    width: 50%;
    height: 32.3vw;
    box-shadow: 2px 2px 15px black;
    cursor: pointer;
}
.pro3:hover{
    box-shadow: 5px 5px 28px black;
}
.pro4{
    float: right;
    margin-top: 3%;
    margin-right: 10%;
    margin-bottom: 6%;
    width: 25%;
    height: 32.3vw;
    box-shadow: 2px 2px 15px black;
}
.pimage1{
    height: 35vw;
}
.pimage2{
    height: 28vw;
}
.pimage1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pimage2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card{
    background-image: linear-gradient(to right,#0c2442, #323d40);
    width: auto;
    height: 4.3vw;
    text-align: center;
    font-size: 3vw;
    color: azure;
}
.flo{
    display: none;
    position: fixed;
    top: 10%;
    left: 20%;
    background-image: linear-gradient(to right,#0c2442, #323d40);
    width: 60%;
    height: 40vw;
    border-radius: 20px;
}
.ti1{
    color: azure;
    font-size: 3vw;
    padding-left: 3%;
    padding-top: 1%;
    padding-bottom: 1%;
    display: inline-block;
}
.pro_no{
    display: inline-block;
    color: azure;
    font-size: 1vw;
    padding-left: 50%;
}
.pro_main{
    padding: 1% 1% 1% 1%;
    color: azure;
    font-size: 1.2vw;
}