@charset "utf-8";

/**************** 메인레이아웃 ****************/
#fullpage {width: 100vw; height: 100vh;}
#fullpage #mainVisual{height:100vh;}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter) {min-height:750px;}
	#fullpage .section .fp-tableCell {height:100vh !important;}
}
@media all and ( max-width: 1280px ){
	#fullpage .section:not(#mainVisual) {height:auto !important;}
	#fullpage .fp-section .fp-tableCell {height:auto !important;}
}
@media all and ( max-width: 750px ){
	/* #fullpage .section:not(#mainVisual) {height:50vh !important;}
	#fullpage .fp-section .fp-tableCell {height:50vh !important;} */
}

/******************* 팝업- 광고비지원 추가 20240314 ******************/
/*********** main-popup ***********/
.main-pop {display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,.5); z-index:1111;}
.pop {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 98; width: 33rem; /* overflow: hidden; */ /* border-radius: 1rem; */ box-shadow: var(--box-shadow);}
.main-pop .inner {background: var(--white); display: flex; justify-content: center; flex-direction: column; box-sizing: border-box;}
.main-pop .inner .pop-img {background: url(../images/main/pop_img.jpg) no-repeat left top / cover; }/* height: 22rem; */
.main-pop .inner .pop-title {font-size: 4rem; display: none;}
.main-pop .inner .pop-stitle {display: flex; padding: 0 0rem; font-size: 1.35rem; line-height: 1.2; color: var(--mudgray); letter-spacing: -0.02em;}
/* .main-pop .inner .pop-stitle:before {content: '\e9aa'; font-family: var(--xeicon); clear: both; font-size: 1.65rem; margin-right: 0.3rem; color: var(--main-color); display: none;} */
/* 팝업내용 */
.main-pop .pop-content {position: relative;}
.main-pop .pop-content .pag {display: none;}
.pop-content-box {padding: 1.5rem; background: var(--white2);}
/*  */
.pop-contact-box {display: flex; align-items: center; justify-content: center; gap: 1rem; flex-direction: column;}
.pop-contact-box .list {display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; justify-content: center; gap: 0.5rem;}
.pop-contact-box .list label {display: none;}
.pop-contact-box .list .write-input {background: var(--gray); font-size: 1.5rem; border-radius: 0.5rem; padding: 0 0.8rem; height: 4.2rem;}
.pop-contact-box .agree-txt {font-size: 1.35rem; letter-spacing: -0.01em; color: var(--black); line-height: 1.2; width: 100%;}
.pop-contact-box .agree-txt a {font-weight: 700; text-decoration: underline; transition: var(--transition);}
.pop-contact-box .agree-txt a:hover {color:var(--main-color);}
.pop-contact-box .agree-txt input{display:none;}
.pop-contact-box .agree-txt label{position:relative; padding-left:2.4rem;}
.pop-contact-box .agree-txt label i{position:absolute; top: 0; left:0px; font-size: 1.85rem; line-height: 1.0em; color: var(--lightgray); display: flex;	align-items: center;	justify-content: center;}
.pop-contact-box .agree-txt label i::before {content: "\e92b"; transition: var(--transition);}
.pop-contact-box .agree-txt input:checked + label i::before{content: "\e92b"; color: var(--main-color);}
/* 버튼스타일 */
.pop-contact-box .pop-btn-controls-row {/* width: 70%; */}
.pop-contact-box [class*=btn-style-] a, button[class*=btn-style-] {/* width: 100%; */ padding: 0rem 1.5rem; border-radius: 0.5rem; font-size: 1.5rem; height: 4.2rem; display: flex; align-items: center; justify-content: center;}
/* 팝업푸터 */
.main-pop .pop-foot .act1 {display: flex; align-items: center; justify-content: space-between; gap: 1rem;	padding-right:4rem;}
.main-pop .pop-foot .act1 button {color: var(--white-a5); font-weight: 100; line-height: 1.45; font-size: 1.5rem; text-transform: uppercase; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem;}
.main-pop .pop-foot .act1 button span {}
.main-pop .pop-foot .act1 .prev::before {content: "\f053";}
.main-pop .pop-foot .act1 .next::after {content: "\f054";}
.main-pop .pop-foot {height: 5rem; display: flex; align-items: center; justify-content: space-between; background: var(--black); color: var(--white);}
.main-pop .pop-foot .today {padding: 0 1rem; color: var(--white); font-size: 1.5rem; font-weight: 300;}
.main-pop .pop-foot .today input[type=checkbox] {width: 2rem; height: 2rem; border-radius: 0; border: 1px solid var(--white); background-image: none; margin-right: 1rem;}
.main-pop .pop-foot .bt-close {position: relative; width: 5rem; height: 5rem; background-color: var(--theme-color); display: block;}
.main-pop .pop-foot .bt-close:before,
.main-pop .pop-foot .bt-close:after {content: ''; width: 2.6rem; height: 2px; background-color: var(--white); position: absolute; top: 50%; left: 50%; display: block; margin: -0.1rem 0 0 -1.3rem; transition: var(--transition2); transform: rotate(45deg);}
.main-pop .pop-foot .bt-close:after {transform: rotate(-45deg);}
.pop-btn-controls-row {/* display: flex; padding: 2rem 0; */}
@media all and ( max-width: 480px ){
	/* .pop {width:80vw;} */
}


