@charset "utf-8";



/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 공통 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.mo{
    display:none;
}

.wrap{
    padding-top:80px;
    overflow:hidden;
}

.title-section{
    width:100%;
    height:400px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.title-section h2{
    font-size:3rem;
    font-weight:700;
    color:#fff;
    z-index:112;
}

section .left-section div h1{
    font-size: 5rem;
    line-height:1.3;
}


/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 회사 소개 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.about-wrap .title-section div{
    position: absolute;
    width:100%;
    height:inherit;
    background:url(../img/sub/about-bg.png) center center no-repeat;
    animation: titleZoom 1s;
    animation-fill-mode: forwards;
}

@keyframes titleZoom {
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.05);
    }
}

.about-wrap section .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-wrap .section01 { 
    width: 100%; 
    height: 100%;
    padding: 14rem 0;
}

.about-wrap .left-section div{
   font-size: 5rem;
   line-height:1.3;
}

.about-wrap .left-section .green{
   color:var(--secondary);
   position:relative;
   display:inline-block;
   font-size:5.25rem;
   font-weight:800;
}

/* .about-wrap .left-section .green:after{
   content:"";
   width:100%;
   height:6px;
   background: var(--secondary);
   position:absolute;
   bottom:-2px;
   left:0;
} */

.about-wrap .section01 .left-section img{
   width:290px;
   margin-bottom:3rem;
}

.about-wrap .section01 .right-section p{
   font-size: 2rem;
   margin-left:8px;
   font-weight:600;
   margin-bottom:3rem;
   line-height:1.5;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
}

.about-wrap .section01-slide {
   width: 850px;
   height: 100%;
   margin-bottom:3rem;
 }

.about-wrap .section01 .section01-slide .swiper-slide img{
   width:100%;
   object-fit: cover;
}

.section01 .section01-slide .swiper-slide p{
    position:absolute;
    top:56px;
    left:64px;
    font-weight:600;
    color:#fff;
    line-height:1.5;
}

.about-wrap .section01 .right-section .light{
   font-weight:300;
}

.about-wrap .section02{
    padding-bottom:14rem;
}

.about-wrap .section02 .right-section{
   width:56%;
   /* min-width:60%; */
}

.about-wrap .section02 .right-section .sec02-boxWrap{
   width: 100%;
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   max-width:100%;
}

.about-wrap .section02 .right-section .sec02-box{
   width:calc( 100% / 3 - 1rem);
   height: 320px;
   position:relative;
   overflow: hidden;
   border-radius:10px;
}

.about-wrap .section02 .right-section .sec02-box img{
   position:absolute;
   top:0;
   width:100%;
   height:100%;
   object-fit: cover;
   transition: all .3s ease;
}

.about-wrap .section02 .right-section .sec02-box h3{
   position:absolute;
   top:1.5rem;
   left:1.5rem;
   z-index:333;
   font-size:1.5rem;
   color:#fff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.about-wrap .section02 .right-section .sec02-box .back{
   width:100%;
   height:100%;
   position:absolute;
   bottom:-100%;
   background-color: rgba(0,0,0,0.5);
   z-index:33;
   display:flex;
   align-items: flex-end;
   border-radius:10px;
   transition: all .3s ease;
}

.about-wrap .section02 .right-section .sec02-box .back p{
   font-size:0.875rem;
   color:#fff;
   padding: 1rem;
   letter-spacing:0;
   line-height:1.5;
}

.about-wrap .section02 .right-section .sec02-box:hover .back{
   bottom:0;
}

.about-wrap .section02 .right-section .sec02-box:hover img{
   transform: scale(1.04);
}

/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 언론보도 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.news-wrap .title-section div{
    position: absolute;
    width:100%;
    height: inherit;
    background: url(../img/sub/news-bg.png) center bottom no-repeat;
    
    animation: titleZoom 1s;
    animation-fill-mode: forwards;
}

@keyframes titleZoom {
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.05);
    }
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 제품 소개 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.product-wrap .title-section div{
    background:url(../img/sub/product-bg.png) center bottom no-repeat;
    position: absolute;
    width:100%;
    height:inherit;
    animation: titleZoom 1s;
    animation-fill-mode: forwards;
}

