@charset "utf-8";
/* CSS Document */



@media screen and (max-width:1570px){
#header .gnb_wrap .gnb > li .dp1{padding:0 .8em;}
#header .gnb_wrap .gnb > li .dp1 .va{font-size:1em;}
#header .gnb_wrap .gnb > li .dp1{ min-width: 4.5em !important;}
.text-25 { font-size:25px !important; }

}

@media screen and (max-width:1430px){
#header .gnb_wrap .gnb > li .dp1{padding:0 .3em;}
#header .etc > li > a{width:2.5em;}

.mainNav_wrap{ display:none !important;}
#section1 .enterInfoCon1{ margin-top:4em !important;}
#section1 .enterInfoCon1 .slides{ width:90%; margin:0 auto;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a.flex-prev{ left:1%;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a.flex-next{ right:1%;}
#section1 .enterInfoCon1 .el .img_wrap{ width:48% !important; margin-left:48% !important;}
#section1 .enterInfoCon1 .el .con_wrap{ width:40% !important;}
#section1 .enterInfoCon1 .flex-control-paging{ margin-top:4em !important;}
#section1 .enterInfoCon1 .el .con_wrap .no{ font-size:5em !important;}
#section1 .enterInfoCon1 .el .con_wrap .tit:after{ width:120%;}

}
@media screen and (max-width:1330px){
#header .gnb_wrap .gnb > li .dp1{padding:0; min-width:6.5em;}
#header .gnb_wrap .gnb > li .dp1 .va{font-size:.9em;}
#header .all_wrap .allBtn{margin-left:0;}

.enterInfoCon1 .el .con_wrap .tit{ font-size:1.5em;}
.enterInfoCon1 .el .con_wrap .tt{ font-size:.95em;}

}

@media screen and (max-width:1200px){
#header .gnb_wrap .gnb > li .dp1 .va{font-size:.9em;}
#header .logo{width:20%;}
#header .all_wrap .allBtn{width:3.5em;}



}

@media screen and (max-width:1100px){

#section1 .enterInfoCon1 .slides{ width:70%;}
#section1 .enterInfoCon1 .el .img_wrap{ width:100% !important; margin-left:0 !important;}
#section1 .enterInfoCon1 .el .con_wrap{ width:100% !important; padding:1em; box-sizing:border-box; background:rgba(0,0,0,.5); height:120px; top:unset; bottom:0;}
#section1 .enterInfoCon1 .el .con_wrap .no{ font-size:3.5em !important; opacity:.4;}
#section1 .enterInfoCon1 .el .con_wrap .tit{ color:#fff;}
#section1 .enterInfoCon1 .el .con_wrap .tit:after{ width:100%; background:#fff; height:1px;}
#section1 .enterInfoCon1 .el .con_wrap .va{ margin-left:0;}
#section1 .enterInfoCon1 .el .con_wrap .tt{ display:none;}
#section1 .flex-control-nav{ width:95%; margin:0 auto;}
#section1 .enterInfoCon1 .flex-control-paging{ margin-top:2em !important;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a{ width:3.5em; height:3.5em; line-height:3.5em;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a.flex-next{ right:4%;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a.flex-prev{ left:4%;}


}



@media screen and (max-width:1023px){
	
	
body{}
.PC{ display:none !important}
.PHONE{ display:block !important}	
.box0{ width: 80%;}
.box1{width:95%; max-width:1200px; margin:0 auto; position:relative;}
.box2{width:95%; max-width:1200px; margin:0 auto; position:relative;}

/**/
#header .gnb_wrap {display:none;}
#header .logo {width:28%;}
#header .all_wrap .xi-apps{ margin-left:5px;}

#footer .info_wrap{ padding-bottom:1em; width:100%;}
#footer .menu_wrap{ display:none;}
/**/

#contents .sub_visual_wrap .va_wrap {height:20em;}
#contents .sub_visual_wrap .slogan{ padding-top:20px;}
#contents .sub_visual_wrap .slogan .tit {font-size:1.8em;}
#contents .sub_visual_wrap .slogan .sub_slogan{ font-size:.9em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li {max-width:16%;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a {height:4em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a .va {font-size:.85em;}

#section4 .wrap_bottom .contact li{ height:155px;}
#section4 .wrap_bottom .tt_box{ height:155px;}
#section4 .wrap_top .content li{ padding:0 5px 0 15px;}
#section4 .wrap_top .content li .ct_icon img{ width:90%;}


}



@media screen and (max-width:560px){
	.sec4 > li{ width: 99% !important; margin-bottom:15px !important;}
	.con_list_grid4 > li {  width: 100% !important; }
	.con_list_grid3 > li { width: 100% !important; } 
	.grid-4 > li {  width: 100% !important; }
	.grid-3 > li { width: 100% !important; }
	.grid-2 > li { width: 100% !important; }
	.text-25 { font-size:20px !important; }
	#footer .info_wrap .info { width: 100% !important;  }
	#footer .info_wrap .logo { position: relative !important; }
	.bgimage { background-image:none !important;}
	.weblogo { display:none; }
	.moblogo { display:block; }
 }

@media screen and (min-width:561px) and  (max-width: 920px) {
 .sec4 > li{ width: 49% !important; margin-bottom:15px !important;}
 .con_list_grid4 > li {  width: 49% !important; }
 .con_list_grid3 > li { width: 49% !important; }
 .grid-4 > li {  width: 49% !important; }
 .grid-3 > li { width: 49% !important; }
 .grid-2 > li { width: 50% !important; } 
 .text-25 { font-size:20px !important; }
}


