@charset "utf-8"; /*@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/ /* body */ body.on{overflow:hidden} /* header */ .ir {display:block;overflow:hidden;float:left;margin:0;padding:0;color:transparent;text-indent:-9999em} .img_comn {background-image:url(/frontStatics/images/common/img_comn.png);background-repeat:no-repeat} .inner { z-index:10; width:1200px; margin:0 auto; } .inner_head { position:relative; z-index:10; width:1200px; margin:0 auto; } #body { /*background:url(/frontStatics/images/main.jpg) no-repeat center top; height:2192px;*/ margin:0; padding:0 } #main { font-size:0; } #main a { display:block; width:1200px; height:190px; margin:0 auto; } .video-bg {background:none; } #wrap { position:relative; min-width:1200px; width:100%;min-height:100%;} #header { left: 0; top: 0; width: 100%; z-index: 100; position: absolute;} #header h1.logo {position:absolute;top: 22px;left: 50%;font-size:0;line-height:0;width:121px;height:42px;margin-left: -600px;background:url("/frontStatics/images/pen_logo_new.png") left top no-repeat;text-indent:-9999px;z-index:15;} #header h1.logo a { display:block; width:121px; height:42px; } #header.on h1.logo { background:url("/frontStatics/images/pen_logo_new.png") no-repeat left top; } #header .utilArea { width:100%;height:30px;background:#000;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;} #header .utilArea ul { overflow:hidden;text-align:right;width:1200px;padding-top:5px;margin:0 auto;} #header .utilArea ul li { display:inline-block;} #header .utilArea ul li a { display:block;font-size:12px;color:#fff;padding:0 10px 0 10px;background:url("/frontStatics/images/bg_dot01.gif") left 9px no-repeat;} #header .utilArea ul li.last a { padding-right:0;} #header .utilArea ul li:first-child a { padding-left:0;background:none;} /* Gnb */ .gnbArea{position:relative;width: 100%;display:inline-block;background:#4685e6; overflow:hidden;} .gnbArea.subhead { margin-top:-70px; background:#4685e6; } .gnbArea .gnbInCont{width:1200px;;margin:0px auto; overflow:hidden;} .gnbArea .gnbInCont #gnb{margin: 105px auto;width: 940px;} .gnbArea .gnbInCont #gnb > li{float:left;margin-left: 67px;text-align:center; overflow: hidden;} .gnbArea .gnbInCont #gnb > li:first-child{margin-left:50px;} .gnbArea .gnbInCont #gnb > li > a {display:block;font-size:22px;color:#fff;letter-spacing:-1px;text-decoration:none;height:44px;font-weight:300;} .gnbArea .gnbInCont #gnb > li.on { overflow:visible;} .gnbArea .gnbInCont #gnb > li.on > a {color:#b8d7f6 !important} #header.on .gnbArea{ overflow:visible; } .gnbSubArea{ display:none; } .hover .gnbSubArea { display:none; position:absolute; top:180px; left:0; width:100%; height:100%; min-height:170px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; background:#fff url(/frontStatics/images/gnb_bg.png) repeat-y center top; z-index:5;} .hover .gnbSubCont { width:1200px;position:relative; padding:22px 0 0 210px; margin:0 auto; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .hover .gnbSubCont .gnbLeft { position:absolute; left:0; top:-1px; width:180px; height:auto; padding:30px 20px 30px 0px; background:#f2f2f2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .hover .gnbSubCont .gnbLeft .btn.white{position:absolute;left:25px;bottom:25px;font-size:14px;color:#ffffff !important; line-height:38px; width:130px; height:40px; border:1px solid #ffffff;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} .hover .gnbSubCont .gnbLeft .title { font-size:30px; color:#1159ab; letter-spacing:-1px; margin:30px 0; } .hover .gnbSubCont .gnbLeft .txt { font-size:15px; line-height:22px; color:#333; margin:15px 0 0 0; letter-spacing:-1px;} .hover .gnbSubCont .dep2 { position:relative;} .hover .gnbSubCont .dep2 > li { width:17%; margin:0 1% 0 2%; text-align:left; float:left; border-top:2px solid #1259ab; padding:5px 0 15px 0; } #gnb li:nth-child(2) .gnbSubCont .dep2 > li:nth-child(1){width:18%;margin-left:1%;} .hover .gnbSubCont .dep2 > li.clear { clear:both; } .hover .gnbSubCont .dep2 > li > a { display:inline-block; font-size:16px; letter-spacing:-1px; color:#353535; line-height:28px; font-weight:600; padding:0 15px 0 10px;} .hover .gnbSubCont .dep2 > li > a._blank{padding:0 20px 0 10px;} .hover .gnbSubCont .dep2 > li.sub > a { /*background:url("./gnb_sub.png") right center no-repeat;*/} .hover .gnbSubCont .dep2 > li.on > .dep3 { display:block;} .hover .gnbSubCont .dep3 { /*display:none;*/ height:auto; padding:20px 0 0 10px; margin-bottom:20px; } .hover .gnbSubCont .dep3 > li:first-child { margin-top:-7px; } .hover .gnbSubCont .dep3 > li > a { font-size:14px; line-height:25px;color:#666; } .hover .gnbSubCont .gnbRight { position:absolute;right:0;top:30px; } .hover .gnbSubCont .gnbRight.btnType a { display:block;float:left;margin-left:20px; } #header .mainSearch {display:block;position:absolute;top: 20px;left:50%;margin-left: -179px;text-align:center;} #header .mainSearch .word { margin:20px 0 0 0px; } #header .mainSearch .word a { padding:4px 7px; font-size:15px; letter-spacing:-1px; color:#fff; background-color:rgba(0,0,0,0.4); margin:0 3px; } /* gnb_navi */ .gnb_navi {position:absolute;left: 140px;top: -85px;} .gnb_navi li:first-child { margin:0; } .gnb_navi > li { float:left; position:relative; margin:0 0 0 9px; } .gnb_navi > li > a,.gnb_navi > li > button { display:block; height:40px; background:none; border:none; color:#fff; font-size:14px; line-height:40px; } .gnb_navi .language{ border:1px solid #fff; } .gnb_navi .language button{ width:110px; text-align:left; padding-left:10px; float:left;} .gnb_navi .language button.lang_off { background:url('/frontStatics/images/common/lang_bul.png') no-repeat 95px 50%; } .gnb_navi .language button.lang_on { background-color:#273d5f; } .gnb_navi .language ul { display:none;position:absolute;left:0;top:40px;width:108px;padding:5px 0;background:#fff;border:1px solid #273d5f;border-top:none;z-index:60; } .gnb_navi .language ul li{} .gnb_navi .language ul li { display:block;margin:0;padding:0 10px;color:#333; } .gnb_navi .language ul li span { display:block; height:26px; background:url('/frontStatics/images/common/lang_bul2.png') no-repeat right 50%; color:#637eae; line-height:28px; } .gnb_navi_lang{left:auto;right: 0px;} .gnb_navi > li > a.btn-move{ width: 30px; float: right; background: rgb(255, 255, 255); color: rgb(70, 134, 229); text-align: center; font-size: 13px; display: block !important; } /* btnArea */ .gnbArea .gnbInCont #gnb > li.on .gnbSubArea{z-index:10} .gnbArea .gnbInCont .btnArea{overflow:hidden;position:absolute;right: 158px;top: -80px;} /*.gnbArea .btnArea span { float:left; font-size:18px; color:#fff; line-height:32px; padding-right:10px; }*/ .gnbArea .btnArea a { margin:0 3px; display:block; float:left; text-decoration:none; text-align:center; } .gnbArea .btnArea .btnSupport { width:98px;color:#a3d957;border:1px solid #70b312;} .gnbArea .btnArea .btnSearch { position:relative;margin-left:15px;text-indent:-9999px;} .gnbArea .btnArea .btnSearch:before { content:'';display:block;position:absolute;top:50%;left:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;background:url("/frontStatics/images/sp_type01.png") 0 0 no-repeat;} .gnbArea .btnArea .btnAll { position:relative;margin:5px 0 0 15px;text-indent:-9999px;} .gnbArea .btnArea .btnAll:before { content:'';display:block;position:absolute;top:50%;left:50%;width:18px;height:14px;margin-left:-9px;margin-top:-7px;background:url("/frontStatics/images/sp_type01.png") -20px 0 no-repeat;} .gnbArea .btnArea .zoom { font-size:28px; color:#fff; border:1px solid rgba(255,255,255,1); width:30px;height:30px; line-height:28px;} /*flag*/ .flag { line-height:14px; font-size:13px; padding:2px 5px; float:right; color:#fff; } /* 헤더 :: GNB MOBILE */ .gnb-open-btn{display:none; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%);} #gnbM{/* width:86%; */ width:300px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#0060a1; z-index:99999; overflow-y:auto; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; display:none; } #gnbM.open{right:0px;} .close-box{cursor:pointer; display:block; height:114px; line-height:151px; padding:0 5%; border-bottom:1px solid #5494c0; text-align:right;} #gnbNavigation > ul{width:100%; overflow:hidden;} #gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid #5494c0; } #gnbM.open #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);} #gnbNavigation > ul > li > a{position:relative; display:block; height:48px; line-height:48px; padding:0 7%; color:#fff; font-size:17px; font-weight:400; letter-spacing:-0.25px;} #gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#053c61;} #gnbNavigation > ul > li .gnb-2dep li{} #gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#fff; font-size:14px; padding:12px 7%;} #gnbNavigation > ul > li .gnb-2dep li a:hover{color:#5494c0} #gnbNavigation > ul > li .gnb-3dep {display:none; background-color: #1d242a;} #gnbNavigation > ul > li .gnb-4dep{ background: #000; display:none; } #gnbMenuBg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.83); z-index:99998} /*allmenu*/ .allmenuWrap{position:relative;width:1200px;height:auto;margin:110px auto 0px auto;padding:40px 30px;background:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:1;} .allmenuWrap .btnLayClose{overflow:hidden;position:absolute;right:0;top:-65px;width:40px;height:40px;background:url("/frontStatics/images/btn_all_close.png") no-repeat;text-indent:-9999px;} .allmenuWrap > ul{overflow:hidden;} .allmenuWrap > ul > li{ float:left; width:16%; } .allmenuWrap > ul > li:first-child { padding-left:30px; } .allmenuWrap > ul > li > a{ display:block;font-size:18px;color:#323330;padding:20px 5px; border-bottom:1px solid #eaeaea;} /*.allmenuWrap > ul > li.menu1 > a{padding-left:10px;width:130px;} .allmenuWrap > ul > li.menu2 > a{width:151px;} .allmenuWrap > ul > li.menu3 > a{width:151px;} .allmenuWrap > ul > li.menu4 > a{width:130px;} .allmenuWrap > ul > li.menu5 > a{width:147px;} .allmenuWrap > ul > li.menu6 > a{width:140px;} .allmenuWrap > ul > li.menu7 > a{width:151px;} .allmenuWrap > ul > li.menu8 > a{width:128px;}*/ .allmenuWrap > ul > li > ul{margin-top:15px;} .allmenuWrap > ul > li > ul > li a{display:block;color:#646661;font-size:14px;line-height:28px;padding-left:11px;background:url("/frontStatics/images/gnb_dot.png") no-repeat left 11px;} .searchWrap{position:relative;margin:110px auto 0px auto;width:1200px;height:auto;padding:60px 0px;background:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;z-index:1;} .searchWrap .inputArea{overflow:hidden;position:relative;padding-right:76px;width:590px;margin:0 auto;border:1px solid #70b312;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .searchWrap .inputArea input{font-size:16px;width:100%;height:58px;border:0px;background-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .searchWrap .inputArea a{position:absolute;right:9px;top:9px;} .searchWrap .inputArea a span{font-size:14px;} .searchWrap .keyWord{color:#d9d9d9;width:590px;padding-top:18px;margin:0 auto;} .searchWrap .keyWord a{font-size:14px;color:#323330;} .searchWrap .btnLayClose{overflow:hidden;position:absolute;right:0;top:-65px;width:40px;height:40px;background:url("/frontStatics/images/btn_all_close.png") no-repeat;text-indent:-99999px;} /* Gnb Active */ #header.on .gnbArea{background:#4685e6} #header.on .gnbArea .gnbInCont #gnb > li > a{color:#fff} /* #header.on .gnbArea .btnArea a{border:1px solid #b0b3aa} #header.on .gnbArea .btnArea .btnSupport{color:#fff;background:#70b312;} #header.on .gnbArea .btnArea .btnSearch:before{background-position:0 -20px} #header.on .gnbArea .btnArea .btnAll:before{background-position:-20px -20px} */ /* 팝업 */ .layPop{overflow-y:auto;display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);z-index:999;} .layPop .dimed{content:"";display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;} .layPop .layPopInCont{position:relative;width:980px;height:auto;margin:30px auto 50px auto;background:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:1;} .layPop .layPopInCont:after{content:'';display:block;clear:both} .layPop .layPopInCont .btnLayCtrl a{display:block;position:fixed;top:50%;width:60px;height:60px;text-decoration:none;margin-top:-90px;background-image:url("/frontStatics/images/sp_type01.png");background-repeat:no-repeat;z-index:1000;text-indent:-9999px;} .layPop .layPopInCont .btnLayCtrl .btnLayPrev{left:20px;background-position:-200px 0} .layPop .layPopInCont .btnLayCtrl .btnLayNext{right:20px;background-position:-270px 0} .layPop .layPopInCont .btnLayCtrl > a .subject{overflow:hidden;display:none;} .layPop .layPopInCont .btnLayCtrl .btnLaySubject{width:137px;height:36px;padding:12px;background:#000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .layPop .layPopInCont .btnLayCtrl .btnLaySubject .subject{display:block;margin-top:-18px} .layPop .layPopInCont .btnLayCtrl .btnLaySubject .subject p{position:relative;font-size:12px;color:#a3d957;padding-left:18px;text-indent:0} .layPop .layPopInCont .btnLayCtrl .btnLaySubject .subject p:before{content:'';display:block;position:absolute;top:3px;left:0;width:12px;height:10px;background-image:url("/frontStatics/images/sp_type01.png");background-repeat:no-repeat;} .layPop .layPopInCont .btnLayCtrl .btnLayPrev.btnLaySubject .subject p:before{background-position:-380px -130px} .layPop .layPopInCont .btnLayCtrl .btnLayNext.btnLaySubject .subject p:before{background-position:-310px -70px} .layPop .layPopInCont .btnLayCtrl .btnLaySubject .subject strong{overflow:hidden;display:block;font-size:12px;color:#fff;white-space:nowrap;text-overflow:ellipsis;margin-top:3px;text-indent:0;} .layPop .layPopInCont .btnLayClose{display:block;position:absolute;top:20px;right:20px;width:22px;height:22px;background:url("/frontStatics/images/sp_type01.png") -340px -20px no-repeat;text-indent:-9999px} .layPop .layPopInCont .layHeader{overflow:hidden;padding:30px 40px 25px 40px;background:#fafafa;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;} .layPop .layPopInCont .layHeader .tit {font-size:20px;color:#323330;font-weight:bold;text-align:left;} .layPop .layPopInCont .layHeader dl{padding:0 !Important} .layPop .layPopInCont .layHeader dl dt{font-size:20px;color:#70b312} .layPop .layPopInCont .layHeader dl dd{font-size:28px;color:#323330;line-height:1.4;font-weight:bold;margin:10px 0 0 0 !important;} .layPop .layPopInCont .layHeader .day{display:block;position:relative;font-size:12px;color:#7d8079;padding-left:20px;margin-top:14px;} .layPop .layPopInCont .layHeader .day:before{content:'';display:block;position:absolute;top:2px;left:0;width:15px;height:15px;background:url("/frontStatics/images/sp_type01.png") -340px 0 no-repeat;} .layPop .layPopInCont .layCont{overflow:hidden;padding:40px 40px 0 40px;background:#fff;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;} .layPop .layPopInCont .layFooter{height:56px;padding:16px 32px 0 32px;border-top:1px solid #ebebeb;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .layPop .layPopInCont .layFooter .ipt_check{float:right;} #mcontent{position:relative;width:100%;} #mvisual{overflow:hidden;position:relative;width:100%;background:url(/frontStatics/images/mainVisual_1.jpg) no-repeat center top; } #mcontent .cover{display:block;position:absolute;top:0px;left:0;width:100%; height:100%; background:url(/frontStatics/images/dot_black1.png) repeat; opacity:0.5; text-indent:-9999px} #mcontent .mainSearch { display:block; position:absolute; bottom:200px; left:50%; margin-left:-280px;} #mcontent .mainSearch .word { margin:30px 0 0 0px; } #mcontent .mainSearch .word a { padding:4px 10px; font-size:18px; letter-spacing:-1px; color:#fff; background-color:rgba(0,0,0,0.4); margin:0 3px; } #mcontent .mousewheel{display:block;position:absolute;bottom:148px;left:50%;margin-left:-74.5px;width:34px;height:64px;z-index:99;} /* main */ #mc_visual { float:left; position:relative; width:385px; height:365px; margin:20px 0; border:1px solid #e4e4e4 } #mc_visual h3 { background:#efefef; font-size:20px; font-weight:normal; color:#000; padding:13px 0 13px 20px; } #mc_visual .control {display: block; position:absolute; right:0; top:0; z-index:2; } #mc_visual .control button {display:block; float:left; width:46px; height:49px; font-size:0; line-height:0;} #mc_visual .control button.btn_prev { background:#efefef url(/frontStatics/images/main/news_prev.gif) no-repeat center center;} #mc_visual .control button.btn_stop { background:#efefef url(/frontStatics/images/main/news_stop.gif) no-repeat center center;} #mc_visual .control button.btn_play { display:none; background:#efefef url(/frontStatics/images/main/news_play.gif) no-repeat center center;} #mc_visual .control button.btn_next { background:#efefef url(/frontStatics/images/main/news_next.gif) no-repeat center center;} #mc_visual .control .bx-controls { float:left; width:60px; height:49px; background:#efefef; color:#ffffff; font-family:NanumS; font-size:17px; line-height:49px; text-align:center;} #mc_visual .control .bx-controls_n span { margin:0 3px;} #mc_visual #slider_visual {overflow: hidden;position: relative;z-index:1; width: 100%; } #mc_visual .img_area { width:100%; height:365px;} #mc_visual .img_area a { display:block; font-size:22px; font-weight:600; color:#ffffff; text-align:center;} #mc_visual .img_area a:focus { border:1px dotted #ddd;} .block_1{ position:relative; display:inline-block; } .btn-main-video{ position: absolute; bottom: 20px; padding: 45px 10px 15px; color: #1b1b1b; right: -91px; height: auto; width: 90px; font-size: 14px; letter-spacing: -1px; white-space: inherit; background: #f9f9f9 url(/frontStatics/images/main/btn-main-video.png) no-repeat 50% 10%; background-size: 30px; } /* 메인비주얼 */ .bx-viewport > ul > li a { display: block; } /* 배너 공통 스타일 */ .keyboard_focus .bx-wrapper { height: 100% !important; } .keyboard_focus .bx-viewport { overflow:auto !important; height: 100% !important; } .keyboard_focus .bx-viewport > ul { height: 100%; transform: translate3d(0, 0px, 0px) !important; overflow: hidden; } .section1 { position:relative; width:100%; /*border:5px solid #c5e26e; height:500px;*/margin-top:160px; } .section1 .mayorArea { width:100%; background:#a8de6e; } .section1 .mayorArea ul { width:1200px; margin:0 auto; height:170px; /*background:url(/frontStatics/images/main/mayor_img.png) no-repeat left top;*/ } .section1 .mayorArea li {float:left;margin:40px 25px;text-align: center;line-height: 17px;} .section1 .mayorArea li:first-child{ margin: 40px 25px 40px 58px; } .section1 .mayorArea li.mayor-photo { margin:0 ; } .section1 .mayorArea li i {display:block;width:47px;height:45px;margin: 0 auto 10px auto;} .section2 { width:100%; clear:both; background:url(/frontStatics/images/main/section2_bg2.jpg) no-repeat center top; height:879px; } /* 공지사항 */ .board { float:left; width:793px; position:relative; background:#fff; margin:20px 20px 0 0px; border-top:1px solid #ddd} .board ul li { display:inline; float:left; padding:0; border-right:1px solid #ddd; border-bottom:1px solid #ddd } .board ul li:first-child { border-left:1px solid #ddd; } .board ul li a.tab_btn { display:block; padding:2px 31px 0; height:50px; background:#fff; color:#050505; font-size:16px; line-height:50px; } .board ul li a.tab_btn:focus { border:1px dotted #ddd;} .board ul li.active a.tab_btn { background:#fff; color:#050505; font-weight:600; font-size:18px; border-top:2px solid #a8de6e; } .board ul li img { margin-left:5px; vertical-align:top} .board ul div.tabcontent { position:absolute; top:53px; left:0; width:100%; height:156px; padding:25px 0 10px; background:#fff; } .board ul div.tabcontent div .img { float:left; margin:0 15px 25px 0; } .board ul div.tabcontent div a { line-height:160%; font-size:15px; } .board ul div.tabcontent div .list_tit { font-size:17px; color:#050505; margin:7px 0; font-weight:600; } .board ul ul { padding:0 5% 0 2%;} .board ul ul li { width:100%; border:0px; margin:0; padding:0 0 0 15px; background: url(/frontStatics/images/common/board_bu.gif) no-repeat 0px 13px; text-align:right;} .board ul ul li:first-child { border:0px; } .board ul ul li a { display:inline-block; float:left; width: 70%; padding:0; font-size:15px; color:#1b1b1b; line-height:30px; text-align:left; white-space:nowrap; overflow:hidden;text-overflow: ellipsis;} .board ul ul li img { vertical-align:middle;} .board ul li span.date { display:inline-block; padding-top:4px; font-size:13px; color:#898989; text-decoration:none; } .board .more a { display:block; position: absolute; top: -53px; right: 0; width: 57px; height:53px; background:#a8de6e url(/frontStatics/images/common/board_more.png) no-repeat center; } .board .latest{ padding:0 20px; margin:0 0 20px; } .board > ul { width:100%; } .board > ul> li{ width: 15%; width: calc(16.66% - 10px); text-align:center; } .board > ul> li > a.tab_btn{ padding:2px 0 0; } /* 자주찾는 서비스*/ .head_tit { clear:both; font-size:18px; margin:0 auto 20px auto; text-align:center; background:url(/frontStatics/images/main/tit_bar.gif) repeat-x left 21px; padding-top:10px; } .head_tit span { background:#fff; padding:30px 20px; } .favor_link { width:100%; margin:0px 0 40px 0; } .favor_link li { float:left; text-align:center; width:8%; height:140px; margin:0 0.5%; } .favor_link li a { font-size:14px; color:#333; display:block; height:140px; } .favor_link li:last-child { padding-right:0px; } .favor_link li div { display: block; width:60px; height:60px; padding:10px; background:url(/frontStatics/images/main/favor_icon.png) no-repeat; margin:0 auto;} .favor_link li div.i01 { background-position:18px 25px; } .favor_link li div.i02 { background-position:18px -48px; } .favor_link li div.i03 { background-position:18px -120px; } .favor_link li div.i04 { background-position:18px -190px; } .favor_link li div.i05 { background-position:18px -260px; } .favor_link li div.i06 { background-position:-55px 25px; } .favor_link li div.i07 { background-position:-58px -48px; } .favor_link li div.i08 { background-position:-58px -120px; } .favor_link li div.i09 { background-position:-58px -190px; } .favor_link li div.i10 { background-position:-58px -260px; } .favor_link li div.i11 { background-position:13px -327px; } .favor_link li a:hover { background-color:#c5e26d; color:#fff; } .favor_link li a:hover div.i01 { background-position:-148px 25px; } .favor_link li a:hover div.i02 { background-position:-148px -48px; } .favor_link li a:hover div.i03 { background-position:-148px -120px; } .favor_link li a:hover div.i04 { background-position:-148px -190px; } .favor_link li a:hover div.i05 { background-position:-148px -260px; } .favor_link li a:hover div.i06 { background-position:-220px 25px; } .favor_link li a:hover div.i07 { background-position:-223px -48px; } .favor_link li a:hover div.i08 { background-position:-223px -120px; } .favor_link li a:hover div.i09 { background-position:-223px -190px; } .favor_link li a:hover div.i10 { background-position:-223px -260px; } .favor_link li a:hover div.i11 { background-position:-151px -327px; } /* 주요서비스 모음 */ .service_group { position: relative; width:1200px; margin:130px auto 0 auto; height:355px; transition:height 2s ease-in-out; padding: 0; clear:both; } .service_group section { float: left; width:20%; } .service_group section > button { width: 100%; border-right:1px solid rgba(255,255,255,0.2); border-top:1px solid rgba(255,255,255,0.2); color:#fff; font-size:17px; line-height:50px; } .service_group section > button:first-child { border-left:1px solid rgba(255,255,255,0.2); } .service_group section > button:hover, .service_group section > button.open { color: #000; background-color:rgba(228,245,214,0.6); } .service_group section > button span { display: inline-block; } .service_group section > button:hover span, .service_group section > button.open span { color: #000; border:0px} .srvc_wrap { display:none; position: absolute; top: 54px; left:0; width:92%; padding:0 4%; height:580px; overflow:hidden; background:rgba(228,245,214,0.6); } .srvc_wrap .icon_list { position: relative; width: 100%; margin:20px 0 0 0; } .srvc_wrap .icon_list li { float: left; width: 13.5%; text-align:center; margin:0 1.5%; } .srvc_wrap .icon_list li ul { margin-top:20px; } .srvc_wrap .icon_list li li { float:none; width:100%; text-align:left; } .srvc_wrap .icon_list li li a { background:url(/frontStatics/images/common/li_dot.gif) no-repeat left 12px; font-weight:600; border-bottom:0px; color:rgba(0,0,0,0.8); font-size:14px; letter-spacing:-0.5px; padding:5px 0 5px 10px; } .srvc_wrap .icon_list li a { display: block; color: #000; font-size:17px; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,0.7);} .srvc_wrap .icon_list li a i { display: block; width: 100px; height:90px; margin:10px auto; background:url(/frontStatics/images/main/menu_icon_b.png) no-repeat; } .srvc_wrap .icon_list li a i.icon11 { background-position:-25px -20px} .srvc_wrap .icon_list li a i.icon12 { background-position:-20px -120px} .srvc_wrap .icon_list li a i.icon13 { background-position:-22px -220px} .srvc_wrap .icon_list li a i.icon14 { background-position:-25px -320px} .srvc_wrap .icon_list li a i.icon15 { background-position:-25px -420px} .srvc_wrap .icon_list li a i.icon16 { background-position:-20px -515px} .srvc_wrap .icon_list li a i.icon21 { background-position:-25px -625px} .srvc_wrap .icon_list li a i.icon22 { background-position:-20px -730px} .srvc_wrap .icon_list li a i.icon23 { background-position:-22px -833px} .srvc_wrap .icon_list li a i.icon24 { background-position:-25px -938px} .srvc_wrap .icon_list li a i.icon25 { background-position:-25px -1168px} .srvc_wrap .icon_list li a i.icon31 { background-position:-25px -1270px} .srvc_wrap .icon_list li a i.icon32 { background-position:-20px -1380px} .srvc_wrap .icon_list li a i.icon33 { background-position:-22px -1495px} .srvc_wrap .icon_list li a i.icon34 { background-position:-25px -1605px} .srvc_wrap .icon_list li a i.icon35 { background-position:-25px -1168px} .srvc_wrap .icon_list li a i.icon36 { background-position:-20px -1720px} .srvc_wrap .icon_list li a i.icon41 { background-position:-25px -1835px} .srvc_wrap .icon_list li a i.icon42 { background-position:-20px -1960px} .srvc_wrap .icon_list li a i.icon43 { background-position:-22px -2075px} .srvc_wrap .icon_list li a i.icon44 { background-position:-25px -2190px} .srvc_wrap .icon_list li a i.icon45 { background-position:-25px -2300px} .srvc_wrap .icon_list li a i.icon51 { background-position:-25px -2415px} .srvc_wrap .icon_list li a i.icon52 { background-position:-20px -2515px} .srvc_wrap .icon_list li a i.icon53 { background-position:-22px -2635px} .srvc_wrap .icon_list li a i.icon54 { background-position:-25px -2760px} .srvc_wrap .icon_list li a i.icon55 { background-position:-25px -2878px} .srvc_wrap .icon_list li a i.noimg { background:none; } .service_area .srvc_wrap li, .service_02 .srvc_wrap li, .service_04 .srvc_wrap li { width:17%; } .srvc_wrap .text_list { display: block; float: left; width: 69.166666%; padding: 10px 0 0 0; } .srvc_wrap .text_list li { display: block; float: left; width: 20%; } .srvc_wrap .text_list li span { display: inline-block; margin: 0; padding: 5px 10px; background: url(/frontStatics/images/main/service_img.png) no-repeat left -85px; border-radius: 5px; font-size: 14px; letter-spacing:-1px; line-height: 16px; } .srvc_wrap .text_list li a:hover span { background: #2566c2; color: #fff; } .service_area .srvc_wrap { display: block; } .service_ctrl { position: absolute; top: 25px; right: 10px; width: 25px; } .service_ctrl button { width: 25px; height: 25px; margin: 2px 0; background: url(/frontStatics/images/main/service_prev.png) no-repeat 50%; border: 1px solid #a1bde1; font-size: 0; line-height: 0; text-indent: -9999px; } .service_ctrl button.service_next { background-image: url(/frontStatics/images/main/service_next.png); } /* 하단 배너 */ #foot_banner {overflow:hidden;position:relative; height:75px; width:1200px; margin:10px auto; } #foot_banner h3 { position:absolute; top:27px; left:0px; } #foot_banner .fb_box {position:absolute; width:1010px; height:44px;margin:15px 0 0 185px;;overflow:hidden} #slider_foot_banner {position:absolute; width:990px; } #slider_foot_banner li {float:left; } #foot_banner .control {position:absolute;top:26px;left:80px;width:60px;} #foot_banner .control button, #foot_banner .control a {position:absolute;width:24px;height:24px} #foot_banner .control .btn_prev {top:0;left:0;background-position:0 -146px} #foot_banner .control .btn_prev:hover, #foot_banner .control .btn_prev:active, #foot_banner .control .btn_prev:focus {background-position:0 -176px;z-index:1} #foot_banner .control .btn_next {top:0;left:23px;background-position:0 -206px} #foot_banner .control .btn_next:hover, #foot_banner .control .btn_next:active, #foot_banner .control .btn_next:focus {background-position:0 -236px;z-index:1} #foot_banner .control .btn_more {top:0px;left:46px;background-position:0 -266px} #foot_banner .control .btn_more:hover, #foot_banner .control .btn_more:active, #foot_banner .control .btn_more:focus {background-position:0 -296px;z-index:1} #foot_banner .control .btn_stop {top:0px;left:69px;background-position:0 -326px} #foot_banner .control .btn_stop:hover, #foot_banner .control .btn_stop:active, #foot_banner .control .btn_stop:focus {background-position:0 -356px;z-index:1} #foot_banner .control .btn_play {display:none;top:0px;left:23px;background-position:0 -386px} #foot_banner .control .btn_play:hover, #foot_banner .control .btn_play:active, #foot_banner .control .btn_play:focus {background-position:0 -416px;z-index:1} #footer { z-index:0 } /* 하단 메뉴 */ #foot_menus {position:relative;height:48px;border:1px solid #dbdbdb; border-width:1px 0; background:#ebebeb;} .foot_menus > li {float:left; position:relative; width:238px} .foot_menus > li > button {position:relative;display:block;width:100%;height:48px;padding-left:30px;border-right:1px solid #dbdbdb;background-position:200px 20px;text-align:left;line-height:48px;text-decoration:none} .foot_menus > li:first-child > button {border-left:1px solid #dbdbdb;} .foot_menus > li.active > button {background-position:360px -34px} .foot_menus div {display:none;position:absolute;left:-1px;right:0;padding-bottom:1px;border:1px solid #cfcfcf;border-bottom:0;background:#fff;} .foot_menus .fm_1 {top:-500px;height:470px;padding-top:27px;padding-left:23px;} .foot_menus .fm_2 {top:-330px;height:300px;padding-top:27px;padding-left:23px;} .foot_menus .fm_3 {top:-312px;height:283px;padding-top:27px;padding-left:23px;} .foot_menus .fm_4 {top:-434px;height:410px;padding-top:21px;padding-left:23px;} .foot_menus .fm_5 {top:-460px;height:442px;width:513px; left:-300px; padding-top:15px;padding-left:23px;} .foot_menus ul .col2 {float:left;width:49%} .foot_menus ul .col3 {float:left;width:33%} .foot_menus ul .clear {clear:both} .foot_menus ul li a {display:block;background-position:30px -599px;line-height:2; font-size:14px; letter-spacing:-1px} .foot_menus p.subj { font-size:18px; color:#00519d; padding:5px 0;} .foot_menus ul li a:hover, .foot_menus ul li a:active, .foot_menus ul li a:focus {color:#22aeb3} .foot_menus .close {position:absolute;top:-1px;right:-1px;width:30px;height:30px;background-color:#37383a;background-position:50% -105px; } .foot_menus .close:hover, .foot_menus .close:active, .foot_menus .close:focus {background-color:#36bfc4} /*qr코드 추가*/ .qrcode { float: right; } #foot_info {padding: 26px 0 30px;} #foot_info .inner { position:relative } .foot_logo {width:190px;height:62px;margin: 8px 0px 0 0px;float:left;} .foot_logo img { width:85%;} .copyright, #foot_info p { font-size:12px; font-weight:normal; margin-top:6px; color:#a7a7a7; } #foot_info address { font-size:14px; } #foot_info .footgnb {margin-bottom:10px} #foot_info .footgnb li{display:inline-block;line-height:14px; font-size:14px; } #foot_info .footgnb li a{display:block;padding:0 8px;border-left:1px solid #ddd; letter-spacing:-1px;} #foot_info .footgnb li:first-child a{padding-left:0;border-left:0;color:#0000ff!important;} #foot_info .footgnb li strong{color:#333} #foot_info .footgnb li:first-child{padding-left:0;background:none} /*교육감 임시 처리 */ .mo_hidden {display:block;} @media all and (max-width:1380px){ .btn-main-video{ display:none; } } @media all and (max-width:1220px){ #header{ overflow:inherit; } .area{width:100%;} /* -------- 헤더 -------- */ .inner { width:100%; } .inner_head { width:100%; } .gnb_navi { top:20px; left:10px; } .gnb_navi .language ul { position: fixed; top: 53px; right: 179px; width: 110px; left: auto; } .gnb_navi_lang.gnb_navi_lang_mo{ top: 10px; left: 10px; right: auto; left: 10px; } #gnb{display:none;} .gnb-open-btn{ position:absolute; right:10px; top:22px; visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0);display:block; } .gnb_navi_lang { left: auto; right: 54px; } /* FIXED STYLE */ #header h1.logo { top:20px; margin-left:-50px; } #header.fixed{top:-50px;} #header.fixed .gnb-open-btn i{color:#2c2c2c;} #header .mainSearch { display:none; } .gnbArea .gnbInCont { width:100%; } .gnbArea .gnbInCont #gnb, #foot_banner { width:100%; } .service_group { height: auto; margin: 0; width: 100%; display:inherit;} .board{ width:65.2%; margin: 20px 1.6% 0 0px; } .block_1{ display: inherit; } #mc_visual{ width:32%; width:calc(100% - 66.8% - 2px); } .section1 .mayorArea { padding: 10px 0 0; } .section1 { border:0px; margin-top: 80px;} .section1 .mayorArea ul {width:100%;/* padding-top:170px; */height:auto;background: url(/frontStatics/images/main/mayor_img.png) no-repeat 50% top;} .section1 .mayorArea li { margin: 0; width: 16.66%; text-align: center; } .section1 .mayorArea li:first-child { padding-left:0px; } .section1 .mayorArea li a { font-size:13px; } .section1 .mayorArea li:first-child{ margin:0; } .section2 { background-size:cover;} .tb_image {max-width:870px;} /*footer*/ .foot_menus > li{ width:20%; } } @media only screen and (max-width:970px) { .section2{ height:auto; } .service_group section{ width:100%; } #mc_visual{ width: 100%; border: 0px; height: auto; margin: 0px; } .gnb-open-btn, #gnbM{ display:block; } .tablet_skip { display:none; } .board { width:100%; height:350px; box-sizing:border-box; margin:0px; } .board ul li { width:18%;} .board ul li a.tab_btn{ font-size:13px; padding:2px 0 0; background:#6694d4; color:#ffffff; text-align:center;} .board ul li.active a.tab_btn{ font-size:13px; padding-top:2px; border:none; text-align:center;} .board ul.clearfix { width:100%; } .board .more a { width:10%; background-color:#6694d4; height:52px; border-left:1px solid rgba(255,255,255,0.6); } .board ul div.tabcontent { padding-top:15px;} .board ul div.tabcontent a .txt { max-height:54px;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} .service_group section button { border-top: 1px solid #cacaca; border-right: none; } .srvc_wrap { position: relative; top: inherit; left: inherit; height:auto; padding:0 4% 7% 4%; } .srvc_wrap .icon_list li { width: 30.333%; } .srvc_wrap .icon_list li a { font-size:14px;; } .srvc_wrap .icon_list > li:nth-of-type(4){ clear:both; } .srvc_wrap .text_list { width: 96%;padding:10px 2%; } .srvc_wrap .text_list li { width: 32%; } .favor_link li { margin:1% 2%; width:15%; } #foot_banner { display:none; } #foot_menus { clear:both; border:0px solid #dbdbdb; border-width:0; height:100%;} #foot_menus .foot_menus > li { float:none; width:100%; border-bottom:1px solid #dbdbdb; background:#ebebeb; } #foot_menus .foot_menus > li > button { border-right:0px solid #dbdbdb; background-position:95% 20px; } #foot_menus .foot_menus > li:first-child > button { border-left:0px solid #dbdbdb; } .foot_menus .fm_5 {width:auto; left:0px;} #foot_info { padding:20px; } #foot_info .footgnb li a { display: block; padding: 0 3px; font-size: 12px; } .tb_image{max-width:470px;} } @media all and (max-width:768px){ .section1 .mayorArea li{width:20%;} .section1 .mayorArea li.mayor-photo { width: auto; } #mc_visual { width:100%; border:0px; height:auto; margin:0px; } #mc_visual .img_area img { width:100%; height:365px;} .allmenuWrap {width:1200px; } /*교육감 임시 처리 */ .mo_hidden_760 {display:none;} } @media all and (max-width:640px){ .mobile_skip { display:none; } /* 헤더 */ #mcontent .mousewheel,.video-bg video{ display:none; } .favor_link li { margin:1% 2%; width:28%; } .service_citizen .srvc_wrap, .service_complaints .srvc_wrap, .service_enterprise .srvc_wrap { height: auto; } .video-bg { display:block; background:url(http://211.57.200.44:9081/ubitec/pen/poster.png) no-repeat center top; background-size: 100% 100%; padding: 160px 0; margin: 80px 0 0;} /*교육감 임시 처리 */ .mayor_clear { clear:both; } } @media all and (max-width:500px){ .favor_link li { margin: 1% 0.5%; width: calc(32.33% - 2px); } } @media all and (max-width:450px){ .section1 .mayorArea ul{background: none;} .video-bg{ padding: 140px 0; } } @media all and (max-width:400px){ /*header*/ #header h1.logo{ /* width: 90px; */ margin-left: -45px; background-size: contain; } .srvc_wrap .icon_list li{ width: 40%; margin: 0 5%; } .srvc_wrap .icon_list > li:nth-of-type(4) { clear:none; } .video-bg{ padding: 120px 0; } .mayor-photo img{ width:80%; } #mc_visual .img_area img { width: 100% !important; } } @media all and (max-width: 320px) { .srvc_wrap .text_list { padding: 3%; } .srvc_wrap .text_list li { width: 50%; } }