.product-wrap section .container{
    display: flex;
    align-items: center;
}

.product-wrap .netoSection-wrap{
    padding: 14rem 0;
}

.product-wrap .netoSection:not(.section03){
    margin-bottom:10rem;
}

.product-wrap .container{
    gap:0 7rem;
    justify-content: flex-start;
}

.product-wrap .section01{
    justify-content: space-between;
}

.product-wrap .left-section img{
    max-width:850px;
}

.product-wrap .right-section p{
    font-size:1.875rem;
    font-weight:400;
    color:var(--gray500);
    line-height:1.5;
}

.product-wrap .right-section .title{
    font-weight:700;
    font-size:2.25rem;
    margin-bottom:2rem;
}

.product-wrap .right-section > p span{
    font-weight:600;
}

.product-wrap .right-section .btn-wrap{
    margin-top:3.75rem;
    display: flex;
    gap:0.5rem;
}

.product-wrap .right-section .btn-wrap button:hover a{
    color: var(--black500);
}

.product-wrap .line{
    width:100%;
    height:30px;
    background: var(--gray50);
}

.video-wrap{
    padding:10rem 0;
}

.video-wrap h4{
    font-size: 2.25rem;
    margin-bottom:5rem;
}

.video-wrap .container{
    flex-direction: column;
    align-items: center;
}

.video-wrap .youtube-wrap{
    width:100%;
    display: flex;
    justify-content: space-between;
    gap:2rem 1rem;
}

.video-wrap .youtube-wrap div{
    position: relative;
    padding-bottom: 20%;
    overflow: hidden;
    width:100%;
}

.video-wrap .youtube-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius:10px;
}

.solution-wrap{
    padding:10rem 0;
}

.solution-wrap .container{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}

.solution-wrap h4{
    font-size: 3rem;
    margin-bottom:5rem;
}

.solution-wrap .solutionBox-wrap{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:2rem 1rem;
    margin-bottom:9rem;
}

.solutionBox-wrap .solutionBox{
    width: calc(100% / 3);
    height:180px;
    padding: 2rem;
    border-radius:10px;
    background: var(--gray50);
    border:1px solid var(--gray500);
    display: flex;
    align-items: center;
    gap:1rem 3rem;
}

.solutionBox .txt-wrap .title{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:1rem;
}

.solutionBox .txt-wrap p{
    font-size:1.125rem;
    letter-spacing:0;
    color: var(--gray400);
    word-break: keep-all;
}

.solution-wrap .btn-wrap{
    display:flex;
    gap:1rem;
}

.solution-wrap .btn-wrap button{
    background-color: transparent;
    border: 1px solid var(--black500);
}

.solution-wrap .btn-wrap button a{
    color: var(--black500);
}



/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 수익 프로젝션 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.profit-wrap{
    background: var(--gray50);
}

.profit-wrap .title-section div{
    background:url(../img/sub/projection-bg.png) center bottom no-repeat;
    position: absolute;
    width:100%;
    height:inherit;
    animation: titleZoom 1s;
    animation-fill-mode: forwards;
}

.profit-wrap .container{
    padding: 10rem 1rem;
    max-width:1320px;
}

.form-wrap{
    padding:9rem 5rem;
    margin:0 auto;
    background-color: #fff;
    border-radius:20px;
    box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.06);
    margin-bottom:3rem;
}

.form-wrap > div{
    position: relative;
}

.form-wrap label{
    letter-spacing: 0;
}

.form-wrap .label-wrap{
    display: flex;
    align-items: center;
    gap:0 4px;
}

.form-wrap .projection-form h4{
    display:flex;
    align-items: center;
    gap:0.5rem;
    font-size:1.5rem;
    margin-bottom:2rem;
}

input{
    font-size:1rem;
    font-family:"Pretendard",Sans-serif;
}

input::placeholder{
    color: #d9d9d9;
}

input[type="checkbox"], input[type="radio"] {
    display: none;
}

