@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

.cf{}
.cf:after{content: ""; display: block; clear: both; }
#mcontainor{height: 0;}
/* 공통사항 */
#container>section{box-sizing: border-box; }
section .inner{width: 100%; max-width: 1300px; margin: 0 auto; position: relative; padding-top: 80px;}
section h3.cont_title{font-size: 34px; text-align: center;  margin: 0 0 80px 0; padding-top: 100px; text-transform: uppercase;}
.mobile{display: none !important;}

section .more{width: 140px; height: 40px; background: #824e28; transition: all .3s; outline: 1px solid #824e28; position: absolute; }
section .more:hover{background: none; }
section .more a{display: block; font-size: 15px; line-height: 40px; color: #fff; transition: all .3s; text-align: center;}
section .more a:hover{color: #824e28; }

/* cont1 vision */
#container>section.cont1{height: auto; min-height: 100vh; margin-bottom: 100px;}
.cont1 .inner{padding-top: 150px;}
.cont1 .inner .desc{display: flex; justify-content: space-between;}
.cont1 .inner .desc .text{width: 800px; }
.cont1 .inner .desc .text h4{text-transform: uppercase; font-size: 60px; line-height: 1em; margin-bottom: 30px;}
.cont1 .inner .desc .text h4>span{font-size: 60px; display: inline;}
.cont1 .inner .desc .text span{font-size: 20px; line-height: 1.5em; display: block;}
.cont1 .inner .desc .text span i{font-style: normal; color: #824e28;;}



.cont1 .inner .desc .photo{width: 500px; height: 600px; overflow: hidden; background: url(../images/vision3.jpg) no-repeat center bottom / cover; text-indent: -9999px;}

section.cont1 .more{bottom: 0; left: 0;}


/* cont2 Fermentation  Science */
#container>section.cont2{height: 600px; position: relative; background: url(../images/cont2_bg10.jpg) no-repeat center center / 100% auto; animation: cont2_color 60s linear infinite}
.cont2::after{content: ""; display: block; width: 100%; height: 0%; background: #fff; position: absolute; top: 0; left: 0; ;}
section.cont2 .inner{height: 600px; position: relative; z-index: 10; }
section.cont2 h3.cont_title{color: #fff; padding-top: 30px;}

.cont2 .inner .desc .text{text-align: center; color: #fff;}
.cont2 .inner .desc .text span{display: block; font-size: 20px;line-height: 2em; font-weight: 300;}
.cont2 .inner .desc .text em{opacity: .5;}

section.cont2 .more{bottom: 50px; left: 50%; transform: translateX(-50%); background:transparent; outline: none;}
section.cont2 .more a:hover{color: #fff; text-decoration: underline;}

/* cont3 Product */
.cont3{position: relative; }
.cont3 .inner{display: flex; justify-content: space-between; padding-top: 150px; position: relative;}
.cont3 .title{width: 30%;}
.cont3 .title h3{font-size: 80px; text-align: left; margin: 0; padding-top: 0;}
.cont3 .title span{font-size: 20px; font-weight: 200; line-height: 1.5em; color: #333;}

.cont3 .product{display: flex; justify-content: flex-end; width: 70%;}
.cont3 .product>div{}
.cont3 .product>[class*='pd']{width: 100%;}
.cont3 .product>div:nth-child(1){margin-right: 30px;}
.cont3 .product .photo{position: relative; width: 100%; height: 380px; background: url(../images/pd01.png) no-repeat center bottom / auto 80%; transition: all .3s; filter: drop-shadow( 0 0 10px #eee); margin-bottom: 20px;}
.cont3 .product .pd1 .photo{background-size: auto 100%;}
.cont3 .product .pd2 .photo{background-image: url(../images/pd02.png);}
.cont3 .product .pd3 .photo{background-image: url(../images/pd03.png);}
.cont3 .product .pd4 .photo{background-image: url(../images/pd04.png); background-size: auto 50%;}
.cont3 .product .photo a{display: block;line-height: 380px; text-align: center; font-size: 18px; text-transform: uppercase; background:rgba(0, 0, 0, 0); color: #fff; opacity: 1; transition: all .3s; height: 380px;}
.cont3 .product .photo:hover{filter: drop-shadow( 0 0 5px #ccc);}
.cont3 .product .photo:hover a{opacity: 1;}

.cont3 .product .text span{display: block; font-size: 28px; line-height: 1.5em; font-weight: 600; text-align: center; color: #333;}
.cont3 .product .text span.note{font-weight: 100; font-size: 16px;}
.cont3 .product .text span em{font-size: 20px; font-style: normal;}

.cont3 .product>div .view{width: 150px; height: 40px; border-radius: 20px; text-align: center; margin: 25px auto 0; border: 0px solid #824e28; transition: all .3s; display: flex; justify-content: center;}
.cont3 .product>div .view i{display: block; width: 50px; height: 40px; background: url(../images/r-arrow.png) no-repeat center center / auto 100%; transition: all .3s; position: relative; left: 0;}
.cont3 [class*='pd']:hover .view>i{animation: pd_arrow 1s linear infinite;}
.cont3 .product>div .view:hover{}
.cont3 .product>div .view span{color: #824e28; text-transform: uppercase; line-height: 40px; transition: all .3s; position: relative;}
.cont3 .product>div .view:hover span{}




/* cont4 건강한 기업 */
.cont4{position: relative; height: auto; margin: 150px 0 50px; background: #fff;}


.cont4 .photo{width: 100%; height: 350px; background: url(../images/cont4_bg2.jpg) no-repeat center center / 100% auto; text-indent: -9999px; margin-top: 100px; background-attachment:fixed; position: relative; }
.cont4 .photo::after{content: ""; display: block; width: 100%; height: 350px; background: rgba(0,0,0,.22); position: absolute; top: 0; left: 0; z-index: 1; }
section.cont4 h3.cont_title{color: #fff; margin-bottom: 20px; padding-top: 60px;}

.cont4 .text{position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 100;}
.cont4 .text span{display: block; color: #fff; font-size: 20px; text-align: center; font-weight: 300;}

section.cont4 .more,
section.cont5 .more{bottom: -100px; left: 50%; transform: translateX(-50%);}


/* cont5 NEWS */
.cont5{background: #fff; height: auto;margin-bottom: 200px;}
.cont5_1 .inner{display: flex; justify-content: space-between;}
.cont5 .inner>div{position: relative;}
.cont5 div.news{width: 850px;}
.cont5 div.gallery{width: 400px; ;}

.cont5 ul{width: 100%; max-width: 1000px; margin: 0 auto 45px; border-top: 1px solid #111; border-bottom: 1px solid #111; }
.cont5 ul li{border-bottom: 1px solid #dedede;  width: 100%; transition: all .3s; height: 100px;}
.cont5 ul li:last-child{border-bottom: none}
.cont5 ul li:hover{background: #eee;}
.cont5 ul li a{display: block; padding: 34px 0; }
.cont5 ul li a strong,
.cont5 ul li a span{display: block; font-size: 16px; font-weight: normal; line-height: 1em; padding: 0 30px; text-overflow: ellipsis; overflow: hidden;}
.cont5 ul li a strong{font-size: 18px;}

.cont5 div.gallery ul{margin-bottom: 0; }
.cont5 div.gallery ul li{height: auto;}
.cont5 div.gallery ul li a{padding: 0 0 25px;}
.cont5 div.gallery ul li a .photo{width: 100%; height: 200px; /*background: url(../datafiles/smarteditor/20211230/aa_1.jpg) no-repeat center / cover*/; margin-bottom: 30px; overflow: hidden;}

.cont5 div.gallery ul li a .photo img{width: 100%; height: auto;}
.cont5 div.gallery ul li a .text strong,
.cont5 div.gallery ul li a .text span{text-overflow: ellipsis; overflow: hidden; margin-bottom: 6.5px; 
padding: 0; white-space: nowrap;}


@media all and (max-width:1300px) {
    #mcontainor{height: auto; }   
    #container section .inner{width:100%; max-width: 1000px;}

    
    /* cont1 vision */

    
    /* cont2 Fermentation  Science */
    
    /* cont3 Product */
    #container .cont3 h3.cont_title{text-align: center; }
    .cont3 .title{text-align: center;}
    .cont3 .product .pd2{position: relative; top: 0px;}

    .cont4 .text span{text-align: center;}

    .cont5 ul{width: calc(100% - 40px);}
    

}


@media all and (max-width:1024px) {

    #mcontainor{height: 0; }  
    .cont1 .inner .desc .photo{height: 500px;}

}
@media all and (max-width:960px) {
    #container section h3.cont_title{margin: 0 0 20px 0; }

    section h3.cont_title{font-size: 6vw; padding-top: 50px;}
    section .more{width: 30vw; }
    section .more a{font-size: 2.4vw; margin-left: 0; text-align: center;}

    

    .cont3 .product{display: block;}
    .cont3 .product>div{width: 80vw; margin: 0 auto;}
    .cont3 .cont3_bg{opacity: .3;}
    .cont3 .title span{font-size: 3vw; }
    .cont3 .title span br:nth-child(1),
    .cont3 .title span br:nth-child(3){display: block;}
    .cont3 .product>div{opacity: 1; top: 0;}
    .cont3 .product>div.pd2{top: 50px;}
    .cont3 .product>div.pd2.on{top: 50px;}
    .cont3 .product>div .text span{line-height: 1.3em;;}
    .cont3 .product>div .text span.name{font-size: 4vw; }
    .cont3 .product>div .text span.note{font-size: 3vw; }

    
    .cont4{height: auto;}
    section.cont4 h3.cont_title{font-size: 4vw;}
    .cont4 .text span{font-size: 2.8vw; }

    .cont5{height: auto; margin: 5vh auto;}
    section.cont5 h3.cont_title{font-size: 4vw; padding-top: 0;}
    section.cont5 .inner{padding: 5vh 0}


}

@media all and (max-width:768px) {
    body{width: 100%; overflow: hidden;}
    .pc{display: none !important}
    .mobile{display: block !important}

    section h3.cont_title{font-size: 6vw;}

    #container section.cont1{margin-bottom: 0}
    .cont1 .inner{padding: 30px 20px 80px;}
    .cont1 .inner .desc{display: block;}
    .cont1 .inner .desc .text{width: 100%;}
    .cont1 .inner .desc .text h4{font-size: 10vw; margin-bottom: 0;}
    .cont1 .inner .desc .text h4 span{display: none; font-size: 4vw;}

    .cont1 .inner .desc .photo{margin: 0 auto; width: 100%;}

    section.cont1 .more{left: 50%; transform: translateX(-50%);}
    /*
    #container>section.cont2{background: none; height: auto;}
    section.cont2 .inner{padding: 0 20px; height: 300px;}

    section.cont2 h3.cont_title{color: #111; font-size: 10vw; text-align: left; line-height: 1em;}
    .cont2 .inner .desc .text{color: #111; text-align: left;}
    .cont2 .inner .desc .text span:first-child{display: none;}
    .cont2 .inner .desc .text br{display: none;}

    section.cont2 .more{width: 50%;}
    section.cont2 .more a{color: #111; font-size: 4vw; font-weight: bold;}
    section.cont2 .more:hover a{color: #111;}
    */
    #container>section.cont2{background-size: cover; height: 300px; margin: 50px 0;}
    section.cont2 .inner{padding-top: 30px;}
    .cont2 .inner .desc .text span{font-size: 3.4vw; line-height: 1.5em;}
    section.cont2 .more{bottom: 0;}

    .cont3 .inner{display: block; padding-top: 0;}
    .cont3 .title{width: 100%;}
    .cont3 .title h3{font-size: 10vw;text-align: center; margin-bottom: 20px;}
    .cont3 .title span{display: none;}

    .cont3 .product{width: 100%;}
    .cont3 .product>div{width: 100%;}
    .cont3 .product .photo{height: 250px;}

    .cont4 .photo{background-size: cover;}

    
    section.cont5 h3.cont_title{margin-bottom: 30px;}
    .cont5_1 .inner{display: block; padding: 0 20px;}
    .cont5_1 .inner>div{width: 100%; margin-bottom: 130px;}
    .cont5 div.gallery ul li a .photo{height: 30vh;}
    section.cont5 .more{bottom: -70px;}
    
}


@keyframes pd_arrow{
    50% {left: 10px;}
}

@keyframes cont2_color{
    50% {filter: hue-rotate(-130deg); }
}