@charset "utf-8";
/*연수구설문조사 소개*/
.introduce .top-con {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	padding-top: 40px;
	padding-bottom: 120px;
	width: 100%;
}
	
.introduce .top-con>div {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.introduce .top-con .tit {
	position: relative;
	padding-left: 143px;
	font-family: var(--deco-font);
	font-size: 44px;
	letter-spacing: -3.08px;
	background: var(--bg);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.introduce .top-con .tit::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 127px;
	height: 45px;
	background: url(../img/logo.svg) no-repeat 0 0 / 100%;
}

.introduce .top-con .txt .txt-tit {
	color: #444;
	margin-bottom: 24px;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -1.04px;
}

.introduce .top-con .txt .txt-con {
	color: #444;
	font-size: 17px;
	font-weight: 300;
	line-height: 190%;
	letter-spacing: -0.68px;
}

.introduce .top-con .txt .txt-con span {
	color: #222;
	font-weight: 500;
}

.introduce .btm-con {
	padding: 100px 0px;
	background: #f7f7f7;
}

.introduce .btm-con .btm-tit {
	text-align: center;
	margin-bottom: 40px;
	color: #222;
	font-family: var(--deco-font);
	font-size: 44px;
	line-height: 44px;
	font-weight: 400;
	letter-spacing: -2.2px;
}

.introduce .btm-con>div {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.introduce .btm-con>div ol {
	position: relative;
	display: flex;
	gap: 16px;
	padding-left: 84px;
	padding-right: 84px;
	max-width: 1800px;
	margin: auto;
}

.introduce .btm-con>div ol>li {
	flex: 0 0 auto;
	position: relative;
	text-align: center;
	width: 400px;
	height: 400px;
	border-radius: 17px;
	background: #FFF;
	overflow: hidden;
	z-index: 1;
}

.introduce .btm-con>div ol>li::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: 100%;
}

.introduce .btm-con>div ol>li::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 183px;
}

.introduce .btm-con>div ol>li>.tag {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	padding: 3px 30px 5px 30px;
	color: #FFF;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.533px;
	border-radius: 0px 0px 33px 33px;
}

.introduce .btm-con>div ol>li .num {
	font-size: 27.5px;
	font-weight: 600;
	letter-spacing: -1.1px;
}

.introduce .btm-con>div ol>li .tit {
	margin-bottom: 5px;
	color: #222;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -1px;
}

.introduce .btm-con>div ol>li .txt {
	margin-bottom: 8px;
	color: #666;
	font-size: 13px;
	font-weight: 300;
	line-height: 160%;
	letter-spacing: -0.52px;
}

.introduce .btm-con>div ol>li .conbtn {
	padding: 6px 28px;
	font-size: 14px;
}

.introduce .btm-con>div ol>li.step01::after {
	height: 222px;
	background-image: url(../img/sub/introduce01.png);
}

.introduce .btm-con>div ol>li.step01::before {
	background: #E7F3DD;
}

.introduce .btm-con>div ol>li.step01>.tag {
	background: var(--green-bg);
}

.introduce .btm-con>div ol>li.step01 .num {
	color: var(--BG03);
}

.introduce .btm-con>div ol>li.step02::after {
	height: 200px;
	background-image: url(../img/sub/introduce02.png);
}

.introduce .btm-con>div ol>li.step02::before {
	background: #FFFBE5;
}

.introduce .btm-con>div ol>li.step02>.tag {
	background: var(--BG01);
}

.introduce .btm-con>div ol>li.step02 .num {
	color: #FFB538;
}

.introduce .btm-con>div ol>li.step03::after {
	height: 217px;
	background-image: url(../img/sub/introduce03.png);
}

.introduce .btm-con>div ol>li.step03::before {
	background: #F3F7FF;
}

.introduce .btm-con>div ol>li.step03>.tag {
	background: var(--BG04);
}

.introduce .btm-con>div ol>li.step03 .num {
	color: #45B3FF;
}

.introduce .btm-con>div ol>li.step04::after {
	height: 231px;
	background-image: url(../img/sub/introduce04.png);
}

.introduce .btm-con>div ol>li.step04::before {
	background: #FFF4EE;
}

.introduce .btm-con>div ol>li.step04>.tag {
	background: var(--bg);
}

.introduce .btm-con>div ol>li.step04 .num {
	color: #F88A8A;
}

.introduce .btm-con>div .control {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - (56px / 2));
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1800px;
}

.introduce .btm-con>div .control a {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff url(../img/control.svg) no-repeat;
	z-index: 1;
}

.introduce .btm-con>div .control a#stepNext {
	transform: rotate(180deg);
}

.panel-info {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 40px auto;
}

.panel-info>li {
	flex: 1 1 50%;
	max-width: 590px;
	min-height: 340px;
	padding: 56px 40px;
	border-radius: 6px;
	border: 1px solid #fff;
	background-repeat: no-repeat;
	box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.04);
}

.panel-info>li:nth-child(1) {
	border-color: #C5D8FF;
	background-color: #F3F7FF;
	background-image: url(../img/sub/panel01.png);
	background-position: right bottom;
}

.panel-info>li:nth-child(2) {
	border-color: #CEE3BD;
	background-color: #F0FCE6;
	background-image: url(../img/sub/panel02.png);
	background-position: left bottom;
}

.panel-info>li:nth-child(3) {
	border-color: #EAD97D;	
	background-color: #FFFBE5;
	background-image: url(../img/sub/panel03.png);
	background-position: right 50px top 50px;
}

.panel-info>li:nth-child(4) {
	border-color: #F1D6C8;
	background-color: #FFF4EE;
	background-image: url(../img/sub/panel04.png);
	background-position: left 23px;
}