input[type="text"],input[type="password"]{
    min-width:300px;
    width:fit-content;
    border:0;
    border-bottom:1px solid var(--gray200);
    padding:1rem 0.5rem;
}

input[type="text"]:focus {
    transition: all .2s ease;
   border-color: var(--black500);
}

.select-crop{
    display:flex;
    align-items: center;
    gap:1rem;
    margin-bottom:100px;
}

.select-crop label {
    padding: 12px 32px;
    background: var(--gray50);
    border-radius: 50px;
    cursor: pointer;
    display:inline-block;
    text-align:center;
}

.select-crop input[type="radio"]:checked + label {
    background: var(--black500);
    color:#fff;
    font-weight:600;
    transition: all .2s ease;
}

.investment,.estimate, .cost, .profit{
    display:flex;
    flex-direction: column;
    margin-bottom:3rem;
}

.projection-form .flex-wrap{
    display: flex;
    gap:1.5rem;
    margin-bottom:3rem;
}

.projection-form .flex-wrap > div{
    display: flex;
    flex-direction: column;
}

.projection-form .flex-wrap input[type="text"]{
    min-width:fit-content;
}

.form-wrap .btn{
    width:100%;
    height:auto;
    padding:1rem 0;
    background: var(--black500);
    color:#fff;
    border-radius:4px;
    text-align:center;
    font-size:1.125rem;
    font-weight:600;
    margin-top:5rem;
}

.form-wrap .btn:hover{
    background: var(--primary);
    transition: all .3s ease;
    color:var(--black500);
}

.profit-wrap .bottomInfo-wrap{
    background: var(--gray200);
    border-radius:10px;
    padding: 4rem 5rem;
}

.bottomInfo-wrap{
    line-height:1.8;
    color: var(--gray500);
    font-weight:300;
    font-size:0.875rem;
    letter-spacing: 0;
}

.label-wrap > div{
    position:relative;
}

.profit-wrap .form-wrap .pc.tooltiptext{
    visibility: hidden;
}

.profit-wrap .form-wrap .label-wrap .mo.tooltiptext{
    display: none;
    visibility: hidden;
}

.profit-wrap .form-wrap .label-wrap > div:hover .pc.tooltiptext{
    visibility: visible;
}

.label-wrap .tooltiptext {
    visibility: visible;
    width: 120px;
    background-color: var(--black500);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    line-height:1.5;
    letter-spacing:0;
    font-size:0.875rem;
}
  
.label-wrap:active .tooltiptext {
    visibility: hidden;
}

.label-wrap .tooltiptext::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
}

.label-wrap .tooltip-bottom {
    width: 120px;
    top: 150%;
    margin-left: -60px;
}
  
  
.label-wrap .tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent var(--black500) transparent;
}

.flex-wrap .label-wrap .tooltip-bottom{
    width:170px;
    left:-15px;
}

.estimate .label-wrap .tooltip-bottom{
    left:unset;
    right:-100px;
    width:220px;
}

.cost .label-wrap .tooltip-bottom{
    left:-101px;
    width:340px;
    text-align:left;
}

.profit .label-wrap .tooltip-bottom{
    left:8px;
}

.flex-wrap:last-child .label-wrap .tooltip-bottom{
    width:110px;
    left:14px;
}



/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 반응형 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

@media (max-width:1560px){

    .about-wrap .section01 .left-section, .about-wrap .section02 .left-section{
        padding-left:2rem;
    }

    .about-wrap .section01{
        padding:10rem 0;
    }

    .title-section{
        height:280px;
    }

    .product-wrap .netoSection-wrap{
        padding:10rem 0;
    }

    .product-wrap .left-section img{
        max-width:720px;
    }

    .profit-wrap .container{
        padding:6rem 1rem;
    }

    .form-wrap{
        padding: 4rem;
    }

    .select-crop{
        flex-wrap:wrap;
    }
    
}

@media (max-width:1400px){
    .about-wrap .left-section div h1,.about-wrap .left-section .green{
        font-size:3.5rem;
    }

    .about-wrap .section01-slide {
        width: 800px;
    }

    .about-wrap .right-section{
        width:64%;
    }

    .product-wrap .left-section img{
        max-width:100%;
    }
}

