@charset "utf-8";
@import url("reset.css");
@import url("common_main.css");

/* CSS Document */
html{overflow-x:hidden}
body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  font-family:  'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;
}



/* ====================================================================================================================
 * common
 * ====================================================================================================================*/



* { box-sizing: border-box; }

a, a:link, a:visited { text-decoration: none !important; }

fieldset input::-webkit-input-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }
fieldset input:-ms-input-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }

.clearfix{*zoom:1}
.clearfix:after{ display:block; clear:both; content:'';}

.wrap{height:100%;background: url('../images/body_bg.jpg') repeat-x 0 top;}

.inwrap{width:1260px; margin:0 auto;}

.br_mobile{display:block}

/* ====================================================================================================================
 * nav
 * ====================================================================================================================*/
.mgnb{height:102px;/* background:#fff; */}

.gnb{float:right;margin-top:10px; :82px;}
.gnb > ul li{float:left;padding: 0px 70px;margin-top: 35px;background:url(../images/gnb_line.png) no-repeat right 7px;text-align: center;border-right: 1px solid #dad6d6;height: 20px;vertical-align: middle;}
.gnb > ul li:last-child{background:none;border-right: 0px !important;}
.gnb > ul li > a{font: 600 20px/15pt 'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif; position: relative;}
.gnb > ul li > a{}
.gnb > ul li:hover > a,
.btn-active{font-weight: 500;color: #bdd9ff;padding-bottom:5px;}
.gnb > ul li.on > a{font-weight:1000; color:#467bc2; border-bottom:3px solid #467bc2; padding-bottom:5px;}
.gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}


/**** depth ****/
.expand {height:0px;overflow:hidden;position: relative;width:100%;background:url(../images/menu_bg.gif) repeat-x center;z-index: 1500;background: #000000bd;border-bottom: 0px solid #4c558142;}
.expand .download {position:relative;height:170px;text-align:center;width: 1260px;margin:0 auto;text-align:left;font-size:15px;}
.expand .download ul { height:170px}
.expand .download .sub1{position:absolute; left:390px; line-height:27px;}
.expand .download .sub2{position:absolute; left:538px; line-height:27px; padding-left:35px   }
.expand .download .sub3{position:absolute; left:728px; line-height:27px; padding-left:35px  }
.expand .download .sub4{position:absolute; left:905px; line-height:27px; padding-left:35px  }
.expand .close-btn{width:107px;height:23px;position:absolute;left:50%;bottom: 0px;margin-left: 555px;background:url(../images/menu_close.png)no-repeat 0 0;cursor:pointer;}


[class^="depth"]{position:absolute}
[class^="depth"] > ul li{width: 150px; line-height: 25px;}
[class^="depth"] > ul li > a {color: #ffffffc7;text-decoration:none;font-size: 15px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;font-weight: 400;}
[class^="depth"] > ul li > a:hover {color: #ffffff;font-weight: 600;}
.depth01{left: 645px; /*430px;*/}
.depth02{left: 890px; /*645px;*/}
.depth03{left: 890px; /*890px;*/}
.depth04{left: 1120px; /*1120px;*/}
.depth05{left: 885px; /*430px;*/}




#wrapper {position: relative; width: 100%; }
/*logo*/
.header{z-index:11;position: relative;width:100%;height:130px;background:none;border-bottom: 0px solid #efefef;z-index: 900;transition: all 250ms linear;}
.header .inwrap{z-index: 10;}
.header .inwrap > h1{float:left; width:150px;padding-top:30px; margin-right:25px}
.header .inwrap > h1 > a{display:block; width:198px; height:46px;text-indent:-999em;background:url(../images/h_logo.png)}
.header .inwrap > h1 > a{display:block; width:198px; height:46px;text-indent:-999em;background:url(../images/h_logo.png)}

/*smenu*/
.header .smenu_box{height:28px;border-bottom: 0px solid #000;background: #9999992e;}
.header .smenu_box .inwrap{z-index: 10; position:relative}
.header .smenu_box .inwrap .smenu{position:absolute;right:0;}
.header .smenu_box .inwrap .smenu > ul li{float:left; padding:5px 10px;}
.header .smenu_box .inwrap .smenu > ul li > a{display:block;font-size:11px;margin-top:3px; color:#000;font-family: 'Noto Sans KR', 'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;}



/*헤더오버 */
.header:hover,
.header:hover .inwrap > h1 > a,
.header:hover .smenu_box .inwrap .smenu > ul li > a,
.header:hover .gnb > ul li,
.header:hover .gnb > ul li > a{transition: all 250ms linear;}


.header:hover{background: #000000bd;}
.header:hover .smenu_box .inwrap .smenu > ul li > a{color:#fff;transition: all 250ms linear;}
.header:hover .inwrap > h1 > a{filter: brightness(0) invert(1);transition: all 250ms linear;}
.header:hover .gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}
.header:hover .gnb > ul li > a{color:#fff}
.header:hover .gnb > ul li {border-right: 1px solid #777;}




.bx-controls{width:1280px;position: relative;top: -474px;height: 474px;margin: 0 auto;}
/* mainVisul */
#container{width:100%;}
#container .inwrap{ position: relative;}
#container .inwrap .visual .bx-wrapper .bx-viewport {left:0; margin:0; padding:0; border:none; box-shadow:none; overflow:auto; overflow:hidden-x !important;}

#container .inwrap .visual .bx-wrapper .bx-controls-direction a {width:52px; height:98px;z-index:5000}
#container .inwrap .visual .bx-wrapper .bx-prev {left:10%; background:url(../images/arrow_left.png) no-repeat left top;}
#container .inwrap .visual .bx-wrapper .bx-next {right:10%; background:url(../images/arrow_right.png) no-repeat left top;}
#container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a {width:26px; height:26px; background:url(../images/btn_off.png) no-repeat left top;}
#container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a.active {background:url(../images/btn_on.png) no-repeat left top;}
#container .inwrap .visual .bx-wrapper .bx-pager,
#container .inwrap .visual .bx-wrapper .bx-controls-auto {bottom:25px;}
#container .inwrap .visual .bx-wrapper,
#container .inwrap .visual .bx-wrapper .bx-viewport{height:100%!important} /* 추가 */
#container .inwrap .visual li {width:100%; height:100%; min-height:890px;}
#container .inwrap .visual li.slider1 {background:url(../images/main_img01.jpg) no-repeat center top; background-size:cover;}
#container .inwrap .visual li.slider2 {background:url(../images/main_img02.jpg) no-repeat center top; background-size:cover;}
#container .inwrap .visual li.slider3 {background:url(../images/main_img03.jpg) no-repeat center top; background-size:cover;}
#container .inwrap .visual li div {position:absolute; left:50%; width:914px; height:auto; margin:0 auto;}
#container .inwrap .visual li div.slider_box1,
#container .inwrap .visual li div.slider_box2,
#container .inwrap .visual li div.slider_box3 {top:30%; margin-left:-388px;}
#container .inwrap .visual li div .main_title {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
#container .inwrap .visual li div .main_title2 {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
#container .inwrap .visual .more_main{position:absolute; top:70%; left:50%; margin-left:-155px;margin-top:20px; }






/* vision */
.section01{width:100%;padding-top:60px;padding:60px 0; background-color:#f5f3f6; text-align:center; z-index:1000;}


/*게시판영역*/
.board_area{/* float:left; */width: 445px;padding: 31px 27px;box-sizing: border-box;/* background-color: #fbfbfb; */}
.board{float:left}
/*공지사항*/
.mboard{position:relative;width: 100%;box-sizing: border-box;/* height: 171px; */}
.mboard h2 {font-size: 22px;font-weight: 600;line-height:25px;color:#282828;padding-left: 5px;    font-family:  'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
.mboard .more {position:absolute;top: 0px;right:0;width:20px;height:21px;font-size:35px;font-weight:600; color:#464646}
.mboard .more a{display:block;width:100%;height:100%; }
.mboard .mlist{position:relative;width:100%;/* height: 120px; */overflow:hidden;border-top:1px solid #333;margin-top: 15px;padding-top: 10px;margin-bottom: 15px;box-sizing: border-box;}
.mboard .mlist.last{margin-bottom: 0px;}
.mboard .mlist li{/* text-align: right; */line-height: 29px;border-bottom:0px solid #4d87d9;font-size:15px;color: #363636;background: url('../images/board_bu.gif') no-repeat 5px 12px;/* letter-spacing:-1px; */display: flex;justify-content: space-between;}
  .mboard .mlist li > span.icon{font-size:13px;color:#7d7e7e;margin-right: 5px;}
  .mboard .mlist li > span.date{text-align:right;font-size: 13px;
    color: #7d7e7e;
    margin-right: 5px;}

.mboard .mlist li.new{background:url(../images/mnotice_new.png) no-repeat 5px 14px;}
.mboard .mlist li a{width:75%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/* float: left; */text-align: left;padding-left: 15px;color: #edf0f9;font-size: 14px;font-weight:normal;color:#666666;}
.mboard .mlist li.notice a{
    color: #000;
}
.mboard .mlist li.notice a > span.icon{display: inline-flex;border:1px solid #e67171;height: 20px;align-items: center;border-radius: 3px;color: #f34848;padding: 0 3px;}
.mboard .mlist li a:hover, .mboard .mlist li a:focus, .mboard .mlist li a:active{color:#333;}
.mboard:last-child{margin-top: 19px;margin-bottom: 19px;}



.contactSite{}
.contactSite h2 {font-size: 22px;font-weight: 600;line-height:25px;color:#282828;padding-left: 5px;font-family:  'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;border-bottom: 1px solid #000;}
.contactSite > table{border: 1px solid #999;width:100%;}
.contactSite > table thead tr td{
    border: 1px solid #c0ccdd;
    padding: 5px;
    text-align: center;
    background: #dfe8f5;
     color:#1a54c2
     
}
.contactSite > table tbody tr td{
    border: 1px solid #c0ccdd;
    /* height: 25px; */
    padding: 5px;
    font-size:13px;
    text-align:center;
   
}

.contactSite > table tbody tr td:first-child{text-align:center;font-weight:500; text-align:center;}


#info_area{float:left; width:815px;}
#info_area .color_box {float:left;width:50%;padding:46px 0 39px;box-sizing: border-box;}
#info_area .color_box dl{margin-bottom: 10px;}
#info_area .color_box dl dt{display:block;color:#fff;font-size: 26px;line-height:23px;text-align:center;word-break:keep-all;/* transition:transform 600ms ease-in-out 0s; */font-weight: 600;}
#info_area .color_box:hover dl dt{color:#fff; transform:rotateY(360deg);}
#info_area .color_box dl dd{margin: 25px 15px;font-size: 14px;color: #000000b8;text-align:center;line-height: 20px;/* font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif; */font-weight: 500;letter-spacing: -1px;}





#info_area .color_box > a {display:block; width:161px; height:39px; border:1px solid #fff; margin:0 auto; box-sizing:border-box; padding:11px; text-align:center; color:#fff;transition:transform 600ms ease-in-out 0s;}
#info_area .color_box > a > i{display:inline-block; background:url(../images/btn_i.png) no-repeat 0 0; width:17px; height:13px;vertical-align:middle; margin-right:5px;}
#info_area .color_box span {display:block; padding-top:70px;}
#info_area [class^="color"]{height: 100%;display: flex;flex-direction: column;justify-content: center;}

#info_area .color1 {width:33.3%}
#info_area .color1 a:hover {background: #074f48;}

#info_area .color2 {width:33.3%}
#info_area .color2 a:hover {background: #1c4985;}

#info_area .color3 {float:right; width:33.4%}
#info_area .color3 a:hover {background: #03224c;}

#info_area .color1 a{transition: all 150ms linear;background: #097368;}
#info_area .color2 a{transition: all 150ms linear;background: #295a9c;}
#info_area .color3 a{transition: all 150ms linear;background: #001837;}
/*#info_area .photo_gallery .area a{transition: all 150ms linear;}*/

#info_area .color1 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
#info_area .color2 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
#info_area .color3 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
/*#info_area .photo_gallery .area a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}*/




#info_area .color_box.color1 dl dt.txt{ color: #15a293; }
#info_area .color_box.color1 dl dd.stxt{}

#info_area .color_box.color2 dl dt.txt{ color: #467bc2; }
#info_area .color_box.color2 dl dd.stxt{}

#info_area .color_box.color3 dl dt.txt{ color: #11386d; }
#info_area .color_box.color3 dl dd.stxt{}

#info_area .photo_gallery{float:left;width:100%;height: 172px;padding: 30px 15px 30px 50px;background-color:#a3a7a8;}
#info_area .photo_gallery .area{float:left;width: 32%;}
#info_area .photo_gallery .area dl{margin-bottom: 15px;}
#info_area .photo_gallery .area dl dt{display:block;color:#fff;font-size:25px;line-height:23px;text-align: left;margin-top: 7px;word-break:keep-all;}
#info_area .photo_gallery .area dl dd{margin: 10px 0px 0px;font-size:13px;color:#fff;text-align: left;line-height: 18px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
#info_area .photo_gallery .area > a {display:block;width: 110px;height: 27px;border:1px solid #fff;/* margin:0 auto; */box-sizing:border-box;padding: 7px;text-align:center;color:#fff;font-size: 12px;letter-spacing: -1px;transition:transform 600ms ease-in-out 0s;}
#info_area .photo_gallery .area > a > i{display:inline-block;background:url(../images/btn_i.png) no-repeat 0 0;background-size: 12px 10px;width: 12px;height: 10px;vertical-align:middle;margin-right:5px;}
#info_area .photo_gallery .area > a:hover {background: #848586;}


#info_area .photo_gallery ul{width: 67%;float:left;}
#info_area .photo_gallery ul li{float:left; margin-left:15px; border:1px solid #9c9c9c}
#info_area .photo_gallery ul li:first-child{margin-left: 0px;}
#info_area .photo_gallery ul li:hover > a{display:block}
#info_area .photo_gallery ul li:hover > a{outline: 3px solid #686969;box-sizing:border-box;transition: all 100ms linear;}

#info_area .photo_gallery ul li > a >img{width:155px; height:117px}


/*FOOTER VER2.0*/
.footer{position:relative;width:100%;height:130px;padding:35px 0;background: #efefef;z-index:1;}
 .footer .inwrap .b_logo{float:left;width: 270px;border-right: 1px solid #d0d0d0;margin-right:20px;padding-left: 30px;}
 .footer .inwrap .b_logo > span{display:block;width:198px;height: 50px;background: url(../images/f_logo.png) no-repeat 0 5px;opacity: 0.5;filter: grayscale(100%); -webkit-filter: grayscale(100%);}
 .footer .inwrap .copy{float:left;line-height:20px;color: #808080;font-size: 13px;padding-top: 5px;padding-left: 10px;}
 .footer .inwrap .family{float: none;width: 200px;text-align:right;/* display:none */border: 0px solid #bebfbf;padding: 0 10px 0 0;box-sizing: border-box;display: inline-block;background: none;position: absolute;right: 0;background: #e3e2e2;/* height: 40px; */}
 .footer .inwrap .family > select{outline: none;/* margin-top: 15px; */border: 0px solid #11386d;background: none;/* height: 40px; */padding: 0;color: #444444;box-sizing: border-box;/* background: #f5f5f5; *//* margin-right: 15px !important; */padding-left: 10px;width: 100%;margin-top: 0px;/* padding: 10px; */}
 .footer .inwrap .family > select option{width:100%}
 .footer .inwrap .fmenu{}
 .footer .inwrap .fmenu > ul{*zoom:1;}
 .footer .inwrap .fmenu > ul:after{display:block; clear:both; content:'';}
 .footer .inwrap .fmenu > ul li{float:left;padding:0 10px; }
 .footer .inwrap .fmenu > ul li:first-child{padding-left:0px;}
 .footer .inwrap .fmenu > ul li a{color: #11386d;}

#pc_visual{}


#pc_visual.visual_area{background: url(../images/main_bg.png) no-repeat center 0;height: 603px;position: relative;/* display: none; */}
#pc_visual.visual_area .main_visual{position: absolute;/* bottom: 0; */top: 130px;width: 100%;height: 473px;}
#pc_visual.visual_area .main_visual>ul{ position: relative; margin: 0 auto; width: 1500px; height: 100%; display: flex; align-items: center; justify-content: center; }
#pc_visual.visual_area .main_visual>ul>li{ height: 100%; vertical-align: bottom; display: flex; align-items: flex-end; }
#pc_visual.visual_area .main_visual>ul>li>img{}
#pc_visual.visual_area .main_visual .txt_fixed{position:absolute;z-index:100;left: 50%;height: auto;margin-left: -500px;/* z-index: 1000; */width: 1000px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;bottom: 100px;}
#pc_visual.visual_area .main_visual .txt_fixed>h2{ color: #fff; font-size: 57px; text-shadow: 0 0 5px black; font-weight: 300; letter-spacing: -6px; }
#pc_visual.visual_area .main_visual .txt_fixed>h2>strong{ font-weight: 900; }
#pc_visual.visual_area .main_visual .txt_fixed>span{ font-size: 24px; color: #fff; text-shadow: -2px 1px 15px black; display: block; margin-top: 10px; text-align: center; }
#pc_visual.visual_area .main_visual .txt_fixed>img{ width: auto; }


#pc_visual.visual_area .main_visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
#pc_visual.visual_area .main_visual .slideing_box{height: 474px;width: 100%;}
#pc_visual.visual_area .main_visual .slideing_box ul{display:flex; height:100%;}
#pc_visual.visual_area .main_visual .slideing_box ul li div>img{width:100%}
#pc_visual.visual_area .main_visual .slideing_box ul li{height:474px;}
#pc_visual.visual_area .main_visual .slideing_box ul li div.photo01{background: url('../images/visual_01.png') no-repeat center bottom; width:auto;height:474px;}
#pc_visual.visual_area .main_visual .slideing_box ul li div.photo02{background: url('../images/visual_02.png') no-repeat center bottom; width:auto; height:474px;}
#pc_visual.visual_area .main_visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom; width:auto; height:474px;}

#container .banner_area{background: #4f79bf;height: 333px;}
#container .banner_area .inwrap{
    height: 100%;
}
#container .banner_area .inwrap .img{display:flex;height: 100%;width: 100%;justify-content: center;align-items: center;padding-bottom: 10px;}
#container .banner_area .inwrap .img>img{width:auto; height:auto}
  #container .inwrap .content_area{
    width: 100%;
}




/* pc */
@media screen and (min-width:1280px) {

  #pc_visual{display:block;}
  #mobile_visual{display:none}
  .br_mobile{display:none}
  #container .inwrap{}
  #container .inwrap .content_area{display:flex;}
}


/* tab */
@media screen and (min-width: 674px) and (max-width: 1279px) {
  #pc_visual{display:none;}
  #mobile_visual{display:block}
  .br_mobile{display:block}

  .wrap{height:100%;background: url('../images/body_bg.jpg') repeat-x 0 top;}

  .inwrap{width:1260px; margin:0 auto;}

  * { box-sizing: border-box; }

  a, a:link, a:visited { text-decoration: none !important; }

  fieldset input::-webkit-input-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
  fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
  fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }
  fieldset input:-ms-input-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }

  .clearfix{*zoom:1}
  .clearfix:after{ display:block; clear:both; content:'';}

  .wrap{height:100%;background: url('../images/body_bg.jpg') repeat-x 0 top;background-size: 100% auto;}

  .inwrap{width: 100%;margin:0 auto;}



  /* ====================================================================================================================
   * nav
   * ====================================================================================================================*/
  .mgnb{height:102px;/* background:#fff; */}

  .gnb{float:right;margin-top:10px; :82px;}
  .gnb > ul li{float:left;padding: 0px 70px;margin-top: 35px;background:url(../images/gnb_line.png) no-repeat right 7px;text-align: center;border-right: 1px solid #dad6d6;height: 20px;vertical-align: middle;}
  .gnb > ul li:last-child{background:none;border-right: 0px !important;}
  .gnb > ul li > a{font: 600 20px/15pt 'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif; position: relative;}
  .gnb > ul li > a{}
  .gnb > ul li:hover > a,
  .btn-active{font-weight: 500;color: #bdd9ff;padding-bottom:5px;}
  .gnb > ul li.on > a{font-weight:1000; color:#467bc2; border-bottom:3px solid #467bc2; padding-bottom:5px;}
  .gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}


  /**** depth ****/
  .expand {height:0px;overflow:hidden;position: relative;width:100%;background:url(../images/menu_bg.gif) repeat-x center;z-index: 1500;background: #000000bd;border-bottom: 0px solid #4c558142;}
  .expand .download {position:relative;height:170px;text-align:center;width: 1260px;margin:0 auto;text-align:left;font-size:15px;}
  .expand .download ul { height:170px}
  .expand .download .sub1{position:absolute; left:390px; line-height:27px;}
  .expand .download .sub2{position:absolute; left:538px; line-height:27px; padding-left:35px   }
  .expand .download .sub3{position:absolute; left:728px; line-height:27px; padding-left:35px  }
  .expand .download .sub4{position:absolute; left:905px; line-height:27px; padding-left:35px  }
  .expand .close-btn{width:107px;height:23px;position:absolute;left:50%;bottom: 0px;margin-left: 555px;background:url(../images/menu_close.png)no-repeat 0 0;cursor:pointer;}


  [class^="depth"]{position:absolute}
  [class^="depth"] > ul li{width: 150px; line-height: 25px;}
  [class^="depth"] > ul li > a {color: #ffffffc7;text-decoration:none;font-size: 15px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;font-weight: 400;}
  [class^="depth"] > ul li > a:hover {color: #ffffff;font-weight: 600;}
  .depth01{left: 645px; /*430px;*/}
  .depth02{left: 890px; /*645px;*/}
  .depth03{left: 890px; /*890px;*/}
  .depth04{left: 1120px; /*1120px;*/}
  .depth05{left: 885px; /*430px;*/}




  #wrapper {position: relative; width: 100%; }
  /*logo*/
  .header{z-index:11;position: relative;width:100%;height: auto;background:none;border-bottom: 0px solid #efefef;z-index: 900;transition: all 250ms linear;}
  .header .inwrap{z-index: 10;}
  .header .inwrap > h1{float: none;width:150px;padding-top:30px;margin-right:25px;margin: 0 auto;display: flex;align-items: center;justify-content: center;/* background: #fff; */}
  .header .inwrap > h1 > a{display:block; width:198px; height:46px;text-indent:-999em;background:url(../images/h_logo.png)}
  .header .inwrap > h1 > a{display:block;width:198px;height: 40px;text-indent:-999em;background: url(../images/h_logo.png) no-repeat;background-size: auto 35px;}

  /*smenu*/
  .header .smenu_box{height:28px;border-bottom: 0px solid #000;background: #9999992e;}
  .header .smenu_box .inwrap{z-index: 10; position:relative}
  .header .smenu_box .inwrap .smenu{position:absolute;right:0;}
  .header .smenu_box .inwrap .smenu > ul li{float:left; padding:5px 10px;}
  .header .smenu_box .inwrap .smenu > ul li > a{display:block;font-size:11px;margin-top:3px; color:#000;font-family: 'Noto Sans KR', 'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;}



  /*헤더오버 */
  .header:hover,
  .header:hover .inwrap > h1 > a,
  .header:hover .smenu_box .inwrap .smenu > ul li > a,
  .header:hover .gnb > ul li,
  .header:hover .gnb > ul li > a{transition: all 250ms linear;}


  .header:hover{background: none;}
  .header:hover .smenu_box .inwrap .smenu > ul li > a{color:#fff;transition: all 250ms linear;}
  .header:hover .inwrap > h1 > a{filter: brightness(0) invert(0);transition: all 250ms linear;}
  .header:hover .gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}
  .header:hover .gnb > ul li > a{color:#fff}
  .header:hover .gnb > ul li {border-right: 1px solid #777;}




  .bx-controls{width: 100%;position: relative;top: 0;height: auto;margin: 0 auto;}
  /* mainVisul */
  #container{width:100%;background: #fff;}
  #container .inwrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  #container .inwrap .visual .bx-wrapper .bx-viewport {left:0; margin:0; padding:0; border:none; box-shadow:none; overflow:auto; overflow:hidden-x !important;}

  #container .inwrap .visual .bx-wrapper .bx-controls-direction a {width:52px; height:98px;z-index:5000}
  #container .inwrap .visual .bx-wrapper .bx-prev {left:10%; background:url(../images/arrow_left.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-next {right:10%; background:url(../images/arrow_right.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a {width:26px; height:26px; background:url(../images/btn_off.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a.active {background:url(../images/btn_on.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager,
  #container .inwrap .visual .bx-wrapper .bx-controls-auto {bottom:25px;}
  #container .inwrap .visual .bx-wrapper,
  #container .inwrap .visual .bx-wrapper .bx-viewport{height:100%!important} /* 추가 */
  #container .inwrap .visual li {width:100%; height:100%; min-height:890px;}
  #container .inwrap .visual li.slider1 {background:url(../images/main_img01.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li.slider2 {background:url(../images/main_img02.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li.slider3 {background:url(../images/main_img03.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li div {position:absolute; left:50%; width:914px; height:auto; margin:0 auto;}
  #container .inwrap .visual li div.slider_box1,
  #container .inwrap .visual li div.slider_box2,
  #container .inwrap .visual li div.slider_box3 {top:30%; margin-left:-388px;}
  #container .inwrap .visual li div .main_title {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
  #container .inwrap .visual li div .main_title2 {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
  #container .inwrap .visual .more_main{position:absolute; top:70%; left:50%; margin-left:-155px;margin-top:20px; }






  /* vision */
  .section01{width:100%;padding-top:60px;padding:60px 0; background-color:#f5f3f6; text-align:center; z-index:1000;}


  /*게시판영역*/
  .board_area{float: none;width: 100%;padding: 25px 27px;box-sizing: border-box;background-color: #f2f2f2;height: auto;}
  .board{float:left}
  /*공지사항*/
  .mboard{position:relative;width: 100%;box-sizing: border-box;/* height: 171px; */}
  .mboard h2 {font-size: 22px;font-weight: 600;line-height:25px;color:#282828;padding-left: 5px;    font-family:  'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
  .mboard .more {position:absolute;top: 0px;right:0;width:20px;height:21px;font-size:35px;font-weight:600; color:#464646}
  .mboard .more a{display:block;width:100%;height:100%; }
  .mboard .mlist{position:relative;width:100%;/* height: 120px; */overflow:hidden;border-top:1px solid #333;margin-top: 15px;padding-top: 10px;margin-bottom: 0;box-sizing: border-box;}
  .mboard .mlist.last{margin-bottom: 0px;}
  .mboard .mlist li{text-align: right;line-height: 29px;border-bottom:0px solid #4d87d9;font-size:15px;color: #363636;background: url('../images/board_bu.gif') no-repeat 5px 12px;/* letter-spacing:-1px; */}
  .mboard .mlist li > span.icon{font-size:13px;color:#7d7e7e;margin-right: 5px;}
  .mboard .mlist li > span.date{text-align:right;font-size: 13px;
    color: #7d7e7e;
    margin-right: 5px;}
  .mboard .mlist li.new{background:url(../images/mnotice_new.png) no-repeat 5px 14px;}
  .mboard .mlist li a{width:75%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;float: left;text-align: left;padding-left: 15px;color: #edf0f9;font-size: 14px;font-weight:normal;color:#666666;}
  .mboard .mlist li a:hover, .mboard .mlist li a:focus, .mboard .mlist li a:active{color:#333;}
  .mboard:last-child{margin-top: 0;margin-bottom: 0;}



  #info_area{float: none;width: 100%;display: flex;flex-direction: column;background: #fff;}
  #info_area .color_box {float: none;width:50%;padding: 40px 0;box-sizing: border-box;}
  #info_area .color_box dl{margin-bottom: 10px;}
  #info_area .color_box dl dt{display:block;color:#fff;font-size: 25px;line-height:23px;text-align:center;word-break:keep-all;/* transition:transform 600ms ease-in-out 0s; */font-weight: 600;}
  #info_area .color_box:hover dl dt{color:#fff; transform:rotateY(360deg);}
  #info_area .color_box dl dd{margin: 12px 15px 17px;font-size: 14px;color: #000000b8;text-align:center;line-height: 18px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;font-weight: 500;}





  #info_area .color_box > a {display: flex;width: 70%;height: 42px;border:1px solid #fff;margin:0 auto;box-sizing:border-box;padding:11px;text-align:center;color:#fff;transition:transform 600ms ease-in-out 0s;border-radius: 50px;align-items: center;justify-content: center;}
  #info_area .color_box > a > i{display:inline-block; background:url(../images/btn_i.png) no-repeat 0 0; width:17px; height:13px;vertical-align:middle; margin-right:5px;}
  #info_area .color_box span {display:block; padding-top:70px;}
  #info_area [class^="color"]{height: auto;}

  #info_area .color1 {width: 100%;/* border-bottom: 1px solid #e5e5e5; */background: #f9fffe;}
  #info_area .color1 a:hover {background: #074f48;}

  #info_area .color2 {width: 100%;background: #e7eef6;}
  #info_area .color2 a:hover {background: #1c4985;}

  #info_area .color3 {float: none;width: 100%;}
  #info_area .color3 a:hover {background: #03224c;}

  #info_area .color1 a{transition: all 150ms linear;background: #097368;}
  #info_area .color2 a{transition: all 150ms linear;background: #295a9c;}
  #info_area .color3 a{transition: all 150ms linear;background: #001837;}
  /*#info_area .photo_gallery .area a{transition: all 150ms linear;}*/

  #info_area .color1 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  #info_area .color2 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  #info_area .color3 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  /*#info_area .photo_gallery .area a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}*/




  #info_area .color_box.color1 dl dt.txt{ color: #15a293; }
  #info_area .color_box.color1 dl dd.stxt{}

  #info_area .color_box.color2 dl dt.txt{ color: #467bc2; }
  #info_area .color_box.color2 dl dd.stxt{}

  #info_area .color_box.color3 dl dt.txt{ color: #11386d; }
  #info_area .color_box.color3 dl dd.stxt{}

  #info_area .photo_gallery{float:left;width:100%;height: 172px;padding: 30px 15px 30px 50px;background-color:#a3a7a8;}
  #info_area .photo_gallery .area{float:left;width: 32%;}
  #info_area .photo_gallery .area dl{margin-bottom: 15px;}
  #info_area .photo_gallery .area dl dt{display:block;color:#fff;font-size:25px;line-height:23px;text-align: left;margin-top: 7px;word-break:keep-all;}
  #info_area .photo_gallery .area dl dd{margin: 10px 0px 0px;font-size:13px;color:#fff;text-align: left;line-height: 18px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
  #info_area .photo_gallery .area > a {display:block;width: 110px;height: 27px;border:1px solid #fff;/* margin:0 auto; */box-sizing:border-box;padding: 7px;text-align:center;color:#fff;font-size: 12px;letter-spacing: -1px;transition:transform 600ms ease-in-out 0s;}
  #info_area .photo_gallery .area > a > i{display:inline-block;background:url(../images/btn_i.png) no-repeat 0 0;background-size: 12px 10px;width: 12px;height: 10px;vertical-align:middle;margin-right:5px;}
  #info_area .photo_gallery .area > a:hover {background: #848586;}


  #info_area .photo_gallery ul{width: 67%;float:left;}
  #info_area .photo_gallery ul li{float:left; margin-left:15px; border:1px solid #9c9c9c}
  #info_area .photo_gallery ul li:first-child{margin-left: 0px;}
  #info_area .photo_gallery ul li:hover > a{display:block}
  #info_area .photo_gallery ul li:hover > a{outline: 3px solid #686969;box-sizing:border-box;transition: all 100ms linear;}

  #info_area .photo_gallery ul li > a >img{width:155px; height:117px}


  /*FOOTER VER2.0*/
  .footer{position:relative;width:100%;height: 120px;padding: 15px 15px;background: #efefef;/* border-top: 1px solid #e8e8e8; */z-index:1;/* border-top: 1px solid #e8e8e8; */}
   .footer .inwrap .b_logo{float: none;width: 100%;border-right: 1px solid #d0d0d0;margin-right:20px;padding-left: 30px;}
   .footer .inwrap .b_logo > span{display:block;width:198px;height: 50px;background: url(../images/f_logo.png) no-repeat 0 5px;opacity: 0.5;filter: grayscale(100%); -webkit-filter: grayscale(100%);}
   .footer .inwrap .copy{float: none;line-height:20px;color: #808080;font-size: 13px;padding-top: 5px;display: flex;padding-left: 10px;flex-wrap: wrap;align-items: center;justify-content: center;}
   .footer .inwrap .copy>strong{
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    font-size: 11px;
  }
  .footer .inwrap .family{position: relative;width: 85%;margin: 15px auto 15px;}
   .footer .inwrap .family > select{outline: none;/* margin-top: 15px; */border: 0px solid #11386d;background: none;/* height: 40px; */padding: 0;color: #444444;box-sizing: border-box;/* background: #f5f5f5; */float: none;margin-top: 0;/* padding: 10px 0; */height: 40px;}
   .footer .inwrap .family > select > option{width:100%;box-sizing: border-box;}
   .footer .inwrap .fmenu{}
   .footer .inwrap .fmenu > ul{*zoom:1;}
   .footer .inwrap .fmenu > ul:after{display:block; clear:both; content:'';}
   .footer .inwrap .fmenu > ul li{float:left;padding:0 10px; }
   .footer .inwrap .fmenu > ul li:first-child{padding-left:0px;}
   .footer .inwrap .fmenu > ul li a{color: #11386d;}



  /**/
  #pc_visual{display:none;}
  #mobile_visual{display:block}
  #mobile_visual.visual_area{background: url(../images/main_bg.png) no-repeat center -4%;height: 400px;position: relative;overflow: hidden;background-size: 120% auto;}
  #mobile_visual.visual_area .main_visual{position: relative;/* bottom: 0; */top: 0px;width: 100%;height: 100%;}
  #mobile_visual.visual_area .main_visual>ul{ position: relative; margin: 0 auto; width: 1500px; height: 100%; display: flex; align-items: center; justify-content: center; }
  #mobile_visual.visual_area .main_visual>ul>li{ height: 100%; vertical-align: bottom; display: flex; align-items: flex-end; }
  #mobile_visual.visual_area .main_visual>ul>li>img{}
  #mobile_visual.visual_area .main_visual .txt_fixed{position:absolute;z-index:100;/* left: 0; *//* height: 350px; *//* margin-left: 0; *//* z-index: 1000; */bottom: 50px;width: 100%;}
  #mobile_visual.visual_area .main_visual .txt_fixed>img{width: 100%;}
  #mobile_visual.visual_area .main_visual .txt_fixed>h2{color: #fff;font-size: 35px;text-shadow: 0 0 5px black;font-weight: 800;line-height: 40px;letter-spacing: -1px;display: block;justify-content: center;flex-wrap: wrap;width: 90%;text-align: center;margin: 0 auto;}
  #mobile_visual.visual_area .main_visual .txt_fixed>h2>strong{font-weight: 900;display: inline-block;color: #fff;}
  #mobile_visual.visual_area .main_visual .txt_fixed>span{font-size: 18px;color: #fff;text-shadow: -2px 1px 15px black;display: block;margin-top: 10px;text-align: center;width: 80%;margin: 5px auto 10px;line-height: 20px;}

  #mobile_visual.visual_area .main_visual .txt_fixed>span .m_br{display: block;}


  #mobile_visual.visual_area .main_visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
  #mobile_visual.visual_area .main_visual .slideing_box{height: 100%;width: 100%;}
  #mobile_visual.visual_area .main_visual .slideing_box ul{display:flex; height:100%;}
  #mobile_visual.visual_area .main_visual .slideing_box ul li div>img{width:100%}
  #mobile_visual.visual_area .main_visual .slideing_box ul li{height: 300px !important;width: 100% !important;}
  #mobile_visual.visual_area .main_visual .slideing_box ul li div.photo01{background: url('../images/visual_01.png') no-repeat center bottom;width:auto;height: 400px;/* background-size: auto 60%; */background-size: 140% auto;/* background-size: cover; */}
  #mobile_visual.visual_area .main_visual .slideing_box ul li div.photo02{background: url('../images/visual_02.png') no-repeat center bottom;width:auto;height: 400px;background-size: 100% auto;background-size: cover;background-size: 160% auto;}
  #mobile_visual.visual_area .main_visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom;width:auto;height: 450px;background-size: 170% auto;}




  #container .banner_area{background: #4f79bf;height: auto;padding: 20px  10px;}
  #container .banner_area .inwrap{
      height: 100%;
  }
  #container .banner_area .inwrap .img{display:flex;height: 100%;width: 90%;justify-content: center;align-items: center;padding-bottom: 10px;}
  #container .banner_area .inwrap .img>img{width: 100%;height: auto;}

  .bx-wrapper .bx-controls-direction a{display:none;}
}



/* mobile*/
@media screen and (max-width:673px) {
  #pc_visual{display:none;}
  #mobile_visual{display:block}
  .br_mobile{display:block}

  .wrap{height:100%;background: url('../images/body_bg.jpg') repeat-x 0 top;}

  .inwrap{width:1260px; margin:0 auto;}

  * { box-sizing: border-box; }

  a, a:link, a:visited { text-decoration: none !important; }

  fieldset input::-webkit-input-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
  fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8; font-weight:500}
  fieldset input:-moz-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }
  fieldset input:-ms-input-placeholder{ font-size:15px;color: #b8b8b8;font-weight:500 }

  .clearfix{*zoom:1;width: 100%;}
  .clearfix:after{ display:block; clear:both; content:'';}

  .wrap{height:100%;background: url('../images/body_bg.jpg') repeat-x 0 top;background-size: 100%;}

  .inwrap{width: 100%;margin:0 auto;}



  /* ====================================================================================================================
   * nav
   * ====================================================================================================================*/
  .mgnb{height:102px;/* background:#fff; */}

  .gnb{float:right;margin-top:10px; :82px;}
  .gnb > ul li{float:left;padding: 0px 70px;margin-top: 35px;background:url(../images/gnb_line.png) no-repeat right 7px;text-align: center;border-right: 1px solid #dad6d6;height: 20px;vertical-align: middle;}
  .gnb > ul li:last-child{background:none;border-right: 0px !important;}
  .gnb > ul li > a{font: 600 20px/15pt 'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif; position: relative;}
  .gnb > ul li > a{}
  .gnb > ul li:hover > a,
  .btn-active{font-weight: 500;color: #bdd9ff;padding-bottom:5px;}
  .gnb > ul li.on > a{font-weight:1000; color:#467bc2; border-bottom:3px solid #467bc2; padding-bottom:5px;}
  .gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}


  /**** depth ****/
  .expand {height:0px;overflow:hidden;position: relative;width:100%;background:url(../images/menu_bg.gif) repeat-x center;z-index: 1500;background: #000000bd;border-bottom: 0px solid #4c558142;}
  .expand .download {position:relative;height:170px;text-align:center;width: 1260px;margin:0 auto;text-align:left;font-size:15px;}
  .expand .download ul { height:170px}
  .expand .download .sub1{position:absolute; left:390px; line-height:27px;}
  .expand .download .sub2{position:absolute; left:538px; line-height:27px; padding-left:35px   }
  .expand .download .sub3{position:absolute; left:728px; line-height:27px; padding-left:35px  }
  .expand .download .sub4{position:absolute; left:905px; line-height:27px; padding-left:35px  }
  .expand .close-btn{width:107px;height:23px;position:absolute;left:50%;bottom: 0px;margin-left: 555px;background:url(../images/menu_close.png)no-repeat 0 0;cursor:pointer;}


  [class^="depth"]{position:absolute}
  [class^="depth"] > ul li{width: 150px; line-height: 25px;}
  [class^="depth"] > ul li > a {color: #ffffffc7;text-decoration:none;font-size: 15px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;font-weight: 400;}
  [class^="depth"] > ul li > a:hover {color: #ffffff;font-weight: 600;}
  .depth01{left: 645px; /*430px;*/}
  .depth02{left: 890px; /*645px;*/}
  .depth03{left: 890px; /*890px;*/}
  .depth04{left: 1120px; /*1120px;*/}
  .depth05{left: 885px; /*430px;*/}




  #wrapper {position: relative; width: 100%; }
  /*logo*/
  .header{z-index:11;position: relative;width:100%;height: auto;background:none;border-bottom: 0px solid #efefef;z-index: 900;transition: all 250ms linear;}
  .header .inwrap{z-index: 10;}
  .header .inwrap > h1{float: none;width:150px;padding-top:30px;margin-right:25px;margin: 0 auto;display: flex;align-items: center;justify-content: center;/* background: #fff; */}
  .header .inwrap > h1 > a{display:block; width:198px; height:46px;text-indent:-999em;background:url(../images/h_logo.png)}
  .header .inwrap > h1 > a{display:block;width:198px;height: 40px;text-indent:-999em;background: url(../images/h_logo.png) no-repeat;background-size: auto 35px;}

  /*smenu*/
  .header .smenu_box{height:28px;border-bottom: 0px solid #000;background: #9999992e;}
  .header .smenu_box .inwrap{z-index: 10; position:relative}
  .header .smenu_box .inwrap .smenu{position:absolute;right:0;}
  .header .smenu_box .inwrap .smenu > ul li{float:left; padding:5px 10px;}
  .header .smenu_box .inwrap .smenu > ul li > a{display:block;font-size:11px;margin-top:3px; color:#000;font-family: 'Noto Sans KR', 'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;}



  /*헤더오버 */
  .header:hover,
  .header:hover .inwrap > h1 > a,
  .header:hover .smenu_box .inwrap .smenu > ul li > a,
  .header:hover .gnb > ul li,
  .header:hover .gnb > ul li > a{transition: all 250ms linear;}


  .header:hover{background: none;}
  .header:hover .smenu_box .inwrap .smenu > ul li > a{color:#fff;transition: all 250ms linear;}
  .header:hover .inwrap > h1 > a{filter: brightness(0) invert(0);transition: all 250ms linear;}
  .header:hover .gnb > ul li:hover > a{font-weight: 500;color: #ffffff;border-bottom: 3px solid #ffffff;padding-bottom:5px;}
  .header:hover .gnb > ul li > a{color:#fff}
  .header:hover .gnb > ul li {border-right: 1px solid #777;}




  .bx-controls{width: 100%;position: relative;top: -400px;height: 350px;margin: 0 auto;}
  /* mainVisul */
  #container{width:100%;}
  #container .inwrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
  #container .inwrap .visual .bx-wrapper .bx-viewport {left:0; margin:0; padding:0; border:none; box-shadow:none; overflow:auto; overflow:hidden-x !important;}

  #container .inwrap .visual .bx-wrapper .bx-controls-direction a {width:52px; height:98px;z-index:5000}
  #container .inwrap .visual .bx-wrapper .bx-prev {left:10%; background:url(../images/arrow_left.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-next {right:10%; background:url(../images/arrow_right.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a {width:26px; height:26px; background:url(../images/btn_off.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
  #container .inwrap .visual .bx-wrapper .bx-pager.bx-default-pager a.active {background:url(../images/btn_on.png) no-repeat left top;}
  #container .inwrap .visual .bx-wrapper .bx-pager,
  #container .inwrap .visual .bx-wrapper .bx-controls-auto {bottom:25px;}
  #container .inwrap .visual .bx-wrapper,
  #container .inwrap .visual .bx-wrapper .bx-viewport{height:100%!important} /* 추가 */
  #container .inwrap .visual li {width:100%; height:100%; min-height:890px;}
  #container .inwrap .visual li.slider1 {background:url(../images/main_img01.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li.slider2 {background:url(../images/main_img02.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li.slider3 {background:url(../images/main_img03.jpg) no-repeat center top; background-size:cover;}
  #container .inwrap .visual li div {position:absolute; left:50%; width:914px; height:auto; margin:0 auto;}
  #container .inwrap .visual li div.slider_box1,
  #container .inwrap .visual li div.slider_box2,
  #container .inwrap .visual li div.slider_box3 {top:30%; margin-left:-388px;}
  #container .inwrap .visual li div .main_title {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
  #container .inwrap .visual li div .main_title2 {display:block; width:auto; height:auto; margin-left:0; padding-top:0;}
  #container .inwrap .visual .more_main{position:absolute; top:70%; left:50%; margin-left:-155px;margin-top:20px; }






  /* vision */
  .section01{width:100%;padding-top:60px;padding:60px 0; background-color:#f5f3f6; text-align:center; z-index:1000;}


  /*게시판영역*/
  .board_area{/* float: none; */width: 100%;padding: 25px 27px;box-sizing: border-box;/* background-color: #f2f2f2; */height: auto;max-width: 100%;margin: 0 auto;}
  .board{float:left}
  /*공지사항*/
  .mboard{position:relative;width: 100%;box-sizing: border-box;/* height: 171px; */}
  .mboard h2 {font-size: 22px;font-weight: 600;line-height:25px;color:#282828;padding-left: 5px;    font-family:  'Noto Sans KR', NanumSquare, NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
  .mboard .more {position:absolute;top: 0px;right:0;width:20px;height:21px;font-size:35px;font-weight:600; color:#464646}
  .mboard .more a{display:block;width:100%;height:100%; }
  .mboard .mlist{position:relative;width:100%;/* height: 120px; */overflow:hidden;border-top:1px solid #333;margin-top: 15px;padding-top: 10px;margin-bottom: 0;box-sizing: border-box;}
  .mboard .mlist.last{margin-bottom: 0px;}
  .mboard .mlist li{text-align: right;line-height: 29px;border-bottom:0px solid #4d87d9;font-size:15px;color: #363636;background: url('../images/board_bu.gif') no-repeat 5px 12px;/* letter-spacing:-1px; */}
  .mboard .mlist li > span.icon{font-size:13px;color:#7d7e7e;margin-right: 5px;}
  .mboard .mlist li > span.date{text-align:right;font-size: 13px;
    color: #7d7e7e;
    margin-right: 5px;}


  .mboard .mlist li.new{background:url(../images/mnotice_new.png) no-repeat 5px 14px;}
  .mboard .mlist li a{width:75%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;float: left;text-align: left;padding-left: 15px;color: #edf0f9;font-size: 14px;font-weight:normal;color:#666666;}
  .mboard .mlist li a:hover, .mboard .mlist li a:focus, .mboard .mlist li a:active{color:#333;}
  .mboard:last-child{margin-top: 0;margin-bottom: 0;}



  #info_area{float: none;width: 100%;display: flex;flex-direction: column;background: #fff;}
  #info_area .color_box {float: none;width:50%;padding: 40px 0;box-sizing: border-box;}
  #info_area .color_box dl{margin-bottom: 10px;}
  #info_area .color_box dl dt{display:block;color:#fff;font-size: 25px;line-height:23px;text-align:center;word-break:keep-all;/* transition:transform 600ms ease-in-out 0s; */font-weight: 600;}
  #info_area .color_box:hover dl dt{color:#fff; transform:rotateY(360deg);}
  #info_area .color_box dl dd{margin: 12px 15px 17px;font-size: 14px;color: #000000b8;text-align:center;line-height: 18px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;font-weight: 500;}





  #info_area .color_box > a {display: flex;width: 70%;height: 42px;border:1px solid #fff;margin:0 auto;box-sizing:border-box;padding:11px;text-align:center;color:#fff;transition:transform 600ms ease-in-out 0s;border-radius: 50px;align-items: center;justify-content: center;}
  #info_area .color_box > a > i{display:inline-block; background:url(../images/btn_i.png) no-repeat 0 0; width:17px; height:13px;vertical-align:middle; margin-right:5px;}
  #info_area .color_box span {display:block; padding-top:70px;}
  #info_area [class^="color"]{height: auto;}

  #info_area .color1 {width: 100%;/* border-bottom: 1px solid #e5e5e5; */background: #f9fffe;}
  #info_area .color1 a:hover {background: #074f48;}

  #info_area .color2 {width: 100%;background: #e7eef6;}
  #info_area .color2 a:hover {background: #1c4985;}

  #info_area .color3 {float: none;width: 100%;}
  #info_area .color3 a:hover {background: #03224c;}

  #info_area .color1 a{transition: all 150ms linear;background: #097368;}
  #info_area .color2 a{transition: all 150ms linear;background: #295a9c;}
  #info_area .color3 a{transition: all 150ms linear;background: #001837;}
  /*#info_area .photo_gallery .area a{transition: all 150ms linear;}*/

  #info_area .color1 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  #info_area .color2 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  #info_area .color3 a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}
  /*#info_area .photo_gallery .area a:hover{ border: 1px solid rgba(0, 0, 0, 0.05); transition: all 250ms linear;}*/




  #info_area .color_box.color1 dl dt.txt{ color: #15a293; }
  #info_area .color_box.color1 dl dd.stxt{}

  #info_area .color_box.color2 dl dt.txt{ color: #467bc2; }
  #info_area .color_box.color2 dl dd.stxt{}

  #info_area .color_box.color3 dl dt.txt{ color: #11386d; }
  #info_area .color_box.color3 dl dd.stxt{}

  #info_area .photo_gallery{float:left;width:100%;height: 172px;padding: 30px 15px 30px 50px;background-color:#a3a7a8;}
  #info_area .photo_gallery .area{float:left;width: 32%;}
  #info_area .photo_gallery .area dl{margin-bottom: 15px;}
  #info_area .photo_gallery .area dl dt{display:block;color:#fff;font-size:25px;line-height:23px;text-align: left;margin-top: 7px;word-break:keep-all;}
  #info_area .photo_gallery .area dl dd{margin: 10px 0px 0px;font-size:13px;color:#fff;text-align: left;line-height: 18px;font-family: 'Noto Sans KR', NanumBarunGothic, '맑음고딕', Malgun Gothic,'돋움',Dotum, gulim, Helvetica, AppleSDGothicNeo,  sans-serif;}
  #info_area .photo_gallery .area > a {display:block;width: 110px;height: 27px;border:1px solid #fff;/* margin:0 auto; */box-sizing:border-box;padding: 7px;text-align:center;color:#fff;font-size: 12px;letter-spacing: -1px;transition:transform 600ms ease-in-out 0s;}
  #info_area .photo_gallery .area > a > i{display:inline-block;background:url(../images/btn_i.png) no-repeat 0 0;background-size: 12px 10px;width: 12px;height: 10px;vertical-align:middle;margin-right:5px;}
  #info_area .photo_gallery .area > a:hover {background: #848586;}


  #info_area .photo_gallery ul{width: 67%;float:left;}
  #info_area .photo_gallery ul li{float:left; margin-left:15px; border:1px solid #9c9c9c}
  #info_area .photo_gallery ul li:first-child{margin-left: 0px;}
  #info_area .photo_gallery ul li:hover > a{display:block}
  #info_area .photo_gallery ul li:hover > a{outline: 3px solid #686969;box-sizing:border-box;transition: all 100ms linear;}

  #info_area .photo_gallery ul li > a >img{width:155px; height:117px}


  /*FOOTER VER2.0*/
  .footer{position:relative;width:100%;height: 150px;padding: 15px 15px;background: #efefef;/* border-top: 1px solid #e8e8e8; */z-index:1;/* border-top: 1px solid #e8e8e8; */}
   .footer .inwrap .b_logo{float: none;width: 100%;border-right: 1px solid #d0d0d0;margin-right:20px;padding-left: 30px;}
   .footer .inwrap .b_logo > span{display:block;width:198px;height: 50px;background: url(../images/f_logo.png) no-repeat 0 5px;opacity: 0.5;filter: grayscale(100%); -webkit-filter: grayscale(100%);}
   .footer .inwrap .copy{float: none;line-height:20px;color: #808080;font-size: 13px;padding-top: 5px;display: flex;padding-left: 10px;flex-wrap: wrap;align-items: center;justify-content: center;flex-direction: column;}
   .footer .inwrap .copy>strong{
    font-size: 11px;
    display: block;
}
 .footer .inwrap .family{/* float:right; */width: 90%;/* text-align:right; *//* display:none *//* border: 1px solid #11386d; *//* padding: 0 10px; */box-sizing: border-box;position: relative;margin-top: 17px;}
   .footer .inwrap .family > select{outline: none;/* margin-top: 15px; */border: 0px solid #11386d;background: none;/* height: 40px; */padding: 0;color: #444444;box-sizing: border-box;/* background: #f5f5f5; */height: 40px;}
   .footer .inwrap .family > select > option{width:100%}
   .footer .inwrap .fmenu{}
   .footer .inwrap .fmenu > ul{*zoom:1;}
   .footer .inwrap .fmenu > ul:after{display:block; clear:both; content:'';}
   .footer .inwrap .fmenu > ul li{float:left;padding:0 10px; }
   .footer .inwrap .fmenu > ul li:first-child{padding-left:0px;}
   .footer .inwrap .fmenu > ul li a{color: #11386d;}



/**/
#pc_visual{display:none;}
#mobile_visual{display:block}
#mobile_visual.visual_area{background: url(../images/main_bg.png) no-repeat center -15%;height: 300px;position: relative;overflow: hidden;background-size: 120% auto;}
#mobile_visual.visual_area .main_visual{position: relative;/* bottom: 0; */top: 0px;width: 100%;height: 100%;}
#mobile_visual.visual_area .main_visual>ul{ position: relative; margin: 0 auto; width: 1500px; height: 100%; display: flex; align-items: center; justify-content: center; }
#mobile_visual.visual_area .main_visual>ul>li{ height: 100%; vertical-align: bottom; display: flex; align-items: flex-end; }
#mobile_visual.visual_area .main_visual>ul>li>img{}
#mobile_visual.visual_area .main_visual .txt_fixed{position:absolute;z-index:100;/* left: 0; *//* height: 350px; *//* margin-left: 0; *//* z-index: 1000; */bottom: 30px;width: 100%;}
#mobile_visual.visual_area .main_visual .txt_fixed>img{width: 100%;}
#mobile_visual.visual_area .main_visual .txt_fixed>h2{color: #fff;font-size: 25px;text-shadow: 0 0 5px black;font-weight: 800;line-height: 30px;letter-spacing: -1px;display: block;justify-content: center;flex-wrap: wrap;width: 80%;text-align: center;margin: 0 auto;}
#mobile_visual.visual_area .main_visual .txt_fixed>h2>strong{font-weight: 900;display: inline-block;color: #fff;}
#mobile_visual.visual_area .main_visual .txt_fixed>span{font-size: 13px;color: #fff;text-shadow: -2px 1px 15px black;display: block;margin-top: 10px;text-align: center;width: 80%;margin: 5px auto 10px;line-height: 17px;}

#mobile_visual.visual_area .main_visual .txt_fixed>span .m_br{display:none}


#mobile_visual.visual_area .main_visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
#mobile_visual.visual_area .main_visual .slideing_box{height: 100%;width: 100%;}
#mobile_visual.visual_area .main_visual .slideing_box ul{display:flex; height:100%;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div>img{width:100%}
#mobile_visual.visual_area .main_visual .slideing_box ul li{height: 350px !important;width: 100% !important;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo01{background: url('../images/visual_01.png') no-repeat center bottom;width:auto;height: 300px;background-size: 170% auto;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo02{background: url('../images/visual_02.png') no-repeat center bottom;width:auto;height: 300px;background-size: 200% auto;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom;width:auto;height: 340px;background-size: 220% auto;}




  #container .banner_area{background: #4f79bf;height: auto;padding: 20px  10px;}
  #container .banner_area .inwrap{
      height: 100%;
  }
  #container .banner_area .inwrap .img{display:flex;height: 100%;width: 90%;justify-content: center;align-items: center;padding-bottom: 10px;}
  #container .banner_area .inwrap .img>img{width: 100%;height: auto;}

  .bx-wrapper .bx-controls-direction a{display:none;}
  
}


@media screen and (max-width: 330px){
#mobile_visual.visual_area{background: url(../images/main_bg.png) no-repeat center -35%;height: 300px;position: relative;overflow: hidden;background-size: 120% auto;}  
#mobile_visual.visual_area .main_visual .slideing_box{position:relative;width: 100%;margin: 0 auto;}
#mobile_visual.visual_area .main_visual .slideing_box{height: 100%;width: 100%;}
#mobile_visual.visual_area .main_visual .slideing_box ul{display:flex; height:100%;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div>img{width:100%}
#mobile_visual.visual_area .main_visual .slideing_box ul li{height: 350px !important;width: 100% !important;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo01{background: url('../images/visual_01.png') no-repeat center bottom;width:auto;height: 300px;background-size: 170% auto;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo02{background: url('../images/visual_02.png') no-repeat center bottom;width:auto;height: 300px;background-size: 240% auto;}
#mobile_visual.visual_area .main_visual .slideing_box ul li div.photo03{background: url('../images/visual_03.png') no-repeat center bottom;width:auto;height: 340px;background-size: 260% auto;}


  .board_area {/* width:100%; */max-width: 100%;}
  .footer .inwrap .copy{font-size:11px}
  .footer .inwrap .copy > strong{font-size:10px}
  .footer .inwrap .family{position: relative;width: 95%;margin: 15px auto 15px;}
  


}