/* CSS Document @charset "utf-8"; */ /* 레이아웃 */ html, body {height:100%; font-size:12px; line-height:16px; background:url(../../_images/_common/visual_imgbg.gif) 0 100px repeat-x;} #wrapArea {width:100%;} #footer {margin-top:20px; width:100%; float:left; background:#404040;} /* 메인 헤더 */ #header_box {position:relative; height:140px; width:980px; margin:0 auto;} #header_box .rnb {position:absolute; font-size:11px; top:10px; right:10px;} #header_box .logo {margin:20px 0 0 10px; float:left;} #j_navi{position: absolute; top: 100px;/* 스타일을 줄수 있음[ddsmoothmenu.js 과 연동] */} .gnb {/* background:url(../images/navBg.gif) repeat-x; */ height:40px; list-style:none;} .gnb li {/* background:url(../images/navDivider.gif) no-repeat right 10px; */float:left; position:relative; z-index:0; font-size:14px; font-weight:bold; } /*1depth*/ .gnb a {font-family:verdana; color:#fff; text-decoration:none; float:left; display:block; padding:10px 24px;; line-height:20px;}/*1depth bar. line-height 가 전체 높이 조정*/ .gnb a:hover {background-position:0px 0px; color:#4cb400; font-weight:bold;}/*1depth 오버했을때*/ .gnb li a.selected {color:#ccc;} .gnb li a.selected:hover, a.selected:visited, a.selected:active, a.selected:link {color:#006B51!important; background:#fff!important;} /*2depth*/ .gnb li ul {background:#FFFFFF; border:1px solid #CCC; list-style:none; padding:0; position:absolute; display:none;}/*2depth 메뉴박스정의*/ .gnb li ul li {background:none; float:none; margin:0; padding:0px; z-index:100; font-size:11px;}/*2depth 각각 메뉴정의*/ .gnb li ul li a {float:none; margin:0px; border-bottom:1px dashed #ddd; color:#828f89; background:none; padding:0px 0px 0px 10px; width:180px;}/*2depth over 하지 않았을때 각각의 메뉴*/ .gnb li ul li a:hover {/* border-bottom:1px dashed #ddd; */ color:#3b4b44; background:#EDFFBF;}/*2depth over 했을때 각각의 메뉴*/ .gnb .select {background: #fff;} .gnb .select a {color:#006B51} .gnb .select a:hover {color:#006B51} /* 메인 이미지 */ #visual_box {width: 100%; height: 250px; clear: both; text-indent: -10000px; background: url(../../_images/_common/visual_img01.jpg) no-repeat top center;} #visual_box_sub {width: 100%; height: 159px; clear: both; text-indent: -10000px; background: url(../../_images/_sub/visual_img_sub.jpg) no-repeat top center;} /* 메인 컨텐츠영역 */ #con_box {width:980px; margin: 20px auto;} #con_box .rndArea {display: inline-block; border: 1px solid #ececec; padding: 10px; margin-bottom: 20px;} #con_box .tech {margin-top:20px;} #con_box .tech ul li {display: inline-block; float: left;} #con_box .tech ul li div {position:relative; width: 292px; height: 70px; margin-right: 10px; padding: 20px; padding-right: 0;} #con_box .tech ul li div .rndTextBoxTit {color:#fff; font: 500 18px arial,sans-serif;} #con_box .tech ul li div .rndTextBoxTit:hover {opacity: 0.8; text-decoration:underline;} #con_box .tech ul li div .rndTextBoxText {color: #fff; margin-top: 10px; width: 200px; display: inline-block;} #con_box .tech ul li div .rndMore {background: transparent; border: 1px solid #FFF; padding: 4px 6px; color: #fff; display: inline-block; position: absolute; top: 70px; right: 20px;} #con_box .tech ul li div .rndMore:hover {border: 2px solid #fff;} #con_box #con_box_left {width:185px; margin-left:15px; float:left; border:1px solid #ececec;} #con_box #con_box_left .textbar03 {margin:10px 0;} #con_box #con_box_left span {} #con_box #con_box_left .event {} #con_box #con_box_left .multi {} #con_box #con_box_left .link {width:185px; height:332px; margin-top:15px; background:url(../../_images/_common/left_guickbg.gif);} #con_box #con_box_left .link li.margin {margin-top:21px;} #con_box #con_box_left .lmenu {} #con_box #con_box_right {width:760px; float:right; } #con_box #con_box_right .tech {margin-top:10px;} #con_box #con_box_right .tech ul li {height:25px;} #con_box #con_box_right .info_con {margin:20px 0 0 10px;} #con_box #con_box_right .info_con ul li {margin-top:20px;} #con_box #con_box_right .info {margin-top:20px;} #con_box #con_box_right .info ul li {height:40px;} #con_box #con_box_right .location {position: relative;overflow:hidden} #con_box #con_box_right .location .location_txt {float:right;} #con_box #con_box_right .location .location_txt p {font-size:11px;letter-spacing:-0.06em} #con_box #con_box_right .location .location_txt span {font-weight:bold;font-size:11px;letter-spacing:-0.05em} #con_box #con_box_right .spot {margin-top:10px; border-bottom:1px solid #ededf0; padding-bottom:18px;} #con_box #con_box_right .cont {margin-top:10px; border-bottom:1px solid #ededf0; padding-bottom:18px;} #con_box #con_box_right .cont ul li {margin-top:10px;} #con_box #con_box_right .con_img {margin-top:20px; text-align:center;} #con_box #con_box_right .con_table {margin:20px 0 0 80px;} #con_box #con_box_right .ad_con {margin:20px 0 0 10px;} #con_box #con_box_right .ad_con ul li {margin-top:20px;} #con_box #con_box_right .ad_con ul li.left {margin-top:20px; float:left;} #con_box #con_box_right .st_con {margin:20px 0 0 80px;} #con_box #con_box_right .st_con ul {width:200px; vertical-align:top;} #con_box #con_box_right .st_con ul li {margin-top:15px;} #con_box #con_box_right .st_con .site_map{width:100%; vertical-align:top;} #con_box #con_box_right .st_con .site_map .site_map_list{width:100%; vertical-align:top;} #con_box #con_box_right .st_con .site_map .site_map_list li.depth01{} #con_box #con_box_right .st_con .site_map .site_map_list li.depth02{} #con_box #con_box_right .st_con .site_map .site_map_list li.depth03{color:#666; margin-top:5px;} .spotArea {position: relative; display: inline-block; width: 646px; float: left; padding: 10px; border: 1px solid #ECECEC;} .spotArea .spot {position:relative; margin-top: 16px;} .spotArea .spot li {} .spotArea .spot li h3 {height: 76px; width: 274px; display: inline-block; background: #f5ffe9; border-bottom: 1px solid #64a313;} .spotArea .spot li h3 a {color: #64A313; padding: 27px 0px; display: inline-block; background: url(../../_images/_common/bullet_arrow02.jpg) no-repeat 0 29px; padding-left: 26px; font-size: 15px; font-weight: normal; margin-left:10px;} .spotArea .spot li h3 a:hover {text-decoration:underline;} .spotArea .spot li .spotContent {position: absolute; top: 0px; width: 344px; right: 0px;} .spotArea .spot li .spotContent .spotImg {margin-bottom:20px;} .spotArea .spot li .spotContent a {color:#64a313; text-decoration: underline; background: url(../../_images/_common/bullet_arrow02.jpg) no-repeat 0 2px; padding-left: 16px; margin-top: 20px; display: inline-block;} .spotArea .spot li .spotContent a:hover {color:#7CC320;} /*newsBoxArea - 20200129추가*/ .newsBoxArea {position: relative; width: 296px; margin-left: 12px; float: left; padding: 0; border: 1px solid #9d1300; background: #9d1300;} .multiArea {position: relative; width: 276px; margin-top: 6px; margin-left: 12px; float: left; padding: 10px; border: 1px solid #ECECEC;} .multiArea .multiLinkImg {margin:16px 0 43px;} .rndLinkArea {} .rndLinkArea span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea li {font-size:11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat 260px 22px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} .rndLinkArea li a {display: block;} .rndLinkArea.mm span {font: 13px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm a:hover span {font: bold 13px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm li { float: left; display: inline-block; width: 24%; text-align: center; font-size:11px; border-bottom: 0px solid #e0e0e0; padding: 15px 0px 0;} .rndLinkArea.mm li:nth-child(3) {width: 27%;} .rndLinkArea.mm li span:after { content:''; display: inline-block; margin-left: 4px; width: 14px; height:14px; vertical-align: middle; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat;} .rndLinkArea.mm li a {display: block;} .rndLinkArea.mm li a em {display: none;} .bannerArea {position: relative; width: 298px; margin-top: 6px; margin-left: 12px; float: left; } .bannerArea li + li {margin-top: 4px;} .bannerArea li a {display: block;} #con_box_left .multiLinkImg {margin:16px 0 23px;} #con_box_left .multiLinkImg img {width:185px;} #con_box_left .rndLinkArea {} #con_box_left .rndLinkArea span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51; padding-left: 18px;} #con_box_left .rndLinkArea li {font-size:11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat 10px 12px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} #con_box_left .rndLinkArea li a {display: block; padding: 0 10px;} /* Adress 2014-07-29 */ #con_box #con_box_right .info_add{padding:20px 0;width:100%;clear:both;} #con_box #con_box_right .info_add dl{margin-left:115px;} #con_box #con_box_right .info_add dl dt{background:url('../../_images/_common/bu_add.gif') 0px 8px no-repeat;padding-top:5px;padding-left:15px;font-weight:bold;} #con_box #con_box_right .info_add dl dd{background:none;width:100%;padding-top:5px;margin-left:15px;} /* 카피라이트 */ #copy_box {width:980px; margin:0 auto; clear:both; padding:20px 0;} #copy_box .copy_box_txt{height:50px; color:#A3A3A3; font-size:11px; font-family:dotum; background:url(../../_images/_common/logo_footer.png) 15px 0px no-repeat; padding-left:280px;} /* 20140613 mj추가 */ .content{padding:0 20px;} #con_box_right h4{font-size:28px; margin-bottom:30px; font-weight:bold; color:#3f4542; text-transform:uppercase; } #con_box_right h5{border:3px solid #828f89; font-size:12px; font-weight:bold; padding:5px 10px; display:inline; } ul.wwd_nav_list{margin-bottom:30px;} ul.wwd_nav_list li{background:#d7dbda; border-left:5px solid #b8c3c0; width:440px; height:40px!important; margin-bottom:6px; } ul.wwd_nav_list li a{color:#828f89; text-decoration:none; font-size:13px; font-weight:bold; display:inline-block; padding:12px 0 0 15px; width:423px; height:30px;} ul.wwd_nav_list li a:hover{color:#fff;} ul.wwd_nav_list li.wwd_nav_list_on{background:#75817c; border-left:5px solid #3f4542; width:440px; height:40px!important; margin-bottom:6px;} ul.wwd_nav_list li.wwd_nav_list_on a{font-size:13px !important; color:#fff !important; text-decoration:none; font-size:13px; font-weight:bold; display:inline-block; padding:12px 0 0 15px; width:423px; height:30px;} ul.wwd_cont_txt01{margin-bottom:30px;} ul.wwd_cont_txt01 li{background:url(../../_images/_common/wwd_bullet01.gif) no-repeat left 5px; padding-left:10px; margin-bottom:4px; color:#7d7d7d;} p.wwd_cont_tit01{margin:15px 0 20px; color:#75817c; font-size:20px; font-weight:bold; } p.fw_b{font-weight:bold} dl.wwd_cont_txt02{margin-top:30px;} dl.wwd_cont_txt02 dt{font-size:13px; background:url(../../_images/_common/wwd_bullet02.gif) no-repeat left 5px; padding-left:15px; margin-bottom:8px; color:#236fbc; font-weight:bold;} dl.wwd_cont_txt02 dd{margin:0 0 30px 15px} ul.img_list li{float:left; margin-left:10px;} .mb30{margin-bottom:30px;} .mb10{margin-bottom:10px;} .po_a{position:absolute; top:0; right:0} .po_r{position:relative;} .fl_n{float:none !important;} caption{display:none;} .tb{width:100%; border-top:3px solid #98c9f6; border-left:1px solid #e3e3e3; font-size:12px; color:#525252;} .tb th{background:#f5f5f5; color:#2892d3; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; padding:15px; font-weight:bold; } .tb td{border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; padding:15px} /* 20140906 추가 */ .mgn_ma25{margin-top:0;} /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { html, body {background:none; line-height:normal;} #header_box {position: relative; height: 120px; width: 100%; margin: 0 auto;} #header_box .logo {margin: 20px 0 0 10px; float: left;} #header_box .logo img {width:70%;} #j_navi {position: absolute; top: 80px; width: 100%; background: #006A53;} /* 모바일에서 메인 화면 버튼 보이도록 수정 .nav0 {display:none;}*/ .nav0 {display:block;} .gnb li {font-size:12px;} #visual_box {width: 100%; height: 178px; clear: both; text-indent: -10000px; background: url(../../_images/_common/visual_img01.jpg) no-repeat top center; background-size: 930px;} #con_box {width: 94%; margin: 20px auto; padding:10px;} #con_box .rndArea {display: inline-block; border: 1px solid #ececec;padding: 10px; margin-bottom: 20px; width: 94%;} .textBox01 {background: #fff; font: bold 14px Verdana,Geneva,sans-serif!important; padding: 0 6px; color: #64A314;} .rndTextBox01 {background: #0780BF url(../../_images/_common/rndBox01Bg.gif) no-repeat right!important;} .rndTextBox02 {background: #64A313 url(../../_images/_common/rndBox02Bg.gif) no-repeat right!important;} .rndTextBox03 {background: #E27C28 url(../../_images/_common/rndBox03Bg.gif) no-repeat right!important;} #con_box .tech ul li {display: inline-block; float:none; width: 94%;} #con_box .tech ul li div {position: relative; width: 94%; height: 60px; padding: 20px;} #con_box .tech ul li div .rndTextBoxText {color: #fff; margin-top: 10px; width: 100%;display: inline-block;} #con_box .tech ul li div .rndMore {background: transparent; border: 1px solid #FFF; padding: 4px 6px; color: #fff; display: inline-block; position: absolute; top: 16px; right: 20px;} .spotArea {position: relative; display: inline-block; width: 94%; float: left; padding: 10px; border: 1px solid #ECECEC;} .spotArea .spot li h3 {height: 50px; width: 100%; display: inline-block; background: #f5ffe9; border-bottom: 1px solid #64a313;background: #64A313!important;} .spotArea .spot li h3 a {color: #fff!important; background: url(../../_images/_common/bullet_arrow02_on.jpg) no-repeat 0 19px!important; padding: 17px 0px; display: inline-block; padding-left: 20px; font-size: 15px; font-weight: normal; margin-left: 10px;} .spotArea .spot li .spotContent .spotImg {margin: 20px 0; width: 100%;} .spotArea .spot li .spotContent {position:relative; top: 0px;width: 100%; right: 0px; display:block!important; text-align: center; margin-bottom: 30px;} .spotArea .spot li .spotContent p {text-align:left;} /*newsBoxArea - 20200129추가*/ .newsBoxArea {position: relative; width: 94%; margin-top: 10px; margin-left: 0px; float: left; padding: 10px; border: 1px solid #9d1300; background: #9d1300;} .multiArea {position: relative; width: 94%; margin-top: 10px; margin-left: 0px; float: left; padding: 10px; border: 1px solid #ECECEC;} .multiArea .multiLinkImg {text-align: center;} .multiArea .multiLinkImg img {width:100%;} .rndLinkArea li {font-size: 11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat right 22px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} .rndLinkArea.mm li { float: none; display: block; width: 100%; text-align: left; font-size: 11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat right 22px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} .rndLinkArea.mm li:nth-child(3) {width: 100%;} .rndLinkArea.mm span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm a:hover span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm li span:after { content:none;} .rndLinkArea.mm li a em {display: block; font-style: normal;} .bannerArea {position: relative; width: 98%; margin-top: 10px; margin-left: 0; float: left; } .bannerArea li + li {margin-top: 10px; margin-bottom: 10px;} .bannerArea li a {display: block;} .bannerArea li img {width: 100%;} #copy_box {width: 100%; margin: 0 auto; clear: both; padding: 20px 0;} #copy_box .copy_box_txt {height: 100%; color: #A3A3A3; font-size: 11px; font-family: dotum; background: none; padding-left: 20px;} #con_box_left {display:none;} #con_box #con_box_right {width: 100%; float: none;} #con_box #con_box_right img {width:100%;} #con_box #con_box_right .con_img {width:100%;} #con_box #con_box_right .con_img img {width:100%;} ul.wwd_nav_list li {width:100%; height:50px!important;} ul.wwd_nav_list li a {width:90%;} ul.wwd_nav_list li.wwd_nav_list_on {width:100%; height:50px!important;} ul.wwd_nav_list li.wwd_nav_list_on a {width:90%;} ul.img_list li {float:none;} .po_a {position:relative;} .po_a img {width:100%;} #con_box #con_box_right .con_table {margin:0px;} .chief_box {width: 100%!important;} .table_chief {width:100%!important;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { html, body {background:none; line-height:normal;} #header_box {position: relative; height: 120px; width: 100%; margin: 0 auto;} #header_box .logo {margin: 20px 0 0 10px; float: left;} #header_box .logo img {width:70%;} #j_navi {position: absolute; top: 80px; width: 100%; background: #006A53;} /* 모바일에서 메인 화면 버튼 보이도록 수정 .nav0 {display:none;}*/ .nav0 {display:block;} .gnb li {font-size:12px;} #visual_box {width: 100%; height: 178px; clear: both; text-indent: -10000px; background: url(../../_images/_common/visual_img01.jpg) no-repeat top center; background-size: 930px;} #con_box {width: 94%; margin: 20px auto; padding:10px;} #con_box .rndArea {display: inline-block; border: 1px solid #ececec;padding: 10px; margin-bottom: 20px; width: 94%;} .textBox01 {background: #fff; font: bold 14px Verdana,Geneva,sans-serif!important; padding: 0 6px; color: #64A314;} .rndTextBox01 {background: #0780BF url(../../_images/_common/rndBox01Bg.gif) no-repeat right!important;} .rndTextBox02 {background: #64A313 url(../../_images/_common/rndBox02Bg.gif) no-repeat right!important;} .rndTextBox03 {background: #E27C28 url(../../_images/_common/rndBox03Bg.gif) no-repeat right!important;} #con_box .tech ul li {display: inline-block; float:none; width: 94%;} #con_box .tech ul li div {position: relative; width: 94%; height: 60px; padding: 20px;} #con_box .tech ul li div .rndTextBoxText {color: #fff; margin-top: 10px; width: 100%;display: inline-block;} #con_box .tech ul li div .rndMore {background: transparent; border: 1px solid #FFF; padding: 4px 6px; color: #fff; display: inline-block; position: absolute; top: 16px; right: 20px;} .spotArea {position: relative; display: inline-block; width: 94%; float: left; padding: 10px; border: 1px solid #ECECEC;} .spotArea .spot li h3 {height: 50px; width: 100%; display: inline-block; background: #f5ffe9; border-bottom: 1px solid #64a313;background: #64A313!important;} .spotArea .spot li h3 a {color: #fff!important; background: url(../../_images/_common/bullet_arrow02_on.jpg) no-repeat 0 19px!important; padding: 17px 0px; display: inline-block; padding-left: 20px; font-size: 15px; font-weight: normal; margin-left: 10px;} .spotArea .spot li .spotContent .spotImg {margin: 20px 0; width: 100%;} .spotArea .spot li .spotContent {position:relative; top: 0px;width: 100%; right: 0px; display:block!important; text-align: center; margin-bottom: 30px;} .spotArea .spot li .spotContent p {text-align:left;} /*newsBoxArea - 20200129추가*/ .newsBoxArea {position: relative; width: 94%; margin-top: 10px; margin-left: 0px; float: left; padding: 10px; border: 1px solid #9d1300; background: #9d1300;} .multiArea {position: relative; width: 94%; margin-top: 10px; margin-left: 0px; float: left; padding: 10px; border: 1px solid #ECECEC;} .multiArea .multiLinkImg {text-align: center;} .multiArea .multiLinkImg img {width:100%;} .rndLinkArea li {font-size: 11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat right 22px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} .rndLinkArea.mm li { float: none; display: block; width: 100%; text-align: left; font-size: 11px; background: url(../../_images/_main/mainBtnArrow.jpg) no-repeat right 22px; border-bottom: 1px solid #e0e0e0; padding: 10px 0px;} .rndLinkArea.mm li:nth-child(3) {width: 100%;} .rndLinkArea.mm span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm a:hover span {font: bold 14px Verdana,Geneva,sans-serif; color: #006a51;} .rndLinkArea.mm li span:after { content:none;} .rndLinkArea.mm li a em {display: block; font-style: normal;} .bannerArea {position: relative; width: 100%; margin-top: 10px; margin-left: 0; float: left; } .bannerArea li + li {margin-top: 10px; margin-bottom: 10px;} .bannerArea li a {display: block;} .bannerArea li img {width: 100%;} #copy_box {width: 100%; margin: 0 auto; clear: both; padding: 20px 0;} #copy_box .copy_box_txt {height: 100%; color: #A3A3A3; font-size: 11px; font-family: dotum; background: none; padding-left: 20px;} #con_box_left {display:none;} #con_box #con_box_right {width: 100%; float: none;} #con_box #con_box_right img {width:100%;} #con_box #con_box_right .con_img {width:100%;} #con_box #con_box_right .con_img img {width:100%;} ul.wwd_nav_list li {width:100%; height:50px!important;} ul.wwd_nav_list li a {width:90%;} ul.wwd_nav_list li.wwd_nav_list_on {width:100%; height:50px!important;} ul.wwd_nav_list li.wwd_nav_list_on a {width:90%;} ul.img_list li {float:none;} .po_a {position:relative;} .po_a img {width:100%;} #con_box #con_box_right .con_table {margin:0px;} .chief_box {width: 100%!important;} .table_chief {width:100%!important;} }