@charset "utf-8"; #hd_login_msg {display:none;} #wrap{position:relative; min-width:320px;} #hd_pop {position:absolute; left:-300px; top:-300px;} .opacityAni{opacity:0;} .opacityAni.is-inview{animation-name: opacityAni; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s; animation-fill-mode: forwards;} .textMotion{opacity:0;} .textMotion.is-inview{animation-name: letterspacingTxt; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s; animation-fill-mode: forwards;} .fadeUp{opacity:0;} .fadeUp.is-inview{animation-name: fadeUp; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s; animation-fill-mode: forwards;} .fadeLeft{opacity:0;} .fadeLeft.is-inview{animation-name: fadeLeft; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s; animation-delay:0.1s; animation-fill-mode: forwards;} .fadeLeft2{opacity:0;} .fadeLeft2.is-inview{animation-name: fadeLeft2; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1.5s; animation-delay:0.1s; animation-fill-mode: forwards;} #wrap{position:relative; min-width:320px; width:100%; overflow:hidden;} body::-webkit-scrollbar{width: 6px;} body::-webkit-scrollbar-thumb{background-color:#0072ba; margin: transition:all 0.2s; } body::-webkit-scrollbar-track{background-color:#f0f0f0;} #header{position:absolute; top:0; left:0; right:0; /*height:106px;*/z-index:31; padding: 15px 20px; transition:0.3s; z-index:1111; background:#fff;} /* 헤더 Logo */ #header .area_logo{width:1500px; margin:0 auto; transition: 0.3s;} #header .area_logo:after{content:''; display:block; clear:both;} #header .area_logo .logo{ transition: 0.3s ease-out; width:130px; /*padding-top:22px;*/ position:relative; z-index:24;} #header .area_logo .logo a{display:inline-block;} #header .area_logo .logo img{} #header .area_logo .visit{float:right; margin:8 px 0 0;} #header .area_logo .visit a{display:block; height:47px; padding:13px 0 0 53px; background:url(../images/common/ico_dream.png) no-repeat 0 0; font-size:16px; color:#004bb8; letter-spacing:-2px;} #header .area_logo .visit a strong{font-size: 18px;} /* 헤더 GNB */ #header .gnb_wrap{position:absolute; left:0; right:0; top:0;} #header .gnb_wrap > .inr{ } #header .gnb_wrap > .inr:after{content:''; display:block; clear:both;} #header .gnb_wrap .gnb_sitemap{ float:right; margin-top:-81px;} #header .gnb_wrap .gnb_sitemap a{display:block; position:relative;width:30px; height:22px; background:url(../images/common/btn_header_wv.png) no-repeat; overflow:hidden; text-indent:-999px;} #header #gnb{ transition: 0.3s ease-out; position:relative; z-index:23; max-width:1500px; margin:0 auto; display:flex; justify-content: flex-end; padding-right:150px;} #header #gnb:after{content:''; display:block; clear:both;} #header #gnb a{display:block;} #header #gnb > li{float:left; position:relative; width: 165px;} /*#header #gnb > li:last-child { display:none;}*/ #header #gnb > li > a{display:block; position:relative; font-weight:400; font-size:20px; height:106px;margin-right:90px; line-height:106px; color:#333; text-align:center; letter-spacing:-2px; white-space:nowrap;} #header #gnb > li > a span {font-size:20px;} #header #gnb > li:last-child > a {} #header #gnb > li > a > span{display:inline-block; position:relative; padding:0 6px; line-height:1.5; } #header #gnb > li.active > a {color:#444; font-weight:500;} #header #gnb > li > a:before { content:''; display:block; width:0; height:5px; background:#f4db80; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:0.3s;} #header #gnb > li.active > a:before { width:100%;} /* 2차 */ #header #gnb > li > div{display:none; visibility:hidden; position:absolute; top:100px; left:-1px; right:0; z-index:31; overflow:hidden;} #header #gnb > li:last-child > div { margin-right:-100px;} #header #gnb > li.open > div{display:block; visibility:visible; z-index:32;} #header #gnb > li.active > div{} #header #gnb > li > div > ul{padding:28px 15px 35px 2px;} #header #gnb > li > div > ul > li{position:relative; margin-bottom:7px; padding:0 0 0 8px;} #header #gnb > li > div > ul > li:before{content:''; display:inline-block; position:absolute; top:14px; left:0; width:2px; height:2px; background:#444; opacity:.7;} #header #gnb > li > div > ul > li > a{position:relative; padding:5px 0; font-weight:400; color:#444; font-size:17px; line-height:1.2; letter-spacing:-1px; transition:0s;} #header #gnb > li > div > ul > li > a:hover , #header #gnb > li > div > ul > li > a:focus {color:#444; text-decoration:underline; transition:0s;} #header #gnb > li > div > ul > li > a[target="_blank"]:after{content:''; display:inline-block; width:15px; height:13px; margin:0 0 0 7px; background:url(../images/common/blank_w.png) no-repeat; vertical-align:baseline; opacity:.7;} #side .snb a.parent:after{display:none;} /* 3차 */ #header #gnb > li > div > ul > li > ul{margin:5px 0 15px;} #header #gnb > li > div > ul > li > ul > li{position:relative; padding:0 0 0 10px;} #header #gnb > li > div > ul > li > ul > li:before{content:''; display:inline-block; position:absolute; top:12px; left:1px; width:5px; height:1px; background:#666;} #header #gnb > li > div > ul > li > ul > li > a{padding:3px 0; font-size:15px;} #header #gnb > li > div > ul > li > ul > li > a:hover{color:#f67404;} /* gnb 배경 */ #header .gnb_wrap .gnb_bg {position:absolute; top:106px; left:0; z-index:20; overflow:hidden; width:100%; height:0; border-bottom:0 solid transparent; background:#f4db80; transition:height .4s cubic-bezier(0.165, 0.84, 0.44, 1); } /*#header .gnb_wrap .gnb_bg:before {content:''; display:block; width:615px; height:254px; position:absolute; left:60px; top:140px; background:url(../images/common/gnb_bg2.png) no-repeat; opacity:.75; transition:0.6s ease-in-out; }*/ #header.open .gnb_wrap .gnb_bg:before { top:20px;} #header.open .gnb_wrap .gnb_bg{box-sizing:content-box;} #header .gnb_wrap .gnb_bg > .inr{position:relative; max-width:1260px; margin:0 auto;} #header .gnb_wrap .gnb_bg .area_link{float:left; width:185px; margin:30px 0 0; padding:140px 0 0; background:url(../images/common/img_gnb.jpg) no-repeat 0 0;} #header .gnb_wrap .gnb_bg .area_link .txt{display:block; font-size:16px; line-height:1.4; color:#0468b4;} #header .gnb_wrap .gnb_bg .area_link .link{display:block; margin:20px 0 0;} #header .gnb_wrap .gnb_bg .area_link .link a{display:inline-block; position:relative; padding:10px 20px 10px 10px; border:1px solid #c5c5c5; font-weight:600; font-size:15px;} #header .gnb_wrap .gnb_bg .area_link .link a:after{content:''; display:inline-block; position:absolute; top:0; right:10px; bottom:0; width:6px; height:6px; margin:auto; border-right:1px solid #000; border-bottom:1px solid #000; transform:rotate(-45deg);} /* 헤더 우측 */ #header .header_ex {position:absolute; left:50%; top:30px; z-index:40; margin-left:580px; width:170px; display:flex; justify-content:space-between; align-items:center;} #header .header_ex ul {display:flex; justify-content: center; align-items: center; width:120px; height:50px; border:1px solid #e5e5e5; border-right:0; background:#f6f6f6;} #header .header_ex ul a {display:block; padding:6px 11px; } #header .header_ex ul a i {font-size:15px;} #header .header_ex .sitemap {width:50px; height:50px; border:1px solid #d2d2d2; background:url(../images/common/sitemap2.png) no-repeat center center; overflow:hidden; text-indent:-999px;} /* 헤더 GNB Fixed */ body.fixed #header {top:-30px; position:fixed; backdrop-filter: blur(5px);} body.fixed #header .area_logo .logo { padding-top:43px;} body.fixed #header .area_logo .logo img { height:49px;} body.fixed #header .header_ex {top:43px;} body.fixed #header #gnb > li > a {line-height:136px;} /* 모바일 전체메뉴 */ .wholeview_wrap{display:none;} /* 모바일 검색 */ .wv_srch_wrap{display:none;} /************************************************** Footer **************************************************/ #footer{ background:#333; color:#aaa; position:relative; z-index:12; min-width:320px;} #footer .footer_top {display:flex; max-width:1500px; margin:0 auto;flex-wrap:wrap; padding:56px 0; position:relative;} #footer .footer_top .logo {opacity:.7; margin-right:60px; } #footer .footer_top .area_copyright {} #footer .footer_top .area_copyright .address span { font-size:17px; display:inline-block; margin:3px 0; line-height:1.2;} #footer .footer_top .area_copyright .address em {display:inline-block; width:1px; height:13px; background:#fff; opacity:.3; margin:2px 25px 0;} #footer .footer_top .area_copyright .copyright {font-size:17px; margin-top:14px; font-weight:300; opacity:.75;} #footer .footer_top .go_top {position:absolute; right:0; top:0px; width:60px; height:60px; background:#fff; /*border-radius:60px;*/ line-height:60px; text-align:center; opacity:.3;} /* #footer .top {position:absolute; right:0; top:140px; display:block; width:59px; height:59px; border:1px solid #8a8a8a; text-align:center; color:#fff; padding-top:10px; font-size:14px;} #footer .top:before {content:''; display:block; width:14px; height:17px; background:url(../images/main/top.png) no-repeat; margin:0 auto 1px;}*/ /************************************************** Container **************************************************/ #container{width:100%; z-index:12; } #container > .inr{} #container > .inr:after{content:''; display:block; clear:both;} /************************************************** Content **************************************************/ /*** 컨텐츠 공통 ***/ .cont_wrap { } /*** 컨텐츠 헤드 ***/ .cont_top{position:relative; z-index:-1; overflow:hidden;} .m_scroll {position:fixed; left:-20px; bottom:144px; z-index:11; height:56px; padding-left:26px; color:#b8cee5; font-size:13px; line-height:56px; transform: rotate(90deg) scale(0.97); letter-spacing: 0;} .m_scroll:after {content:''; display:block; width:60px; height:1px; background:#b8cee5; position:absolute; left:126px; top:50%; animation:scroll_circle1 2s ease-in-out infinite;} @keyframes scroll_circle1{ 0%{ left:126px;} 60%{ left:131px;} } .m_scroll i { width:13px; height:13px; box-sizing:border-box; border-radius:30px; background:rgba(184,206,229,0.3); position:absolute; right:-22px; top:22px; z-index:-1;animation:scroll_circle2 2s ease-in-out infinite; opacity:0; z-index:2;} .m_scroll i:before {content:''; display:block; width:5px; height:5px; border-radius:5px; background:#fff; margin:4px;} @keyframes scroll_circle2{ 0%{ right:-22px; transform: scale(0); opacity:0;} 20% { transform: scale(1); opacity:1;} 60% { transform: scale(1); opacity:1;} 80%{ right:-74px; transform: scale(0); opacity:0;} } .cont_top .m_scroll {position:absolute; left:initial; right:-25px; color:#fff; display: none} .cont_top:before {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/sub/sub_visual01.jpg) no-repeat center top; animation:sub_bg 3s forwards; background-attachment: fixed; } @keyframes sub_bg{ 0%{ transform:scale(1.2); filter: blur(10px);} 100%{transform:scale(1); filter: blur(0px); } } .cont_top.type2:before {background-image:url(../images/sub/sub_visual02.jpg?ver=3);} .cont_top.type3:before {background-image:url(../images/sub/sub_visual03.jpg);} /*.cont_top.type4:before {background-image:url(../images/common/sub_visual03.png);} .cont_top.type5:before {background-image:url(../images/common/sub_visual04.png);} */ .cont_top .inr {max-width:1640px; height:482px; position:relative; margin:0 auto; padding-top:170px;} .cont_top:after{content:''; display:block; clear:both;} .cont_top .btn_back{display:none;} .cont_top p {color:#fff; padding-bottom:10px; padding-left:30px; font-size:20px;animation:sub_txt2 1s forwards; animation-delay:1s; opacity:0; display:inline-block; font-weight:400; display:none;} @keyframes sub_txt2{ 0%{ transform:translateY(-30px) rotateY(0deg); filter:blur(20px); opacity:0;} 100%{ transform:translateY(0px) rotateY(0deg); filter:blur(0px); opacity:1;} } .cont_top h2 {font-size:62px; color:#fff; line-height:62px; font-weight:700; margin-bottom:30px;} .cont_top h2 span {font-size:52px;animation:sub_txt 1s forwards; display:inline-block; opacity:0;} @keyframes sub_txt{ 0%{ transform:translateY(-30px) rotateY(90deg); filter:blur(20px); opacity:0;} 100%{ transform:translateY(0px) rotateY(0deg); filter:blur(0px); opacity:1;} } .cont_top h2 span:nth-child(1) {animation-delay: 0.1s;} .cont_top h2 span:nth-child(2) {animation-delay: 0.2s;} .cont_top h2 span:nth-child(3) {animation-delay: 0.3s;} .cont_top h2 span:nth-child(4) {animation-delay: 0.4s;} .cont_top h2 span:nth-child(5) {animation-delay: 0.5s;} .cont_top h2 span:nth-child(6) {animation-delay: 0.6s;} .cont_top h2 span:nth-child(7) {animation-delay: 0.7s;} .cont_top h2 span:nth-child(8) {animation-delay: 0.8s;} .cont_top h2 span:nth-child(9) {animation-delay: 0.9s;} .cont_top h2 span:nth-child(10) {animation-delay: 1s;} .cont_top h2 span:nth-child(11) {animation-delay: 1.1s;} .cont_top h2 span:nth-child(12) {animation-delay: 1.2s;} .cont_top h2 span:nth-child(13) {animation-delay: 1.3s;} .cont_top h2 span:nth-child(14) {animation-delay: 1.7s;} .cont_top h2 span:nth-child(15) {animation-delay: 1.8s;} .cont_top h2 span:nth-child(16) {animation-delay: 1.9s;} .cont_top h2 span:nth-child(17) {animation-delay: 2s;} .cont_top h2 span:nth-child(18) {animation-delay: 2.1s;} .cont_top h2 span:nth-child(19) {animation-delay: 2.2s;} .cont_top h2 span:nth-child(20) {animation-delay: 2.3s;} .cont_top h2 span:nth-child(21) {animation-delay: 2.4s;} .cont_top h2 span:nth-child(22) {animation-delay: 2.5s;} .cont_top h2 span:nth-child(23) {animation-delay: 2.6s;} .cont_top h2 span:nth-child(24) {animation-delay: 2.7s;} .cont_top h2 span:nth-child(25) {animation-delay: 2.8s;} .cont_top h2 span:nth-child(26) {animation-delay: 2.9s;} .cont_top h2 span:nth-child(27) {animation-delay: 3s;} .cont_top h2 span:nth-child(28) {animation-delay: 3.1s;} .cont_top h2 span:nth-child(29) {animation-delay: 3.2s;} .cont_top h2 span:nth-child(30) {animation-delay: 3.3s;} .cont_top h2 span:nth-child(31) {animation-delay: 3.4s;} .cont_top h2 span:nth-child(32) {animation-delay: 3.5s;} .cont_top .nav{display:none;} /* location */ .area_location{ color:#fff; animation:sub_loc 3s ease-in-out forwards; } /*.cont_top .txt { color:#fff; font-size:24px; animation:sub_loc 4s ease-in-out forwards; opacity:0;}*/ @keyframes sub_loc{ 0%{ transform:translateX(60px); opacity:0; filter:blur(10px);} 100%{transform:translateX(0px); opacity:1; filter:blur(0px);} } .area_location ol{display:flex; flex-wrap:wrap; align-items:center; position:relative; z-index:10; overflow:hidden;} .area_location ol li{display:flex; align-items:center; position:relative; padding:0; font-size:16px; opacity:1;} .area_location ol li:first-child {width:29px; height:29px; background:url(../images/common/home.png) no-repeat; overflow:hidden; text-indent:-999px; margin-right:15px; opacity:1;} .area_location ol li:last-child{ color:#fffa7a; } .area_location ol li:after{content:'>'; color:#fff; margin:0 15px 0; font-family:'dotum'; font-size:13px; font-weight:normal !important; opacity:.5;} .area_location ol li:first-child:after , .area_location ol li:last-child:after{ display:none;} /************************************************** Side **************************************************/ /* SNB */ #side { max-width:1640px; margin:0 auto; background:#fff; margin-top:-120px; border-radius:40px 40px 0 0; z-index:230;} #side .snb_wrap { max-width:1500px; margin:0 auto; min-height:120px; background:url(../images/common/dotted.png) repeat-x left bottom; position:relative;} #side .snb_wrap .snb_title {float:left; font-size:28px; margin-top:55px; width:270px;} #side .snb_wrap .snb {float:left; width:calc(100% - 290px); margin-top:50px;} #side .snb_wrap .snb li {float:left; margin:10px 60px 10px 0;} #side .snb_wrap .snb li:last-child {margin-right:0;} #side .snb_wrap .snb li a {font-size:19px; color:#555; position:relative; transition: 0.3s; font-weight:500;} #side .snb_wrap .snb li a:hover {color:#0072ba; font-weight:600;} #side .snb_wrap .snb li.on a { color:#0072ba; font-weight:600;} #side .snb_wrap .snb li.on a:before {content:''; display:block; position:absolute; right:0; left:0; bottom:-37px; height:1px; background:#0072ba;} /*** 컨텐츠 헤드 ***/ .cont_head{ position:relative;} .cont_head:after{content:''; display:block; clear:both;} .cont_head .btn_back{display:none;} .cont_head .area_title {display:none;} .cont_head .area_title .title span {font-size:36px; line-height:1.1; letter-spacing:-1px; } .cont_head .area_title .nav{display:none;} /* 공유 버튼 */ #side .btn_print {position:absolute; right:0; top:56px; width:30px; height:30px; background:url(../images/common/print.png) no-repeat center center; overflow:hidden; text-indent:-999px;} /*** 컨텐츠 바디 ***/ .cont_body{line-height:1.6; word-break:keep-all; word-wrap:break-word; min-height:360px; background:#fff; } .cont_body .inr {max-width:1500px; margin:0 auto; padding:0px 0 120px; } .cont_body:after{content:''; display:block; clear:both;} /* 탭메뉴 common */ .lnb{margin-bottom:80px; width:100%;} .lnb ul{display:flex; flex-wrap:wrap; position:relative;} .lnb li{position:relative; padding:0; font-size:16px; line-height:1.2; letter-spacing:-1px;} .lnb li:before{display:none;} .lnb li a{display:flex; justify-content:center; align-items:center; position:relative; height:100%; color:#333; word-break:break-all;} .lnb li a[target="_blank"]:after{content:''; flex:0 0 auto; width:15px; height:13px; margin:0 0 0 5px; background-position:-31px -49px; vertical-align:baseline;} .lnb li.on a{font-weight:600; color:#00398c;} /* 탭메뉴01(일반 4개 이하) */ .lnb.tmn01 ul{border:1px solid #ddd; background:#fff;} .lnb.tmn01 li{width:calc(25% + 1px); margin-bottom:-1px; margin-right:-1px; border-right:1px solid #dae4f3; border-bottom:1px solid #dae4f3;} .lnb.tmn01 li a{justify-content:flex-start; padding:24px 32px 24px 24px;} .lnb.tmn01 li a:not([target="_blank"]):after{content:''; position:absolute; top:0; right:18px; bottom:0; width:11px; height:3px; margin:auto; background-color:#ddd; background-position:100% 100%;} .lnb.tmn01 li.on a{z-index:10; height:calc(100% + 2px); margin:-1px -1px 0 0; border:1px solid #0a4096; background:#0a4096; color:#fff;} .lnb.tmn01 li.on a:after{width:6px; height:9px; background-color:transparent; background-position:0 -118px;} /* 탭메뉴03(박스) */ .lnb.tmn03{padding:25px 0; border:1px solid #dbdbdb; background:#fafafa;} .lnb.tmn03 li{position:static; width:33.33%;} .lnb.tmn03 li:before{content:''; display:inline-block; position:absolute; top:0; bottom:0; border-left:1px dotted #b5b5b5;} .lnb.tmn03 li:nth-child(3n+1):before{display:none;} .lnb.tmn03 li a{justify-content:flex-start; margin:0 0 0 25px; padding:5px 10px 4px 0;} .lnb.tmn03 li a:before{content:''; flex:0 0 auto; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#3e73c1;} /* 탭메뉴04(년도) */ .lnb.tmn04{padding:0 7px; border:1px solid #ddd; box-shadow:0 5px 5px rgba(0,0,0,.05);} .lnb.tmn04 ul{overflow:hidden; background-image:repeating-linear-gradient(#fff, #fff 50px, #dedede 50px, #dedede 51px, #fff 51px);} .lnb.tmn04 li{position:relative; margin:7px 0;} .lnb.tmn04 li:before{content:''; display:inline-block; position:absolute; top:0; left:-1px; bottom:0; height:15px; margin:auto; border-left:1px solid #dedede;} .lnb.tmn04 li a{overflow:hidden; height:36px; line-height:18px; margin:0 7px; padding:0 22px;} .lnb.tmn04 li.on:after{content:''; display:inline-block; position:absolute; left:calc(50% - 5px); top:100%; border:5px solid transparent; border-top-color:#0a4096;} .lnb.tmn04 li.on a{background:#0a4096; color:#fff;} /*** 컨텐츠 하단 ***/ .cont_foot{margin-top:60px; padding:20px; border:1px solid #ddd; border-top-color:#333; font-size:15px; letter-spacing:-1px;} /* 컨텐츠 담당자 */ .cont_foot .cont_manager{display:flex; flex-wrap:wrap; align-items:center;} .cont_foot .cont_manager dl{display:flex; align-items:center; margin-left:55px;} .cont_foot .cont_manager dl:first-child{margin-left:0;} .cont_foot .cont_manager dl.update{margin-left:auto;} .cont_foot .cont_manager dt{margin:0 5px 0 0; font-weight:600;} .cont_foot .cont_manager dd span{display:inline-flex;} .cont_foot .cont_manager dd .name{margin-left:5px;} /* 컨텐츠 평가 */ .cont_foot .cont_rating{margin:10px 0 0; padding:20px 0 0; border-top:1px solid #ddd;} .cont_foot .cont_rating > .inr{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position:relative;} .cont_foot .cont_rating h2{position:relative; padding-left:24px; font-size:15px; line-height:20px;} .cont_foot .cont_rating h2:before{content:''; position:absolute; top:-1px; left:0; width:21px; height:20px; background-position:-52px -52px;} .cont_foot .cont_rating .inp_area{} .cont_foot .cont_rating .inp_area fieldset{display:flex; flex-wrap:wrap; align-items:center;} .cont_foot .cont_rating .inp_area span{display:inline-flex; align-items:center; margin-right:7px;} .cont_foot .cont_rating .inp_area .inp_rdo{margin-right:3px;} .cont_foot .cont_rating .inp_area label{font-size:14px; letter-spacing:-1px;} .cont_foot .cont_rating .inp_area .btn_rate{height:32px; line-height:32px; padding:0 10px; border:0; border-radius:5px; background:#444; font-size:14px; color:#fff;} /* 공공누리 */ .cont_foot .openType {padding:10px;} .cont_foot .openType figure{position:relative; margin:0px;} .cont_foot .openType figure:after{content:''; display:block; clear:both;} .cont_foot .openType figure .fi_link{float:left; padding:0 10px 0 0;} .cont_foot .openType figure img {height:75px;} .cont_foot .openType figure figcaption {display:table-cell; padding:10px 0 0; font-size:0.86em; word-break:keep-all;} /************************************************** 팝업창 Layout **************************************************/ #wrap_pop{padding:0 10px;} #wrap_pop .pop_head{margin:0 0 30px; border-bottom:2px solid #666; } #wrap_pop .pop_head .title{padding:10px 0 10px 0; font-size:2.133em; line-height:1.15; letter-spacing:-3px;} /*네비게이션 사용 클래스*/ #pc_navi .hist_depth1 > li {display:none;} #pc_navi .hist_depth1 > li:last-child { display:block;} #pc_navi .hist_depth1 > li:last-child > a { display:none;} #pc_navi .hist_depth1 > li:last-child ul { float: left;width: calc(100% - 290px);margin-top: 50px;} #pc_navi .hist_depth1 > li:last-child ul li {float:left; margin:10px 60px 10px 0;} #pc_navi .hist_depth1 > li:last-child ul li:last-child {margin-right:0;} #pc_navi .hist_depth1 > li:last-child ul li a {font-size:19px; color:#333; position:relative; transition: 0.3s; font-weight:500;} #pc_navi .hist_depth1 > li:last-child ul li a:hover {color:#f4db80 ; font-weight:600;} #pc_navi .hist_depth1 > li:last-child ul li.on a { color:#f4db80 ; font-weight:600;} #pc_navi .hist_depth1 > li:last-child ul li.on a:before {content:''; display:block; position:absolute; right:0; left:0; bottom:-37px; height:1px; background:#f4db80 ;} #sub_navi { display:none;} @media screen and (max-width:1729px){ #header .area_logo {left:30px;} #header .header_ex {} } @media screen and (max-width:1639px){ .cont_top .inr {margin:0 30px;} .cont_top .m_scroll { bottom:256px;} #side { padding:0 30px;} #header #gnb > li > a {margin-right:80px;} } /* Tablet 1024px ~ 1259px */ @media screen and (max-width:1559px){ /************************************************** Header **************************************************/ #sub_wrap {margin:0 30px;} .cont_body .inr {/*margin:0 30px;*/} .sp_ui, #header .area_top .util_r .lst li a:before, #wholeview .w_close_btn:after, #wholeview .head .area_wv_util li a:before, .wholeview_wrap #wholeview .nav a .unfd:after, .wholeview_wrap #wholeview .nav a[target="_blank"]:after, #footer .wrap_copyright .area_link .related .open_select:before, #footer .wrap_copyright .area_link .related .open_select:after, #footer .wrap_copyright .area_link .btn_contact a:before, #footer .wrap_copyright .area_link .btn_contact a:after, .cont_top .btn_back:before, .cont_top .title span:after, .cont_top .area_location ol li:before, .cont_foot .cont_rating h2:before, .lnb li a[target="_blank"]:after, .cont_foot .cont_rating h2:before{display:inline-block; overflow:hidden; color:transparent !important; white-space:nowrap; background:url(../images/base/sp_ui_m.png) no-repeat 0 0/400px 400px;} #header {padding:15px 20px;} #header #gnb {padding-right:200px;} #header .header_ex {left:initial; margin:0; right:20px;} #header #gnb > li > a {margin-right:66px;} /************************************************** Footer **************************************************/ #footer .footer_top {display:block; height:auto; padding:30px;} #footer .footer_top .logo {margin-bottom:15px; display:block;} #footer .footer_top .logo img {height:80px;} #footer .footer_top .right {right:30px;} #footer .footer_bot {padding:0 30px;} #footer .footer_top .go_top {right:30px;} /************************************************** Container **************************************************/ #container > .inr{padding:0 10px;} /*** 컨텐츠 하단 ***/ } /* Tablet 768px ~ 1023px */ @media screen and (max-width:1279px){ #header .gnb_wrap {display:none;} #header .header_ex {display:none;} #header {height:80px; position:fixed;} #header .area_logo .logo {padding-top:6px;} #header .area_logo .logo img {height:50px;} body.fixed #header {top:0;} body.fixed #header .area_logo .logo {padding-top:5px;} body.fixed .wholeview_wrap .btn_wv {top:20px;} /* 모바일 전체메뉴 */ body.open_wv{overflow:hidden; position:fixed !important; width:100%; height:100%;} .wholeview_wrap .btn_wv{position:absolute; top:20px; right:20px; z-index:2; overflow:hidden; width:40px; height:40px; background:url(../images/common/sitemap2.png) no-repeat center center; margin:auto; border:1px solid #aaa; background-size:20px;} .wholeview_wrap .btn_wv .sp_ui{ background:none;} .wholeview_wrap{display:block;} .wholeview_wrap #wholeview{position:fixed; top:0; right:0; bottom:0; z-index:1000; overflow:auto; width:70%; max-width:420px; min-width:280px; background:#fff3c9; margin-right:-48px; transition:all 0.3s; transform:translate(100%, 0);} .wholeview_wrap.open #wholeview{margin-right:0; transform:translate(0, 0);} .wholeview_wrap .dim_wv{position:fixed; top:0; left:0; z-index:999; width:100%; background:transparent; transition:height, background .5s;} .wholeview_wrap.open .dim_wv{bottom:0; background:rgba(0,0,0,0.8);} .wholeview_wrap .title_wv {display:none;} .wholeview_wrap .name {position:absolute; left:0; top:0; z-index:10; padding-left:10px; font-size:14px; line-height:33px;} .wholeview_wrap .name strong {color:#004bb8;} #wholeview .w_close_btn{ position:absolute; top:15px; right:10px; z-index:2; overflow:hidden; width:40px; height:40px; background:url(../images/common/ico_close.png) no-repeat center center !important; margin:auto; border:1px solid #aaa; text-indent:-999px;} #wholeview .w_close_btn:after{ display:none;} /* 모바일 전체메뉴 head */ #wholeview .head{ height:70px; display:flex; align-items:center; padding-left:20px; background:#fff url(../images/common/logo_header.png) no-repeat 2%; background-size:20%;} #wholeview .head ul {overflow:hidden;} #wholeview .head ul li {float:left;} #wholeview .head ul li a {display:inline-block;padding:5px 0; margin-right:30px; font-size:15px; font-weight:bold; position:relative;} #wholeview .head ul li a i {font-size:14px; color:#555; margin-right:8px;} #wholeview .head ul li:first-child a:before { content:''; display:block ;width:1px; height:16px; background:#d2d2d2; position:absolute; right:-15px; top:7px;} #wholeview .head img { height:50px; margin: 20px 0 0 20px;} /* 모바일 전체메뉴 gnb */ .wholeview_wrap #wholeview .nav{padding:0; border-top:1px solid #e9e9e9; background:#fff;} .wholeview_wrap #wholeview .nav a{display:block; position:relative; line-height:1.2; color:#222;} .wholeview_wrap #wholeview .nav a .unfd{position:absolute; top:50%; right:30px; width:0; height:0; color:transparent;} .wholeview_wrap #wholeview .nav a .unfd:after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:transform .3s;} .wholeview_wrap #wholeview .nav a[target="_blank"]:after{content:''; width:16px; height:14px; margin:-1px 0 0 5px; background-position:-74px -78px;} /* 1차 */ .wholeview_wrap #wholeview .nav>li{border-bottom:1px solid #f4db80 ;} /*.wholeview_wrap #wholeview .nav>li:last-child { display:none;}*/ .wholeview_wrap #wholeview .nav>li>a{padding:18px 30px 20px 20px; font-weight:600; font-size:22px; letter-spacing:-1px; background:#f4db80 ; } .wholeview_wrap #wholeview .nav>li>a.on{color:#222; background:#fff3c9;} .wholeview_wrap #wholeview .nav>li>a .unfd:after{width:30px; height:30px; background:#222 url(../images/common/m_gnb_ico.png) no-repeat; background-size:30px;transform:translate(-50%, -50%) rotate(-180deg); border-radius:50px; } .wholeview_wrap #wholeview .nav>li.open>a .unfd:after{transform:translate(-50%, -50%) rotate(0deg);} /* 2차 */ .wholeview_wrap #wholeview .nav>li>div{display:none; padding:16px 0 16px 30px; background:#fff3c9; border-top:1px solid #222;} .wholeview_wrap #wholeview .nav>li.open div{display:block;} .wholeview_wrap #wholeview .nav>li div>ul>li:last-child{border:0;} .wholeview_wrap #wholeview .nav>li div>ul>li>a{padding:8px 5px; font-weight:400; font-size:16px; color:#222;} .wholeview_wrap #wholeview .nav>li div>ul>li>a[target="_blank"]:after{content:''; display:inline-block; width:15px; height:13px; margin:0 0 0 7px; background:url(../images/common/blank_w.png) no-repeat; vertical-align:baseline; opacity:.7;} .wholeview_wrap #wholeview .nav>li div>ul>li.open>a{} .wholeview_wrap #wholeview .nav>li div>ul>li>a.on{font-weight:600; color:#6c4ea0;} .wholeview_wrap #wholeview .nav>li div>ul>li>a .unfd:after{width:16px; height:16px; background-position:-86px -59px;} .wholeview_wrap #wholeview .nav>li div>ul>li.open>a .unfd:after{width:16px; height:1px; background-position:-104px -66px;} /* 3차 */ .wholeview_wrap #wholeview .nav>li div>ul>li>ul{display:none; padding:10px 10px 10px 15px; background:#fafafa;} .wholeview_wrap #wholeview .nav>li div>ul>li.open>ul{display:block;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li{} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li:last-child{border:0;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a{padding:6px 20px 5px 12px; font-size:14px; color:#000;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a.on{font-weight:600; color:#1e6cb4;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>a:before{content:''; display:inline-block; position:absolute; top:11px; left:4px; border:3px solid transparent; border-left:4px solid #666;} /* 4차 */ .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul{padding:0 0 10px 12px;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li.open>ul{display:block;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul a{padding:8px 0 7px 0; font-size:16px; color:#666;} .wholeview_wrap #wholeview .nav>li div>ul>li>ul>li>ul a.on{font-weight:600; color:#1e6cb4;} /************************************************** Common **************************************************/ /************************************************** Header **************************************************/ /************************************************** Footer **************************************************/ #footer .footer_top .right {position:relative; right:initial; top:initial; transform:none; margin-top:30px;} #footer .footer_bot {display:block; padding:30px; height:auto;} #footer .footer_bot .lst { margin-bottom:14px;} #footer .footer_bot .lst li {margin-bottom:9px;} #footer .footer_bot .sns {overflow:hidden;} #footer .footer_bot .sns li {margin:0 12px 0 0;} /************************************************** Container **************************************************/ #container{margin:0;} #container:before {display:none;} #container > .inr{padding:0;} /************************************************** Content **************************************************/ .cont_wrap{float:none; width:auto; margin:0;} /*** 컨텐츠 헤드 ***/ .cont_top:before {background-size:cover;} .cont_top .inr { height:380px; padding-top:138px;} .cont_top h2 {line-height:34px;} .cont_top h2 span { font-size:38px;} .cont_top .m_scroll { bottom:210px;} #side { margin:-80px 30px 0; height:80px; border-radius:16px 16px 0 0; padding:0 24px;} #side .snb_wrap { min-height:80px;} #side .btn_print { top:25px;} #side .snb_wrap .snb_title { display:none;} #pc_navi { display:none;} #sub_navi { display:flex;} #sub_navi .sub_history .hist_depth1{display:flex;} #sub_navi .sub_history .hist_depth1 >li {position:relative; display:block; margin-left:20px; padding-left:20px;} #sub_navi .sub_history .hist_depth1 >li:not(:first-child){font-size:17px; width:200px;} #sub_navi .sub_history .hist_depth1 >li:first-child {padding-left:0; margin-left:0; font-size:20px; background:rgba(255,255,255,0.2);} #sub_navi .sub_history .hist_depth1 >li > a {color:#333; line-height:80px; display:block; font-size:16px;} #sub_navi .sub_history .hist_depth1 .active {position:relative; font-weight:400; color: #222;} #sub_navi .sub_history .hist_depth1 .active i{position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:-1; transition:0.3s; z-index:2; font-size:14px;} #sub_navi .sub_history .hist_depth1 .active i.on {transform: rotate(180deg); margin-top:-6px;} #sub_navi .sub_history .hist_depth1 .active:hover {color: #222;} #sub_navi .sub_history .hist_depth2 {display:none;position: absolute;top:79px;left:10px; right:-10px; text-align: left;z-index: 99;border: 1px solid #e2e2e2; border-top:2px solid #0072ba; box-shadow:10px 10px 25px rgba(0,0,0,0.05); font-size: 14px;} #sub_navi .sub_history .hist_depth2 li a {display: block;padding:15px 10px;background: #fff;color:#888;font-weight: normal;border-bottom: 1px solid #e2e2e2; line-height:24px; font-size:14px;} #sub_navi .sub_history .hist_depth2 li a:hover {background: #f1f1f1; color:#222;} #sub_navi .sub_history .hist_depth2 li:last-child a {border: 0;} /*** 컨텐츠 바디 ***/ /* 탭메뉴 common */ .lnb li a[target="_blank"]:after{background-position:-57px -78px;} /*** 컨텐츠 하단 ***/ .cont_foot{margin:40px 10px 0; padding:10px;} .cont_foot .cont_rating{padding-top:10px; text-align:center;} .cont_foot .cont_rating > .inr{flex-direction:column;} .cont_foot .cont_rating h2:before{background-position:-14px -48px;} .cont_foot .cont_rating .inp_area{margin-top:5px;} /************************************************** 팝업창 Layout **************************************************/ #wrap_pop{padding:0;} #wrap_pop .pop_head{border-bottom:1px solid #ddd;} #wrap_pop .pop_head .title{padding:13px 10px; background:#def4f9; font-size:1.5em; letter-spacing:-2px; text-align:center;} } @media screen and (max-width:1023px){ #sub_wrap , .cont_body .inr {margin:0 20px;} .wholeview_wrap .btn_wv {right:20px;} #header .header_ex {right:80px;} .cont_top .inr { margin:0 20px; } .cont_top .m_scroll { right:-33px;} #side { margin:-60px 20px 0; height:60px; padding:0 20px;} #side .snb_wrap { min-height:60px;} #sub_navi .sub_history .hist_depth1 >li > a { line-height:60px;} #sub_navi .sub_history .hist_depth2 { top:59px;} #side .btn_print { right:0px; top:15px;} #footer .footer_top , #footer .footer_bot {padding:30px 20px;} } /* Mobile ~ 767px */ @media screen and (max-width:767px){ /************************************************** 상단 배너 **************************************************/ #sub_wrap , .cont_body .inr {margin:0 15px;} #header {height:60px; padding:0 15px;} body.fixed #header { top:0;} body.fixed #header .area_logo .logo img {height:32px;} body.fixed .wholeview_wrap .btn_wv {top:10px;} #header .area_logo .logo img {/*height:32px;*/} .wholeview_wrap .btn_wv {right:10px; top:10px;} #header .header_ex {right:70px; top:38px;} #header .header_ex .language .btn {width:110px; height:36px; font-size:14px; line-height:34px; padding-left:10px;} #header .header_ex .language .btn.on {border-radius:12px 12px 0 0;} #header .header_ex .language .btn i { top:8px; right:6px;} #header .header_ex .language .btn:before {display:none;} #header .header_ex .language ul { top:36px; padding:0; border-radius: 0 0 12px 12px;} #header .header_ex .language ul li a {padding-left:10px; height:40px; line-height:40px; font-size:14px;} #footer .footer_top .area_copyright .address span {font-size:15px;} #footer .footer_top .area_copyright .address em {margin:0 10px;} #footer .footer_top .area_copyright .copyright {font-size:15px;} #footer .footer_top .go_top {right:15px; top:-25px; width:50px; height:50px; line-height:50px; background:#0072ba; opacity:1; box-shadow:5px 5px 10px rgba(0,0,0,0.2);} #footer .footer_top .go_top i {font-size:14px; color:#fff;} .cont_body .inr {padding-bottom:70px;} /************************************************** Container **************************************************/ /*** 컨텐츠 바디 ***/ .lnb { margin-bottom:40px;} .lnb li{font-size:14px;} /* 탭메뉴01(일반 4개 이하) */ .lnb.tmn01 li{width:calc(50% + 1px);} .lnb.tmn01 li a{padding:13px 32px 13px 12px; font-size:16px;} .lnb.tmn01 li a:not([target="_blank"]):after{right:15px;} /* 탭메뉴03(박스) */ .lnb.tmn03{padding:15px 0;} .lnb.tmn03 li{width:50%;} .lnb.tmn03 li:nth-child(2n+1):before{display:none;} .lnb.tmn03 li a{margin-left:15px;} /* 탭메뉴04(년도) */ .lnb.tmn04 li a{padding:0 15px;} /*** 컨텐츠 하단 ***/ .cont_foot .cont_manager{justify-content:center; font-size:14px;} :root .cont_foot .cont_manager dl{margin:3px 10px;} .cont_foot .cont_rating h2{font-size:14px;} .cont_foot .cont_rating .inp_area fieldset{justify-content:center;} .cont_foot .cont_rating .inp_area fieldset span{margin:5px 4px;} .cont_foot .cont_rating .inp_area .inp_rdo{width:16px; height:16px;} .cont_foot .cont_rating .inp_area .btn_rate{margin:5px 8px;} .cont_top .m_scroll { display:none;} .cont_top .inr { margin:0 15px; height:240px; padding-top:60px;} .cont_top h2 { line-height:1; margin-bottom:8px;} .cont_top h2 span {font-size:25px;} #side { margin:-50px 15px 0; border-radius:6px 6px 0 0; padding:0;} #side .btn_print { display:none;} #side .snb_wrap { min-height:50px; background:none; border-bottom:1px solid #e2e2e2;} #sub_navi { display:block;} #sub_navi .sub_history .hist_depth1 >li > a { line-height:50px; padding-left:15px;} #sub_navi .sub_history .hist_depth1 { flex-wrap:wrap;} #sub_navi .sub_history .hist_depth1 >li { width:calc(50% - 25px) !important; margin:0; padding:0; position:relative; background:none !important;} #sub_navi .sub_history .hist_depth1 >li:before { content:''; display:block; position:absolute; right:0; bottom:0; top:0; width:1px; background:#e2e2e2;} #sub_navi .sub_history .hist_depth1 >li:last-child:before { display:none;} #sub_navi .sub_history .hist_depth1 >li:first-child { width:50px !important; text-align:center;} #sub_navi .sub_history .hist_depth1 >li:first-child a { padding:0; background:none; border-radius:6px 0 0;} #sub_navi .sub_history .hist_depth1 >li:first-child a i { font-size:13px;} #sub_navi .sub_history .hist_depth2 { left:-1px; right:0; top:49px;} #sub_navi .sub_history .hist_depth2 li a { padding:10px;} #sub_navi .sub_history .hist_depth1 .active i { right:12px; font-size:12px;} } @media screen and (max-width:500px){ #header .header_top .inr .left li {width:25%;} #footer .footer_top .logo img {height:32px;} } @media screen and (max-width:537px){ }