@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : MONI
Create date : 2020-11-09
-------------------------------------------------*/
/*-------------------------------------------------
title       : 레이아웃
Author      : MONI
Create date : 2022-03-23
Last modification : 2022-03-29
-------------------------------------------------*/


#skip_nav{position:absolute; margin:0 auto; width:998px; list-style:none; font-size:1.15em; top:-10.5em; left:0; z-index:2000; background:#eee; border:1px solid #ccc;}
#skip_nav a:active, #skipNavi a:focus{ position: absolute; padding-top: 0.5em; width: 998px; height: 2em; top: 10.5em; text-align: center; color: #000; font-weight:bold; background: #eee; border: 1px solid #ccc; outline: 0;}

.hide{position:absolute; overflow:hidden; width:0; height:0; font-size:0;}

/* header */
#header{position:relative;}
.header_wrap{height:131px;}
.header_wrap:after{display:block; content:""; clear:both;}
.header_wrap #logo{position:relative; margin:0 auto; width:1200px;}
.header_wrap #logo a{display:block;position:absolute; top:71px; left:0;line-height:1;z-index:1510;}
.header_navi{height:45px; background:#546b82;}
.header_navi .utill{margin:0 auto; width:1200px;}
.header_navi .utill::after{display:block; content:""; clear:both;}
.header_navi .utill_menu{float:right; overflow:hidden;}
.header_navi .utill_menu li{float:left; border-right:1px solid #76899b; line-height:45px; transition:all 0.5s ease;}
.header_navi .utill_menu li:first-child{border-left:1px solid #76899b;}
.header_navi .utill_menu li:hover{background:#3f576e;}
.header_navi .utill_menu li a{display:block; padding:0 20px; color:#fafafa; font-size:13px;}
.header_navi .utill_menu .top_search{padding: 0 10px;}
.header_navi .utill_menu .top_search input[type=text]{width:200px;height: 28px;padding: 0 10px;margin-right: 10px;display: inline-block;vertical-align: middle;font-size:14px;}
.header_navi .utill_menu .top_search button{display: inline-block;vertical-align: middle;}
.header_navi .utill_menu .top_search img{vertical-align: middle;}
.header_krihs_mobile{display:none; overflow:hidden; position:absolute;}
.header_krihs_mobile a{display:inline-block; position:relative; float:right; z-index:1505; text-indent:-9999px; width:115px; height:36px; background:url(/gdpc/img/layout/krihs.png) no-repeat 16px 7px #fafafa; border:1px solid #d3d3d3; border-radius:2px; box-sizing:border-box;right:42px;margin-left:10px;}
.header_krihs_mobile a.logo{width:134px; height:38px; background-image:url(/gdpc/img/layout/unopen.png);background-position: left top;border: none;}

#gnb2 .control{overflow:hidden;text-indent:-9999px;font-size:0;line-height:0;}
#gnb2 .control.open{display:none;width:22px;aspect-ratio:22 / 19;background:no-repeat 50% 50%/contain;}
.m_option{display:none;}

#gnb1{overflow:hidden; position:absolute; top:45px; left:0; width:100%; height:86px; z-index:1500;}
#gnb1 > ul .submenu{display:block !important;}
#gnb1_bg{display:none; position:absolute; top:86px; left:0; width:100%; height:310px; background:#fcfcfc; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;}
#gnb1.active{overflow:visible;}
#gnb1.active #gnb1_bg{display:block;}
#gnb1 > ul{position:relative; width:1200px; height:398px; margin:0 auto; z-index:500;}
#gnb1 > ul > li{float:left; margin:0; padding:0; height:398px;}
#gnb1 > ul > li:first-child{margin-left:265px;}
#gnb1 > ul > li > a{display:block; position:relative; padding:32px 0px; margin:0 16px; text-align:center; color:#333; font-size:22px; font-weight:500; line-height:22px;}
#gnb1 > ul > li > a::after{content:""; position:absolute; left:0; bottom:26px; width:0; height:2px; background:#555; transition:width 0.5s ease;}
#gnb1 > ul > li:hover > a::after{width:100%;}
#gnb1 > ul > li > .submenu{visibility:hidden;opacity:0;display:block !important; position:absolute; top:87px; padding-top:85px; width:300px; height:308px; border-right:1px solid #dbdbdb; box-sizing:border-box; transition:all 0.5s ease;}
#gnb1.active > ul > li > .submenu{visibility:visible;opacity:1;}
#gnb1 > ul > li.lnb1 > .submenu{left:0;}
#gnb1 > ul > li.lnb2 > .submenu{left:25%;}
#gnb1 > ul > li.lnb3 > .submenu{left:50%;}
#gnb1 > ul > li.lnb4 > .submenu{left:75%;}
#gnb1 > ul > li:hover > .submenu{background:#f5f5f5;}
#gnb1 > ul > li:first-child .submenu{border-left:1px solid #dbdbdb;}
#gnb1 > ul > li > .submenu > a{position:absolute;top:25px;left:0;text-align:center;padding-bottom:15px;width:100%;color:#224875;font-size:18px;font-weight:500;z-index:1;}
#gnb1 > ul > li > .submenu > a::after{content:"";position:absolute;bottom:0;left:50%;margin-left:-15px;width:30px;height:2px;background:#224875;}
#gnb1 > ul > li > .submenu > ul > li{position:relative; padding-left:12px; margin:0 35px;}
#gnb1 > ul > li > .submenu > ul > li::after{content:""; position:absolute; top:15px; left:0; width:4px; height:4px; background:#888; border-radius:2px;}
#gnb1 > ul > li > .submenu > ul > li a{display:block; text-align:left; padding:7px 0px; color:#333; font-size:15px; line-height:17px;}
#gnb1 > ul > li > .submenu > ul > li a:hover{color:#494949; text-decoration:underline;}
#gnb1 > ul > li > .submenu > ul > li > div{display:none;}

.header_krihs{overflow:hidden; position:absolute; bottom:25px; left:50%; margin-left:-600px; width:1200px;}
.header_krihs a{position:relative; float:right; z-index:1505; text-indent:-9999px; width:115px; height:36px; background:url(/gdpc/img/layout/krihs.png) no-repeat 16px 7px #fafafa; border:1px solid #d3d3d3; border-radius:2px; box-sizing:border-box;}
.header_krihs a.logo{width:134px;height:38px;background:url(/gdpc/img/layout/unopen.png) no-repeat 0px 0px #fff;border:0px;margin-left:26px;}

/* footer */
#footer{background:#4c535b;}
.f_wrap{overflow:hidden; padding:40px 0; width:1200px; margin:0 auto;}
.f_logo{float:left; margin:20px 55px 0 0;}
.f_sns{overflow:hidden; float:right;}
.f_sns li{float:left; margin-left:10px;}
.f_sns a{display:block;}
.f_txt{float:left;}
.f_txt p{margin-bottom:5px; color:#9da3aa;}
.f_txt p:first-child{margin-bottom:10px;}
.f_txt p b{color:#d9d9d9; font-weight:normal;}

/* drawer */
.dmm{position:fixed; top:0; left:0; right:0; height:10000px; background-color:rgba(0, 0, 0, 0.7); z-index:6000}
#gnb2:before{content:"";visibility:hidden;position:fixed;top:0;left:100%;width:100%;max-width:260px;height:100vh;background-color:#fff;transition:.5s transform, 0s visibility .5s;z-index:6500}
#gnb2 .head_menu_all_container{visibility:hidden;position:fixed; top:0; left:100%; width:100%; max-width:260px; max-height:100vh;transition:.5s transform, 0s visibility .5s;overflow-y:auto;z-index:7000;}
#gnb2.active:before,
#gnb2.active .head_menu_all_container{visibility:visible;transform:translatex(-100%);transition-delay:0s;}
#gnb2.active:after{content:"";position:fixed;top: 0;left:0;width:100vw;height:100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 5000;}
#gnb2 .control.close{visibility:hidden;position:fixed;top:24px;left:100%;width:30px; height:29px; background:url(/gdpc/img/layout/bg_btn.png) no-repeat 0 0; z-index:6001;transition:.5s left;transform:translatex(calc(-100% - 15px));}
#gnb2.active .control.close{visibility:visible;left:calc(100% - 260px);}
.head_menu_all_top{display:none;}
#gnb2 .head_menu_all_top{display:block;overflow:hidden; width:100%; background:#546b82;}
#gnb2 .head_menu_all_top p{float:left;}
#gnb2 .head_menu_all_top p.gnbHome{margin:0;padding:20px 4px 8px 20px;}
#gnb2 .head_menu_all_top p.sitemap{margin:0;padding:20px 20px 8px 4px;}
#gnb2 .head_menu_all_top .top_search{padding: 0 20px 20px;}
#gnb2 .head_menu_all_top .top_search input[type=text]{height: 28px;padding: 0 10px;margin-right: 8px;display: inline-block;vertical-align: middle;width:180px;font-size:14px;}
#gnb2 .head_menu_all_top .top_search button{display: inline-block;vertical-align: middle;}
#gnb2 .head_menu_all_top .top_search img{vertical-align: middle;}
#gnb2 .head_menu_all_top p a{display:block; text-align:center; margin:0 auto; width:105px; border:1px solid rgba(255, 255, 255, 0.5); color:#fff; font-size:13px; font-weight:300; line-height:14px; box-sizing:border-box;}
#gnb2 .head_menu_all_top .gnbHome a{padding:7px 0 7px 18px; background:url(/gdpc/img/layout/gnbhome.png) no-repeat 26px center;}
#gnb2 .head_menu_all_top .sitemap a{padding:7px 0 7px 16px; background:url(/gdpc/img/layout/sitemap.png) no-repeat 18px center;}


#head_menu_all{display:none;}
.head_menu_all_container #head_menu_all{display:block;}
#gnb2 #head_menu_all > li{border-bottom:1px solid #d9d9d9;position:relative;}
#gnb2 #head_menu_all > li > a{overflow:hidden;}
#gnb2 #head_menu_all > li > a{display:block;padding:25px 20px;color:#494949; font-size:16px; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; line-height:16px; box-sizing:border-box;}
#gnb2 #head_menu_all > li._plus > button{position:absolute;top:20px;right:15px;width:24px;height:24px;z-index:1;}
#gnb2 #head_menu_all > li._plus > button:before{content:""; position:absolute; top:calc(50% - 1px); left:calc(50% - 6px); width:12px; height:2px; background:#aaa; transition:all 0.5s;}
#gnb2 #head_menu_all > li._plus > button:after{content:""; position:absolute; top:calc(50% - 6px);left:calc(50% - 1px); width:2px; height:12px; background:#aaa; transition:all 0.5s;}
#gnb2 #head_menu_all > li._plus.active > a{background-color:#304e71;color:#fff;}
#gnb2 #head_menu_all > li._plus.active > button::before{background:#fff; transform:rotate(180deg);}
#gnb2 #head_menu_all > li._plus.active > button::after{opacity:0; transform:rotate(180deg);}
#gnb2 #head_menu_all > li > .submenu{display:none;padding:10px 0;background:#f4f4f4;border-top:none}
#gnb2 #head_menu_all > li.active > .submenu{}
#gnb2 #head_menu_all > li >.submenu > ul > li{border-bottom:none;}
#gnb2 #head_menu_all > li >.submenu > ul > li > a{display:block; position:relative; padding:10px 10px 10px 30px; color:#494949; font-size:14px; line-height:14px;}
#gnb2 #head_menu_all > li >.submenu > ul > li > a:hover{color:#1a5580; text-decoration:underline;}
#gnb2 #head_menu_all > li >.submenu > ul > li > a::before{content:""; position:absolute; top:16px; left:17px; width:5px; height:5px; background:#aaa;}
#gnb2 #head_menu_all > li >.submenu > ul > li > a:hover::before{background:#1a5580;}
#gnb2 #head_menu_all > li >.submenu > ul > li > div > ul > li:last-child{margin-bottom:10px;}
#gnb2 #head_menu_all > li >.submenu > ul > li > div > ul > li a{display:inline-block; position:relative; padding:4px 10px 4px 40px; font-size:13px;}
#gnb2 #head_menu_all > li >.submenu > ul > li > div > ul > li a::before{content:''; position:absolute; top:13px; left:28px; width:6px; height:2px; background:#aaa;}
#gnb2 .select_box_1 {text-align:center; font-size:15px;}
#gnb2 .select_box_1 select{width:180px; height:28px; border:1px solid #d7d7d7;}
#gnb2 .select_box_1 span a{display:inline-block; padding:6px 8px; color:#fff; font-size:14px; background:#2996cc;}

.select_box_1 {padding:12px 0 12px 20px;}
.select_box_1 span.select select {width:72%; height:28px; border:1px solid #d7d7d7;}
.select_box_1 p {margin-bottom:7px;}

/*모달팝업*/
.modalpopup{display:none;position:fixed;z-index:1510;top:50px;background-color:#fff;}
.modalpopup.zip{width:550px;top:100px;margin:0 0 0 -275px;}
.modalpopup .close{position:absolute;right:0;top:0;width:35px;height:35px;background:#20252b url('/gdpc/img/layout/fileboxclose.png') center center no-repeat;}
.modalpopup.zip .close{background:#840F10 url('/gdpc/img/layout/fileboxclose.png') center center no-repeat;}
.modalpopup > .w{position:relative;border:3px solid #393f49;}
.modalpopup.zip > .w{border-color:#b41112;}
.modalpopup .tit{height:35px;line-height:35px;text-align:center;background-color:#393f49;color:#fff;font-size:16px;font-weight: 500; cursor: move;}
.modalpopup.zip .tit{background-color:#b41112;}
.modalpopup .bot{padding:10px 0 5px 0;text-align:right;background-color:#393f49;color:#ccc;font-size:11px;position: absolute;  bottom: 0px; width: 100%;}
.modalpopup .bot label{margin-right:5px;}
.modalpopup .bot input{margin-top:0;position: static;width: auto;height: auto;}
.modalpopup .content{font-size:12px;}
.modalpopup.zip .content{padding:10px;}
.modalpopup.zip #zip1{}
.modalpopup.zip #zip2{display:none;}
.modalpopup ul.detailList{font-size:11px;}
.modalpopup ul.detailList > li{display:inline-block;height:28px;line-height:28px;margin-right:15px;}
.modalpopup ul.detailList > li img{vertical-align:middle;}
.modalpopup .scrollWrap{max-height:280px;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.modalpopup .zipTab{position:relative;overflow:hidden;font-size:13px;font-weight: 500;text-align:center;}
.modalpopup .zipTab li{float:left;width:120px}
.modalpopup .zipTab li.last{margin-right:0;}
.modalpopup .zipTab > li > a{display:block;height:34px;line-height:34px;border:1px solid #cdcdcd;border-right:none;background-color:#fff;}
.modalpopup .zipTab > li.last > a{border-right:1px solid #cdcdcd;}
.modalpopup .zipTab > li.active{position:relative;z-index:1;}
.modalpopup .zipTab > li.active > a{color:#fff;border-color:#b41112;background-color:#b41112;}
.modalpopup .solo{width:96%;max-width:360px;}
.modalpopup .zipMsg{margin-bottom:10px;padding:20px 10px;line-height:1.5em;background:#f7f7f7}
.modalpopup .ipw100{position:relative;padding-right:62px;}
.modalpopup .ipw100 input{width:100%;height:26px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.modalpopup .ipw100 > button{position:absolute;right:0;top:0;height:26px;}
.rgba {
  background: rgba(0, 0, 0, 0.5);
  /*
    IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다.
    컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.
    startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.
    하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.
  */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */
}
.opacity { background: #000; opacity: 0.5; filter: alpha(opacity=50); }
.blind{display:block;overflow:hidden;top:-10000em;position:absolute;}



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

  #header{border-top:solid 3px #546b82;}
  .header_wrap{position:relative; margin:0 auto; width:750px; height:65px;}
  .header_wrap #logo{width:auto;}
  .header_wrap #logo a{top:19px; left:50%; margin-left:-95px;}
  .header_wrap #logo a img{height:28px;}
  .header_navi{display:none;}
  #gnb1, .header_krihs{display:none;}
  .header_krihs_mobile{display:block; width:300px; margin-left:0; left:0; bottom:13px;}  
  #gnb2 .control.open{display:block;position:absolute;top:24px;right:calc(50% - 325px);width:22px;aspect-ratio:22 / 19;background-image:url(/gdpc/img/layout/m_menu_btn.png)}

  .f_wrap{position:relative; width:750px;}
  .f_sns{position:absolute; top:40px; right:0;}
}


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

  #header{padding:0 2%;}
  .header_wrap{width:100%;}
  .header_wrap #logo{width:auto;}
  .header_wrap #logo a{left:0;margin-left:0px;}
  .header_krihs_mobile{display:none;}
  #gnb2 .control.open{right:2%}

  #footer{padding:0 2%;}
  .f_wrap{width:auto;}
  .f_logo{float:none; margin:0px 0px 30px 0;}
  .f_txt{float:none;}

}