@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; }
@media screen and (max-width: 1024px){
	.main_title { font-size:1.875rem;  }
}
@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:1400px;width:100%;height:100%;z-index:9;margin:0 auto;}

/*슬로건*/
#main__slider .slider__slogun {display:flex;height:100%;justify-content:center;align-items:flex-start;flex-direction:column;  color:#fff;}
#main__slider .slider__slogun > b {position:relative;display:block;font-weight:700;font-size:5rem;letter-spacing:0.2em;line-height:1.2;color:#fff;overflow:hidden;}
#main__slider .slider__slogun > b.subtitle {display:block;font-weight:400;font-size:1.125rem; margin-bottom:1.875rem; letter-spacing:0.5em; line-height:1.6;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-top:20px;font-weight:400;font-size:1.500rem;line-height:1.47;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:;  margin-top:2rem;border-bottom:1px solid #fff;font-size:0.938rem;color:#fff;text-align:center;box-sizing:border-box;transition:all .3s ease-out; letter-spacing:0.1em; }
#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:'View Project';}


/*스크롤*/
#main__slider .slider-scroll a {display:block;position:absolute;left:0;right:0; bottom:50px; width:16px;height:27px;margin:0 auto;font-weight:500;font-size:0.875rem;color:#fff; border:2px solid #fff; border-radius:7.7px; cursor:pointer;text-align:center; z-index:9; 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; } 

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

*/

/*
#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;}
*/



/*좌우 부가 설정*/
#main__slider .swiper-button-prev:after, #main__slider .swiper-button-next:after {font-size:3rem;color:#fff;}
#main__slider .swiper-pagination-bullet {background-color:#fff;}
/*액션*/
#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:0.938rem;color:#fff;}
#main__slider .swiper-button-prev { position:relative; left:0px; } 
#main__slider .swiper-button-next { position:relative; right:0px; padding-top:2rem; }


/*----------------------------------------------------------------------
@ MAIN 슬라이드 컨트롤러  
----------------------------------------------------------------------*/

.swiper_control_wrap { position:absolute; transform:translateY(-50%); z-index:12; top:40%; width:100%; height:auto;  margin:0 auto; } 

.slider_new .main_visual_state  {display: block;position: absolute; top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;}
/*.main_visual_wrap .main_visual_state  {display: block;max-width: 1520px;margin: 0 auto;position: absolute;left: 112px;right: 112px;top: calc(50% - 183px); -webkit-transition: all 300ms;transition: all 300ms;width: 100%; z-index:100;}*/
.slider_new .swiper-pagination-fraction {color:#aaa;}

/* controller */
.swiper_control {position: absolute; right:9rem; top:calc(50% - 7.188rem); font-size: 0;z-index: 2; }

/* pagination */
.swiper_control .swiper-pagination {position: static;}

.swiper_control .swiper-pagination-wrap {position: relative;}
.swiper_control .swiper-pagination-bullet-line {width: 14px;height: 2px;position: absolute;top: -3px;left: 16px;margin-left: -7px;background: #fff;}
.swiper_control .swiper-pagination-bullet {width: 32px;height: 27px;padding: 10px 12px 10px 13px;position: relative;background: transparent;opacity: 1;}
.swiper_control .swiper-pagination-bullet > i {display: block;width: 100%;height: 100%;background: #fff;border-radius: 50%;}
.swiper_control .swiper-pagination-bullet-active {background: transparent;}

.swiper_cus_page { display:flex; flex-direction:column; } 

.swiper_control .swiper-pagination-fraction {display: inline-block;vertical-align: middle;width: auto;}
.swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;}

/* progress */
.swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width: 200px;height: 3px;margin: 0 2px 0 0px;position: relative;}

.swiper_progress_wrap {display: block;width: 4px;height: 160px;position: absolute; left:50%; transform:translateX(-50%); top: 0;margin-top: -1px;background:#fff;overflow: hidden; }

.swiper_progress {display: block;width:4px;height: 0;background: #000; }

/* state */
.swiper_play_state {display: inline-block;vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left: 5px;}
.swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;}

.swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px;  } 

.swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;}
.swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;}


