/********* 메인 - 비주얼 *********/
#main_visual_wrap {margin: 0 40px; position: relative;}
#main_visual_wrap div, #main_visual_wrap a {font-family: "Averia Serif Libre", serif;}
.main_visual_slider {position: relative; overflow: hidden;height: 850px;}
.main_visual_slider .visual_slide {}
.main_visual_slider .visual_box {width: 100%; height: 100%; overflow: hidden;}
.main_visual_slider .visual_bg {width:100%;height:100%; transform: scale(1.2,1.2); backface-visibility:hidden; transition:transform 5000ms ease-in-out; display: inline-block;}
.main_visual_slider .visual_bg1 {background: url('../images/main_visual_bg1.jpg') no-repeat center / cover;}
.main_visual_slider .visual_bg2 {background: url('../images/main_visual_bg2.jpg') no-repeat center / cover;}
.main_visual_slider .visual_bg3 {background: url('../images/main_visual_bg3.jpg') no-repeat center / cover;}
/* 메인 비주얼 :: 컨트롤러 */
.main_visual_control .swiper-pagination.visual_pagination {left: 50%; bottom: 100px; transform: translateX(-50%); width: auto; color: #fff;}
.main_visual_control .swiper-pagination .swiper-pagination-bullet {background: #fff; opacity: 1; display: block; margin: 22px 0 !important; width: 6px; height: 6px; position: relative;}
.main_visual_control .swiper-pagination .swiper-pagination-bullet-active {}
.main_visual_control .swiper-pagination .swiper-pagination-bullet-active::after {content: ''; display: inline-block; position: absolute; background: rgb(255, 255, 255, 0.15); width: 20px; height: 20px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main_visual_control .bottom {display: flex; position: absolute; left: 250px; bottom: 18px; z-index: 1;}
.main_visual_control .bottom .numbering {text-align: center; font-size: 20px; font-weight: 400; line-height: 30px; color: #fff; display: flex; align-items: center;}
.main_visual_control .bottom .numbering .divider {width: 28px; height: 1px; background: #fff; margin: 0 22px;}
/* 메인 비주얼 :: active효과 */
.main_visual_slider .visual_slide.swiper-slide-active .visual_bg {-webkit-transform: scale(1.0,1.0) rotate(0.002deg); transform: scale(1.0,1.0) rotate(0.002deg);}
.main_visual_slider .visual_slide.swiper-slide-active .visual_txt .f20 .t_inner, .main_visual_slider .visual_slide.swiper-slide-active .visual_txt .title .f48 .t_inner {display: inline-block; -webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main_visual_slider .visual_slide.swiper-slide-active .visual_txt .f20 .t_inner {-webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main_visual_slider .visual_slide.swiper-slide-active .visual_txt .title .f48:nth-child(1) .t_inner{-webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main_visual_slider .visual_slide.swiper-slide-active .visual_txt .title .f48:nth-child(2) .t_inner{-webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main_visual_slider .visual_slide.swiper-slide-active .visual_txt .title .f48:nth-child(3) .t_inner{-webkit-animation-delay:0.7s; animation-delay:0.7s;}
@keyframes text-active-animation {
	from {opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
	to {opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0);}
}
/* 메인 비주얼 :: Drop Menu */
.drop_wrap {position: absolute; bottom: 0; left: 0; z-index: 9; width: 198px;}
.drop_wrap .drop_btn {display: flex;  align-items: center; height: 62px; background: #fff; padding: 10px 30px; cursor: pointer;}
.drop_wrap .drop_btn .f20 {}
.drop_wrap .drop_btn .arrow {margin-left: 15px; transition: all 0.3s;}
.drop_wrap .drop_btn .arrow i {font-weight: 700;}
.drop_wrap .drop_menu {}
.drop_wrap .drop_menu ul {}
.drop_wrap .drop_menu ul li { border-bottom: 1px solid #e8e8e8;}
.drop_wrap .drop_menu ul li a {color: #1a1a1a; display: flex; align-items: center; height: 62px; background: #fff; padding: 10px 30px;}
.drop_wrap .drop_menu ul li a:hover {color: #888;}



/********* 메인 - ABOUT *********/
.about_wrap {padding: 195px 0 100px; display: flex; align-items: flex-start; gap: 168px;}
.about_wrap .video {position: relative; width: 60%; cursor: pointer;}
.about_wrap .video .thum {overflow: hidden; display: flex;}
.about_wrap .video .thum img {width: 100%; transition: all 0.5s ease-in-out;}
.about_wrap .video .play_btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgb(0, 0, 0, 0.3); transition: all 0.3s;}
.about_wrap .video .play_btn img {width: 16px; display: flex;}
.about_wrap .video:hover .thum img {transform: scale(1.1); transition: all 0.8s ease-in-out;}
.about_wrap .video:hover .play_btn {transform: translate(-50%, -50%) scale(0.9); transition: all 0.5s;}
.about_wrap .txt_wrap {width: 40%;}
.about_wrap .txt_wrap .f18 {}
.about_wrap .txt_wrap .f16 {margin-top: 5vw;}
.about_wrap .txt_wrap .f16 span {display: block; margin-top: 25px;}
.about_wrap .txt_wrap .f16 span:nth-child(1) {margin-top: 0;}
.about_wrap .txt_wrap .paragraph {display: flex; gap: 5px;}
.animation_txt {margin-top: 10px; margin-right: 20px;}
.animation_txt span {display: inline-block; font-family: "Averia Serif Libre", serif;}
.animation_txt .paragraph .letter {transition: transform 3s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 3s ease, opacity 3s ease; opacity: 0; filter: blur(3px); letter-spacing: -10px; font-size: 104px; line-height: 112px; font-weight: 300;}
.animation_txt .paragraph1 .letter:nth-of-type(1) {filter: blur(4px); transform: translateY(32px);transition-duration: 2.4s; font-style: italic; font-weight: 700;}
.animation_txt .paragraph1 .letter:nth-of-type(2) {filter: blur(4px); transform: translateY(20px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph1 .letter:nth-of-type(3) {filter: blur(4px); transform: translateY(30px); transition-duration: 1.6666666667s;}
.animation_txt .paragraph1 .letter:nth-of-type(4) {filter: blur(6px); transform: translateY(58px); transition-duration: 1.6216216216s; margin-right: 1vw;}
.animation_txt .paragraph1 .letter:nth-of-type(5) {filter: blur(4px); transform: translateY(28px); transition-duration: 1.5s;}
.animation_txt .paragraph1 .letter:nth-of-type(6) {filter: blur(4px); transform: translateY(43px); transition-duration: 1.7142857143s; font-weight: 700;}
.animation_txt .paragraph1 .letter:nth-of-type(7) {filter: blur(4px); transform: translateY(32px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph1 .letter:nth-of-type(8) {filter: blur(4px); transform: translateY(40px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph2 .letter:nth-of-type(1) {filter: blur(4px); transform: translateY(12px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph2 .letter:nth-of-type(2) {filter: blur(4px); transform: translateY(32px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph2 .letter:nth-of-type(3) {filter: blur(4px); transform: translateY(10px); transition-duration: 1.8181818182s; font-weight: 400;}
.animation_txt .paragraph2 .letter:nth-of-type(4) {filter: blur(4px); transform: translateY(10px); transition-duration: 1.8181818182s;}
.animation_txt .paragraph .letter.loaded {opacity: 1; transform: translateY(0); filter: blur(0);}
/********* 메인 - ABOUT 끝 *********/



/********* 메인 - PROJECT *********/
.project_wrap {}
.project_wrap .title {text-align: center; margin-bottom: 100px; font-family: "Averia Serif Libre"; font-weight: 700;}
.project_wrap .title.animate {animation: blurMe 1.4s ease-in-out forwards; opacity: 0;}
@keyframes blurMe {
	0% {
		filter: blur(10px);
		opacity: 0;
	}
	100% {
		filter: blur(0px);
		opacity: 1;
	}
}
.project_wrap .masonry_grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1px; gap: 80px 10px;} 
.project_wrap .masonry_grid .item {display: grid; grid-row-end: span 1; opacity: 0; transition: opacity 1s ease-in-out, transform 1s ease-in-out; transform: translateY(20px);}
.project_wrap .masonry_grid .item.visible {opacity: 1; transform: translateY(0);}
.project_wrap .masonry_grid .item:hover {opacity: 0.5; transition: all 0.8s;}
.project_wrap .masonry_grid .item .image {display: flex;}
.project_wrap .masonry_grid .item .image img {width: 100%; display: block;}
.project_wrap .masonry_grid .item .txt {margin-top: 20px;}
.project_wrap .masonry_grid .item .txt .f24 {font-weight: 700;}
.project_wrap .masonry_grid .item .txt .info {margin-top: 5px;}
.project_wrap .masonry_grid .item .txt .f14 {color: #464646; font-weight: 600;}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.project_btn {display: flex; justify-content: center;}
.project_btn .more_btn {background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 1px #dadada; position: relative; vertical-align: middle; display: flex; justify-content: center; align-items: center; width: 280px; height: 78px;}
.project_btn .more_btn .f20 {font-weight: 300;}
.project_btn .more_btn::before, .project_btn .more_btn::after {box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%;}
.project_btn .more_btn {transition: color 0.25s; margin: 65px 0 130px;}
.project_btn .more_btn::before, .project_btn .more_btn::after {border: 1px solid transparent; width: 0; height: 0;}
.project_btn .more_btn::before {top: 0; left: 0;}
.project_btn .more_btn::after {bottom: 0; right: 0;}
.project_btn .more_btn:hover {color: #1a1a1a;}
.project_btn .more_btn:hover::before, .project_btn .more_btn:hover::after {width: 100%; height: 100%;}
.project_btn .more_btn:hover::before {border-top-color: #1a1a1a; border-right-color: #1a1a1a; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.project_btn .more_btn:hover::after {border-bottom-color: #1a1a1a; border-left-color: #1a1a1a; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}
/********* 메인 - PROJECT 끝 *********/










@media (max-width: 1750px) {
	.main_visual_slider {height: 46vw; min-height: 350px;}
	.about_wrap {gap: 10vw; padding: 10vw 0 7vw;}

}



@media (max-width: 1600px) {
	#main_visual_wrap {margin: 0 16px;}
	.about_wrap {gap: 8vw;}
	.main_visual_control .bottom .numbering {font-size: 18px;}
	.animation_txt .paragraph .letter {font-size: 6vw; line-height: 6.5vw;}
	.project_wrap .masonry_grid .item .image img{height: fit-content;}
}



@media (max-width: 1440px) { 
	.about_wrap .video .play_btn {width: 80px; height: 80px;}
	.about_wrap .txt_wrap .f16 {margin-top: 3vw;}
	.project_wrap .title {margin-bottom: 4vw;}
	.project_btn .more_btn {width: 260px; height: 70px; margin: 60px 0 100px;}

	
}



@media (max-width: 1200px) { 
	.main_visual_control .bottom {left: 220px;}
	.drop_wrap {width: 180px;}
	.about_wrap {gap: 6vw;}
	.about_wrap .txt_wrap .paragraph {gap: 7px;}
	.about_wrap .video .thum img{height:auto;}
}



@media (max-width: 1024px) { 
	.main_visual_control .bottom {left: 200px; bottom: 13px;}
	.main_visual_control .bottom .numbering {font-size: 16px;}
	.main_visual_control .bottom .numbering .divider {margin: 0 15px;}
	.drop_wrap {width: 170px;}
	.drop_wrap .drop_btn {height: 56px;}
	.drop_wrap .drop_menu ul li a{height: 56px;}
	.about_wrap {padding: 80px 0;}
	.about_wrap .video {width: 50%;}
	.about_wrap .txt_wrap{width: 50%;}
	.about_wrap .video .play_btn {width: 60px; height: 60px;}
	.about_wrap .txt_wrap .f16 span {margin-top: 20px;}
	.project_wrap .masonry_grid {gap: 60px 10px;}



}



@media (max-width: 960px) { 


}




@media (max-width: 768px) {
	.main_visual_control .bottom {left: auto; right: 20px;}
	.main_visual_control .bottom .numbering {font-size: 14px;}
	.about_wrap {flex-flow: column; gap: 40px; padding: 60px 0;}
	.about_wrap .video {width: 100%;}
	.about_wrap .txt_wrap{width: 100%;}
	.about_wrap .txt_wrap .paragraph {gap: 9px;}
	.about_wrap .txt_wrap .f16 {margin-top: 20px;}
	.animation_txt .paragraph .letter {font-size: 44px; line-height: 52px;}
	.project_wrap .title {margin-bottom: 30px;}
	.project_wrap .masonry_grid .item .txt {margin-top: 15px;}
	.project_wrap .masonry_grid .item .txt .f24 {font-size: 16px; line-height: 24px;}
	.project_wrap .masonry_grid .item .txt .info {margin-top: 2px;}
	.project_wrap .masonry_grid {gap: 40px 10px;}
	.project_btn .more_btn {width: 240px; height: 60px; margin: 50px 0 80px;}


}




@media (max-width: 640px) {
	.project_wrap .masonry_grid {grid-template-columns: repeat(2, 1fr);}


}



@media (max-width: 540px) {
	.drop_wrap{width: 150px;}
	.drop_wrap .drop_btn, .drop_wrap .drop_menu ul li a {padding: 10px 20px;}
	.main_visual_control .bottom .numbering .divider {width: 20px; margin: 0 10px;}


}



@media (max-width: 480px) {
	.animation_txt .paragraph .letter {font-size: 40px; line-height: 48px;}

}



@media (max-width: 375px) {

}