@charset "utf-8";

/* skip */
#skip a{position:absolute;top:0px;left:-9999px; z-index:99999;}
#skip a:focus,#skip a:active{left:0px;width:100%;text-align:center;padding:5px 0;background:#000;color:#fff;font-weight:bold;}

/* HEDAER */
#header{width: 100%;height: 100rem;box-shadow: 0 2rem 12rem 0 rgba(0, 0, 0, 0.1);position: relative;z-index: 100;}
#header .header-wrap{width: 100%;max-width: 1780rem;margin: 0 auto;position: relative;text-align: center;height: 100%;}
#header h1.logo{position: absolute;left: 0;top: 0;height: 100%;display: flex;align-items: center;z-index: 30;width: 244rem;}
#header h1.logo a{display: block;}
#header .nav{position: relative;height: 100%;}
#header .nav .gnb{display: flex;justify-content: center;gap: 80rem;height: 100%;align-items: center;}
#header .nav .gnb .gnb-dp1{position: relative;}
#header .nav .gnb .gnb-dp1 > a{font-family:'GmarketSans';font-size: 24rem;}
#header .nav .gnb .gnb-dp2{position: absolute;width: 100%;top: 100rem;display: flex;flex-direction: column;gap: 20rem;z-index:35;height: 0;visibility: hidden;opacity: 0;}
#header .nav .gnb .gnb-dp2 li{font-size: 19rem;}
#header .nav .gnb .gnb-dp2 li a{color:#3d3d3d;}
#header .nav .gnb .gnb-dp2 li a:hover{color:#000;}
#header.active .nav .gnb-dp2{height: 34rem;opacity: 1;visibility: visible;transition: 0.3s ease 0.1s;}
#header .gnb-bg{position: absolute;z-index: 30;top: 100rem;left: 0;width: 100%;height: 0;overflow: hidden;transition: 0.3s ease;background: #fff;border-top: 1rem solid transparent;}
#header .gnb-bg.active{height: 260rem;box-shadow: 5rem 5rem 7rem 0 rgba(0, 0, 0, 0.1);border-top-color: #e9e9e9;}
#header .gnb-bg svg{width: 600rem;position: absolute;right: 0;bottom: -40rem;}
#header .gnb-bg svg path{fill:none;stroke:rgb(117, 208, 237);stroke-width:0.25;stroke-miterlimit:10;stroke-dasharray: 1000;stroke-dashoffset:1000;}
#header .gnb-bg.active svg path{animation: path 10s forwards;}
@keyframes path {
    100%{stroke-dashoffset: 0;}
}

