/* ================================================ 검색엔진최적화 메인 start ~ ================================================ */
.homepagemadeWrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: left;
    padding-top: 18.2rem;
    background: #fff;
}
.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: #111;
	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 {
    padding: 0;
    margin: 0;
	color:#111;
    font-size: 2.4rem!important;
    line-height: 3.8rem;
    display: block;
    text-align: center;
	font-family: 'Pretendard-Light';
	font-weight: 300;
}
.homepagemadeMainTitle h2 span{
	color: #00EB88;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.hpmtBr{display:none;}
@media (max-width:991px) {
	.homepagemadeWrap {
		padding-top: 12rem;
	}
	.homepagemadeMainTitle{
		padding:0 2rem;
		display:block;
	}
	.homepagemadeMainTitle h1 {
		margin: 0 0 4rem 0;
		font-size: 5rem;
		line-height: 6.4rem;
	}
	.homepagemadeMainTitle h2 {
		font-size: 2rem!important;
		line-height: 3rem;
	}
}
@media (max-width:767px) {
	.homepagemadeWrap {
		padding-top: 8rem;
	}
	.homepagemadeMainTitle{
		padding:0 1rem;
		display:block;
	}
	.homepagemadeMainTitle h1 {
		margin: 0 0 2rem 0;
		font-size: 3rem;
		line-height: 3.8rem;
	}
	.homepagemadeMainTitle h1 {
		margin: 0 0 2rem 0;
		letter-spacing: -1px;
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.homepagemadeMainTitle h2 {
		font-size: 1.5rem!important;
		line-height: 2.2rem;
	}
	.homepagemadeMainTitle h2 br{display:none;}
	.hpmtBr{display:block!important;}
}


/* ============ portfolio STARAT ~  ============ */
.homepagemadePortfolioWrap {
    overflow: hidden;
    position: relative;
    padding: 10rem 0 0rem 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 {  border-radius:1.4rem; 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 {
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    border-radius: 1.4rem;
    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 {
    border-radius: 99px;
    border: 1px solid #111;
    backdrop-filter: blur(15px);
    display: flex;
    padding: 1.2rem 5.6rem;
    justify-content: center;
    align-items: center;
    color: #111;
    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/seopage/seoport_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/seopage/seoport_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: #000;
	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:7rem;
    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: 11rem 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(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.50);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
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 0rem 0;
	color:#000;
    font-size: 1.8rem;
    line-height: 2.6rem;
    display: block;
    text-align: left;
	font-family: Outfit;
	font-weight: 500;
}
.homepMerit h3{
	padding: 0;
	margin: 1.4rem 0 1.4rem 0;
	color:#000;
	font-size: 2.4rem!important;
	line-height: 3.4rem;
	display: block;
	text-align: left;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.homepMerit h4{
	padding: 0;
	margin: 0;
	color:#888;
	font-size: 1.8rem!important;
	line-height: 2.8rem;
	display: block;
	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: 5rem 0 0 0;
		margin: 0px;
	}
}
@media (max-width:767px) {
	.homepagemadeMeritWrap {
		padding: 5rem 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: 6.4rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	.homepMeritEn br{display:block;}
	
	.homepMeritContent {
		padding: 9.8rem 1.5rem 0 1.5rem;
		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: 2rem 0 0rem 0;
		font-size: 1.2rem;
		line-height: 1.8rem;
	}
	.homepMerit h3 {
		margin: 1rem 0 1rem 0;
		font-size: 1.6rem!important;
		line-height: 2.2rem;
	}
	.homepMerit h4 {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
}
@media (max-width:500px) {
	.homepMeritItems {
		padding: 9.7rem 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 ~  ============ */
.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: #000;
    text-align: center;
    font-family: Pretendard;
    font-weight: 400;
    font-size: 5rem!important;
    font-style: normal;
    line-height: 7rem;
}
.homepProcesstitle h2 span{
	font-family: 'Pretendard-Bold';
    font-weight: 700;
    color: #00EB88;
}
.spMoreBtn {
    margin: 4rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.spMoreBtn a{
	display: flex;
	padding: 1.2rem 5.6rem;
	justify-content: center;
	align-items: center;
	border-radius: 99px;
	border: 1px solid #111;
	backdrop-filter: blur(15px);
	color: #111;
	font-family: 'Pretendard-SemiBold';
	font-size: 2rem;
	font-style: normal;
	font-weight: 600;
	line-height: 4.5rem;
}

.homepagemadeProcessInner{
	display:block;
}
.homepProcessEn {
    top: 22rem;
    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: 18rem 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(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.50);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
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 h3{
	word-break: keep-all;
	display:block;
	padding:0;
	margin:5rem 0 0rem 0;
	text-align: left;
	color: #000;
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
	font-size: 2.2rem;
	font-style: normal;
	line-height: 3rem;
}
@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: 15.5rem;
		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;
	}
	
	.spMoreBtn {
		margin: 2rem 0 0 0;
	}
	.spMoreBtn a {
		padding: 1rem 4.6rem;
		font-size: 1.8rem;
		line-height: 3.5rem;
	}
}
@media (max-width:767px) {
	.homepagemadeProcessWrap {
		padding: 8rem 0 0 0;
	}
	.homepProcesstitle h2 {
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	.homepProcessEn {
		font-size: 5.2rem;
		line-height: 5.6rem;
		top: 9rem;
	}
	.homepProcessContent {
		padding: 4.8rem 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 h3 {
		margin: 3rem 0 0rem 0;
		font-size: 1.8rem;
		line-height: 2.4rem;
	}
	
	.spMoreBtn {
		margin: 1rem 0 0 0;
	}
	.spMoreBtn a {
		padding: 1rem 2.2rem;
		font-size: 1.4rem;
		line-height: 2rem;
	}
}
/* ============ // 제작프로세스 end ~  ============ */

/* ============ 적용방법 STARAT ~  ============ */
.howto .homepMerit {
    flex: 0 0 calc(33.3333333333% - 20px);
}
.howto .homepMeritEn {
    top: 7rem;
}
@media (max-width:991px) {
	.howto .homepMeritContent {
		padding: 8rem 0 0 0;
		display: flex;
		flex-direction: column;
	}
	.howto .homepMerit {
		flex: 0 0 calc(100% - 20px);
	}
}
@media (max-width:767px) {
	.homepagemadeMeritWrap.howto{
		padding: 8rem 0 0 0;
	}
	.howto .homepMerittitle h2 span{display:inline-block;}
	.howto .homepMeritContent {
		width: 100%;
		padding: 4.5rem 1.5rem 0 1.5rem;
		display: flex;
		flex-direction: column;
	}
	.howto .homepMeritEn {
		top: 3.5rem;
	}
	.howto .homepMerit {
		width: 100%;
		flex: 0 0 calc(100% - 20px);
	}
}
@media (max-width:500px) {
	.howto .homepMeritItems {
		padding: 4.5rem 0 0 0;
	}
	.howto .homepMeritContent {
		padding: 0 2rem;
		width: 88rem;
		flex-wrap: inherit;
		display: flex;
		margin: 0;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.howto .homepMerit {
		width: 27rem;
		border-radius: 0.6rem;
		flex: inherit;
		margin: 0 1rem 0 0;
		padding: 1.8rem;
	}
}
/* ============ // 적용방법 end ~  ============ */

/* ============ 효과 STARAT ~  ============ */
.homepagemadeBnefitsWrap{
	position:relative;
	padding:20rem 0 0 0;
}
.homepagemadeBnefitsSideBox{
	position:relative;
	max-width:148rem;
	padding:0 2rem;
	margin:0 auto;
}
.homepBnefitEn{
    margin: 0;
    top: 22rem;
    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;
}
.homepBnefitstitle h2{
	padding: 0;
    margin: 0 0 4rem 0;
	display:block;
	
	color: #111;
	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 {
    z-index: 2;
    padding: 18rem 0 0 0;
    position: relative;
    margin: 0;
    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 {
	curosr:pointer;
    display: flex;
    border-radius: 99px;
    backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	z-index:2;
	border-radius: 99px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: rgba(255, 255, 255, 0.30);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
	
    padding: 1.1rem 3.5rem;
    position: relative;
    text-align: center;
    color: #111;
    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 #00D679;
	color: #00D679;
}
/* .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;
    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 {
		top: 16.5rem;
		font-size: 13rem;
		line-height: 13rem;
	}
	.homepBnefitstitle h2 {
		margin: 0 0 3rem 0;
		font-size: 4.4rem!important;
		line-height: 6rem;
	}
	.homepBnefitsContent {
		padding: 12rem 0 0 0;
	}
	.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 {
		top: 10rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
	}
	.homepBnefitstitle h2 {
		margin: 0 0 0rem 0;
		font-size: 2.3rem!important;
		line-height: 3.2rem;
	}
	/* .homepBnefitstitle h2 span{ */
		/* display:block; */
	/* } */
	.homepagemadeBnefitsInner {
		margin-top: 6rem;
	}
	.homepBnefitsContent {
		padding: 5.8rem 0 0 0;
		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 ~  ============ */
.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:#000;
	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: #000;
	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(0,0,0,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{
	padding:2rem 0 0 5.2rem;
	width:100%;
	position:relative;
	display:block;
	text-align:left;
	margin:0;
	color: #000;
	font-family: Pretendard;
	font-weight: 400;
	font-size:2rem!important;
	font-style: normal;
	line-height: 3.8rem;
	letter-spacing: -0.4px;
}
.homepFaq h3 b{
	position:absolute;
	left:0;
	top:2rem;
	color: #000;
	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 {
		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 {
		padding: 1rem 0 0 0;
		font-size: 1.5rem!important;
		line-height: 2.5rem;
		letter-spacing: 0;
	}
}
/* ============ // 자주묻는질문 end ~  ============ */

/* ================================================ // 검색엔진최적화 메인 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: 7rem;
    width: 100%;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 13rem;
    line-height: 15rem;
}
.hoprContent {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10rem 0 0 0;
    /* margin: -10px; */
    list-style-type: none;
}
.hoprItems {
	        margin: 10px;
    flex: 0 0 calc(50% - 20px);
}
.hoprBox{
	display: flex;
	width: 100%;
	height: 100%;
	padding: 4rem;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	border-radius: 1rem;
	-webkit-backdrop-filter: blur(10px);
	
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(255, 255, 255, 0.50);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(10px);
}
.hoprtop {
	margin:0 0 6rem 0;
    width: 100%;
    display: flex;
    color: #00D679;
    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 span{
	margin:0 0 1rem 0;
	display:block;
	color: #000;
font-family: 'Pretendard-Medium';
font-size: 1.8rem!important;
font-style: normal;
font-weight: 500;
line-height: 2.6rem;
text-transform: uppercase;
}
.hoprtext h2{
	color: #000;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
	font-size: 3rem!important;
	font-style: normal;
	line-height: 4rem;
	margin:0;
}
.hoprtext h3{
	margin:0;
	color: #000;
	font-family: 'Pretendard-Light';
	font-size: 1.6rem!important;
	font-style: normal;
	font-weight: 300;
	line-height: 3rem;
	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;
}

.hopBotItem {
    width: 100%;
    display: flex;
    border-top: 1px solid #eee;
    margin: 3rem 0 0 0;
    padding: 2rem 0 0 0;
    gap: 2rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.hopBotItem h4{
	margin:0;
	color: #000;
	font-family: 'Pretendard-Medium';
	font-size: 1.5rem!important;
	font-style: normal;
	font-weight: 500;
	line-height: 2.4rem;
	text-transform: uppercase;
}
.hopBotItem a {
	display: inline-block;
    padding: 0.2rem 2.3rem;
    border-radius: 99px;
    border: 1px solid #000;
    backdrop-filter: blur(15px);
    color: #000;
    font-family: 'Pretendard-SemiBold';
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: 4.5rem;
}

@media (max-width: 1700px){
	.hoprBox {
		padding: 3rem 3rem;
	}
	.hoprtop {
		margin: 0 0 5rem 0;
		font-size: 2.6rem;
		line-height: 2.6rem;
	}
	.hoprtext {
		gap: 2rem;
	}
	.hoprtext h2 {
		font-size: 2.6rem!important;
		line-height: 3.2rem;
		margin: 0;
	}
	.hoprtext h3 {
		font-size: 1.7rem!important;
		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 .homepBnefitEn {
		top: 7rem;
        font-size: 10rem;
        line-height: 12rem;
	}
	.hoprContent {
		padding: 9rem 0 0 0;
	}
	.hoprItems {
		margin: 10px 0;
		flex: 0 0 calc(100% - 0px);
	}	
}
@media (max-width: 767px){
	.hoprWrap {
		position: relative;
		padding: 8rem 0;
	}
	.hoprWrap .homepBnefitEn {
		top: 3rem;
		font-size: 5.2rem;
		line-height: 5.6rem;
		width: 100%;
	}
	.hoprWrap .hmMoreBtn.silde {
		display:none;
	}
	
	.hoprContent {
		padding: 4rem 0 0 0;
	}
	.hoprItems {
		margin: 0 0 0.8rem 0;
	}
	.hoprBox {
		margin: 0;
		padding: 2rem;
	}
	.hoprtop {
		margin: 0 0 2.4rem 0;
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.hoprtext {
		gap: 1.6rem;
	}
	.hoprtext h2 span {
		margin: 0 0 1rem 0;
		font-size: 1.4rem!important;
		line-height: 2rem;
	}
	.hoprtext h2 {
		font-size: 1.8rem!important;
		line-height: 2.4rem;
		margin: 0;
	}
	.hoprtext h3 {
		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;
	}
	
	
	.hopBotItem {
		margin: 2rem 0 0 0;
		padding: 2rem 0 0 0;
		gap: 1rem;
	}
	.hopBotItem h4 {
		font-size: 1.2rem!important;
		line-height: 1.6rem;
	}
	.hopBotItem a {
		padding: 0.2rem 2rem;
		font-size: 1.4rem;
		line-height: 3.2rem;
	}
}
/* ================================================ // 검색엔진최적화 진행과정 end ~  ================================================ */

/* ================================================ 검색엔진최적화 적용효과 start ~  ================================================ */

.hpbenewrap{
	position:relative;
	padding:20rem 0 20rem 0;
}
.hpbenewrap .homepBnefitstitle h2{margin:0;}
.hpbenewrap .homepBnefitEn {
    font-size: 13rem;
    line-height: 15rem;
    top: 27rem;
}
.hpbeneSideBox {
	z-index:3;
    position: relative;
    max-width: 188rem;
    padding: 11rem 2rem 0 2rem;
    margin: 0 auto;
}
.hpbeitem{
	padding: 0 6rem;
	position:relative;
	border-radius: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: rgba(255, 255, 255, 0.50);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(10px);
}
.hpbeitem ul{
	position:relative;
	padding:0; 
}
.hpbeitem ul li:nth-child(1){
	border-top: none;
	margin: 0;
}
.hpbeitem ul li {
	list-style:none;
	margin: 0;
    position: relative;
}

.hpbeBox{
	width:100%;
	display:block;
}
.hpbe {
    border-bottom: 1px solid #eee;
    padding: 8rem 0 8rem 16.4rem;
    width: 100%;
    position: relative;
}
.seoeficon {
    border-radius: 2.8rem;
    border: 1px solid #EEE;
    background: #FFF;
    position: absolute;
    left: 0;
    top: 8rem;
    width: 10.4rem;
    height: 10.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seoeficon img{
	height:5.2rem;
}
.hpbetext h2 {
	word-break: keep-all;
    margin: 0 0 2rem 0;
    gap: 1rem;
    width: 100%;
    display: flex;
    color: #000;
    font-family: 'Pretendard-SemiBold';
	font-weight: 600;
    font-size: 2.2rem!important;
    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!important;
	font-style: normal;
	font-weight: 700;
	line-height: 4rem;
}
.hpbetext h3{
	/* word-break: keep-all; */
	margin:0;
	color: #000;
	font-family: 'Pretendard-Light';
	font-size: 1.8rem!important;
	font-style: normal;
	font-weight: 300;
	line-height: 3.4rem;
	text-transform: uppercase;
}
.hpbetext h3 b{
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
}
.hpbetext h3 span{
	font-family: 'Pretendard-SemiBold';
	font-weight: 600;
}
/* .hpbetext h3 b:before { */
    /* z-index: 1; */
    /* content: ''; */
    /* width: 100%; */
    /* position: absolute; */
    /* left: 0; */
    /* bottom: 0.5rem; */
    /* height: 0.8rem; */
    /* background: #99eec9; */
/* } */
@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 { */
		/* font-size: 1.7rem; */
		/* line-height: 3rem; */
	/* } */
}
@media (max-width: 1500px){
	.hpbe {
		padding: 8rem 0 8rem 16.4rem;
	}
	.seoeficon {
		top: 8rem;
	}
}
@media (max-width: 991px){
	.hpbeitem {
		padding: 0 3rem;
		border-radius: 1rem;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
	}
	
	.hpbenewrap {
		padding: 12rem 0 12rem 0;
	}
	.hpbenewrap .homepBnefitEn {
		font-size: 10rem;
		line-height: 12rem;
		top: 19rem;
	}
	.hpbeneSideBox {
		z-index: 3;
		position: relative;
		max-width: 188rem;
		padding: 10rem 2rem 0 2rem;
		margin: 0 auto;
	}
	.hpbeitem ul {
		position: relative;
		padding: 0;
	}
	.hpbeBox {
		width: 100%;
		display: flex;
		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;
	}
	.hpbeitem ul li:last-child .hpbe:nth-child(2) {
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.seoeficon {
		border-radius: 2rem;
		width: 8.4rem;
		height: 8.4rem;
		top: 8rem;
	}
	.seoeficon img {
		height: 4.2rem;
	}
}
@media (max-width: 767px){
	.hpbenewrap {
		padding: 8rem 0 8rem 0;
	}
	.hpbeneSideBox {
		padding: 5rem 2rem 0 2rem;
	}
	.hpbenewrap .homepBnefitEn {
		font-size: 5.2rem;
		line-height: 5.6rem;
		top: 12rem;
	}
	.hpbeitem {
		padding: 0 2rem;
		border-radius: 0.6rem;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
	}
	.hpbe {
		padding: 3rem 0 3rem 0rem;
		width: 100%;
		position: relative;
	}
	.hpbe:nth-child(2) {
		padding-left: 0rem;
	}
	.hpbeitem ul li:last-child .hpbe:nth-child(2) {
		padding-bottom: 0;
		border-bottom: none;
	}
	.hpbetext h2 {
		margin: 0 0 1.6rem 0;
		gap: 0.6rem;
		font-size: 1.6rem!important;
		line-height: 2.2rem;
	}
	.hpbetext h2 b {
		font-size: 1.8rem!important;
		line-height: 2.4rem;
	}
	.hpbetext h3 {
		font-size: 1.3rem!important;
		line-height: 2rem;
	}
	
	.seoeficon {
		margin: 0 0 1.6rem 0;
		border-radius: 1.7rem;
		border: 1px solid #EEE;
		background: #FFF;
		position: relative;
		left: 0;
		top: 0;
		width: 7.6rem;
		height: 7.6rem;
	}
	.seoeficon img {
		height: 5.2rem;
	}
}
/* ================================================ // 검색엔진최적화 적용효과 end ~  ================================================ */