@charset "utf-8";

/* CSS Document */
.pro_box{
	padding: 0rem 0 0rem;
}
.pro_list ul li{
	background-image: url(img/product-list-bg-1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 1rem 0px;
}
.pro_list ul li:nth-child(2n){
	background-image: url(img/product-list-bg-2.png);
}
.pro_list ul li .box{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 88vw;
    max-width: 1440px;
	margin: 0px auto;
}
.pro_list ul li:nth-child(2n) .box{
	flex-direction: row-reverse;
}
.pro_list ul li .box .photo{
	width: 50%;
	padding-right: 5%;
}
.pro_list ul li .box .photo img{
	width: 100%;
	max-width: 500px;
	transition: all ease-out 0.3s;
}
.pro_list ul li .box .photo a:hover img{
	transform: translateX(-5px);
}
.pro_list ul li .box .content{
	width: 50%;
}
.pro_list ul li .box .content .title{
	color: rgb(0, 161, 230);
	font-size: 48px;
	font-weight: bold;
}
.pro_list ul li .box .content .desc{
	font-size: 20px;
    line-height: 48px;
    color: #2e2e2e;
}
.pro_list ul li .box .content .line{
	 display: inline-block;
    width: 60px;
    height: 5px;
    overflow: hidden;
    background: #666;
    margin: 14px 0 28px;
}
.pro_list ul li .box .content .more{
	    display: inline-block;
    width: 187px;
    height: 50px;
    overflow: hidden;
    background: rgb(0, 161, 230);
    margin-top: 30px;
    box-sizing: border-box;
    border-radius: 25px;
    font-size: 24px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    transition: all ease-out 0.3s;
}
.pro_list ul li .box .content .more:hover{
	background-color: #068fca;
}
.pro_list ul li:nth-child(2n) .photo{
    padding-left: 0%;
	padding-right: 0%;
}

@media (max-width:768px) {
	.pro_list ul li .box{
		flex-direction: column;
		gap: 25px;
	}
	.pro_list ul li .box .photo{
		width: 100%;
		padding: 0px;
	}
	.pro_list ul li .box .content{
		width: 100%;
	}
	.pro_list ul li .box .content .title{
		font-size: 30px;
	}
	.pro_list ul li .box .content .line{
		height: 3px;
	}
	.pro_list ul li .box .content .desc{
		font-size: 16px;
		line-height: 2;
	}
	.pro_list ul li:nth-child(2n) .box{
	
		flex-direction: column;
	}
	.pro_list ul li .box .content .more{
		font-size: 18px;
		width: 147px;
    height: 45px;
	line-height: 45px;
	}
}