@charset "utf-8";
/*sc01*/
.sc01 {
		padding: 120px 0 300px;
		background: #2b8ecc
				url(/resources/custom/images/guidance/main/sc01-deco.png) no-repeat
				90% top;
		position: relative;
}

.sc01 .fix-layout {
		position: unset;
}

.sc01 .t1 {
		font-size: 50px;
		color: #fff;
		font-weight: 500;
		margin-bottom: 40px;
		line-height: 1.5;
		z-index: 1;
		position: relative;
}

.sc01 .t1 span {
		color: #00ff48;
		font-weight: 500;
}

.sc01 .t2 {
		color: #fff;
		font-size: 24px;
		line-height: 1.5;
		z-index: 1;
		position: relative;
}

.sc01 .img {
		position: absolute;
		right: 0;
		top: 150px;
}

.sc01:before {
		width: 100%;
		height: 255px;
		display: block;
		content: "";
		background: #2b8ecc
				url(/resources/custom/images/guidance/main/sc02-bg.png);
		position: absolute;
		bottom: -8px;
		left: 0;
		background: #2b8ecc
				url(/resources/custom/images/guidance/main/sc02-bg.png);
}

.sc02 {
		z-index: 1;
		position: relative;
		padding: 60px 0 0 0;
}

.sc02 .con {
		display: flex;
}

.sc02 .popup_wrapper {
		width: 450px;
		margin-left: 50px;
		margin-top: 40px;
}

.sc02 .popup {
		width: 100%;
		height: 410px;
		border-radius: 32px 12px 32px 0;
		overflow: hidden;
}

.sc02 .popup img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}

.sc02 .info {
		flex: 1;
}

.sc02 .intro {
		display: flex;
}

.sc02 .intro .txt {
		flex: 1;
		padding-left: 40px;
		margin-top: 20px;
}

.sc02 .intro .txt p {
		font-weight: 500;
		font-size: 28px;
		color: #19af50;
}

.sc02 .intro .txt span {
		display: block;
		margin: 30px 0;
		font-size: 22px;
		color: #636363;
		line-height: 1.3
}

.sc02 .intro .txt a {
		display: inline-block;
		padding: 16px 35px;
		border-radius: 12px 0 12px 0;
		border: 1px solid #626262;
		color: #626262
}

.sc02 .use_info_wrap {
		position: relative;
		width: 100%;
		height: 216px;
		margin-top: 47px;
}

