/*------------------------------------------------- Author : PARK SEOJIN Create date : 2017. 11. 16 -------------------------------------------------*/ .layout-contents {position:relative; margin: 50px 0 0} .detail-content {position:relative; width: 1440px; margin:0 auto 150px;} .detail-content:after { display: block; content: ""; clear: both; } @media (max-width: 1440px) { .detail-content { width: 95%; } } #header {position: fixed; top:0; left:0; width: 100%; height:80px; z-index:62; transition:all .4s; background:#fff} #header > div {padding:0 36px} #header a {display:inline-block; color:#333} #header .logo {position:absolute; left:36px; z-index:62} #header .logo h1 a {display:inline-block; width:148px; font-size:0; padding:40px 0; background:url('../../images/korean/common/svg_ecopro_hn.svg') no-repeat center center/100%} #header.sub {background:none} /* 언어 */ .language {position:relative; display:inline-block; float:right; margin-right:28px; height:80px; line-height:80px; text-align:center; z-index:62} .language .lang{display:flex;} .language .lang>span{display:flex;background:transparent !important} .language .lang>span:not(:first-child):before{content:"/";margin:0 5px;color:#fff;font-size:13px;} .site-map .language .lang>span:not(:first-child):before, .scroll-menu .language .lang>span:not(:first-child):before, body:not(.fp-viewing-firstPage) #header:not(.sub) .language .lang>span:not(:first-child):before{color:#222;} .language .lang>span.on a{font-weight:500;text-decoration:underline} .language a {display:inline-block; font-size:13px; font-weight:200; color:#fff;} .language.active .lang i {transform:rotate(180deg);} .language .list {display:none; position:absolute; left:0; max-width:100%; top:28px; width:100%;} .language .list {} .language .list li {height:25px; line-height:25px;} .language .list li a {padding-right:12px} .language .list li:first-child {margin-top:0;} /* search */ #header .search-area {position:relative; display:inline-block; float:right; margin:27px 0; z-index:62} #header .search-area i {font-size:1.6em} #header .search-area a.close {display:none; margin-left:24px} #header .search-field {display:none; width:80%; margin:auto; height:80px; line-height:80px} #header .search-field input[type="text"] {display:inline-block; width:100%; padding:6px; border:0; text-align:center} /* all-menu */ #header .all-menu {position:relative; display:inline-block; float:right; margin:29px 0 29px 29px; z-index:62} #header .all-menu span {display:block; height:4px; background:#444;} #header .all-menu span:first-child, #header .all-menu span:last-child {width:24px; transition:all .4s ease-in-out} #header .all-menu span:nth-of-type(2) {width:19px; margin:5px 0 5px 5px; transition:all .4s ease-in-out} #header .all-menu:hover span:first-child, #header .all-menu:hover span:last-child {width:19px; margin-left:5px} #header .all-menu:hover span:nth-of-type(2) {width:24px; margin:5px 0} /* 기본 메뉴 */ #nav {position:absolute; left:50%; transform:translateX(-50%); width:100%} #nav h2 {display:none} #nav > ul {text-align:center; width:100%; font-size: 0;} #nav > ul > li {display:inline-block; text-align:center;transition:none; padding:0 30px; font-size: 16px; vertical-align: top;} #nav > ul > li > a {display:inline-block; padding: 26px 17px 27px; width:100%; font-size:1.250em; font-weight:600} #nav > ul > li > a > span {display:none} #nav .depth2 a {font-size:1.125em; line-height:2.333em; font-weight:200} #nav .depth2 {overflow:hidden; visibility:hidden; height:0} #nav .depth3 {display:none} /*#nav > ul > li.active .depth2 {display:block}*/ /* 처음 메뉴 - vert-nav */ .fp-viewing-firstPage #header {background:none} .fp-viewing-firstPage #header a {color:#fff} .fp-viewing-firstPage #header .logo h1 a {background:url('../../images/korean/common/svg_ecopro_hn_white.svg') no-repeat center center/100%;} .fp-viewing-firstPage.bg #header .logo h1 a {background:url('../../images/korean/common/svg_ecopro_hn.svg') no-repeat center center/100%;} /* .fp-viewing-firstPage #header .logo h1 a {background-color: #fff;} */ .fp-viewing-firstPage #nav {position:absolute;left:inherit;transform: translateY(0);right:0;top:0;width: 50%;} .fp-viewing-firstPage #nav > ul {display:inline-block;} .fp-viewing-firstPage #nav > ul > li {float:left; width:16.66%; padding:39vh .5rem 50vh; margin:0; background:rgba(0,0,0,.25); cursor:pointer; transition:padding .4s} .fp-viewing-firstPage #nav > ul > li > a > span:first-child {display:block; padding-top:66px; text-transform:uppercase; font-family: 'Squada One', cursive; font-size:1.400em; font-weight:400; background-position:center top; background-repeat:no-repeat; transition:padding .6s } .fp-viewing-firstPage #nav > ul > li > a {font-weight:600; padding:0} .fp-viewing-firstPage #nav > ul > li:nth-of-type(1) > a > span:first-child {background-image:url('/images/korean/main/icon01.png');} .fp-viewing-firstPage #nav > ul > li:nth-of-type(2) > a > span:first-child {background-image:url('/images/korean/main/icon02.png');} .fp-viewing-firstPage #nav > ul > li:nth-of-type(3) > a > span:first-child {background-image:url('/images/korean/main/icon03.png');} .fp-viewing-firstPage #nav > ul > li:nth-of-type(4) > a > span:first-child {background-image:url('/ecoprobm/images/korean/main/icon04.png');} .fp-viewing-firstPage #nav > ul > li:nth-of-type(5) > a > span:first-child {background-image:url('/ecoprobm/images/korean/main/icon05.png');} .fp-viewing-firstPage #nav > ul > li:nth-of-type(6) > a > span:first-child {background-image:url('/ecoprobm/images/korean/main/icon06.png');} .fp-viewing-firstPage #nav > ul > li > a > span:last-child {position:relative; display:block; margin:18px auto; width:32px; height:32px; background:#fff; border-radius:50%} .fp-viewing-firstPage #nav > ul > li > a > span:last-child:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:15px; height:3px; background:#56585c; content:''} .fp-viewing-firstPage #nav > ul > li > a > span:last-child:after {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:3px; height:15px; background:#56585c; content:''} .fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child, #nav > ul > li.active > a > span:last-child {background:none;} .fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child:before, #nav > ul > li.active > a > span:last-child:before {display:none} .fp-viewing-firstPage #nav > ul > li > a:hover > span:last-child:after, #nav > ul > li.active > a > span:last-child:after {height:3px; width:21px; background:#fff} .fp-viewing-firstPage #nav > ul > li.active {padding:33vh .5rem 54vh; background:rgba(0,0,0,.4)} .fp-viewing-firstPage #nav > ul > li.active > a > span:first-child {padding-top:54px} .fp-viewing-firstPage #nav > ul > li.active .depth2 {overflow:visible; visibility:visible; height:auto} .fp-viewing-firstPage #nav > ul > li.active > a > span:last-child {margin:28px auto 15px} .fp-viewing-firstPage #header .all-menu span {background:#fff} /* :not sitemap */ .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li{} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > ul > li{padding:0;} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > ul > li:not(:first-child){margin-top:1rem;} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > ul > li > a{line-height:1.4;word-break: keep-all;} /* all-menu click시 */ body.bg:before {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3); content:''; z-index:1} #header.site-map {height:100% !important} #header.site-map {background:#fff} #header.site-map a {color:#333} #header.site-map h2 {display:inline-block; float:left} #header.site-map .logo h1 a {background-position:right center} #header.site-map #nav {width:1650px; left:50%; top:80px; transform:translateX(-50%)} #header.site-map #nav > ul {margin-left:90px; width:86%; float:left} #header.site-map #nav > ul > li {overflow:hidden; margin-left:0; text-align:left; width:inherit; padding:4px 0; background:none; border-bottom:1px solid #e2e2e2} #header.site-map #nav > ul > li:first-child {padding-top:0} #header.site-map #nav > ul > li > a {vertical-align:top; width: 100%; max-width:190px; float:left; color:#2277f2; font-size:1.563em; padding:0;} #header.site-map #nav > ul > li > a > span {display:none} #header.site-map #nav > ul > li:nth-of-type(3) .depth2 {overflow:hidden;} #header.site-map #nav > ul > li:nth-of-type(3) .depth2 li {float:left} #header.site-map #nav > ul > li:nth-of-type(3) .depth2 > li {width: 100%;} #header.site-map #nav > ul > li:nth-of-type(3) .depth2 > li > a {width:auto;} #header.site-map #nav .depth2 {display:inline-block; float:left; overflow:visible; visibility:visible; width: calc(100% - 190px); height:auto} #header.site-map #nav .depth2 > li:after {display:block; content:''; clear:both} #header.site-map #nav .depth2 > li > a {float:left; font-weight:900; font-size:1.125em; margin-right:40px; color:#333} #header.site-map #nav .depth3 {overflow:hidden; display:block} #header.site-map #nav .depth3 li {position:relative; float:left; padding-left:16px; margin-left:20px;} #header.site-map #nav .depth3 li::before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:30%; background:#999; content:''} #header.site-map #nav .depth3 li:first-child {padding-left:0; margin-left:0} #header.site-map #nav .depth3 li:first-child::before {display:none} #header.site-map #nav .depth3 a {color:#444} #header.site-map .all-menu {margin-top:27px;} #header.site-map .all-menu span {display:none} #header.site-map .all-menu:after {font-family:'xeicon'; content:'\e921'; font-size:1.6em} /* 202304_헤더영역 픽스 */ body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul, #header.sub:not(.site-map) #nav > ul{display:flex;justify-content:center;height:80px;} #header.sub:not(.site-map) #nav > ul > li {position:relative;} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li > a, #header.sub:not(.site-map) #nav > ul > li > a{display:flex;justify-content:center;align-items:center;padding:0 17px;height:100%;} #header.sub:not(.site-map) #nav > ul > li .depth2{left:50%;transform:translatex(-50%);background-color:transparent} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li.active .depth2, #header.sub:not(.site-map) #nav > ul > li.active .depth2{display:flex;flex-wrap:nowrap;justify-content:center;} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2:before, body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2:after, #header.sub:not(.site-map) #nav > ul > li .depth2:before, #header.sub:not(.site-map) #nav > ul > li .depth2:after{content:"";position:absolute;top:0;width:100vw;height:100%;background-color:#26315c;z-index:0;} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2:before, #header.sub:not(.site-map) #nav > ul > li .depth2:before{left:-50vh} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2:after, #header.sub:not(.site-map) #nav > ul > li .depth2:after{right:-50vh} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2>li, #header.sub:not(.site-map) #nav > ul > li .depth2>li{flex-shrink:0;position:relative;z-index:1;text-align:center;} @media(max-width:1660px) { body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav, #header.sub:not(.site-map) #nav{padding:0 200px} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul, #header.sub:not(.site-map) #nav > ul{text-align:left;} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li, #header.sub:not(.site-map) #nav > ul > li{padding:0} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li > a, #header.sub:not(.site-map) #nav > ul > li > a{padding-left:15px;padding-right:15px;} } @media(max-width:1024px) { #header.sub:not(.site-map) #nav > ul > li .depth2:before, #header.sub:not(.site-map) #nav > ul > li .depth2:after{display:none} } /* search click시 */ #header.search {background:#fff} #header.search:after {position:absolute; left:0; top:80px; width:100%; height:calc(100vh - 80px); background:rgba(0,0,0,.3); content:''} #header .search-area a.search {position:relative; /*color:#fff;*/ display: block;} #header .search-area a.search:before {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:22px; background:#000; border-radius:50%; content:''; z-index:-1; opacity:0; transition:background .4s} #header.search .search-area a.search:before {opacity:1} #header.search .search-area a.close {display:inline-block; color:#333} #header.search .all-menu {display:none} #header.search .logo h1 a {background-position:right center} #header.search .search-field {display:block} #header.search .language {display:none} #header.search #nav {display:none} .fp-viewing-firstPage #header.search #nav {display:block; z-index: -1;} .fp-viewing-firstPage #header.search #nav > ul {top:80px} #section2 > div {display:block} #footer {width: 100%; z-index: 1; background-color: #fff; border-top:1px solid #e2e2e2; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} #footer div:first-child {background:#f3f3f3} #footer div ul {text-align:center} #footer div li {position:relative; display:inline-block; padding-left:19px; margin-left:16px} #footer div li:first-child {margin-left:0; padding-left:0} #footer div li:before {position:absolute; left:0; top:50%; transform: translateY(-50%); width:1px; height:30%; background:#999; content:''} #footer div li:first-child:before {display:none} #footer div li a {display:inline-block; padding:12px 0 15px; font-size:0.938em; color:#999} #footer div:last-child {padding:40px 0 50px; color: #919191; font-size:0.875em} #footer .copyright {padding-top:8px; font-size: 0.857em;} /* sub */ #header.sub a {color:#fff} #header.sub span {background:#fff} #header.sub .logo a {background: url(../../images/korean/common/svg_ecopro_hn_white.svg) no-repeat center center/100%;} #header.sub #nav > ul > li > a {position:relative;} #header.sub #nav > ul > li > a:before {position:absolute; bottom:-20px; left:40%; width:0; height:0; border-right:10px solid transparent; border-bottom:10px solid #26315c; transform:rotate(135deg) translateX(-50%); content:''; opacity:0; transition:bottom .4s} #header.sub #nav > ul > li.active > a:before {bottom:-7px; opacity:1} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li .depth2, #header.sub #nav > ul > li .depth2{position:absolute; top:80px; left:0; width:100%; background:#26315c; overflow:hidden; visibility:hidden; height:0; transition:overflow .4s, visibility .4s, height .4s} body:not(.fp-viewing-firstPage) #header:not(.site-map) #nav > ul > li.active .depth2, #header.sub #nav > ul > li.active .depth2 {display:flex; overflow:visible; visibility:visible; height:auto} body:not(.fp-viewing-firstPage) #header:not(.site-map) .depth2 > li, #header.sub .depth2 > li {display:inline-block;} body:not(.fp-viewing-firstPage) #header:not(.site-map) .depth2 > li > a, #header.sub .depth2 > li > a {color:#fff; padding:10px 14px} body:not(.fp-viewing-firstPage) #header:not(.site-map) .depth2 > li:first-child a, #header.sub .depth2 > li:first-child a {padding-left:0} #header.sub.menu {background:#fff} /*#header.sub.menu:before {position:absolute; top:80px; left:0; background:#26315c; width:100%; height:61px; content:''}*/ #header.sub.menu a {color:#333} #header.sub.menu .all-menu span {background:#333} #header.sub.menu .logo a {background-position:right center} #header.sub.site-map a {color:#333} #header.sub.site-map .depth2 > li {float:left; width:100%} #header.sub.site-map #nav .depth2 > li > a {padding:0} #header.sub.site-map #nav > ul > li > a:before, #header.sub.site-map.menu:before {display:none} #header.sub.site-map #nav > ul > li .depth2 {position:inherit; top:inherit; overflow:visible; visibility:visible; height:auto; background:none; width:80%} #header.sub.site-map #nav > ul > li:nth-of-type(3) .depth2 li {width:auto;} #header.scroll-menu {background:#fff; border-bottom:1px solid #e2e2e2; height:75px} #header.scroll-menu .logo a {background-position:right center; background: url(../../images/korean/common/svg_ecopro_hn.svg) no-repeat center center/100%; padding:35px 0} #header.scroll-menu a {color:#333;} #header.scroll-menu .all-menu {margin:29px 0 24px 29px} #header.scroll-menu .all-menu span {background:#333} #header.scroll-menu .language {height:75px; line-height:75px} #header.scroll-menu .search-area {margin:27px 0 20px} #header.scroll-menu .language .list {top:25px} #header.scroll-menu.search:after {top:75px} #header.scroll-menu.sub.menu:before {top:75px} #header.scroll-menu.sub #nav > ul > li.active > a:before {bottom:-10px} #header.scroll-menu.sub #nav > ul > li .depth2 {top:75px} #header.scroll-menu.sub #nav > ul > li > a {padding: 23px 17px;} .sub-visual {position:relative; width:100%; height:600px; background:url('/images/korean/sub/sub-visual13.jpg') center/cover no-repeat} .sub-visual p {position:relative; display:inline-block; float:left; padding-right:100px; color:#fff; font-size:1.875em} .sub-visual p:after {position:absolute; right:0; top:50%; transform:translateY(-50%); width:72px; height:2px; background:#fff; content:''} .sub-visual p:last-child {float:right; padding:0 0 0 100px} .sub-visual p:last-child:after {right:inherit; left:0} .sub-visual > div {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; padding:0 36px; opacity:1; transition:opacity .8s } .sub-visual .sub-title {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:65px 44px 68px; width:470px} .sub-visual .sub-title:before {position:absolute; left:10px; top:10px; width:100%; height:100%; background:rgba(0,0,0,.4); content:''; z-index:-2} .sub-visual .sub-title:after {position:absolute; left:0; top:0; width:100%; height:100%; border:2px solid rgba(255,255,255,.7); content:''; z-index:-1} .sub-visual h2 { padding:0 24px; font-size:2.5em; font-weight:400; color:#fff; text-align:center; vertical-align:middle} .sub-visual h2 span {display:block; font-size:0.4em} .sub-visual a {position:absolute; top:50%; transform:translateY(-50%); color:#fff; vertical-align:middle; width:20%; height:100%} .sub-visual a i {font-size:1.5em; position:absolute; top:50%; transform:translateY(-50%);} .sub-visual a.left {left:5%; text-align:left;} .sub-visual a.left i {left:0} .sub-visual a.right {right:5%; text-align:right;} .sub-visual a.right i {right:0} .sub-visual.sub0101 {background-image:url('/images/korean/sub/sub-visual01.jpg')} .sub-visual.sub0102 {background-image:url('/images/korean/sub/sub-visual02.jpg')} .sub-visual.sub0103 {background-image:url('/images/korean/sub/sub-visual03.jpg')} .sub-visual.sub0104 {background-image:url('/images/korean/sub/sub-visual04.jpg')} .sub-visual.sub0105 {background-image:url('/images/korean/sub/sub-visual05.jpg')} .sub-visual.sub0106 {background-image:url('/images/korean/sub/sub-visual14.jpg')} .sub-visual.sub0107 {background-image:url('/images/korean/sub/sub-visual15.jpg')} .sub-visual.sub0201 {background-image:url('/images/korean/sub/sub-visual06.jpg')} .sub-visual.sub0202 {background-image:url('/images/korean/sub/sub-visual07.jpg')} .sub-visual.sub0203 {background-image:url('/images/korean/sub/sub-visual08.jpg')} .sub-visual.sub0301 {background-image:url('/images/korean/sub/sub-visual09.jpg')} .sub-visual.sub0302 {background-image:url('/images/korean/sub/sub-visual10.jpg')} .sub-visual.sub0303 {background-image:url('/images/korean/sub/sub-visual11.jpg')} .sub-visual.sub05 {background-image:url('/images/korean/sub/sub-visual12.jpg')} .sub-visual.sub020101 {background-image:url('/images/korean/sub/sub-visual020101.jpg')} .sub-visual.sub020103 {background-image:url('/images/korean/sub/sub-visual020103.jpg')} .sub-visual.sub0601 {background-image:url('/images/korean/sub/sub-visual0601.jpg')} .sub-visual.sub0602 {background-image:url('/images/korean/sub/sub-visual0602.jpg')} .sub-visual.sub0603 {background-image:url('/images/korean/sub/sub-visual0603.jpg')} .sub-visual.sub0701 {background-image:url('/images/korean/sub/sub-visual0701.jpg')} .sub-visual.sub0102 {background-image:url('/images/korean/sub/sub-visual0102.jpg')} .sub-visual.sub1101 {background-image:url('/images/korean/sub/sub-visual1101.jpg')} .sub-visual.sub1102 {background-image:url('/images/korean/sub/sub-visual1102.jpg')} .sub-visual.sub0801 {background-image:url('/images/korean/sub/sub-visual0801.jpg')} .sub-visual.sub0802 {background-image:url('/images/korean/sub/sub-visual0802.jpg')} .sub-visual.sub0803 {background-image:url('/images/korean/sub/sub-visual0803.jpg')} .path-layout {background:#fff; border-bottom:1px solid #e2e2e2; z-index:2; transition:position .4s} .path-layout > div {width:1440px; margin:auto;} .path-layout div p {display:inline-block; padding:0 22px; color:#555; height:60px; line-height:60px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2} .path-layout .group {position:relative; display:inline-block; width:200px; height:60px; line-height:60px; border-right:1px solid #e2e2e2; margin-left:-4px} .path-layout .group > a:after {position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:'xeicon'; content:'\e936'} .path-layout .group a {display:inline-block; padding-left:25px; width:100%; color:#555} .path-layout .group ul {position:absolute; left:0; top:60px; overflow:hidden; visibility:visible; height:0; border:1px solid #e2e2e2; border-top:0; width:calc(100% + 1px); background:#fff; transition:overflow .4s, visibility .4s, height .4s; z-index:1} .path-layout .group ul.active {top:61px; overflow:visible; visibility:visible; height:auto} .path-layout .group a:hover {background:#f3f3f5} /* .sub-visual.fade-out {position:fixed; top:0; left:0; width:100%; height:80px; z-index:1} .sub-visual.fade-out > div {opacity:0;} */ .sub-visual.sub {top:-525px !important; z-index:10} .sub-visual > div.sub {opacity:0} .path-layout.sub {position:fixed; top:75px; left:0; width:100%; z-index:3} #footer div:first-child {background:#fff; position:relative; width:1440px; margin:auto} #footer div:last-child {background:#f3f3f3} .top {position:absolute; right:0; top:-1px; width:50px; height:50px; padding:8px 0; background:#333; color:#fff; text-align:center; z-index:10; font-size:0.875em} .top i {display:block} @media(max-width:1650px){ #header.site-map #nav {width:95%} #header.site-map #nav > ul {margin-left:10px; width:91%; text-align:inherit} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > a {font-size:1.1rem} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > a > span:first-child {font-size:1.25rem} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > ul > li > a{font-size: 1rem;} } @media(max-width:1440px){ .path-layout > div {width:100%} #footer div:first-child {width:100%} .fp-viewing-firstPage #header:not(.site-map) #nav{width:57.5%} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > a {font-size:1rem} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > a > span:first-child {font-size:1.2rem} .fp-viewing-firstPage #header:not(.site-map) #nav > ul > li > ul > li > a{font-size: .9rem;} } @media (max-width: 1440px) { #nav > ul > li { padding: 0 12px; } #nav > ul > li > a { padding: 26px 0 27px; } } @media(max-width:1200px){ .fp-viewing-firstPage #header #nav, #nav {display:none} #header.site-map #nav > ul {margin-left:0; width:100%} #header.site-map h2 br {display:none} } @media(max-width:1100px){ #header .logo {left: 20px;} .detail-content {width:90%; margin:40px auto} .path-layout > div {width:100%} #header > div {padding:0 20px} #nav {display:none} #header:not(.site-map) .language {display:none;} #header:not(.site-map) .language .lang {} #header.site-map .language{position:absolute;top:0;left:15px;height:60px;} .language .list {display:block; position:inherit; left:inherit; top:inherit;} .language .list li {position:relative; display:inline-block; margin-left:7px; padding-left:13px;} .language .list li:before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:40%; background:#e2e2e2; content:''} .language .list li:first-child {padding-left:0; margin-left:0} .language .list li:first-child:before {display:none} .language .list li a {position:relative; padding-right:0; font-weight:900; transition:color .2s} .language .list li a:after {position:absolute; left:0; bottom:-4px; width:100%; height:4px; background:#2277f2; content:''; opacity:0; transform:scaleX(0); transition:opacity .2s, transform .3s} .language .list li.active a {color:#2277f2 !important} .language .list li.active a:after {opacity:1; transform:scaleX(1);} #header.site-map {height:100vh} #header.site-map #nav {display:block; width:100%; left:0; transform:translateX(0);} #header.site-map h2 {display:none} #header.site-map #nav > ul {margin-left:0; width:inherit; float:none} #header.site-map #nav > ul > li {padding:0; border:0} #header.site-map #nav > ul > li > a {position:relative; padding:20px; width:100%; max-width: 100%; border-bottom:1px solid #e2e2e2} #header.site-map #nav > ul > li > a:after {position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:'xeicon'; content:'\e941'} #header.site-map #nav > ul > li .depth2 {height:0; overflow:hidden; visibility:hidden; width:100%; border-bottom:1px solid #e2e2e2; background:#f3f3f5;} #header.site-map #nav > ul > li:last-child .depth2 li {float:none} #header.site-map #nav .depth2 > li > a {float:none; width:100%; padding:10px 30px; margin-right:0; font-size:1.250em} #header.site-map #nav .depth3 {display:none} #header.site-map #nav > ul > li.active > a:after {content:'\e944'} #header.site-map #nav > ul > li.active > a {background:#2277f2; color:#fff} #header.site-map #nav > ul > li.active .depth2 {height:auto; overflow:visible; visibility:visible;} #header.site-map .language {display:inline-block;} #header.site-map .logo {display:none} #header.site-map .search-area {display:none} #header.site-map .all-menu {margin-top:20px} #nav > ul > li {display:block} #header.sub.site-map #nav > ul > li .depth2 {width:100%; height:0; overflow:hidden; visibility:hidden;} #header.sub.site-map #nav > ul > li.active .depth2 {height:auto; overflow:visible; visibility:visible;} #header.sub.site-map .depth2 > li {display:block} #header.sub.site-map #nav .depth2 > li > a {padding:10px 30px} #header.site-map #nav > ul > li:nth-of-type(3) .depth2 li {float:none} #header .search-area a.search:before {padding:17px} #header .search-field {float:left; width:80%} #header.search .logo {display:none} #footer div li a {padding:5px 0} #footer div:last-child {padding:20px 0} .top {top:100%} .sub-visual {height:400px} .sub-visual.sub {top:-325px !important} } @media(max-width:767px){ .sub-visual p {display:none} .path-layout div p {display:none} .path-layout div .group01 {display:none} .path-layout .group {border-right:0; width:100%; margin-left:0} #header .logo h1 a {width: 148px;} #footer div li:nth-of-type(4) {padding-left:0; margin-left:0} #footer div li:nth-of-type(4):before {display:none} #footer div:last-child {padding:10px 12px;} #footer div:last-child address span:first-child {display:block} #footer .copyright {padding:0} } @media(max-width:700px){ .sub-visual .sub-title {width:80%} } @media(max-width:425px){ #header, #header .logo h1 {height:60px} #header .logo h1 a {padding:30px 0} #header .search-area {margin:20px 0} #header .all-menu {margin:19px 0 19px 20px} #header .search-field {height:60px; line-height:60px; width:60%} #header.search:after {top:60px} .path-layout.sub {top:60px} .sub-visual.sub {top:-340px !important} .sub-visual .sub-title {width:90%} .sub-visual h2 {font-size:2.4em; padding:0} } #header.sub.menu .logo a {background-image: url(../../images/korean/common/svg_ecopro_hn.svg);} .sub-visual.sub0204 {background-image:url('/images/korean/sub/sub-visual17.jpg')} /* 220627 XSS 공격 방어 */ #header .search-area a.search.on {text-align: center; display: none;} #header.search .search-area a.search {position:relative; color:#fff; display: none;} #header.search .search-area a.search.on {display: inline-block;}