@import url('common.css');

.seo-pci
{
	font-size: 16pt;
}

.seo-pci H1.top
{
	display: flex;
	max-height: 490px;
}

.seo-pci H1.top .picture
{
	width: 680px;
	height: 490px;
	background: url(../assets/public/partners/immo/main.jpg) no-repeat center center;
	background-size: cover;
}

.seo-pci H1.top .right
{
	width: 600px;
}

.seo-pci H1.top .right .ttl
{
	padding: 30px 40px;
	font-size: 32pt;
	font-weight: 500;
	text-align: center;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 75% 95%;
	background-size: 500px 14px;
}

.seo-pci H1.top .become
{
	padding-bottom: 10px;
	text-align: center;
	font-size: 20pt;
	color: var(--v-smky1-base);
}

.seo-pci .chapo .ttl
{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 20pt;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

.seo-pci .chapo .ttl :first-child
{
	padding: 20px;
	font-weight: bold;
}

.seo-pci .chapo .ttl HR
{
	width: 200px;
	height: 3px;
	margin: auto;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1fg-base);
}

.seo-pci .chapo .ttl :last-child
{
	padding: 16px 20px 16px 50px;
	background: url(../assets/images/yellow-arrowflea.svg) no-repeat left center;
}

.seo-pci .chapo .subpane
{
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1132px;
	margin: auto;
}

.seo-pci .chapo .left
{
	max-width: 520px;
	margin-left: 10px;
}

.seo-pci .chapo .left :first-child
{
	font-size: 15pt;
}

.seo-pci .chapo .list
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 16px;
	margin: 30px 0;
}

.seo-pci .chapo .list DIV
{
	padding: 8px 16px 8px 44px;
	white-space: nowrap;
	background: url(../assets/public/partners/immo/key.svg) no-repeat 6px center var(--v-bkgray-base);
}

.seo-pci .chapo .bottom
{
	padding: 12px 20px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	background-color: var(--v-smky2-base);
	border-radius: 20px;
}

.seo-pci .chapo .picture
{
	width: 580px;
	max-width: 95vw;
	height: 400px;
	background: url(../assets/public/partners/immo/house.jpg) no-repeat center center;
	background-size: contain;
}

.seo-pci .panel00,
.seo-pci .panel0,
.seo-pci .panel1
{
	max-width: 1032px;
	margin: 30px auto;
}

.seo-pci .panel00,
.seo-pci .panel0,
.seo-pci .panel1 .subpane
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 16px;
}

.seo-pci .panel00 .subpane,
.seo-pci .panel0 .subpane
{
	padding: 0 10px;
}

.seo-pci .panel00 .picture
{
	width: 550px;
	max-width: 95vw;
	height: 390px;
	background: url(../assets/public/partners/immo/annonce.jpg) no-repeat center top;
	background-size: contain;
}

.seo-pci .panel00 A
{
	padding: 10px 0 10px 70px;
	background: url(../assets/immo/ecran.png) no-repeat left center;
	background-size: contain;
}

.seo-pci .panel0 .picture
{
	width: 600px;
	max-width: 95vw;
	height: 320px;
	background: url(../assets/public/partners/immo/interagence.jpg) no-repeat center top;
	background-size: contain;
}

.seo-pci .panel0 .note
{
	padding: 0 10px 0 75px;
	background: url(../assets/public/commons/blue-arrow.svg) no-repeat 0 -6px;
	background-size: 60px;
}

.seo-pci .panel0 .note DIV
{
	padding: 10px 20px;
	font-size: smaller;
	background-color: #A2D4BA;
	border-radius: 20px;
}

.seo-pci .panel1 .left
{
	width: 600px;
	max-width: 95vw;
	height: 430px;
	background: url(../assets/public/partners/immo/questions.jpg) no-repeat center top;
	background-size: contain;
}

.seo-pci .panel1 .left P
{
	display: none;
}

.seo-pci .panel1 .arrows
{
	width: 110px;
	height: 200px;
	background: url(../assets/public/commons/black-arrows.svg) no-repeat center center;
	background-size: contain;
}

.seo-pci .panel1 .picture
{
	width: 270px;
	height: 450px;
	background: url(../assets/public/partners/immo/smartphone.jpg) no-repeat center bottom;
	background-size: contain;
}

.seo-pci .panel1 .note
{
	margin: -40px 0 30px;
	text-align: center;
	font-style: italic;
}

.seo-pci .panel1 .bottom
{
	padding: 20px;
	text-align: center;
	font-size: 18pt;
	font-weight: bold;
	color: var(--v-smky1fg-base);
	background: url(../assets/public/commons/smiley.svg) no-repeat 80% 92% var(--v-smky1-base);
	background-size: 60px;
	border-radius: 30px;
}

.seo-pci .panel2 .top
{
	max-width: 1000px;
	margin: -28px auto 0;
	padding: 28px 20px 20px 75px;
	font-size: 15pt;
	background: url(../assets/public/commons/blue-arrow.svg) no-repeat 0 0;
	background-size: 60px;
}

