@charset "utf-8";

:root {
}

#con-tit {
	margin: 0;
	height: 35rem;
	padding-top: 1.9rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#con-tit > div {
	height: 100%;
	position: relative;
}
#con-tit .title {
	text-align: center;
	padding-top: 5rem;
}
#con-tit .title h2 {
	font-size: 4.8rem;
	color: #333;
}
#con-tit .title p {
	margin-top: 1rem;
	font-size: 2.4rem;
	color: var(--krds-light-color-text-subtle);
}

#con-tit .flexbox {
	position: absolute;
	z-index: 2;
	bottom: 5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 5rem;
	padding-right: 2rem;
	border-radius: 1.6rem 1.6rem 0 0;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
}
#con-tit .flexbox .krds-breadcrumb-wrap {
	height: 100%;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb {
	gap: 0;
	align-items: stretch;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li {
	display: flex;
	padding: 0;
	text-decoration: none;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li::after {
	margin: 1.7rem 0 0 0;
	background-image: url(../img/sub/ico_location_arrow01.svg);
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li a {
	display: block;
	height: 100%;
	color: #fff;
	font-weight: 500;
	font-size: 1.6rem;
	padding: 1.3rem 1.6rem 1.3rem 2rem;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home {
	padding: 0;
	width: 6rem;
	height: 5rem;
	border-radius: 1rem 1rem 0 0;
	background: url(../img/sub/ico_location_home01.svg) no-repeat center;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home a {
	width: 100%;
	height: 100%;
	padding: 0;
}
#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home::after {
	display: none;
}

#con-tit #shareSns {
	gap: 2.2rem;
	height: 100%;
}
#con-tit #shareSns > li {
	width: 4rem;
	height: 4rem;
}
#con-tit #shareSns > li > a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	text-indent: -9999rem;
	background-position: center;
}
#con-tit #shareSns > li::before {
	left: -1.1rem;
}

#con-tit #shareSns .sns-share > .toggle.on + .shareSns-list {
	display: flex;
	flex-direction: column-reverse;
	gap: 1rem;
}
#con-tit #shareSns .shareSns-list > li + li {
	margin-top: 0;
}
#con-tit #shareSns .shareSns-list > li.sns-closebtn > a {
	margin-top: 0;
	border-radius: 0.4rem;
	border: 0.1rem solid #707070;
}
#con-tit #shareSns > li.sns-share > a {
	background-image: url(../img/sub/ico_location_share_sns01.svg);
}
#con-tit #shareSns > li.print > a {
	background-image: url(../img/sub/ico_location_share_print01.svg);
}

.greeting-info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.greeting-info .img {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 37.9rem;
	margin-right: -17.8rem;
	border-radius: 0 0 0 9.6rem;
	overflow: hidden;
}
.greeting-info .txtbox {
	position: relative;
	z-index: 1;
	flex-grow: 1;
}
.greeting-info .txtbox .gumdan {
	text-align: right;
	font-size: 2.1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	font-family: var(--font-paper);
	background: linear-gradient(90deg, #dfdfdf 0%, #dde1ed 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.greeting-info .txtbox > div {
	padding: 5rem 5rem 5rem 23rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 2rem 3rem 2rem 2rem;
}
.greeting-info .txtbox h3 {
	font-size: 3rem;
	font-weight: 500;
	color: #333;
	padding-left: 5.6rem;
	background: url(../img/sub/ico_sub_council01.svg) no-repeat left center;
}
.greeting-info .txtbox h3 strong {
	font-weight: 700;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.greeting-info .txtbox .info-list {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}
.greeting-info .txtbox .info-list li {
	display: flex;
	align-items: center;
	width: calc((100% - 1rem) / 2);
	padding: 1.6rem;
	background: #fff;
	border-radius: 0.8rem;
}
.greeting-info .txtbox .info-list li > div {
	display: flex;
	align-items: flex-start;
	width: 100%;
}
.greeting-info .txtbox .info-list li strong {
	flex-shrink: 0;
	margin-right: 0.8rem;
	font-size: 1.8rem;
	padding: 0.3rem 0 0.2rem 3.8rem;
	background-repeat: no-repeat;
	background-position: left center;
}
.greeting-info .txtbox .info-list li strong span {
	display: inline-block;
	width: 4.8rem;
	text-align: justify;
	text-align-last: justify;
	letter-spacing: 0;
}

.greeting-info .txtbox .info-list li p {
	padding-top: 0.3rem;
}
.greeting-info .txtbox .info-list li.name strong {
	background-image: url(../img/sub/ico_greeting_info01.svg);
}
.greeting-info .txtbox .info-list li.phone strong {
	background-image: url(../img/sub/ico_greeting_info02.svg);
}
.greeting-info .txtbox .info-list li.role strong {
	background-image: url(../img/sub/ico_greeting_info03.svg);
}
.greeting-info .txtbox .info-list li.email strong {
	background-image: url(../img/sub/ico_greeting_info04.svg);
}
.greeting-info .txtbox .info-list li.area strong {
	background-image: url(../img/sub/ico_greeting_info05.svg);
}
.greeting-info .txtbox .info-list li.call strong {
	background-image: url(../img/sub/ico_greeting_info06.svg);
}

.career-wrap {
	padding: 4rem 3rem;
	border-radius: 2rem;
	border: 0.1rem solid #cacaca;
	box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
}
.career-wrap .info-list li {
	line-height: 1.2;
}

/* 민주당 */
#democracy #con-tit {
	background-image: url(../img/sub/bg_member_greeting_democracy01.jpg);
}
#democracy #con-tit .flexbox {
	background: linear-gradient(90deg, #1a9799 0%, #1a65a0 100%), #fff;
}
#democracy #con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home {
	background-color: #094b7e;
}
#democracy .greeting-info .txtbox > div {
	background-image: url(../img/sub/bg_greeting_info_democracy01.jpg);
}
#democracy .greeting-info .txtbox h3 strong {
	background: linear-gradient(90deg, #1a9799 0%, #1a65a0 100%);
	background-clip: text;
}

