@charset "UTF-8";
/********************************************************


		메인 버전 1.  css 	:: BSJ


********************************************************/




/***********************************************************************
@ 메인
************************************************************************/
#main > section {padding-top:6.25rem;padding-bottom:6.25rem;}
/*
.main__title {margin-bottom:15px;font-weight:600;font-size:20px;color:#333;text-align:center;}
.main__title span {display:block;font-size:14px;color:#b3a586;letter-spacing:0}
.main__desc {margin-bottom:60px;font-size:14px;color:#221916;line-height:25px;text-align:center;}
*/
@media screen and (max-width: 1440px){
	#main > section {padding-top:60px;padding-bottom:60px;}
}
@media screen and (max-width: 1024px){
	#main > section {padding-top:50px;padding-bottom:50px;}
}
@media screen and (max-width: 768px){
	#main > section {padding-top:40px;padding-bottom:40px;}
}
@media screen and (max-width: 540px){
	#main > section {padding-top:25px;padding-bottom:25px;}
}


/***********************************************************************

@ 메인 슬라이드

************************************************************************/


.main_visual_wrap {width:100%; height:40vw; position:relative; } 
.main_visual_wrap:before {width: 100%; content:'';display:block;z-index:-1;position:absolute; }

.main_visual_wrap .wrap {}

.main_visual_slider {width: 100%;}