.sc02 .use_info_wrap .use_info_box {
		display: flex;
		align-items: center;
		position: relative;
		width: 640px;
		height: 100%;
		border-radius: 30px 100px 100px 110px;
		background: linear-gradient(137deg, #46a2d2 30%, #5d76d5 85%);
		box-shadow: 6px 8px 60px 0px rgba(24, 58, 162, 0.2);
		position: relative;
}

.sc02 .use_info_wrap .use_info_box .title {
		position: relative;
		width: 177px;
		height: 100%;
		font-size: 24px;
		color: #fff;
		letter-spacing: 0;
		line-height: 196px;
		font-weight: 500;
		text-align: center;
		vertical-align: top;
		text-align: center;
		vertical-align: top;
		margin-right: 40px;
}

.sc02 .use_info_wrap .use_info_box .title:before {
		display: block;
		position: absolute;
		top: calc(50% - 55px);
		right: 0;
		opacity: 0.2;
		width: 1px;
		height: 110px;
		background-color: #fff;
		content: "";
}

.sc02 .use_number {
		color: #fcff00;
		font-size: 28px;
		font-weight: 500;
		margin-bottom: 20px;
}

.sc02 .use_info_item {
		padding-left: 40px;
		position: relative;
		color: #fff;
		line-height: 2;
}

.sc02 .use_info_item:before {
		width: 26px;
		height: 26px;
		content: "";
		position: absolute;
		display: block;
		left: 0;
		background-position: center;
		background-repeat: no-repeat;
		margin-top: 3px;
}

.sc02 .uil01:before {
		width: 26px;
		height: 26px;
		background: url(/resources/custom/images/guidance/main/ico-clock.png)
				no-repeat;
}

.sc02 .uil02:before {
		width: 26px;
		height: 26px;
		background: url(/resources/custom/images/guidance/main/ico-alert.png);
}

.sc02 .use_info_wrap .loadmap_item {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 390px;
		height: calc(100% - 14px);
		border-radius: 100px 40px 30px 100px;
		font-weight: 500;
		background: linear-gradient(137deg, #7a5fde 30%, #7a6fe3 85%);
		background-position: left top;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
}

.sc02 .use_info_wrap .loadmap_item:after {
		content: "";
		display: block;
		width: 100%;
		height: 210px;
		background: url(/resources/custom/images/guidance/main/location-bg.png);
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		opacity: 1;
}

.sc02 .use_info_wrap .loadmap_item .item_area {
		position: relative;
		z-index: 1;
		overflow: hidden;
		width: 100%;
		height: 100%;
		border-radius: 100px 40px 30px 100px;
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
}

.sc02 .use_info_wrap .loadmap_item:before {
		opacity: 0.05;
}

.sc02 .use_info_wrap .loadmap_item:before, .sc02 .use_info_wrap .loadmap_item .item_area:before
		{
		display: block;
		position: absolute;
		top: 61px;
		left: 75px;
		z-index: 1;
		width: 390px;
		height: 360px;
		mix-blend-mode: soft-light;
}

.sc02 .use_info_wrap .loadmap_item .item_area .text {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 100px 40px 100px 100px;
		font-size: 22px;
		color: #fff;
		letter-spacing: -0.02em;
		line-height: 192px;
		font-weight: 500;
		text-align: center;
		display: block;
}

.sc02 .use_info_wrap .loadmap_item .item_area .text:before {
		display: block;
		position: absolute;
		bottom: 0;
		right: -1px;
		width: 62px;
		height: 62px;
		background-color: #e0f7f9;
		border-top-left-radius: 27px;
		content: "";
}

.sc02 .use_info_wrap .loadmap_item .item_area .text br {
		display: none;
}

.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 55px;
		height: 55px;
		background-color: #7d64de;
		background-image:
				url(/resources/custom/images/guidance/main/loadmap_plus_deco02.png);
		background-position: center center;
		background-repeat: no-repeat;
		border-radius: 100%;
}

.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:before,
		.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:after {
		display: block;
		position: absolute;
		bottom: 0;
		right: 70px;
		width: 30px;
		height: 30px;
		background:
				url(/resources/custom/images/guidance/main/loadmap_plus_deco01.png)
				center center/cover no-repeat;
		content: "";
		display: block;
}

.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:before {
		bottom: 0;
		right: 60px;
}

.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:after {
		bottom: 60px;
		right: -1px;
}

.sc02 .pop_control {
		display: flex;
		gap: 30px;
		padding: 20px 24px;
		border-radius: 0 32px 32px 24px;
		background: #fff;
		margin-top: -25px;
		width: 180px;
		z-index: 10;
		position: relative;
}

.sc02 .pop_control .pop_prev, .sc02 .pop_control .pop_next {
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
}

.sc02 .pop_control .pop-sl-count {
		display: flex;
		gap: 12px;
		align-items: center;
}

.sc02 .pop_control .pop-sl-count .circle {
		display: block;
		width: 4px;
		height: 4px;
		background: #222;
		border-radius: 50%;
}

.sc03 {
		position: relative;
		background: #e1f8f9
				url(/resources/custom/images/guidance/main/bg-pattern.png);
		padding: 250px 0 130px 0;
		border-radius: 250px 250px 400px 0;
		margin-top: -95px;
}

.sc03:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		background: #e1f8f9;
		width: 100%;
		height: 300px;
		left: 0;
		position: absolute;
		left: 0;
		bottom: -300px;
}

.sc03:before {
		content: "";
		display: block;
		width: 123px;
		height: 119px;
		background: url(/resources/custom/images/guidance/main/ico-smile.png);
		right: 70px;
		top: 13px;
		position: absolute;
		z-index: 10;
}