/************ 메인컨텐츠1 - 메인비주얼 **************/
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative;}
.main-visual-con {position: relative; width: 100vw; height: 100vh;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {-webkit-perspective: 2000; -webkit-backface-visibility: hidden;}
.main-visual-container{width: 100%; height: 100%;}
.main-visual-swiper{height: 100%;}
.main-visual-item{position:relative; height:100%; overflow:hidden;}
.main-visual-con{z-index:1;}
/* 메인 비주얼 - 이미지 */
.main-visual-container,
.main-visual-container .main-visual-wrapper{position:relative; z-index:auto; height:100vh;}
.main-visual-container .swiper-slide {overflow: hidden; background-color:var(--graycolor);}
.main-visual-container .slide-inner {width: 100%;	height: 100%;	position: absolute;	left: 0; top: 0; z-index: 1; background-size: cover !important; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center;	background-color:var(--graycolor);}
.main-visual-item .main-visual-img {display:block; width:100%; height:100%; background-size:cover !important;}
.main-visual-item .main-visual-img.visual01 {background:url(../images/main/main_visual_01.webp) no-repeat 50% 50%; }
.main-visual-item .main-visual-img.visual02 {background:url(../images/main/main_visual_02.webp) no-repeat 50% 50%;}
.main-visual-item .main-visual-img.visual03 {background:url(../images/main/main_visual_03.webp) no-repeat 50% 50%;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 2s 0s forwards; transition: var(--transition);}
/* 메인 비주얼 - 텍스트 */
.main-visual-txt-con{position:absolute; left:0px; top:0; width:100%; height:100%;	z-index:1; backdrop-filter:brightness(0.7);}
.main-visual-txt-box{display:flex; align-items:center; justify-content: space-evenly; height:100vh;	box-sizing: border-box;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-txt4 {opacity:0;}
.main-visual-txt-box .main-visual-txt1 {font-size:7rem; font-weight:700; color:var(--white); letter-spacing: -0.05em; line-height: 1;}
.main-visual-txt-box .main-visual-txt1 b {color: var(--main-color);}
.main-visual-txt-box .main-visual-txt2 {margin-top: 1rem; margin-bottom: 1rem; font-size:4rem; font-weight: 400; color:var(--white); letter-spacing: -0.03em; line-height: 1.2;}
.main-visual-txt-box .main-visual-txt3 {margin-top: 1rem; font-size: 2.2rem; font-weight: 300; color:var(--white); letter-spacing: -0.03em; line-height: 1.2;}
.main-visual-txt-box .main-visual-txt4 {margin-top: 2rem;}
/* 메인 비주얼 - 텍스트 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-txt4,
.active-item .main-visual-btn{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-txt4{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
/* 메인비주얼 컨트롤러 */
.main-visual-control{position:absolute; top: 50%; left:50%; transform: translate(-50%,-50%);  z-index:11;}
.main-visual-control-inner{position: relative; max-width: var(--common-width); width: 90vw; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; margin: 0 auto;}
.circle-control-btns-box{position: relative; width: 10rem; height: 10rem; display: none;}
/* 좌우화살표 */
.main-visual-control .main-visual-btn{opacity: 0.5; border:1px solid var(--white); border-radius: 20rem; width: 8rem; height: 8rem; display: flex; align-items: center; justify-content: center; transition:var(--transition); transition-property:opacity;}
.main-visual-control .main-visual-btn + .main-visual-btn {}
.main-visual-control .main-visual-btn i{font-size: 5rem; color: var(--white);}
.main-visual-control .main-visual-btn i:hover{opacity:0.8; transition:var(--transition);}
/* 마우스스크롤다운아이콘 */
.main-visual-mouse {display: block;}
.main-visual-mouse .scrolldown {position:absolute; left:50%; bottom:3rem; transform:translateX(-50%); z-index:11; text-align:center; }
.main-visual-mouse .scrolldown .scroll {margin:0 auto 0 auto; width:20px; height:36px; position:relative; border-radius:50px; border:2px solid var(--white);}
.main-visual-mouse .scrolldown .scroll span {width:4px; height:10px; border-radius:5px; background:var(--white); display:block; position:absolute; top:0; left:50%; margin-left:-2px; animation:scrolldown 1.0s infinite;}
.main-visual-mouse .scrolldown .txt {color:var(--white); font-size:14px; font-weight:400; letter-spacing:-0.02em; margin: 10px 0;}

@media all and ( max-width: 1280px ){	
	.main-visual-mouse .scrolldown {display: none;}	
}
@media all and ( max-width: 960px ){
	
	/* #fullpage .section#mainVisual{height:50rem !important;}
	#fullpage .fp-section#mainVisual .fp-tableCell{height:50rem !important;} */	
}
@media all and ( max-width: 800px ){
	.main-visual-control {bottom: 10rem; left: 50%; top: unset; transform: translateX(-50%);}
	.main-visual-control-inner {width: unset; gap: 1rem;}
	.main-visual-control .main-visual-btn {width: 6rem; height: 6rem; opacity: 0.8;}		
	.main-visual-txt-box .main-visual-txt1{font-size:5.4rem;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 1.5rem; font-size:2.0rem; line-height: 1.52; margin: 1rem 0;}
	.main-visual-txt-box .main-visual-txt3{font-size:1.85rem;}	
	.main-visual-control .main-visual-btn + .main-visual-btn{}
	.main-visual-control .main-visual-btn i{ font-size: 2.25rem;}
}
@media all and ( max-width: 480px ){	
	/* .main-visual-control {display: none;} */
}








/*************** 메인컨텐츠 공통 ***************/
/* 타이틀공통 */
[class*=main-con-] {max-width: var(--common-width); margin: 0 auto; text-align: center;}
[class*=mtitle] .tit{font-size: 5.4rem; font-weight: 800; margin-bottom: 1rem;}
[class*=mtitle] .tt{font-size: 5.4rem; font-weight: 400; margin-bottom: 1rem;}
[class*=mtitle] .st{font-size: 2.5rem; font-weight: 400; line-height: 1.2em; margin-bottom: 1rem;}
[class*=mtitle] .scon{font-size: 1.85rem; font-weight: 300; line-height: 1.2em; margin-bottom: 1rem;}
[class*=mtitle] .tt img{width: 53.4rem;}
.txt-box {}
[class*=txt-box] .tt01 {font-size: 3rem; font-weight: 700; margin: 4rem 0 0; position: relative;}
[class*=txt-box] .tt01:after {content: ""; box-sizing: border-box; display: inline-block;	width: 10%;	height: 2px; border-radius: 25px;	position: absolute;	top: -8px; left: 45%;	background: var(--black);}
[class*=txt-box] .tt02 {font-size: 2.35rem; font-weight: 500; margin: 1rem 0; line-height: 1.2;}
[class*=txt-box] .tt03 {font-size: 1.85rem; line-height: 1.2em; letter-spacing: -0.005em;}
/* 컨텐츠섹션별 bg */
[class*=main-section-] {overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
[class*=main-section-].service-bg {background-image: url(../images/main/main_service_bg.webp);}
/* [class*=main-section-].templete-bg {background-image:transparent url(../images/main/main_templete_bg.jpg);}
[class*=main-section-].process-bg {background-image: url(../images/main/main_process_bg.jpg);}
[class*=main-section-].company-bg {background-image: url(../images/main/main_company_bg.jpg);}
[class*=main-section-].qna-bg {background-image: url(../images/main/main_qna_bg.jpg);} */
[class*=main-section-].story-bg {background-image: url(../images/main/main_story_bg.jpg);}
.main-section-bg{}
.main-section-bg.pc-ver{}
.main-section-bg.m-ver{}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

/******** 공통 - 타이틀 ************/
@media all and ( max-width: 1280px ) {
	[class*=main-con-] {padding: var(--common-padding);}
}
@media all and ( max-width: 1024px ) {
	[class*=main-con-] {max-width: var(--common);}
}
@media all and ( max-width: 800px ){
	[class*=main-con-] {padding: var(--top-padding) var(--common-padding);}
	[class*=mtitle] .tit{font-size: 1.58rem; font-weight: 500; margin-top: 1rem;}
	[class*=mtitle] .tt{font-size: 2.4rem; font-weight: 600; margin-top: 1rem; line-height: 1.2; letter-spacing: -0.03em;}
	[class*=mtitle] .st{font-size: 1.6rem; font-weight: 400; line-height: 1.3; margin-top: 1rem;}
	[class*=mtitle] .scon{font-size: 1.58rem; font-weight: 300; line-height: 1.2em; margin-top: 1rem;}
	[class*=mtitle] .tt img{width: 53.4rem;}
	[class*=txt-box] .tt01 {font-size: 2.35rem; margin: 0;}
	[class*=txt-box] .tt01:after {display: none;}
	[class*=txt-box] .tt02 {font-size: 2.0rem;}
	[class*=txt-box] .tt03 {font-size: 1.5rem;}
	.main-tit-box .main-tit{font-size: 6.6rem; line-height: 1.2;}
	.main-tit-box .main-sub-tit{margin-top:1.5rem; font-size: 2.2rem; line-height: 1.4;}
	.main-tit-box.black-ver{justify-content: space-between;}
	.main-tit-box.black-ver .main-btn{margin-left: 2rem; display: block;}
	.main-tit-box.black-ver .main-btn i{font-size: 4.8rem;}
	[class*=main-section-].service-bg {background-image: none; background: var(--white2);}
	.main-section-bg.templete-bg {background: var(--white3);}
}




/*************** 메인컨텐츠2 - 서비스소개 *****************/
#mainService{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-service-container {}
.main-con-service .service-box {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; /* justify-items: center;  */justify-content: center; align-items: center; grid-gap: 2rem; padding: 5rem 0;}
.main-con-service .service-box .service-item {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;}
.main-con-service .service-box .service-item .img-box {display: flex; align-items: center; justify-content: center; background-color: var(--white); border-radius: 20rem; box-shadow: 0px 0px 5.5px -0.5px rgba(4, 6, 25, 0.5); height: 20rem; width: 20rem; box-sizing: border-box; transition:var(--transition); opacity:1;}
.main-con-service .service-box .service-item .img-box.img01 {background:var(--white) url(../images/common/ico_service_01.png) no-repeat center center;}
.main-con-service .service-box .service-item .img-box.img02 {background:var(--white) url(../images/common/ico_service_02.png) no-repeat center center;}
.main-con-service .service-box .service-item .img-box.img03 {background:var(--white) url(../images/common/ico_service_03.png) no-repeat center center;}

@media all and ( max-width:1280px ){
	
}
@media all and ( max-width:800px ){
	.main-con-service .service-box {grid-template-columns: 1fr; grid-gap: 3rem;}
	.main-con-service .service-box .service-item {flex-direction: row; justify-content: left; gap: 0rem;}
	.main-con-service .service-box .service-item .img-box {margin-right:2rem; width: 13rem; height: 13rem;}
	.main-con-service .service-box .service-item .txt-box {/* width: calc(100% - 20rem); */flex: 1; text-align: left;}
	.main-con-service .service-box .service-item .img-box.img01,
	.main-con-service .service-box .service-item .img-box.img02,
	.main-con-service .service-box .service-item .img-box.img03 {background-size: 8rem;}
}
@media all and ( max-width:400px ){
	.main-con-service .service-box {}
	.main-con-service .service-box .service-item {flex-direction: column; justify-content: center; gap: 1rem;}
	.main-con-service .service-box .service-item .img-box {margin-right:0;}
	.main-con-service .service-box .service-item .txt-box {text-align: center; width: 80%;}
}


/*********************** 메인컨텐츠3 - 회사소개 *******************/
#mainCompany{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-con-company {}
.main-company-container .circle-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; justify-content: center; grid-gap:1rem; padding:5rem 0;}
.main-company-container .circle-box .circle {display: flex;	justify-content: center; gap: 2rem; padding:0;}
.main-company-container .circle-box .circle .txt-box {display: flex; flex-direction: column;	align-items: center; justify-content: center; color: var(--black); width: 25rem; height: 25rem;	border-radius: 25rem;	background-color: var(--lightcyan);}
.main-company-container .circle-box .circle .txt-box {}
.main-company-container .circle-box .circle .txt-box figure {width: 95px; height: 100px;}
.main-company-container .circle-box .circle .txt-box figure.img01 {background: url(../images/common/ico_company_01.png);}
.main-company-container .circle-box .circle .txt-box figure.img02 {background: url(../images/common/ico_company_02.png);}
.main-company-container .circle-box .circle .txt-box figure.img03 {background: url(../images/common/ico_company_03.png);}
.main-company-container .circle-box .circle .txt-box figure.img04 {background: url(../images/common/ico_company_04.png);}
.main-company-container .circle-box .circle .txt-box .txt {font-size: 1.8rem; font-weight: 400;}
.main-company-container .circle-box .circle .txt-box .txts {font-size: 1.2rem; font-weight: 300;}
.main-company-container .circle-box .circle .txt-box .txt .number {font-size: 3rem; font-weight: 700; letter-spacing: -0.08em;}
#mainCompany .img-bg {position: relative; width: 100vw; height: 30vh; background: url(../images/sub/company_bg.jpg)no-repeat center / cover;}

@media all and ( max-width:1280px ){
	.main-company-container .circle-box .circle .txt-box {width: 22rem; height: 22rem;}
}
@media all and ( max-width:1024px ){
	.main-company-container .circle-box .circle .txt-box {width: 20rem; height: 20rem;}
}
@media all and ( max-width:930px ){
	.main-company-container .circle-box .circle .txt-box {width: 17rem; height: 17rem;}
	.main-company-container .circle-box .circle .txt-box .txt .number {font-size: 2rem;}
	.main-company-container .circle-box .circle .txt-box .txts {display: none;}
}
@media all and ( max-width:800px ){
	.main-company-container .circle-box {grid-template-columns:1fr 1fr; padding: 3rem 0;}
	.main-company-container .circle-box .circle .txt-box {width:100%; border-radius: unset;}
	.main-company-container .circle-box .circle .txt-box .txts {font-size: 1.25em;}
	.main-company-container .circle-box .circle .txt-box .txt {font-size: 1.5em;}
	.main-company-container .circle-box .circle .txt-box .txt .number {font-size: 2.5rem;}
}
@media all and ( max-width:400px ){
	.main-company-container .circle-box {grid-template-columns:1fr;}
	.main-company-container .circle-box .circle {padding: 0rem 0 0 0;}
	.main-company-container .circle-box .circle .txt-box {width:100%; height: 27rem; border-radius: unset;}	
}



/******* 메인컨텐츠4 - 제작과정 *********/
#mainProcess{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-process-con {}
/* 제작과정박스 */
.main-process-container .process-square-box {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2rem; margin: 3rem 0;}
.main-process-container .process-square-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--white); border-radius: 2.5rem; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.2); height: 30rem; box-sizing: border-box; padding: 3rem; position: relative; z-index: 10;}
/* .main-process-container .process-square-box .square-item:before {content:""; font-family: var(--xeicon); clear: both; display: block; position: absolute; z-index: 11; top: 13rem; left: 27rem;  width: 5rem; height: 5rem; background: var(--white); border-radius: 10rem; box-shadow: 5px 1px 5px -1px rgba(100, 100, 100, 0.1); display: flex; align-items: center; justify-content: center; color: var(--lightgray); font-size: 2rem; font-weight: 800;}
.main-process-container .process-square-box .square-item:nth-of-type(n):before {content:"\e940";}
.main-process-container .process-square-box .square-item:nth-of-type(4n):before {display: none; content:"\e940";} */
/* .main-process-container .process-square-box .square-item:nth-of-type(2):before {content:"02";}
.main-process-container .process-square-box .square-item:nth-of-type(3):before {content:"03";}
.main-process-container .process-square-box .square-item:nth-of-type(4):before {content:"04";}
.main-process-container .process-square-box .square-item:nth-of-type(5):before {content:"05";}
.main-process-container .process-square-box .square-item:nth-of-type(6):before {content:"06";}
.main-process-container .process-square-box .square-item:nth-of-type(7):before {content:"07";}
.main-process-container .process-square-box .square-item:nth-of-type(8):before {content:"08";} */
.main-process-container .process-square-box .square-item .img-box {max-width: 100%; width: 120px; height: 100px;}
.main-process-container .process-square-box .square-item .img-box.img01 {background: url(../images/sub/ico_process_01.png);}
.main-process-container .process-square-box .square-item .img-box.img02 {background: url(../images/sub/ico_process_02.png);}
.main-process-container .process-square-box .square-item .img-box.img03 {background: url(../images/sub/ico_process_03.png);}
.main-process-container .process-square-box .square-item .img-box.img04 {background: url(../images/sub/ico_process_04.png);}
.main-process-container .process-square-box .square-item .img-box.img05 {background: url(../images/sub/ico_process_05.png);}
.main-process-container .process-square-box .square-item .img-box.img06 {background: url(../images/sub/ico_process_06.png);}
.main-process-container .process-square-box .square-item .img-box.img07 {background: url(../images/sub/ico_process_07.png);}
.main-process-container .process-square-box .square-item .img-box.img08 {background: url(../images/sub/ico_process_08.png);}
.main-process-container .process-square-box .square-item .txt-box { text-align: center; letter-spacing: -0.05em; color: var(--black);	margin-top: 2rem;}
.main-process-container .process-square-box .square-item .txt-box >p.tt {font-weight: 700; font-size: 2.8rem; line-height: 4rem;}
.main-process-container .process-square-box .square-item .txt-box >p.st {font-weight: 300; font-size: 1.85rem; line-height: 1.2em;}
.main-process-container .process-square-box .square-item .txt-box.marginMin {margin-top: 4.3rem;}

