/* ================================================ 홈페이지메인 start ~ ================================================ */
.homepagemadeWrap{
	overflow:hidden;
	position:relative;
	width:100%;
	text-align:left;
	padding-top:18.2rem;
	background:#000000;
}
.homepagemadeWrap p{
	display:none;
}
.homepagemadeMainTitle{
	position:relative;
	max-width:144rem;
	padding:0;
	margin:0 auto;
}
.homepagemadeMainTitle h1{
	padding: 0;
    margin: 0 0 3rem 0;
	display:block;
	
	
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size: 8rem;
	font-style: normal;
	line-height: 9.4rem;
}
.homepagemadeMainTitle h1 span{
	color: #00EB88;
}
.homepagemadeMainTitle h2,
.homepagemadeMainTitle .hero-desc {
    padding: 0;
    margin: 0;
	color:#fff;
    font-size: 2.4rem!important;
    line-height: 3.8rem;
    display: block!important;
    text-align: center;
	font-family: 'Pretendard-Light';
	font-weight: 300;
}
.homepagemadeMainTitle h2 span,
.homepagemadeMainTitle .hero-desc span{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.hpmtBr{display:none;}
@media (max-width:991px) {
	.homepagemadeWrap {
		padding-top: 12rem;
	}
	.homepagemadeMainTitle h1 {
		margin: 0 0 4rem 0;
		font-size: 6rem;
		line-height: 7.4rem;
	}
	.homepagemadeMainTitle h2,
	.homepagemadeMainTitle .hero-desc {
		font-size: 2.2rem!important;
		line-height: 3.4rem;
	}
}
@media (max-width:767px) {
	.homepagemadeWrap {
		padding-top: 10rem;
	}
	.homepagemadeMainTitle{
		padding:0 2rem;
		display:block;
	}
	.homepagemadeMainTitle h1 {
		margin: 0 0 2rem 0;
		font-size: 3rem;
		line-height: 3.8rem;
	}
	.homepagemadeMainTitle h2,
	.homepagemadeMainTitle .hero-desc {
		font-size: 1.5rem!important;
		line-height: 2.2rem;
	}
	.homepagemadeMainTitle h2 br,
	.homepagemadeMainTitle .hero-desc br{display:none;}
	.hpmtBr{display:block!important;}
}
/* ============ portfolio STARAT ~  ============ */
.homepagemadePortfolioWrap{
	overflow:hidden;
	position:relative;
	padding:14rem 0;
}
.homepagemadePortfolioSideBox{
	position:relative;
	max-width:144rem;
	padding:0 2rem;
	margin:0 auto;
}
.homeptitle h2{
	padding: 0;
    margin: 0 0 6rem 0;
	font-size:3rem;
	line-height:4rem;
	display:block;
	
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size: 5rem!important;
	font-style: normal;
	line-height: 7rem;
}


.ppSwiper {margin-top:3rem;}
.ppSwiper .sportcard{transition: all 0.3s;position:relative;top:0rem;}
.ppSwiper .sportcard:hover .ppthumnail{top:-3.6rem;transition:all 0.3s;}
.ppSwiper .sportcard:hover .titleBox{opacity:1;transition:all 0.3s;}
.ppSwiper .sportcard:hover .pptmoreBtn{opacity:1;transition:all 0.3s;}
.ppSwiper .swiper-slide a:hover .ppTitle {text-decoration:underline;}
/* .ppSwiper .swiper-slide a:hover .pptmoreBtn{bottom:-3.6rem;} */
.ppthumnail {    top:0rem;transition: all 0.3s;overflow: hidden;width: 100%;padding-bottom: 174.75%;box-sizing: border-box;position:relative;}
.ppthumnail_goAll {border-radius: 13px; background: rgba(255, 255, 255, 0.12);}
.ppthumnail_goAllTxt {color: #00EB88;top: 50%;left: 50%;width: 100%;display: flex;flex-direction: column;align-items: center;position: absolute;font-size: 2.6rem;text-align: center;line-height: 3.4rem;transform: translate(-50%,-50%);font-family: 'Pretendard-Medium';}
.pf_allBtn_mo {margin-top: 4rem;border-radius: 8px;background: rgba(255, 255, 255, 0.12);}

.pf_allBtn {height: auto;margin-top: 2rem;width: 6.1rem!important;position: relative!important;}
.pf_allBtn_moTxt {color: #00EB88;font-size: 1.6rem;line-height: 2.6rem;font-family: 'Pretendard-Medium';margin-right:1rem;}
.pf_allBtn_mo a {display: flex;align-items: center;padding: 1.6rem 2rem;justify-content: center;}
.pf_allBtn_mo .pf_allBtn {width: 3.7rem!important;height: auto;margin:0!important;}

.ppthumnail img {width: 100%;border-radius: 1rem;height: auto;position: absolute; left: 0; top: 0;}
.titleBox {
	opacity:0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 50.23%, #000 100%);
    display: flex;
    height: 100%;
    padding: 0rem 2rem 3.4rem 2rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
    position: absolute;
}
.ppTitle {display:block;font-family: 'Pretendard-SemiBold';
font-size:1.8rem;font-weight: 600;line-height: 2.4rem;color: #fff; text-align: left;}
.pptmoreBtn {
	/* transition:all 0.3s; */
	opacity:0;
	padding:0 2rem;
    display: flex;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.pptmoreBtn span {
    text-align: center;
    display: block;
    width: 100%;
    padding: 1.2rem 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    background: #00EB88;
    color: #000;
    font-family: 'Pretendard-SemiBold';
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.4rem;
}
.ppSwiper:hover { curosr : url(cursor.webp) 20 30, url(cursor2.webp) 20 30, auto; }

.hmMoreBtn {
    margin: 5rem 0 0 0;
    display: flex;
    text-align: center;
    align-items: flex-start;
    justify-content: center;
}
.hmMoreBtn a{
	display:inline-block;
	border-radius: 99px;
	border: 1px solid #FFF;
	backdrop-filter: blur(15px);
	display: flex;
	padding: 1.2rem 5.6rem;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
	font-size: 2rem;
	font-style: normal;
	line-height: 4.5rem;
}
.hmMoreBtn a:hover{
	border: 1px solid #00EB88;
	background: #00EB88;
    color: #000;
}


.hmMoreBtn .swiper-button-prev{
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/web/webport_prev_off.webp);
	left: inherit;
    right: inherit;
    height: 6.9rem;
    width: 6.9rem;
    margin: 0 1rem 0 0;
    top: inherit;
    position: relative;
}
.hmMoreBtn .swiper-button-prev:hover{
	background-image: url(../img/web/webport_prev_on.webp);
}
.hmMoreBtn .swiper-button-next {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/web/webport_next_off.webp);
    left: inherit;
    right: inherit;
    height: 6.9rem;
    width: 6.9rem;
    margin: 0 0 0 1rem;
    top: inherit;
    position: relative;
}
.hmMoreBtn .swiper-button-next:hover{
	background-image: url(../img/web/webport_next_on.webp);
}
@media (max-width:991px) {
	.homepagemadePortfolioWrap {
		padding: 10rem 0;
	}
	.homeptitle h2 {
		margin: 0 0 4rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.hmMoreBtn {
		margin: 3rem 0 0 0;
	}
	.hmMoreBtn a {
		padding: 1.1rem 3rem;
		font-size: 1.6rem;
		line-height: 3.5rem;
	}
	.hmMoreBtn .swiper-button-prev{
		height: 5.9rem;
		width: 5.9rem;
		margin: 0 1rem 0 0;
	}
	.hmMoreBtn .swiper-button-next {
		height: 5.9rem;
		width: 5.9rem;
		margin: 0 0 0 1rem;
	} 
}
@media (max-width:991px) {
	.homepagemadePortfolioWrap {
		padding: 6.6rem 0 3rem 0;
	}
	.homeptitle h2 {
		margin: 0 0 3rem 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.ppSwiper .swiper-slide.swiper-slide-active .ppthumnail{
		top:-2.6rem;
	}
	.ppSwiper .swiper-slide.swiper-slide-active .titleBox{opacity:1;}
	.ppSwiper .swiper-slide.swiper-slide-active .pptmoreBtn{opacity:1;}
	.ppSwiper .sportcard:hover .ppthumnail{top:-2.6rem;transition:all 0.3s;}
	.titleBox {
		padding: 0rem 1.6rem 3rem 1.6rem;
	}
	.ppTitle {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.pptmoreBtn {
		        /* position: relative; */
		padding: 0 1.6rem;
	}
	.pptmoreBtn span {
		padding: 1rem 0rem;
		font-size: 1.4rem;
		line-height: 2rem;
	}
	.hmMoreBtn a {
		padding: 1.45rem 3rem;
		font-size: 1.5rem;
		line-height: 2.4rem;
	}
	.hmMoreBtn .swiper-button-prev{
		height: 5.5rem;
		width: 5.5rem;
		margin: 0 0.6rem 0 0;
	}
	.hmMoreBtn .swiper-button-next {
		height: 5.5rem;
		width: 5.5rem;
		margin: 0 0 0 0.6rem;
	} 
}
/* ============ // portfolio end ~  ============ */


/* ============ 장점 STARAT ~  ============ */
.homepagemadeMeritWrap{
	position:relative;
	padding:20rem 0 0 0;
}
.homepagemadeMeritSideBox{
	position:relative;
	max-width:188rem;
	padding:0 2rem;
	margin:0 auto;
}
.homepagemadeMeritInner{
	position:relative;
}
.homepMerittitle h2{
	padding: 0;
    margin: 0 0 3rem 0;
	display:block;
	
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 5rem!important;
	font-style: normal;
	line-height: 7rem;
}
.homepMerittitle h2 span{
	color: #00EB88;
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
}

.homepMeritEn {
	margin: 0;
    top:13rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #00EB88;
    text-align: center;
    font-family: Outfit;
    font-size: 18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 18rem;
}
.homepMeritEn br{display:none;}


.homepMeritContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 17rem 0 0 0;
    margin: -10px;
    list-style-type: none;
}
.homepMerit {
	flex: 0 0 calc(25% - 20px);
    margin: 10px;
	
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 3rem;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
    justify-content: flex-start;
}
.homepMerit span{
	display:block;
	text-align:left;
	margin:0;
	padding:0;
	color: #00EB88;
	font-family: Outfit;
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 600;
	line-height: 3rem;
}
.homepMerit dl{
	padding: 0;
    margin: 4rem 0 1.4rem 0;
	color:#fff;
    font-size: 3rem;
    line-height: 4rem;
    display: block;
    text-align: left;
	font-family: Outfit;
	font-weight: 600;
}
.homepMerit h3,
.homepMerit .merit-desc{
	padding: 0;
    margin: 0;
	color:#fff;
    font-size: 1.8rem!important;
    line-height: 2.8rem;
    display: block!important;
    text-align: left;
font-family: Pretendard;
	font-weight: 400;
}
@media (max-width:1700px) {
	.homepMerit {
		flex: 0 0 calc(50% - 20px);
		margin: 10px;
	}
}
@media (max-width:991px) {
	.homepagemadeMeritWrap {
		padding: 12rem 0 0 0;
	}
	.homepMerittitle h2 {
		margin: 0 0 3rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.homepMeritEn {
		top: 10rem;
		font-size: 13rem;
		line-height: 13rem;
	}
	.homepMeritContent {
		padding: 12rem 0 0 0;
		margin: -10px;
	}
}
@media (max-width:767px) {
	.homepagemadeMeritWrap {
		padding: 1.4rem 0 0 0;
	}
	.homepagemadeMeritSideBox {
		padding: 0;
	}
	.homepMerittitle h2 {
		margin: 0 0 0 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepMerittitle h2 span {
		display: block;
	}
	.homepMeritEn {
		top: 7.4rem;
		font-size: 6.8rem;
		line-height: 6.8rem;
	}
	.homepMeritEn br{display:block;}
	
	.homepMeritContent {
		padding: 13rem 0 0 0;
		margin: -5px;
	}
	.homepMerit {
		border-radius: 0.6rem;
		flex: 0 0 calc(50% - 10px);
		margin: 5px;
		padding: 1.8rem;
	}
	.homepMerit span {
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	.homepMerit dl {
		margin: 2.4rem 0 1rem 0;
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.homepMerit h3,
	.homepMerit .merit-desc {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
}
@media (max-width:500px) {
	.homepMeritItems {
		padding: 13rem 0 0 0;
		overflow-y: hidden;
		overflow-x: scroll;
		position: relative;
	}
	.homepMeritContent {
		padding: 0 2rem;
		width: 115rem;
		flex-wrap: inherit;
		display: flex;
		margin: 0;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.homepMerit {
		width: 27rem;
		border-radius: 0.6rem;
		flex: inherit;
		margin: 0 1rem 0 0;
		padding: 1.8rem;
	}
	.homepMerit:last-child{
		margin:0;
	}
}
/* ============ // 장점 end ~  ============ */

/* ============ 제작혜택 STARAT ~  ============ */
.homepagemadeBnefitsWrap{
	position:relative;
	padding:20rem 0 0 0;
}
.homepagemadeBnefitsSideBox{
	position:relative;
	max-width:148rem;
	padding:0 2rem;
	margin:0 auto;
}
.homepBnefitEn{
	display:block;
	margin:0 0 8rem 0;
	color: #00EB88;
	text-align: center;
	font-family: Outfit;
	font-size: 18rem;
	font-style: normal;
	font-weight: 400;
	line-height: 18rem;
}
.homepBnefitstitle h2{
	padding: 0;
    margin: 0 0 4rem 0;
	display:block;
	
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 5rem!important;
	font-style: normal;
	line-height: 7rem;
}
.homepBnefitstitle h2 span{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}

.homepagemadeBnefitsInner:nth-child(1){
	margin-top:0rem;
}
.homepagemadeBnefitsInner{
	display:block;
	margin-top:10rem;
	position:relative;
}
.homepBnefitsContent{
	position:relative;
	margin-top:2rem;
    width: 100%;
	text-align: center;
}
.homepBnefitsContent h3 {
	padding:0;
    margin: 0 0.3rem 0.9rem 0.3rem;
    display: inline-block;
	position: relative;
}
.homepBnefitsContent h3 a {
	/* cursor: initial; */
	curosr:pointer;
    display: flex;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
    padding: 1.1rem 3.5rem;
    position: relative;
    text-align: center;
    color: #fff;
    text-overflow: ellipsis;
    font-family: 'Pretendard-SemiBold';
    font-weight: 600;
    font-size: 2rem!important;
    font-style: normal;
    line-height: 4.5rem;
    align-items: center;
    justify-content: center;
}
.homepBnefitsContent h3 a:hover{
	border: 1px solid #00EB88;
	color:#000;
	background: #00EB88;
}
/* .homepBnefitsContent h3 a:hover{ */
	/* padding: 1.1rem 1.1rem 1.1rem 3.5rem; */
	/* color: #00EB88; */
	/* border: 1px solid #00EB88; */
/* } */
.homepBnefitsContent h3 a:hover:after{
	content:'';
}
.homepBnefitsContent h3 a:after{
	z-index:3;
    bottom: -1.7rem;
    content: none;
	/* content:''; */
    position: absolute;
    width: 3.4rem;
    height: 3.4rem;
    background: url(/public/img/seopage/benefit_hover_icon.webp) no-repeat center / cover;
}
@media (max-width:991px) {
	.homepagemadeBnefitsWrap {
		padding: 15rem 0 0 0;
	}
	.homepBnefitEn {
		margin: 0 0 4rem 0;
		font-size: 13rem;
		line-height: 13rem;
	}
	.homepBnefitstitle h2 {
		margin: 0 0 3rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.homepBnefitsContent h3 a {
		padding: 0.8rem 3rem;
		font-size: 1.7rem!important;
		line-height: 4rem;
	}
	/* .homepBnefitsContent h3 a:hover{ */
		/* padding: 0.8rem 1rem 0.8rem 3rem; */
	/* } */

}
@media (max-width:767px) {
	.homepagemadeBnefitsWrap {
		padding: 8rem 0 0 0;
	}
	.homepBnefitEn {
		margin: 0 0 1rem 0;
		font-size: 6.8rem;
		line-height: 6.8rem;
	}
	.homepBnefitstitle h2 {
		margin: 0 0 3rem 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepBnefitstitle h2 span{
		display:block;
	}
	.homepagemadeBnefitsInner {
		margin-top: 6rem;
	}
	.homepBnefitsContent {
		display: flex;
		position: relative;
		margin-top: 0rem;
		width: 100%;
		text-align: center;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.homepBnefitsContent h3 {
		padding: 0;
		margin: 0 0rem 0.8rem 0rem;
		display: inline-block;
		position: relative;
	}
	.homepBnefitsContent h3 a {
		padding: 0.8rem 3rem;
		font-size: 1.6rem!important;
		line-height: 3.5rem;
	}
	/* .homepBnefitsContent h3 a:hover{ */
		/* padding: 0.8rem 0.8rem 0.8rem 3rem; */
	/* } */
	.homepBnefitsContent h3 a:after{
		z-index:3;
		bottom: -1.5rem;
		width: 3rem;
		height: 3rem;
		background: url(/public/img/seopage/benefit_hover_icon.webp) no-repeat center / cover;
	}
}
/* ============ // 제작혜택 end ~  ============ */

/* ============ 제작프로세스 STARAT ~  ============ */
.homepagemadeProcessWrap{
	position:relative;
	padding:20rem 0 0 0;
}
.homepagemadeProcessSideBox{
	position:relative;
	max-width:190rem;
	padding:0 2rem;
	margin:0 auto;
}
.homepProcesstitle h2{
	padding: 0;
    margin: 0 0 0 0;
    display: block;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-weight: 400;
    font-size: 5rem!important;
    font-style: normal;
    line-height: 7rem;
}

.homepagemadeProcessInner{
	display:block;
}
.homepProcessEn {
    top: 9.9rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #00EB88;
    text-align: center;
    font-family: Outfit;
    font-size: 18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 18rem;
}
.homepProcessContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 17rem 0 0 0;
    margin: -8px;
    list-style-type: none;
}
.homepProcess {
    flex: 0 0 calc(12.5% - 16px);
    margin: 8px;
    box-sizing: border-box;
	
	padding: 3rem 2.4rem;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(0, 0, 0, 0.50);
	backdrop-filter: blur(10px);
	
	display: flex;
	flex-direction: column;
align-items: flex-start;
}
.homepProcess span {
    width: 100%;
    display: flex;
    padding: 0;
    margin: 0;
    color: #00EB88;
    text-align: left;
    font-family: Outfit;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.2rem;
    justify-content: space-between;
    align-items: flex-start;
}
.homepProcess span img{
	height:4rem;	
}
.homepProcess dl{
	display:block;
	padding:0;
	margin:5rem 0 1.4rem 0;
	text-align: left;
	color: #FFF;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size: 2.2rem;
	font-style: normal;
	line-height: 3rem;
}
.homepProcess h3,
.homepProcess .process-desc{
	display:block!important;
	padding:0;
	margin:0;
	text-align: left;
	color: #FFF;
	font-family: Pretendard;
	font-weight: 400;
	font-size: 1.8rem!important;
	font-style: normal;
	line-height: 2.8rem;
}
@media (max-width:1700px) {
	.homepProcess {
		flex: 0 0 calc(25% - 16px);
		margin: 8px;
		padding: 3rem 2.4rem;
		border-radius: 1rem;
	}
}
@media (max-width:991px) {
	.homepagemadeProcessWrap {
		padding: 15rem 0 0 0;
	}
	.homepProcesstitle h2 {
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.homepProcessEn {
		top: 7.9rem;
		font-size: 13rem;
		line-height: 13rem;
	}
	.homepProcessContent {
		padding: 12rem 0 0 0;
		margin: -8px;
	}
	.homepProcess {
		flex: 0 0 calc(33.3333333% - 16px);
		margin: 8px;
		padding: 3rem 2.4rem;
		border-radius: 1rem;
	}
}
@media (max-width:767px) {
	.homepagemadeProcessWrap {
		padding: 8rem 0 0 0;
	}
	.homepProcesstitle h2 {
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepProcessEn {
		top: 4.2rem;
		font-size: 6.8rem;
		line-height: 6.8rem;
	}
	.homepProcessContent {
		padding: 6.2rem 0 0 0;
		margin:0;
	}
	.homepProcess {
		flex: 0 0 calc(100% - 0px);
		margin: 0 0 8px 0;
		padding: 2rem 2rem;
		border-radius: 0.6rem;
	}
	.homepProcess span {
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.homepProcess dl {
		margin: 3rem 0 1rem 0;
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.homepProcess h3,
	.homepProcess .process-desc {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
}
/* ============ // 제작프로세스 end ~  ============ */

/* ============ 자주묻는질문 STARAT ~  ============ */
.homepagemadeFaqWrap{
	position:relative;
	padding:20rem 0 20rem 0;
}
.homepagemadeFaqSideBox{
	position:relative;
	max-width:156rem;
	padding:0 2rem;
	/* padding:0 2rem; */
	margin:0 auto;
}
.homepFaqEn{
	display:block;
	margin:0 0 3rem 0;
	color: #00EB88;
	text-align: center;
	font-family: Outfit;
	font-size: 18rem;
	font-style: normal;
	font-weight: 400;
	line-height: 18rem;
}
.homepFaqtitle h2{
	padding: 0;
    margin: 0 0 4rem 0;
	color:#fff;
	font-size:5rem!important;
	line-height:7rem;
	display:block;
	text-align:center;
	font-family: Pretendard;
	font-weight: 400;
}
.homepFaqtitle h2 span{
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	color: #00EB88;
}
.homepagemadeFaqInner{
	display:block;
}
.homepFaqContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: -10px;
    list-style-type: none;
}
.homepFaq {
	flex: 0 0 calc(50% - 20px);
	margin: 10px;
	box-sizing: border-box;

	padding: 3.6rem 3rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.10);
	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);

	display: flex;
	flex-direction: column;
	align-items: center;
}
.homepFaq dl{
	padding:0 0 2rem 5.2rem;
	width:100%;
	position:relative;
	display:block;
	text-align:left;
	margin:0;
	color: #FFF;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size:2.2rem;
	font-style: normal;
	line-height: 4.4rem;
}
.homepFaq dl:after{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:calc(100% - 5.2rem);
	height:1px;
	background:rgba(255,255,255,0.1);
}
.homepFaq dl b{
	position:absolute;
	left:0;
	top:0;
	padding:0;
	margin:0;
	color: #00EB88;
	font-family: Outfit;
	font-size: 3.4rem;
	font-style: normal;
	font-weight: 600;
	line-height: 3.8rem;
}
.homepFaq h3,
.homepFaq .faq-answer{
	padding:2rem 0 0 5.2rem;
	width:100%;
	position:relative;
	display:block!important;
	text-align:left;
	margin:0;
	color: #FFF;
	font-family: Pretendard;
	font-weight: 400;
	font-size:2rem!important;
	font-style: normal;
	line-height: 3.8rem;
	letter-spacing: -0.4px;
}
.homepFaq h3 b,
.homepFaq .faq-answer b{
	position:absolute;
	left:0;
	top:2rem;
	color: #fff;
	font-family: Outfit;
	font-size: 3.4rem!important;
	font-style: normal;
	font-weight: 600;
	line-height: 3.8rem;
}
@media (max-width:991px) {
	.homepagemadeFaqWrap {
		padding: 15rem 0 15rem 0;
	}
	.homepFaqEn {
		margin: 0 0 3rem 0;
		font-size: 13rem;
		line-height: 13rem;
	}
	.homepFaqtitle h2 {
		margin: 0 0 3rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
}
@media (max-width:767px) {
	.homepagemadeFaqWrap {
		padding: 8rem 0 8rem 0;
	}
	.homepFaqEn {
		margin: 0 0 1rem 0;
		font-size: 6.8rem;
		line-height: 6.8rem;
	}
	.homepFaqtitle h2 {
		margin: 0 0 3rem 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepFaqtitle h2 span{
		display:block;
	}
	
	.homepFaqContent {
		display: flex;
		flex-wrap: inherit;
		padding: 0;
		margin: 0;
		list-style-type: none;
		flex-direction: column;
	}
	.homepFaq {
		width: 100%;
		flex: inherit;
		margin: 0 0 8px 0;
		padding: 2rem;
		border-radius: 0.6rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.homepFaq:last-child{
		margin:0;
	}
	.homepFaq dl b {
		margin: 0 0 0.4rem 0;
		padding: 0;
		display: block;
		position: relative;
		font-size: 1.7rem;
		line-height: 2.6rem;
	}
	.homepFaq dl {
		padding: 0 0 1.2rem 0rem;
		font-size: 1.7rem;
		line-height: 2.6rem;
	}
	.homepFaq dl:after {
		width: calc(100% - 0rem);
	}
	.homepFaq h3 b,
	.homepFaq .faq-answer b {
		top:0;
		margin: 0 0 0.4rem 0;
		padding: 0;
		display: block;
		position: relative;
		font-size: 1.7rem!important;
		line-height: 2.6rem;
	}
	.homepFaq h3,
	.homepFaq .faq-answer {
		padding: 1rem 0 0 0;
		font-size: 1.5rem!important;
		line-height: 2.5rem;
		letter-spacing: 0;
	}
}
/* ============ // 자주묻는질문 end ~  ============ */

/* ================================================ // 홈페이지메인 end ~  ================================================ */


/* ================================================ 홈페이지제작방법 start ~  ================================================ */
.homepagemadeCustomInner {
    position: relative;
}
.homepagePtitle h2{
	padding: 0;
    margin: 0 0 3rem 0;
	font-size:5rem!important;
	line-height:7rem;
	display:block;
	color:#fff;
	text-align:center;
	font-family: Pretendard;
	font-weight: 400;
}
.homepagePtitle h2 span {
    color: #00EB88;
    font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.homepagePtitle h3,
.homepagePtitle .ptitle-desc{
	padding: 0;
    margin: 0 0 0 0;
	font-size:2.2rem;
	line-height:3.6rem;
	display:block!important;
	color:#fff;
	text-align:center;
	font-family: 'Pretendard-Light';
	font-weight: 300;
}
.homepagePtitle h3 b,
.homepagePtitle .ptitle-desc b{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	margin:0;
}

.homepCustomContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 17rem 0 0 0;
    margin: -10px;
    list-style-type: none;
}
.homepagemadeCustomInner .homepMeritEn {
    top: 21rem;
}
.homepCustom {
	flex: 0 0 calc(25% - 20px);
    margin: 10px;
	
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 3rem;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    justify-content: flex-start;
}
.homepCustom img{
	position:absolute;
	right:3rem;
	top:3rem;
	height:8rem;
}
.homepCustom span{
	display:block;
	text-align:left;
	margin:0;
	padding:0;
	color: #00EB88;
	font-family: Outfit;
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 600;
	line-height: 3rem;
}
.homepCustom h2,
.homepCustom h3{
	padding: 0;
    margin: 10rem 0 1rem 0;
	color: #00EB88;
    font-size: 2.8rem;
    line-height: 4rem;
    display: block!important;
    text-align: left;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.homepCustom .custom-subtitle{
	padding: 0;
    margin: 0;
	color:#fff;
    font-size: 2rem!important;
    line-height: 3rem;
    display: block!important;
    text-align: left;
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
}
.homepCustom h4,
.homepCustom .custom-desc{
	border-top:1px solid rgba(255, 255, 255, 0.20);
	padding: 3rem 0 0 0;
    margin: 3rem 0 0 0;
	color:#fff;
    font-size: 1.8rem!important;
    line-height: 2.8rem;
    display: block!important;
    text-align: left;
	font-family: Pretendard;
	font-weight: 400;
}






.homepageSeoWrap {
    position: relative;
    padding: 20rem 0 0 0;
}
.homepageSeoSideBox {
    position: relative;
    max-width: 188rem;
    padding: 0 2rem;
    margin: 0 auto;
}
.hpseoint{
	position:relative;
}
.hpseoint .hmMoreBtn{
	margin: 3rem 0 0 0;
}


.homepageCustomItemBox{
	position:relative;
	width:100%;
	padding:10rem 0;
}
.hmciTextInner{
	position:relative;
	width:100%;
	padding:15rem 0;
	background-image: url(../img/web/hmciText_bg.webp);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hmciText h2{
	color: #FFF;
	text-align: center;
	text-shadow: 20px 34px 20px rgba(0, 0, 0, 0.55);
	font-family: 'Pretendard-Light';
	font-size: 8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 11rem;
	letter-spacing: -3.2px;
}
.hmciText h2 span{
	color: #00EB88;
}
.hmciText h3,
.hmciText .hmci-desc {
    margin: 4rem 0 0 0;
    display: block!important;
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-weight: 400;
    font-size: 3.4rem;
    font-style: normal;
    line-height: 5.6rem;
}
.hmciText h3 span,
.hmciText .hmci-desc span{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}

.homepageSeoCateItemBox{
	position:relative;
	margin:3rem 0 0 0;
}
.homepageSeoCateItem {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: flex-start;
}
.homepageSeoCateItem h2,
.homepageSeoCateItem h3{
	margin: 0;
	display: flex!important;
	padding: 1.4rem 5.6rem;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
	border-radius: 100px;
	border: 1px solid #00EB88;
	backdrop-filter: blur(15px);
	color: #00EB88;
	font-family: 'Pretendard-SemiBold';
	font-size:2.4rem;
	font-style: normal;
	font-weight: 600;
	line-height:4.4rem;
}
.homepageSeoCateItemBox > h3,
.homepageSeoCateItemBox .seocate-desc{
	margin:6rem 0 0 0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Light';
	font-size:2.2rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.6rem;
	text-transform: uppercase;
	display: block!important;
}
.homepageSeoCateItemBox > h3 span,
.homepageSeoCateItemBox .seocate-desc span{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.homepSeoItemInner{
	position:relative;
	/* margin:17rem 0 0 0; */
}
.homepSeoItemInner .homepMeritEn {
    top: 4rem;
}
.homepSeoItemBox{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 17rem 0 0 0;
    margin: -10px;
    list-style-type: none;
}
.homepagemadeCustomInner .homepMeritEn {
    top: 21rem;
}
.hmciseoItem {
    flex: 0 0 calc(16.6666666666% - 20px);
    margin: 10px;
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 5rem 1rem;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    justify-content: flex-start;
	top:0;
}
.hmciseoItem:hover{
	border: 1px solid #00EB88;
	top:-3rem;
}
.hmciseoItem:hover dl{
	text-decoration:underline;
}
.hmciseoItem a{
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
    align-items: center;
}
.hmciseoItem img{
	height:9.2rem;
}
.hmciseoItem h3{
	margin:2rem 0 1rem 0;
	color: #00EB88;
	text-align: center;
	font-family: 'Pretendard-Bold';
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 3.4rem;
}
.hmciseoItem dl{
	padding:0;
	margin:0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Medium';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 500;
	line-height: 2.4rem;
}





.homepageHDSWrap {
    position: relative;
    /* padding: 20rem 0; */
	padding: 20rem 0 0 0;
}
.homepageHDSSideBox {
    position: relative;
    max-width: 188rem;
    padding: 0 2rem;
    margin: 0 auto;
}
.homepageHDSItemBox{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 6rem 0 0 0;
    margin: -10px;
    list-style-type: none;
}
.homepageHDS {
    flex: 0 0 calc(50% - 20px);
    margin: 10px;
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 5rem 1rem;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    /* border: 1px solid rgba(255, 255, 255, 0.20); */
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
    justify-content: flex-start;
	top:0;
}
.homepageHDS img{
	height:9.2rem;
}
.homepageHDS h2{
	margin:2rem 0 0 0;
	padding:0;
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-size:2.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: 3.6rem;
}
.homepageHDS h3{
	display:block;
	margin:2rem 0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-SemiBold';
	font-size:2.8rem;
	font-style: normal;
	font-weight: 600;
	line-height: 4.6rem;
	text-transform: uppercase;
}
.homepageHDS h4{
	margin:0;
	padding:0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Light';
	font-size: 2rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.4rem;
	text-transform: uppercase;
}
.homepageHDS h5{
	margin:1rem 0 0 0;
	padding:0;
	color: #888;
	text-align: center;
	font-family: 'Pretendard-Light';
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 300;
	line-height: 2.2rem;
	text-transform: uppercase;
}
.homepageHDS .hmMoreBtn {
    margin: 2rem 0 0 0;
}
.homepageHDS .hmMoreBtn a {
    padding: 0.6rem 3rem;
    font-size: 1.6rem;
    line-height: 4.5rem;
}

@media (max-width: 1920px){
	.hmciTextInner{
		background-size: 1920px;;
	}
}
@media (max-width: 1700px){
	.homepagemadeCustomInner .homepMeritEn {
		top: 22rem;
	}
	.homepCustom {
		flex: 0 0 calc(25% - 20px);
		padding: 3rem 2rem;
	}
	.homepCustom img {
		right: 2rem;
		top: 3rem;
		height: 7rem;
	}
	.homepCustom h2,
	.homepCustom h3 {
		margin: 8rem 0 1rem 0;
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.homepCustom .custom-subtitle {
		font-size: 1.8rem!important;
		line-height: 2.6rem;
	}
	.homepCustom h4,
	.homepCustom .custom-desc {
		padding: 2rem 0 0 0;
		margin: 2rem 0 0 0;
		font-size: 1.6rem !important;
		line-height: 2.6rem;
	}
	
	
	.homepSeoItemInner .homepMeritEn {
		top: 6rem;
		font-size: 16rem;
		line-height: 16rem;
	}
	.homepSeoItemBox {
		padding: 17rem 0 0 0;
		margin: -5px;
	}
	.hmciseoItem {
		flex: 0 0 calc(16.6666666666% - 10px);
		margin: 5px;
		padding: 4rem 1rem;
	}
	
	
	.homepageHDS h2 {
		margin: 2rem 0 0 0;
		font-size: 2.6rem;
		line-height: 3.2rem;
	}
	.homepageHDS h3 {
		font-size: 2.6rem;
		line-height: 4rem;
	}
	.homepageHDS h4 {
		font-size: 1.8rem;
		line-height: 3rem;
	}
}
@media (max-width: 991px){
	.homepagemadeCustomInner .homepMeritEn {
		font-size: 11rem;
		line-height: 11rem;
		top: 19rem;
	}
	.homepCustomContent {
		padding: 12.5rem 0 0 0;
		margin: 0;
	}
	.homepCustom {
		flex: 0 0 calc(50% - 20px);
		padding: 3rem 2rem;
	}
	
	
	.homepageSeoWrap {
		padding: 15rem 0 0 0;
	}
	.homepagePtitle h2 {
		margin: 0 0 2rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.homepagePtitle h3,
	.homepagePtitle .ptitle-desc {
		font-size: 2rem;
		line-height: 3rem;
	}
	.hpseoint .hmMoreBtn {
		margin: 2rem 0 0 0;
	}


	.homepageCustomItemBox {
		padding: 5rem 0;
	}
	.hmciTextInner {
		padding: 10rem 0;
		background-size: 991px;
	}
	.hmciText h2 {
		text-shadow: 20px 34px 20px rgba(0, 0, 0, 0.55);
		font-size: 5.6rem;
		line-height: 8rem;
		letter-spacing: -2px;
	}
	.hmciText h3,
	.hmciText .hmci-desc {
		margin: 3rem 0 0 0;
		font-size: 2.8rem;
		line-height: 4rem;
	}


	.homepageSeoCateItemBox > h3,
	.homepageSeoCateItemBox .seocate-desc {
		margin: 4rem 0 0 0;
		font-size: 2rem;
		line-height: 3rem;
	}
	.homepageSeoCateItem h2,
	.homepageSeoCateItem h3 {
		padding: 1rem 4rem;
		gap: 1rem;
		font-size: 2rem;
		line-height: 4rem;
	}
	.homepSeoItemInner .homepMeritEn {
		font-size: 9rem;
		line-height: 9rem;
		top: 3.5rem;
	}
	.homepSeoItemBox {
		padding: 10rem 0 0 0;
		margin: 0;
	}
	.hmciseoItem {
		flex: 0 0 calc(33.33333333% - 10px);
		margin: 5px;
		padding: 3rem 1rem;
	}
	.hmciseoItem img {
		height: 7.2rem;
	}
	
	
	
	.homepageHDSWrap {
		/* padding: 15rem 0; */
		padding: 15rem 0 0 0;
	}
	.homepageHDSItemBox {
		padding: 4rem 0 0 0;
		margin: 0;
	}
	.homepageHDS {
		flex: 0 0 calc(100% - 0px);
		margin: 0;
		padding: 3rem 0rem;
		border-radius: 1rem;
	}
	.homepageHDS img {
		height: 7.2rem;
	}
	.homepageHDS h2 {
		margin: 2rem 0 0 0;
		font-size: 2.2rem;
		line-height: 3rem;
	}
	.homepageHDS h3 {
		font-size: 2.2rem;
		line-height: 3rem;
	}
	.homepageHDS h4 {
		font-size: 1.6rem;
		line-height: 2.6rem;
	}
}
@media (max-width: 767px){
	.homepagemadeMeritWrap {
		padding: 8rem 0 0 0;
	}
	.homepagePtitle h2 {
		margin: 0 0 1rem 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepagePtitle h3 {
		font-size: 1.4rem !important;
		line-height: 2rem;
	}
	
	
	.homepCustomContent {
		padding: 5rem 2rem 0 2rem;
		margin: 0;
	}
	.homepCustom {
		margin: 0 0 1rem 0;
		flex: 0 0 calc(100% - 0px);
		padding: 1.8rem 1.8rem;
	}
	.homepagemadeCustomInner .homepMeritItems {
		padding: 0rem 0 0 0;
	}
	.homepagemadeCustomInner .homepMeritEn {
		font-size: 5.2rem;
		line-height: 5.6rem;
		top: 11.2rem;
	}
	.homepCustom span {
		font-size: 1.6rem;
		line-height: 1.8rem;
	}
	.homepCustom img {
		right: 1.8rem;
		top: 1.8rem;
		height: 4rem;
	}
	.homepCustom h2,
	.homepCustom h3 {
		margin: 4.6rem 0 1rem 0;
		font-size: 1.8rem;
		line-height: 2.2rem;
	}
	.homepCustom .custom-subtitle {
		font-size: 1.5rem!important;
		line-height: 2.2rem;
	}
	.homepCustom h4,
	.homepCustom .custom-desc {
		padding: 1.4rem 0 0 0;
		margin: 1.4rem 0 0 0;
		font-size: 1.3rem !important;
		line-height: 2rem;
	}



	.homepageSeoWrap {
		padding: 8rem 0 0 0;
	}
	.homepageSeoInner .hmMoreBtn a {
		padding: 0.8rem 2rem;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}


	.homepageCustomItemBox {
		padding: 6rem 0 8rem 0;
	}
	.hmciTextInner {
		padding: 6rem 0;
		background-size: 767px;
	}
	.hmciText h2 {
		text-shadow: 20px 34px 20px rgba(0, 0, 0, 0.55);
		font-size: 3rem!important;
		line-height: 4.4rem;
		letter-spacing: -1.2px;
	}
	.hmciText h3,
	.hmciText .hmci-desc {
		margin: 3rem 0 0 0;
		font-size: 2rem;
		line-height: 3rem;
	}


	.homepageSeoCateItemBox {
		margin: 1rem 0 0 0;
	}
	.homepageSeoCateItem {
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		flex-direction: column;
	}
	.homepageSeoCateItem h2,
	.homepageSeoCateItem h3 {
		margin: 0;
		letter-spacing: -0.3px;
		padding: 0.6rem 1.6rem;
		gap: 0rem;
		font-size: 1.5rem!important;
		line-height: 3.2rem;
	}
	.homepageSeoCateItem img{
		height:3.5rem;
	}
	.homepageSeoCateItemBox > h3,
	.homepageSeoCateItemBox .seocate-desc {
		margin: 1rem 0 0 0;
		font-size: 1.4rem !important;
		line-height: 2rem;
	}
	.homepSeoItemInner .homepMeritEn {
		margin:0;
		font-size: 5.2rem!important;
		line-height: 5.6rem;
		top: 1rem;
	}
	.homepSeoItemBox {
		padding: 10.6rem 0 0 0;
		margin: 0;
	}
	.hmciseoItem {
		margin: 1rem 0 0 0;
		flex: 0 0 calc(100% - 0px);
		padding: 3rem 3rem;
	}
	.hmciseoItem:nth-child(1){
		margin:0;
	}
	.hmciseoItem a {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.hmciseoItem img {
		height: 6.2rem;
	}
	.hmciseoItem span{
		width: 100%;
		display: block;
	}
	.hmciseoItem h3 {
		margin: 0rem 0 0.8rem 0;
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.hmciseoItem dl {
		padding: 0;
		margin: 0;
		color: #FFF;
		text-align: center;
		font-family: 'Pretendard-Medium';
		font-size: 1.3rem;
		font-style: normal;
		font-weight: 500;
		line-height: 1.8rem;
	}
	
	
	.homepageHDSWrap {
		/* padding: 8rem 0; */
		padding: 8rem 0 0 0;
	}
	.homepageHDSWrap .hmMoreBtn {
		margin: 1rem 0 0 0;
	}
	.homepageHDSWrap .hmMoreBtn a {
		padding: 0.8rem 2rem;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.homepageHDSItemBox {
		padding: 3rem 0 0 0;
	}
	.homepageHDS {
		flex: 0 0 calc(100% - 0px);
		margin: 0 0 4rem 0;
		padding: 0;
		border-radius: 1rem;
	}
	.homepageHDS:last-child{
		margin:0;
	}
	.homepageHDS img {
		height: 6.2rem;
	}
	.homepageHDS h2 {
		margin: 2rem 0 0 0;
		font-size: 1.6rem;
		line-height: 2.2rem;
	}
	.homepageHDS h3 {
		margin: 1rem 0;
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.homepageHDS h4 {
		font-size: 1.4rem;
		line-height: 2rem;
	}
	.homepageHDSWrap .hmMoreBtn {
		margin: 2rem 0 0 0;
	}
	.homepageHDSWrap .hmMoreBtn a {
		padding: 0.8rem 2rem;
		font-size: 1.2rem;
		line-height: 2.2rem;
	}
}
/* ================================================ // 홈페이지제작방법 end ~ ================================================ */

/* ================================================ 홈페이지제작혜택 start ~  ================================================ */
.homepagemadeBnefitsWrap.hobeBox {
    padding: 0;
}
.homepagemadeBnefitsWrap.hobeBox .homepagemadeBnefitsSideBox {
    max-width: 188rem;
}
.homepagemadeBnefitsWrap.hobeBox .homepagemadeBnefitsInner {
    margin-top: 20rem;
}
.homepagemadeBnefitsWrap.hobeBox .homepBnefitEn {
    top: 10rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 13rem;
    line-height: 15rem;
}
.homepagemadeBnefitsWrap.hobeBox .homepBnefitstitle h2{
	margin:0;
}
.homepagemadeBnefitsWrap.hobeBox .homepBnefitsContent {
    margin-top: 14rem;
	z-index:3;
}


.hpbenewrap{
	position:relative;
	padding:12rem 0 20rem 0;
}
.hpbeneSideBox {
    position: relative;
    max-width: 188rem;
    padding: 0 2rem;
    margin: 0 auto;
}
.hpbeitem{
	position:relative;
}
.hpbeitem ul{
	position:relative;
	padding:0 6rem; 
}
.hpbeitem ul li:nth-child(1){
	border-top: none;
	margin: 0;
}
.hpbeitem ul li {
	    margin: 0;
    position: relative;
    /* border-top: 1px solid rgba(255,255,255,0.2); */
    /* padding: 8rem 0 0rem 0; */
    /* margin: 8rem 0 0rem 0; */
}

.hpbeBox{
	width:100%;
	display:flex;
	/* gap:6rem; */
}
.hpbe {
    /* margin: 8rem 0 0 0; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8rem 0 8rem 16.4rem;
    width: 50%;
    position: relative;
}
.hpbe:nth-child(1){
	padding-right:3rem;
}
.hpbe:nth-child(2) {
    padding-left: 19.4rem;
}
.hpbe:nth-child(2) img.icon{
	left:3rem;
}
.hpbe img.icon{
	height:10.4rem;
	position:absolute;
	left:0;
	top:8rem;
}
.hpbetext h2 {
    margin: 0 0 2rem 0;
    gap: 1rem;
    width: 100%;
    display: flex;
    color: #FFF;
    font-family: 'Pretendard-SemiBold';
	font-weight: 600;
    font-size: 2.2rem;
    font-style: normal;
    line-height: 3.4rem;
    text-transform: uppercase;
    flex-direction: column;
    align-items: flex-start;
}
.hpbetext h2 b{
	margin:0;
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-size: 3rem;
	font-style: normal;
	font-weight: 700;
	line-height: 4rem;
}
.hpbetext h3,
.hpbetext .benefit-desc{
	margin:0;
	color: #FFF;
	font-family: 'Pretendard-Light';
	font-size: 2rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.4rem;
	text-transform: uppercase;
	display: block!important;
}
@media (max-width: 1700px){
	.hpbeitem ul {
		padding: 0;
	}
	.hpbetext h2 {
		margin: 0 0 1.6rem 0;
		gap: 0.6rem;
		font-size: 2rem;
		line-height: 3rem;
	}
	.hpbetext h2 b {
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.hpbetext h3,
	.hpbetext .benefit-desc {
		font-size: 1.7rem;
		line-height: 3rem;
	}
}
@media (max-width: 991px){
	.homepagemadeBnefitsWrap.hobeBox .homepagemadeBnefitsInner {
		margin-top: 12rem;
	}
	.homepagemadeBnefitsWrap.hobeBox .homepBnefitsContent {
		margin-top: 10rem;
	}
	.homepagemadeBnefitsWrap.hobeBox .homepBnefitEn {
		top: 7rem;
		font-size: 10rem;
		line-height: 12rem;
	}
	
	
	.hpbenewrap {
		padding: 4rem 0 12rem 0;
	}
	.hpbeitem ul {
		position: relative;
		padding: 0;
	}
	.hpbeBox {
		width: 100%;
		display: flex;
		/* gap: 6rem; */
		flex-direction: column;
	}
	.hpbe {
		padding: 8rem 0 8rem 12.4rem;
		width: 100%;
		position: relative;
	}
	.hpbe:nth-child(1) {
		padding-right: 0;
	}
	.hpbe:nth-child(2) img.icon {
		left: 0;
	}
	.hpbe:nth-child(2) {
		padding-left: 12.4rem;
	}
	.hpbe img.icon {
		height: 8.4rem;
		top: 8rem;
	}
	.hpbeitem ul li:last-child .hpbe:nth-child(2) {
		padding-bottom: 0;
		border-bottom: none;
	}
}
@media (max-width: 767px){
	.homepagemadeBnefitsWrap.hobeBox .homepagemadeBnefitsInner {
		margin-top: 8rem;
	}
	.homepagemadeBnefitsWrap.hobeBox .homepBnefitsContent {
		margin-top: 10.6rem;
	}
	.homepagemadeBnefitsWrap.hobeBox .homepBnefitEn {
		top: 7.4rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	
	
	.hpbenewrap {
		padding: 5rem 0 8rem 0;
	}
	.hpbe {
		padding: 4rem 0 4rem 7.8rem;
		width: 100%;
		position: relative;
	}
	.hpbe:nth-child(2) {
		padding-left: 7.8rem;
	}
	.hpbeitem ul li:last-child .hpbe:nth-child(2) {
		padding-bottom: 0;
		border-bottom: none;
	}
	.hpbetext h2 {
		margin: 0 0 1rem 0;
		gap: 1rem;
		font-size: 1.8rem!important;
		line-height: 2.4rem;
	}
	.hpbetext h2 b {
		font-size: 1.6rem;
		line-height: 2.2rem;
	}
	.hpbetext h3,
	.hpbetext .benefit-desc {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
	.hpbe img.icon {
		height: 6.2rem;
		top: 4rem;
	}
}
/* ================================================ // 홈페이지제작혜택 end ~  ================================================ */

/* ================================================ 홈페이지제작과정 start ~  ================================================ */
.hoprWrap {
	overflow:hidden;
    position: relative;
    padding: 20rem 0;
}
.hoprWrap .homepagemadePortfolioSideBox {
    max-width: 100%;
    padding: 0 4rem;
}
.hoprWrap .homepBnefitstitle h2 {
    margin: 0;
}
.hoprWrap .homepBnefitEn {
    top: 10rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 13rem;
    line-height: 15rem;
}
.hoprWrap .ppSwiper {
	position:relative;
	z-index:3;
    margin-top: 14rem;
}
.hoprWrap .hmMoreBtn.silde {
    margin: 6.6rem 0 0 0;
}
.hoprWrap .swiper-slide {
	width:48rem;
}
.hoprBox{
	display: flex;
	width: 100%;
	padding: 4rem;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(0, 0, 0, 0.50);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.hoprtop {
	margin:0 0 6rem 0;
    width: 100%;
    display: flex;
    color: #FFF;
    font-family: Outfit;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.8rem;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: flex-start;
}
.hoprtop img{
	height:4rem;
}
.hoprtext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3rem;
}
.hoprtext h2,
.hoprtext h3{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size: 3rem;
	font-style: normal;
	line-height: 4rem;
	margin:0;
}
.hoprtext h4,
.hoprtext .process-desc{
	display: block!important;
	margin:0;
	color: #FFF;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.2rem;
	text-transform: uppercase;
}
.hoprBox .hmMoreBtn {
    margin: 3rem 0 0 0!important;
}
.hoprBox .hmMoreBtn a {
    padding: 0.6rem 3rem;
    font-size: 1.6rem;
    line-height: 4.5rem;
}
@media (max-width: 1700px){
	.hoprWrap .swiper-slide {
		width: 40rem;
	}
	.hoprBox {
		padding: 3rem 3rem;
	}
	.hoprtop {
		margin: 0 0 5rem 0;
		font-size: 2.6rem;
		line-height: 2.6rem;
	}
	.hoprtext {
		gap: 2rem;
	}
	.hoprtext h2,
	.hoprtext h3 {
		font-size: 2.6rem;
		line-height: 3.2rem;
		margin: 0;
	}
	.hoprtext h4,
	.hoprtext .process-desc {
		font-size: 1.7rem;
		line-height: 3rem;
	}
	.hoprBox .hmMoreBtn a {
		padding: 0.6rem 3rem;
		font-size: 1.5rem;
		line-height: 4rem;
	}
}
@media (max-width: 991px){
	.hoprWrap {
		padding: 12rem 0;
	}
	.hoprWrap .homepagemadePortfolioSideBox {
		padding: 0 2rem;
	}
	.hoprWrap .ppSwiper {
		margin-top: 10rem;
	}
	.hoprWrap .homepBnefitEn {
		top: 7rem;
        font-size: 10rem;
        line-height: 12rem;
	}
}
@media (max-width: 767px){
	.hoprWrap {
		position: relative;
		padding: 8rem 0;
	}
	.hoprWrap .homepBnefitEn {
		top: 7.4rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	.hoprWrap .ppSwiper {
		margin-top: 5rem;
	}
	.hoprWrap .swiper-wrapper {
		display: flex;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		flex-direction: column;
	}
	.hoprWrap .swiper-slide {
		width: 100%;
	}
	.hoprWrap .hmMoreBtn.silde {
		display:none;
	}
	
	
	.hoprBox {
		margin: 0 0 0.8rem 0;
		padding: 2rem;
	}
	.hoprtop {
		margin: 0 0 2.4rem 0;
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.hoprtext {
		gap: 1.6rem;
	}
	.hoprtext h2,
	.hoprtext h3 {
		font-size: 1.8rem!important;
		line-height: 2.4rem;
		margin: 0;
	}
	.hoprtext h4,
	.hoprtext .process-desc {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
	.hoprBox .hmMoreBtn {
		margin: 1.6rem 0 0 0!important;
	}
	.hoprBox .hmMoreBtn a {
		padding: 0.8rem 2.2rem;
		font-size: 1.2rem;
		line-height: 2.2rem;
	}
}
/* ================================================ // 홈페이지제작과정 end ~  ================================================ */

/* ================================================ 홈페이지자료전달 start ~  ================================================ */
.hpdatawrap{
	position:relative;
	padding:20rem 0;
}
.hpdataBox{
	position:relative;
	width:100%;
	margin:14rem 0 0 0;
}
.hpdataBox:nth-child(1){
	margin:0;
}
.hpdataSidebox{
	max-width:100%;
	padding:0 4rem;
}

.hpdataBox .homepBnefitEn {
    top: 20rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 13rem;
    line-height: 14rem;
}

.hpdate1Lay{
	gap:2rem;
	z-index:3;
	margin:13rem 0 0 0;
	position:relative;
	display:flex;
	width:100%;
}
.hpdate1 {
    width: 50%;
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    display: flex;
    padding: 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hpdate1text {
	gap:4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.hpdate1text img{
	height:5rem;
}
.hpdate1text h3,
.hpdate1text h4{
	margin:0;
	color: #00EB88;
	text-align: center;
	font-family: 'Pretendard-Bold';
	font-size: 3rem;
	font-style: normal;
	font-weight: 700;
	line-height: 4rem;
}
.hpdate1 .hmMoreBtn a {
	gap:1.2rem;
    padding: 1.3rem 6.7rem;
    font-size: 2rem;
    line-height: 4.4rem;
}
.hpdate1 .hmMoreBtn a img{
	height:2.2rem;
}
.hpdate1 .hmMoreBtn a:hover img {
	filter: invert(100%) sepia(52%) saturate(20%) hue-rotate(315deg)
    brightness(103%) contrast(108%);
}
.kaxnfltext{
	margin:2rem 0 0 0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.2rem;
}



.hpdatefoldBox{
	z-index:3;
	margin:13rem auto 0 auto;
	position:relative;
	width:100%;
	max-width:108rem;
}
.hpdatefold {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    display: flex;
    padding: 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hpdatefold ul{
	display:flex;
	gap:6rem;
	margin:0;
}
.hpdatefold ul li {
	margin:0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hpdatefold ul li:nth-child(3){
	opacity: 0.7;
}
.hpdatefold ul li:nth-child(4){
	opacity: 0.5;
}
.hpdatefold ul li:nth-child(5){
	opacity: 0.3;
}
.hpdatefold ul li img{
	max-width:100%;
}
.hpdatefold ul li h3,
.hpdatefold ul li h4{
	margin:0.6rem 0 0 0;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-SemiBold';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2.4rem;
}

.hpdats2Info {
    margin: 2rem 0 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.hpdats2Info ul {
    display: flex;
    margin: 0;
    gap: 0.6rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.hpdats2Info ul li{
	margin:0;
	display:block;
	position:relative;
	padding:0 0 0 1.4rem;
}
.hpdats2Info ul li:before {
    left: 0;
    top: 1.2rem;
    border-radius: 50%;
    content: '';
    position: absolute;
    width: .6rem;
    height: .6rem;
    background: #00EB88;
}
.hpdats2Info ul li h4,
.hpdats2Info ul li .info-desc{
	display: block!important;
	margin:0;
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 3.2rem;
}


.hpdatemailBox{
	z-index:3;
	margin:13rem auto 0 auto;
	position:relative;
	width:100%;
	max-width:86rem;
}
.hpdatemail {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    display: flex;
    padding: 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hpdatetext {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hpdatetext h3{
	text-align:center;
	margin:0 0 1rem 0;
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 3rem;
}
.hpdatetext a{
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-size: 3.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 4.6rem;
}
.hpdatetext .hmMoreBtn {
    margin: 3rem 0 0 0;
}
.hpdatetext .hmMoreBtn a img{
	height:2.2rem;
}
.hpdatetext .hmMoreBtn a {
	gap:1.2rem;
	border: 1px solid #00EB88;
    color: #00EB88;
    font-size: 2rem;
    line-height: 4.4rem;
}
.hpdatetext .hmMoreBtn a:hover{
	color: #111;
}
.hpdatetext .hmMoreBtn a:hover img {
	filter: invert(100%) sepia(52%) saturate(20%) hue-rotate(315deg)
    brightness(100%) contrast(100%);
}
@media (max-width: 1700px){
	
}
@media (max-width: 991px){
	.hpdatawrap {
		padding: 12rem 0;
	}
	.hpdataBox .homepBnefitEn {
		top: 15.5rem;
		font-size: 10rem;
		line-height: 12rem;
	}
	.hpdate1Lay {
		gap: 2rem;
		margin: 10rem 0 0 0;
	}
	.hpdataBox {
		margin: 12rem 0 0 0;
	}
	.hpdate1 {
		padding: 4rem 2rem;
	}
	.hpdate1text {
		gap: 3rem;
	}
	.hpdate1text h3,
	.hpdate1text h4 {
		font-size: 2.4rem;
		line-height: 3rem;
	}
	.hpdate1 .hmMoreBtn a {
		gap: 1.2rem;
		padding: 1rem 5rem;
		font-size: 1.8rem;
		line-height: 4rem;
	}
	.kaxnfltext {
		margin: 2rem 0 0 0;
		font-size: 1.6rem;
		line-height: 3rem;
	}



	.hpdatefoldBox {
		margin: 10rem auto 0 auto;
	}
	.hpdatefold {
		padding: 6rem 2rem;
	}
	.hpdatefold ul {
		display: flex;
		gap: 3rem;
		margin: 0;
	}
	.hpdats2Info ul li h4,
	.hpdats2Info ul li .info-desc {
		font-size: 1.6rem;
		line-height: 3rem;
	}
	.hpdats2Info ul li:before {
		top: 1.1rem;
	}
	
	
	.hpdatemailBox {
		margin: 10rem auto 0 auto;
	}
}
@media (max-width: 767px){
	.hpdatawrap {
		padding: 8rem 0;
	}
	.hpdataBox .homepBnefitEn {
		top: 9.2rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	.hpdate1Lay {
		display: flex;
		gap: 0.8rem;
		margin: 5rem 0 0 0;
		flex-direction: column;
	}
	.hpdate1 {
		width: 100%;
		padding: 3rem;
	}
	.hpdate1text {
		gap: 2rem;
	}
	.hpdate1text h3,
	.hpdate1text h4 {
		font-size: 1.8rem!important;
		line-height: 2.4rem;
	}
	.hpdate1Lay .hmMoreBtn {
		margin: 1.6rem 0 0 0;
	}
	.hpdate1 .hmMoreBtn a {
		gap: 1.2rem;
		padding: 1.4rem 3rem;
		font-size: 1.5rem;
		line-height: 2.2rem;
	}
	.hpdate1 .hmMoreBtn a img {
		height: 1.8rem;
	}
	.kaxnfltext {
		margin: 0.8rem 0 0 0;
		font-size: 1.3rem;
		line-height: 2rem;
	}
	
	
	.hpdataBox {
		margin: 8rem 0 0 0;
	}
	.hpdatefoldBox {
		margin: 5rem auto 0 auto;
	}
	.hpdataSidebox {
		padding: 0 2rem;
	}
	.hpdatefold {
		padding: 4rem;
	}
	.hpdatefold ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: -10px;
		list-style-type: none;
		justify-content: center;
	}
	.hpdatefold li {
		flex: 0 0 calc(33.333% - 20px);
		margin: 10px;
		box-sizing: border-box;
	}
	.hpdatefold ul li h3,
	.hpdatefold ul li h4 {
		margin: 0.25rem 0 0 0;
		font-size: 1rem!important;
		line-height: 1.6rem;
	}
	.hpdats2Info {
		margin: 0.8rem 0 0 0;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.hpdats2Info ul {
		gap: 0.4rem;
	}
	.hpdats2Info ul li {
		padding: 0 0 0 1rem;
	}
	.hpdats2Info ul li h4,
	.hpdats2Info ul li .info-desc {
		text-align: left;
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.hpdats2Info ul li:before {
		width: .4rem;
		height: .4rem;
		top: 0.7rem;
	}
	
	
	.hpdatemail {
		padding: 3rem;
	}
	.hpdatemailBox {
		margin: 5rem auto 0 auto;
	}
	.hpdatetext h3 {
		margin: 0 0 0.6rem 0;
		font-size: 1.4rem!important;
		line-height: 2rem;
	}
	.hpdatetext a {
		font-size: 2.4rem;
		line-height: 3.2rem;
	}
	.hpdatetext .hmMoreBtn {
		margin: 2rem 0 0 0;
	}
	.hpdatetext .hmMoreBtn a {
		padding: 1.4rem 3rem;
		gap: 1.2rem;
		border: 1px solid #00EB88;
		color: #00EB88;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.hpdatetext .hmMoreBtn a img {
		height: 1.8rem;
	}
}
/* ================================================ // 홈페이지자료전달 end ~  ================================================ */

/* ================================================ 홈페이지유지보수 start ~  ================================================ */
.hpaMateWrap {
    position: relative;
    padding: 20rem 0 0 0;
}
.hpaMateSideBox {
    position: relative;
    max-width: 188rem;
    padding: 0 2rem;
    margin: 0 auto;
}
.hpaMateInner {
    position: relative;
}

.maintenan .homepMeritEn{
	top: 20rem;
	font-size: 13rem;
    line-height: 15rem;
}
.hpaMateContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 14rem 0 0 0;
    margin: -1rem;
    list-style-type: none;
}
.hpaMateitems{
	flex: 0 0 calc(33.33333333333% - 2rem);
    margin: 1rem;
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 4rem;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    justify-content: flex-start;
}
.hpmiTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	margin:0 0 6rem 0;
}
.hpmiTop img{
	height:4rem;
}
.hpmiTop span{
	color: #FFF;
	font-family: Outfit;
	font-size: 2.8rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2.8rem;
	text-transform: uppercase;
}
.hpmiText {
    gap: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.hpmiText h2,
.hpmiText h3{
	margin:0;
	text-align:left;
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-size: 3rem;
	font-style: normal;
	font-weight: 700;
	line-height: 4rem;
	display: block!important;
}
.hpmiText .hpmi-desc{
	margin:0;
	text-align:left;
	color: #FFF;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.2rem;
	text-transform: uppercase;
	display: block!important;
}



.howto .homepMeritEn {
    top: 17rem;
	font-size: 13rem;
    line-height: 15rem;
}
.hpaMateHowContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 14rem 0 0 0;
    margin: -1rem;
    list-style-type: none;
}
.hpaMateHowitems {
    flex: 0 0 calc(33.33333333333% - 2rem);
    margin: 1rem;
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 4rem;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: flex-start;
}
.hpmatTop{
	position:relative;
	width:100%;
}
.hpmatTop span{
	position:absolute;
	left:0;
	top:0;
	color: #FFF;
	font-family: Outfit;
	font-size: 2.8rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2.8rem;
	text-transform: uppercase;
}
.hpmatTop img{
	position:absolute;
	right:0;
	top:0;
	height:2.2rem;
}
.howimginner {
    width: 100%;
    height: 18.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
	margin:0 0 3rem 0;
}
.howimginner img{
	height:50%;
}
.howimginner img.himg_01{height:12.7rem;}
.howimginner img.himg_02{height:10.1rem;}
.howimginner img.himg_03{height:12.3rem;}

.hpaMateHowitems h3,
.hpaMateHowitems .howto-desc {
    display: flex!important;
    min-height: 9.6rem;
    color: #FFF;
    text-align: center;
    font-family: 'Pretendard-Bold';
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hpaMateHowitems h3 a,
.hpaMateHowitems .howto-desc a{
	display:inline-block;
}


.freepaid .homepagePtitle h2{
	margin:0;
}
.freepaid .homepMeritEn {
    top: 10rem;
	font-size: 13rem;
    line-height: 15rem;
}
.hpaMatefrpaContent{
	position: relative;
    z-index: 3;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 14rem 0 0 0;
    margin: -1rem;
    list-style-type: none;
}
.hpaMatefrpaitems {
    flex: 0 0 calc(50% - 2rem);
    margin: 1rem;
    text-align: center;
    position: relative;
    list-style: none;
    display: flex;
    padding: 4rem;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: flex-start;
}
.hpfrpatitle {
    border-bottom: 1px solid rgba(217,217,217,0.3);
    margin: 0 0 4rem 0;
    padding: 0 0 3rem 0;
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.hpfrpatitle img{
	height:5rem;
}
.hpfrpatitle h2,
.hpfrpatitle h3{
	margin:0;
	color: #FFF;
	font-family: 'Pretendard-Bold';
	font-size: 3rem;
	font-style: normal;
	font-weight: 700;
	line-height: 5rem;
}
.hpfrpatitle h2 b,
.hpfrpatitle h3 b{
	margin:0;
	color: #00EB88;
}
.hpfrpaInner{
	width:100%;
	display:flex;
}
.hpfrpaItem {
    width: 100%;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.hpfrpaItem img{
	height:4rem;
}
.hpfrpaItem h3 span,
.hpfrpaItem .frpa-desc span{
	margin:0 0 1rem 0;
	display:block!important;
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: 3.2rem;
}
.hpfrpaItem h3,
.hpfrpaItem .frpa-desc{
	display: block!important;
	text-align: left;
	margin:0;
	color: #FFF;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.2rem;
	text-transform: uppercase;
}


.hpaMateWrap.payment {
    padding: 20rem 0 20rem 0;
}
.payment .hpfrpaItem {
    width: 100%;
    display: flex;
    gap: 0rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.payment .hpfrpaItem h3,
.payment .hpfrpaItem .frpa-desc {
    text-align: center;
}

.hpfrpaItem dl {
    margin: 0;
    gap: 3rem;
    display: flex;
    align-items: center;
}
.hpfrpaItem dl b{
	padding:0 0 0 0.9rem;
	position:relative;
	color: #FFF;
	text-align: center;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.2rem;
	text-transform: uppercase;
}
.hpfrpaItem dl b:before {
    top: 1.3rem;
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #00EB88;
    position: absolute;
    left: 0;
}
@media (max-width: 1700px){
	.hpaMateitems {
		padding: 3rem;
	}
	.hpmiTop {
		margin: 0 0 5rem 0;
	}
	.hpmiText {
		gap: 2rem;
	}
	.hpmiText h2 {
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.hpmiText h3 {
		font-size: 1.7rem;
		line-height: 3rem;
	}
	
	
	.hpaMateHowitems {
		padding: 3rem;
	}
	.howimginner {
		height: 16.9rem;
		margin: 0 0 2rem 0;
	}
	.howimginner img.himg_01{height:10.7rem;}
	.howimginner img.himg_02{height:8.1rem;}
	.howimginner img.himg_03{height:10.3rem;}
	.hpaMateHowitems h3 {
		min-height: 7.6rem;
		font-size: 1.8rem;
		line-height: 2.6rem;
	}
	
	
	.hpaMatefrpaitems {
		padding: 3rem;
	}
	.hpfrpatitle {
		margin:0 0 3rem 0;
		padding: 0 0 2rem 0;
	}
	.hpfrpatitle h2,
	.hpfrpatitle h3 {
		font-size: 2.6rem;
		line-height: 4rem;
	}
	.hpfrpatitle img {
		height: 4rem;
	}
	.hpfrpaItem h3 span,
	.hpfrpaItem .frpa-desc span {
		margin: 0 0 1rem 0;
		font-size: 2rem;
		line-height: 3rem;
	}
	.hpfrpaItem img {
		height: 3.6rem;
	}
	.hpfrpaItem h3,
	.hpfrpaItem .frpa-desc {
		font-size: 1.7rem;
		line-height: 3rem;
	}
}
@media (max-width: 1400px){
	.howimginner {
		height: 14.9rem;
		margin: 0 0 0rem 0;
	}
	.howimginner img.himg_01{height:8.7rem;}
	.howimginner img.himg_02{height:6.1rem;}
	.howimginner img.himg_03{height:8.3rem;}
}
@media (max-width: 991px){
	.hpaMateWrap {
		padding: 12rem 0 0 0;
	}
	.hpaMateContent {
		padding: 10rem 0 0 0;
		margin: -1rem;
	}
	.maintenan .homepMeritEn {
		top: 20rem;
		font-size: 9rem;
		line-height: 9rem;
	}
	.hpaMateitems {
		flex: 0 0 calc(50% - 2rem);
		padding: 3rem;
	}
	.hpmiTop {
		margin: 0 0 4rem 0;
	}
	
	
	
	.hpaMateHowContent {
		padding: 10rem 0 0 0;
		margin: -1rem;
	}
	.howto .homepMeritEn {
		top: 14rem;
		font-size: 9rem;
		line-height: 9rem;
	}
	.hpaMateHowitems {
		flex: 0 0 calc(100% - 2rem);
		padding: 3rem;
	}
	.howimginner {
		height: 16.9rem;
		margin: 0 0 0rem 0;
	}
	.howimginner img.himg_01{height:10.7rem;}
	.howimginner img.himg_02{height:8.1rem;}
	.howimginner img.himg_03{height:10.3rem;}
	.hpmatTop img {
		transform: rotate(90deg);
		position: absolute;
		right: 0;
		top: 0;
		height: 2.2rem;
	}
	
	
	
	.hpaMatefrpaContent {
		padding: 10rem 0 0 0;
		margin: -1rem;
	}
	.freepaid .homepMeritEn {
		top: 9rem;
		font-size: 9rem;
		line-height: 9rem;
	}
	.hpaMatefrpaitems {
		flex: 0 0 calc(100% - 2rem);
		padding: 3rem;
	}
	
	
	.hpaMateWrap.payment {
		padding: 12rem 0 12rem 0;
	}
}
@media (max-width: 767px){
	.hpaMateWrap {
		padding: 8rem 0 0 0;
	}
	.hpaMateContent {
		padding: 4.2rem 0 0 0;
		margin: 0;
	}
	.maintenan .homepMeritEn {
		top: 15rem;
		font-size: 4.4rem;
		line-height: 6rem;
	}
	.hpaMateitems {
		border-radius: 0.6rem;
		margin: 0.8rem 0 0 0;
		flex: 0 0 calc(100% - 0rem);
		padding: 2rem;
	}
	.hpmiTop {
		margin: 0 0 2.4rem 0;
	}
	.hpmiTop span {
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.hpmiText {
		gap: 1.6rem;
	}
	.hpmiText h2 {
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.hpmiText h3 {
		font-size: 1.3rem;
		line-height: 2rem;
	}
	
	
	.hpaMateHowContent {
		padding: 4.2rem 0 0 0;
		margin: 0;
	}
	.howto .homepMeritEn {
		top: 9.3rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	.hpaMateHowitems {
		border-radius: 0.6rem;
		margin: 0.8rem 0 0 0;
		flex: 0 0 calc(100% - 0rem);
		padding: 2rem;
	}
	.hpmatTop {
		margin: 0 0 1rem 0;
		display: flex;
		position: relative;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.hpmatTop span {
		position: relative;
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.hpmatTop img {
		transform: rotate(90deg);
		position: relative;
		right: 0;
		top: 0;
		height: 1.4rem;
	}
	.howimginner {
		height: auto;
		margin: 0 0 2rem 0;
	}
	.howimginner img.himg_01{height:9.6rem;}
	.howimginner img.himg_02{height:7.1rem;}
	.howimginner img.himg_03{height:8rem;}
	.hpaMateHowitems h3 {
		min-height: auto;
		font-size: 1.4rem;
		line-height: 2rem;
	}
	
	
	
	.hpaMatefrpaContent {
		padding: 3rem 0 0 0;
		margin: 0;
	}
	.freepaid .homepMeritEn {
		top: 4.2rem;
		font-size: 5rem;
		line-height: 5.6rem;
	}
	.hpaMatefrpaitems {
		margin: 2rem 0 0 0;
		flex: 0 0 calc(100% - 0rem);
		padding: 2rem 2rem 3rem 2rem;
	}
	.hpfrpatitle img {
		height: 2.4rem;
	}
	.hpfrpatitle h2,
	.hpfrpatitle h3 {
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	.hpfrpaInner {
		gap: 3rem;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.hpfrpaItem {
		width: 100%;
		display: flex;
		gap: 2rem;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.hpfrpaItem h3 span,
	.hpfrpaItem .frpa-desc span {
		margin: 0 0 0.6rem 0;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.hpfrpaItem h3,
	.hpfrpaItem .frpa-desc {
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.hpfrpaItem h3 br,
	.hpfrpaItem .frpa-desc br{display:none;}
	.hpfrpaItem img {
		height: 4rem;
	}
	
	
	
	.hpaMateWrap.payment {
		padding: 8rem 0 8rem 0;
	}
	.hpfrpaItem dl {
		margin: 0;
		gap: 0.4rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
	}
	.hpfrpaItem dl b {
		padding: 0 0 0 1rem;
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.hpfrpaItem dl b:before {
		top: 0.7rem;
		width: 0.4rem;
		height: 0.4rem;
	}
}
/* ================================================ // 홈페이지유지보수 end ~  ================================================ */