#main_wrap{ padding-top: 140px; }

/* common */
.main_tit_w { position: relative; overflow: hidden; margin-bottom: 10px; text-align: center; }
.main_tit{ display: block; position: relative; margin-bottom: 10px; font-size: 32px; font-weight: 500; color:#333; text-align: left; }
.main_txt{ display: block; font-size: 15px; color: #666; text-align: left; }
.main_txt em{ font-weight: 600; color: #000; }


/* main visual */ 
.main_vis { width:100%; padding: 30px; box-sizing: border-box; margin-bottom: 30px; border: 1px solid #ddd; border-top: 0; }
.main_vis .video_w{ position: relative; padding-bottom: 56.25%; overflow: hidden; }
.main_vis .video_w .mv_video{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
.main_vis .img_w{ position: relative; padding-bottom: 56.25%; overflow: hidden; }
.main_vis .img_w img{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
.main_vis .swiper-pagination-bullet{ width: 15px; height: 15px; background: #ccc; opacity: 1; }
.main_vis .swiper-pagination-bullet-active{ background: #f26624; }
.main_vis .swiper-button-next::after, 
.main_vis .swiper-button-prev::after{ color: #f26624; font-size: 30px; }

/* section02 */
.sec2 { margin-bottom: 30px; padding: 30px; border: 1px solid #ddd; }
.sec2 .sec2_list ul{ overflow: hidden; padding: 20px 0; }
.sec2 .sec2_list ul li{ position: relative; top: 0; left: 0; float: left; width: calc(33.33% - 0.4px); margin:0; padding: 10px; padding-bottom: 20px; box-sizing: border-box;
transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-ms-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
}
.sec2 .sec2_list ul li:last-child{ margin-right: 0; }
.sec2 .sec2_list ul li:hover{ border: 1px solid #ddd; }
.sec2 .sec2_list ul li a{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sec2 .sec2_list .img_w{ width:  100%; height: 200px; overflow: hidden; margin-bottom: 20px; }
.sec2 .sec2_list .img_w img{ width: 100%; object-fit: cover; }
.sec2 .sec2_list .tit {color:#333; font-size:17px; word-wrap: break-word; }
.sec2 .sec2_list .txt {color:#666; height:44px;font-size:14px; margin-top:15px;word-break: keep-all; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.sec2 .sec2_list .date{color:#666; font-size:14px;font-family: 'Poppins'; margin-top: 15px;  }
.sec2 .bt_more { position: absolute; bottom: 10px; right: 0; }
.sec2 .bt_more a { display:block; font-size: 16px; color:#999; }
.sec2 .bt_more:hover a{ color: #000; }

/* section03 */
.sec3{ overflow: hidden; margin-bottom: 30px; }
.sec3 .bx{ position: relative; float: left; height: 320px; padding: 30px; border: 1px solid #ddd; box-sizing: border-box; }
.sec3 .bx_left{ overflow: hidden; position: relative; width: calc(44.55% - 10px); margin-right: 19px; }
.sec3 .bx_left .bg{ position: absolute; bottom: 0; right: 0; z-index: -1; width: 100%; height: 100%; background: url('../img_kr/main/main_sec03_left.jpg') no-repeat center; background-size: cover;}
.sec3 .bx_right{ overflow: hidden; width: calc(55.45% - 10px); }
.sec3 .bx_right .bg{ position: absolute; bottom: 0; right: 0; z-index: -1; width: 100%; height: 100%; background: url('../img_kr/main/main_sec03_right.jpg') no-repeat center; background-size: cover;}
.sec3 .bt_more { position: absolute; bottom: 30px; left: 30px; }
.sec3 .bt_more a { position: relative; display:block; overflow: hidden; padding: 7px 20px; font-size: 16px; color:#fff; 
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;}
.sec3 .bt_more a p{ position: relative; z-index: 3;}
.sec3 .bt_more a .line{ transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -ms-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; }
.sec3 .bt_more a .line01{ position: absolute; top: 0; left: 0; width: 0%; height: 1px; background: #f26624;  }
.sec3 .bt_more a .line02{ position: absolute; top: 0; right: 0; width: 1px; height: 0%; background: #f26624;  }
.sec3 .bt_more a .line03{ position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #f26624;  }
.sec3 .bt_more a .line04{ position: absolute; top: 0; left: 0; width: 1px; height: 0%; background: #f26624;  }
.sec3 .bt_more a::before{ content: ''; opacity: 1; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: #f26624; 
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;}
.sec3 .bt_more a:hover::before{ opacity: 0; }
.sec3 .bt_more a:hover{ color: #f26624; }
.sec3 .bt_more a:hover .line01{ width: 100%; }
.sec3 .bt_more a:hover .line02{ height: 100%; }
.sec3 .bt_more a:hover .line03{ width: 100%; }
.sec3 .bt_more a:hover .line04{ height: 100%; }

/* 인트로 페이지 */
.intro{ cursor: pointer; display: table; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100vh; background: #fff; }
.intro .intro_logo{ display: table-cell; opacity: 0; vertical-align: middle; width: 100%;    -webkit-animation: introLogo 1s forwards; animation: introLogo 1s forwards;}
.intro .intro_logo img{ display: block; margin: auto; max-width: 80%; }
.intro.off{ opacity: 0; transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; }
@keyframes introLogo {
	0%{ transform: scale(0.7); opacity: 0; filter: blur(5px);}
	100%{ transform: scale(1); opacity: 1; filter: inherit; }
}
.intro .mouse_w{ opacity: 0; position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center;     -webkit-animation: introMouse 1s 1s forwards; animation: introMouse 1s 1s forwards;}
.intro .click{ display: block; font-size: 16px; font-weight: 500; color: #000;  -webkit-animation: introMouseClick 1s infinite; animation: introMouseClick 1s infinite;  }
.intro .mouse{ display: inline-block; position: relative; width: 30px; height: 50px; border-radius: 30px; border: 2px solid #000;  }
/* .intro .mouse .wheel{ position: absolute; top: 15px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #000;  } */
.intro .mouse_tap{ position: absolute; top: 30px; left: 49.5%; width: 50px;  -webkit-animation: introMouseClick 1s infinite; animation: introMouseClick 1s infinite; }
@keyframes introMouse {
	0%{ opacity: 0; bottom: 20px; }
	100%{ opacity: 1; bottom: 80px;  }
}
@keyframes introMouseClick {
	0%{ opacity: 1; }
	50%{ opacity: 0; }
	100%{ opacity: 1; }
}



/* 반응형 */
@media screen and (max-width: 1200px) {
	.sec1_ul li {width:49.5%; float:left;margin-right:0.5%;  }
	.sec1_ul li:nth-child(2) {margin-right:none;}
	.sec1_ul li:nth-child(4) {margin-right:none;}
}
@media screen and (max-width: 1024px) {
	#main_wrap { padding-top: 70px; }
	.main_tit {font-size:36px;}
	.bt_more a{font-size:14px; }

	.sec3_left {float:none;width:100%;}
	.sec3_right{float:none;width:100%; padding:30px;}
	.sec3_right .main_tit { text-align:center;margin-bottom:40px;}

	.sec3_right .sec3_list {width:100%;}
	.sec3_right .sec3_list li:nth-child(1) {width:100%;}
	.sec3_right .sec3_list li:nth-child(2) {width:100%;}
}
@media (max-width: 768px) {
	.main_vis{ padding: 20px; }

	.sec2{ padding: 20px; }
	.sec2 .sec2_list ul li{ width: 100%; margin-bottom: 20px; padding-bottom: 0; }
	.sec2 .sec2_list .img_w{ float: left; width: 240px; margin-right: 20px;}
	.sec2 .sec2_list .txt_w{ float: left; width: calc(100% - 260px);  }

	.sec3 .bx{ padding: 20px; }
	.sec3 .bx_left{ width: 100%; margin-bottom: 30px; }
	.sec3 .bx_right{ width: 100%; }
	.sec3 .bt_more{ bottom: 20px; left: 20px; }

	/* 인트로 */
	.intro .mouse{ width: 24px; height: 40px; border-radius: 20px;  }
	.intro .mouse .wheel{ top: 10px; width: 5px; height: 5px; margin-left: -2.5px; }
	@keyframes introMouse {
		0%{ opacity: 0; bottom: 00px; }
		100%{ opacity: 1; bottom: 40px;  }
	}
}
@media (max-width: 540px) {
	.main_tit { font-size: 28px; }
	
	.sec2 .sec2_list ul li{ margin-bottom: 30px; }
	.sec2 .sec2_list .img_w{ float: none; width: 100%; margin-right: 0; margin-bottom: 10px;} 
	.sec2 .sec2_list .txt_w{ float: none; width: 100%;  }
	.sec2 .sec2_list .txt{ margin-top: 10px; }
	.sec2 .sec2_list .date{ margin-top: 10px; }
	
	.sec3 .bx_left .bg{ height: 85%; }
	.sec3 .bx_right{ height: 380px; }
	.sec3 .bx_right .bg{ height: 60%; }

}
@media (max-width: 420px) {
	.main_txt{ font-size: 14px; }

	.main_vis{ padding: 15px; }
	.sec2{ padding: 15px; }
	
	.sec3 .bx{ padding: 15px; }
	.sec3 .bx_right .main_txt br{ display: none; }
}