
div.cont1-text{margin-bottom: 50px}

div.cont1-img{display: flex; flex-direction: column; justify-content: center; align-items: center}

p.cont1-img{font-weight: 700; color: var(--color-text-light); text-align: center}

ul.cont1-boxlist{display: flex; flex-wrap: wrap; gap:20px}
li.cont1-boxlist{display: flex; flex-direction: column; align-items: center}
div.cont1-boxlist-icon{display: flex; justify-content: center; align-items: center; background-color: var(--color-background-secondary); border-radius: 50%}
div.cont1-boxlist-icon svg{fill: var(--color-icon-fill-secondary)}
h5.cont1-boxlist{text-align: center; white-space: pre-line; line-height: 133%}
p.cont1-boxlist{white-space: pre-line; text-align: center; line-height: 170%}
@media screen and (max-width:767px){
	ul.cont1-boxlist{gap:2.14rem 10px}
	li.cont1-boxlist{width: calc((100% - 10px) / 2)}
}
@media screen and (min-width:768px) and (max-width:1280px){
	ul.cont1-boxlist{gap:10px}
	li.cont1-boxlist{width: calc((100% - (10px * 3)) / 4)}
}
@media screen and (max-width:1280px){
	div.cont1-text{margin-bottom: 2rem}

	p.cont1-img{margin-bottom: 10px}

	div.cont1-boxlist{margin-top: 3.33rem}
	div.cont1-boxlist-icon{width: 5rem; height: 5rem}
	div.cont1-boxlist-icon svg{height: 2rem}
	h5.cont1-boxlist{font-size: 1.07rem; margin: 1rem 0 10px}
}
@media screen and (min-width:1281px){
	div.cont1-text{margin-bottom: 3.125rem}

	p.cont1-img{font-size: 1.13rem; margin-bottom: 10px}

	div.cont1-boxlist{margin-top: 6.25rem}
	ul.cont1-boxlist{gap:1.25rem}
	li.cont1-boxlist{width: calc((100% - (1.25rem * 3)) / 4)}
	div.cont1-boxlist-icon{width: 11.25rem; height: 11.25rem}
	div.cont1-boxlist-icon svg{height: 3.75rem}
	h5.cont1-boxlist{font-size: 1.25rem; margin: 1.25rem 0 10px}
}



div.cont2-img{display: flex; justify-content: center; border: 1px solid var(--color-border)}
div.cont2-img img{max-width:100%}
@media screen and (max-width:1280px){
	div.cont2-img{padding: 2rem}
}
@media screen and (min-width:1281px){
	div.cont2-img{padding: 50px}
}

div.cont3-title{display: flex; justify-content: center; align-items: center}
h2.cont3-title{text-align: center; font-size:30px; background-color: var(--color-background-primary); color: #fff; border-radius: 500px}
div.cont3-img{display: flex; justify-content: center; border: 1px solid var(--color-border)}
div.cont3-img img{max-width:100%}
div.cont3-arrow{display: flex; justify-content: center}
div.cont3-arrow svg{fill: var(--color-primary)}

ul.cont3-list{display: flex; flex-wrap: wrap; justify-content: center}
li.cont3-list{display: flex; align-items: center; flex-direction: column; box-sizing:border-box}
div.cont3-list-prd{display: flex; justify-content: center; align-items: center}
div.cont3-list-img{border: 1px solid var(--color-border); box-sizing: border-box; width: 100%; display: flex; justify-content: center}
div.cont3-list-img img{max-width:100%}
@media screen and (min-width:768px) and (max-width:1280px){
	li.cont3-list{width: calc((100% - 3.33rem) / 2)}
}
@media screen and (max-width:1280px){
	h2.cont3-title{padding: 5px 2rem; font-size:1.33rem}
	div.cont3-img{margin-top: 2rem; padding: 1.33rem}
	div.cont3-arrow{margin: 2rem 0}
	div.cont3-arrow svg{width: 5.33rem}
	
	ul.cont3-list{gap: 3.33rem}
	div.cont3-list-prd{height: 3.33rem}
	h3.cont3-list{margin: 1rem 0 10px}
	div.cont3-list-img{padding: 1.33rem; margin-top: 1.33rem}
}
@media screen and (min-width:1281px){
	h2.cont3-title{padding: 5px 3.12rem; font-size:1.87rem}
	div.cont3-img{margin-top: 3.12rem; padding: 1.87rem}
	div.cont3-arrow{margin: 3.12rem 0}
	div.cont3-arrow svg{width: 8rem}
	
	ul.cont3-list{gap: 6.25rem}
	li.cont3-list{width: calc((100% - 6.25rem) / 2)}
	div.cont3-list-prd{height: 5rem}
	h3.cont3-list{margin: 1.25rem 0 10px}
	div.cont3-list-img{padding: 1.87rem; margin-top: 1.87rem}
}
