@charset "utf-8";

.main_swiper_01 .swiper-slide p.t1 span{
	-webkit-transition: all 1s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-transition: all 1s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition: all 1s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-transition: all 1s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 1s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.main_swiper_01 .swiper-slide p.t2 span{
	-webkit-transition: all 1s 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-transition: all 1s 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition: all 1s 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-transition: all 1s 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 1s 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.main_swiper_01 .swiper-slide p.t3 span{
	-webkit-transition: all 1s 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-transition: all 1s 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition: all 1s 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-transition: all 1s 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 1s 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


.main_project_wrap ul a b, .main_project_wrap ul a b span, .main_project_wrap ul a img{
	-webkit-transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-ms-transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


.main_inner{max-width: 1160px; margin: 0 auto;}

/* 메인 */
.main_wrap{width: 100%; padding-top: 90px;}

/* 메인 공통 */
.section{}
.section.sec_inner{width: 100%; max-width: 1160px; margin: 0 auto;}

.main_inner{width: 100%; max-width: 1160px; margin: 0 auto;}

/* 메인 sec1 */
.section.sec1{width: 100%; margin: 0 auto;}
.main_swiper_01 .swiper-slide{height: calc(100vh - 90px); overflow: hidden;}
.main_swiper_01 .img_bg{width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.main_swiper_01 .ss_01 .img_bg{background-image: url("../imgs/main/visual_01.jpg");}
.main_swiper_01 .ss_02 .img_bg{background-image: url("../imgs/main/visual_02.jpg");}
.main_swiper_01 .ss_03 .img_bg{background-image: url("../imgs/main/visual_03.jpg");}
.main_swiper_01 .ss_04 .img_bg{background-image: url("../imgs/main/visual_04.jpg");}
.main_swiper_01 .ss_05 .img_bg{background-image: url("../imgs/main/visual_05.jpg");}
.main_swiper_01 .ss_06 .img_bg{background-image: url("../imgs/main/visual_06.jpg");}
.main_swiper_01 .ss_07 .img_bg{background-image: url("../imgs/main/visual_07.jpg");}
.main_swiper_01 .img_bg a{display: block; width: 100%; height: 100%;}
.main_swiper_01 .text_area{position: absolute; right: 50%; bottom: 60px; transform: translateX(580px); z-index: 2;}
.main_swiper_01 .text_area p{overflow: hidden; color: #fff; font-size: 19px; font-weight: 400; text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}
.main_swiper_01 .text_area p span{font-size: 25px; font-family: "Roboto", sans-serif;}


.main_swiper_01 .swiper-slide .img_bg{position: absolute; top: 0; left:0; right:0; bottom:0; width: 100%; height: 100%; z-index: -1;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	opacity: 1;
	-ms-transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	transform-origin:center;
	-webkit-transition:transform 4s ease-out, opacity 1s ease 0.3s;
	transition:transform 4s ease-out, opacity 1s ease 0.3s;
}

.main_swiper_01 .swiper-slide.swiper-slide-active .img_bg{
	opacity: 1;
	-ms-transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	transform-origin:center;
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}


/* 메인 sec1 swiper pagination */
.main_swiper_01 .swiper-slide.swiper-slide-active p span{transform: translateY(0);}
.main_swiper_01 .swiper-pagination{position: absolute; bottom: 35px; display: flex; width: auto; height: 12px; left: 50%; transform: translateX(-50%); z-index: 2;}
.main_swiper_01 .swiper-pagination span:nth-child(1){margin-left: 0;}
.main_swiper_01 .swiper-pagination .swiper-pagination-bullet{display: block; width: 12px; height: 12px; background-color: transparent; border: 1px solid #fff; opacity: 1; margin: 0 5px;}
.main_swiper_01 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #fff;}
/* 메인 sec1 swiper button */
.main_swiper_01 .swiper-button-next, .main_swiper_01 .swiper-button-prev{width: 14px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: cover; top: 50%; margin-top: 0;}
.main_swiper_01 .swiper-button-next:after, .main_swiper_01 .swiper-button-prev:after{content: ''; display: none;}
.main_swiper_01 .swiper-button-prev{background-image: url("../imgs/icon/arrow_prev.svg"); left: 50%; right: inherit; transform: translate(-580px, -50%);}
.main_swiper_01 .swiper-button-next{background-image: url("../imgs/icon/arrow_next.svg"); left: inherit; right: 50%; transform: translate(580px, -50%);}
/* 메인 sec1 swiper progress */
.main_swiper_01 .autoplay-progress {position: absolute; left: 50%; transform: translateX(-580px); bottom: 17px; z-index: 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 300; color: #fff;}
.main_swiper_01 .autoplay-progress svg {--progress: 0; position: absolute; left: 0; top: 0px; z-index: 2; width: 100%; height: 100%; stroke-width: 2px; stroke: #fff; fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg);}


/* 메인 sec2 */
.section.sec2{}
.main_banner{width: 100%; max-width: 1920px; margin: 25px auto;}
.main_banner ul{display: flex; width: 100%;}
.main_banner ul li{position: relative; margin: 0 1.2%; height: 500px;}
.main_banner ul li:nth-child(1){width: 73%; background: url("../imgs/main/sec2_bg.png") no-repeat left bottom #e9e7e7;}
.main_banner ul li:nth-child(1) div{width: 100%; height: 100%; padding-left: 25.3%; padding-right: 18%;}
.main_banner ul li:nth-child(1) div a{display: flex; flex-wrap: wrap; width: 100%; height: 100%; align-items: center; align-content: center;}
.main_banner ul li:nth-child(1) div a span.main_banner_text{display: block; width: 100%; word-break: keep-all; padding-left: 15px;}
.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(1){font-family: "Roboto", sans-serif; font-size: 43px; line-height: 1.2; font-weight: 700;}
.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(2){font-size: 19px; line-height: 1.3; padding-top: 50px; margin-top: 50px; border-top: 1px solid #999;}

.main_banner ul li:nth-child(2){width: 23.4%; margin-left: 0; background: url("../imgs/main/sec2_img.jpg") no-repeat center; background-size: cover;}
.main_banner ul li:nth-child(2) a{display: block; width: 100%; height: 100%;}

.main_banner .main_banner_title{position: absolute; display: inline-block; z-index: 1; right: 70px; bottom: 30px; font-family: "Roboto", sans-serif; font-size: 27px; font-weight: 700;}
.main_banner ul li:nth-child(2) .main_banner_title{left: 40px; right: inherit;}
.main_banner a:hover .main_banner_title{text-decoration: underline;}


/* 메인 sec3 */
.section.sec3{padding-top: 150px; margin-bottom: 150px;}
.main_project_title{font-family: "Roboto", sans-serif; font-size: 27px; padding-left: 20px; margin-bottom: 50px;}
.main_project_wrap ul{display: flex; flex-wrap: wrap;}
.main_project_wrap ul li{width: 48%; margin-left: 4%;}
.main_project_wrap ul li:nth-child(2n+1){margin-left: 0;}
.main_project_wrap ul li:nth-child(n+3){margin-top: 50px;}
.main_project_wrap ul a{position: relative; display: block; width: 100%; height: 100%; overflow: hidden;}
.main_project_wrap ul a img{width: 100%; transform: scale(1.01);}
.main_project_wrap ul b{position: absolute; left: 0; top: 0; z-index: 1; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.4); opacity: 0; text-align: center;}
.main_project_wrap ul b span{display: block; font-size: 27px; line-height: 1.5; color: #fff; transform: translateY(20px);}
.main_project_wrap ul a:hover img{width: 100%; transform: scale(1.1);}
.main_project_wrap ul a:hover b{opacity: 1;}
.main_project_wrap ul a:hover b span{transform: translateY(0);}


.main_pc_only_img{display: inline-block !important;}
.main_mobile_only_img{display: none !important;}


@media (max-width:1800px){
	.main_banner ul li:nth-child(1) div{padding-left: 22.5%;}
}

@media (max-width:1700px){
	.main_banner ul li:nth-child(1) div{padding-left: 19.7%;}
}

@media (max-width:1600px){
	.main_banner ul li:nth-child(1) div{padding-left: 16.9%;}
}

@media (max-width:1500px){
	.main_banner ul li:nth-child(1) div{padding-left: 14.1%;}
}

@media (max-width:1400px){
	.main_banner ul li:nth-child(1) div{padding-left: 11.3%;}
}

@media (max-width:1300px){
	.main_banner ul li:nth-child(1) div{padding-left: 6%;}
}



@media (max-width:1200px){	
	/* 메인 공통 */
	.main_inner{padding: 0 3%;}
	.section.sec_inner{padding-left: 3%; padding-right: 3%;}
	
	/* 메인 sec1 */
	.main_swiper_01 .text_area{right: 3%; transform: translateX(0);}
	/* 메인 sec1 swiper pagination */
	.main_swiper_01 .swiper-pagination{height: 10px;}
	.main_swiper_01 .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 4px;}
	/* 메인 sec1 swiper button */
	.main_swiper_01 .swiper-button-prev{left: 3%; transform: translate(0, -50%);}
	.main_swiper_01 .swiper-button-next{right: 3%; transform: translate(0, -50%);}
	/* 메인 sec1 swiper progress */
	.main_swiper_01 .autoplay-progress {left: 3%; transform: translateX(0); width: 40px; height: 40px; font-size: 13px;}
	
		
	/* 메인 sec2 */
	.main_banner ul li:nth-child(1) div{padding-left: 3%; padding-right: 10%;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(1){font-size: 37px; line-height: 1.2;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(2){font-size: 17px; line-height: 1.4;}
	


}

@media (max-width:1023px){	
	/* 메인 */
	.main_wrap{padding-top: 50px;}
	
	/* 메인 sec3 */
	.main_project_wrap ul b span{font-size: 23px;}
}

@media (max-width:767px){
	/* 메인 공통 */
	.main_pc_only_img{display: none !important;}
	.main_mobile_only_img{display: inline-block !important;}
	
	
	/* 메인 sec1 */
	.main_swiper_01 .swiper-slide{height: 540px;}
	.main_swiper_01 .text_area{right: inherit; left: 3%; width: 94%; bottom: 50px;}
	.main_swiper_01 .text_area p{font-size: 17px; text-align: center;}
	.main_swiper_01 .text_area p span{font-size: 21px;}
	.main_swiper_01 .ss_05 .img_bg{background-position: 30% center;}
	.main_swiper_01 .ss_07 .img_bg{background-position: 15% center;}
	.main_swiper_01 .swiper-pagination{bottom: 25px;}
	
	/* 메인 sec2 */
	.main_banner{margin: 20px auto;}
	.main_banner ul{flex-wrap: wrap;}
	.main_banner ul li{position: relative; margin: 0 3%; width: 100% !important; height: auto;}
	.main_banner ul li:nth-child(1) div{width: 100%; height: 100%; padding: 40px 5% 50px;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text{padding-left: 10px;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(1){font-size: 31px; line-height: 1.3;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(2){font-size: 15px; line-height: 1.6; padding-top: 20px; margin-top: 20px;}
	
	.main_banner ul li:nth-child(2){background-position: bottom center; margin-left: 3%; margin-top: 20px;}
	.main_banner ul li:nth-child(2) a{display: block; width: 100%; height: 300px;}

	.main_banner .main_banner_title{right: 30px !important; bottom: 20px; font-size: 23px;}
	.main_banner ul li:nth-child(2) .main_banner_title{left: inherit;}
	
	/* 메인 sec3 */
	.section.sec3{padding-top: 80px; margin-bottom: 80px;}
	.main_project_wrap ul li{width: 100%; margin-left: 0;}
	.main_project_wrap ul li:nth-child(n+2){margin-top: 30px;}
	.main_project_title{font-size: 23px; padding-left: 10px; margin-bottom: 30px;}
	
	.main_project_wrap ul a{display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
	.main_project_wrap ul b{position: relative; display: block; height: auto; background: none; opacity: 1; margin-top: 10px;}
	.main_project_wrap ul b span{color: #222; transform: translateY(0); font-size: 17px; font-weight: 700; line-height: 1.4; margin-top: 5px;}
	.main_project_wrap ul a:hover img{transform: scale(1.01);}
}


@media (max-width:480px){
	/* 메인 sec1 */
	.main_swiper_01 .text_area p{font-size: 15px;}
	.main_swiper_01 .text_area p span{font-size: 19px;}
	
	/* 메인 sec2 */
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(1){font-size: 27px;}
	.main_banner ul li:nth-child(1) div a span.main_banner_text:nth-child(2){font-size: 14px;}
	
	.main_banner ul li:nth-child(2) a{height: 240px;}
	
	.main_banner .main_banner_title{font-size: 21px;}
	
	
	/* 메인 sec3 */
	.main_project_title{font-size: 21px;}
	.main_project_wrap ul b span{font-size: 16px;}
}