.seo-pci .panel2 H3
{
	padding: 0 0 16px 0;
	text-align: center;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 54% bottom;
	background-size: 468px 14px;
}

.seo-pci .panel2 .picture
{
	width: 1032px;
	max-width: 95vw;
	margin: auto;
	height: 400px;
	background: url(../assets/public/partners/immo/before-after.jpg) no-repeat center center;
	background-size: contain;
}

.seo-pci .panel2 H3 SPAN,
.seo-pci .panel2 .picture P
{
	display: none;
}

.seo-pci .panel2 .bottom
{
	max-width: 900px;
	margin: 30px auto 50px;
	padding: 14px 20px 0 120px;
	background: url(../assets/public/commons/lightbulb-y.svg) no-repeat 40px center;
	border: 3px dashed var(--v-smky1-base);
	border-radius: 30px;
}

.seo-pci .panel2 .bottom STRONG
{
	display: block;
	text-align: center;
}

.seo-pci .panel2 .bottom HR
{
	width: 200px;
	height: 4px;
	margin: 20px auto;
	color: black;
	background-color: black;
}

.seo-pci .panel3
{
	max-width: 1132px;
	margin: auto;
}

.seo-pci .panel3 P:first-child
{
	max-width: 990px;
	margin: 20px auto 15px;
}

.seo-pci .panel3 .subpane
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 32px;
}

.seo-pci .panel3 .picture
{
	width: 600px;
	max-width: 95vw;
	height: 480px;
	background: url(../assets/public/partners/immo/bzh.jpg) no-repeat center bottom;
	background-size: contain;
}

.seo-pci .panel3 .right
{
	width: 500px;
	max-width: 95vw;
	margin-bottom: 10px;
	padding: 20px 30px;
	text-align: center;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 30px;
}

.seo-pci .panel3 .right HR
{
	width: 200px;
	height: 4px;
	margin: 30px auto;
	color: var(--v-smky2-base);
	background-color: var(--v-smky2-base);
}

.seo-pci .panel4
{
	color: white;
	background-color: black;
}

.seo-pci .panel4 H3
{
	padding: 0 0 14px 0;
	text-align: center;
	font-size: 28pt;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 55% bottom;
	background-size: 500px 16px;
}

.seo-pci .panel4 H3 SPAN
{
	display: none;
}

.seo-pci .panel4 .subpane
{
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1032px;
	margin: 0px auto 40px;
	padding: 20px 10px 30px;
}

.seo-pci .panel4 .list
{
	display: flex;
	flex-direction: column;
	max-width: 500px;
}

.seo-pci .panel4 .list P
{
	padding: 10px 0 10px 40px;
	background: url(../assets/public/commons/yellow-arrow-right.svg) no-repeat left center;
	background-size: 16px;
}

.seo-pci .panel4 .picture
{
	width: 500px;
	max-width: 95vw;
	height: 350px;
	background: url(../assets/public/partners/immo/real-estate-keys.jpg) no-repeat center center;
	background-size: cover;
	border-radius: 30px;
}

.seo-pci .panel5
{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 800px;
	margin: 20px auto 40px;
	background-color: #E0CA5F;
	border-radius: 30px;
}

.seo-pci .panel5 P:first-child
{
	padding-top: 20px;
	font-weight: bold;
	color: var(--v-smky1-base);
}

.seo-pci .panel5 P:last-child
{
	max-width: 600px;
	margin: -28px auto 0;
	padding: 28px 20px 20px 75px;
	font-size: 15pt;
	background: url(../assets/public/commons/black-arrow.svg) no-repeat 0 0;
	background-size: 60px;
}

.seo-pci .panel6 HR
{
	width: 200px;
	height: 4px;
	margin: 20px auto;
	color: black;
	background-color: black;
}

.seo-pci .panel6 H3
{
	padding: 0 0 14px 0;
	text-align: center;
	font-size: 24pt;
	background: url(../assets/public/commons/yellow-line.png) no-repeat 55% bottom;
	background-size: 600px 16px;
}

.seo-pci .panel6 H3 SPAN
{
	display: none;
}

.seo-pci .panel6 .list
{
	max-width: 960px;
	margin: 20px auto;
}

.seo-pci .panel6 .item
{
	display: flex;
	align-items: center;
	padding: 0 50px 40px;
	gap: 50px;
}

.seo-pci .panel6 .item:not(:last-child)
{
	background: url(../assets/public/commons/dashed-vert-line.png) repeat-y 100px 4px;
}

.seo-pci .panel6 .item .picture
{
	min-width: 100px;
	max-width: 100px;
	height: 100px;
	background: url(../assets/public/course/blue-pen.svg) no-repeat right top;
	background-size: contain;
}

.seo-pci .panel6 .item.i2 .picture { background-image: url(../assets/public/commons/orange-files.svg) }
.seo-pci .panel6 .item.i3 .picture { background-image: url(../assets/public/commons/computer.svg) }