.sc03 .shine:after {
		content: "";
		display: block;
		width: 185px;
		height: 79px;
		background: url(/resources/custom/images/guidance/main/sc03-deco.png);
		left: 60px;
		bottom: 100px;;
		position: absolute;
}

.sc03 .tit .con {
		display: flex;
}

.sc03 .tit {
		margin-bottom: 60px;
}

.sc03 h3 {
		padding-left: 130px;
		position: relative;
		font-size: 40px;
		color: #19af50;
		flex: 1;
}

.sc03 h3:before {
		display: block;
		content: "";
		width: 100px;
		height: 100px;
		background: #19af50
				url(/resources/custom/images/guidance/main/ico-noti.png) no-repeat
				center;
		border-radius: 50%;
		position: absolute;
		margin-top: -25px;
		left: 0;
}

.sc03 .tit a {
		display: inline-block;
		padding: 16px 35px;
		background: #19af50;
		color: #fff;
		border-radius: 50px;
}

.sc03 .noti_item {
		width: 500px;
		padding: 45px 35px;
		background: #fff;
		border: 1px solid #ebebeb;
		border-radius: 32px 12px 32px 12px;
		margin-right: 30px;
}

.sc03 .noti_item:last-child {
		margin-right: 0;
}

.sc03 .noti_item a {
		display: block;
}

.sc03 .noti_item span {
		color: #19af50;
		font-weight: 500;
}

.sc03 .noti_item h5 {
		font-size: 24px;
		font-weight: 500;
		color: #555555;
		margin-bottom: 30px;
		margin-top: 30px;
		overflow: hidden;
		line-height: 1.3;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
}

.sc03 .noti_item p {
		color: #555;
		font-family: 'Pretendard';
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		padding-top: 30px;
		border-top: 1px solid #d4d4d4;
}

.sc03 .noti_item i {
		font-style: normal;
		display: flex;
		width: 40px;
		height: 40px;
		background: #8552e2;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50%;
		position: absolute;
		top: 30px;
		right: 30px;
		display: flex;
}

.sc03 .noti_control {
		display: flex;
		gap: 20px;
		width: 100%;
		align-items: center;
		margin-top: 50px;
		justify-content: center;
}

.sc03 .swiper-container {
		overflow: visible;
}

.sc03 .swiper-slide-active {
		position: relative;
		border: 2px solid #19af50;
}

.sc03 .swiper-slide-active:before, .sc03 .swiper-slide-active:after {
		content: "";
		display: block;
		width: 22px;
		height: 22px;
		background: url(/resources/custom/images/guidance/main/ico-star.png);
		position: absolute;
}

.sc03 .swiper-slide-active:before {
		top: -10px;
		right: 60px;
}

.sc03 .swiper-slide-active:after {
		bottom: -14px;
		left: 60px;
}

.sc03 .swiper-slide-prev, .sc03 .swiper-slide-next {
		margin-top: 30px;
}
/*sc04*/
.sc04 {
		padding: 100px 0 120px;
		border-radius: 300px 0 0 0;
		background: #fff;
		z-index: 1;
		position: relative;
}

.sc04 .tit {
		display: flex;
		margin-bottom: 60px;
}

.sc04 .tit h3 {
		flex: 1;
		text-align: center;
		font-size: 40px;
		font-weight: 400;
		color: #333333;
}

.sc04 .account_control {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
}

.sc04 .account_prev, .sc04 .account_next {
		background: #fff;
		width: 55px;
		height: 55px;
		display: flex;
		border-radius: 50%;
		border: 1px solid #d3d3d3;
		align-items: center;
		justify-content: center;
		width: 55px;
}

.sc04 .account_next {
		margin-left: -8px;
		margin-right: 10px;
}

.sc04 .more_btn {
		display: inline-block;
		height: 55px;
		width: 115px;
		text-align: center;
		border: 1px solid #d3d3d3;
		border-radius: 32px;
		line-height: 55px;
		color: #001212;
}