.panel-info>li>dl {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.panel-info>li>dl dt {
	color: #104BC3;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -1.04px;
}

.panel-info>li>dl dd {
	color: #444;
	font-weight: 300;
	line-height: 160%;
	letter-spacing: -0.75px;
}

.panel-info>li>dl dd .conbtn {
	margin-bottom: 20px;
}

.panel-info>li>dl dd>ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 411px;
}

.panel-info>li>dl dd>ul>li {
	padding: 20px 20px 20px 29px;
	color: #444;
	line-height: 160%;
	letter-spacing: -0.6px;
	border-radius: 4px;
	background: #FAF4D4;
}

.panel-info>li:nth-child(even) {
	text-align: right;
}

.panel-info>li>dl dd>ul>li span {
	position: relative;
	display: inline-block;
	font-weight: 500;
	line-height: 160%;
}

.panel-info>li>dl dd>ul>li:nth-child(1) span {
	color: #FA7902;
}

.panel-info>li>dl dd>ul>li:nth-child(2) span {
	color: #ED4F2C;
}

.panel-info>li>dl dd>ul>li span::before {
	content: '';
	position: absolute;
	left: -9px;
	top: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.panel-info>li>dl dd table {
	margin: 28px 0 12px auto;
	width: 100%;
	max-width: 480px;
}

.panel-info>li>dl dd table caption {
	display: none;
}

.panel-info>li>dl dd table th,
.panel-info>li>dl dd table td {
	text-align: center;
	padding: 5px 0px;
	width: 33.3%;
	color: #444;
	font-size: 13px;
	font-weight: 500;
	line-height: 140%;
}

.panel-info>li>dl dd table th {
	color: #F43E5D;
	border: 1px solid #F1D6C8;
	background: #FFF4EE;
}

.panel-info>li>dl dd table+p {
	color: #F43E5D;
	font-size: 12px;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: -0.122px;
}

.panel-info>li>dl dd table td {
	border: 1px solid #F1D6C8;
	background: #FFF;
}

.panel-info>li:nth-child(1)>dl dt,
.panel-info>li:nth-child(1)>dl dd span {
	color: #104BC3;
}

.panel-info>li:nth-child(2)>dl dt,
.panel-info>li:nth-child(2)>dl dd span {
	color: #478314;
}

.panel-info>li:nth-child(3) dl {
	justify-content: space-between;
}

.panel-info>li:nth-child(3)>dl dt{
	color: #C96000;
}

.panel-info>li:nth-child(4)>dl dt,
.panel-info>li:nth-child(4)>dl dd span {
	color: #F2143C;
}


/*** pc ***/
@media all and (min-width:801px) {
	.introduce .top-con>div {
		flex: 0 0 auto;
	}

	.introduce .top-con>p {
		flex: 1 1 auto;
		max-width: 594px;
	}
	
	.introduce .top-con>p br {
		display: none;
	}
	
	.introduce .top-con>p img {
		width: 100%;
	}

	.introduce .btm-con .btm-tit br {
		display: none;
	}
}


/*** mobile ***/
@media screen and (max-width:800px) {	
	.introduce .top-con {
		text-align: center;
		padding: 40px 20px;
	}

	.introduce .top-con>div {
		gap: 20px;
	}

	.introduce .top-con .tit {
		padding-top: 37px;
		padding-left: 0;
		font-size: 32px;
		line-height: 32px;
	}
	
	.introduce .top-con .tit::before {
		top: 0;
		right: 0;
		margin: auto;
		width: 93px;
		height: 33px;
		background-size: 93px;
	}

	.introduce .top-con>p {
		display: none;
	}

	.introduce .top-con .txt .txt-tit {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.introduce .top-con .txt .txt-con {
		font-size: 14px;
	}

	.introduce .top-con .btn-box {
		display: flex;
		justify-content: center;
	}

	.introduce .btm-con {		
		padding: 40px 0;
	}

	.introduce .btm-con .btm-tit {
		margin-bottom: 20px;
		font-size: 28px;
		line-height: 33px;
	}

	.introduce .btm-con>div {
		padding-bottom: 60px;
	}

	.introduce .btm-con>div ol {
		padding-left: 20px;
		padding-right: 0;
		gap: 10px;
	}

	.introduce .btm-con>div ol>li {
		width: 293px;
		height: 300px;
		border-radius: 12px;
	}

	.introduce .btm-con>div ol>li::before {
		height: 134px;
	}

	.introduce .btm-con>div ol>li>.tag {
		padding: 0 21px;
		margin-bottom: 10px;
		font-size: 10px;
		border-radius: 0px 0px 24px 24px;
	}

	.introduce .btm-con>div ol>li .num {
		font-size: 20px;
	}

	.introduce .btm-con>div ol>li .tit {
		font-size: 14px;
	}

	.introduce .btm-con>div ol>li .txt {
		font-size: 9px;
	}

	.introduce .btm-con>div ol>li .conbtn {
		padding: 1px 20px;
		font-size: 10px;
	}

	.introduce .btm-con>div .control {
		top: auto;
		bottom: 0;
		justify-content: center;
		gap: 4px;
	}
	
	.introduce .btm-con>div .control a {
		width: 40px;
		height: 40px;
		background-size: 100%;
	}
	
	.introduce .btm-con>div ol>li.step01::after {
		height: 162px;
	}

	.panel-info {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.panel-info>li {
		text-align: left !important;
		padding: 30px;
		min-height: unset;
		background-image: none !important;
	}

	.panel-info>li>dl {
		gap: 20px;
	}

	.panel-info>li>dl dd>br {
		display: none;
	}

	.panel-info>li>dl dd table {
		margin-left: 0;
	}
	
	.panel-info>li>dl dd table+p {
		text-align: left !important;
	}
}