@charset "utf-8";

/* common */

.tit_main{display:inline-block; opacity:0; border-bottom:3px solid; font-weight:600; font-size:62px; color:#222; letter-spacing:-0.05rem; transition:all 800ms ease; transform:translateY(50px);}

/* eco fullpage */
.fp-tableCell{display:flex;align-items: center; width:100%;height:100%; justify-content: center; vertical-align:middle;overflow: hidden;}
#fp-nav{top: 60%;}
#fp-nav.fp-left{left: 66rem;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{width: 6rem; height: 6rem; border-radius: 100%; opacity: 1;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{width: 6rem; height: 6rem; margin: 0; margin-left: -2rem; background-color: var(--c-02);}
#fp-nav ul li a.active span::before{content: ""; width: 24rem; height: 24rem; border-radius: 100%; background-color: rgba(255,255,255,0.14); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#fp-nav ul li a + span.name_navi{display: none;}
.fp-viewing-2Page #fp-nav ul li a.active span, .fp-viewing-2Page .fp-slidesNav ul li a.active span,.fp-viewing-2Page #fp-nav ul li:hover a.active span{background-color: #fff;}
.fp-viewing-3Page #fp-nav ul li a.active span, .fp-viewing-3Page .fp-slidesNav ul li a.active span,.fp-viewing-3Page #fp-nav ul li:hover a.active span,
.fp-viewing-4Page #fp-nav ul li a.active span, .fp-viewing-4Page .fp-slidesNav ul li a.active span,.fp-viewing-4Page #fp-nav ul li:hover a.active span{background-color: #242424;}
.fp-viewing-3Page #fp-nav ul li a span, .fp-viewing-3Page .fp-slidesNav ul li a span,
.fp-viewing-4Page #fp-nav ul li a span, .fp-viewing-4Page .fp-slidesNav ul li a span{background-color: #cdcdcd;}
.fp-viewing-3Page #fp-nav ul li a.active span::before,.fp-viewing-4Page #fp-nav ul li a.active span::before{background-color: rgba(205,205,205,0.14);}
.fp-viewing-4 #fp-nav{display: none;}
.fp-viewing-2Page #hd .btn_menu > span,
.fp-viewing-3Page #hd .btn_menu > span,
.fp-viewing-4Page #hd .btn_menu > span,
.fp-viewing-4 #hd .btn_menu > span{background-color: #222;}
.fp-viewing-2Page #gnb .gnb__link,
.fp-viewing-3Page #gnb .gnb__link,
.fp-viewing-4Page #gnb .gnb__link,
.fp-viewing-4 #gnb .gnb__link{color: var(--c-bd01);}

.fp-viewing-2Page .list_lang a,.fp-viewing-3Page .list_lang a,.fp-viewing-4Page .list_lang a,.fp-viewing-4 .list_lang li a{color: #333; }
.fp-viewing-2Page .list_lang li.on a,.fp-viewing-3Page .list_lang li.on a,.fp-viewing-4Page .list_lang li.on a,.fp-viewing-4 .list_lang li.on a{color: var(--c-01);}

.side{position: fixed; top: 0; right: 0; width: 109rem; height: 100vh; z-index: 2; border-left: 1px solid rgba(221,221,221,0.28);}
.side > *{position: absolute; left: 50%; transform: translateX(-50%); bottom: 50rem; display: flex; flex-direction: column; align-items: center;}
.side > * span{/* transform: rotate(180deg); */ writing-mode: tb-rl; font-size: 12rem;}
.side svg{width: 12rem;}
.side .btn-down svg{fill: #fff;}
.side .btn-down{flex-direction: column-reverse; opacity: 0.38;}
.side .btn-down span{color: #fff; margin-bottom: 28rem;}
.side .btn-down svg{transform: rotate(180deg);}
.side .btn-top{background: transparent; border:none; cursor: pointer;  z-index: 1;}
.go_inq{position: fixed; right: 148rem; bottom:45rem; width: 69rem; height: 69rem; border-radius: 100%; z-index: 100; background: rgb(152,224,95);
    background: linear-gradient(264deg, rgba(152,224,95,1) 0%, rgba(58,188,143,1) 100%); display: flex; align-items: center; justify-content: center; }
    .go_inq i{color: #fff; font-size: 16rem; /* font-family: "Font Awesome 6 Brands"; */}
    .side .btn-top svg{opacity: 0.3;}
.side .btn-top span{color: #aaa; font-family: var(--font-e); margin-top: 28rem;}
.fp-viewing-1Page .side .btn-top{display: none;}
.fp-viewing-2Page .side .btn-down,.fp-viewing-3Page .side .btn-down,.fp-viewing-4Page .side .btn-down{display: none;}
.fp-viewing-4Page .side{border-left-color: rgba(221,221,221,0.6);}
.fp-viewing-4 .side{display: none;}

/* 공통 타이틀 */
.section .title{text-align: left; }
.section .title span{width: 24px; height: 1px; background-color: #0f218b; display: block; margin-bottom: 12px;}
.section .title em{display: block; color: #0f218b; font-weight: 600; margin-bottom:36px }
.section .title h3{font-size: 80px; }
.section .title p{ color: #666; line-height: 1.77; margin-top:21px;}

/* main_visual */
#section0 .fp-tableCell{display:block}
.area_visual [data-visual="00"] .img{background-image:url(../img/main/img_mainvisual01.jpg);}
.area_visual [data-visual="01"] .img{background-image:url(../img/main/img_mainvisual02.jpg);}
.area_visual [data-visual="02"] .img{background-image:url(../img/main/img_mainvisual03.jpg);}
.visual_list li{position:relative; width:100%; height:100vh; } 
.visual_list li .img{position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; background-position:50% 50%; }
.visual_list li.swiper-slide-active .img{animation: imagescale 5s; -webkit-animation: imagescale 5s; -moz-animation: imagescale 5s; -o-webkit-animation: imagescale 5s;}

.area_visual .txt{position:absolute; top:38vh; text-align: left;}
.area_visual .txt p{line-height:1.36; font-weight:300; font-size:69rem; color:#fff;  transform: translate3d(0, 100%, 0); opacity:0}
.area_visual .txt p b{font-weight: 700;}
.area_visual .txt div{overflow:hidden;}
.area_visual .txt span{position:relative; display:block; margin-top:45rem; font-size:24rem; color:#fff; font-weight:400; transform: translate3d(0, 150%, 0); opacity:0;}
.area_visual .txt a{transform: translate3d(0, 150%, 0); opacity:0;}
.area_visual .txt > div:nth-child(2){padding: 23rem 0; box-sizing: border-box; margin-top: 68rem;}
#en .area_visual .txt p{font-size: 56rem;}

.area_visual .swiper-slide-active .txt p{transform: translate3d(0, 0%, 0); opacity: 1; transition: 1.2s .6s;}
.area_visual .swiper-slide-active .txt span{transform: translate3d(0, 0%, 0); opacity: 1; transition:0.8s 1.4s;}
.area_visual .swiper-slide-active .txt a{transform: translate3d(0, 0%, 0); opacity: 1; transition:0.8s 1.7s;}
#en .area_visual .swiper-slide-active .txt p{font-family: var(--font-e);}

.visual_control{z-index: 50; position:absolute; top:31vh; left:0; width:100%;}
.visual_control .inner{display: flex; align-items: center; position: relative;}
.visual_control [class^="swiper-button"]{width: 8rem; height: 14rem; background: url(../img/common/icon_nav_w.svg) no-repeat; cursor: pointer;}
.visual_control .swiper-button-prev{transform: rotate(180deg);}
.visual_control .swiper-pagination-custom{width: auto;}
.visual_control .swiper-button-next:after, 
.visual_control .swiper-button-prev:after{color:#fff; font-size:18rem; font-weight: bold;}
.visual_control .swiper-pagination{position:static;display: flex;align-items: center;  margin:0 32rem;}
.visual_control .swiper-pagination span{font-size:14rem; color:#fff; font-weight:bold;}
.visual_control .swiper-pagination span + span{margin-left: 132rem;}

.control-line{width: 100rem; height: 1px; background-color: rgba(255,255,255,0.25); margin: 0 40rem; position:absolute; left: 35rem;}
.control-line #bar{position: absolute; width: 0; height: 2px; background-color: #8ada6b; display: block; left: 0; top: 0; z-index: 1;}
.control-line #bar.on{width: 100%;transition: all 4s ease 0s}

@keyframes imagescale {
    0% {
      transform: scale(1.2)  rotate(.001deg);
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
    }
  
    100% {
      transform: scale(1)  rotate(.001deg);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
    }
  }

@keyframes visualAniTitle{
	0%{transform: translate3d(0, 70rem, 0);opacity: 0; visibility: hidden;}
	100%{transform: translate3d(0, 0, 0);opacity: 1;visibility: visible;}
}

/* about */
.main-about{display: flex; width: 100%;}
.main-about > div{width: 50%; height: 100vh;}
.main-about__img{ background: url(../img/main/img_main02_bg.jpg) no-repeat; background-size: cover; box-shadow: 13px 18px 98px 0px rgba(80, 90, 94, 0.43);}
.main-about__info{display: flex; align-items: center; }
.main-about__txt{text-align: left; padding-left: 90rem; box-sizing: border-box;}
.main-about__txt img{height: 168rem; display: block; position: relative; left: -167rem;}
.main-about__txt h3{font-size: 33rem; color: var(--c-bd01); font-weight: 900; line-height: 1.48; margin-top: 71rem;}
.main-about__txt p{font-size: 18rem; line-height: 1.66; margin-top: 23rem;}
.main-about__txt *{color: var(--c-bd01);}
.main-about__txt .area-button{margin-top: 40rem;}
#en .main-about__txt{width: calc(100% - 130rem);}
#en .main-about__txt p{word-break: keep-all;}

/* product */
#section2{padding-top: 109rem;box-sizing: border-box; overflow: hidden; position: relative;}
/* .area_product .inner{position: relative;} */
.area_product > div{display: flex;align-items: center; position: inherit;}
.area_product .bg{position: absolute;display: block;z-index: 0;left: calc(50% - 215rem);/* margin-left: 36rem; */top: 167rem}
.area_product .bg img{display: block;}
.area_product .txt{width:592rem; position: relative; z-index: 2;}
.area_product .tit *{text-align: left;}
.area_product .tit h3, #section3 h3{font-size: 65rem; font-weight: bold; line-height: 1; font-family: var(--font-e);}
.area_product .tit p{font-size: 18rem; line-height: 1.66; margin-top: 25rem;}
.area_product .area-button{margin-top: 42rem;}
.area_product .swiper-slide{width:317rem; /*  box-shadow: 19rem 26px 57px 0px rgba(20, 20, 20, 1); */}
.area_product .swiper-slide:nth-child(odd){padding-top: 63rem;}
.area_product .swiper-slide .img img{width:100%;}
.area_product .swiper-slide:hover .text:before{opacity:1; transition:0.5s}
.area_product .swiper-slide:hover .img{box-shadow: 11rem 22rem 23rem rgb(0 0 0 / 7%);}
.area_product .swiper-slide strong{display: block; font-size: 22rem; font-weight: 700; color: var(--c-bd01); margin-top: 15rem; text-align: left;}

.area_product .list_product { position: absolute; top: 55%; width: calc(100% - 847rem); right: 0; z-index: 2; transform: translateY(-50%);}
.area_product .swiper-button-box{display: flex;align-items: center;position: relative; margin-top: 112rem;}
.area_product .swiper-button-box div[class*="swiper-button"]{width:47rem;height:15rem;display: flex; align-items: center; position: relative; cursor: pointer;  }
.area_product .swiper-button-box div[class*="swiper-button"] img{width: 19rem; vertical-align: middle;  transform: opacity 0.3s;}
.area_product .swiper-button-box div[class*="swiper-button"]:hover img{opacity: 0.6;}
div[class*="swiper-button"] +  div[class*="swiper-button"]::before{content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16rem; background-color: #222; opacity: 0.24;}
.area_product .swiper-button-box .swiper-button-prev img{transform: rotate(180deg);}
.area_product .swiper-button-box .swiper-button-next{justify-content: right;}

.area_product .round .pot_01{animation-delay:calc(-0*var(--d)/var(--n));}
.area_product .round .pot_02{animation-delay:calc(-1*var(--d)/var(--n));}
.area_product .round .pot_03{animation-delay:calc(-2*var(--d)/var(--n));}
.area_product .round .pot_04{animation-delay:calc(-3*var(--d)/var(--n));}
.area_product .round .pot_05{animation-delay:calc(-4*var(--d)/var(--n));}
.area_product .round .pot_06{animation-delay:calc(-5*var(--d)/var(--n));}
.area_product .round .pot_07{animation-delay:calc(-6*var(--d)/var(--n));}
.area_product .round .pot_08{animation-delay:calc(-7*var(--d)/var(--n));}

.area_product .round.left{width: 713rem; height: 713rem; border-radius: 100%; --n:3; --d:100s; display:grid; grid-template-columns:14rem;grid-template-rows:14rem;place-content: center; box-sizing: border-box; border:1px dashed #ddd;  position: absolute; top: 50%; transform: translateY(-50%); left: -505rem}
.area_product .round.left [class^="pot_"]{/* position: absolute; */ display: block; width: 14rem; height: 14rem; border-radius: 20rem; background-color: var(--c-01); grid-area:1/1;text-align: center; animation: spin2 var(--d) linear infinite; transform:rotate(0) translate(356rem) rotate(0); }
.area_product .round.right{width: 940rem; height: 940rem; border-radius: 100%; --n:5; --d:100s; display:grid; grid-template-columns:14rem;grid-template-rows:14rem;place-content: center; box-sizing: border-box; border:1px dashed #ddd;  position: absolute; right: -374rem; bottom: -464rem;}
.area_product .round.right [class^="pot_"]{/* position: absolute; */ display: block; width: 14rem; height: 14rem; border-radius: 20rem; background-color: var(--c-01); grid-area:1/1;text-align: center; animation: spin var(--d) linear infinite; transform:rotate(0) translate(470rem) rotate(0); }

@keyframes spin {
    100% {
      transform:rotate(1turn) translate(470rem) rotate(-1turn) ;
    }
}
@keyframes spin2 {
    100% {
      transform:rotate(1turn) translate(356rem) rotate(-1turn) ;
    }
}

/* news */
#section3{text-align: left; background-color: #f5f5f5;}
.main-news{margin-top: 34rem;display: flex;overflow: hidden;position: relative;}
.main-news__list{width: 50%; padding-right:46rem;box-sizing:border-box;}
.main-news__list li + li{margin-top: 20rem;}
.main-news__list a{display: block; background-color: #fff; padding: 33rem 40rem; position: relative; box-sizing: border-box; transition: all .3s;}
.main-news__list a:hover{box-shadow: 18px 26px 27px 0px rgba(144, 144, 144, 0.2); z-index: 2;}
.main-news__list a span{color: var(--c-02); font-family: var(--font-e); font-size: 16rem; font-weight: bold;}
.main-news__list a .conts{display: flex; justify-content: space-between; margin-top: 19rem;}
.main-news__list a .conts > div{width: calc(100% - 140rem); font-size: 18rem; color: var(--c-bd); font-size: 18rem;}
.main-news__list a i{width: 140rem; text-align: right; font-style: normal; font-size: 16rem; color: #ddd;}
.main-news__inq{width: 50%;height: 436rem; background: url(../img/main/img_main03_bg.jpg);background-size: cover;padding:70rem 60rem;box-sizing: border-box;position: relative;right: 0;background-size: cover;background-position: 50% 100%;}
.main-news__inq p{font-size: 33rem; font-weight: 300;  line-height: 1.484; color: #fff;}
.main-news__inq p b{font-weight: 800;}
.main-news__inq .more_btn{display: block; margin-top: 47rem; position: relative;;}
#en .main-news__inq p{font-size: 28rem; word-break: keep-all; line-height: 1.5;}
#en .main-news__inq p span{display: block; font-size: 25rem;}

@media (min-width:2000px){
	
    
}

@media (max-width:1480px){
	.side{width: 86rem;}
    .visual_control{padding-left: 66rem; box-sizing: border-box;}
    .area_visual .txt{left: 100rem;}
    .area_visual .txt p{font-size: 59rem;}
    #fp-nav.fp-left{left: 32rem;}
    .control-line{left: 75rem;}

    .main-about > .main-about__img{width: 46%;}
    .main-about > .main-about__info{width: 54%;}
    .main-about__txt{padding-left: 60rem;}
    .main-about__txt img{height: 120rem; left: 0;}

    .area_product .tit h3, #section3 h3{font-size: 56rem;}
    #section2 .fp-tableCell{justify-content: left;}
    .area_product{width: 100%;}
    .area_product .list_product{width: calc(100% - 607rem);}
    .area_product .swiper-slide{width: 250rem;}
    .area_product .bg img{width: 290rem;}
    .area_product .txt{width: 400rem; left: 60rem;}
    .area_product .bg{top: 20%;}
}

@media (max-width:1023px){

    .side{display: none;}
    .go_inq{right: 28rem; width: 52rem; height: 52rem;}
    .visual_control{padding-left: 80rem;}
    .area_visual .txt{left: 80rem;}
    .area_visual .txt p{font-size: 42rem;}
    .visual_control{padding-left: 60rem;}
    .control-line{left: 64rem;}

    .main-about > .main-about__img{width: 30%;}
    .main-about > .main-about__info{width: 70%;}
    .main-about__txt img{height: 90rem;}
    .main-about__txt h3{font-size: 28rem; margin-top: 32rem;}
    .main-about__txt p{font-size: 16rem;}

    .area_product .tit h3, #section3 h3{font-size: 44rem;}
    #section3,#section2{height: auto!important; padding: 100rem 0;}
    #section3 .fp-tableCell,#section2 .fp-tableCell{height: auto!important;}
    .main-news__list{padding-right: 26rem;}
    .main-news__list a{padding: 23rem 26rem;}
    .main-news__inq{padding: 40rem 30rem;}

    #section2{overflow: hidden;}
    #section2 .fp-tableCell{overflow: visible;}
    .area_product .txt{left: 24rem;}
    .area_product .list_product{width: calc(100% - 487rem);}
    .area_product .swiper-slide{width: 210rem;}
    .area_product .swiper-slide strong{font-size: 16rem;}
    .area_product .bg{top: 10%; left: 35%;}
    .area_product .bg img{width: 210rem;}
    .area_product .swiper-button-box{margin-top: 62rem;}
    .area_product .round.left{width: 400rem; height: 400rem; border-radius: 100%; --n:3; --d:100s; display:grid; grid-template-columns:14rem;grid-template-rows:14rem;place-content: center; box-sizing: border-box; border:1px dashed #ddd;  position: absolute; top: 50%; transform: translateY(-50%); left: -255rem}
    .area_product .round.left [class^="pot_"]{/* position: absolute; */ display: block; width: 14rem; height: 14rem; border-radius: 20rem; background-color: var(--c-01); grid-area:1/1;text-align: center; animation: spin2 var(--d) linear infinite; transform:rotate(0) translate(200rem) rotate(0); }
   

    @keyframes spin2 {
        100% {
          transform:rotate(1turn) translate(200rem) rotate(-1turn) ;
        }
    }

}
@media (max-width:860px){
    .fp-tableCell,.section{display: block; height: auto !important;}
    .visual_control{padding-left: 40rem;}
    .control-line{width: 90rem; left: 55rem;}

    .area_visual .txt{left: 60rem;}
    .area_visual .txt p{font-size: 42rem;}

    .main-about{flex-direction: column-reverse;}
    .main-about > .main-about__img,
    .main-about > .main-about__info{width: 100%;}
    .main-about > .main-about__img{height: 340rem;}
    .main-about > .main-about__info{height: auto; padding: 20rem 0 60rem;}

    .main-about__txt{padding-left: 40rem;}
    #section3{padding: 74rem 0;}
    .main-news{flex-wrap: wrap;}
    .main-news__list{padding-right: 0;}
    .main-news__list,.main-news__inq{width: 100%;}
    .main-news__inq{position: relative; margin-top: 40rem; height: 326rem; }
    .main-news__inq p{font-size: 22rem;}
    .main-news__list a .conts{margin-top: 9rem;}

    .area_product .txt{width: 280rem; left: 20rem;}
    .area_product .tit p{font-size: 16rem;}
    .area_product .tit p br{display: none;}
    .area_product .list_product{width:calc(100% - 357rem) ;}
    .area_product .round.right{width:560rem; height:560rem; border-radius: 100%; --n:5; --d:100s; display:grid; grid-template-columns:14rem;grid-template-rows:14rem;place-content: center; box-sizing: border-box; border:1px dashed #ddd;  position: absolute; right: -124rem; bottom: -304rem;}
    .area_product .round.right [class^="pot_"]{/* position: absolute; */ display: block; width: 14rem; height: 14rem; border-radius: 20rem; background-color: var(--c-01); grid-area:1/1;text-align: center; animation: spin var(--d) linear infinite; transform:rotate(0) translate(280rem) rotate(0); }
    
    @keyframes spin {
        100% {
          transform:rotate(1turn) translate(280rem) rotate(-1turn) ;
        }
    }

}
@media (max-width:540px) {
    .control-line{left: 34rem;}
    .visual_control{padding-left: 0;}
    .visual_control{top: 39vh;}
    .visual_control .swiper-pagination{margin: 0 14rem;}
    .visual_control .swiper-pagination span{font-size: 12rem}
    .visual_control .swiper-pagination span + span{margin-left: 108rem;}
    .area_visual .txt{width: 100%; left: 0; top: 46vh; padding-left: 24rem;}
    .area_visual .txt p{font-size: 25rem; line-height: 1.5;}
    .control-line{width: 64rem;}
    .visual_control [class^="swiper-button"]{width: 7rem; height: 12rem;}

    .main-about__txt img{height: 46rem;}
    .main-about__txt h3{font-size: 22rem;}
    .main-about__txt p{font-size: 15rem; margin-top: 10rem;}
    .main-about__txt p br{display: none;}
    .main-about__txt{padding-left: 16rem; padding-right: 16rem;}
    .main-about > .main-about__info{padding: 40rem 0;}

    .area_product .tit h3, #section3 h3{font-size: 32rem;}
    #section2,#section3{padding: 40rem 0;}
    .area_product .txt{left: 0; width: 100%;}
    .area_product .tit p{font-size: 15rem; margin-top: 15rem;}
    
    .area_product > div{flex-wrap: wrap;}
    .area_product .round{display: none !important;}
    .area_product .bg img{width: 180rem;}
    .area_product .bg{ left: inherit; top: 30%; right: 0; }
    .area_product .list_product{width: 100%; left: 0; position: relative; transform: none; top: 0;}
    .area_product .swiper-slide{width: 182rem;}
    .area_product .swiper-slide:nth-child(odd){padding-top: 0;}
    .area_product .swiper-button-box{margin-top: 42rem;}
    .area_product .list_product{margin-top: 32rem;}
    .area_product .area-button{margin-top: 28rem;}

    .main-news__list li + li{margin-top: 10rem;}
    .main-news__list a{padding: 20rem 18rem;}
    .main-news__list a .conts{flex-wrap: wrap;}
    .main-news__list a .conts > div,.main-news__list a i{width: 100%;}
    .main-news__list a i{margin-top: 14rem;}
    .main-news__list a span,.main-news__list a i{font-size: 14rem;}
    .main-news__list a .conts > div{font-size: 16rem;}
    .main-news__inq{padding: 20rem; height: 200rem;}
    .main-news__inq p{font-size: 18rem;}
    .main-news__inq .more_btn{margin-top: 40rem;}

    .go_inq{right: 16rem; bottom: 30rem; width: 40rem; height: 40rem;}
    .go_inq i{font-size: 12rem;}

}