.sc04 .account_item {
		width: calc(( 100% - 60px)/3);
}

.sc04 .account_item .img {
		width: 100%;
		height: 400px;
		overflow: hidden;
}

.sc04 .account_item .img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}

.sc04 .account_item p {
		margin: 30px 0;
		line-height: 1.3em;
		color: #444444;
		font-size: 24px;
		font-weight: 500;
		max-height: 2.6em;
		min-height: 2.6em;
		display: block;
		width: 100%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
}

.sc04 .account_item span {
		color: #b6b6b6;
}

.sc04 .swiper-slide-prev .img {
		border-radius: 30px 0 0 30px;
}

.sc04 .swiper-slide-next .img {
		border-radius: 0 30px 30px 0;
}

.sc05 {
		position: relative;
		padding: 120px 0 0;
		background: #f8f4e2;
		padding: 120px 0 0;
}

.sc05:before {
		content: "";
		display: block;
		width: 123px;
		height: 556px;
		background: url(/resources/custom/images/guidance/main/sc05-bg01.png);
		left: 0;
		top: 120px;
		position: absolute;
}

.sc05:after {
		content: "";
		display: block;
		width: 81px;
		height: 72px;
		background: url(/resources/custom/images/guidance/main/sc05-bg02.png);
		right: 60px;
		bottom: 200px;;
		position: absolute;
}

.sc05 .con {
		display: flex;
		align-items: center;
}

.sc05 .qk, .sc05 .request {
		width: 50%;
}

.sc05 .qk {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
}

.sc05 .qk>div {
		width: calc(( 100% - 50px)/2);
		border-radius: 32px;
		padding: 45px 35px;
		background-position: 90% 90%;
		background-repeat: no-repeat;
		height: 200px;
}
.sc05 .qk a{display:block; width:100%; height:100%;}
.sc05 .qk p{
		color: #3d3d3d;
        font-weight: 500;
        font-size: 24px;
}
.sc05 .qk01 {
		background: #fff
				url(/resources/custom/images/guidance/main/ico-qk01.png);
}

.sc05 .qk02 {
		background: #fff
				url(/resources/custom/images/guidance/main/ico-qk02.png);
}

.sc05 .qk03 {
		background: #fff
				url(/resources/custom/images/guidance/main/ico-qk03.png);
}

.sc05 .qk04 {
		background: #fff
				url(/resources/custom/images/guidance/main/ico-qk04.png);
}

.sc05 .request {
		text-align: center;
}

.sc05 .request p {
		margin: 30px 0;
		font-size: 22px;
		color: #001212;
		line-height: 1.5;
}

.sc05 .request p span {
		color: #00b961;
}

.sc05 .request a {
		display: block;
		line-height: 55px;
		width: 200px;
		text-align: center;
		background: #1b3956;
		color: #fff;
		margin: 0 auto 40px auto;
		border-radius: 32px;
}

.sc05 .request img {
		max-width: 100%;
}
/*반응형*/
@media all and (max-width:1500px) {
		.sc02 .use_info_wrap .use_info_box {
				width: 80%;
		}
		.sc02 .use_info_wrap .loadmap_item {
				width: 25%;
		}
		.sc02 .use_info_wrap .use_info_box .title {
				width: 150px;
				margin-right: 20px;
		}
}

@media all and (max-width:1400px) {
		.sc01 .img {
				bottom: 0;
				top: unset;
		}
		.sc01 .img img {
				max-width: 600px;
		}
		.sc02 .popup_wrapper {
				width: 400px;
		}
		.sc02 .intro .txt span {
				font-size: 18px;
		}
}

@media all and (max-width:1200px) {
		.sc02 .use_info_wrap .use_info_box {
				flex-direction: column;
				justify-content: center;
		}
		.sc02 .use_info_wrap .use_info_box .title {
				height: auto;
				line-height: 1;
		}
		.sc02 .use_info_wrap .use_info_box .title:before {
				display: none;
		}
		.sc02 .use_number {
				margin: 12px 0;
				font-size: 22px;
		}
		.sc02 .use_info_wrap .loadmap_item .item_area .text {
				font-size: 18px;
		}
		.sc03 {
				border-radius: 120px 120px 120px 0;
		}
		.sc04 {
				border-radius: 120px 0 0 0;
		}
}