@media (max-width:1200px){
    .about-wrap .section01-slide {
        width: 720px;
    }

    .about-wrap .section02 .right-section .sec02-box{
        width: calc(100% / 2 - 1rem);
    }

    .about-wrap .section02 .right-section .sec02-box .back p{
        font-size:1rem;
    }

    .about-wrap .swiper {
        width: 100%;
    }
}

@media (max-width:1024px){
    .pc{display:none;}

    .title-section.pc{
        display:flex;
    }

    .mo{display:block;}

    section .container{
        flex-direction: column;
        align-items: baseline;
    }
    
    .about-wrap .left-section div h1{
        font-size: 3rem;
        margin-bottom:2rem;
    }

    .about-wrap .left-section .green{
        font-size:3rem;
    }

    .about-wrap .section01{
        padding:10rem 0;
    }

    .about-wrap .section01 .right-section{
        width:100%;
    }

    .about-wrap .section01-slide .swiper-slide p{
        top:40px;
        left:48px;
    }

    .about-wrap .section01 .left-section, .about-wrap .section02 .left-section{
        padding-left:0;
        width:100%;
    }

    .about-wrap .section02{
        overflow:auto;
        margin-bottom:6rem;
    }

    .about-wrap .section02 .left-section > div{
        display:flex;
        justify-content: space-between;
    }

    .about-wrap .section02 button{
        margin-top:0;
        height:56px;
        width:100%;
    }

    .about-wrap .section02 .right-section{
        width:100%;
        margin-bottom:2rem;
    }

    .about-wrap .section02 .right-section .sec02-boxWrap{
        flex-wrap:nowrap;
        overflow-y:auto;
    }

    .about-wrap  .section02 .right-section .sec02-box{
        min-width:270px;
    }

    .product-wrap .netoSection-wrap{
        padding: 10rem 0;
    }

    .product-wrap .netoSection-wrap section .container{
        flex-direction: column;
        align-items: baseline;
    }

    .product-wrap section .container{
        gap: 2rem;
    }

    .video-wrap{
        padding:6rem 0;
    }

    .video-wrap .youtube-wrap{
        flex-direction: column;
    }

    .video-wrap .youtube-wrap div{
        padding-bottom:55.65%;
    }

    .solution-wrap{
        padding:6rem 0;
    }

    .solution-wrap h4{
        margin-bottom:3rem;
    }

    .solution-wrap .container{
        align-items: center;
    }

    .solutionBox-wrap .solutionBox{
        flex-direction:column;
        height:auto;
    }

    .solution-wrap .solutionBox-wrap{
        margin-bottom:4rem;
    }

    .profit-wrap .form-wrap .label-wrap > div:hover .pc.tooltiptext{
        opacity:0;
    }

    .profit-wrap .form-wrap .label-wrap .mo.tooltiptext{
        visibility: visible;
    }
}

