/* *********************************************** * @source : top_layout.css * @description : top css *********************************************** * DATE AUTHOR DESCRIPTION * --------------------------------------------- * 2018/04/12 박봉균 (정보화과제)인터넷우체국 홈페이지 개선 작업 (epost_2018_0259) * 2018/05/31 장태영 쇼핑몰 회원등급 개선 (epost_2018_0389) * 2018/06/21 장태영 (센터) 집배코드 부여서비스 파일 업로드 용량 개선(epost_2018_0381) * 2018/09/21 박영조 epost_2018_0698_[우체국택배 웹접근성] 18년 WA마크 웹접근성 결함처리 - 1차 * 2018/11/22 박봉균 집배코드 라벨 출력 및 공통 기능 변경 (epost_2018_0853) - 검색 입력창 좌측에 제제 이미지 출력 *********************************************** */ /* 180326 bjy top_layout.css 수정 */ #top_layout{ width:100%;min-width:1180px;height:auto;padding:0px; margin:0px 0px 0px 0px; border-bottom:2px solid #ee2e24; position:relative;} #top_layout:before{ width:100%; height:133px; content:""; padding:0px; margin:0px; border-bottom:1px solid #d5d5d5;position:absolute; top:0px; left:0px;} #top_layout .top_wrap{ width:1180px; height:auto; padding:0px; margin:0px auto;} #top_layout .top_wrap .logo_wrap{ width:100%; height: 84px;padding:10px 0px; margin:0px; position:relative;} #top_layout .top_wrap .logo_wrap:after{display:block;content:"";clear:both;} #top_layout .top_wrap .logo_wrap .logo{ width:300px; height:auto; padding:0px; margin:5px 0px 0px 0px; float:left;} #top_layout .top_wrap .logo_wrap .search{ width:340px; height:36px; padding:0px;position:absolute;top:34%;left:35%;margin:0;} /* //180326 bjy top_layout.css 수정 */ #top_layout .top_wrap .logo_wrap .search input[type=text]{ width:265px; height:16px; font-size:14px; line-height:16px; padding:8px; margin:0px; border:2px solid #ee2e24; float:left;} #top_layout .top_wrap .logo_wrap .search a{ width:51px; height:32px; background-color:#ee2e24; font-size:14px; color:#fff; font-weight:bold; text-align:center; line-height:32px; display:block; padding:0px; margin:0px; border:0px; border:2px solid #ee2e24; float:left;} #top_layout .top_wrap .logo_wrap .utile{ height:26px; padding:0px; margin:26px 0px 0px 0px; display:inline-block; float:right;} #top_layout .top_wrap .logo_wrap .utile li{ padding:0px 10px; margin:0px; float:left; position:relative;} #top_layout .top_wrap .logo_wrap .utile li a{ font-size:12px; color:#555555; line-height:26px; font-weight:bold;} #top_layout .top_wrap .logo_wrap .utile li.n1{ font-size:12px; font-weight:bold; line-height:26px; padding-right:15px;} #top_layout .top_wrap .logo_wrap .utile li.n1 span p{ text-decoration:underline; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:110px; text-align:right; line-height: 26px; display: inline-block;} #top_layout .top_wrap .logo_wrap .utile li.n1:before, #top_layout .top_wrap .logo_wrap .utile li.n2:before, #top_layout .top_wrap .logo_wrap .utile li.n3:before, #top_layout .top_wrap .logo_wrap .utile li.n4:before{ width:1px; height:10px; content:""; padding:0px; margin:0px; border-right:1px solid #d4d4d4; position:absolute; top:8px; right:0px;} #top_layout .top_wrap .logo_wrap .utile li.n5 a{ color:#f04239;} #top_layout .top_wrap .logo_wrap .utile li.n3{ position:relative;} #top_layout .top_wrap .logo_wrap .utile li.n3:hover{ background-color:#ee2e24;} #top_layout .top_wrap .logo_wrap .utile li.n3:hover > a{ color:#fff;} #top_layout .top_wrap .logo_wrap .utile li.n3 > ul{ width:170px; background-color:#FFF; padding:0px; margin:0px 0px 0px -85px; border:1px solid #ee2e24; position:absolute; top:-9999px; left:50%; z-index:99999;} #top_layout .top_wrap .logo_wrap .utile li.n3 > ul li{ width:100%; height:23px; background-image:url(../../np2assets/images/inc/hr_dott_bg.gif); background-position:left bottom; background-repeat:repeat-x; padding:0px; margin:0px;} #top_layout .top_wrap .logo_wrap .utile li.n3 > ul li a{ background-image:url(../../np2assets/images/inc/utile_dott_img.gif); background-position:left center; background-repeat:no-repeat; font-size:12px; color:#444; line-height:22px; padding:0px 0px 0px 10px; margin:0px 0px 0px 10px;} #top_layout .top_wrap .logo_wrap .utile li.n3 > ul li span{ font-size:12px; color:#444; font-weight:bold; line-height:22px; padding:0px; margin:0px 10px 0px 0px;} #top_layout .top_wrap .logo_wrap .utile li.n3:hover > ul{ display:block;} /* 180326 bjy top_layout.css에 추가 */ #top_layout .new_top{height:28px;line-height:28px;background:#f2f2f2;border-bottom: 1px solid #e0e0e0;} #top_layout .new_top .topMenu{width:1180px;margin:0 auto;font-size:12px;} #top_layout .new_top .topMenu .downWrap{float:left;display:inline-block;} #top_layout .new_top .topMenu .downWrap li{padding:0px 10px; margin:0px; float:left; position:relative;} #top_layout .new_top .topMenu .downWrap li span .menuBar:before{ width:1px; height:10px; content:""; padding:0px; margin:0px; border-right:1px solid #d4d4d4; position:absolute; top:10px; right:48px;} #top_layout .new_top .topMenu .downWrap li:first-child{background: url(../../np2assets/images/inc/bg_down_bar.gif) center right no-repeat;background-size:1px 15px;} #top_layout .new_top .topMenu .downWrap li > span{padding-left: 20px;} #top_layout .new_top .topMenu .downWrap li .downBtn{background: url(../../np2assets/images/inc/appDownBtn.jpg) no-repeat;} #top_layout .new_top .topMenu .downWrap li .installBtn{background: url(../../np2assets/images/inc/installBtn.jpg) no-repeat;} #top_layout .new_top .topMenu .downWrap li span{font-size:12px;color:#555555;font-weight:bold;margin:0 5px;} #top_layout .new_top .topMenu .downWrap li img{line-height:28px;vertical-align: middle;} #top_layout .new_top .topMenu .utile{padding:0px;display:inline-block; float:right;} #top_layout .new_top .topMenu .utile li{ padding:0px 10px; margin:0px; float:left; position:relative;background: url(../../np2assets/images/inc/bg_topmenu_bar.gif) center left no-repeat;background-size:1px;padding: 0 10px;} #top_layout .new_top .topMenu .utile li:first-child{background:none;} #top_layout .new_top .topMenu .utile li a{ font-size:12px; color:#555555;font-weight:bold;} /* #top_layout .new_top .topMenu .utile{ height:26px; padding:0px; margin:26px 0px 0px 0px; display:inline-block; float:right;} #top_layout .new_top .topMenu .utile li{ padding:0px 10px; margin:0px; float:left; position:relative;} #top_layout .new_top .topMenu .utile li a{ font-size:12px; color:#555555; line-height:26px; font-weight:bold;} */ #top_layout .new_top .topMenu .utile li.n1{ font-size:12px; font-weight:bold; line-height:26px; padding-right:15px;} #top_layout .new_top .topMenu .utile li.n1 span p{ text-decoration:underline; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:110px; text-align:right; line-height: 26px; display: inline-block;} #top_layout .new_top .topMenu .utile li.n1:before, #top_layout .new_top .topMenu .utile li.n2:before, #top_layout .new_top .topMenu .utile li.n3:before, #top_layout .new_top .topMenu .utile li.n4:before{ width:1px; height:10px; content:""; padding:0px; margin:0px; border-right:1px solid #d4d4d4; position:absolute; top:8px; right:0px;} #top_layout .new_top .topMenu .utile li.n5 a{ color:#f04239;} #top_layout .new_top .topMenu .utile li.n3{ position:relative;} #top_layout .new_top .topMenu .utile li.n3:hover{ background-color:#ee2e24;} #top_layout .new_top .topMenu .utile li.n3:hover > a{ color:#fff;} #top_layout .new_top .topMenu .utile li.n3 > ul{ width:170px; background-color:#FFF; padding:0px; margin:0px 0px 0px -85px; border:1px solid #ee2e24; position:absolute; top:-9999px; left:50%; z-index:99999;} #top_layout .new_top .topMenu .utile li.n3 > ul li{ width:100%; height:23px; background-image:url(../../np2assets/images/inc/hr_dott_bg.gif); background-position:left bottom; background-repeat:repeat-x; padding:0px; margin:0px;} #top_layout .new_top .topMenu .utile li.n3 > ul li a{ background-image:url(../../np2assets/images/inc/utile_dott_img.gif); background-position:left center; background-repeat:no-repeat; font-size:12px; color:#444; line-height:22px; padding:0px 0px 0px 10px; margin:0px 0px 0px 10px;} #top_layout .new_top .topMenu .utile li.n3 > ul li span{ font-size:12px; color:#444; font-weight:bold; line-height:22px; padding:0px; margin:0px 10px 0px 0px;} #top_layout .new_top .topMenu .utile li.n3:hover > ul{ display:block;} /* 180326 bjy 로그인 전 배너 */ #top_layout .top_wrap .logo_wrap .topBanner{} .tnb_bnr{ position:relative; float:right; width:220px; } .tnb_bnr .slides{ overflow:hidden; height:78px; } .tnb_bnr .slides img{ width:220px; height:78px } .tnb_bnr .flex-control-paging{ display:none } .tnb_bnr .flex-direction-nav{ position:absolute; bottom:0; left:-36px } .tnb_bnr .flex-direction-nav a{ overflow:hidden; position:absolute; left:0; bottom:5px; width:15px; height:16px; text-indent:-9999px } .tnb_bnr .flex-direction-nav .flex-prev{ background:url(../../np2assets/images/inc/btn_navi_15_up.gif) } .tnb_bnr .flex-direction-nav .flex-next{ left:15px; background:url(../../np2assets/images/inc/btn_navi_15_down.gif) } /* 180326 bjy 로그인 후 회원정보*/ #top_layout .top_wrap .logo_wrap .memberInfo{float:right;width:350px;padding:4px 0;border:1px solid #363636;box-sizing:border-box;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap{overflow:hidden;padding:3px 10px;z-index:500;box-sizing:border-box;background:#fff;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dt{font-size:14px;font-weight:bold;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd{overflow:hidden;background:#fff;margin-top:2px;float:left;width:50%;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap span{float:left;width:40px;margin-top:7px;margin-left:5px;margin-right:15px;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap .grade_img img{width:100%;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap ul{float:left;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap ul .grade_nm{margin:5px 0;font-size:15px;font-weight:bold;color:#ee2e24;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap ul .grade_benefit{display:inline-block;line-height:15px;width:90px;padding:3px;padding-left:4px;border:1px solid #7c7c7c;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > dd.gradeWrap ul .grade_benefit a{ font-size: 14px;line-height:14px;display:block;color:#595a63;background:url("/np2assets/images/e1/arrow.png") no-repeat right 2px;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap {width:50%;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl{overflow:hidden;margin-top:10px;font-size:13px;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl:last-child{margin-top:5px;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl:last-child dd{margin-right:4px;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl dt{float:left;color:#606060;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl dd{float:right;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl dd > a span{color:#f33946;font-weight:bold;} #top_layout .top_wrap .logo_wrap .memberInfo > .infoWrap > .pntWrap dl dt:before{content: '';display: inline-block;width: 4px;height: 4px;line-height: 19px;vertical-align: middle;margin-right: 6px;} /* // 180326 bjy top_layout.css에 추가 */ /* 영문 */ #e8_top{ width:100%; height:120px; min-width:1180px; padding:0px; margin:0px 0px 30px 0px; border-bottom:2px solid #ee2e24; position:relative;} #e8_top:before{ width:100%; height:75px; content:""; padding:0px; margin:0px; border-bottom:1px solid #d5d5d5; position:absolute; top:0px; left:0px;} #e8_top .top_wrap{ width:1180px; height:120px; padding:0px; margin:0px auto;} #e8_top .top_wrap .logo_wrap{ width:100%; height:75px; padding:0px; margin:0px; position:relative;} #e8_top .top_wrap .logo_wrap .logo{ width:151px; height:29px; padding:0px; margin:23px 0px 0px 0px; float:left;} #e8_top .top_wrap .logo_wrap .utile{ height:26px; padding:0px; margin:26px 0px 0px 0px; display:inline-block; float:right;} #e8_top .top_wrap .logo_wrap .utile li{ padding:0px 14px; margin:0px; float:left; position:relative;} #e8_top .top_wrap .logo_wrap .utile li a{ font-size:12px; color:#555555; line-height:26px; font-weight:bold;} #e8_top .top_wrap .logo_wrap .utile li.n1{ padding:0px;} #e8_top .top_wrap .logo_wrap .utile li.n1 a{ background-image:url(../../np2assets/images/e8/top_btn_dott.gif); background-position:9px center; background-repeat:no-repeat; display:block; line-height:24px; padding:0px 10px 0px 20px; margin:0px; border:1px solid #bcbcbc; border-radius:2px;} #e8_top .top_wrap .logo_wrap .utile li.n2:before{ width:1px; height:10px; content:""; padding:0px; margin:0px; border-right:1px solid #d4d4d4; position:absolute; top:8px; right:0px;} /* 탑배너 */ #tbanner_layout{ width:100%; height:110px; min-width:1180px; background-color:#479695; padding:0px; margin:0px;} #tbanner_layout .tbanner_wrap{ width:1055px; height:110px; background-image:url(../../np2assets/images/inc/top_tbanner_icon.gif); background-position:left center; background-repeat:no-repeat; padding:0px 0px 0px 125px; margin:0px auto; position:relative;} #tbanner_layout .tbanner_wrap .dl_list{ width:360px; padding:0px; margin:22px 0px 0px 0px; display:inline-block; float:left;} #tbanner_layout .tbanner_wrap .dl_list.n1{ padding-right:70px; border-right:1px solid #b5d7d2;} #tbanner_layout .tbanner_wrap .dl_list.n2{ padding-left:70px;} #tbanner_layout .tbanner_wrap .dl_list.n2 dt{ background-color:#479695; border:none;} #tbanner_layout .tbanner_wrap .dl_list dt{ font-size:22px; font-weight:bold; color:#FFF; line-height:22px; margin-bottom:12px;} #tbanner_layout .tbanner_wrap .dl_list dd{ font-size:13px; font-weight:normal; color:#FFF; line-height:17px;} #tbanner_layout .tbanner_wrap .btn_close{ width:56px; height:56px; padding:0px; margin:0px; position:absolute; top:10px; right:0px;} #tbanner_layout .tbanner_wrap .btn_close a{ background-image:url(../images/inc/top_tbanner_btn_close.gif); background-position:left top; background-repeat:no-repeat; display:block; line-height:56px; padding:0px; margin:0px; text-indent:-9999px; overflow:hidden;} #tbanner_layout .tbanner_wrap .btn_today{ height:24px; font-size:13px; color:#FFF; text-align:right; padding:0px; margin:0px; display:inline-block; position:absolute; bottom:10px; right:0px;} #tbanner_layout .tbanner_wrap .btn_today span input[type=checkbox]{ width:12px; height:12px; padding:0px; margin:9px 6px 9px 0px; float:left;} #tbanner_layout .tbanner_wrap .btn_today span label{ line-height:30px; float:left;}