@media all and (max-width:1000px) {
		.sc02 .con {
				flex-direction: column;
		}
		.sc02 .popup_wrapper {
				margin: 30px auto 0;
				width: 100%;
				max-width: 767px;
		}
		.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:before,
				.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus:after {
				display: none;
		}
		.sc02 .use_info_wrap .loadmap_item .item_area .loadmap_plus, .sc02 .use_info_wrap .loadmap_item .item_area .text:before
				{
				display: none;
		}
		.sc03 {
				border-radius: 0;
		}
		.sc04 {
				border-radius: 0;
		}
		.sc05 .qk {
				flex-direction: column;
				padding: 0 20px;
		}
		.sc05 .qk>div {
				width: 100%;
				height: 120px;
				background-size: auto 50%;
		}
}

@media all and (max-width:767px) {
		.sc01 {
				padding: 60px 0 300px 0;
		}
		.sc01 .t1, .sc01 .t2 {
				text-align: center;
		}
		.sc01 .t1 {
				font-size: 32px;
				margin-bottom: 16px;
		}
		.sc01 .t2 {
				font-size: 20px;
		}
		.sc01 .img {
				text-align: right;
		}
		.sc01 .img img {
				max-width: 90%;
		}
		.sc02 .use_info_wrap {
				height: auto;
		}
		.sc02 .use_info_wrap .use_info_box {
				width: 100%;
				padding: 24px 12px;
				margin-bottom: 12px;
				border-radius: 30px 100px 100px 30px;
		}
		.sc02 .use_info_wrap .loadmap_item {
				position: relative;
				width: 100%;
		}
		.sc02 .popup {
				height: 350px;
		}
		.sc03 {
				padding: 120px 0 50px;
				margin-top: -50px;
		}
		.sc03 .tit {
				margin-bottom: 30px;
		}
		.sc03 h3 {
				padding-left: 60px;
				font-size: 24px;
		}
		.sc03 h3:before {
				width: 50px;
				height: 50px;
				background-size: 24px;
				margin-top: -6px;
		}
		.sc04 {
				padding: 50px 0;
		}
		.sc04 .tit h3 {
				font-size: 24px;
		}
		.sc03 .noti_area {
				padding: 0 20px;
		}
		.sc03 .noti_item {
				width: 100%;
				margin-right: 0;
		}
		.sc03:before {
				width: 90px;
				height: 87px;
				right: 0;
				background-size: cover;
		}
		.sc03 .noti_item h5 {
				font-size: 20px;
		}
		.sc05 {
				padding: 50px 0 0 0;
		}
		.sc05 .con {
				flex-direction: column;
				gap: 40px;
		}
		.sc05 .qk, .sc05 .request {
				width: 100%;
		}
		.sc05:after {
				display: none;
		}
		.sc05 .qk p {
				font-size: 18px;
		}
		.sc04 .tit {
				flex-direction: column;
				gap: 10px;
				margin-bottom: 30px;
		}
		.sc04 .account_control {
				position: relative;
		}
		.sc04 .account_item p {
				font-size: 20px;
		}
		.sc04 .account_item .img {
				height: 300px;
		}
		.sc04 .account_item {
				width: 100%;
		}
}

@media all and (max-width:500px) {
		.sc02 .intro {
				flex-direction: column;
				text-align: center;
		}
		.sc02 .intro .txt {
				padding-left: 0;
		}
		.sc02 .intro .txt span {
				margin: 20px 0
		}
		.sc03 .tit .con {
				flex-direction: column
		}
		.sc03 .tit a {
				margin: 30px auto 0;
				display: inline-block;
		}
		.sc05 .qk>div {
				font-size: 20px;
		}
}

.floating-box {
		position: fixed;
		right: 10px;
		bottom: 50px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
		justify-content: center;
		z-index: 10000;
}