@media (max-width:768px){

    .wrap{
        padding-top:56px;
    }

    .title-section.pc{
        display:none;
    }

    .about-wrap .section01{
        padding: 6rem 0;
    }

    .about-wrap .section01-slide .swiper-slide p{
        top:32px;
        left:32px;
        font-size:1.5rem;
    }
    
    /* .about-wrap .section01 .right-section > p{
        margin-left:0;
        font-size: 1.75rem;
    } */

    .about-wrap .section02 .left-section > div{
        flex-direction: column;
    }

    .about-wrap .left-section .green:after{
        height:3px;
    }

    .about-wrap .section02 .right-section .sec02-box .back{
        bottom:0;
        background-color: rgba(0,0,0,0.1);
    }

    .about-wrap .section01-slide .swiper-slide p{
        top:32px;
        left:32px;
        font-size:1.5rem;
    }
    
    .product-wrap .netoSection-wrap{
        padding: 6rem 0;
    }

    .product-wrap .netoSection:not(.section03){
        margin-bottom:6rem;
    }

    .solution-wrap .solutionBox-wrap{
        flex-direction: column;
    }

    .solutionBox-wrap .solutionBox{
        width:100%;
        flex-direction: row;
    }

    .solution-wrap .btn-wrap{
        display: flex;
        width:100%;
        gap: 1rem;
        justify-content: center;
    }
    

    .profit-wrap .container{
        padding:6rem 1rem;
    }
    

    .form-wrap{
        padding: 2rem;
    }

    .select-crop{
        margin-bottom:5rem;
    }

    .select-crop div{
        width: calc(100% / 3 - 1rem);
    }
    
    .select-crop label{
        width:100%;
        padding:1rem 0.5rem;
    }

    input[type="text"], input[type="password"]{
        width:100%;
        min-width:100%;
    }

    .flex-wrap .label-wrap .tooltip-bottom{
        width:104px;
        left:16px;
    }

    .estimate .label-wrap .tooltip-bottom{
        width:190px;
        right:-85px;
    }

    .cost .label-wrap .tooltip-bottom{
        left: -56px;
        width:250px;
    }

    .label-wrap .tooltip-bottom{
        width:134px;
    }

    .form-wrap .btn{
        margin-top:2rem;
    }

    .profit-wrap .bottomInfo-wrap{
        padding: 2rem;
    }

    .bottomInfo-wrap{
        line-height:2;
        word-break:keep-all;
    }

    
}

@media (max-width:520px){


    section .right-section{
        width:100%;
    }

    .about-wrap .left-section .green:after{
        height:3px;
    }

    .about-wrap .left-section div h1{
        font-size: 2rem;
        margin-bottom:1rem;
    }

    .about-wrap .left-section .green{
        font-size:2rem;
        margin-bottom:0;
    }

    .about-wrap .section01-slide{
        margin-bottom:2rem;
    }

    .about-wrap .section01-slide .swiper-slide p{
        font-size:1rem;
        top:24px;
        left:24px;
    }

    .product-wrap .right-section .title{
        font-size:1.5rem;
        margin-bottom:1rem;
    }

    .product-wrap .right-section p{
        font-size:1.25rem;
    }


    .product-wrap .right-section .btn-wrap{
        margin-top:2rem;
    }


    .product-wrap .btn-wrap button{
        min-width:auto;
        width:100%;
        padding:16px;
    }

    button{
        font-size:1rem;
    }

    .solutionBox-wrap .solutionBox{
        padding:24px;
    }

    .form-wrap .projection-form h4{
        font-size:1.25rem;
    }

}

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?23qo56');
    src:  url('fonts/icomoon.eot?23qo56#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?23qo56') format('truetype'),
      url('fonts/icomoon.woff?23qo56') format('woff'),
      url('fonts/icomoon.svg?23qo56#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-ns-arrow-right:before {
    content: "\e90b";
  }
  .icon-cancel:before {
    content: "\e904";
  }
  .icon-arrow-left-circle:before {
    content: "\e902";
  }
  .icon-arrow-right-circle:before {
    content: "\e903";
  }
  .icon-user:before {
    content: "\e907";
  }
  .icon-search:before {
    content: "\e905";
  }
  .icon-notes:before {
    content: "\e906";
  }
  .icon-clipboard:before {
    content: "\e908";
  }
  .icon-close:before {
    content: "\e909";
  }
  .icon-currency-dollar:before {
    content: "\e90a";
  }
  .icon-arrow-left:before {
    content: "\e900";
  }
  .icon-arrow-right:before {
    content: "\e901";
  }
  .icon-twitter:before {
    content: "\f099";
  }
  .icon-facebook:before {
    content: "\f09a";
  }
  .icon-facebook-f:before {
    content: "\f09a";
  }
  .icon-bars:before {
    content: "\f0c9";
  }
  .icon-navicon:before {
    content: "\f0c9";
  }
  .icon-reorder:before {
    content: "\f0c9";
  }
  .icon-youtube-play:before {
    content: "\f16a";
  }
  .icon-behance-square:before {
    content: "\f1b5";
  }
  .icon-paper-plane:before {
    content: "\f1d8";
  }
  .icon-send:before {
    content: "\f1d8";
  }
  .icon-pinterest-p:before {
    content: "\f231";
  }