@charset "UTF-8";
/*----------------------------------------------------------------------
# 메인 CSS 
----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
@ MAIN COMMON 
----------------------------------------------------------------------*/
#main > section {padding-top:6.25rem;padding-bottom:6.25rem; overflow-x:clip; }

.main_title_wrap { position:relative; } 
/*
.main_title {position:relative; display:flex; align-items:center; font-size:2.5rem; color:#000; font-weight:600; padding:0rem;line-height:1; }
*/
.main_title h3 { font-family:var(--ff-pop); font-size:1.25rem; color:var(--menu); font-weight:400; letter-spacing:0.05em; }
.main_title h2 { font-family:var(--ff-pop); font-size:4.688rem; color:#111; font-weight:700; height:1.06; letter-spacing:0; }
.main_title h2 span { color:var(--menu); } 
.main_title p { font-size:1.25rem; color:#111; font-weight:500; line-height:1.5; }
.main_title p span { font-weight:700; } 


@media screen and (max-width: 1024px){
	.main_title h3 { font-size:1.125rem; } 
	.main_title h2 { font-size:3.25rem; } 
	.main_title p { font-size:1.125rem; } 

}
@media screen and (max-width: 1024px){
	/*#main > section {padding-top:5rem;padding-bottom:5rem;}*/
}
@media screen and (max-width: 768px){
	/*.main_title { font-size:1.563rem;  }*/
}



/*----------------------------------------------------------------------
	메인 슬라이드
----------------------------------------------------------------------*/
#main__slider {position:relative;padding:0 !important;}
#main__slider .slider__infos {overflow:hidden;height:100vmin;}
/*배경*/
#main__slider .slider__thumb {position:relative;width:100%;height:100%; }
#main__slider .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;}
#main__slider .slider__thumb .slider__thumb_mo {display:none;}
#main__slider .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);background-size:cover;z-index:-1;}
#main__slider .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
#main__slider .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1170px;width:100%;height:100%;z-index:9;margin:0 auto;}

/*슬로건*/
#main__slider .slider__slogun {display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;text-align:center;font-weight:900;font-size:4rem;line-height:1;color:#fff;}
#main__slider .slider__slogun > b {position:relative;display:block;font-weight:700;font-size:4.063rem;line-height:1;color:#fff;overflow:hidden;}
#main__slider .slider__slogun > b.subtitle {margin-top:15px; display:block;font-weight:600;font-size:2.5rem;line-height:1;color:#fff;overflow:hidden;}
#main__slider .slider__slogun > b > span,
#main__slider .slider__slogun > p > span { display:block; position:relative; opacity:0; } 
#main__slider .slider__slogun > p {position:relative;margin-bottom:1.25rem;font-weight:500;font-size:2.188rem;line-height:1.29;color:#fff;overflow:hidden;}
/*
#main__slider .slider__slogun > b {display:block;font-weight:900;font-size:4rem;line-height:1;color:#fff;}
#main__slider .slider__slogun > strong {display:block;margin-top:2.2rem;font-weight:400;font-size:3rem;color:#fff;}
#main__slider .slider__slogun > p {margin-top:2.2rem;font-weight:300;font-size:1.8rem;line-height:1.4;color:#fff;}
#main__slider .slider__slogun > p strong {font-weight:500;}
*/

#main__slider .slider__slogun_btn {position:relative;display:block;padding:1rem 2rem; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;-webkit-transition-duration:.3s;-m-transition-duration: .3s;-o-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;transition: all .3s ease-out;}
#main__slider .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;-webkit-transition-duration:.3s;-m-transition-duration: .3s;-o-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;transition: all .3s ease-out;}
#main__slider .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;}
/*#main__slider .slider__slogun_btn > span:before {content:'';display:inline-block;width:20px;height:20px;margin-right:8px;background-image:url(images/main/slogun_icon.svg);background-repeat:no-repeat;background-position:center;}*/
#main__slider .slider__slogun_btn > span:after {content:'More View';}


/*스크롤*/
/*
#main__slider .slider-scroll a {display:block;position:absolute;left:0;right:0;width:9.2rem;height:4.3rem;margin:0 auto;font-weight:500;font-size:0.875rem;color:#fff;animation:scrollImage 2s linear infinite;cursor:pointer;text-align:center;letter-spacing:0;z-index:9;}
#main__slider .slider-scroll a:before {content:'';display:block;width:1.5rem;height:1.5rem;margin:0 auto;margin-bottom:.4rem;background-image:url(images/main/visual_scroll.png);background-repeat:no-repeat;background-position:center;background-size:cover;}
@keyframes scrollImage {0%{bottom:50px;}50%{bottom:70px;}100%{bottom:50px;}}
*/
#main__slider .slider-scroll { position:relative; } 
#main__slider:before { content:''; position:absolute; left:50%; transform:translateX(-50%); top:-100%; width:1px; height:200px; background:rgba(255,255,255,0.3); z-index:7; animation:scrollImage3 5s linear infinite; } 
#main__slider .slider-scroll a {display:block;position:absolute;left:0;right:0; bottom:80px; width:16px;height:24px;margin:0 auto;font-weight:500;font-size:0.875rem;color:#fff; border:1px solid #fff; border-radius:7.7px; cursor:pointer;text-align:center; z-index:7; overflow:hidden;  }
#main__slider .slider-scroll a:before { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:3px; height:6px; background:#fff; border-radius:1.6px; animation:scrollImage2 1.3s linear infinite; } 

#main__slider .slider-scroll .slider-scroll-text { position:absolute; left:50%; bottom:50px; transform:translateX(-50%); font-size:13px; color:#fff; font-weight:300; z-index:7; } 


@keyframes scrollImage {0%{top:-5px;}50%{top:10px;}100%{top:5px;}}
@keyframes scrollImage2 {0%{top:-5px;} 100%{top:25px;}}

@keyframes scrollImage3 {0%{ top:0px; opacity:1; } 100%{top:calc(100%); opacity:0.5; } }

/*좌우 부가 설정*/
#main__slider .swiper-button-prev:after, #main__slider .swiper-button-next:after {font-size:3rem;color:#fff;}

#main__slider .swiper-pagination { display:flex; flex-direction:column; width:1.25rem;left:revert; right:3.125rem; top:50%; transform:translateY(-50%); bottom:revert; } 
#main__slider .swiper-pagination-bullet { position:relative; width:10px; height:10px; background-color:transparent; border:1px solid #fff; opacity:1; margin:2px; transition:all 0.4s;  }
#main__slider .swiper-pagination-bullet:after { content:''; position:absolute; left:4px; bottom:-5px; width:1px; height:5px; background:#fff; transition:all 0.4s; } 
#main__slider .swiper-pagination-bullet:last-of-type:after { opacity:0; } 
#main__slider .swiper-pagination-bullet-active { background:#fff; margin-bottom:15px;}
#main__slider .swiper-pagination-bullet-active:after { bottom:-19px; height:19px; } 

#main__slider .swiper-pagination-bullet-active:last-of-type { margin-top:15px; margin-bottom:0; } 
#main__slider .swiper-pagination-bullet-active:last-of-type:after { opacity:1; top:-15px; bottom:revert; height:15px; } 

/*액션*/
#main__slider .slider__thumb .slider__thumb_bg {-webkit-transition-duration:15s;-m-transition-duration: 15s;-o-transition-duration:15s;-ms-transition-duration:15s;transition-duration:15s;transition: all 15s ease-out;-webkit-transform: scale(1,1);-ms-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);}
#main__slider .slider__slogun {position:relative;top:4rem;-webkit-transition-duration:.8s;-m-transition-duration: .8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;transition: all .8s ease-out;}
#main__slider .swiper-slide-active .slider__slogun {top:0;}
#main__slider .swiper-slide-active .slider__thumb .slider__thumb_bg {-webkit-transform: scale(1.25);-ms-transform: scale(1.25);-moz-transform: scale(1.25);-o-transform: scale(1.25);transform: scale(1.25);}

/* SWIPER PAGINATION */
#main__slider .swiper-button-prev:after, #main__slider .swiper-button-next:after {font-size:2rem;color:#fff;}
#main__slider .swiper-button-prev { display:none; left:20px; } 
#main__slider .swiper-button-next { display:none; right:20px; }


/*반응형*/
@media screen and (min-width: 1025px){
	#main__slider .slider__slogun_btn:hover {border-color:#0d1231;}
	#main__slider .slider__slogun_btn:hover:before {background-color:#0d1231;opacity:1;}
}
@media screen and (max-width: 1024px){
	#main__slider .slider__slogun {padding:0 15px;}

	#main__slider .swiper-pagination { right:15px; } 
}
@media screen and (max-width: 640px){
	#main__slider .slider__infos {height:640px;}
	#main__slider .slider__thumb .slider__thumb_bg {display:none;}
	#main__slider .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;}
	@keyframes scrollImage {0%{bottom:30px;}50%{bottom:50px;}100%{bottom:30px;}} 

	#main__slider .slider-scroll { display:none; } 

	#main__slider .slider__slogun > b { font-size:3rem; }
	#main__slider .slider__slogun > p { font-size:1.25rem; } 

}
@media screen and (max-width: 480px){
	#main__slider .slider__infos {height:480px;}
}




.visual_line { position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url('/common/theme/layout/images/common/section_line_w.png'); background-position:center;  z-index:2;} 
.section_line { position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url('/common/theme/layout/images/common/section_line.png'); background-position:center;  z-index:0;} 





/*------------------------------------------------------
@ MAIN ABOUT
------------------------------------------------------*/
#main_about {  position:relative; overflow-x:clip; z-index:1;  } 
#main_about.section { padding-top:0px; padding-bottom:0px; } 
#main_about .maxWidth1600 { width:100%; } 

.main_about { position:relative;  display:flex; align-items:center; min-height:calc(var(--vh, 1vh) * 100); } 
.main_about:after { content:''; position:absolute; left:calc(-50% + 25rem); top:0px; width:100%; height:100%; background:#f6f6f6; z-index:-1; } 

.main_about_cont { display:flex;  overflow:hidden; } 
.main_about_cont .left { width:50%;  } 
.main_about_cont .right { width:50%; } 

.main_about_cont ul { margin-top:1.875rem; margin-right:11.25rem; } 
.main_about_cont ul li { } 
.main_about_cont ul li a { position:relative; display:block; font-size:1.125rem; color:#666; padding:0.625rem 0 0.625rem 2.5rem; transition:all 0.4s;  } 
.main_about_cont ul li a:before { content:''; position:absolute; left:0px; top:50%; transform:translateY(-50%); width:0.625rem; aspect-ratio:1; border-radius:50%; background:var(--menu); } 
.main_about_cont ul li a .line { position:absolute; top:50%; transform:translateY(-50%); right:0; width:0; height:1px; background:var(--menu); transition:all 0.4s; } 


.main_about_cont ul li a:hover, 
.main_about_cont ul li a.active { color:#000; font-weight:500; } 
.main_about_cont ul li a:hover .line, 
.main_about_cont ul li a.active .line { width:5rem; } 


.main_more { margin-top:3.75rem; }
.main_more a { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:20rem; height:5rem; font-size:1.125rem; color:var(--menu); border:1px solid var(--menu); border-radius:2.5rem; transition:all 0.4s; overflow:hidden; z-index:1; } 
.main_more a::after { content:''; position:absolute; left:0px; bottom:-100%; width:100%; height:100%; background:var(--menu); z-index:-1; transition:all 0.4s; } 

.main_more a:hover { color:#fff; } 
.main_more a:hover::after { bottom:0; } 


.about_thumb { display:flex;align-items:center; position:relative; width:100%; transition:all 0.4s;   } 
.about_thumb.hide { display:none;  } 
.about_thumb.active { display:flex;  } 


@media screen and (max-width: 1200px){
	.main_about_cont ul { margin-right:1.25rem; } 
} 
@media screen and (max-width: 1024px){
	
	.main_about:after { left:calc(-50% + 12.5rem); } 

	.main_about_cont ul li a { padding:0.625rem 0 0.625rem 1.25rem; }
	.main_about_cont ul li a .line { display:none; } 

	.main_more { margin-top:2.5rem; }
	.main_more a { height:3.5rem; }

}
@media screen and (max-width: 768px){
	.main_about_cont { flex-direction:column; } 
	.main_about_cont .left { width:100%;  } 
	.main_about_cont .right { width:100%; margin-top:1.875rem; } 
	.main_about_cont ul li a .line { display:inline-block; } 	
}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 540px){

}
@media screen and (max-width: 480px){
}



/*------------------------------------------------------
@ MAIN SERVICE
------------------------------------------------------*/
#main_service {  position:relative; overflow-x:clip; } 
#main_service.section { padding-top:0; padding-bottom:0; } 



.main_service { position:relative;  display:flex; align-items:center; min-height:calc(var(--vh, 1vh) * 100); background:url('/common/theme/layout/images/main/service_bg.jpg') no-repeat right top / cover;  } 

.main_service .maxWidth1600 { position:relative; width:100%; z-index:4; } 
/*
.main_service:after { content:''; position:absolute; left:calc(-50% + 400px); top:0px; width:100%; height:100%; background:#fff; z-index:1; } 
*/

.main_service .main_title { position:absolute; left:0px; top:0.625rem; } 
.main_service .main_title h3 { font-size:1.25rem; writing-mode: vertical-lr; } 

/*
#service_cover { position:absolute; background:url('/common/theme/layout/images/main/service_bg.jpg') no-repeat right top / cover;  width:100%; height:100%; z-index:0; }
*/
#service_cover { position:absolute; left:calc(-50% + 25rem); top:0px; width:100%; height:100%; background-color:#fff; z-index:2; } 
#main_service .section_line { z-index:2; } 
#service_cover_bg { position:absolute; top:0px; right:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2; }


.main_service_cont { padding-left:10rem; }
.main_service_cont p { font-size:2.813rem; color:#000; font-weight:500; padding:0.313rem 0; word-break:keep-all; }
.main_service_cont p b { font-weight:700; } 


@media screen and (max-width: 1200px){

} 
@media screen and (max-width: 1024px){
	#service_cover { left:calc(-50% + 12.5rem); background-position:calc(-50% + 12.625rem) center; } 
}
@media screen and (max-width: 768px){

	.main_service .main_title h3 { color:#fff; } 

	.main_service_cont { padding-left:3.5rem; }
	.main_service_cont p { font-size:2.25rem; color:#fff; }
	
	#main_service .section_line { opacity:0; } 
	#service_cover { left:-100%; } 
}
@media screen and (max-width: 640px){
	.main_service .main_title h3 { color:#fff !important; opacity:1 !important; } 
	.main_service .main_title { opacity:1 !important; } 
	.main_service_cont p { color:#fff !important; opacity:1 !important; } 
}
@media screen and (max-width: 540px){

}
@media screen and (max-width: 480px){
	.main_service_cont p { font-size:2rem; } 
}





/*------------------------------------------------------
@ MAIN VALUE
------------------------------------------------------*/
#main_value {  position:relative; overflow-x:clip; } 
#main_value.section { padding-top:0; padding-bottom:0; } 
.main_value { display:flex; align-items:center; min-height:calc(var(--vh, 1vh) * 100); background:url('/common/theme/layout/images/main/value_bg.jpg') no-repeat 10rem top / cover; } 
.main_value .maxWidth1600 { position:relative; width:100%; z-index:4; } 


.main_value_cont { display:flex; }
.main_value_cont .left { width:50%; }
.main_value_cont .right { width:50%; padding-left:4rem; }
.main_value_cont .main_title p { font-size:1.563rem; } 

.main_value_cont p { font-size:1.25rem; color:#111; margin-top:1.875rem; line-height:1.5; } 


#main_value .section_line { z-index:3; } 

#value_cover { position:absolute; right:calc(-50%); top:0px; width:100%; height:100%; background-color:#fff;  z-index:2; } 
#value_cover_bg { position:absolute; top:0px; right:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1; }


@media screen and (max-width: 1200px){
	.main_value { background-position:left top ; } 
} 
@media screen and (max-width: 1024px){

}

@media screen and (max-width: 768px){
	#main_value.section { }
	.main_value { }


	.main_value_cont { flex-direction:column; }
	.main_value_cont .left { }
	.main_value_cont .right { width:100%; padding-left:2rem; }
	
	#main_value .section_line { opacity:0; } 
	#value_cover { right:-100%; } 
}
@media screen and (max-width: 640px){
	.main_value_cont .main_title h3, 
	.main_value_cont .main_title h2,
	.main_value_cont .main_title p,
	.main_value_cont p, 
	.main_value_cont .main_title .main_more { opacity:1 !important; } 

}
@media screen and (max-width: 540px){

}
@media screen and (max-width: 480px){
	.main_value_cont .right { padding-left:0rem; }
}




/*------------------------------------------------------
@ MAIN PORTFOLIO
------------------------------------------------------*/
#main_portfolio {  position:relative; background:#f6f6f6;  overflow-x:clip; } 
.main_portfolio { position:relative; display:flex; align-items:center; min-height:calc(var(--vh, 1vh) * 100); } 

.main_portfolio .main_title h2 { line-height:1.03; } 
.main_portfolio .main_title p { margin-top:1.875rem; } 


.main_portfolio_inner { display:flex; position:relative; width:100%; left:calc(50% - 50rem); min-height:30rem; } 
.main_portfolio_inner .left { position:relative; width:30.313rem; padding-right:4.375rem; } 
.main_portfolio_inner .right { position:relative; width:calc(100% - 30.313rem); } 
.main_portfolio_inner .thk-col {  } 

.main_portfolio_wrap { position:absolute; top:0rem; left:0%; /*transform:translateX(-390px);*/ right:0px; width:calc((400px * 4) - 30px); z-index:5;  overflow:hidden; }  

.main_portfolio_list { position:relative;  } 

.main_portfolio_cont { position:relative; width:100%; padding:0;  transition:all .3s ease;overflow:hidden; } 
.main_portfolio_cont a { display:block; position:relative; height:100%;} 

.main_portfolio_thumb_wrap { position:relative; overflow:hidden; } 
.main_portfolio_thumb { display:block;width:100%; height:0; padding-top:106.666%; position: relative;overflow:hidden; transition:all 0.3s ease; } 
.main_portfolio_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%;height:100%; background:rgba(0,0,0, 0.5); opacity:0;  transition:all 0.3s; z-index:1; } 
.main_portfolio_thumb img {display: block; width:100%; position: absolute;top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;}

.main_portfolio_subject_wrap { display:flex; flex-direction:column; justify-content:space-between; position:relative; width:100%; height:100%; z-index:7; transition:all .3s ease; padding-top:1.563rem; } 
.main_portfolio_subject { width:100%; font-size:1.25rem; color:#333; font-weight:500; -webkit-line-clamp : 2;  line-height:1.35em; height:2.7em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; transition:all 0.3s ease; word-wrap:break-word; word-break:keep-all; } 


.main_portfolio_list_swiper { position:absolute; bottom:0px; width:100%; height:6.25rem;   }
.main_portfolio_list_swiper .swiper-button-prev:after, .main_portfolio_list_swiper .swiper-button-next:after { display:none; content:''; } 
.main_portfolio_list_swiper .swiper-button-prev, 
.main_portfolio_list_swiper .swiper-button-next { width:6.25rem; height:6.25rem; margin-top:0rem;border:1px solid #dcdcdc; background-color:#fff; transition:all 0.4s; background-repeat:no-repeat; background-position:center;  } 

.main_portfolio_list_swiper .swiper-button-prev {left:0; right:revert; top:0%;background-image:url('/common/theme/layout/images/main/icon_prev_b.png');  }
.main_portfolio_list_swiper .swiper-button-next  {left:6.375rem; right:revert;  top:0%;  background-image:url('/common/theme/layout/images/main/icon_next_b.png');}

.main_portfolio_list_swiper .swiper-button-prev:hover { border:1px solid var(--menu); background-color:var(--menu); background-image:url('/common/theme/layout/images/main/icon_prev_w.png'); } 
.main_portfolio_list_swiper .swiper-button-next:hover { border:1px solid var(--menu); background-color:var(--menu); background-image:url('/common/theme/layout/images/main/icon_next_w.png'); } 


.main_portfolio_cont a:hover .main_portfolio_subject { color:var(--menu); } 
.main_portfolio_cont a:hover .main_portfolio_thumb { transform:scale(1.05); } 
.main_portfolio_cont a:hover .main_portfolio_thumb:after { opacity:1; } 


@media screen and (max-width: 2030px){
}
@media screen and (max-width: 1630px){
	.main_portfolio { padding-left:15px; } 
	.main_portfolio_inner { left:revert; } 
}

@media screen and (max-width: 1480px){ 
	
} 
@media screen and (max-width: 1200px){ 

}

@media screen and (max-width: 1024px){

}	
@media screen and (max-width: 768px){
	.main_portfolio { align-items:revert; padding-right:15px; min-height:revert;  } 
	.main_portfolio_inner { display:flex; flex-direction:column; width:100%; left:revert; min-height:revert; } 
	.main_portfolio_inner .left { position:relative; width:revert; padding-right:revert; } 
	.main_portfolio_inner .right { position:relative; width:100%; margin-top:1.875rem; } 

	.main_portfolio_wrap { position:relative; width:100%; } 

	.main_portfolio_list_swiper { position:relative; margin-top:1.875rem;  } 

	.main_portfolio_list_swiper .swiper-button-prev, 
	.main_portfolio_list_swiper .swiper-button-next { width:5rem; height:5rem; } 
	.main_portfolio_list_swiper .swiper-button-next  {left:5.1rem; } 

}
@media screen and (max-width: 640px){
}
@media screen and (max-width: 479px){

}