@charset "utf-8";

.pop {font-family: 'Poppins';}
.mo {display: none;}

@keyframes text-top {
    0% {
        transform: translateY(70px); opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes text-bottom {
    0% {
        transform: translateY(-70px); opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes text-right {
    0% {
        transform: translateX(-50px); opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes text-left {
    0% {
        transform: translateX(50px); opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}


/* fullpage nav */
#fp-nav {position: fixed; top: 50%; left: 62px; transform: translateY(-50%); margin-top: 0 !important;}
#fp-nav li ~ li {margin-top: 48px;} 
#fp-nav li a {position: relative; display: block; width: 6px; height: 6px; background: #d4d4d4; transition: all .3s linear; border-radius: 50%;}
#fp-nav li a::before {position: absolute; content: ''; width: 28px; height: 28px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; border: 1px solid #fff; opacity: 0; transition: all .3s linear;}
.fp-viewing-SECTION2 #fp-nav li a, .fp-viewing-CONSTRUCTION #fp-nav li a {background-color: #bbb;}
.fp-viewing-ABOUT #fp-nav li a, .fp-viewing-INQUIRY #fp-nav li a  {background-color: #fff;}
.fp-viewing-SECTION2 #fp-nav li a.active, .fp-viewing-PRODUCT #fp-nav li a.active {background-color: #7fb09b;}
.fp-viewing-SECTION2 #fp-nav li a.active::before, .fp-viewing-PRODUCT #fp-nav li a.active::before {border-color: #7fb09b;}
.fp-viewing-CONSTRUCTION #fp-nav li a.active, .fp-viewing-ABOUT #fp-nav li a.active {background-color: #bfa384;}
.fp-viewing-CONSTRUCTION #fp-nav li a.active::before, .fp-viewing-ABOUT #fp-nav li a.active::before {border-color: #bfa384;}
#fp-nav li a.active {background: #fff; }
#fp-nav li a.active::before {opacity: 1;}
#fp-nav li:last-child {display: none;}

.fp-viewing-FOOTER #fp-nav {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 970px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 345px; left: 15px; font-size: 24px; line-height: 1.5; color: #fff; font-weight: 600; width: 100%; opacity: 0; transition: all 1.2s ease .1s; font-family: 'Poppins';text-shadow: 0px 0px 10px rgba(20, 20, 20, 0.3);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h2 {position: absolute; top: 420px; left: 15px; font-size: 60px; line-height: 1.267; color: #fff; font-weight: 400;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; text-shadow: 0px 0px 10px rgba(20, 20, 20, 0.3); font-family: 'Happiness-Sans';}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 385px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h2 {top: 460px; opacity: 1;}

.controls {position: absolute; z-index: 2; width: 100%; max-width: 1470px; margin: 0 auto; left: 50%; bottom: 80px; transform: translateX(-50%); padding: 0 15px;}
.visual-pagination {width: 330px !important; display: flex;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; display: block; width: 33.3333%; height: 3px; opacity: 1; margin: 0; border-radius: 0; background-color: rgba(255,255,255, .3);}
.controls .swiper-pagination-bullet::before {position: absolute; top: -35px; width: 100%; left: 12px; color: #fff; font-size: 16px; font-family: 'Poppins'; font-weight: 400; padding-bottom: 25px;}
.controls .swiper-pagination-bullet:nth-of-type(1)::before {content: '01';}
.controls .swiper-pagination-bullet:nth-of-type(2)::before {content: '02';}
.controls .swiper-pagination-bullet:nth-of-type(3)::before {content: '03';}
.controls .swiper-pagination-bullet::after {position: absolute; content: ''; width: 100%; height: 3px; bottom: 0; left: 0;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {background-color: #fff; animation: bar 6.2s ease-out;}

@keyframes bar {
  0% {width: 0%;}
  100% {width: 100%;}
}

.scroll {position: absolute; display: block; z-index: 1; bottom: 80px; right: 80px; width: 113px; height: 113px; background: url(../images/main/ico_scroll.png) 50% 50% no-repeat;background-size: auto; cursor: default;}
.scroll::after {position: absolute; content: ''; width: 100%; height: 100%; background: url(../images/main/ico_scroll_txt.png) 50% 50% no-repeat; background-size: auto; top: 0; left: 0; animation: scroll 15s linear infinite}

@keyframes scroll {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* 공통 */
.section-header span {display: block; font-family: 'Poppins'; font-size: 18px; font-weight: 700; color: #bfa384;}
.section-header h3 {font-size: 52px; font-weight: 600; color: #111; margin-top: 30px;}
.section-header p {font-size: 22px; color: #333; line-height: 1.727; margin-top: 30px;}

.section-header.ty2 span {color: #006137;}

/* sec2 */
.sec2 .inner {width: 100%; height: 100%; display: flex;}
.sec2 .inner .item {position: relative; width: 33.3333%; height: 100%; background: url() 50% 50% no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; z-index: 0;}
.sec2 .inner .item::after {position: absolute; content:''; width: 100%; height: 100%; background-color: rgba(0,0,0, .1); top: 0; left: 0; z-index: -1; transition: all .2s linear;}
.sec2 .inner .item:nth-of-type(1) {background-image: url(../images/main/img_sec201.jpg);}
.sec2 .inner .item:nth-of-type(2) {background-image: url(../images/main/img_sec202.jpg);}
.sec2 .inner .item:nth-of-type(3) {background-image: url(../images/main/img_sec203.jpg);}
.sec2 .inner .item::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,97,55, .8); backdrop-filter: blur(5px); z-index: -1; opacity: 0; transition: all .3s linear;}
.sec2 .inner .item * {position: relative; z-index: 2;}
.sec2 .inner .item h5 {font-size: 45px; font-weight: 600; color: #fff; text-align: center;}
.sec2 .inner .item p {font-size: 22px; font-weight: 400; color: #fff; line-height: 1.727; margin-top: 50px; text-align: center;}
.sec2 .inner .item span {display: block; max-width: 80px; width: 100%; margin: 0 auto; border-radius: 50%; opacity: 0; transition: all .2s linear; height: 0;}
.sec2 .inner .item:hover::before {opacity: 1;}
.sec2 .inner .item:hover span {height: 80px; opacity: 1; margin-top: 60px;}

.sec2 .inner:hover .item::after {background-color:rgba(0,0,0, .3);}

.sec2.on .inner .item:nth-of-type(1) h5 {animation: text-top 1.2s both .3s;}
.sec2.on .inner .item:nth-of-type(1) p {animation: text-top 1.2s both .3s;}
.sec2.on .inner .item:nth-of-type(2) h5 {animation: text-top 1.2s both .6s;}
.sec2.on .inner .item:nth-of-type(2) p {animation: text-top 1.2s both .6s;}
.sec2.on .inner .item:nth-of-type(3) h5 {animation: text-top 1.2s both .9s;}
.sec2.on .inner .item:nth-of-type(3) p {animation: text-top 1.2s both .9s;}


/* sec3 */
.sec3 {background-color: #fcf7f2;}
.sec3 .section-header {position: relative;}
.sec3 .cases {width: 100%; margin-top: 60px;}
.sec3 .cases a {display: block; width: 100%; }
.sec3 .cases a .img-box {position: relative; width: 100%;}
.sec3 .cases a .img-box::after {position: absolute; content: ''; width: 1px; height: calc(100% - 20px); top: 50%; right: -31px; transform: translateY(-50%); background-color: #e3d7cc;}
.sec3 .cases a .img-box .pic {position: relative; height: 0; /* padding-bottom: 77.27%; */padding-bottom: 73.17%; overflow: hidden; border-radius: 20px;}
.sec3 .cases a .img-box .pic::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/img_sec301_over.jpg) 50% 50% no-repeat; background-size: cover; border-radius: 20px; opacity: 0; transition: all .3s linear;}
.sec3 .cases a .img-box .pic img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; height: 100% !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.sec3 .cases a .txt {margin-top: 40px;}
.sec3 .cases a .txt h5 {font-size: 23px; font-weight: 600; color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all .2s linear;}
.sec3 .cases a .txt .date {display: block; font-size: 16px; color: #9a9a98; font-weight: 400; margin-top: 30px; padding-left: 20px; background: url(../images/main/ico_date.png) 0% 50% no-repeat; background-size: auto; margin-top: 30px;}
.sec3 .cases a:hover .img-box .pic::after {opacity: 1;}
.sec3 .cases a:hover .txt h5 {color: #bfa384;}

.control-btns {position: absolute; width: 210px; display: flex; gap: 20px; bottom: -20px; right: 0; z-index: 2;}
.control-btns .btns {width: 130px; display: flex; gap: 10px;}
.control-btns .btns .case-btn {width: 60px; height: 60px; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; background-color: #fff; cursor: pointer; transition: all .2s linear;}
.control-btns .btns .case-prev {background-image: url(../images/main/ico_prev.png);}
.control-btns .btns .case-next {background-image: url(../images/main/ico_next.png);}
.control-btns .btns .case-btn:hover {background-color: #bfa384;}
.control-btns .btns .case-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.control-btns .btns .case-next:hover {background-image: url(../images/main/ico_next_on.png);}
.control-btns .more {display: block; width: 60px; height: 60px; border-radius: 50%; background: url(../images/main/ico_plus2.png) 50% 50% no-repeat; background-size: auto; background-color: #bfa384; transition: all .2s linear;}
.control-btns .more:hover {transform: rotate(180deg);}

.sec3.on .section-header span {animation: text-top 1.2s both .3s;}
.sec3.on .section-header h3 {animation: text-top 1.2s both .6s;}
.sec3.on .control-btns {animation: text-top 1.2s both .6s;}
.sec3.on .cases {animation: text-top 1.2s both .9s;}


/* sec4 */
.sec4 .section-header {position: relative;}
.sec4 .product {padding: 60px 30px 30px; width: calc(100% + 60px); margin: 0 -30px;}
.sec4 .product a {display: block; width: 100%; padding: 25px 25px 40px; border-radius: 20px; overflow: hidden; background-color: #f8f8f8; border: 1px solid #f8f8f8; transition: all .3s linear; min-height: 510px;}
.sec4 .product a .img-box {width: 100%;}
.sec4 .product a .img-box .pic {position: relative; height: 0; padding-bottom: 60.98%; overflow: hidden; border-radius: 20px;}
.sec4 .product a .img-box .pic img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; height: 100% !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.sec4 .product a .txt {width: 100%; margin-top: 30px; padding: 0 10px;}
.sec4 .product a .txt h5 {font-size: 26px; font-weight: 600; color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all .3s linear;}
.sec4 .product a .txt p {font-size: 18px; color: #666; line-height: 1.556; margin-top: 20px; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all; height: 56px;}
.sec4 .product a .txt .hashtag {margin-top: 30px; display: flex; gap: 5px; flex-wrap: wrap;}
.sec4 .product a .txt .hashtag span {display: inline-block; padding: 0 10px; line-height: 30px; border: 1px solid #7fb09b; border-radius: 30px; font-size: 14px; color: #7fb09b; transition: all .3s linear; background-color: #fff;}
.sec4 .product a:hover {background-color: #fff; border-color: #006137; box-shadow: 0px 10px 25px 0px rgba(159, 159, 159, 0.2);}
.sec4 .product a:hover .txt h5 {color: #006137;}
.sec4 .product a:hover .txt span {border-color: #006137; color: #006137;}

.control-btns .btns .product-btn {width: 60px; height: 60px; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; background-color: #fff; cursor: pointer; transition: all .2s linear; border:1px solid #ddd;}
.control-btns .btns .product-prev {background-image: url(../images/main/ico_prev.png);}
.control-btns .btns .product-next {background-image: url(../images/main/ico_next.png);}
.control-btns .btns .product-btn:hover {background-color: #006137; border-color: #006137;}
.control-btns .btns .product-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.control-btns .btns .product-next:hover {background-image: url(../images/main/ico_next_on.png);}
.sec4 .control-btns .more {background-color: #006137;}

.sec4.on .section-header span {animation: text-top 1.2s both .3s;}
.sec4.on .section-header h3 {animation: text-top 1.2s both .6s;}
.sec4.on .control-btns {animation: text-top 1.2s both .6s;}
.sec4.on .product {animation: text-top 1.2s both .9s;}

/* sec5 */
.sec5 {transition: all .5s linear;}
.sec5.sec501 {width: 100%; background: url(../images/main/bg_sec501.jpg) 50% 50% no-repeat; background-size: cover; position: relative;}
.sec5.sec502 {width: 100%; background: url(../images/main/bg_sec502.jpg) 50% 50% no-repeat; background-size: cover; position: relative;}
.sec5 .container {height: 100%; padding-top: 220px;}
.sec5 .section-header h3 { font-family: 'Poppins'; margin-top: 20px;}
.sec5 .tab {position: absolute; width: 100%; max-width: 720px; height: 100%; top: 0; right: 0;}
.sec5 .tab > a {position: relative; display: block; width: 100%; height: 50%; background-color: rgba(191, 163, 132, .1); backdrop-filter: blur(7px); padding: 80px; transition: all .3s linear;}
.sec5 .tab > a::after {position: absolute; content: ''; width: 60px; height: 60px; border-radius: 50%; bottom: 80px; right: 80px; background:url(../images/main/ico_plus.png) 50% 50% no-repeat; background-size: auto;}
.sec5 .tab > a .ico {max-width: 74px; width: 100%;}
.sec5 .tab > a .ico img {max-width: 100%; display: block; margin: 0 auto;}
.sec5 .tab > a h4 {font-size: 40px; font-weight: 600; color: #fff; margin-top: 40px;}

.sec5 .tab > a.on {background-color:  rgba(191, 163, 132, .9); backdrop-filter: blur(0);}
.sec5 .tab > a.on::after {background-image: url(../images/main/ico_plus3.png);}

.sec5.on .section-header {animation: text-right 1.2s both .3s;}
.sec5.on .tab > a.intro {animation: text-right 1.2s both .6s;}
.sec5.on .tab > a.service {animation: text-right 1.2s both .9s;}


/* sec6 */
.sec6 {width: 100%; background: url(../images/main/bg_sec6.jpg) 50% 50% no-repeat; background-size: cover;}
.sec6 .container {padding-top: 220px; height: 100%;}
.sec6 .container .more2 {position: relative; display: block; margin: 60px 0 0 auto; width: 280px; height: 280px; border-radius: 50%; background: url(../images/main/ico_plus2.png) 50% 50% no-repeat; background-size: auto; background-color: #006137;}
.sec6 .container .more2::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/more_txt.png) 50% 50% no-repeat; background-size: auto; z-index: 2; animation: scroll 15s linear infinite}

.sec6.on .section-header span {animation: text-right 1.2s both .3s;}
.sec6.on .section-header h3 {animation: text-right 1.2s both .6s;}
.sec6.on .section-header p {animation: text-right 1.2s both .9s;}
.sec6.on .container .more2 {animation: text-right 1.2s both 1.1s;}