.swiper_page_pro { position:relative; height:160px; } 
.swiper_page { font-size:1.125rem; color:#fff; font-weight:400; padding-bottom:0.625rem; text-align:center; } 
.swiper_totalpage { font-size:1.125rem;  color:#fff; font-weight:400;  padding-top:0.625rem; text-align:center; } 




/*반응형*/
@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: 1430px){
	#main__slider .slider__slogun {padding:0 15px;}
} 
@media screen and (max-width: 1024px){
	#main__slider .slider__slogun {padding:0 15px;}
	.swiper_control { right:5.375rem; } 
	#main__slider .slider__slogun > b { font-size:3.75rem; } 
}
@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;}}

	.slider-scroll { display:none; } 

	.swiper_control { right:revert; left:50%; transform:translateX(-50%);  } 
	.swiper_control_wrap { position:absolute; transform:revert; top:revert; bottom:10%; } 

	.swiper_cus_page { display:flex; flex-direction:row; align-items:center; gap:0.625rem; } 
	.swiper_progress_wrap { width:160px; height:4px; left:revert; transform:revert; } 
	.swiper_progress {display: block;width:0px;height: 4px } 
	.swiper_page_pro { width:160px; height:revert; } 

	.swiper_page { padding-bottom:0; }
	.swiper_totalpage { padding-top:0; } 
	#main__slider .swiper-button-prev { top:11px; height:22px; } 
	#main__slider .swiper-button-next { top:11px; height:22px; padding-top:0; } 
	#main__slider .slider__slogun > b { font-size:3.125rem; } 

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









/* 라인 줄임 CSS */
.comm_line1 { -webkit-line-clamp : 1;  line-height:1.4em; height:1.3em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }
.comm_line2 { -webkit-line-clamp : 2;  line-height:1.4em; height:2.8em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }
.comm_line3 { -webkit-line-clamp : 3;  line-height:1.4em; height:4.2em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }
.comm_line4 { -webkit-line-clamp : 4;  line-height:1.4em; height:5.6em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }
.comm_line5 { -webkit-line-clamp : 5;  line-height:1.4em; height:7em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }
.comm_line6 { -webkit-line-clamp : 6;  line-height:1.4em; height:8.4em; overflow:hidden; text-align:left;  text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; }



/*----------------------------------------------------------------------
@ MAIN 서비스 
----------------------------------------------------------------------*/
#main_service { display:flex; align-items:center; background-color:#000; padding-top:9.375rem !important; padding-bottom:9.375rem !important;  } 
#main_service .maxWidth1400 { width:100%; } 