.main_visual_item {width: 100%; position: relative;overflow: hidden;}
.main_visual_item > figure {position:absolute; top:0;width:100%;  overflow: hidden;  }
.main_visual_item > figure img {display:block; width:100%; }
.main_visual_content { width: 100%;position: absolute;top:50%;transform:translateY(-50%);  -webkit-transition: opacity .3s;transition: opacity .3s;}
.main_visual_content_inner { max-width:1400px; margin:0 auto; }
.main_visual_content_inner > div > * {  /* opacity: 0;  -webkit-transform: translateY(40px);  transform: translateY(40px); */  -webkit-transition: all 1s;  transition: all 1s;}
.main_visual_content_inner b > span,
.main_visual_content_inner p > span, 
.main_visual_wrap .btn_wrap > a {opacity:0;}
.main_visual_item.swiper-slide-active .main_visual_content_inner > div > * { opacity: 1; -webkit-transform: none; transform: none;}
.main_visual_content b {display: block;font-size:5.125rem;font-weight: 700;letter-spacing:0;line-height: 1.3;color: #fff;overflow:hidden;}
.main_visual_content p {padding-top: 0;font-size:3.125rem;line-height: 1.2;font-weight: 600;letter-spacing: -0.05em;color: #fff;overflow:hidden;}
.main_visual_content b > span {display:block;}
.main_visual_content p > span {display:block;}



/* slider more */
.main__more_wrap { overflow:hidden; opacity:0; } 
.main_visual_wrap .main__more { position:relative; display:inline-block; padding-top:3.125rem;overflow:hidden; opacity:0;} 
.main_visual_wrap .main__more:after { content: ""; display: block; width: 105%; height: 2px; background-color: #fff; margin-top:10px; opacity:0.4;} 

.main_visual_wrap .main__more a { position:relative; display:inline-block; font-size:1.25rem; color:#fff; padding-left:1.875rem;  } 
.main_visual_wrap .main__more a:before { content:''; position:absolute; left:0px; top:8px; width:8px; height:8px; border-radius:50%; background:#fff; }
.main_visual_wrap .main__more a:hover:before { animation: bound .4s ease forwards;} 

.main_visual_wrap .main__more a:after { content: ""; display: block; position:absolute; width: 0;left:0px; height: 2px; background-color: #fff; margin-top:10px; transition:all 0.4s ease; } 
.main_visual_wrap .main__more a:hover:after { width:105%; } 




.main_visual_wrap .swiper-pagination-fraction {color:#aaa;}
.main_visual_wrap .cycle_caption {color:#fff;}
.main_visual_wrap .cycle_control {right: 13%;left: auto;bottom: 50px;margin-top:0;top: auto;width: 200px;}
.main_visual_wrap .cycle_btn {opacity:1;}
.main_visual_wrap .cycle_next {right:0;}



.main_visual_wrap .swiper_navigation > button:after {line-height:50px} 


.btn_wrap a { color:#fff; font-weight:500;  } 
.btn_wrap .material-icons { margin-left:10px; font-size:30px; }
.btn_wrap a:hover .arrow_action { animation: arrow_action 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s ;  }
@keyframes arrow_action { 0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(70%);transform:translateX(70%);opacity:0}50.1%{-webkit-transform:translateX(-70%);transform:translateX(-70%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1} }


.main_visual_wrap .swiper-pagination-wrap {  width:100%; max-width:1400px; left:50% !important; transform:translateX(-50%) !important; position: absolute; bottom: 5.625rem; -webkit-transition: all 300ms;transition: all 300ms;z-index:999999;  } 
/*.swiper-pagination { margin:0 auto !important; display:flex; align-items:center;  } */
.main_visual_wrap .swiper-pagination {  position:relative; } 


.main_visual_wrap .page_number { display:inline-block; color:#fff;  font-size:13px; font-weight:400; margin-right:10px; transition:all 0.4s ease; } 
.main_visual_wrap .page_total { display:inline-block; color:#fff;  font-size:13px; font-weight:400; } 
.main_visual_wrap .swiper-pagination-bullet { display:inline-block;  width:4px; height:4px; border-radius:50%; background:#fff; margin-right:15px; opacity:1; vertical-align:middle; transition:all 0.4s ease; } 
.main_visual_wrap .swiper-pagination-bullet-active { width:8px; height:8px; } 


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

}
@media screen and (max-width: 1440px){
	.main_visual_wrap { height:43vw; } 
	.main_visual_content_inner { margin:0 20px; } 
	.main_visual_wrap .swiper-pagination-wrap { max-width:revert; margin:0 20px;  } 
}
@media screen and (max-width: 1200px){
	.main_visual_content b { font-size:4.125rem; }
	.main_visual_content p { font-size:2.125rem; }
	.main_visual_wrap .swiper-pagination-wrap {  bottom: 1.875rem; }
}

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

}


@media screen and (max-width: 768px){
	.main_visual_wrap {  } 

}
@media screen and (max-width: 640px){
	.main_visual_wrap {/*height:100%*/ height:250px; }
	.main_visual_wrap:before {width:100%;}

	.main_visual_item > figure {position:static; width:calc(100%); }
	.main_visual_item > figure img {width: 100%; }

	.main_visual_item > figure {position:absolute; top:0;width:100%; height:100%; overflow: hidden;  }
	.main_visual_item > figure img {display:block; width:100%; height:100%; -o-object-fit: cover;object-fit: cover; }

	.main_visual_content b { font-size:3rem; line-height:1.5;}
	.main_visual_content p { font-size:1.5rem; line-height:1.5; }
	.main_visual_wrap .main__more { padding-top:20px; } 
	.main_visual_wrap .main__more a { font-size:1rem; } 
	.main_visual_wrap .swiper-pagination-wrap { left:revert !important;transform:revert !important; bottom: 1rem; right:10px; width:revert;  }
} 

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


} 






/***********************************************************************

@ 메인 멀티스페이스, 프리프로덕션 

************************************************************************/
#main__intro { letter-spacing:-0.05em; padding-top:3.125rem; padding-bottom:3.125rem; }
#main__intro .thk-row  { margin-right:0px !important; } 
#main__intro .thk-col { margin-right:0px !important; margin-bottom:0px !important; } 
#main__intro .row-md2 .thk-col { width: calc((100% / 2 ) - 0px) !important; } 
#main__intro .thk-inner { padding:1.25rem; line-height:1; } 


.intro_title { display:flex; align-items:center; padding-bottom:2.5rem; } 
.intro_title .icon { margin-right:1.25rem; } 
.intro_title .icon img { max-width:100%; } 
.intro_title .text .eng_tt { font-size:0.938rem; font-weight:500; color:#51afc0; padding-bottom:7px; } 
.intro_title .text .kor_tt { font-size:1.563rem; font-weight:500; color:#333; } 

.intro_desc { color:#333; } 
.intro_desc p { position:relative; padding-bottom:3px; padding-left:15px; line-height:1.7; word-break:break-all; font-size:1rem; } 
.intro_desc p:before { content:''; position:absolute; left:0px; top:13px; width:3px; height:3px; border-radius:50%; background:#e30613; } 


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

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

}

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


	#main__intro .intro_desc p br { display:none; } 
}


@media screen and (max-width: 768px){
	#main__intro .thk-col { margin-bottom:1.25rem !important; } 
	#main__intro .row-md2 .thk-col { width: calc((100% / 1 ) - 0px) !important; } 
	#main__intro .intro_desc p br { display:none; } 
}
@media screen and (max-width: 640px){

} 

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


} 






/***********************************************************************

@ 메인 TEXT ANI 

************************************************************************/

#main__text { overflow:hidden; padding-top:0px !important; padding-bottom:25px !important; } 
#main__text .thk-row  { margin-right:0px !important; } 
#main__text .thk-col { margin-right:0px !important; margin-bottom:0px !important; } 
#main__text .row-md2 .thk-col { width: calc((100% / 2 ) - 0px) !important; } 
#main__text .thk-inner { padding:20px; line-height:1; } 

.main_typo_wrap {position:relative;}
.main_typo_wrap .main_typo { text-align:right; font-size:8.125rem; font-weight:900; font-style:italic; -webkit-text-stroke: 1.5px #e0e0e0; color:transparent; line-height: 1;white-space: nowrap;}





/***********************************************************************

@ 스튜디오 GET 소개 슬라이드 

************************************************************************/
#main__studio { padding-top:0px !important; } 
.studio_img { position:relative; max-height:690px; min-height:690px;  } 
.main_studio_wrap { position:relative; } 


.studio_slider_pager { position:absolute; bottom:130px; z-index:99; } 

.studio_slider_pager .text { padding-top:10px; font-size:20px; color:#e0e0e0; font-weight:800; } 
.studio_slider_pager2 { padding-top:20px; font-size:10px; } 
.studio_slider_pager .thumb { overflow:hidden; } 
.studio_slider_pager a img { max-width:240px; transition:all 0.4s ease; } 


.main_studio_slider { z-index:1; } 
.main_studio_wrap .swiper_navigation { position:absolute; right:0px;top:70%; z-index:99; }   
.main_studio_wrap .swiper-pagination { display:inline-block; position:relative; } 
.main_studio_wrap .slider-text { display:inline-block; padding-left:10px; }  

.main_studio_wrap .swiper-pagination-wrap { margin:0 auto; } 
.main_studio_wrap .swiper-pagination-fraction { width:revert !important; bottom:revert !important;  } 

.swiper_progress_hidden_space { position:relative; display:inline-block; width:20px; padding-right:15px; } 
.swiper_progress_hidden_space:before { content:''; position:absolute; width:15px; height:1px;bottom:3px; background:#ddd; } 



.studio_intro { position:relative; top:-50px; left:45%; opacity:0; z-index:1;  }
.studio_intro .title { font-size:3.75rem; font-weight:800; color:#fff; line-height:1;}
.studio_intro .subtitle { font-size:3.75rem; font-weight:800; color:#111; line-height:1;}
.studio_intro .summary { display:none; padding-top: 2.5rem; font-size:1.25rem; color:#333;  } 
.studio_intro .tag { padding-top:1.25rem; font-size:1.063rem; color:#51afc0;  } 


.swiper-button-prev-cus, .swiper-button-next-cus { background:transparent; } 
.swiper-button-prev-cus .arrow-icon { position:absolute; top:47%; left:50%;  transform:translate(-50%,-50%) rotate(180deg); } 


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

}
@media screen and (max-width: 1440px){
	.studio_img { min-height:revert;  } 
}
@media screen and (max-width: 1200px){
	.studio_intro { left:35%;}
}

@media screen and (max-width: 1024px){
	.studio_slider_pager { display:none; } 
	.studio_intro { top:-2.5rem;  left:revert !important;}

	.studio_intro .title { font-size:3rem; }
	.studio_intro .subtitle { font-size:3rem; }
	.main__more {  padding-top:2.5rem; } 
}


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

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

} 

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

	.studio_intro .title { font-size:2.7rem; }
	.studio_intro .subtitle { font-size:2.7rem; }
	#main__studio .main__more {  padding-top:1.5rem;  } 
	#main__studio .main__more a { font-size:1.15rem; } 
	#main__studio .main__more a:before {  top:0.4rem;  }
} 






/***********************************************************************

@ 배너 3 개 

************************************************************************/
#main__banner { overflow:hidden; padding-top:0px !important; padding-bottom:0px !important;  }

#main__banner .thk-inner { padding:0px; line-height:1; } 

.banner_full { position:relative; min-height:36.563rem;display:flex; justify-content:center; align-items:center;  background:url('/common/theme/layout/images/main/banner_bg1.jpg') no-repeat; background-size:cover; } 
.banner_full .text { position:relative; top:-3.125rem; text-align:center;  } 
.banner_full .text_1 { font-size:3.25rem; color:#fff; font-weight:700; } 
.banner_full .text_2 { font-size:3.25rem; color:#51afc0; font-weight:700; font-style:italic;  } 
.banner_full .text_3 { font-size:1rem; color:#fff; padding-top:1.25rem;  } 

.banner_list { position:relative; top:-155px; } 

.banner_list .thk-inner { overflow:hidden; } 

/*
.banner_list .list { display:flex; justify-content:center; align-items:center; min-height:290px; overflow:hidden; transition:all 0.3s ease; } 
.banner_list .list1 { background:url('/common/theme/layout/images/main/banner01.jpg') no-repeat; } 
.banner_list .list2 { background:url('/common/theme/layout/images/main/banner02.jpg') no-repeat; } 
.banner_list .list3 { background:url('/common/theme/layout/images/main/banner03.jpg') no-repeat; } 
*/

#main__banner .list_bg { position:relative;  overflow:hidden; } 
#main__banner .list_img { width:100%; padding-bottom: 63.04%;height:0;  position: relative;  } 
#main__banner .list_img img {display: block;width: 100%;position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%); height:auto; -o-object-fit: cover;object-fit: cover;}

#main__banner .list_img:hover { -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 
#main__banner a:hover .list_img { -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 
#main__banner .text-wrap { position:absolute;  top: 50%;left: 50%; transform:translate(-50%,-50%);   } 

#main__banner .text-wrap .material-icons { display:block; text-align:center; color:#fff; margin-bottom:10px; }  
#main__banner .text-wrap .text { font-size:1.375rem; color:#fff; font-weight:500; } 
@media screen and (max-width: 1800px){

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

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

}

@media screen and (max-width: 1024px){
	#main__banner .thk-col:last-of-type .list_img {  padding-bottom:35%; } 
}


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

}
@media screen and (max-width: 640px){
	#main__banner .thk-col .list_img { padding-bottom:56.25% !important;   } 
} 

@media screen and (max-width: 540px){
	.banner_full { position:relative; min-height:30rem;}
	.banner_full .text_1 { font-size:2.5rem; } 
	.banner_full .text_2 { font-size:2.5rem; } 
} 




/***********************************************************************

@ 레퍼런스 

************************************************************************/
#main__reference { overflow:hidden; padding-top:0px !important; margin-top:-55px;  }
#main__reference .main_title { text-align:center; font-size:3.25rem; font-weight:800; color:#111; } 
#main__reference .maxWidth { text-align:center; } 

#main__reference .thk-row  { margin-right:-3.438rem !important; } 
#main__reference .thk-col { margin-right:3.438rem !important; } 
#main__reference .thk-col:last-of-type { margin-right:0px !important; } 

#main__reference .row-md4 .thk-col { width: calc((100% / 4 ) - 3.438rem) !important; } 

/*#main__reference .thk-inner { padding:20px; line-height:1; } */


#main__reference .ref_list { padding-top:3.75rem; text-align:left; } 
#main__reference .ref_list .thk-inner { padding:0px; line-height:1; overflow:hidden; } 


#main__reference .list_bg { position:relative;  overflow:hidden; } 
#main__reference .list_img { width:100%; padding-bottom: 68.125%;height:0;  position: relative;  } 
#main__reference .list_img img {display: block;width: 100%;position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%); height:auto; -o-object-fit: cover;object-fit: cover;}

#main__reference .list_img:hover { -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 
#main__reference a:hover .list_img { -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 


#main__reference .date { padding-top:1.563rem; font-size:0.938rem; font-weight:400; color:#333; }
#main__reference .subject { padding-top:1.875rem; font-size:1.25rem; color:#333; } 
#main__reference .summ { padding-top:1.25rem; font-size:1rem; font-weight:300; color:#666; }



#main__reference .more_view { position:relative; display:inline-block; padding-top:3.125rem; } 
#main__reference .more_view:after { content: ""; display: block; width: 110%; height: 2px; background-color: #d6d6d6; margin-top:10px; } 

#main__reference .more_view a { position:relative; display:inline-block; font-size:1.25rem; color:#333; padding-left:30px; transition:all 0.4s ease;} 
#main__reference .more_view a:hover { color:#51afc0; } 
#main__reference .more_view a:before { content:''; position:absolute; left:0px; top:8px; width:8px; height:8px; border-radius:50%; background:#51afc0; }
#main__reference .more_view a:hover:before { animation: bound .4s ease forwards;} 

#main__reference .more_view a:after { content: ""; display: block; position:absolute; width: 0;left:0px; height: 2px; background-color: #51afc0; margin-top:10px; transition:all 0.4s ease; } 
#main__reference .more_view a:hover:after { width:110%; } 


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

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

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

	#main__reference .thk-row  { margin-right:-2rem !important; } 
	#main__reference .thk-col { margin-right:2rem !important; margin-bottom:2rem !important } 

	#main__reference .row-md4 .thk-col { width: calc((100% / 2 ) - 2rem) !important; } 


}

@media screen and (max-width: 768px){
	
}
@media screen and (max-width: 640px){
	#main__reference .row-md4 .thk-col { width: calc((100% / 1 ) - 2rem) !important; } 
	#main__reference .thk-col .list_img { padding-bottom:56.25% !important;   } 
}

@media screen and (max-width: 540px){
	#main__reference .more_view { padding-top:1.5rem; } 
	#main__reference .main_title { font-size:2.5rem; } 
	#main__reference .more_view a { font-size:1.15rem; } 
	#main__reference .more_view a:before {  top:0.4rem;  }
}
@media screen and (max-width: 414px){

}





/***********************************************************************

@ CONTACT US 

************************************************************************/

#main__contact { overflow:hidden; padding:0px !important; display:flex; justify-content:center; align-items:center; max-height:30.313rem; min-height:30.313rem; background:url('/common/theme/layout/images/main/contact_bg.jpg') no-repeat; background-size:cover; }
#main__contact .maxWidth { text-align:center; } 
#main__contact .main_title { font-size:3.25rem; color:#fff; font-weight:800; }
#main__contact .main_summary { font-size:1rem; color:#fff; font-weight:300; padding-top:1.563rem; } 
#main__contact .more_view { position:relative; display:inline-block; padding-top:3.75rem; } 
#main__contact .more_view:after { content: ""; display: block; width: 110%; height: 2px; background-color: #fff; margin-top:10px;opacity:0.5; } 

#main__contact .more_view a { position:relative; display:inline-block; font-size:1.25rem; color:#fff; padding-left:30px;  } 
#main__contact .more_view a:before { content:''; position:absolute; left:0px; top:8px; width:8px; height:8px; border-radius:50%; background:#fff; }
#main__contact .more_view a:hover:before { animation: bound .4s ease forwards;} 

#main__contact .more_view a:after { content: ""; display: block; position:absolute; width: 0;left:0px; height: 2px; background-color: #fff; margin-top:10px; transition:all 0.4s ease; } 
#main__contact .more_view a:hover:after { width:110%; } 



@media screen and (max-width: 540px){
	#main__contact .main_title { font-size:2.5rem; } 


	#main__contact .more_view a { font-size:1.15rem; } 
	#main__contact .more_view a:before {  top:0.4rem;  }
}









/***********************************************************************

@ 그 외 MORE, ANI  

************************************************************************/

.main__more { position:relative; display:inline-block; padding-top:3.125rem; } 
.main__more:after { content: ""; display: block; width: 102%; height: 2px; background-color: #d6d6d6; margin-top:0.625rem; } 

.main__more a { position:relative; display:inline-block; font-size:1.25rem; color:#333; padding-left:1.875rem; transition:all 0.4s ease;  } 
.main__more a:before { content:''; position:absolute; left:0px; top:8px; width:8px; height:8px; border-radius:50%; background:#51afc0; }
.main__more a:hover:before { animation: bound .4s ease forwards;}	/*forwards*/

.main__more a:hover { color:#51afc0; } 
.main__more a:after { content: ""; display: block; position:absolute; width: 0;left:0px; height: 2px; background-color: #51afc0; margin-top:0.625rem; transition:all 0.4s ease; } 
.main__more a:hover:after { width:102%; } 


@keyframes bound {
    0% {
        transform:translateY(0) 
    }
    33% {
		transform:translateY(100%) 
    }
    66% {
		transform:translateY(-50%) 
    }
    to {
		transform:translateY(0) 
    }
}

@-webkit-keyframes pulse {
  
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(81, 175, 192, .85);
    box-shadow: 0 0 0 0 rgba(81, 175, 192, .85);
  }
  
  70% {
    -webkit-box-shadow: 0 0 0 2em rgba(81, 175, 192, 0);
    box-shadow: 0 0 0 2em rgba(81, 175, 192, 0);
  }
  
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(81, 175, 192, 0);
    box-shadow: 0 0 0 0 rgba(81, 175, 192, 0);
  }

}



/* 원 모양 ANI */
.circle-wrap { position:relative; width: 45px; height: 45px; } 
.circle-wrap:before { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; top: 2px; right: 2px; bottom: 2px;  left: 2px; border-radius: 50%;  border: 1px solid #ddd; opacity:1  }
.circle { position: absolute;top: 0;right: 0;bottom: 0;left: 0;fill:none;stroke: #999;stroke-width: 1;stroke-dasharray: 200px 200px;stroke-dashoffset: 200px;transform-origin: center;transform: rotate(-90deg);animation: c-arw-btn-circle 2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s forwards; }
.circle-wrap:hover .circle { opacity:1; animation: c-arw-btn-circle-ov 2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s forwards; }

@keyframes c-arw-btn-circle{ 0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);stroke-dashoffset:-200px} }
@keyframes c-arw-btn-circle-ov{  0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);stroke-dashoffset:200px}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);stroke-dashoffset:0} } 



/* 화살표 ANI */
.circle-wrap .arrow-icon { position:absolute; top:55%; left:50%; transform:translate(-50%,-50%);  } /*top: calc(50% - 10px); left: calc(50% - 10px );  */
.circle-wrap .arrow-icon img {  } 
.circle-wrap .arrow-icon.prev { top:12px; left:15px; transform:rotate(-180deg); } 
.circle-wrap:hover .arrow-icon img { animation: c-arw-btn-arw 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s ;  }
.circle-wrap:hover .text_btn { margin-left:5px; color:#000 !important; } 

@keyframes c-arw-btn-arw { 0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}50%{-webkit-transform:translateX(70%);transform:translateX(70%);opacity:0}50.1%{-webkit-transform:translateX(-70%);transform:translateX(-70%);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1} }



@media screen and (max-width: 1024px){
	.circle-wrap { width:45px; height: 45px; } 
}




.text_line { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.4em; height:1.4em; } 
.text_line1 {  -webkit-line-clamp : 1; } 
.text_line2 {  -webkit-line-clamp : 2;  line-height:1.4em; height:2.8em; } 
.text_line3 {  -webkit-line-clamp : 3;  line-height:1.2em; height:3.6em; } 



.text-fadeIn[data-splitting] .word {
    opacity: 0;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-transition-delay: calc(0.05s * var(--word-index));
    -o-transition-delay: calc(0.05s * var(--word-index));
    transition-delay: calc(0.05s * var(--word-index));
}

.text-fadeIn[data-splitting].is-active .word,
[data-splitting].animate .word {
    opacity: 1;
}

.text-fadeInUp[data-splitting] .word {
    color: transparent;
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
}

.text-fadeInUp[data-splitting] .word:after {
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-transition-delay: calc(0.05s * var(--word-index));
    -o-transition-delay: calc(0.05s * var(--word-index));
    transition-delay: calc(0.05s * var(--word-index));
}

.text-fadeInUp[data-splitting].is-active .word:after,
[data-splitting].animate .word:after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.text-fadeInDown[data-splitting] .word {
    color: transparent;
    overflow: hidden;
    position: relative;
    line-height: 1.2em;
}

.text-fadeInDown[data-splitting] .word:after {
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-transition-delay: calc(0.05s * var(--word-index));
    -o-transition-delay: calc(0.05s * var(--word-index));
    transition-delay: calc(0.05s * var(--word-index));
}

.text-fadeInDown[data-splitting].is-active .word:after,
[data-splitting].animate .word:after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}