/* style Guide ver1.0 written by 박주현 */ /* 2009.09.21 */ /* style Guide ver1.1 written by 고석만 */ /* 2012.12.12 */ /* layout common */ html, body {width:100%; height: 100%;} body { font-family: 나눔고딕, 돋움, 굴림, 맑은고딕; font-size: 0.78em; } #main {width: 100%; margin: 0px; } #wrap_main { width: 920px; position:relative; } !* {border: 1px solid #000;} /* top */ #top {position: relative; height: 90px;} #top div.navigation { clear:both; width: 660px; height: 10px; position: absolute; right:0; top:10px; } #top div.navigation ul.fontzoom { float:left; margin:0; padding:0; } #top div.navigation ul.fontzoom li{padding: 0 1px 0 6px; display: inline; line-height: 10px; height: 10px; white-space:nowrap; } #top div.navigation ul.section1 { float:right; text-align: right; letter-spacing: -1px; color: #000;} #top div.navigation ul.section1 li{background: url(../images/layout/navigation_bar_css.gif) no-repeat 0 0; display: inline; padding: 0 1px 0 6px; line-height: 10px; height: 10px; white-space:nowrap;} #top div.navigation ul.section1 li.first {background: none; padding: 0 0 0 5px;} *:first-child+html #top div.navigation ul.section1 li{ margin: 0px;} /* ie7일때 */ #top h1 {margin: 34px 0 0 36px; position: absolute;} /* GNB 스타일 #top div#gnb { position: absolute; top: 48px; left: 260px; z-index: 1;} #top div#gnb_style1{ position: absolute; top: 43px; left: 260px; z-index: 1; width: 660px; height: 65px; background: url(../images/layout/gnb_bg.gif) no-repeat 0 0;} #top div#gnb_style1 ul.section1 { list-style:none; position:relative; top:5px; left:10px; } #top div#gnb_style1 ul.section1 li { float: left; font-size: 1.2em; color: #FFFFFF; font-weight: bold; letter-spacing: -1px; line-height: 30px; text-align:center; } #top div#gnb_style1 a { text-decoration: none; } #top div#gnb_style1 a:link { color:#FFFFFF; } #top div#gnb_style1 a:visited { color:#FFFFFF; } #top div#gnb_style1 a:hover { color:#fefc65; } #top div#gnb_style1 a:active { color:#FFFFFF; } #top div#gnb_style1 a.bmbg, #top div#gnb_style1 a.bmbg:link p, #top div#gnb_style1 a.bmbg:visited p, #top div#gnb_style1 a.bmbg:hover p, #top div#gnb_style1 a.bmbg:active p { width:118px; height:35px; margin:0; padding:0; text-align:center; vertical-align:middle; } #top div#gnb_style1 a.bmbg:visited div, #top div#gnb_style1 a.bmbg:hover div, #top div#gnb_style1 a.bmbg:active div { background: url(../images/layout/gnb_depth1_R_bg.gif) top right no-repeat; } #top div#gnb_style1 a.bmbg:visited p, #top div#gnb_style1 a.bmbg:hover p, #top div#gnb_style1 a.bmbg:active p { background: url(../images/layout/gnb_depth1_L_bg.gif) top left no-repeat ;} #top div#gnb_style1 ul.section2 { float: right; list-style:none; position:relative; right:8px; top:10px; } #top div#gnb_style1 ul.section2 li { margin-right: 10px; padding: 0px; font-size: 1.0em; color: #FFFFFF; font-weight: bold; display: inline; } #top div#gnb_style1 ul.section2 li a { padding:5px 0px 5px 20px; text-decoration: none; vertical-align: middle; } #top div#gnb_style1 ul.section2 li a:link, #top div#gnb_style1 ul.section2 li a:visited { color:#FFFFFF; } #top div#gnb_style1 ul.section2 li a:hover, #top div#gnb_style1 ul.section2 li a:active { color:#fefc65; background: url(../images/layout/gnb_bullet.gif) left center no-repeat; } */ /* GNB 서브메뉴 #top div#gnb_style1 ul.submenu { float: left; width: 515px; visibility:hidden; position:absolute; top:30px; left:0;} #top div#gnb_style1 ul.submenu li{ display: inline; font-family: 나눔고딕, 돋움, 돋움체, 굴림, 굴림체; font-size: 0.79em !important; color: #d5e3eb; font-weight: bold; letter-spacing: -1px; line-height: 35px; height: 35px; margin: 0 8px; } #top div#gnb_style1 ul.submenu li a { text-decoration: none; padding-left:10px; } #top div#gnb_style1 ul.submenu li a:link, #top div#gnb_style1 ul.submenu li a:visited { text-decoration: none; color:#FFFFFF; } #top div#gnb_style1 ul.submenu li a:active, #top div#gnb_style1 ul.submenu li a:hover { text-decoration: none; color:#fefc65; background:url(../images/layout/gnb_depth2_B_bg.gif) left center no-repeat; } */ #submenu01, #submenu02, #submenu03, #submenu04 { padding: 0px; } #submenu01{ padding-left: 5px !important; } #submenu02{ padding-left: 130px !important; } #submenu03{ padding-left: 250px !important; } #submenu04{ padding-left: 100px !important; } /* center */ #center {width: 900px; margin: -9px 0 0 20px;} #center div.content1 { width:260px; padding:50px 10px 10px 0; *padding:40px 10px 10px 0; float:right; min-height:302px; position:relative; } /** html #center div.content1 {padding: 40px 5px 10px 0; } ie6에서만 적용되게 */ #center div.content2 { clear:both; width: 900px; border-top: 1px solid #499ac9; height: 139px; min-height: 139px;} /* tabBoard */ #tabBoard { width:270px; height:100px; min-height:100px; margin-top:10px; overflow:hidden; /*position:absolute; bottom:0px;*/ } #tabBoard ul.btn {width: 270px; background:url(../images/layout/tabBoard_bg.gif) repeat-x bottom left; height: 22px; position: relative; margin: 0px;} *:first-child+html #tabBoard ul.btn li { margin-top: -1px; } #tabBoard ul.btn li {float:left; width:60px; margin-right:0px; line-height:22px; } * html #tabBoard ul.btn li {display: inline;} /* ie6에서만 적용되게 */ #tabBoard ul.btn li.first { margin-right: 0px; width:61px;} #tabBoard ul.btn li a{ display: block;} #tabBoard ul.btn li.more {float:right; text-align:right; width:auto;} #tabBoard ul.btn li.more img {margin: 10px 0 2px 0;} #tabBoard ul.list {width: 260px; top:30px; position:absolute; left:0px;} #tabBoard ul.list li {width:245px; line-height: 18px; background:url(../images/common/bullet_green.gif) 0 50% no-repeat; padding: 0 0 0 8px; font-size:0.93em; font-family: dotum;} #tabBoard ul.list li a{overflow:hidden; display:block; width:245px; height:16px;} #tabBoard ul.list li a:link,a:visited,a:hover,a:active { text-decoration: none;} #tabBoard ul.btn p.more2 {position:absolute; right:0; top:0;} #tabBoard ul.btn p.more2 img{margin: 10px 0 2px 0;} /* 수입쇠고기 유통이력조회 */ /* #infoInquiry {width: 265px; min-height:100px; height: 100px; padding: 0 5px 0 0; margin: 0 0 16px 0; background:red url(../images/layout/infoInquiry_bg_css.gif) top left no-repeat;} * html #infoInquiry {padding: 0 10px 0 0; } // ie6에서만 적용되게 #infoInquiry h3 { float:left; margin:0px; padding:0px; height: 22px; } #infoInquiry div.infoInquiry_cont { width: 250px; margin: 7px 0 0 0; padding: 3px 0 0 5px; height: 60px; } #infoInquiry p.infoInquiry_sample {margin: -18px 0 0 0; text-align: right;} */ #infoInquiry { width:270px; min-height:85px; height:105px; padding:0px; margin:0 0 10px 0; overflow:hidden; background: url(../images/layout/infoInquiry_bg_css.gif) top left no-repeat;} #infoInquiry h3.tit { float:left; height:20px; } #infoInquiry p.infoInquiry_sample { float:right; width:80px; height:20px; text-align:right; } #infoInquiry h3.tit, #infoInquiry p.infoInquiry_sample { margin:10px 10px 0px 10px; padding:0px; font-size:0px; line-height:0px; } #infoInquiry div.infoInquiry_cont { clear:both; width:250px; margin:0px auto; padding:0px; height:60px; position:relative; top:5px; } /* 팝업존 */ #popupZone {width: 195px; padding: 10px 0 0 20px; position: relative;} #popupZone h3, #popupZone p{float: left; margin: 0 0 10px 0; font-size:1.0em;} #popupZone ul {float: right; width: 45px; height: 10px; line-height: 10px;} #popupZone ul li {display: inline;} #popupZone ul li a{background: url(../images/layout/off_popup.gif) top left no-repeat;display: block; float: left; width: 10px; height: 10px;} /*#popupZone ul li a:hover{background: url(../images/layout/on_popup.gif) top left no-repeat;} #popupZone ul li a:active{background: url(../images/layout/on_popup.gif) top left no-repeat;}*/ #popupZone div.items {position: absolute; top: 10px; left: 20px;} /* 온라인 설문 */ #onlinePoll { width: 190px; padding: 10px 0 0 20px;} #onlinePoll h3 {margin: 0 0 10px 0;} #onlinePoll p{ background: #d5ebee; height: 44px; overFlow: hidden; padding: 3px; font-size:0.93em; font-family: dotum;} #onlinePoll ul { display: inline; float: right; margin: 3px 0 0 0; width: auto;} #onlinePoll ul li { display: inline; float: left; overFlow: hidden; padding: 0 2px 0 0; width: auto;} /* mainCenter 배너 */ ul.centerBan {width: 660px; min-height: 139px; margin: 0px;} * html ul.centerBan {height: 139px; } /* ie6에서만 적용되게 */ ul.centerBan li {float:left; background:url(../images/layout/center_bn_bg.gif) top left no-repeat; text-align: center; padding: 3px 5px 0 6px; line-height: 139px; width: auto;} * html ul.centerBan li{display: inline; } /* ie6에서만 적용되게 */ /* mainRight 배너 */ /*#rightBanner { position: absolute; top: 75px; left: 930px; width:60px; height: 130px; background: url(../images/layout/right_bg2.gif) top left no-repeat;}*/ #rightBanner{ position:fixed; _position:absolute; _z-index:-1; top:79px; left:930px; width:60px; border:0px; overflow:hidden; } #rightBanner ul { margin: 30px 0 0 0; text-align: center;} #rightBanner ul li { padding: 0 0 10px 0;} #rightBanner .first_visitor { height:260px; padding:0px; background:url(../images/layout/right_bn4.gif) 0px 0px no-repeat;} #rightBanner .first_visitor ul { display:inline-block; width:100%; margin-top:54px; } #rightBanner .first_visitor li { height:15px; padding:0; margin-bottom:3px; } #rightBanner .first_visitor li a { display:block; width:100%; height:100%; /*background:url(../images/layout/blank.gif) 0px 0px repeat;*/ } #rightBanner .first_visitor li.process {height:70px; padding:0; margin-top:18px; } #rightBanner .first_visitor li.topskip {height:40px; padding:0; margin-top:25px; } /* mainVisual */ #mainVisual { position: absolute; top: -10px; left: 20px; z-index:-1;} /* #processMenu { position: absolute; top: 270px; left: 40px; z-index:0;} #processMenu h3{line-height: 20px; margin: 0px;} #processMenu p{margin: 5px 0;} #layer1 {position: absolute; top: 125px; left: 223px; z-index:1;} */ #cscenter { position: absolute; top: 375px; left: 40px; z-index:0;} /* 플래시 대체-유통이력관리프로세스 */ #processMenu_chg{border: 3px solid #4590bd; width: 590px;height: 285px;overflow-y:auto; top: -120px; position:absolute;padding:5px;} #processMenu_chg h3{font-size:1.5em; font-weight: bold;} #processMenu_chg h4{font-size:1.2em; font-weight: bold; background:#e7f4f5; height: 26px; line-height: 26px; padding: 7px 0 0 5px;} #processMenu_chg p{font-size: 1.12em; font-weight: bold; color:#026ca5; font-family: dotum; margin:0 0 10px 10px;} #processMenu_chg ul {margin: 0 0 20px 20px; font-size: 0.93em; font-family: dotum; letter-spacing: -1px;} #processMenu_chg ul li {background:url(../images/common/bullet_red.gif) 0 20% no-repeat; padding: 0 0 0 8px; line-height: 22px;} #processMenu_chg ul li em{text-decoration: none; color:#55a903; font-weight: bold;} /* subVisual */ #subVisual {position: absolute; top: 0; left: 0; z-index: -1;} /* left navigation */ #sub_left { width: 230px; margin: 78px 0 0 0; padding: 0px; text-align: left; background: url(../images/common/lnb_bot_bg.gif) right bottom no-repeat;} #lnb { width: 204px; float: right; margin: 20px 0 0 0;} #lnb_style1 { width: 175px; float: right; margin: 0px; padding: 15px 10px 10px 10px; background:url(../images/common/lnb_top_bg.gif) right top no-repeat;} #lnb_style1 h2{ width: 175px; height:40px; margin:0px; padding:0px; font-size: 1.6em; font-weight: bold; color:#000000; letter-spacing: -2px; overflow:hidden; } #lnb_style1 h3{ margin: 0px; padding: 0px; font-size: 1.12em; font-weight: bold; color:#808080; letter-spacing: -2px; } #lnb_style1 h3.selected a { color:#FFFFFF; background: url(../images/common/lnb_depth2_on.gif) 0 50% no-repeat; } #lnb_style1 h3 a { height:22px; padding:4px 0px 0px 20px; display:block; background: url(../images/common/lnb_depth2_out.gif) left bottom no-repeat; } #lnb_style1 h3 a:link { color:#808080; } #lnb_style1 h3 a:visited { color:#808080; } #lnb_style1 h3 a:hover { color:#FFF; background: url(../images/common/lnb_depth2_ov.gif) left bottom no-repeat; } #lnb_style1 h3 a:active { color:#808080; } #lnb_style1 h3.selected a:link { color:#FFFFFF; } #lnb_style1 h3.selected a:visited {color:#FFFFFF; } #lnb_style1 h3.selected a:hover { color:#FFFFFF; background: url(../images/common/lnb_depth2_on.gif) 0 50% no-repeat; } #lnb_style1 h3.selected a:active { color:#FFFFFF; } #lnb_style1 ul.lnb_subMenu{ margin:0px; padding-bottom:2px; letter-spacing: -1px; background: url(../images/common/lnb_depth2_out.gif) left bottom no-repeat; } #lnb_style1 ul.lnb_subMenu li{ width: 100%; height: 22px; margin: 1px 0; padding: 0px; line-height: 22px; color:#333333; overflow:hidden; /* position:relative; left:15px; */ } #lnb_style1 ul.lnb_subMenu li a { width:100%; margin:0px; padding-left:20px; color:#003366; display:block;} #lnb_style1 ul.lnb_subMenu li.selected a { background:#cddee4 url(../images/common/lnb_depth3_on.gif) 10px 50% no-repeat ; } /* #lnb_style1 ul.lnb_subMenu li.selected a:link, #lnb_style1 ul.lnb_subMenu li.selected a:visited, #lnb_style1 ul.lnb_subMenu li.selected a:hover, #lnb_style1 ul.lnb_subMenu li.selected a:active {color:#003366;} */ #lnb_style1 ul.lnb_subMenu li a:link, #lnb_style1 ul.lnb_subMenu li a:visited {text-decoration: none; } #lnb_style1 ul.lnb_subMenu li a:hover { background:#cddee4 url(../images/common/lnb_depth3_on.gif) 10px 50% no-repeat ; } #lnb_style1 ul.lnb_subMenu li a:active {text-decoration: none; } /* sub content */ #sub_content{ width:660px; padding:0 0 0 30px; margin:130px 0 30px 0;} #contentArea { padding:20px 0 0 0; width: 660px;} #contentHeader {background: url(../images/layout/content_headerBg.gif) bottom left repeat-x; height:50px; width:660px;} #contentTitle {float: left; width: 280px; margin: 12px 0 0 0; background: URL(../images/layout/centerTitle_bullet.gif) 0 50% no-repeat;} #contentTitle h2 {display:inline; font-size:1.0em;} #contentHeader p.navigation {margin:12px 0px 0px 0px; text-align: right; font-size: 0.93em;} #contentHeader ul.tip {margin: 0px; width: 375px; background: #eeeeee; padding: 0 0 0 5px; height: 20px; width: auto;} #contentHeader ul.tip li {float: left; width: auto;} * html #contentHeader ul.tip li {display: inline; } /* ie6에서만 적용되게 */ #contentHeader ul.tip li.tipTxt{float: left; font-size:0.93em; font-family: dotum;color: #888888; width: 340px; vertical-align: middle; padding: 0px 0 0 0; line-height: 18px; height: 18px; } #contentHeader ul.tip li.tipBtn{width: 30px; float: right; line-height: 18px; height: 18px; } #contentHeader ul.tip li.tipBtn img { margin: 2px 0 0 0;} #contentHeader ul.tip_v1 {float:right; background: #fff; padding-right:2px;} #contentHeader ul.tip_v1 li.tipTxt{float: left; width: auto;margin-right:5px;} #contentHeader ul.tip_v1 li.tipBtn{float: left; width: auto;padding-left:5px;} #contentHeader ul.tip_v1 li.tipBtn img { margin: 2px 0 0 0;} /* footer */ #footer {width:900px; height:70px; margin: 0 0 0 20px; border-top: 1px solid #c9cac9; position: relative;} #footer div.slogo { width: 220px; padding: 10px 0 0 20px; text-align: left;} #footer div.footerMenu {width: 430px; margin: 10px 0 0 0; padding: 0 0 0 15px;} #footer div.footerMenu ul { margin-bottom:10px; display: inline; float: left; width: auto;} #footer div.footerMenu ul li{display: inline; float: left; overFlow: hidden; background: url(../images/layout/footer_bar.gif) 0 40% no-repeat; padding: 0 6px 0 10px; width: auto;} #footer div.footerMenu ul li.first {background: none; padding: 0 7px 0 0;} #footer div.footerMenu address {float:left;width:400px;padding:2px 0 3px;} #footer div.footerMenu address img {float:left;vertical-align:top;} #footer div.footerMenu p.copyright { padding:10px 0 0 0;} #footer div.footerMenu p img {margin-top:3px; vertical-align:top;} #rollBanner { position: absolute; top:12px; left: 660px;} #familySite { position: absolute; top: 14px; left: 795px;} #footerBanner {margin: 10px 0 0 0;} #footerBanner select {width: 140px;font-size: 0.95em; letter-spacing: -1px; height: 20px; padding: 0 0 0 0; margin : 1px 0 2px 0;} #manualBox {position: absolute; top: 120px; left: 20px; z-index:1; background:#FFFFFF; width: 924px; height: 750px; padding-top:20px; border: 3px solid #2d739d; min-height: 100px;} #manualBox p.tipCont {margin: 0 0 0 10px; color: #333;} #manualBox p.tipBtn { text-align: right;} #manualBox p.tipClose {position: absolute; right:5px; top:5px; margin: 5px 0 10px 0; font:normal 0.93em dotum; color:#333;} #manualBox p.tipClose em { font-weight: normal; color: #e10101; text-decoration: underline;} #manualBox p.imgList {margin: 20px 0 0 20px;} /* skip navigation */ .skip_navi{position:relative; width:920px; z-index:110;} .skip_navi a{position:absolute; left:0; top:-1000px; display:block; width:100%; padding:10px 0; text-align:center; font-size:16px; font-weight:bold; color:#333; background:#ddd;} .skip_navi a:active,.skip_navi a:focus{top:0; text-decoration:none; color:#333;}