#main_area { min-width:320px; }

/* 메인 비쥬얼 */
#main_visual { position:relative; display:block; height:auto; background-size:cover; overflow:hidden; }
#main_visual:after { display:block; content:""; clear:both; }
#main_visual .bx-wrapper { height:100%; }
#main_visual .bx-wrapper .bx-viewport { height:100% !important; }
#main_visual .main_slider { height:100%; }
#main_visual .main_slider li { position:relative; width:100% !important; height:100%; background-size:contain !important; }
#main_visual .main_v_txt { position:absolute; left:50%; top:40%; display:block; line-height:1.3; margin-left:-610px; font-size:4.37em; font-style:italic; font-weight:600; color:#333; }

#main_visual .bx-wrapper { height:887px; }
#main_visual .main_slider li .img2 { display:block; height:887px; }
#main_visual .main_slider li .img2 img { width:100%; height:100%; }

#main_visual #bx-pager { position:absolute; left:50%; top:50%; display:block; margin-left:-605px; margin-top:70px; text-align:center; overflow:hidden; }
#main_visual #bx-pager a { display:block; float:left; width:11px; height:11px; margin:0 5px; background:#333; border-radius:50%; }
#main_visual #bx-pager a.active { background:none; box-sizing:border-box; border:2px solid #333; border-radius:50%; opacity:1; }

#main_visual .btn_arrow_left { position:absolute; left:50%; top:50%; width:auto; height:81px; margin-left:-900px; margin-top:-40px; z-index:9; }
#main_visual .btn_arrow_right { position:absolute; right:50%; top:50%; width:auto; height:81px; margin-right:-900px; margin-top:-40px; z-index:9; }

/* 메인 컨텐츠 */
#main_cnt { display:block; width:100%; margin:0; padding:0; overflow:hidden; }
.main_box { position:relative; display:block; width:100%; background-size:cover; box-sizing:border-box; overflow:hidden; }
.main_box .main_inner { display:block; max-width:1200px; margin:0 auto; }
.main_box header h1 { display:block; font-size:0; text-indent:-9999999px; }
.main_box .text_box { display:block; max-width:1200px; margin:0 auto; }
.main_box .text_box1 { display:block; text-align:center; }
.main_box .text_box2 { position:relative; display:block; padding:177px 0 231px; padding-left:120px; text-align:left; box-sizing:border-box; z-index:6; }
.main_box .text_box3 { position:absolute; top:30%; display:block; width:94%; padding:0 3%; text-align:center; box-sizing:border-box; 
z-index:9; }

