@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {color: #222;}
.sec-header {position: relative; padding: 20rem 0; min-height: 80vh;}
.sec-tit {font-weight: 700; font-size: 5rem;}
.sec-desc {font-size: 9rem; color: #cecece; font-weight: 700; letter-spacing: 0.025em; line-height: 1.3; }

@media (max-width: 1440px) {
  .sec-header {padding-top: 15rem;}
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
  .sec-desc {font-size: 7rem; line-height: 1.2;}
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
  .sec-desc {font-size: 5rem;}
}
@media (max-width: 480px) {
}

/* MAIN-COMMON */
/* ===================================================== */


/* ===================================================== */
/* MAIN-VISUAL */
.visual {position: relative; overflow: hidden;}
.visual-slide {height: 100vh; height: 100svh; min-height: 60rem; }
.visual-slide-img { display: block; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.1); transition: 4s linear;} 
.visual-slide-img::before {content: ''; inset: 0; position: absolute; background-color: var(--color-black-a4);}
.visual-01 video {min-width: 100%; max-width: none;}
.visual-02 {background-image: url(../images/main/main_visual01.jpg);}
.visual-on .visual-slide-img { transform: scale(1.01); } 

.visual-txt { position: absolute; inset: 50% 0 auto; z-index: 10; font-weight: 800; font-size: calc(1.4rem + 10px); transform: translateY(-50%); text-align: center; color: #fff; } 
.visual-tit {font-size: 8rem; text-transform: uppercase;}
.visual-tit span {color: #fcff00;}
.visual-desc { font-size: 3rem; font-weight: 500; line-height: 1.4; }
.visual-on .visual-tit {animation: fade-in 1.2s ease-out .6s both;}
.visual-on .visual-desc .char {
  --vdd: 1.6s; /* visual-desc 애니메이션 시간 */
  animation: fade-in .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both; } 

.visual-dot { margin-top: 0.8em; animation: fade-in .4s linear 1.6s both; } 
.visual-dot .slick-dots { display: flex; justify-content: center; column-gap: 6px; } 
.visual-dot button { display: flex; width: 3rem; padding: 2rem 0; font-size: 0; position: relative; } 
.visual-dot button::before { width: 12px; height: 12px; border-radius: 50%; margin: auto; border: 2px solid #fff; content: ''; transition: .3s; } 
.visual-dot li:not(.slick-active) button:hover::before { background-color: var(--color-white-a8); } 
.visual-dot li.slick-active button::before { background-color: #fff; } 
/* .visual-dot li.slick-active button::after { content: ''; width: 42px; height: 16px; background: url(../images/main/visual-dot.png) no-repeat center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 6px); } */

/* 스크롤 다운 */
.visual-scroll { display: flex; flex-direction: column; align-items: start; position: absolute; left: 50%; transform: translateX(-50%); bottom:35px; transition: .3s; } 
.visual-scroll-btn { font-size: 0; width: 60px; height: 60px; background: url(../images/common/scroll-arrow.png); animation: scroll-line 2.5s linear infinite; } 
@keyframes scroll-line { 
  0% { transform: translateY(30%); } 
  100% { transform: translateY(-30%); } 
}

@media (max-width: 1600px) {
}
@media (max-width: 1440px) {
  .visual-slide {height: 90svh;}
}
@media (max-width: 1280px){
}
@media (max-width: 1024px) {
  .visual-scroll-btn {width: 50px; height: 50px; background-size: contain;} 

}
@media (max-width: 768px){
  .visual-scroll-btn {width: 40px; height: 40px;} 
  .visual-txt { width: 100%; padding: 0 var(--inner-padding); text-align: center; } 
  .visual-tit { margin-bottom: 1.4rem; font-size: 6.8rem; } 
  .visual-desc { flex-wrap: wrap; justify-content: center; row-gap: 3.5rem; } 
}
@media (max-width: 576px){
  .visual-tit { font-size: calc(10px + 7vw); } 
  .visual-desc { font-weight: 500; font-size: 3.3vw; } 
}
@media (max-width: 480px) {
  .visual-slide {height: 70svh;}
}
/* MAIN-VISUAL */
/* ===================================================== */


/* ===================================================== */
/* MAIN-PRODUCT */
#section02 {position: relative;}
#section02 .inner { display: flex; position: static; }
#section02 .sec-header { padding-top: 10rem; position: relative; z-index: 1; }
.product .item { width: 50%; padding-bottom: 20rem; }

.product .right { text-align: right; }
.product .tag { display: inline-block; padding: 0.5rem 2rem; margin-bottom: 1rem; background: #2c2c2c; border-radius: 30px; font-size: 1.8rem; font-weight: 700; color: #fff; transition: .3s ease-in-out; }
.product .sec-tit { font-size: 5.5rem; }
.product .sec-desc { font-size: 1.8rem; font-weight: 600; color: #666; letter-spacing: -0.03rem; max-height: 0; overflow: hidden; margin-top: 2rem; transition: .3s ease-in-out;  }
.product .more { display: inline-block; margin-top: 3rem; font-size: 0; width: 115px; height: 26px; background: url(../images/main/product-more_arrow.png); }
.product .product-bg { width: 100%; height: 50%; position: absolute; bottom: 0; left: 0; background: url(../images/main/product_bg01.png) no-repeat center / cover; z-index: -1; opacity: 0; transition: .3s ease-in-out; }
.product .right .product-bg { background-image: url(../images/main/product_bg02.png); }
.product .product-img { width: 40rem; height: auto; border-radius: 10px; overflow: hidden; position: absolute; top: 35rem; left: 0; z-index: 1; box-shadow: 4em 4em 3em var(--color-black-a4); transition: .3s ease-in-out; }
.product .product-img .img { position: relative; }
.product .product-img .img::after { content: ''; width: 100%; height: 100%; background: var(--color-black-a6); position: absolute; inset: 0; }
.product .right .product-img { inset: 35rem 0 auto auto; }
.product .item:not(.is-hover) .sec-tit { font-weight: 300; }
.product .item:not(.is-hover) .sec-tit span { display: none; }
.product .item:not(.is-hover) .sec-desc { max-height: 0; }

.product .is-hover .tag { background: var(--color-main); }
.product .is-hover .sec-desc { max-height: 200px; }
.product .is-hover .product-img { inset: 23rem auto auto 75%; border: 5px solid var(--color-main); }
.product  .right.is-hover .product-img { inset: 23rem 75% auto auto; }
.product .is-hover .product-img .img::after {opacity: 0;}
.product .is-hover .product-bg { z-index: 0; opacity: 1; }

@media (max-width: 1600px) {
}
@media (max-width: 1280px) {
  #section02 .inner {display: block;}
  #section02 .sec-header {padding-bottom: 15rem; min-height: 1px;}
  .product .item {width: 100%; padding: 0;}
  .product .item:not(.is-hover) .sec-desc {max-height: 200px;}
  .product .item .tag {background: var(--color-main);}
  .product .item:not(.is-hover) .sec-tit {font-weight: 700;}
  .product .product-bg {display: none;}
  .product .item .product-img {inset: 13rem 10% auto auto; border: 5px solid var(--color-main);}
  .product .item.right .product-img {inset: 3rem auto auto 10%;}
  .product .product-img .img::after {display: none;}
}
@media (max-width: 1024px) {
  #section02 .sec-header {padding: 10rem 0 25rem;}
  .product .sec-tit {font-size: 6rem;}
  .product .product-img {box-shadow: 1.5em 1.5em 3em var(--color-black-a4);}
  .product .item .product-img {inset: auto 5% 0 auto;}
  #section02 .right .sec-header {padding: 15rem 0 10rem;}
  .product .item.right .product-img {inset: -10rem auto auto 2%;}
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
  #section02 .sec-header {padding-bottom: 30rem;}
}
@media (max-width: 480px) {
  #section02 .right .sec-header {padding-top: 35rem;}
  .product .item.right .product-img {top: 5rem;}
}
/* MAIN-PRODUCT */
/* ===================================================== */


/* ===================================================== */
/* MAIN-CONSTRUCTION */
.construction { background: url(../images/main/construction_bg01.png) no-repeat left bottom; position: relative; }
.construction::before { content: ''; width: 87.2rem; height: 70.7rem; background: url(../images/main/construction_bg02.png); position: absolute; top: 0; right: 0; }

.construction .sec-header { padding-bottom: 0; min-height: 1px; }

/* .construction-inner { padding-left: var(--inner-padding); } */

.construction-slide { padding: 8rem 0 5rem; }
.construction-slide .img { position: relative; padding: 0 6rem; }
.construction-slide .img::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.construction-slide .tag { display: flex; align-items: center; justify-content: center; width: 14.5rem; height: 14.5rem; border-radius: 50%; position: absolute; top: 0; right: 4.5rem; transform: translateY(-50%); z-index: 1; }
.construction-slide .tag.type-1 {background: var(--color-main);}
.construction-slide .tag.type-2 {background: #175300;}
.construction-slide .tag.type-3 {background: #e79800;}
.construction-slide .tag.type-4 {background: #4e301e;}
.construction-slide .tag.type-5 {background: #009694;}
.construction-slide .tag span { display: block; text-align: center; font-size: 1.6rem; font-weight: 700; color: #fff; padding-top: 6rem; background-position: 50% top; background-repeat: no-repeat; }
.construction-slide .tag.type-1 span {background-image: url(../images/main/ico_tag01.png); background-position-y: 1rem;}
.construction-slide .tag.type-2 span {background-image: url(../images/main/ico_tag02.png); background-position-y: 0.6rem;}
.construction-slide .tag.type-3 span {background-image: url(../images/main/ico_tag03.png);}
.construction-slide .tag.type-4 span {background-image: url(../images/main/ico_tag04.png); padding-top: 5.4rem;}
.construction-slide .tag.type-5 span {background-image: url(../images/main/ico_tag05.png);}

.construction-slide .img a { display: flex; align-items: flex-end; height: 40rem; border: 10px solid rgba(255, 255, 255, 0); border-radius: 2rem; overflow: hidden; position: relative; }
.construction-slide img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto;}
.construction-slide .tit {  position: relative; z-index: 1; }
.construction-slide .tit::before { content: ''; width: 10rem; height: 100%; border-top-right-radius: 2rem; background: var(--color-main) url(../images/main/as-btn_arrow.png) no-repeat calc(100% - 2rem) center; position: absolute; top: 0; right: 0; transition: .3s ease-in-out; }
.construction-slide .tit span { display: block; padding: 2rem 3rem; background: #fff; border-top-right-radius: 2rem; font-size: 1.7rem; font-weight: 700; color: #666; position: relative; z-index: 1; }

.construction-slide.slick-current .img { padding-left: 0; }
.construction-slide.slick-current .img::after { display: none; }
.construction-slide.slick-current .img a { height: 43rem; border: 10px solid #fff; box-shadow: 1rem 1rem 3rem var(--color-black-a2); }
.construction-slide.slick-current .tit span { color: #222; font-size: 1.8rem; }
.construction-slide.slick-current .tit::before {right: -6rem;}

.construction-slick-nav { display: flex; align-items: center; width: 100%; padding-bottom: 4.5rem; }
/* .construction-num { display: flex; align-items: center; padding-left: calc(30% - 208px); } */
.construction-num-slick { font-size: 1.6rem; font-weight: 700; color: #222; letter-spacing: 0.025em; }
.construction-num-slick .num-current { color: var(--color-main); }
.construction-num .nav { font-size: 0; display: inline-block; width: 5rem; height: 5rem; background: url(../images/main/construction_arrow.png) no-repeat center; cursor: pointer; }
.construction-num .next {transform: rotate(180deg);}
.construction-num .more { background-image: url(../images/main/construction_more.png); }

.construction-dot { margin-left: 5rem; flex-grow: 1; position: relative; }
.construction-dot::before { content: ''; width: 100%; height: 2px; background: #222; position: absolute; top: 50%; left: 0; }
.construction-dot .slick-dots { display: flex; justify-items: stretch; position: relative; z-index: 1; }
.construction-dot .slick-dots li { flex-grow: 1; height: 1.5rem; border-radius: 1.5rem; font-size: 0; cursor: pointer; }
.construction-dot .slick-dots .slick-active,
.construction-dot .slick-dots li:hover { background: var(--color-main); }

@media (max-width: 1600px) {
  .construction-slide .img {padding: 0 3rem;}
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
  .construction-slide .img {padding: 0 2rem;}
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
  .construction {background-position-y: 100%;}
}
@media (max-width: 480px) {
  .construction-slick-nav {flex-wrap: wrap;}
  .construction-dot {width: 100%; margin: 3rem 0 0;}
}
/* MAIN-CONSTRUCTION */
/* ===================================================== */


/* ===================================================== */
/* MAIN-CONTACT */

#section04 { position: relative; overflow: hidden; }
#section04::before { content: ''; width: 106.6rem; height: 18.6rem; background: url(../images/main/section04_bg.png) no-repeat; position: absolute; top: 22.4rem; left: 45%; }
#section04 .sec-header {padding-bottom: 9rem; min-height: 1px;}

.contact-addr { position: absolute; top: 35rem; right: 0; color: #fff; padding: 1rem 0 0; }
.contact-addr .addr-txt { padding: 0 5rem; background-color: #222; border-radius: 20px 20px 0 0; }
.contact-addr .item { padding: 3.4rem 0 7rem; font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.contact-addr .item dt { margin-bottom: 1rem; line-height: 1.4; }
.contact-addr .item dd a { font-size: 2.7rem; color: var(--color-main); }
.contact-addr .addr { padding: 4rem 0; border-bottom: 1px solid #4e4e4e; }
.as-btn { background: var(--color-main); border-radius: 0 0 20px 20px; position: relative; }
.as-btn::after { content: ''; width: 6rem; height: 6rem; background: #222 url(../images/main/as-btn_arrow.png) no-repeat center 2rem; border-radius: 20px 0 20px 0; position: absolute; bottom: 0; right: 0; }
.as-btn a { padding: 4.4rem 5rem 7rem 15rem; font-size: 3.5rem; font-weight: 700; background: url(../images/main/ico_as-btn.png) no-repeat 5rem 4rem; }
.as-btn a span { display: block; font-size: 2.3rem; color: #000; }

#contact-map figure { height: 65rem; }

@media (max-width: 1440px) {
  #section04::before {top: 17.4rem;}
}
@media (max-width: 1280px) {
  #section04 .sec-header {padding-top: 10rem;}
  #section04::before {top: 12.4rem;}
  .contact-addr .addr-txt {padding: 0 3rem;}
  .contact-addr .item {padding: 3rem 0 4rem;}
  .contact-addr .addr {padding: 3rem 0;}
  .as-btn a {padding: 4.4rem 3rem 6rem 13rem; background-position-x: 2rem;}
}
@media (max-width: 768px) {
  .contact-addr {top: 28rem;}
}
@media (max-width: 576px) {
  #section04 .sec-header {padding-bottom: 3rem;}
  .contact-addr {position: static; margin-bottom: 1rem;}
  .contact-addr .addr-txt {display: flex;}
  .contact-addr .item {width: 50%; padding-left: 1rem;}
  .contact-addr .addr {padding: 0; margin: 3rem 0; border: 0; border-right: 1px solid #4e4e4e;}
  .as-btn a {padding: 3rem 2rem 3rem 20rem; background-size: auto 60%; background-position: calc(50% - 170px) center;}
  .as-btn a span {display: inline-block;}
}
@media (max-width: 480px) {
  .contact-addr .addr-txt {display: block;}
  .contact-addr .item {width: 100%; padding-left: 0;}
  .contact-addr .addr { margin: 0; padding: 3rem 0; border: 0; border-bottom: 1px solid #4e4e4e;}
  .as-btn a {padding: 3rem 2rem 3rem 10rem; background-size: auto 40%; background-position-x: 2rem;}
}
/* MAIN-CONTACT */
/* ===================================================== */






/* =============================전기세/온실가스 배출량 추가============================= */
/* .construction-inner {padding-left: var(--inner-padding);} */
/* .construction-num { display: flex; align-items: center; padding-left: calc(30% - 208px); } */
.construction-inner {padding-left: 710px; position: relative;}
.construction-num { display: flex; align-items: center; margin-left: 50px;}

.construction-inner .left-box {max-width: 680px; padding: 4rem 5rem; display: flex; flex-direction: column; align-items: center; text-align: center; position: absolute; bottom: 0; left: 0; background-color: #323232; color: #fff; border-radius: 0 50px 0 0;}
/* .construction-inner .left-box .name-tag {display: inline-block; background-color: #fff; border-radius: 999px; padding: 1rem 2.5rem; text-align: center;} */
/* .construction-inner .left-box .name-tag p {font-size: 1.5rem; color: #222; line-height: 1; letter-spacing: -0.02em; font-weight: 700;} */
.construction-inner .left-box .name-tag p {margin-bottom: 2rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.02em; font-weight: 700;} 
.construction-inner .left-box .name-tag p span {margin-left: 10px; display: inline-block; background-color: #fff; padding: 0.5rem 1.5rem; vertical-align: middle; border-radius: 999px; font-size: 1.8rem; color: #222; line-height: 1; letter-spacing: -0.02em; font-weight: 700;}


.construction-inner .left-box .cont-txt {width: 100%; margin: auto;}
.construction-inner .left-box .cont-txt>div {padding: 2rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; border-bottom: 1px solid #5b5b5b;}
.construction-inner .left-box .cont-txt>div>p {width: 100%; font-size: 2.4rem; letter-spacing: -0.02em; font-weight: 800; line-height: 1.2; margin-bottom: 1rem;}
.construction-inner .left-box .cont-txt .elec-item>p {color: #ffe548;}
.construction-inner .left-box .cont-txt .gas-item>p {color: #2aff43;}
.construction-inner .left-box .cont-txt>div .price p {font-size: 3rem; font-weight: 700; line-height: 1;}
.construction-inner .left-box .cont-txt>div .price p:last-child {opacity: 0.5; font-size: 1.3rem; font-weight: 300; margin-top: 0.6rem;}
.construction-inner .left-box .attachment-txt {position: absolute; bottom: 1.5rem; right: 2rem; opacity: 0.6; font-size: 1.4rem; font-weight: 400;}
.construction-inner .left-box .cont-txt>div .price p span {font-size: 1.8rem; opacity: 0.5; font-weight: 500;}




@media (max-width: 1600px) {
  .construction-inner {padding-left: 670px; position: relative;}
  .construction-inner .left-box {padding: 5.5rem 5rem;  max-width: 630px;}
  .construction-slide .img {padding: 0 2.5rem;}
}
@media (max-width: 1280px) {
  .construction-inner .left-box .ho-img img {width: 80%; margin: auto;}
  .construction-inner .left-box {padding: 5.5rem 3rem; max-width: 590px;}
  .construction-inner {padding-left: 630px; position: relative;}
}
@media (max-width: 1024px) {
  .construction-inner .left-box {position: relative; width: 80%; margin: 5rem auto; border-radius: 30px; padding: 4.5rem 5rem; }
  .construction-inner .left-box .ho-img img {width: 100%;}
  .construction-inner {padding-left: 0;}
}
@media (max-width: 768px) {
  .construction-inner .left-box .ho-img img {width: 80%; margin: auto;}
  .construction-inner .left-box {width: 90%; margin: 5rem auto; padding: 4.5rem 5rem;}
}
@media (max-width: 580px) {
  .construction-inner .left-box {width: 90%; margin: 5rem auto; padding: 5.5rem 3rem;}
  .construction-inner .left-box .cont-txt>div {flex-wrap: wrap; padding: 2rem 0; justify-content: space-around;}  
  .construction-inner .left-box .cont-txt>div>p {width: 100%; margin-bottom: 1rem; font-size: 3rem;}
  .construction-inner .left-box .cont-txt .gas-item>p br {display: none;}
  .construction-inner .left-box .arrow-item {display: block;}
  .construction-inner .left-box {width: 80%; margin: 5rem auto; padding: 4.5rem 3rem;}


}
@media (max-width: 450px) {
  .construction-inner .cont-img {margin-bottom: 2rem;}
  .construction-inner .left-box .cont-txt>div .price p:last-child {font-size: 2rem;}
  .construction-inner .left-box .cont-txt>div {flex-direction: column;}
  .construction-inner .left-box .arrow-item {transform: rotate(90deg); margin: 3rem;}
  .construction-inner .left-box .arrow-item img {width: 80%; margin: auto;}
  .construction-inner .left-box .cont-txt>div .price p {font-size: 4rem;}

}


/* ===================================================== */