.seo-pci .panel6 .item .border
{
	min-width: 700px;
	padding: 10px 20px;
	background-color: var(--v-bkgray-base);
	border-radius: 20px;
}

.seo-pci .panel7
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.seo-pci .panel7 P
{
	margin: 0 10px;
	text-align: center;
}

.seo-pci .panelb7 P:first-child A
{
	color: black;
	text-decoration: none;
}

.seo-pci .panel7 HR
{
	width: 300px;
	height: 4px;
	color: black;
	background-color: black;
}

.seo-pci .panel7 P:last-child
{
	margin: -20px auto 40px;
	padding: 24px 100px 24px 100px;
	background: url(../assets/public/commons/idea.png) no-repeat left center;
	background-size: 76px;
}

@media (max-width: 1280px)
{
	.seo-pci H1.top .picture
	{
		max-width: 42%;
		height: 37vw;
	}

	.seo-pci H1.top .right
	{
		width: 57%;
	}

	.seo-pci H1.top .right .ttl
	{
		padding: 30px;
		font-size: 26pt;
	}
}

@media (max-width: 1050px)
{
	.seo-pci
	{
		font-size: 15pt;
	}

	.seo-pci H1.top .right .ttl
	{
		padding: 20px;
		font-size: 24pt;
	}

	.seo-pci H1.top .become
	{
		margin-bottom: -20px;
		padding-bottom: 0;
		font-size: 18pt;
	}

	.seo-pci .subscribe
	{
		width: 420px;
		padding: 20px 0;
		background: none;
	}

	.seo-pci .subscribe .btn
	{
		font-size: small;
		padding: 10px 36px 10px 13px;
		line-height: 26px;
		background-position-x: 95%;
	}

	.seo-pci .panel1
	{
		padding: 0 10px;
	}

	.seo-pci .panel1 .bottom
	{
		padding-right: 80px;
		background-position: 97% center;
	}

	.seo-pci .panel2 .picture
	{
		height: 40vw;
	}

	.seo-pci .panel6 .item
	{
		gap: 40px;
	}
}

@media (max-width: 900px)
{
	.seo-pci H1.top .picture
	{
		height: 34vw;
	}

	.seo-pci H1.top .right .ttl
	{
		margin-bottom: 0;
		padding-bottom: 10px;
		font-size: 20pt;
		background-position: center bottom;
		background-size: 40vw;
	}

	.seo-pci .chapo .ttl
	{
		font-size: 17pt;
	}

	.seo-pci .chapo .subpane
	{
		flex-direction: column;
		margin: 20px 0;
	}

	.seo-pci .chapo .left
	{
		margin: 0 10px;
	}

	.seo-pci .chapo .picture
	{
		height: 350px;
	}

	.seo-pci .panel3 .subpane
	{
		flex-direction: column;
		gap: 0;
	}

	.seo-pci .panel3 P:first-child
	{
		margin: 15px;
		text-align: center;
	}

	.seo-pci .panel6 .item .border
	{
		min-width: calc(100vw - 200px);
	}
}

@media (max-width: 800px)
{
	.seo-pci H1.top
	{
		flex-direction: column;
		align-items: center;
		max-height: unset;
	}

	.seo-pci H1.top .picture
	{
		max-width: 100vw;
		height: 70vw;
		max-height: 380px;
		min-height: 259px;
		background-size: cover;
		background-position: center top;
	}

	.seo-pci H1.top .right
	{
		max-width: unset;
		width: 100%;
	}

	.seo-pci .panel00,
	.seo-pci .panel0,
	.seo-pci .panel1 .subpane,
	.seo-pci .panel4 .subpane
	{
		flex-direction: column;
	}

	.seo-pci .panel1 .subpane,
	.seo-pci .panel4 .subpane
	{
		gap: 0;
	}

	.seo-pci .panel1 .left
	{
		height: 380px;
	}

	.seo-pci .panel1 .arrows
	{
		height: 170px;
		transform: rotate(90deg);
	}

	.seo-pci .panel7 P:last-child
	{
		margin: -20px 20px 40px;
		padding-right: 20px;
	}
}

@media (max-width: 600px)
{
	.seo-pci .chapo .picture
	{
		height: 60vw;
	}

	.seo-pci .panel1 .left
	{
		height: 60vw;
	}

	.seo-pci .panel2 .bottom
	{
		margin-bottom: 30px;
		padding-left: 80px;
		background-position: 28px 20px;
		background-size: 30px;
	}

	.seo-pci .panel3 .right
	{
		padding: 0 16px;
	}

	.seo-pci .panel3 .picture
	{
		height: 74vw;
	}

	.seo-pci .panel6 .item
	{
		align-items: flex-start;
		gap: 20px;
		padding-left: 20px;
	}

	.seo-pci .panel6 .item:not(:last-child)
	{
		background-position-x: 70px;
	}

	.seo-pci .panel6 .item .border
	{
		min-width: calc(100vw - 160px);
	}
}

@media (max-width: 430px)
{
	.seo-pci .subscribe
	{
		width: 98%;
	}
}