@media all and ( max-width:1280px ){
	/* #mainProcess{padding: 8rem 2rem 10rem; width: calc(100vw - 2rem);} */
}
@media all and ( max-width:1024px ){
	.main-process-container .process-square-box {grid-template-columns: 1fr 1fr 1fr;}
}
@media all and ( max-width:800px ){
	.main-process-container .process-square-box {grid-template-columns: 1fr 1fr; justify-items: center;}
	.main-process-container .process-square-box .square-item {width: 100%;}
	.main-process-container .process-square-box .square-item:before {display: none;}
	.main-process-container .process-square-box .square-item .txt-box >p.tt {font-size: 2.25rem;}
	.main-process-container .process-square-box .square-item .txt-box >p.st {font-size: 1.5rem;}
}
@media all and ( max-width:400px ){
	.main-process-container .process-square-box {grid-template-columns: 1fr;}
}



/********* 메인컨텐츠5 - 구독템플릿 *******/
#mainTemplete{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-con-templete{}
/* 메인컨텐츠-템플릿 */
.main-templete-container {max-width: var(--common-width); overflow: hidden;}
.main-templete-container .templete-box {transition: var(--transition2); transform: translateX(-100%); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; justify-content: space-between; grid-gap: 0; padding: 5rem 0; /* width: var(--common-wide-width); */ overflow: hidden;}
.main-templete-container.animated .templete-box {transform: translateX(0);}
.main-templete-container .templete-box .square-item {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: var(--white); box-shadow: 1px 1px 10px -1px rgba(100, 100, 100, 0.2); box-sizing: border-box; margin: 1rem; transition: var(--transition); position: relative;}
.main-templete-container .templete-box .square-item .label_hit {position: absolute; z-index: 11111; top: 0px; left: 0px; background: url(../images/sub/label_hit.png)no-repeat center center; width: 10rem; height: 10rem; display: flex;	align-items: center; justify-content: center;}
.main-templete-container .templete-box .square-item .label_hit em {color: var(--white); font-size: 1.68rem;	font-weight: 500;}
.main-templete-container .templete-box .square-item:hover {background-color: var(--white3); border:0px solid var(--gray); border-radius: 0px; box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.3);}
.main-templete-container .templete-box .square-item:nth-of-type(9) {display: none;}
.main-templete-container .templete-box .square-item .img-box {max-width: 100%; overflow: hidden; font-size: 0; background-size:cover !important;}
.main-templete-container .templete-box .square-item .img-box img {max-width: 100%; transition: var(--transition);}
/* .main-templete-container .templete-box .square-item .img-box.img01 {background: url(../images/sub/templete_img_01.jpg) no-repeat center center / cover;}
.main-templete-container .templete-box .square-item .img-box.img02 {background: url(../images/sub/templete_img_02.jpg) no-repeat center center / cover;}
.main-templete-container .templete-box .square-item .img-box.img03 {background: url(../images/sub/templete_img_03.jpg) no-repeat center center / cover;} */
.main-templete-container .templete-box .square-item .img-box:hover img { transform: scale(1.1,1.1);}
.main-templete-container .templete-box .square-item .txt-box {display: flex; flex-direction: column; padding: 3rem;	text-align: left; width:100%; flex: 1; box-sizing: border-box;}
.main-templete-container .templete-box .square-item .txt-box .type-tt {font-size: 2.4rem; font-weight: 700}
.main-templete-container .templete-box .square-item .txt-box .type-st {font-size: 2rem;}
.main-templete-container .templete-box .square-item .txt-box .type-ss { font-size: 1.6rem}
.main-templete-container .templete-box .square-item .arrow {position: absolute; bottom: 0; right: 0; transition: var(--transition);}
.main-templete-container .templete-box .square-item .arrow a {display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; background: var(--graycolor); color:var(--white); }
.main-templete-container .templete-box .square-item .arrow a:hover {background: var(--main-color); transition: var(--transition);}
.main-templete-container .templete-box .square-item .arrow a i.xi-x {font-size: 2rem;}