/* 국민의힘 */
#nation #con-tit {
	background-image: url(../img/sub/bg_member_greeting_nation01.jpg);
}
#nation #con-tit .flexbox {
	background: linear-gradient(90deg, #eb2e32 0%, #e60024 100%), linear-gradient(90deg, #1a9799 0%, #1a65a0 100%), #fff;
}
#nation #con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home {
	background-color: #8f0e1f;
}
#nation .greeting-info .txtbox > div {
	background-image: url(../img/sub/bg_greeting_info_nation01.jpg);
}
#nation .greeting-info .txtbox h3 strong {
	background: linear-gradient(90deg, #7244ce 0%, #e60024 100%);
	background-clip: text;
}

/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1620px) {
	#con-tit .flexbox {
		width: calc(100% - 15rem);
	}
}

@media (max-width: 1200px) {
	.greeting-info .txtbox > div {
		padding-left: 20rem;
		padding-right: 3rem;
	}
	.greeting-info .txtbox .info-list {
		flex-direction: column;
	}
	.greeting-info .txtbox .info-list li {
		width: 100%;
		flex-wrap: wrap;
	}
}

@media (max-width: 1025px) {
	.greeting-info {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	.greeting-info .img {
		margin-right: 0;
		border-radius: 0;
	}
	.greeting-info .txtbox .gumdan {
		text-align: center;
	}
	.greeting-info .txtbox > div {
		padding-left: 3rem;
	}
}

@media (max-width: 767px) {
	#con-tit {
		padding-top: 3.6rem;
		height: auto;
		padding-bottom: 9.2rem;
	}

	#con-tit .title h2 {
		font-size: 3rem;
	}
	#con-tit .title {
		padding-top: 0;
	}
	#con-tit .title p {
		margin-top: 0.7rem;
		font-size:1.5rem;
	}

	#con-tit .flexbox {
		position: static;
		left: auto;
		height: auto;
		transform: translateX(0);
		width: 100%;
		margin-top: 2rem;
		border-bottom: 0;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap {
		width: 100%;
		height: auto;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:last-child) {
		position: static !important;
		width: inherit !important;
		height: inherit !important;
		padding: inherit !important;
		margin: inherit !important;
		overflow: inherit !important;
		white-space: inherit !important;
		border: inherit !important;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li::after {
		width: 2rem;
		height: 2rem;
		margin-top: 0.1rem;
		background: url(../img/sub/ico_location_arrow02.svg) no-repeat center;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li a {
		color: var(--krds-light-color-text-basic);
		padding: 0 1.2rem;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home {
		width: 2rem;
		height: 2rem;
		background: url(../img/sub/ico_location_home02.svg) no-repeat center;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-child(2)):last-child::before {
		display: none;
	}
	#con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-child(2)):last-child::after {
		display: none;
	}
	#con-tit #shareSns {
		display: none;
	}

	.greeting-info {
		gap: 0.7rem;
	}
	.greeting-info .img {
		width: 30rem;
	}
	.greeting-info .txtbox {
		width: 100%;
	}
	.greeting-info .txtbox > div {
		padding: 3.2rem 2rem;
	}
	.greeting-info .txtbox h3 {
		background-position: left top;
		padding-left: 7rem;
		background-size: 5rem;
	}

	.greeting-info .txtbox .info-list {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 2.5rem;
		gap: 0.7rem;
	}
	.greeting-info .txtbox .info-list li {
		width: 100%;
		padding: 1rem 1.2rem;
	}
	.greeting-info .txtbox .info-list li strong {
		padding: 0.5rem 0 0.5rem 4.75rem;
		background-size: 3.9rem;
	}

	.greeting-info .txtbox .info-list li p {
		padding-top: 0.5rem;
	}

	.career-wrap {
		padding: 3.2rem 2rem;
		border-radius: 1.2rem;
	}

	#democracy #con-tit .flexbox,
	#nation #con-tit .flexbox {
		background: transparent;
	}
	#democracy #con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home,
	#nation #con-tit .flexbox .krds-breadcrumb-wrap .breadcrumb .home {
		background-color: rgba(0, 0, 0, 0);
	}
}


@media (max-width: 374px) {
}