@import url('common.css');
@import url('faq.css');

.seo-prpg
{
	font-size: 16px;
}

.seo-prpg .hlink
{
	cursor: pointer;
}

.seo-prpg .hlink:hover
{
	text-decoration: underline;
}

.seo-prpg .top
{
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1280px;
	max-height: 420px;
	margin: auto;
	padding-top: 50px;
}

.seo-prpg .top .left
{
	width: 60%;
	text-align: center;
}

.seo-prpg .top H1
{
	padding: 30px 5px;
}

.seo-prpg .top .avatar
{
	float: left;
	width: 100px;
	height: 160px;
	background: url(../assets/blank.png) no-repeat center center;
	background-size: 80px;
}

.seo-prpg.no-avatar .top .avatar
{
	display: none;
}

.seo-prpg .top .chapo
{
	padding: 30px;
}

.seo-prpg .top .picture
{
	width: 40%;
	height: 380px;
	background: url(../assets/public/course/main.jpg) no-repeat 80% center;
	background-size: cover;
	border-radius: 30px;
}

.seo-prpg > .summary
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin: 60px 0 30px;
	padding: 20px;
	font-size: 12pt;
	font-weight: bold;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

.seo-prpg > .summary .average-reviews
{
	display: flex;
}

.seo-prpg > .summary .average-reviews .count
{
	line-height: 19px;
	padding-left: 8px;
	white-space: nowrap;
}

.seo-prpg > .summary .item
{
	padding-left: 26px;
	white-space: nowrap;
	background: url(../assets/ico/map-marker-y.svg) no-repeat left center;
	background-size: contain;
}
.seo-prpg > .summary .item.staff { padding-left: 40px; background-image: url(../assets/ico/users-y.svg) }
.seo-prpg > .summary .item.date { padding-left: 30px; background-image: url(../assets/ico/calendar-y.svg) }
.seo-prpg > .summary .item:empty { display: none }

.seo-prpg > .summary .badges
{
	display: flex;
	height: 40px;
	gap: 14px;
}

.seo-prpg > .summary .badge
{
	width: 32px;
	background: url(../assets/blank.png) no-repeat center center;
	background-size: contain;
}
.seo-prpg > .summary .badge.verified { background-image: url(../assets/ico/verified.png) }
.seo-prpg > .summary .badge.rge { background-image: url(../assets/logo/rge.png) }
.seo-prpg > .summary .badge.artisan { background-image: url(../assets/logo/artisan.png); width: 60px }
.seo-prpg > .summary .badge.qualibat { background-image: url(../assets/logo/qualibat.png) }
.seo-prpg > .summary .badge.opqibi { background-image: url(../assets/logo/opqibi.png); width: 80px }
.seo-prpg > .summary .badge.opqibi-rge { background-image: url(../assets/logo/opqibi-rge.jpg); width: 50px }
.seo-prpg > .summary .badge.dplg { background-image: url(../assets/logo/dplg.svg); background-size: 150px; background-position-x: 0; width: 70px }

.seo-prpg .panel1 .subpane
{
	max-width: 1032px;
	margin: 20px auto 40px;
	padding: 15px 20px 1px;
	border: 1px solid var(--v-smky1-base);
	border-radius: 20px;
}

.seo-prpg .panel2 .subpane
{
	max-width: 1032px;
	margin: 20px auto 40px;
	padding: 15px 20px;
	background-color: var(--v-bkgray-base);
	border-radius: 20px;
}

.seo-prpg .panel2 .ttl
{
	text-align: center;
}

.seo-prpg .panel2 .activities
{
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px;
}

.seo-prpg .panel2 .activity
{
	padding: 6px 20px;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 12px;
	text-align: center;
}

.seo-prpg .panel2 .skills
{
	padding: 15px 20px 1px;
	color: var(--v-mainfg-base);
	background-color: var(--v-mainbk-base);
	border-radius: 20px;
}

.seo-prpg.no-skill .panel2 .skills
{
	display: none;
}

.seo-prpg .panel3 .subpane
{
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1032px;
	margin: 20px auto 0;
}

.seo-prpg .panel3 .left
{
	width: 630px;
	padding-left: 10px;
}

.seo-prpg .panel3 .picture
{
	width: 330px;
	max-width: 95vw;
	height: 330px;
	background: url(../assets/public/commons/bzh.svg) no-repeat center center;
	background-size: 330px;
}

.seo-prpg .panel4
{
	position: relative;
	max-width: 1032px;
	margin: auto;
}

.seo-prpg .panel4 .ttl
{
	position: absolute;
	left: 5%;
	padding: 15px 50px;
	font-size: 15pt;
	font-weight: bold;
	background-color: var(--v-smky2-base);
}

.seo-prpg .panel4 .subpane
{
	max-width: 600px;
	margin: 60px auto 40px;
	padding: 30px 20px 10px 50px;
	background-color: var(--v-bkgray-base);
}

.seo-prpg .panel4 P
{
	padding-left: 50px;
	background: url(../assets/public/solutions/pro/black-check.svg) no-repeat 0 1px;
	background-size: 20px;
}

.seo-prpg .panel5
{
	margin: 20px auto 50px;
}

.seo-prpg .panel5 .ttl
{
	padding: 10px;
	text-align: center;
	font-size: 15pt;
}

.seo-prpg .panel6 .rvl-main
{
	background-color: var(--v-bkgray-base);
}

.seo-prpg .panel6 .anchor
{
	height: 180px;
	margin-top: -200px;
}

.seo-prpg .panel7
{
	max-width: 1032px;
	margin: 40px auto;
	padding-bottom: 30px;
	background-color: var(--v-bkgray-base);
}

.seo-prpg .panel7 .note
{
	padding: 10px 20px;
}

.seo-prpg .panel8
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin: 30px auto;
}

.seo-prpg .panel8 .item
{
	width: 450px;
	margin: 0 10px 0 40px;
	padding: 28px 10px 28px 100px;
	background: url(../assets/public/commons/idea.png) no-repeat left center;
	background-size: 76px;
}
.seo-prpg .panel8 .item.i2 { background-image: url(../assets/public/commons/path.png) }
.seo-prpg .panel8 .item.i3 { background-image: url(../assets/public/commons/euro.png) }

@media (max-width: 1320px)
{
	.seo-prpg .panel5 .photos
	{
		max-width: calc(100% - 20px);
	}
}

@media (max-width: 1100px)
{
	.seo-prpg .top
	{
		padding-top: 10px;
	}

	.seo-prpg .top .chapo
	{
		padding: 10px 30px;
	}
}

@media (max-width: 1050px)
{
	.seo-prpg .panel1,
	.seo-prpg .panel2 .subpane
	{
		margin: 20px 10px 40px;
	}
}

@media (max-width: 900px)
{
	.seo-prpg .panel3 .left
	{
		width: 60vw;
	}
}

@media (max-width: 800px)
{
	.seo-prpg .top,
	.seo-prpg .panel3 .subpane
	{
		flex-direction: column;
		max-height: unset;
	}

	.seo-prpg .top .left
	{
		width: unset;
	}

	.seo-prpg .top .picture
	{
		width: 80vw;
	}

	.seo-prpg > .summary
	{
		margin-top: 20px;
	}
}

@media (max-width: 620px)
{
	.seo-prpg .panel4 .subpane
	{
		max-width: 95vw;
		padding-left: 28px;
	}
}

@media (max-width: 500px)
{
	.seo-prpg .top .avatar
	{
		float: unset;
		width: unset;
		height: 90px;
		margin-bottom: -20px;
	}
}