@media all and ( max-width:1280px ){
}
@media all and ( max-width:1024px ){
	.main-templete-container .templete-box {grid-template-columns: 1fr 1fr;}
}
@media all and ( max-width:800px ){
	.main-templete-container .templete-box .square-item .txt-box .type-tt {font-size: 2rem;}
	.main-templete-container .templete-box .square-item .txt-box .type-st {font-size: 1.8rem; padding: 0.5rem 0;}
	.main-templete-container .templete-box .square-item .txt-box .type-ss {font-size: 1.6rem;}
}
@media all and (max-width: 640px) {	
  .main-templete-container .templete-box {grid-template-columns: 1fr; padding: 2rem 0;}
}




/******** 메인컨텐츠6 - 질문답변 ********/
#mainQna{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-con-qna {}
.main-qna-container {max-width: var(--common-width); overflow: hidden;}
.main-qna-box {padding-top: 3rem;}
.main-qna-box .question {text-align: left; padding: 3rem 3rem 3rem 5.5rem; margin:2rem 0.5rem; border: 1px solid var(--gray);border-radius: 1rem;position: relative; cursor: pointer; box-shadow: 1px 1px 5px -1px rgba(100, 100, 100, 0.1);}
/* .main-qna-box .question:first-child {border-top: 2px solid var(--darkgray);} */
.main-qna-box .question.answer-open {}
.question .qna-q {display: inline-block; position: absolute; left: 3rem; font-size: 2.5rem; font-weight: 600; line-height: 1em; color: var(--graycolor); transition: var(--transition);}
.question .qna-q.answer-open {color: var(--main-color);	transition: var(--transition);}
.question-tit {width: 100%; line-height: 2em; background: url(../images/common/ico_angle_down.png) no-repeat right 0;}
.question-tit.answer-open {width: 100%; line-height: 2em; background: url(../images/common/ico_angle_up.png) no-repeat right 0;}
.question-tit .q-list {display: block; font-size: 2rem;	font-weight: 500; color: var(--darkgray);}
.answer {display: none;}
.answer-txt {padding: 3rem 0 0rem; font-size: 1.85rem; font-weight: 300; line-height: 1.2em; color: var(--darkgray); letter-spacing: -0.005em;}
.answer-open .answer-txt {border-top: 1px dashed var(--gray);	margin: 3rem 0 0 0;}
.answer-txt > p {font-size: 18px !important; color: #777 !important; line-height: 28px !important; font-family: var(--Pretendard) !important; margin-top: 0 !important;}
.answer-txt > p span {font-size: 18px !important; color: #777 !important;	line-height: 28px !important;	font-family: var(--Pretendard) !important; 	margin-top: 0 !important;	font-weight: 500;}
.qna .no-data {text-align: center;	height: 180px;	line-height: 180px;	font-size: 16px;	color: #5a5a5a;	background: #f6f9fd;}

@media all and ( max-width:1280px ){
	/* #mainContact{padding: 8rem 2rem 10rem; width: calc(100vw - 2rem);} */
}
@media all and ( max-width:800px ){
	.main-qna-box .question {padding: 3rem 2rem 3rem 5rem; margin: 1rem 0.5rem;}
	.question .qna-q {left: 2rem;}
	.question-tit .q-list{font-size: 1.85rem; width: calc(100% - 3rem);}
	.answer-open .answer-txt {margin: 2rem 0 0 0; font-size: 1.5rem;}
	.answer-txt {padding: 2rem 0 0rem;}
}
@media all and ( max-width:400px ){	
	.question-tit .q-list {}
}


/*************** 메인컨텐츠7- 빠른제작문의 ***************/
#mainContact{overflow:hidden; width:100vw; height:100vh; position:relative;}
.main-contact-container {max-width: var(--common-width); overflow: hidden;}
.inquiry {max-width: var(--common-width); margin: 0 auto;}
/* 상담폼박스 */
.contact-box {margin:2rem auto; text-align: center; max-width: var(--common-width);}
.contact-box-style {padding: 0rem;}
.contact-box-style .required-txt {display: flex; align-items: flex-end; justify-content: flex-end; font-size: 1.85rem; font-weight: 400; padding: 1rem 0;}
.contact-box-style .check i {color: var(--main-color); margin: 0 0.5rem;}
.contact-box-style .box-cols {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-gap: 0 2rem;}
.contact-box-style .contents {margin-bottom: 2rem; border: 1px solid var(--gray); background: var(--white2); height: 6rem; line-height: 1.5em; font-size: 1.85rem; text-align: left; display: flex; align-items: center; width: 100%; padding: 0; border-radius: 1rem; box-sizing: border-box; overflow: hidden;}
.contact-box-style .contents dt {display: flex; width: 15rem; padding: 0 2rem; box-sizing: border-box; font-weight: 600;}
.contact-box-style .contents dt.blind {display: none;}
.contact-box-style .contents dd {width: calc(100% - 15rem);}
.contact-box-style .contents input,
.contact-box-style .contents textarea,
.contact-box-style .write-textarea,
.contact-box-style .write-input {border:none; width: calc(100% - 3rem); font-weight: 300; font-size: 1.85rem; line-height: 2em; outline: none; background: none;}
.contact-box-style .write-textarea {height: 20rem;}
.contact-box-style .contents.textarea-box {height: 26rem;}
/* 개인정보처리방침 */
.contact-box-style .contents:nth-of-type(3){background-color: transparent; border:none;}
/* 약관확인하기 */
.contact-box-style .contents.agree-con {margin-top: 2rem;}
.contact-box-style .contents.agree-con dd {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; padding: 0; box-sizing: border-box;}
.contact-box-style .contents .agree-txt {font-size: 1.85rem; font-weight: 400; letter-spacing: -0.01em; color: var(--black);}
.contact-box-style .contents .agree-txt a {font-weight: 700; text-decoration: underline; transition: var(--transition);}
.contact-box-style .contents .agree-txt a:hover {color:var(--main-color);}
.contact-box-style .contents .agree-txt input{display:none;}
.contact-box-style .contents .agree-txt label{position:relative; padding-left:26px;}
.contact-box-style .contents .agree-txt label i{position:absolute; top: 0; left:0px; font-size: 2.3rem; line-height: 1.0em; color: var(--lightgray);}
.contact-box-style .contents .agree-txt label i::before {content: "\e92b"; transition: var(--transition);}
.contact-box-style .contents .agree-txt input:checked + label i::before{content: "\e92b"; color: var(--main-color);}

@media all and (max-width: 1280px) {
	.inquiry {padding: var(--common-padding);}
}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 800px) {		
}
@media all and (max-width: 640px) {	
  .contact-box-style .required-txt {font-size: 1.5rem;}
  .contact-box-style .contents {height: 5rem; border-radius: 0.3rem; font-size: 1.65rem; margin-bottom: 1rem;}
  .contact-box-style .box-cols {grid-gap: 0 1rem; grid-template-columns: 1fr;}
  .contact-box-style .contents dt {width: 10rem; padding: 0 1.2rem; font-weight: 500;}
  .contact-box-style .contents dd {width: calc(100% - 10rem);}
  .contact-box-style .contents input,
  .contact-box-style .contents textarea, .contact-box-style .write-textarea,
  .contact-box-style .write-input {font-size: 1.5rem;}
  .contact-box-style .contents .agree-txt {font-size: 1.5rem;}
  .contact-box-style .contents.agree-con {margin-top: 1rem;}
}
@media all and (max-width: 480px) {	
}



/************* 메인컨텐츠8 - last 분양이야기 ***************/
#mainStory{overflow:hidden; width:100vw; height:100vh; position:relative;}
/* #mainStoryCon .main-story-bg.m-ver{background:#fff url(../images/main/main_story_bg_m.jpg) no-repeat 50% 50% / cover; display: none;} */
.main-story-container {}
.main-con-story{display: flex; flex-direction: column; align-items: center; justify-content: center; max-width:var(--common-width); box-sizing: border-box; color:var(--white); gap: 1rem; margin: 6rem auto 9rem;}
.main-con-story .tit01{font-size: 2rem; font-weight: 800; text-transform: uppercase; color: var(--main-color);}
.main-con-story .tit02{font-size: 5rem;	font-weight: 400;	margin: 1rem 0;}
.main-con-story .tit03{font-size: 4.5rem; font-weight: 200; line-height: 1.2em; text-align: center; padding-bottom: 1rem;}
.main-con-story .tit03 span {position: relative;}
.main-con-story .tit03 span:before{	position: absolute;	top: 45px; left: 0;	content: "";	clear: both;	display: block;	background: var(--white); opacity: 0.5;	width: 100%;	height: 1px;}
.btn-main-color {/* position: absolute; bottom: 5rem; left: 0; width: 100%; text-align: center; */}
.btn-main-color a {display: inline-block;	margin-top: 0rem; font-size:2rem; line-height: 1; letter-spacing:-0.025em; font-weight: 100; color:var(--white);padding: 1.5rem 2.5rem;	background: var(--main-color);box-shadow: var(--box-shadow);border-radius: 2px;	transition: .5s;}
.btn-main-color a:hover {background: var(--main2-color);}
.main-story-btn{position: absolute; bottom: 5rem; left: 0; width: 100%; text-align: center; }
.main-story-btn a{display: inline-block; font-size: 1.45rem; line-height: 4rem; font-weight: 500; width: 200px; background: var(--main-color); color: var(--white);}
.main-story-btn a i{margin-left: 1.2rem; font-size: 1.9rem; font-weight: 400; position: relative; top: 0.1rem; transition:var(--transition); transition-property:transform;}

@media all and ( max-width:1280px ){
	/* #mainStory{padding: 8rem 2rem 10rem; width: calc(100vw - 2rem);} */
}
@media all and ( max-width:800px ){
	.main-con-story {gap: 0rem; margin: 0rem auto 1rem;}
	.main-con-story .tit01 {font-size: 2rem;}
	.main-con-story .tit02 {font-size: 3rem; margin: 0rem 0;}
	.main-con-story .tit03 {font-size: 2.5rem;}
	.main-con-story .tit03 span:before {top: 3rem;}
}
@media all and ( min-width: 801px ){
	.main-story-btn a:hover i{transform: translateX(5px);}
}



/****** 메인 - 풀페이지-스크롤버튼 ******/
.main-scroll-btn{position: fixed; z-index: 100; top: 33%; right: 4rem; transition:var(--transition); transition-property:opacity;}
.main-scroll-btn.hide{opacity: 0; visibility: hidden;}
.main-scroll-btn i{font-size: 2rem; color: var(--white);}
.main-scroll-btn ul{display: flex; align-items: center;	justify-content: center; flex-direction: column; gap: 1rem;}
.main-scroll-btn ul li{display: block;}
.main-scroll-btn ul li + li{/* margin-top: 1rem; */}
.main-scroll-btn ul li a{display: block; position: relative; width: 2rem; height: 2rem; background: transparent; border: 0px solid transparent; border-radius: 100%; box-sizing: border-box; transition:var(--transition); transition-property:border-color;}
.main-scroll-btn ul li a:before{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ''; width: 0.5rem; height: 0.5rem; background: var(--white); border-radius: 100%; opacity: 0.5; transition:var(--transition); transition-property:opacity;}
.main-scroll-btn ul li:hover a:before{opacity: 0.1; width: 2rem; height: 2rem; transition:var(--transition2);}
.main-scroll-btn ul li a.selected{border-color: rgba(255,255,255,0.0);}
.main-scroll-btn ul li a.selected:before{opacity: 1;  width: 2rem; height: 2rem; background:var(--main-color);}
/* black-ver */
[class*=black-ver].main-scroll-btn i{color:var(--lightgray);}
[class*=black-ver].main-scroll-btn ul li a:before{background:var(--lightgray);}
[class*=black-ver].main-scroll-btn ul li:hover a:before{opacity: 0.1; width: 2rem; height: 2rem; transition:var(--transition2);}
[class*=black-ver].main-scroll-btn ul li a.selected{border-color: rgba(255,255,255,0.0);}
[class*=black-ver].main-scroll-btn ul li a.selected:before{opacity: 1; width: 2rem; height: 2rem; background:var(--main-color);}

@media all and ( min-width: 1281px ){	
	.main-scroll-btn.hide{opacity: 0; visibility: hidden;}
}
@media all and ( min-width: 1281px ) and ( min-height: 751px ){	
}
@media all and ( max-width: 1280px ){
	.main-scroll-btn{display: none !important;}
}



/******* 메인-하단고정빠른상담 나중에 추가할지 결정 main.js *******/
.main-online-btn{display: none; position: fixed; z-index: 100; bottom: 0; left:0; transition:var(--transition); transition-property:opacity, margin-top; width: 100vw;	height: 10vh;	margin: 0 auto;}
.main-online-btn a{padding: 4rem 0; width: 100%; background-color: var(--main-color); display: flex; flex-direction: row; align-items: center; justify-content: center; box-sizing: border-box; transition:var(--transition); transition-property:background-color;}
.main-online-btn a .tit-m{display: none;}
.main-online-btn a .tit{font-size: 2.1rem; letter-spacing: -0.015em; line-height: 1.14; font-weight: 500; color: var(--white); display: flex; flex-direction: column;}
.main-online-btn a .tit .word{display: flex;}
.main-online-btn a .tit em{margin-top: 1.5rem; font-weight:inherit; color:inherit;}
.main-online-btn a i{font-size: 2.9rem; color: var(--white);}
.main-online-btn a.product-btn{display: none;}

@media all and ( max-width: 1280px ){
	.main-online-btn{margin-top: 0; top: auto; bottom: var(--area-padding); right: var(--area-padding);}
	.main-online-btn a.online-btn{display: flex !important;}
	.main-online-btn a .tit-m{padding-top: 0.5rem; font-size: 1.75rem; line-height: 1.14; letter-spacing: -0.015em; color: var(--white); display: block;}
	.main-online-btn a .tit, .main-online-btn a i{display: none;}
}
@media all and ( min-width: 1281px ){
	.main-online-btn a:hover{background-color: var(--main-color);}
	.main-online-btn.hide{opacity: 0; visibility: hidden;}
}
@media all and ( min-width: 1281px ) and ( min-height: 751px ){	
}