body{position:relative; font-family:'맑은 고딕', 'Malgun Gothic', sans-serif; font-size:16px; color:#555; letter-spacing:0.01px; height:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; line-height:1;} body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,table,tr,th,td{margin:0; padding:0} ul,ol,li{list-style:none} img, fieldset{border:none; vertical-align:top} legend, caption{position:absolute; top:-9999px; left:-9999px; z-index:-1} textarea, button{vertical-align:middle} input, select{vertical-align:middle; background:#fff; border:1px solid #e0e0e0; font-family:'맑은 고딕', 'Malgun Gothic', sans-serif; color:#555; letter-spacing:-0.6px; border-radius:0; font-size:16px; color:#000} input{padding:3px 10px; height:32px} option{padding:3px 10px;} input[type="radio"],input[type="checkbox"] {border:0; padding:0; height:auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} input[type="password"] {height:40px; border:1px solid #e0e0e0; color:#999; background:#fff; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} input[type="text"] {width:278px; background:#fff; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} input[type="tel"] {-webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} input[type="file"] {-webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} select{padding:5px 30px 5px 10px; height:40px; border:1px solid #e0e0e0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:#fff url("../images/icon/select_arrow.png") no-repeat right 15px center; } select::-ms-expand {display: none;} @-moz-document url-prefix() { select {padding-left:10px;} } textarea{padding:10px; vertical-align:middle; background:#fff; border:1px solid #e0e0e0; font-family:'맑은 고딕', 'Malgun Gothic', sans-serif; color:#555; font-size:16px; letter-spacing:-0.6px; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius:0} a{text-decoration:none; color:#555;} a:hover, a:focus, a:active{text-decoration:none;} table{border-collapse:collapse; width:100%;} button{background:none; border:none; padding:0; margin:0; cursor:pointer; overflow:visible; white-space: nowrap; font-size:16px; font-family:'맑은 고딕', 'Malgun Gothic', sans-serif;} button:active {outline: none} button::-moz-focus-inner {padding:0; border:0;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} strong{font-weight:normal} th{font-weight:normal} ::-webkit-input-placeholder {color:#cfcfcf;} :-moz-placeholder {color:#cfcfcf; opacity:1;} ::-moz-placeholder {color:#cfcfcf; opacity:1;} :-ms-input-placeholder {color:#cfcfcf;} :placeholder-shown {color:#cfcfcf;} /* 간격 */ .mt0{margin-top:0px !important} .mt5{margin-top:5px !important} .mt10{margin-top:10px !important} .mt15{margin-top:15px !important} .mt20{margin-top:20px !important} .mt25{margin-top:25px !important} .mt30{margin-top:30px !important} .mt35{margin-top:35px !important} .mt40{margin-top:40px !important} .mt45{margin-top:45px !important} .mt50{margin-top:50px !important} .mt60{margin-top:60px !important} .mt80{margin-top:80px !important} .mb0{margin-bottom:0px !important} .grd { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; opacity:0.8; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,131313+100 */ background: rgb(0, 110, 183); /* Old browsers */ background: -moz-linear-gradient(top, rgba(115,207,70,1) 0%, rgba(28,66,189,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(115,207,70,1) 0%, rgba(28,66,189,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(115,207,70,1) 0%, rgba(28,66,189,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73cf46', endColorstr='#1c42bd',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); } /* #wrapper {position:relative; width:100%; overflow:hidden;} #cBody {position:relative; width:100%;} .subWrap {padding-bottom:140px;} */ .ovF {overflow:hidden;} .clear:after{content:''; display:block; clear:both;} .blind{width:0; height:0; text-indent:-9999px; font-size:0;} .blackBg {display:none; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(0,0,0,0.5);/* 2018-10-26 z-index추가(메인 문제로 인해)*/ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .borT {border-top:1px solid #e0e0e0;} .fBold {font-weight:bold;} /* 본문 바로가기 */ .goCon{position:fixed; top:-50px; left:0; z-index:9999; text-align:center; box-sizing:border-box; padding:15px 0; width:100%; height:50px; color:#fff; line-height:1; background:#272727;} .goCon:focus{top:0;} /* header */ /*#header {position: absolute; z-index:10; width:100%; height:90px; box-sizing:border-box; top:0;background:#none;}*/ #header {position: relative; z-index:8888; width:100%; height:90px; box-sizing:border-box; top:0;background:#none;} #header h1 {float:left; margin:10px 0 0 40px;width:19%;}/* 서브페이지 */ #header h1 a {display:block; /*width:239px; height:38px;*/width:350px; height:78px; background:url("./logo-blk.png") no-repeat 0 0; text-indent:-9999px; font-size:0;} #header .moin {float:left; margin-top:25px;} #header .moin a {display:block; width:67px; height:38px; background:url("./moin_logo.png") no-repeat 0 0; text-indent:-9999px; font-size:0;} #header #gnb {/*width:900px; margin:0 auto;*/width:60%;display:inline-block;} #header #gnb:after {content:""; display:block; clear:both;} /*#header #gnb > li {position:relative; float:left; width:180px;}*/ #header #gnb > li {position:relative; float:left; width:15%;} #header #gnb li .oneD {display:block; font-size:18px; font-weight:bold; color:#000; text-align:center; line-height:90px;height:90px;} #header #gnb li.on .oneD {position:relative;} #header #gnb li.on .oneD:after {content:""; display:block; width:100%; height:2px; background:#ff6c00; position:absolute; bottom:-1px; left:0; z-index:3} #header #gnb li .twoD {position:absolute; top:89px; left:0; z-index:2; width:100%; /*height:391px;*/height:270px; padding-top:40px; display:none;} #header #gnb li.on .twoD {background:#f5f5f5;} #header #gnb li .twoD li a {display:block; text-align:center; line-height:38px; } #header #gnb li .twoD li a:hover {font-weight:bold; color:#000;} #header .rightDiv {position:absolute; top:0; right:0;} #header .rightDiv .util:after {content:""; display:block; clear:both;} #header .rightDiv .lang {float:left; position:relative; text-align:center; font-family:'Proxima-Regular', sans-serif;} #header .rightDiv .lang > a {display:block; width:90px; height:90px;line-height:90px;} #header .rightDiv .lang > a span {font-size:15px;background:url("./lang_moreIcon.png") no-repeat right center; padding-right:15px;} #header .rightDiv .lang div {position:absolute; top:88px; left:0; z-index:1; width:100%; padding:13px 0; border-top:2px solid #ff6c00;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; background:#fff; display:none;} #header .rightDiv .lang div a {display:block; line-height:26px; color:#777;font-size:15px;} #header .rightDiv .lang div a.on {color:#ff6c00; font-family:'Proxima-Bold', sans-serif; font-weight:normal; } #header .rightDiv .srchBtn {display:block; float:left; margin-top:35px; width:60px; height:20px; background:url("../images/btn/srchBtn_icon.png") no-repeat center; border-left:1px solid #e0e0e0;} #header .rightDiv .allMenu {float:left;} #header .rightDiv .allMenu .allMenuBtn {display:block; width:90px; height:90px; background:url("./allMenuBtn-blk.png") no-repeat center;} #header .rightDiv .allMenu .allMenuBtn.on {background-image:url("../images/btn/allMenuBtn_on.png");} #header .gnbBg {position:absolute; top:89px; left:0; z-index:1; width:100%; height:270px; border-top:1px solid #e0e0e0; background:#fff; display:none;} /* 헤더 검색영역 */ .srchArea {position:absolute; top:89px; left:0; width:100%; background:#fff; z-index:100; border-top:1px solid #e0e0e0; padding:45px 0; display:none;} .srchArea .inputArea {width:800px; margin:0 auto; padding:0 0 17px; position:relative; border:none;} .srchArea .inputArea input {width:calc(100% - 80px); height:50px;line-height:50px; padding-left:10px; background-color: #f5f5f5;border: 1px solid #d6d6d6;font-size:16px;} .srchArea .inputArea input::placeholder {color:#000; font-size:18px;} .srchArea .inputArea input::-webkit-placeholder {color:#000; font-size:18px;} .srchArea .inputArea input::-moz-placeholder {color:#000; font-size:18px;} .srchArea .inputArea input::-ms-placeholder {color:#000; font-size:18px;} /*.srchArea .inputArea > a {position:absolute; bottom:17px; right:20px;}*/ .srchArea .inputArea > button {position: relative;width: 70px;height: 50px; font-size: 15px;color: #fff; background: #ff6c00; margin-left: 5px;} .srchArea .exArea {text-align:center; margin-top:20px;} .srchArea .exArea .ex {display:inline-block; border-radius:12px; padding:3px 12px 7px; background:#8cc63e; text-align:center; font-weight:bold; color:#fff;} .srchArea .exArea div {display:inline-block; margin-left:17px;} .srchArea .exArea div p {display:inline-block; color:#777; position:relative;} .srchArea .exArea div p:after {content:""; display:inline-block; vertical-align:middle; width:1px; height:15px; background:#dfdfdf; margin:0 10px;} /* 전체메뉴 */ .allMenu {} .allMenu .openDiv { display:none; overflow-y:auto; height:calc(100% - 90px); height:-webkit-calc(100% - 90px); position:fixed; top:89px; left:100%; width:100%; background:#fff; border-top:1px solid #e0e0e0; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; } .allMenu .openDiv .oneD_area {margin:80px 0;} .allMenu .openDiv .oneD_area:last-child {margin-bottom:60px;} .allMenu .openDiv .oneD_area .oneD {font-size:24px; font-weight:bold; color:#000;} .allMenu .openDiv .oneD_area > .twoD_area {padding:40px 0; margin-top:30px; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;} .allMenu .openDiv .oneD_area > .twoD_area:after {content:""; display:block; clear:both;} .allMenu .openDiv .oneD_area > .twoD_area .twoD {float:left; width:233px;} .allMenu .openDiv .oneD_area > .twoD_area .twoD > a {font-size:18px; line-height:1.3; font-weight:bold; color:#000;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a {display:block; margin:18px 0; line-height:1.3;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a:last-child {margin-bottom:0;} .allMenu .openDiv .oneD_area > .twoD_area .twoD_inner {position:relative; float:left; width:100%; overflow:hidden; padding-top:30px;} .allMenu .openDiv .oneD_area .oneD.curent {color:#ff6c00;}/* 활성화 */ .allMenu .openDiv .oneD_area > .twoD_area .twoD > a.curent {color:#ff6c00;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a.curent {color:#000; font-weight:bold;} .allMenu .openDiv .oneD_area:hover .oneD {color:#ff6c00;}/* hover */ .allMenu .openDiv .oneD_area > .twoD_area .twoD:hover > a {color:#ff6c00;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a:hover {color:#000; font-weight:bold;} .allMenu .openDiv .mlangBtn {display:none;} /* main header */ #header.main {position:fixed; top:0; left:0; width:100%; background:none;} #header.main h1 a {background-image:url("./logo.png");} #header.main .moin a {background-image:url("./logo.png");} #header.main #gnb li .oneD {color:#fff;} #header.main .rightDiv .lang > a span {font-size:15px;color:#fff; background:url("./main_lang_moreIcon.png") no-repeat right center;} #header.main .rightDiv .srchBtn {border-left:1px solid rgba(255,255,255,0.2); background:url("../images/btn/main_srchBtn_icon.png") no-repeat center;} /* main header - SCROLLED, HOVER */ #header.main.scrolled, #header.main.hover {background:#fff; border-bottom:1px solid #e0e0e0;} #header.main.scrolled h1 a, #header.main.hover h1 a {background:url("./logo-blk.png") no-repeat 0 0;} #header.main.scrolled .moin a, #header.main.hover .moin a {background:url("./logo-blk.png") no-repeat 0 0;} #header.main.scrolled #gnb li .oneD, #header.main.hover #gnb li .oneD {color:#000;} #header.main.scrolled .rightDiv .lang > a span, #header.main.hover .rightDiv .lang > a span {color:#555; background:url("./lang_moreIcon.png") no-repeat right center;} #header.main.scrolled .rightDiv .srchBtn, #header.main.hover .rightDiv .srchBtn {background:url(".srchBtn_icon.png") no-repeat center; border-left:1px solid #e0e0e0;} #header.main.scrolled .rightDiv .allMenuBtn, #header.main.hover .rightDiv .allMenuBtn{background:url("./allMenuBtn-blk.png") no-repeat center;} /* footer */ @media screen and (max-width:1480px) {/* 작은 웹, 태블릿가로 */ /* header */ #header {height:76px;} #header h1{margin:25px 20px 0 20px;}/* 서브페이지 */ #header h1 a {width:170px; height:27px; background-size:100% auto; } #header .moin a {width:48px; height:27px; background-size:100% auto;} #header #gnb {width:60%;position:relative;display:none;} #header #gnb:after{display:none} #header #gnb > li {} #header #gnb > li.gnb-li-1{width:15%;} #header #gnb > li.gnb-li-2{width:15%;} #header #gnb > li.gnb-li-3{width:15%;} #header #gnb > li.gnb-li-4{width:15%;} #header #gnb > li.gnb-li-5{width:15%;} #header #gnb li .oneD {font-size:16px;line-height:76px;height:76px;} #header #gnb li .twoD {top:76px; width:100%; /*height:336px;*/height:200px; padding-top:20px;} #header #gnb li .twoD li a {font-size:14px; line-height:35px;} #header .gnbBg {top:75px; height:355px;} #header .rightDiv .lang {font-size:14px;display:none;} #header .rightDiv .lang > a {width:70px;height:90px;line-height:90px;} #header .rightDiv .lang div {top:74px;} #header .rightDiv .srchBtn {width:70px;background-size:17px auto;} #header .rightDiv .allMenu .allMenuBtn {width:75px; height:90px; background-size:27px;} /* 헤더 검색영역 */ .srchArea{top:75px; padding:60px 0 25px;} .srchArea .inputArea {width:600px;} /* 전체메뉴 */ .allMenu .openDiv {height:calc(100% - 75px); height:-webkit-calc(100% - 75px); top:75px; } .allMenu .openDiv .oneD_area {margin:60px 0;} .allMenu .openDiv .oneD_area:last-child {margin-bottom:40px;} .allMenu .openDiv .oneD_area .oneD {font-size:22px;} .allMenu .openDiv .oneD_area > .twoD_area {padding:30px 50px; margin-top:30px;} .allMenu .openDiv .oneD_area > .twoD_area .twoD {width:25%;} .allMenu .openDiv .oneD_area > .twoD_area .twoD > a {font-size:16px;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a {font-size:14px; margin:15px 0;} .allMenu .openDiv .oneD_area > .twoD_area .twoD_inner {padding-top:15px;} /* main header */ #header.main h1 a {background-size:100% auto;} #header.main .moin a {background-size:100% auto;} /* main header - SCROLLED, HOVER */ #header.main.scrolled h1 a, #header.main.hover h1 a {background-size:100% auto;} #header.main.scrolled .moin a, #header.main.hover .moin a {background-size:100% auto;} #header .gnbBg {height:220px;} } @media screen and (max-width:1023px) {/* 태블릿 세로 */ /* header*/ #header #gnb {display:none !important;} #header .rightDiv .lang {display:none !important ;} #header .rightDiv .srchBtn {display:none !important;} #header .moin {display:none;} /* 전체메뉴 */ .allMenu .openDiv {border-top:0; padding-top:40px; padding-bottom:100px; box-sizing:border-box; overflow-x:hidden;} .allMenu .openDiv .oneD_area {margin:0;} .allMenu .openDiv .oneD_area:nth-last-of-type(1) {margin-bottom:0; border-bottom:1px solid #e0e0e0;} .allMenu .openDiv .oneD_area .oneD {display:block; padding:35px 3%; font-size:30px; border-top:1px solid #e0e0e0; background:url("../images/icon/all_oneD.png") no-repeat right 3% center;} .allMenu .openDiv .oneD_area:hover .oneD {color:#000;} .allMenu .openDiv .oneD_area .oneD.on {color:#000; background-image:url("../images/icon/all_oneD_on.png");}/* 활성화 */ .allMenu .openDiv .oneD_area .oneD.curent {color:#ff6c00; background-image:url("../images/icon/all_oneD_curent.png");}/* 활성화_현재 페이지*/ .allMenu .openDiv .oneD_area .oneD.curent.on {color:#ff6c00; background-image:url("../images/icon/all_oneD_curent_on.png");}/* 활성화_현재 페이지*/ .allMenu .openDiv .oneD_area > .twoD_area {display:none; padding:0; margin-top:0; border:0; border-top:1px solid #e0e0e0} .allMenu .openDiv .oneD_area > .twoD_area .twoD {float:none; width:100%;} .allMenu .openDiv .oneD_area > .twoD_area .twoD > a {display:block; padding:30px 5%; font-size:20px; } .allMenu .openDiv .oneD_area > .twoD_area .twoD > a.thrBt {background:url("../images/icon/all_twoD.png") no-repeat right 5% center;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD {background:#f6f6f6; border:1px solid #e0e0e0; border-top:0; padding:30px 0; display:none;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a {display:block; margin:0; font-size:18px; line-height:42px; padding:0 5%} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a:last-child {margin-bottom:0;} .allMenu .openDiv .oneD_area > .twoD_area .twoD_inner {padding-top:0;} .allMenu .openDiv .oneD_area > .twoD_area .twoD > a.curent {color:#fff; background-color:#555; } .allMenu .openDiv .oneD_area > .twoD_area .twoD > a.thrBt.curent {background-image:url("../images/icon/all_twoD_curent.png");} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a.curent {color:#000; font-weight:bold;} .allMenu .openDiv .mlangBtn {display:block; padding:0 3% 40px;} .allMenu .openDiv .mlangBtn a {display:inline-block; font-size:20px; margin-right:20px;} .allMenu .openDiv .mlangBtn a.on {font-weight:normal; color:#ff6c00;} /* 검색영역 */ .srchType1 {margin:40px 0 30px; text-align:right;} .srchType1 select {position:relative; top:0; right:auto; width:100%; height:54px; border-bottom:0;} .srchType1 .inputDiv {width:100%; float:none; } .srchType1 .inputDiv input {width:calc(100% - 54px); height:54px; box-sizing:border-box; border:1px solid #e0e0e0; border-right:0;} .srchType1.yearS {} .srchType1.yearS select{position:absolute; border-bottom:1px solid #e0e0e0;} .srchType1.yearS .inputDiv {float:right;} } @media screen and (max-width:758px) {/* 모바일 */ .inner {width:auto; padding:0 3%;} /* 간격 */ .mt40{margin-top:20px !important} .mt60{margin-top:30px !important} .mt80{margin-top:40px !important} /* header */ #header {height:45px;} #header h1 {margin:12px 10px 0 3%;}/* 서브페이지 */ #header h1 a {width:119px; height:19px; background-size:100% auto;} #header .rightDiv .allMenu .allMenuBtn {width:45px; height:45px; background-size:15px 12px;} #header .rightDiv .allMenu .allMenuBtn.on {background-size:14px;} /* 전체메뉴 */ .allMenu .openDiv {height:calc(100% - 45px); height:-webkit-calc(100% - 45px); top:45px; padding-top:20px; padding-bottom:50px;} .allMenu .openDiv .oneD_area .oneD {padding:20px 3%; font-size:18px; background-size:13px;} .allMenu .openDiv .oneD_area > .twoD_area .twoD > a {display:block; padding:15px 5%; font-size:15px; } .allMenu .openDiv .oneD_area > .twoD_area .twoD > a.thrBt {background-size:10px auto;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD {padding:15px 0;} .allMenu .openDiv .oneD_area > .twoD_area .twoD .thrD a {font-size:13px; line-height:30px; padding:0 5%} .allMenu .openDiv .mlangBtn {padding:0 3% 20px;} .allMenu .openDiv .mlangBtn a {font-size:13px; margin-right:15px;} /* 검색영역 */ .srchType1 {margin:35px 0 15px;} .srchType1 select {width:100%; height:40px; font-size:13px; padding:5px 3%;} .srchType1 .inputDiv input {width:calc(100% - 40px); height:40px;} .srchType1 .inputDiv .srchBtn {width:40px; height:40px; background-size:19px; } .srchType1 .inputDiv .grayBtn {padding:0; font-size:14px; margin-left:5px; width:60px; height:35px; line-height:37px;} .srchType1.yearS {} .srchType1.yearS select{position:relative; top:0; right:auto; width:calc(100% - 65px); height:35px; font-size:13px;} .srchType1.yearS .inputDiv {width:auto;} }