.main_box .text_box .m_title { display:block; margin:0 0 25px; font-size:2.81em; font-weight:700; color:#fff; }
.main_box .text_box .m_title span { border-bottom:3px solid #333; }
.main_box .text_box .m_cnt { display:block; line-height:1.8; margin:0 0 20px; font-size:1.12em; font-weight:600; color:#fff; }
.main_box .text_box .m_cnt span { display:block; }
.main_box .text_box .btn_more { display:block; width:112px; height:30px; line-height:29px; font-size:0.875em; font-weight:400; color:#fff; text-align:center; border:1px solid #fff; border-radius:20px; box-sizing:border-box; }
.main_box .text_box1 .btn_more { margin:0 auto; }
.main_box .text_box2 .m_title, .main_box .text_box4 .m_title { color:#000; }
.main_box .text_box2 .m_cnt, .main_box .text_box4 .m_cnt { padding-left:3px; color:#333; }
.main_box .text_box2 .btn_more, .main_box .text_box4 .btn_more { color:#666; border:1px solid #666; }

.main_box1 { height:603px; padding:135px 0 370px; background:url('../../images/main/main_bg1.jpg') no-repeat center top; }
.main_box2 { height:591px; background:url('../../images/main/main_bg2.jpg') no-repeat center top; }
.main_box3 { padding:100px 0; background:url('../../images/main/main_bg3.jpg') no-repeat center top; }
.main_box3 .video_box { display:block; max-width:1200px; margin:0 auto; }
.main_box3 .video_box img { max-width:100%; }
.main_box3 .video_box .pop_video { display:block; }
.main_box3 .video_box .pop_video img { max-width:100%; }
.main_box4 { height:699px; padding:260px 0 340px; background:url('../../images/main/main_bg4.jpg') no-repeat center top; }

.main_box_a { position:relative; display:none; max-width:1200px; margin:0 auto; }
.main_box_a.current { display:block; }

.m_tab { position:absolute; left:33.33%; bottom:0; display:block; width:100%; margin-left:-33.33%; z-index:8; }
.m_tab:after { clear:both; display:block; content:""; }
.m_tab > ul { display:block; max-width:1200px; margin:0 auto; padding:0; list-style:none; overflow:hidden; }
.m_tab li { position:relative; display:block; float:left; width:33.33%; }
.m_tab li > a.title { display:block; height:50px; line-height:50px; font-size:1.25em; color:#fff; text-align:center; background:#0e1b26; border-left:1px solid #ddd; overflow:hidden; box-sizing:border-box; }
.m_tab li:first-child > a.title { border-left:0; }
.m_tab li:hover a.title { font-weight:600; background:#3567d8; }
.m_tab li.current a.title { font-weight:600; background:#3567d8; }

/* FadeInRight */

.m_pro1 { position:absolute; top:5%; right:0; width:56.8%; height:100%; }
.m_pro2 { position:absolute; top:18%; right:0; width:45%; height:100%; }
.m_pro3 { position:absolute; top:15%; right:0; width:56.8%; height:100%; }
.m_pro2 .txt { position:absolute; left:-24%; top:37%; line-height:1.7; font-size:1.12em; color:#333; }
.m_pro3 .txt { position:absolute; left:-5%; top:50%; line-height:1.7; font-size:1.12em; color:#333; }

.animated2 {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	z-index:5; 
}

@-webkit-keyframes fadeInRight {
	0% {
	   opacity: 0;
	   -webkit-transform: translateX(400px);
	}
	100% {
	   opacity: 1;
	   -webkit-transform: translateX(0);
	}
}
@keyframes fadeInRight {
	0% {
	   opacity: 0;
	   transform: translateX(400px);
	}
	100% {
	   opacity: 1;
	   transform: translateX(0);
	}
}
.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

@media (max-width:1500px) {
	#main_visual { height:auto; }
	#main_visual .bx-wrapper { height:700px; }
	#main_visual .main_slider li .img2 { height:700px; }
}

@media (max-width:1250px) {
	#main_visual .main_v_txt { left:5%; margin-left:0; }
	#main_visual #bx-pager { left:5%; margin-left:0; }
	.main_box3 { width:100%; padding:45px 2%; box-sizing:border-box; }
}
	
@media (max-width:1200px) {
	.main_box4 .text_box { padding:0 2%; }
}

@media (max-width:1024px) {
	#main_visual { margin-top:0; padding:0; }
	#main_visual .bx-wrapper { position:relative; height:600px; }
	#main_visual .main_slider li .img2 { height:600px; }
	#main_visual .main_v_txt { font-size:3.6em; }
	
	.main_box .text_box .m_title { font-size:2.5em; }
	.main_box .text_box .m_cnt { font-size:1em; }
	.main_box .text_box .btn_more { font-size:0.81em; }
	.main_box .text_box2 { padding-left:50px; }

	.main_box1 { height:auto; padding:200px 0 260px; background:url('../../images/main/m_bg1.jpg') no-repeat center top; background-size:cover; }
	.main_box2 img { max-width:100%; }
	.main_box2 .m_pro1 img { margin:100px 0 0; }
	.main_box2 .m_pro3 img { margin:100px 0 0; }
	.main_box2 .m_pro3 .txt { top:56%; }
	.main_box3 .video_box { height:auto; }
	.main_box3 .video_box .pop_video { width:100px; margin:0 auto; }
	.main_box4 { height:auto; padding:50% 5% 80px; text-align:center; background:url('../../images/main/main_bg4.jpg') no-repeat 85% top; background-size:160%; }
	.main_box4 .text_box { display:inline-block; text-align:left; }
}

@media (max-width:920px) {
	.main_box4 .text_box { bottom:10%; }	
}

@media (max-width:860px) {
	.main_box2 .m_pro2 { top:28%; }
	.main_box2 .m_pro2 .txt { left:-32%; top:33%; }
	.main_box2 .m_pro3 .txt { left:-22%; top:50%; }
}

@media (max-width:768px) {
	#main_visual .bx-wrapper { height:500px; }
	#main_visual .main_slider li .img2 { height:500px; }
	#main_visual .main_v_txt { font-size:2.5em; }
	#main_visual #bx-pager { margin-top:20px; }

	.main_box .text_box .m_title { font-size:2.2em; }
	.main_box .text_box .m_cnt { font-size:0.93em; }

	.main_box1 { padding:150px 0 200px; }	
	.main_box2 .m_pro2 .txt { left:-55%; top:37%; }
	.main_box2 .m_pro3 .txt { left:25%; top:52%; }
	.main_box3 .video_box .pop_video { width:80px; margin:0 auto; }
}

@media (max-width:640px) {	
	#main_visual .bx-wrapper { height:400px; }	
	#main_visual .main_slider li .img2 { height:400px; }

	#main_visual .main_v_txt { font-size:1.7em; }
	#main_visual .main_v_txt img { max-width:60%; }

	#main_visual .btn_arrow_left { display:none; }
	#main_visual .btn_arrow_right { display:none; }
	
	.main_box .text_box .m_title { font-size:1.8em; }
	.main_box .text_box1 { padding:0 20px; }
	.main_box .text_box2 { padding:60px 0 380px 60px; }
	.main_box .text_box3 .m_title { margin:0 0 20px; }
	.main_box .text_box3 .m_cnt { margin:0 0 20px; }

	.main_box1 { padding:120px 0 170px; }
	.main_box2 { height:auto; padding:0; }	
	.main_box2 .m_pro1 img { margin:150px 0 0; }
	.main_box2 .m_pro2 img { margin:100px 0 0; }
	.main_box2 .m_pro3 img { margin:150px 0 0; }
	.main_box3 .video_box { min-height:300px; }
	.main_box3 .video_box .video_img { height:300px; }
	.main_box3 .video_box .pop_video { width:75px; margin:0 auto; }
	
	.m_tab li > a.title { font-size:1em; }

	.main_box2 .m_pro1 { width:80%; }
	.main_box2 .m_pro2 { top:8%; width:60%; }
	.main_box2 .m_pro3 { top:10%; width:65%; }
	.main_box2 .m_pro2 .txt { left:-46%; top:46%; font-size:1em; }
	.main_box2 .m_pro3 .txt { left:-35%; top:52%; font-size:1em; }
     
}
	
@media (max-width:480px) {
	#main_visual .bx-wrapper { height:300px; }	
	#main_visual .main_slider li .img2 { height:300px; }
	#main_visual .main_v_txt { bottom:60px; font-size:1.3em; }
	#main_visual .main_v_txt img { max-width:50%; }
	#main_visual #bx-pager { display:none; }

	.main_box .text_box2 { padding:60px 10px 340px 40px; }
	.main_box1 { padding:90px 0 120px; }
	.main_box2 .m_pro1 img { margin:200px 0 0; }
	.main_box2 .m_pro2 img { margin:150px 0 0; }
	.main_box2 .m_pro3 img { margin:150px 0 0; }
	.main_box2 .m_pro2 .txt { font-size:0.87em; }
	.main_box2 .m_pro3 .txt { font-size:0.87em; }
	.main_box3 .video_box .pop_video { width:60px; }

	.m_tab li > a.title { font-size:0.93em; }
}

@media (max-width:360px) {
	#main_visual .bx-wrapper { height:250px; }	
	#main_visual .main_slider li .img2 { height:250px; }

	.main_box .text_box2 { padding:60px 0 300px 40px; }
	.main_box .text_box3 { top:31%; }
	.main_box2 .m_pro2 img { margin:180px 0 0; }
	.main_box2 .m_pro3 { width:80%; }
	.main_box2 .m_pro3 img { margin:150px 0 0; }
	.main_box2 .m_pro3 .txt { left:12%; top:55%; }
}