.products{
    width: 100%;
    /* background-color: #0098da; */
    /* color: #fff; */
}

.pro_0{
    width: 80vw;
    /* height: 15vw; */
    margin: 0 auto;
    padding-bottom: 50px;
    justify-content: center;
}

.pro_i01{
    width: 30%;
    text-align: center;
    /* background-color: #0098da; */
}

.pro_i01 p{
    color: #4c4b4b;
	line-height: 25px;

}

.pro_i01 img{
    width: 100%;
    /*background-color: #f7f7f7;*/
    /*padding: 2.5vw 20px;*/
    transition: .2s ease-in;
    opacity: .9;
}

.pro_i01 img:hover{
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 5px #fff;
    background-color: #b4d8e7;
    opacity: 1;
}

/* .pro_i01_p{
    opacity: 0;
    top: 100px;
    left: 100px;
}

.pro_i01:hover .pro_i01_p{
    opacity: 1;
} */

.pro_i02{
    width: 50%;
    margin-left: 10px;
    /* background-color: #0098da; */
}

.pro_i02 ul{
    margin-bottom: 10px;
}

.pro_i02 ul li{
    text-align: center;
    margin-right: 10px;
}

.pro_i02 p{
    color: #4c4b4b;
	line-height: 25px;
}

.pro_i02 ul li img{
    width: 100%;
    /*background-color: #f5f5f4;*/
    /*padding: 20px;*/
    transition: .2s ease-in;
    /*opacity: .5;*/
}

.pro_i02 ul li img:hover{
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 5px #cccccc;
    background-color: #f7f7f7;
    opacity: 1;
}

.pro_i02_p {
    text-align: start;
    top: 5px;
    left: 5px;
    opacity: 0;
    transition: .2s ease-in;
}

.pro_color{
    width: 15px;
    height: 15px;
    border-radius: 7.5px;
    background-color: #000;
    margin-left: 5px;
}

.pro_i02 ul li:hover .pro_i02_p{
    transform: translate(-15px, -15px);
    /* box-shadow: 10px 10px 5px #888888; */
    opacity: 1;
    /* background-color: #fff; */
    
}
.hs_p{
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

@media (min-width:1366px) and (max-width:1920px){
    .pro_i01 img {
        /*padding: 3.1vw 20px;*/
		margin-top: 70px;
    }
}

@media (min-width:1024px) and (max-width:1366px){
    .pro_i01 img {
        padding: 3.6vw 20px;
    }

    .pro_i02 p,.pro_i01 p{
        font-size: 12px;
    }
}

@media (min-width:768px) and (max-width:1024px){
    .pro_i01 {
        display: none;
    }

    .pro_i02 {
        width: 100%;
    }

    .pro_i02 ul li img {
        opacity: 1;
    }
}

@media (min-width:413px) and (max-width:768px){
    .pro_0{
        width: 99%;
    }

    .pro_i02 ul li{
        margin: 0 3px;
    }
}



@media screen and (max-width: 414px){
/* @media (min-width:374px) and (max-width:414px){ */
    .pro_0{
        width: 99vw;
    }

    .pro_i02 ul li{
        margin: 0 3px;
    }
}