/********** 메인 비주얼 **********/

#main_visual {position: relative; }

.main_section { position:relative; height:calc(100vh - 90px); overflow:hidden; background-color:#000; }

.main_section .bg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	transform: scale(1.1);
	transition:transform 5s ease-out, opacity 1s ease 0.3s;
	z-index:-1;
}
.ani .main_section.slick-active .bg {
	transform: scale(1, 1);
}



.msilde_tit {position: absolute; z-index: 2; left: 50%; top:46%; transform: translate(-50%, -50%); text-align: center; width: 92%;}

.msilde_tit h2 {font-size: 60px; color:#fff; font-family: var(--paybooc); font-weight: 800; line-height: 1.3; transition: transform 1s;}
.msilde_tit .word_det { font-size: 20px; font-weight: 700; line-height: 1.6;
	background:linear-gradient(60deg, #fff 0%, #fff 30%, transparent 70%, transparent 100%);
	background-size:400% 100%;
	background-position:100% center;
	color:transparent !important;
	background-clip:text;
	-webkit-background-clip:text;
	display:inline-block;
	transition: background-position 4s;
	transition-delay:1.5s;
}
.msilde_tit .word_det.play { background-position:0; }

.word_up > span { display:block; line-height:inherit; overflow:hidden; position:relative;  }
.word_up > span > span { display:inline-block; line-height:inherit; transform:translateY(100%); transition:transform 1s; }
.word_up.play > span > span { transform:translateY(0); }

@media (max-width:1660px) {
	.main_section { height:calc(100vh - 70px); }
}

@media screen and (max-width:1250px) {
	.main_section { height:calc(260px + 42vw); }
}

@media screen and (max-width:767px) {
	.msilde_tit .word_det { padding:0 20px; }
	.msilde_tit .word_det br { display:none; }
}







/********** 메인 타이틀 **********/

.m_tit {font-size: 44px; font-family: var(--paybooc); font-weight: 800; line-height: 1.3; }
.m_det {font-size: 18px; font-weight: 400; line-height: 1.6; color:#444;}



/****** 메인 버튼 *******/

.mbtn.btn_c { padding:24px 30px; border-radius:6px; }
.mbtn.btn_c:hover { background-color:#fff; color:var(--mc); }
.mbtn.btn_c .ani { background-color:#fff; }





/********** 사업분야 **********/


#main_biz .biz_con .col2 li:first-of-type { padding-right:3%; }
#main_biz .biz_con .col2 li:last-of-type { padding-left:3%; }

#main_biz .biz_con .img { border-radius:10px; background-size:cover; background-position:center; background-repeat:no-repeat; }
#main_biz .biz_con .col2 .img { height:400px; }
#main_biz .biz_con h4 { position:relative; font-size:28px; line-height:120%; color:#111; font-weight:700; }
#main_biz .biz_con h4 img { display:block; content:''; position:absolute; top:0; right:0; }
#main_biz .biz_con p { font-size:17px; line-height:150%; color:#666; font-weight:400; }

#main_biz .biz_con .col3 { margin:0 -2%; }
#main_biz .biz_con .col3 li { padding:0 2%; }

#main_biz .biz_con .col3 .img { height:360px; }
#main_biz .biz_con .col3 li:first-of-type .img { height:520px; }
#main_biz .biz_con .col3 li:last-of-type .img { margin-top:160px;  }

@media (max-width:1660px) {
	#main_biz .biz_con .col2 .img { height:calc(120px + 16vw); }
	#main_biz .biz_con .col3 .img { height:320px; }
	#main_biz .biz_con .col3 li:first-of-type .img { height:460px; }
	#main_biz .biz_con .col3 li:last-of-type .img { margin-top:140px;  }
	#main_biz .biz_con h4 img { width:calc(20px + 1vw); }
}
@media (max-width:1400px) {
	#main_biz .biz_con p br { display:none; }
}
@media (max-width:1100px) {
	#main_biz .biz_con .col3 .img { height:260px; }
	#main_biz .biz_con .col3 li:first-of-type .img { height:380px; }
	#main_biz .biz_con .col3 li:last-of-type .img { margin-top:120px;  }
}
@media (max-width:800px) {
	#main_biz .biz_con .col3 .img { height:210px; }
	#main_biz .biz_con .col3 li:first-of-type .img { height:330px; }
}

@media (max-width:767px) {
	#main_biz .biz_con .col2 li:first-of-type { width:70%; padding-right:0; }
	#main_biz .biz_con .col2 li:last-of-type { float:right; width:70%; padding-left:0; margin-top:calc(20px + 3vw); }
	#main_biz .biz_con .col3 li { width:50%; }
	#main_biz .biz_con .col3 li:last-of-type { float:right; }
	#main_biz .biz_con .col3 li:last-of-type .img { margin-top:calc(20px + 3vw); }
}

@media (max-width:500px) {
	#main_biz .biz_con .col2 li:first-of-type, #main_biz .biz_con .col2 li:last-of-type { width:100%; }
	#main_biz .biz_con .col3 .img { height:150px; }
	#main_biz .biz_con .col3 li:first-of-type .img { height:270px; }
	#main_biz .biz_con p { display:none; }
}








/* 메인 문의 */
.m_adm .wrap {background:linear-gradient(to right, #eef5fd, #dbeaf8);}
.m_adm .swrap {position: relative; padding: 120px 0; }
.m_adm .swrap .img {position: absolute; right:0; bottom: 0; }
.m_adm .con {width: 39%;}
.m_adm .con .m_det { color:#404040;}

.mbtn_inq .ani { background-color: #fff; }
.mbtn_inq:hover p, .mbtn_inq:hover i { color:var(--mc); }

@media (max-width: 1660px) {
    .m_adm .swrap {padding: calc(30px + 5vw) 0;}
    .m_adm .swrap .img {width: calc(240px + 20vw);}
}

@media (max-width: 767px) {
	.m_adm .wrap {background:linear-gradient(to bottom, #eef5fd, #dbeaf8);}
    .m_adm .swrap {padding: calc(30px + 5vw) 0 0; text-align:center; }
    .m_adm .con {width: 100%; text-align: center;}
    .m_adm .con .m_det { padding:0 10%; }
    .m_adm .swrap .img { position: static; margin-top:calc(22px + 4%); }
}







/* 시공 사례 */

.m_works .col_works { display: flex; flex-wrap: wrap; }
.m_works .col_works { margin:calc(-10px - 2.2%) -1.3%; }
.m_works .col_works > li { width: 25%; padding:calc(10px + 2.2%) 1.3%; }
.m_works .col_works .img { background-position:center; background-repeat:no-repeat; background-size:cover; padding-bottom: 100%;  border-radius: 10px;}
.m_works .col_works h4 { font-size: 19px; color:#111; line-height:1.3; font-weight:600; text-align:center; }
.m_works .col_works .cont { font-size: 16px; line-height: 150%; color:#888; }
.m_works .col_works .year span {font-size: 13px; padding: 7px 17px; background: #f2f6fc; border-radius: 100px; display: inline-block; color:#555; }

@media (max-width:1200px){
	.m_works .col_works { margin:-1%; }
	.m_works .col_works > li { padding:1%; }
}
@media screen and (max-width:1000px){
	.m_works .col_works { margin:calc(-10px - 1.5%) -2%; }
	.m_works .col_works > li { width:50%; padding:calc(10px + 1.5%) 2%; }
	.m_works .col_works .img { height:calc(180px + 10vw); padding:0; }
}
@media screen and (max-width:840px){
	.m_works .col_works { margin:calc(-10px - 1%) -2% !important; }
	.m_works .col_works > li { width:50% !important; padding:calc(10px + 1%) 2% !important; }
}
@media screen and (max-width:640px){
	.m_works .col_works .img { height:37vw; }
}