@charset "UTF-8";
.back{
  padding-bottom: 10rem;
}
.btn.__jump::after{
	background: url(../img/service/icon_link2.svg) center no-repeat;
	background-size: 100%;
}
.serviceList{
	background: url(../img/service/main_bg.png) top center/cover no-repeat;
	padding: 10rem 0;
}
.serviceContent{
	display: flex;
	gap: 30px;
	margin-bottom: 60px;
}
.contentBox{
	width: 33%;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 0 10px #00000029;
}
.contentBox a{
	padding: 10px;
	display: block;
}
.contentBox .photo{
    height: 240px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 30px;
}
.contentBox .photo img{
	transition: 0.3s;
}
.contentBox:hover .photo img{
	transform: scale(1.1);
}
.contentBox .textArea{
	padding: 20px;
}
.contentBox .title{
	font-size: 24px;
	font-weight: 600;
}
.contentBox .text{
	font-size: 16px;
	margin-top: 20px;
}

.smartDevice ul li{
	display: flex;
    padding-bottom: 5rem;
    border-bottom: solid 1px #E7E9EB;
    gap: 1rem;
}
.smartDevice ul li:not(:last-child){
	margin-bottom: 5rem;
}
.smartDevice ul li .textArea{
	flex: 1;
}
.smartDevice ul li .textArea .btn{
	margin: 3rem 0 0;
}
.smartDevice ul li .photo{
	width: 450px;
}
.smartDevice ul li .photo a{
	display: block;
	overflow: hidden;
}
.smartDevice ul li .photo a img{
	transition: 0.3s;
}
.smartDevice ul li .photo a:hover img{
	transform: scale(1.1);
}

@media screen and (max-width: 768px){
	.back{
		padding-bottom: 5rem;
	}
	.serviceList{
		padding: 3rem 0 4rem;
	}
	.serviceContent{
		flex-flow: column;
	}
	.contentBox{
		width: 100%;
	}
	.contentBox .textArea{
		padding: 2rem 0.5rem;
	}
	.contentBox .title{
		font-size: 1.8rem;
	}
	.contentBox .text{
		font-size: 1.4rem;
		margin-top: 1rem;
	}
	.contentBox .photo{
		height: auto;
	}
	.smartDevice ul li{
		padding-bottom: 2rem;
	}
	.smartDevice ul li:not(:last-child){
		margin-bottom: 2rem;
	}
	.smartDevice ul li .photo{
		width: 100%;
		margin-top: 10px;
	}
	.smartDevice ul li .textArea .btn{
		margin: 2rem auto 0;
	}
}