.main_service {display:flex; align-items:center;  width:100%; min-height:30.75rem;  } 
.service_left { width:22.5rem;  margin-top:1.875rem; } 
.service_left li a { position:relative; display:block; font-size:1.875rem; color:#999; font-weight:500; border-bottom:1px solid #d8d8d8; padding:0.625rem 0; transition:all 0.5s ease; }
.service_left li a::after { content:''; position:absolute; left:0px; bottom:-1px; width:0; height:1px; background:#000; transition:width 0.5s ease; } 

.service_left li a.active, 
.service_left li a:hover { display:block; color:#fff; font-weight:800;  }
.service_left li a.active::after, 
.service_left li a:hover::after { width:100%; }
.service_left ol, .service_left ul { padding-left:0; } 
/*
.service_center { position:relative; width:500px; height:539px; } 
.service_center .service_thumb { position:absolute; top:0px; left:0px; } 
*/

.service_right { display:flex;align-items:center; position:relative;  width:calc(100% - 22.5rem);   } 

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


.service_right .service_img { width:31.25rem; } 
.service_right .service_thumb { position:absolute; top:50%; transform:translateY(-50%); left:-3.75rem; display:; } 
.service_right .service_cont { width:calc(100% - 31.25rem); padding-left:1.563rem; }


.service_right h2 { font-size:3.75rem; color:#fff; font-weight:800; }
.service_right .service_tag { font-size:1.25rem; color:#fff; font-weight:700; padding:2px 0px; border-radius:1.25rem; margin-top:0.625rem; }
.service_right p { font-size:1.125rem; color:#999; font-weight:300; margin-top:1.563rem; line-height:1.66; word-break:keep-all;   } 
.service_right a { display:inline-block; font-size:0.938rem; color:#fff; font-weight:400; padding:0.938rem 2.5rem; margin-top:1.875rem; border:1px solid #fff; border-radius:1.875rem; transition:background 0.5s, color 0.5s, border 0.5s; } 
.service_right .animated1 {  position:relative; animation: up-down 2s ease-in-out infinite alternate-reverse both; } 


/*:root { 
--service_c1:#8445da; 
--service_c2:#5045da; 
--service_c3:#16a3fd; 
--service_c4:#c9423e; 
--service_c5:#3ec9c7; 
}
*/

:root { 
--service_c1:#111; 
--service_c2:#111; 
--service_c3:#111; 
--service_c4:#111; 
--service_c5:#111; 
}

/*
.service_inner:nth-of-type(1) .service_tag { background:var(--service_c1); } 
.service_inner:nth-of-type(2) .service_tag { background:var(--service_c2); } 
.service_inner:nth-of-type(3) .service_tag { background:var(--service_c3); } 
.service_inner:nth-of-type(4) .service_tag { background:var(--service_c4); } 
.service_inner:nth-of-type(5) .service_tag { background:var(--service_c5); } 
*/

.service_inner:nth-of-type(1) a:hover { color:#fff; background:var(--service_c1); border-color:var(--service_c1); } 
.service_inner:nth-of-type(2) a:hover { color:#fff; background:var(--service_c2); border-color:var(--service_c2); } 
.service_inner:nth-of-type(3) a:hover { color:#fff; background:var(--service_c3); border-color:var(--service_c3); } 
.service_inner:nth-of-type(4) a:hover { color:#fff; background:var(--service_c4); border-color:var(--service_c4); } 
.service_inner:nth-of-type(5) a:hover { color:#fff; background:var(--service_c5); border-color:var(--service_c5); } 

.service_inner:nth-of-type(1) .service_cont img { height:82px; } 
.service_inner:nth-of-type(2) .service_cont img { height:82px; } 
.service_inner:nth-of-type(3) .service_cont img { height:67px; } 
.service_inner:nth-of-type(4) .service_cont img { height:72px; } 
.service_inner:nth-of-type(5) .service_cont img { height:62px; } 


@media screen and (max-width: 1400px){
	#main_service { padding-top:5rem !important; padding-bottom:5rem !important;  } 

	.main_service { flex-direction:column; } 
	.service_left { width:100%; margin-top:0;  }
	.service_left ul { display:flex; justify-content:space-between; width:100%; margin-bottom:1.875rem; } 
	.service_left ul li { width:100%;  } 
	.service_left ul li:nth-of-type(1) { width:18%;  } 
	.service_left ul li:nth-of-type(2) { width:19%;  } 
	.service_left ul li:nth-of-type(3) { width:27%;  } 
	.service_left ul li:nth-of-type(4) { width:18%;  } 
	.service_left ul li:nth-of-type(5) { width:18%;  } 

	.service_left ul li a { font-size:1.563rem; text-align:center; } 


	.service_right { width:100%; } 
	.service_right .service_thumb { position:relative; top:revert; transform:revert; left:revert; } 

} 


@media screen and (max-width: 1024px){
	#main_service { padding-top:4rem !important; padding-bottom:4rem !important;  } 
	.service_left ul li a { font-size:1.25rem; } 

	.service_right .service_img { width:40%; } 
	.service_right .service_cont { width:60%; padding-left:1.563rem; }
	.service_right h2 { font-size:2.5rem; }
	.service_right a { padding:0.625rem 2.5rem; margin-top:1.25rem;  }
} 
@media screen and (max-width: 900px){

} 
@media screen and (max-width: 640px){
	.main_service { flex-direction:column; } 
	.service_left { width:100%; }

	.service_left ul { display:flex; flex-wrap:wrap; justify-content:revert; width:100%; margin-bottom:1.875rem; } 
	.service_left ul li { width:33.333% !important;  } 
	.service_left ul li a { font-size:1.25rem; }

	.service_right { width:100%; } 

	.service_inner { flex-direction:column; } 

	.service_right .service_img { width:100%; } 
	.service_right .service_thumb { position:relative; top:revert; transform:revert; left:revert; } 
	.service_right .service_cont { width:100%; padding-left:0; }


} 





/*----------------------------------------------------------------------
@ MAIN 프로젝트
----------------------------------------------------------------------*/

#main_project { background:#fffcf7; padding-bottom:15.625rem !important; } 
.main_project { }
.main_project h2 { font-size:5rem; color:#000; font-weight:900; text-align:center; } 


.project_list { margin-top:5rem; }
.project_list .thk-row { }
.project_list .thk-col { margin-bottom:2.5rem;   }


/*
.project_cont { 
	position:relative; overflow:hidden; z-index:3; 
	& a { display:block; --height:486; height:var(--height)px; perspective: calc(var(--height) * 2px); } 

	&:hover .project_view { top:0px; } 
	
	& .project_thumb { position:relative;width:100%;height:0;padding-top:108.83%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; pointer-events:none; } 
	& .project_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 ease }
	& .project_thumb img { position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover; pointer-events:none; }

	& .project_info { 
		position:absolute; left:1.875rem; bottom:3.125rem; color:#fff; z-index:2; pointer-events:none; 
		
		& p { font-size:1.25rem; color:#fff; font-weight:300; margin-bottom:0; text-transform:uppercase; }
		& h3 { font-size:1.875rem; font-weight:800; }
	} 

	& .project_view { 
		display:flex; flex-direction:column; align-items:flex-end; justify-content:center;  position:absolute; left:0; top:0; width:100%; height:100%; color:#fff; text-align:right; background:rgba(132, 69, 218, 0.9); padding:1.875rem 1.875rem 1.875rem 3.125rem; z-index:2; word-break:keep-all; pointer-events:none; transform: rotate3d(1, 0, 0, 90deg);  
		
		& p { font-size:1.25rem; color:#fff; font-weight:300; margin-bottom:0; text-transform:uppercase;}  
		& h3 { font-size:1.875rem; font-weight:800; }
		& p.desc { font-size:1rem; color:rgba(255,255,255,0.5); line-height:1.45; margin-top:1.25rem; text-align:right !important; }
		& p.link { font-size:1rem; color:#fff;  font-weight:700; margin-top:1.875rem; } 
	} 

	&.in_top .project_view { transform-origin: 50% 0%; animation: in_top 300ms ease 0ms 1 forwards; }
    &.in_right .project_view { transform-origin: 100% 0%; animation: in_right 300ms ease 0ms 1 forwards; }
    &.in_bottom .project_view { transform-origin: 50% 100%; animation: in_bottom 300ms ease 0ms 1 forwards; }
    &.in_left .project_view { transform-origin: 0% 0%; animation: in_left 300ms ease 0ms 1 forwards; }
    &.out_top .project_view { transform-origin: 50% 0%; animation: out_top 300ms ease 0ms 1 forwards; }
    &.out_right .project_view { transform-origin: 100% 50%; animation: out_right 300ms ease 0ms 1 forwards; } 
    &.out_bottom .project_view { transform-origin: 50% 100%; animation: out_bottom 300ms ease 0ms 1 forwards; }
    &.out_left .project_view { transform-origin: 0% 0%; animation: out_left 300ms ease 0ms 1 forwards; }
} 
*/


.project_cont a { display:block; --height:486; height:var(--height)px; perspective: calc(var(--height) * 2px); overflow:hidden; } 
.project_cont:hover .project_view { top:0px; } 
.project_cont .project_thumb { position:relative;width:100%;height:0;padding-top:108.83%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; pointer-events:none; } 
.project_cont .project_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 ease }
.project_cont .project_thumb img { position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover; pointer-events:none; }

.project_cont .project_info { position:absolute; left:1.875rem; bottom:3.125rem; color:#fff; z-index:2; pointer-events:none; } 
.project_cont .project_info p { font-family:"Mulish";font-size:1rem; color:#fff; font-weight:300;letter-spacing:0.2em; margin-bottom:0; text-transform:uppercase; }
.project_cont .project_info h3 { font-size:1.875rem; font-weight:800; }


.project_cont .project_view { display:flex; flex-direction:column; align-items:flex-end; justify-content:center;  position:absolute; left:0; top:0; width:100%; height:100%; color:#fff; text-align:right; /*background:rgba(132, 69, 218, 0.9);*/ background:rgba(18, 18, 18, 0.9);padding:1.875rem 1.875rem 1.875rem 3.125rem; z-index:2; word-break:keep-all; pointer-events:none; transform: rotate3d(1, 0, 0, 90deg);  }

.project_cont .project_view p { font-size:1rem; color:#fff; font-weight:300; margin-bottom:0; text-transform:uppercase;}  
.project_cont .project_view h3 { font-size:1.875rem; font-weight:800; }
.project_cont .project_view p.desc { font-size:1rem; color:rgba(255,255,255,0.5); line-height:1.45; margin-top:1.25rem; text-align:right !important; }
.project_cont .project_view p.link { font-size:1rem; color:#fff;  font-weight:700; margin-top:1.875rem; } 


.project_cont.in_top .project_view { transform-origin: 50% 0%; animation: in_top 300ms ease 0ms 1 forwards; }
.project_cont.in_right .project_view { transform-origin: 100% 0%; animation: in_right 300ms ease 0ms 1 forwards; }
.project_cont.in_bottom .project_view { transform-origin: 50% 100%; animation: in_bottom 300ms ease 0ms 1 forwards; }
.project_cont.in_left .project_view { transform-origin: 0% 0%; animation: in_left 300ms ease 0ms 1 forwards; }
.project_cont.out_top .project_view { transform-origin: 50% 0%; animation: out_top 300ms ease 0ms 1 forwards; }
.project_cont.out_right .project_view { transform-origin: 100% 50%; animation: out_right 300ms ease 0ms 1 forwards; } 
.project_cont.out_bottom .project_view { transform-origin: 50% 100%; animation: out_bottom 300ms ease 0ms 1 forwards; }
.project_cont.out_left .project_view { transform-origin: 0% 0%; animation: out_left 300ms ease 0ms 1 forwards; }

@keyframes in_top {
    from { transform: rotate3d(-1, 0, 0, 90deg); }
    to { transform: rotate3d(0, 0, 0, 0deg); }
}

@keyframes in_right {
    from { transform: rotate3d(0, -1, 0, 90deg); }
    to { transform: rotate3d(0, 0, 0, 0deg); }
}

@keyframes in_bottom {
    from { transform: rotate3d(1, 0, 0, 90deg); }
    to { transform: rotate3d(0, 0, 0, 0deg); }
}

@keyframes in_left {
    from { transform: rotate3d(0, 1, 0, 90deg); }
    to { transform: rotate3d(0, 0, 0, 0deg); }
}

@keyframes out_top {
    from { transform: rotate3d(0, 0, 0, 0deg); }
    to { transform: rotate3d(-1, 0, 0, 104deg); }
}

@keyframes out_right {
    from { transform: rotate3d(0, 0, 0, 0deg); }
    to { transform: rotate3d(0, -1, 0, 104deg); }
}

@keyframes out_bottom {
    from { transform: rotate3d(0, 0, 0, 0deg); }
    to { transform: rotate3d(1, 0, 0, 104deg); }
}

@keyframes out_left {
    from { transform: rotate3d(0, 0, 0, 0deg); }
    to { transform: rotate3d(0, 1, 0, 104deg); }
}


.project_more { display:flex;justify-content:center; margin-top:1.875rem; overflow:hidden; }
.project_more a { position:relative; display:inline-flex; justify-content:center; min-width:270px; font-size:0.938rem; color:#000; font-weight:300; padding:1.125rem 2.5rem; border:1px solid #000; border-radius:1.875rem; overflow:hidden; } 

.project_more span { z-index:1; } 
.project_more span:after { z-index:-1; opacity:0; height:100%; content:''; position:absolute; background:#fff; transform:skewX(-45deg); left:-50%; top:0px; transition:all .4s cubic-bezier(.42,0,.58,1); width:0px;  border-radius:0px; } 
.project_more:hover span:after { opacity:1; width:100%; left:200%; }


@media screen and (max-width: 1024px){
	.project_list .row-md3 .thk-col { flex: 0 0 auto; width: calc((100% / 3 ) - 1.875rem); } 
} 
@media screen and (max-width: 640px){
	.main_project h2 { font-size:3.5rem; } 
	.project_list .row-md3 .thk-col { flex: 0 0 auto; width: calc((100% / 2 ) - 1.875rem); } 
} 

@media screen and (max-width: 480px){
	.project_list .row-md3 .thk-col { flex: 0 0 auto; width: calc((100% / 1 ) - 1.875rem); } 
} 







/*----------------------------------------------------------------------
@ MAIN 무료혜택 
----------------------------------------------------------------------*/
#main_free { /*background-color:#f6f9ff;*/background-color:#f7f7f7; } 

.main_free { position:relative; }
.main_free h2 { font-size:3.75rem; color:#555; font-weight:900; }
.main_free h2 span { /*color:#7800d5;*/color:#000; } 

.main_free .main_free_thumb { position:absolute; right:0; top:-280px;  animation: 2s btnScrollUpDown linear infinite; } 

@keyframes btnScrollUpDown{ 
	0%,100% {transform:translateY(0);}
	50% {transform:translateY(15px);}
}


#main_free .free_list { position:relative; margin-top:8.75rem; } 
#main_free .free_list a { position:relative; display:block;  } 

#main_free .swiper-slide { max-width:20rem; width:20rem; min-height:19.688rem; overflow:hidden; text-align:left; padding:1.875rem 0.625rem 1.875rem 1.875rem; background:#fff; } 


/*
.free_cont { 
	.free_icon { text-align:right; padding-right:1.25rem; }
	.free_desc { 
		& h3 { font-size:1.875rem; color:#a229ff; font-weight:700;  }
		& div { font-size:1.563rem; color:#000; font-weight:700; margin-top:0.313rem;  } 
		& p { font-size:1rem; color:#000; font-weight:300; margin-top:0.983rem; line-height:1.43; word-break:keep-all; } 
	}
}
*/
.free_cont .free_icon { text-align:right; padding-right:1.25rem; }
.free_cont .free_desc h3 { font-size:1.875rem; /*color:#a229ff;*/color:#666; font-weight:700;  }
.free_cont .free_desc div { font-size:1.563rem; color:#000; font-weight:700; margin-top:0.313rem;  } 
.free_cont .free_desc p { font-size:1rem; color:#000; font-weight:300; margin-top:0.983rem; line-height:1.43; word-break:keep-all; } 


#main_free .swiper-pagination { display:flex; justify-content:flex-end; gap:3px; position:static;  } 


/* swiper controler */
.clients_swiper_page { display:flex; align-items:center; justify-content:center; margin-top:3.75rem;  } 
.clients_swiper_page .swiper-scrollbar { position:relative; width:1400px; max-width:1400px; height:5px; border-radius:0px; } 
.clients_swiper_page .swiper-pagination { display:none; font-size:1rem; color:#000; font-weight:300; width:60px; max-width:60px; } 
.clients_swiper_page .swiper-pagination .page_number { font-weight:600; } 


.clients_swiper_page .swiper-pagination-progressbar { background:#000; height:5px !important; } 
.clients_swiper_page .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { /*background:#7800d5;*/ background:#999;} 


.clients_swiper_control { position:absolute; width:100%; height:45px; top:50%; transform:translateY(-50%) !important; z-index:5; border:1px solid red;  }
.clients_swiper_control .arrow:before { width:100%; height:100%; border:1px solid #fff; border-right:0px; border-bottom:0px; } 
.clients_swiper_control .arrow:after { width:12px; height:1px; background:#fff; transform-origin:0 100%; transform:rotate(45deg); } 
.clients_swiper_control .swiper-button-prev:after, .clients_swiper_control .swiper-button-next:after { display:none; content:''; } 
.clients_swiper_control .swiper-button-prev, .clients_swiper_control .swiper-button-next { width:2.813rem; height:2.813rem;  border:1px solid #fff; background:#000; opacity:0.2; margin-top:0rem; border-radius:50%; } 
.clients_swiper_control .swiper-button-prev { left:60px; right:revert; top:0%; }
.clients_swiper_control .swiper-button-next  {left:revert; right:60px; top:0%;  }
.clients_swiper_control .swiper-button-next:hover .arrow_mv {  animation: arrow-action-next 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; } 
.clients_swiper_control .swiper-button-prev:hover .arrow_mv {  animation: arrow-action-prev 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; } 

.clients_swiper_control .swiper-pagination { display:none; position:relative; bottom:0rem; } 
.clients_swiper_control .swiper-pagination .swiper-pagination-bullets { } 
.clients_swiper_control .swiper-pagination .swiper-pagination-bullet { width:0.938rem; height:0.938rem; background:#000; margin:0 7px; opacity:1; }
.clients_swiper_control .swiper-pagination .swiper-pagination-bullet-active { background:#000;  }


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

} 
@media screen and (max-width: 1024px){
	.main_free { display:flex;align-items:flex-end; justify-content:space-between; } 
	.main_free h2 { font-size:2.5rem; } 

	#main_free .free_list { margin-top:4.35rem; } 
	.main_free .main_free_thumb { } 
	.main_free .main_free_thumb img { height:150px; } 
	/*
	.main_free .main_free_thumb { width:20%; position:relative; top:revert; display:none;  } 
	*/
}
@media screen and (max-width: 768px){

}
@media screen and (max-width: 640px){
	.main_free .main_free_thumb { top:-5rem; } 
	.main_free .main_free_thumb img { height:6.25rem; } 

	#main_clients .swiper-slide { max-width:revert; width:revert; }

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





/*----------------------------------------------------------------------
@ MAIN 제작 견적문의 
----------------------------------------------------------------------*/
#main_contact { /*background-color:#3e016d;*/ background-color:#1a1a1a;} 

.input__field { width: 100%; background: none; border: none; font-size:1rem;  color: #666; padding-left: 0.625rem; /*background:#4d276a;*/background-color:#333; }
.input__field::-webkit-input-placeholder { color: #fff; font-size: 0.875rem; opacity:0.7; }
.input__field::-moz-placeholder { color: #fff; font-size: 0.875rem; opacity:0.7; }
.input__field:-ms-input-placeholder { color: #fff; font-size: 0.875rem; opacity:0.7; }
.input__field::-ms-input-placeholder { color: #fff; font-size: 0.875rem; opacity:0.7; }
.input__field::placeholder { color: #fff; font-size: 0.875rem; opacity:0.7; }

input.input__field[type="text"], input.input__field[type="password"] { height: 3.438rem; line-height:3.438rem;  margin-bottom: 1.25rem; }
textarea.input__field { font-size:1.125rem; padding: 0.625rem; height: 9.375rem;resize: none;margin-bottom: 1.25rem;}

.input__field.cf-error { border-bottom-color: #ff0000; }

#main_contact { } 
#main_contact label { font-size:1rem; color:#fff; font-weight:400; margin-bottom:10px; } 


.contact_info_wrap { padding-left:6.75rem; } 
.contact_info { color:#fff; }
.contact_info h2 { font-size:3rem; color:#fff; font-weight:900; } 
.contact_info p { font-size:1rem; color:#fff; font-weight:300;letter-spacing:0px; } 


.contact_desc { font-size:1.25rem; color:#fff; margin-top:1.875rem; }
.contact_desc p:nth-child(1) { font-size:1.25rem; font-weight:700; padding-top:0.625rem; padding-bottom:0.325rem; line-height:1.4; } 
.contact_desc p:nth-child(2) { font-weight:300; padding-bottom:1.25rem;  } 
.contact_desc p:nth-child(3) { font-size:2.5rem; font-weight:900; } 


.contact_addr { font-size:1.375rem; color:#fff; font-weight:300; padding-top:3.125rem; } 
.contact_addr p { margin-bottom:0.325rem; } 
.contact_addr p:nth-child(4) { font-size:0.938rem; /*color:#7110bc;*/color:#666; } 

.contact_form { padding-right:6.75rem; }

input[type="radio"] {display:none;}
input[type="radio"] + label { font-weight:400 !important; line-height:1 !important; cursor:pointer; } 
input[type="radio"] + label span.check { position:relative; display:inline-block;width:18px;height:18px;margin-top:-2px;margin-right:10px;vertical-align:middle; border:1px solid #999; background:#fff; border-radius:50%; cursor:pointer;}
input[type="radio"]:checked + label { } 
input[type="radio"]:checked + label span.check:after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border:5px solid #3e016d; border-radius:50%; } 


.divide_form { position:relative; margin-bottom:1.25rem; } 
.divide_form::before { content:''; background:#fff; display:block; height:2px; width:100%; }


.main-btn { width:100%; text-decoration: none; font-size: 1.563rem; color: #fff;font-weight: 800; padding: 0.938rem 1.25rem; text-transform: uppercase; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background-color: #000; border:1px solid #000;  margin-top:0rem;  }

@media screen and (max-width: 1430px){
	.contact_info_wrap { padding-left:15px; }
	.contact_form { padding-right:15px; } 
} 
@media screen and (max-width: 1024px){
	
} 
@media screen and (max-width: 768px){
	.contact_form { padding-right:15px; padding-top:1.875rem; } 
} 
@media screen and (max-width: 640px){
	
} 
@media screen and (max-width: 480px){
	
}