@media screen and (max-width:920px){

#section4 .wrap_top .m_vod{ width:47%; margin-right:1%;}
#section4 .wrap_top .news_wrap{ width:31%; margin-right:1%;}
#section4 .wrap_top .content{ width:20%;}
#section4 .wrap_top .content li .ct_icon{ width:30%; margin-top:1.5em;}

}

@media screen and (max-width:850px){


#section1 .enterInfoCon1 .el .con_wrap{ height:100px;}
#section1 .enterInfoCon1 .el .con_wrap .no{ font-size:3em !important;}


}


@media screen and (max-width:768px){
.box1{width:95%; margin:0 auto; position:relative;}

/**/

#header .logo {width:32%;}
#header .menu_wrap {margin-right:0;}
#header .etc > li > a {width:2.5em;}
#header .m_btn {width:2.5em;}

/**/
#contents .doc {padding:1em 0 3em 0;}
#contents .sub_tit .tit {font-size:1.3em;}
#contents .sub_visual_wrap .va_wrap {height:15em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb {display:none;}
#contents .sub_visual_wrap .slogan {padding-top:2em;}
#contents .sub_visual_wrap .slogan .tit {font-size:1.250em;}
#contents .sub_visual_wrap .slogan .sec {margin:.8em auto;}
#contents .sub_visual_wrap .slogan .nav {font-size:.625em;}

/**/

#section1 .enterInfoCon1 .el .con_wrap{ height:90px;}
#section1 .enterInfoCon1 .el .con_wrap .tit{ font-size:1em;}
#section1 .enterInfoCon1 .el .con_wrap .no{ font-size:2.5em !important;}
#section1 .flex-control-nav{ width:70%;}

}

@media screen and (max-width:750px){


#section1 .enterInfoCon1 .flex-direction-nav > li > a{ width:3em; height:3em; line-height:3em; margin-top:-2.5em;}
#section3 .smt_con{}


}

@media screen and (max-width:680px){


#section4 .wrap_top .m_vod{ width:64%}
#section4 .wrap_top .news_wrap{ display:none;}
#section4 .wrap_top .content{ width:35%;}
#section4 .wrap_top .content li .ct_icon{ margin-top:1em;}
#section4 .wrap_bottom .tt_box{ display:none;}
#section4 .wrap_bottom .contact{ width:100%;}
#section4 .wrap_bottom .contact li{ padding:10px; border:1px solid #ddd;  border-top:3px solid #2c2f91; margin-left:-1px; font-size:.8em;}
#section4 .comp_con > li { float: left; width: 100%; }

.load .mainVisual_wrap .slogan .t1{ font-size: 1.3em;}
.load .mainVisual_wrap .slogan .t2{ font-size: 2.9em;}



}
@media screen and (max-width:600px){
#section2 .main_history_wrap .main_history_line{ height: 100% !important; left: 10% !important;}
#section2 .main_history_wrap .main_history > li{ left: 10% !important;}
#section2 .main_history_wrap .main_history > li .history .list{ text-align:left; width: 240px;}
#section2 .main_history_wrap .main_history > li.odd .history .year .dot{ left: -57px;}
#section2 .main_history_wrap .main_history > li.odd .history .year .dot:after{ left: 0;}
#section2 .main_history_wrap .main_history > li .history .year{ text-align:left;}
}

@media screen and (max-width:500px){

#footer .f_logo{ display:none;}
#footer .info_wrap .info{ margin-left:0;}

.enterInfoCon1 .flex-direction-nav > li > a{ width:2.5em; height:2.5em; line-height:2.5em;}
.enterInfoCon1 .flex-direction-nav > li > a:before{ font-size:1.3em;}

.m_tt{ font-size:2em;}
.m_tx{ font-size:.9em;}

.load .mainVisual_wrap .slogan .t1{ font-size: 1.1em;}
.load .mainVisual_wrap .slogan .t2{ font-size: 2.7em;}
}

@media screen and (max-width:460px){

#header .etc_wrap .lang .tit .tt{ font-size:.8em;}
#contents .sub_visual_wrap .slogan .sub_slogan{ font-size:.65em;}

.mainVisual .flex-control-nav{ display:none;}

#section1 .enterInfoCon1 .slides{ width:65%;}
#section4 .wrap_top{ display:none;}
#section4 .wrap_bottom .contact{ width:100%;}
#section4 .wrap_bottom .contact li{ float:none; margin-top:1em; width:100%; height:130px;}
#scrollAni .xi-mouse{ font-size:2.5em;}


}

@media screen and (max-width:420px){

.m_tt{ font-size:1.3em;}
.m_tx{ font-size:.8em;}
#section4 .wrap_bottom .contact li{ height:110px;}
#section1 .enterInfoCon1 .slides{ width:100%;}
#section1 .enterInfoCon1 .flex-direction-nav > li > a{ margin:-.8em -.5em; top:unset; bottom:0; width:2em; height:2em; line-height:2em;}


}



@media screen and (max-width:360px){
#header .logo{width:50%;}
#header .etc_wrap .lang .tit .tt{ font-size:.75em;}

#section4 .wrap_bottom .contact li{ font-size:.75em; height:95px;}
.m_tt{ font-size:1.6em;}
#scrollAni .xi-mouse{ font-size:2em;}

#section1 .enterInfoCon1{ margin-top:3em;}
#section1 .enterInfoCon1 .el .con_wrap .tit{ font-size:.9em;}
#section1 .enterInfoCon1 .flex-control-paging > li > a{ height:.2em;}
#section1 .enterInfoCon1 .el .con_wrap .no{ font-size:2em !important;}
#section1 .enterInfoCon1 .el .con_wrap{ padding:.5em; height:65px;}


}




@media all and (orientation:landscape){

}