@charset "utf-8";

.wrap{ width: 100%; max-width: 1200px; margin: 0 auto;}
.blank{ display: block;}
@media all and (max-width:1023px) {
    .wrap{ box-sizing: border-box; padding: 0 2.5%;}
}

/*메인*/
/*네비게이션*/
html, body {width: 100%; height: 100%;}
.mobile_side, #mobile_nav, #mask_mNav {display: none;}
.headerWrap {width: 100%;}
#header .logo {width: 1200px; margin: 0 auto; position: relative;}
#header .logo h1 {position: absolute; top:41px; left:15px; z-index: 100;}
#header .top_menu_wrap {width: 100%; height: 31px; background: #196aa9;}
.top_menu_wrap .top_menu {width: 1200px; height: 31px; margin: 0 auto; position: relative; z-index: 50;}
.gnb {float: right;}
.gnb > li {float: left; margin-left: 22px;}
.gnb > li a {line-height: 31px; color:#fff; font-size: 12px;}
.lnb {width: 100%; height: 83px; background: #fff; position: relative;}
.lnbInner {width: 100%; height: 0; background: #43413d; position: absolute; top:84px;  z-index: 30;}
.lnbWrap {width: 1200px; height: 83px; margin: 0 auto; position: relative; z-index: 30;}
.nav {float: left; margin-left: 300px; width: 806px; position: relative;}
.m_nav {margin-top: 25px;}
.m_nav > li {float: left; padding: 0 25px;}
/*.m_nav .lnb_06 {padding-right: 28px;}*/
.m_nav > li > a {font-size: 20px; display: block; height: 100%; line-height: 43px; text-align: center;}
.m_nav > li > a.on, .m_nav > li > a:hover {border-bottom: 2px solid red;}
.m_nav .lnb_box {position: absolute; top:82px; left:0;}
.m_nav .lnb_03 .lnb_box { left:220px; }
.m_nav .lnb_04 .lnb_box { left:300px; }
.m_nav .lnb_05 .lnb_box { left:500px; }
.m_nav .lnb_06 .lnb_box { left:450px; }
.box_nav {padding: 20px;}
.box_nav li {float: left;}
.box_nav li a {font-size: 16px; font-weight: 300; display: block; overflow: hidden; color:#fff; margin: 0 16px;}
.box_nav li a[target="_blank"] {background:url(/ko/img/sub/ico_blank_w.png) no-repeat right 2px; padding-right:15px;}
.side_lnb {float: right; margin-top: 25px;}
.side_lnb ul li {float: left;}
.side_lnb > ul > li > a {display: block; font-size: 0;width: 43px; height: 44px;}
.side_lnb .search > a {background:#009944 url(/giupsos/images/main/find.png) no-repeat center center; border: 1px solid #009944; margin-right: 7px;}
.side_lnb .sitemap_btn > a {background: url(/giupsos/images/main/top_sitemap.png) no-repeat center center; border: 1px solid #cccccc;}
.side_lnb .side_lnb_box {position: absolute; top:85px; left:0; width: 1200px;}

.sideLnbInner {width: 100%; height: 120px; background: #fff; position: absolute; top:83px; border-top: 1px solid #c7c7c7; z-index: 30;}
.side_lnb_box .searchFrm {width: 532px; margin: 30px auto 0;}
.side_lnb_box .searchFrm input {width: 466px; height: 54px; border: 2px solid #009d4e; font-size: 16px; padding: 0 20px;}
.side_lnb_box .searchFrm .search_btn {width: 56px; height: 54px; background: #009d4e url(/giupsos/images/main/find_01.png) no-repeat center center; border: 0; vertical-align: middle; margin-left: -4px; text-indent: -99999%; cursor:pointer;}
.side_lnb_box .words {width: 482px; margin: 20px auto 0;}
.side_lnb_box .words p {float: left; font-weight: 600; font-size: 15px; line-height: 10px; }
.side_lnb_box .words ul li {float: left; margin-left: 15px;}
.side_lnb_box .words ul li a {display: block; height: 13px; line-height: 11px; padding-right: 10px; border-right: 1px solid #c7c7c7;}
.side_lnb_box .words ul li:last-child a {border: 0;}
.side_lnb_box .close {display: block; width: 50px; height: 50px; background: #9f9f9f url(/giupsos/images/main/close.png) no-repeat center center; text-indent: 110%; white-space: nowrap; overflow: hidden; position: absolute; top:34px; right:13px; cursor: pointer;}


/*테블릿_모바일_네비게이션*/
@media all and (max-width:1023px) {
  #header {height: 80px; z-index: 100; border-bottom: 1px solid #c7c7c7; width: 100%;}
  #header .top_menu, #header .lnb,#header .top_menu_wrap {display: none;}
  #header .logo h1 {top:15px; left:20px;}
  #header .mobile_side {display: block; float: right; margin: 30px 30px 0 0;}
  #mask_mNav {width: 100%;height: 100%;position: absolute; top:0; left:0; background: rgba(0, 0, 0, 0.6); z-index: 110; position: fixed;}
  .stop_scrolling {height: 100%; overflow: hidden !important; position: fixed;}
  .mobile_side ul li {float: left;}
  .mobile_side .side_lnb_box {width: 100%; background: #fff; position: absolute; top:80px; left:0; z-index: 50; padding: 0 0 30px; border-top: 1px solid #c7c7c7;}
  .mobile_side .sideLnbInner {width: 100%; height: 150px; background: #fff; position: absolute; top:33px; border-top: 1px solid #c7c7c7; z-index: 30;}
  .mobile_side .side_lnb_box .searchFrm {width: 70%; max-width: 559px; margin: 30px auto 0;}
  .mobile_side .side_lnb_box .searchFrm input {width: 89%; max-width: 504px; height: 54px; border: 2px solid #009d4e; font-size: 16px; padding: 0 20px;}
  .mobile_side .side_lnb_box .searchFrm .search_btn {width: 11%; max-width: 56px; height: 54px; background: #009d4e url(/giupsos/images/main/find_01.png) no-repeat center center; border: 0; vertical-align: middle; margin-left: -4px; text-indent: -99999%;}
  .mobile_side .side_lnb_box .words {width: 482px; margin: 20px auto 0;}
  .mobile_side .side_lnb_box .words p {float: left; font-weight: 600; font-size: 15px; line-height: 10px; }
  .mobile_side .side_lnb_box .words ul li {float: left; margin-left: 15px;}
  .mobile_side .side_lnb_box .words ul li a {display: block; height: 13px; line-height: 11px; padding-right: 10px; border-right: 1px solid #c7c7c7;}
  .mobile_side .side_lnb_box .words ul li:last-child a {border: 0;}
  .mobile_side .side_lnb_box .close {display: block; width: 50px; height: 50px; background: #9f9f9f url(/giupsos/images/main/close.png) no-repeat center center; position: absolute; top:0px; right:0; cursor: pointer; white-space: nowrap; overflow: hidden; text-indent: -999999%;}
  .mobile_side .search > a {display: block; width: 24px; height: 24px; background: url(/giupsos/images/main/m_find.png) no-repeat center center; text-indent: -9999%; margin-right: 25px;}
  .mobile_side .open {width: 25px; height: 19px; background: url(/giupsos/images/main/sitemap.png) no-repeat center center; text-indent: -9999%; cursor: pointer; margin-top:2px}
  #mobile_nav, #mask_mNav {display: block;}
  #mobile_nav {position: fixed; top:0; right:-300px; z-index: 5000; width: 300px; height: 200%; background: #fff; overflow-y: auto; box-sizing:border-box;background: #009d4e;}
  #mobile_nav > div {min-height: 200%}
  #mobile_nav .top_wrap {padding: 10px; height: 60px; background: #fff;}
  #mobile_nav .top_wrap ul {overflow: hidden;}
  #mobile_nav .top_wrap ul li {float: left;}
  #mobile_nav .top_wrap ul li a {display: block; border: 1px solid #cbcbcb; margin-right: 10px; height: 38px; line-height: 38px;}
  #mobile_nav .top_wrap ul li.last a {margin-right: 0;}
  #mobile_nav .top_wrap .top01 {margin-bottom: 10px;}
  #mobile_nav .top_wrap .top01 ul li a { width: 101px;}
  #mobile_nav .top_wrap .top01 .sj a {background: url(/giupsos/images/top_ico02.png) no-repeat 11px center; padding-left: 37px;}
  #mobile_nav .top_wrap .top01 .tour a {background: url(/giupsos/images/top_ico03.png) no-repeat 11px center; padding-left: 37px;}
  #mobile_nav .top_wrap .top01 ul li img {margin: 6px 0 0 11px; cursor: pointer;}
  #mobile_nav .top_wrap .top02 li {float: left;}
  #mobile_nav .top_wrap .top02 li a {width: 101px;text-align: center; color:#fff; font-size: 16px; border: 0;}
  #mobile_nav .top_wrap .top02 a.link_01 {background: #009944;}
  #mobile_nav .top_wrap .top02 a.link_02 {background: #004ea2;}
  #mobile_nav .mnav_wrap {background: #009d4e; height: 100%;}
  #mobile_nav .mnav_wrap nav > ul > li > a {display: block; height: 50px; width: 105px; text-align: center; line-height: 50px; color:#fff; font-size: 15px; border-bottom: 1px solid #01b65b;}
  #mobile_nav .mnav_wrap nav > ul > li.on > a, #mobile_nav .mnav_wrap nav > ul > li > a:hover {background: #006a35;}
  #mobile_nav .mnav_wrap .m_depth02 {width: 180px; height: 200%; background: #fff; position: absolute; top:60px; right:0;}
  #mobile_nav .mnav_wrap .m_depth02 > li {overflow: hidden;}
  #mobile_nav .mnav_wrap .m_depth02 > li > a {display: block; height: 50px; line-height: 50px; padding-left: 20px; font-size: 15px; border-bottom: 1px solid #e1e1e1;}
  #mobile_nav .mnav_wrap .m_depth02 > li > a.on, #mobile_nav .mnav_wrap .m_depth02 > li > a:hover {background: #333333; color: #fff;}
  #mobile_nav .mnav_wrap .m_depth03 {background: #e9e9e9;}
  #mobile_nav .mnav_wrap .m_depth03 a {display: block; height: 40px; line-height: 40px; padding: 0 20px; border-bottom: 1px dashed #cbcbcb; margin: 0 10px;}
}
/*모바일*/
@media all and (max-width:490px) {
  .mobile_side .side_lnb_box .searchFrm {width: 70%;}
  .mobile_side .side_lnb_box .searchFrm input {width: 81%;}
  .mobile_side .side_lnb_box .searchFrm .search_btn {width: 19%;}
  .mobile_side .side_lnb_box .words {width: 344px;}
  .mobile_side .side_lnb_box .words p {font-size: 14px;}
  .mobile_side .side_lnb_box .words ul li {margin-left: 3px;}
  .mobile_side .side_lnb_box .words ul li a {font-size: 12px; padding-right: 5px;}
}
@media all and (max-width:320px) {
  .mobile_side .side_lnb_box .searchFrm input {width: 78%; padding: 0 10px;}
  .mobile_side .side_lnb_box .words {width: 283px;}
  .mobile_side .side_lnb_box .words p {display: none;}
}

/*플레이버튼*/
/*.play_btn {width: 81px; height: 22px;}
.play_btn ul {overflow: hidden;}
.play_btn ul li {float: left; width: 23px; height: 23px; margin-right: 4px; cursor: pointer;}
.play_btn .btnPrev {background: url(/giupsos/images/main/play_btn.png) no-repeat left center;}
.play_btn .btnNext {background: url(/giupsos/images/main/play_btn.png) no-repeat -23px center;}
.play_btn .btnAutoStop {background: url(/giupsos/images/main/play_btn.png) no-repeat -69px center;}
.play_btn .btnAuto {background: url(/giupsos/images/main/play_btn.png) no-repeat -46px center;}
.play_btn .btnMore {background: url(/giupsos/images/main/play_btn.png) no-repeat right center;}*/



/*메인컨텐츠*/

/*메인비주얼*/
.main_visual{ width: 100%; height: 460px; background: url(/giupsos/images/main/m_visual.png) no-repeat center center; background-size: cover;}

/*공지사항,구인구직,팝업존*/
.m_content{ margin-top: 45px; overflow: hidden;}
.m_content .con1{ width: 307px;; float: left; margin-right:40px; position: relative;}
.m_content h3{ font-size: 20px; margin-bottom: 15px;}
.m_content a.board_go{ position:absolute; top:0; right:0; display: block; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid #cccccc; background: url(/giupsos/images/main/go_bg.png) no-repeat center center; text-indent: -9999px; float: right;}
.m_content .con1 ul li{ line-height: 36px;}
.m_content .con1 ul li a{ display: block; width: 100%; height: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 15px;}
.m_content .con1 ul li img{ vertical-align: middle; margin-right: 5px;}

.m_content .con2{ float: left;width: 400px; position:relative;}
.m_content .con2 li{ border-bottom: 1px dotted #d8d8d8; padding-top: 15px;}
.m_content .con2 li a{ display: block; width: 100%; height: 100%;}
.m_content .con2 li p{ width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 7px;}
.m_content .con2 li span{ display: block; font-size: 14px; color: #757575; margin:10px 0 13px;}


/*알림창*/
.notice{ float: right; width: 386px;}
.notice .play_btn{ width: 100%;  overflow: hidden;}
.notice .play_btn .con_title{ float: left;}
.notice .play_btn ul{ float: right;}
.notice .play_btn ul li{ float: left; overflow: hidden; border: 1px solid #cccccc; border-right: 0;}
.notice .play_btn ul li.btnNext{ border-right: 1px solid #cccccc;}
.notice .play_btn ul li a{display: block; width: 21px; height: 21px; background-color: white;}
.notice .btnPrev a{ background: url(/giupsos/images/main/slide_prev.png) no-repeat center center; text-indent:-9999px; font-size:0;}
.notice .btnAuto a{background: url(/giupsos/images/main/slide_stop.png) no-repeat center center; text-indent:-9999px; font-size:0;}
.notice .btnStop a{background: url(/giupsos/images/main/slide_auto.png) no-repeat center center; text-indent:-9999px; font-size:0;}
.notice .btnNext a{background: url(/giupsos/images/main/slide_next.png) no-repeat center center; text-indent:-9999px; font-size:0;}
.notice .banner{overflow: hidden; border: 1px solid #cccccc; box-sizing: border-box;}
.notice .banner .bn_slide img { width:384px; height:212px; }
.notice .bx-viewport{ height: 212px !important;}
.m_quick{ clear: both;}


/*바로가기*/
.m_quick{ margin-top: 53px; overflow: hidden;}
.m_quick ul li{ float: left; width: 25%; height: 270px; position: relative;}
.m_quick  .quick1{ background: #ff7a39;}
.m_quick  .quick2{ background: #009944;}
.m_quick  .quick3{ background: #717171;}
.m_quick  .quick4{ background: #28649a;}
.m_quick .img1{ background: url(/giupsos/images/main/quick_bg1.png) no-repeat center center; background-size: cover;}
.m_quick .img2{ background: url(/giupsos/images/main/quick_bg2.png) no-repeat center center; background-size: cover;}
.m_quick .img3{ background: url(/giupsos/images/main/quick_bg3.png) no-repeat center center; background-size: cover;}
.m_quick .img4{ background: url(/giupsos/images/main/quick_bg4.png) no-repeat center center; background-size: cover;}
.m_quick ul li img{display: block; margin: 0 auto;}
.m_quick ul li a{display: table; width: 100%; height: 100%;}
.m_quick ul li h3{width: 100%; text-align: center; margin-top: 18px; font-size: 24px; color: white;}
.m_quick ul li span{ display: block; width: 100%; text-align: center; color: white; font-size: 14px; margin-top: 5px;}
.m_quick .inner{ display:table-cell; vertical-align:middle;/*position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;*/}


/*메인 배너모음*/
#main_banner {width: 100%; max-width: 1200px; margin: 0 auto; height: 41px;  margin-bottom: 20px; margin-top: 60px;}
#main_banner .ad_warp {width: 1200px; margin: 0 auto; overflow: hidden;}
#main_banner h3 {font-size: 17px; font-weight: 600; float: left; line-height: 66px; padding-left: 30px; padding-right: 30px;}
#main_banner .play_btn {float: left; width: 108px; margin-top: 23px;}
#main_banner .slider {height: 47px; width: 90%; overflow: hidden; position: relative; float: left;  margin-left: 30px}
#main_banner .slider ul {width: 3000px; position: relative;}
#main_banner .slider ul li {float: left; padding: 0 30px; }
#main_banner .slider ul li a {display: block;}
#main_banner .slideBtn{ float: left;}
#main_banner .slideBtn ul{ position: relative;}
#main_banner .slideBtn ul li{ float: left; overflow: hidden; border: 1px solid #cccccc; border-right: 0;}
#main_banner .slideBtn ul li.slide_next{ border-right: 1px solid #cccccc;}
#main_banner .slideBtn ul li a{ display: block; width: 26px; height: 26px;}

#main_banner .slideBtn .slide_prev{ background: url(/giupsos/images/main/slide_prev.png) no-repeat center center; text-indent:-9999px; font-size:0;}
#main_banner .slideBtn .slide_auto{background: url(/giupsos/images/main/slide_auto.png) no-repeat center center; text-indent:-9999px; font-size:0;}
#main_banner .slideBtn .slide_stop{background: url(/giupsos/images/main/slide_stop.png) no-repeat center center; text-indent:-9999px; font-size:0;}
#main_banner .slideBtn .slide_next{background: url(/giupsos/images/main/slide_next.png) no-repeat center center; text-indent:-9999px; font-size:0;}
@media all and (max-width:1023px) {
    #main_banner{ padding: 0;height: 63px; border-radius: 0; margin-bottom: 0; border: 0; border-top: 1px solid #cccccc;}
    #main_banner .ad_warp{ height: 63px;}

    #main_banner .ad_warp {width: 100%;}
    #main_banner .slider_banner {width: 70%; height: 61px; float: left;}
    #main_banner .slider {width: 100%; top:25px; margin: 0;}
}





/*푸터*/
#footer {clear: both; border-top: 1px solid #cccccc;}
#footer .footer_inner {width: 1200px; margin: 0 auto; overflow: hidden; padding: 30px 0; position: relative;}
#footer .footer_inner .footMenu .list01 {overflow: hidden; margin-bottom: 15px;}
#footer .footer_inner .footMenu .list01 li {float: left;}
#footer .footer_inner .footMenu .list01 li a {padding: 0 10px; font-size: 14px; border-right: 1px solid #cccccc;}
#footer .footer_inner .footMenu .list01 .link01 a {padding-left: 0;}
#footer .footer_inner .footMenu .list01 .link03 a {background: none;  border-right: 0;}
#footer .footer_inner .footMenu p {font-size: 13px; color:#939393; line-height: 15px;}
#footer .footer_inner .footList {position: absolute; top: 30px; right:0;}
#footer .footer_inner .footList ul {overflow: hidden;}
#footer .footer_inner .footList ul li {float: left; margin-left: 7px;}
#footer .footer_inner .footList select {border: 1px solid #cccccc; font-size: 13px; padding: 4px;}
#footer .footer_inner .footList .list01 select {width: 150px;}
#footer .footer_inner .footList .list02 select {width: 209px;}



@media all and (max-width:1200px) {
    html,body{ min-width: 1200px;}
}

/*********************태블릿**************************/

@media all and (max-width:1023px) {
html,body{ min-width: 0px;}
  #header .logo {width: 100%;}

  .main_visual{ height: 290px;}

.m_content .wrap{ padding: 0;}
.m_content .con1, .m_content .con2{width: 49%; float: left; margin: 0; overflow: hidden; box-sizing: border-box;}
.m_content .con1{ margin-right: 1%; padding-left: 2.5%;}
.m_content .con2{ margin-left: 1%; padding-right: 2.5%;}
.m_content .con3{ clear: both; width: 100%; margin-top: 36px; padding: 34px 2.5%; background: #9db6cd; box-sizing: border-box;}

.notice .play_btn{ width: 386px; margin: 0 auto;}
.notice  .banner{ width: 386px; margin: 0 auto;}

.m_quick{ overflow: hidden; margin-bottom: 37px; margin-top: 37px;}
.m_quick ul li{ height: 150px;}
.m_quick ul li h3{ font-size: 16px;}
.m_quick ul li span{ font-size: 13px;}
.m_quick ul li img{ width: 15%;}



    #main_banner{ display: none;}

  #footer {width: 100%;}
  #footer .footer_inner {width: 100%; padding: 20px 20px 40px;}
  #footer .footer_inner img {display: none;}
  #footer .footer_inner .footMenu {margin-left: 0;}
  #footer .footer_inner .footList {display: none;}
}

@media all and (max-width:900px) {
  .footMenu ul li {margin: 5px 0;}
  .footMenu ul li a {padding: 0 10px;}
  .footMenu ul li.bo_no {border-left: 1px solid #6f6f6f;}
  .footMenu ul li.bo_no a {padding-left: 10px;}
}



@media all and (max-width:640px) {
    .main_visual{ height: 184px;}
    .m_content{ margin-top: 25px;}
    .m_content .con1, .m_content .con2{ width: 100%; margin: 0 auto; padding: 0 2.5%;}
    .m_content .con1{ padding-bottom: 25px; border-bottom: 1px solid #cccccc; margin-bottom: 25px;}
    .m_quick ul{ overflow: hidden;}
    .m_quick ul.first_row{ margin-bottom: 20px;}
    .m_quick ul li{ width: 50%; height: 100px;}
    .m_quick ul li.img_area{ display: none;}
    .m_quick ul li.quick1, .m_quick ul li.quick3{width: 48.5%;}
    .m_quick ul li.quick2, .m_quick ul li.quick4{width: 48.5%; float: right;}
    .m_quick ul li span{ display: none;}
    .m_quick ul li img{ min-width: 30px;}

}
@media all and (max-width:420px){
    .notice  .banner, .notice .play_btn{ width: 90%;}
    .notice .banner .bn_slide img { width:80vw; height:auto; }
    .notice .bx-viewport{ height: auto !important;}
}

@media all and (max-width:480px) {
  #header .logo h1 {top:14px; left:10px;}
  #header .logo h1 a img {width: 82%}
  #header .mobile_side {margin: 25px 10px 0 0;}

  #main_banner {height: 95px;}
  #main_banner .ad_warp {height: 82px;}
  #main_banner .slider_banner {width: 100%;}
  #main_banner .slider {top:-5px;}

  #footer .footer_inner {padding: 20px 10px 30px;}
  #footer .footer_inner ul {width: 100%;}
  #footer .footer_inner ul li {float: none; text-align: center; margin-left: 0;}
  #footer .footer_inner .footMenu .list01 .link01 a,#footer .footer_inner .footMenu .list01 li a {padding: 0 10px;}
}