@import url(reset.css);

/* header */
.header { max-width: 1140px; margin: 0 auto; text-align: center; line-height: 30px; }
.header .logo { display: inline-block; float: left; padding: 30px 0 0 10px; }
.header #sitemap_btn { display: inline-block; float: right; cursor: pointer; padding: 30px 10px 0 0; }

.gnb { display: inline-block; position: relative; padding-top: 32px; }
.gnb > ul > li { display: inline-block; padding: 0 50px 41px; }
.gnb > ul > li > a { font-size: 18px; font-weight: 500; letter-spacing: -0.5px; }
.gnb > ul > li:hover { background: url(/img/gnb_hover.jpg) no-repeat 50% 100%; }
.gnb .sub_li { position: absolute; z-index: 2; top: 130px; display: none; }
.gnb .sub_li li { padding-bottom: 4px; }
.gnb .sub_li li a { font-size: 15px; }
.gnb .sub_li li:hover a { color: #00b0ea; }
.gnb_cover { position: absolute; z-index: 1; top: 103px; left: 0; width: 100%; height: 355px; background-color: #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; display: none; }

.gnb .posi_1 { left: 3.5%; }
.gnb .posi_2 { left: 20.8%; }
.gnb .posi_3 { left: 47%; }
.gnb .posi_4 { right: 26%; }
.gnb .posi_5 { right: 6%; }


/* slider */
.main_visual { position: relative; }
.main_visual .slider li {position: relative; height: 700px; }
.main_visual .slider > li > div { max-width: 1140px; margin: 0 auto; padding-top: 230px; padding-left: 30px;  box-sizing:border-box;}
.main_visual .slider > li > div > h5 { font-family: 'Montserrat', sans-serif; color: #fff; font-size: 26px; margin-bottom: 20px; }
.main_visual h2.title { font-size: 70px; color: #fff; font-weight: 500; }
.main_visual .txt1 { font-size: 28px; color: #fff; margin-top: 20px; line-height: 1.3; }
.main_visual .more_btn { font-size: 18px; color: #fff; font-weight: 200; background: url(/img/arrow_01.png) no-repeat right 8px; padding-right: 40px; display: inline-block; margin-top: 40px; }
.main_visual .slide_1 { background: url(/img/main_visual_01.jpg) no-repeat center center; background-size: cover; }
.main_visual .slide_2 { background: url(/img/main_visual_02.jpg) no-repeat center center; background-size: cover; }
.main_visual .slide_3 { background: url(/img/main_visual_03.jpg) no-repeat center center; background-size: cover; }
.main_visual .slide_4 { background: url(/img/main_visual_04.jpg) no-repeat center center; background-size: cover; }
.main_visual .slider > li > div:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0;}
.main_visual .slider > li > div .main_vs_txt{float:left; width:40%;}
.main_visual .slider > li > div .main_vs_video{float:right; width:58%;}
.main_visual .slider > li > div .main_vs_video .video_inner{position:relative; padding-bottom:56%;}
.main_visual .slider > li > div .main_vs_video .video_inner iframe{position:absolute; left:0; top:0; bottom:0; width:100%; height:100%; }

.main_visual .flex-direction-nav { display: none; }
.main_visual .flex-control-paging { position: absolute; width: 100%; left: 0; bottom: 44px; z-index: 2; text-align: center; }
.main_visual .flex-control-paging li { display: inline-block; margin: 0 6px; }
.main_visual .flex-control-paging li a { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-color: rgba(255,255,255,0.5); cursor: pointer; text-indent: -9999px; }
.main_visual .flex-control-paging li a.flex-active { background-color:rgba(255,255,255,0.9); }

.video_popup{position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%,-50%); width: 560px; height: 400px; }
.video_popup iframe{width: 100%; height: 100%; }
.video_popup .video_popup_close{position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background-color: #222; }
.video_popup .video_popup_close button{position: absolute; top: 0; right: 0; padding: 10px; border: 0; color: #fff; background-color: #393939; }

/* 반응형 */

/* ======== 웹 ======== */
@media (min-width: 1200px) {

	#m_menu, #m_close, .rightMenu { display: none; }
	
}


/* ======== 태블릿 ======== */
@media all and (min-width:768px) and (max-width:1199px) {

	#m_menu, #m_close, .rightMenu { display: none; }
	

	.gnb > ul > li { padding: 0 24px 41px; }
	.gnb > ul > li > a { font-size: 16px; }
	.gnb .sub_li li a { font-size: 12px; }
	.gnb .posi_1 { left: 2%; }
	.gnb .posi_2 { left: 18.8%; }
	.gnb .posi_3 { left: 46%; }
	.main_visual .slider li{height:auto; }
	.main_visual .slider > li > div{padding:60px 20px; }
	.main_visual h2.title{font-size:50px;}
	.main_visual .txt1{font-size:22px;}
	.main_visual .txt1 br{display:none;}
	.main_visual .slider > li > div .main_vs_txt{float:none; margin-bottom:50px; width:100%; }
	.main_visual .slider > li > div .main_vs_video{float:none; width:100%; }

}

@media all and (max-width:806px) {

	.header #sitemap_btn { display: none; }

}


/* ======== 모바일 ======== */
@media all and (max-width:767px) {

	.gnb { display: none; }
	.rightMenu { position: fixed; top: 0; right: -500px; background-color: #0b4da2; height: 100%; width: 50%; z-index: 55; }
	.header { margin-bottom: 20px; }
	.header .logo { padding-top: 20px; }
	.header .logo > a > img { height: 34px; }
	#m_menu { display: inline-block; position: absolute; top: 20px; right: 10px; cursor: pointer; }
	#m_close { position: absolute; top: 28px; left: 47%; cursor: pointer; }
	.rightMenu > ul { margin-top: 90px; }
	.rightMenu > ul > li { display: block; border-top: 1px solid #3269b1; }
	.rightMenu > ul > li:last-child { border-bottom: 1px solid #3269b1; }
	.rightMenu > ul > li > h5 { font-size: 15px; color: #fff; padding: 12px 0 12px 25px; text-align: left; cursor: pointer; }
	.dep2_li { display: none; background-color: #09418a; padding: 10px 0 10px 25px; text-align: left; }
	.dep2_li > li > a { font-size: 12px; color: #fff; font-weight: 200; }
	.main_visual .slider li { height: 280px; }
	.main_visual .slider > li > div > h5 { font-size: 13px; }
	.main_visual h2.title { font-size: 30px; }
	.main_visual h2.title > img { height: 48px; }
	.main_visual .txt1 { font-size: 12px; margin-top: 15px; }
	.main_visual .slider > li > div { padding-top: 68px; }
	.main_visual .flex-control-paging li a { width: 10px; height: 10px; }
	.main_visual .flex-control-paging { bottom: 16px; }
	.main_visual .more_btn { font-size: 13px; background: url(/img/arrow_01.png) no-repeat right 2px; }

	.video_popup{width: 98%; }
	.main_visual .slider li{height:auto; }
	.main_visual .slider > li > div{padding:40px 20px; }
	.main_visual h2.title{font-size:40px;}
	.main_visual .txt1{font-size:16px;}
	.main_visual .txt1 br{display:none;}
	.main_visual .slider > li > div .main_vs_txt{float:none; margin-bottom:30px; width:100%; }
	.main_visual .slider > li > div .main_vs_video{float:none; width:100%; }
}