/* SITEMAP */
.sitemap-btn{width: 25rem;height: 22rem;background: url(/theme/energy/images/common/sitemapBtn.png) no-repeat center;display: block;position: absolute;right: 0;top: 50%;margin-top:-11rem;z-index: 30;background-size: 100%;}
.sitemap{position: fixed;width: 100%;height: 100%;padding: 0 20rem;background: #002c64;left: 0;top: 0;z-index: 110;display: flex;align-items: center;display: none;}
.sitemap.show{display: flex;}
.sitemap .sitemap-wrap{width:100%;max-width: 1560rem;margin: 0 auto;position: relative;}
.sitemap .sitemap-logo{margin: -100rem 0 150rem;}
.sitemap .sitemap-logo img{display: none;}
.sitemap .sitemap-logo strong{font-family:'GmarketSans';font-size: 45rem;color: #fff;}
.sitemap .gnb{display: flex;justify-content: center;gap: 60rem;}
.sitemap .gnb .gnb-dp1{width:calc(100% / 4)}
.sitemap .gnb .gnb-dp1 > a{font-family:'GmarketSans';font-size: 24rem;line-height: 64rem;display: block;border-bottom: 1rem solid rgba(255,255,255,0.3);padding-left: 10rem;color: #fff;position: relative;}
.sitemap .gnb .gnb-dp1 > a:before{content: '';width: 40rem;height: 40rem;background: #7cb5ff30;display: block;position: absolute;left: -5rem;top: 1rem;border-radius: 100%;z-index: -1;transform: translateY(-30rem);transition:0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);opacity: 0;}
.sitemap .gnb .gnb-dp1.active > a:before{transform:translateY(0);opacity: 1;}
.sitemap .gnb .gnb-dp2{font-size:20rem;display: flex;flex-direction: column;gap: 20rem;padding: 0 10rem;margin-top: 30rem;}
.sitemap .gnb .gnb-dp2 li a{color:#fff;opacity: 0.6;font-weight: 300;}
.sitemap .gnb .gnb-dp2 li a:before{content: '';width: 5rem;height: 5rem;border-radius: 100%;background: #fff;display: inline-block;vertical-align: 4rem;margin: 0 10rem;}
.sitemap .gnb .gnb-dp2 li a:hover{opacity: 1;}
.sitemap .sitemap-close{position: absolute;top: -105rem;right: 0;font-size: 38rem;font-weight: 700;width: 50rem;height: 50rem;background: #fff;border-radius: 100%;color: #000000;text-align: center;}
.sitemap .sitemap-close:after{content: '×';display: block;margin-top: -3rem;}
.sitemap .sitemap-close:before{content: '';width: calc(100% + 10px);height: calc(100% + 10px);background: #ffffff;opacity: 0.2;position: absolute;display: block;border-radius: 100%;top: -5px;left: -5px;}

/* LNB */
.lnb{width: 100%;height:60rem;background: #f8f9fa;border: 1rem solid #e2e2e2;border-width: 1rem 0;}
.lnb .lnb-wrap{width:100%;max-width: 1480rem;margin: 0 auto;display: flex;}
.lnb .home{width: 60rem;height: 59rem;display: block;background: url(/theme/energy/images/common/home.svg) no-repeat center;background-size: 24rem;border: 1rem solid #e2e2e2;border-width: 0 1rem;}
.lnb .lnb-list{position: relative;}
.lnb .lnb-list > a{display: block;min-width: 240rem;height:59rem;line-height:60rem;border-right: 1rem solid #e2e2e2;padding: 0 40rem 0 20rem;font-size: 17rem;}
.lnb .lnb-list > a:after{content: '';width: 30rem;height: 59rem;background: url(/theme/energy/images/common/arr-down.svg) no-repeat center;background-size: 15rem;display: block;position: absolute;right: 7rem;top: 0;transition: 0.3s;}
.lnb .lnb-list > a.on:after{transform: rotate(180deg);}
.lnb .lnb-list ul{width: calc(100% + 1rem);border: 1rem solid #e2e2e2;border-width: 0 1rem;position: absolute;top: 59rem;left: -1rem;max-height: 0;transition: max-height 0.5s;overflow: hidden;background: #fff;}
.lnb .lnb-list ul li{border-bottom:1rem solid #e2e2e2;}
.lnb .lnb-list ul li:last-child{border:none;}
.lnb .lnb-list ul li a{display:block;padding: 17rem 20rem;}
.lnb .lnb-list ul li a:hover{color: #3e5df2;}
.lnb .lnb-list ul.active{max-height: 400rem;border-width: 0 1rem 1rem;}

/* FOOTER */
#footer{width: 100%;background: #1a1a1a;padding: 50rem 0;}
#footer .footer-wrap{width:100%;max-width: 1480rem;margin: 0 auto;}
#footer .footer-link{display: flex;gap: 50rem;font-size: 18rem;}
#footer .footer-link li a{color: #fff;}
#footer .footer-link li:first-child a{color: #00B2FF;}
#footer .address{color: #fff;margin-top: 30rem;display: flex;flex-direction: column;gap: 10rem;}
#footer .address p{line-height: 22rem;}
#footer .address .copyright{opacity:0.5;}

#content{min-height: 600rem;}


@media (max-width:1780px) {
    #header .header-wrap{padding: 0 20rem;}
    #header h1.logo{left: 20rem;}
}
@media (max-width:1480px) {
    #footer .footer-wrap{padding: 0 20rem;}
}
@media (max-width:1200px) {
    #header{height:68px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    #header .header-wrap{padding:0 20px;}
    #header h1.logo{left:20px;width: auto;}
    #header h1.logo a img{width:180px;}
    #header .nav .gnb{display: none;}
    #header .gnb-bg{display:none;}
    .sitemap{background: #fff;}
    .sitemap-btn{width: 25px;height: 22px;margin-top: -11px;}
    .sitemap.show{display: block;padding: 0;}
    .sitemap .sitemap-close{top: 5px;right: 7px;width: 50px;height: 50px;font-weight: 400;font-size: 36px;}
    .sitemap .sitemap-close:before{display:none;}
    .sitemap .sitemap-close:after{margin-top:0;}
    .sitemap .sitemap-logo{margin: 0;padding: 17px 20px;height: 68px;}
    .sitemap .sitemap-logo img{display: block;width: 180px;}
    .sitemap .sitemap-logo strong{display: none;}
    .sitemap .gnb{display: block;border-top: 1px solid #ddd;padding-top: 10px;}
    .sitemap .gnb .gnb-dp1{width: 100%;}
    .sitemap .gnb .gnb-dp1 > a{color: #000;border-bottom: none;font-size: 20px;padding-left: 20px;line-height: 60px;}
    .sitemap .gnb .gnb-dp1 > a:before,
    .sitemap .gnb .gnb-dp1 > a:after{content: '';display: block;position: absolute;background: #000;left: auto;transform: none;transition: none;opacity: 1;}
    .sitemap .gnb .gnb-dp1 > a:before{width: 12px;height: 2px;top: 29px;right: 30px;}
    .sitemap .gnb .gnb-dp1 > a:after{width: 2px;height: 12px;top: 24px;right: 35px;}
    .sitemap .gnb .gnb-dp2{font-size: 18px;display:none;}
    .sitemap .gnb .gnb-dp2 li a{color: #000;padding: 10px 20px;display: block;font-weight: 400;}
    .sitemap .gnb .gnb-dp2 li a:before{background: #000;width: 4px;height: 4px;vertical-align: 4px;margin: 0 10px;}
    .sitemap .gnb .gnb-dp1.on .gnb-dp2{display:block;margin: 0 0 20px 0;padding: 0;}
    .sitemap .gnb .gnb-dp1.on > a{color: #3e5df2;}
    .sitemap .gnb .gnb-dp1.on > a:before{background: #3e5df2;}
    .sitemap .gnb .gnb-dp1.on > a:after{opacity: 0;}
}
@media (max-width:640px) {
    .lnb{display: none;}
    #footer{padding: 30rem 0;}
    #footer .footer-link{justify-content: center;font-size:16rem;}
    #footer .footer-wrap{text-align: center;}
    #footer .address{font-size: 14rem;}
}
@media (max-width:460px) {
    .sitemap .gnb .gnb-dp1 > a{font-size: 18px;line-height: 55px;}
    .sitemap .gnb .gnb-dp1 > a:after{top: 20px;}
    .sitemap .gnb .gnb-dp1 > a:before{top: 25px;}
    .sitemap .gnb .gnb-dp2{font-size: 16px;}
}