@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body:has(#mainpage) {margin:0;background:var(--wh);color:var(--bk2);line-height:1.45;}
#mainpage {width:100%;max-width:none;margin:0;overflow:visible;}
#mainpage button {font:inherit;}
#mainpage img {max-width:100%;vertical-align:middle;}
body:has(#mainpage) #hd_login_msg {display:none;}
body:has(#mainpage) #hd,
body:has(#mainpage) #wrapper,
body:has(#mainpage) #ft {min-width:0;}
.main-visual {position:relative;height:900rem;color:var(--wh);overflow:hidden;background:url(../img/main/hero.jpg) no-repeat center center / cover;}
.main-visual-img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.main-visual-dim {position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,17,6,.55) 0%,rgba(3,17,6,.12) 55%,rgba(0,0,0,.08) 100%);}
.visual-txt {position:absolute;left:50%;bottom:120rem;transform:translateX(-50%);}
.main-visual h2 {margin:0 0 24rem;font-size:85rem;line-height:1.2;letter-spacing:0;font-weight:var(--fw-semibold);}
.main-visual p {margin:0;color:rgba(255,255,255,.92);font-size:var(--font22);line-height:normal;}

.intro-sec {padding:var(--sec-pad) 0;background:var(--wh);overflow:visible;}
.intro-con {align-items:flex-start;gap:var(--gap-lg);}
.intro-txt {position:-webkit-sticky;position:sticky;top:var(--pad-x);z-index:2;display:flex;align-self:flex-start;flex:1;flex-direction:column;align-items:flex-start;}
.con-tit h3 {margin:0;font-size:var(--font60);line-height:1.33;letter-spacing:0;font-weight:var(--fw-bold);}
.intro-txt p {max-width:none;margin:24rem 0 0;color:var(--gray-8);font-size:var(--font22);line-height:normal;}
.intro-txt>a {margin-top:var(--gap-lg);}
.history-wrap {position:relative;width:721rem;height:1533rem;flex:none;}
.history-wrap.is-motion-ready .history-item,
.history-wrap.is-motion-ready .history-img {will-change:transform,opacity,filter;}
.history-item {position:absolute;display:flex;flex-direction:column;justify-content:space-between;width:320rem;padding:var(--gap-sm);border-radius:var(--radius-md);background:var(--wh);box-shadow:var(--shadow-card);z-index:2;}
.history-item span {font-size:26rem;font-weight:var(--fw-medium);}
.history-item strong {font-family: "Roboto", sans-serif;font-size: clamp(80rem, 6vw, 120rem);line-height:1;font-weight:var(--fw-regular);letter-spacing:0;}
.history-item small {font-family: "Roboto", sans-serif;font-size: clamp(30rem, 2vw, 40rem);font-weight:var(--fw-regular);}
.item-founded {left:34rem;top:141rem;height:400rem;background:#292929;color:var(--wh);}
.item-years {left:0;top:876rem;height:330rem;}
.item-countries {left:401rem;top:1203rem;height:330rem;background:#292929;color:var(--wh);}
.history-img {position:absolute;width:320rem;height:400rem;overflow:hidden;border-radius:var(--radius-md);box-shadow:var(--shadow-img);}
.history-img img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.img-chicken {right:0;top:0;}
.img-pig {left:265rem;top:616rem;}

.product-sec {padding:var(--sec-pad) 0;background:var(--light-gray);}
.con-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-lg);}
.product-con {overflow:visible;}
.product-lst {display:flex;height:671rem;align-items:stretch;gap:20rem;}
.product-item {position:relative;display:flex;min-width:0;flex:1 1 0;flex-direction:column;overflow:hidden;border:1rem solid transparent;border-radius:var(--radius-md);background:var(--wh);transition:flex .65s cubic-bezier(.22,.61,.36,1),border-color .35s,box-shadow .35s;}
.product-item.is-active {flex:2.35 1 0;border-color:var(--bk);box-shadow:0 0 25rem rgba(0,0,0,.08);}

/* 상단 라벨: absolute / active면 오른쪽으로 스윽 사라짐 (height 유지) */
.opacity-txt {position:absolute;top:0;left:0;z-index:2;display:flex;height:104rem;padding:0 40rem;align-items:center;font-size:var(--font24);font-weight:var(--fw-semibold);white-space:nowrap;pointer-events:none;}
.product-item.is-active .opacity-txt {animation:opacityTxtOut .5s cubic-bezier(.22,.61,.36,1) forwards;}
.product-item.is-active.is-initial .opacity-txt {animation:none;opacity:0;transform:translateX(40%);}
@keyframes opacityTxtOut {
    from {
        opacity:1;
        transform:translateX(0);
    }
    to {
        opacity:0;
        transform:translateX(40%);
    }
}

/* 이미지: 기본은 살짝 가려진 오프셋 / active면 중앙·확대 */
.product-img {position:relative;flex:1;overflow:hidden;}
#mainpage .product-img img {position:absolute;top:50%;left:50%;display:block;max-width:none;object-fit:contain;transform:translate(-25%,-50%) scale(.75);transition:transform .65s cubic-bezier(.22,.61,.36,1);}

#mainpage .product-item.is-active .product-img img {transform:translate(-50%,-50%) scale(1);}
#mainpage .product-item.is-active.is-initial .product-img img {transition:none;}

/* 하단: 기본은 +만 / active면 product-txt 등장 */
.product-info {display:flex;width:100%;padding:var(--gap-sm);flex:none;align-items:flex-end;justify-content:center;gap:20rem;}
.product-item.is-active .product-info {justify-content:space-between;}
.product-txt {display:flex;min-width:0;flex:1;flex-direction:column;gap:8rem;opacity:0;visibility:hidden;transform:translateX(40%);}
.product-item.is-active .product-txt {visibility:visible;animation:productTxtIn .5s .60s cubic-bezier(.22,.61,.36,1) both;}
.product-item.is-active.is-initial .product-txt {animation:none;opacity:1;visibility:visible;transform:translateX(0);}
@keyframes productTxtIn {
    from {opacity:0;transform:translateX(40%);}
    to {opacity:1;transform:translateX(0);}
}
.product-txt h4 {margin:0;font-size:40rem;line-height:1.2;font-weight:var(--fw-bold);white-space:nowrap;}
.product-txt p {margin:0;font-size:var(--font16);line-height:1.4;white-space:nowrap;}
.product-info i {display:flex;width:45rem;height:45rem;flex:none;align-items:center;justify-content:center;border:1rem solid var(--gray-a);border-radius:50%;color:var(--gray-a);font-size:25rem;font-style:normal;}
.product-item:not(.is-active) .product-txt {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
#products .round-btn{background:transparent;}

.is-active .product-info i {color:var(--bk);border:1px solid var(--bk);}

.img-visual-sec {position:relative;width:100%;overflow:hidden;background:#1e2428;color:var(--wh);line-height:1.45;}
.img-visual-sec picture, .img-visual-sec img {display:block;width:100%;}
.img-visual-sec img {height:auto;}
.img-visual-sec::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,16,.52),rgba(7,12,16,.06) 62%);pointer-events:none;}
.img-visual-con {position:absolute;inset:0;z-index:2;display:flex;}
.img-visual-con p {margin:20rem 0 0;font-size:var(--font22);line-height:normal;color:rgba(255,255,255,.9);}
.rnd-sec {height:810rem;background:#1e2428 url(../img/main/research_desktop.jpg) no-repeat center center / cover;}
.rnd-con {padding-top:var(--sec-pad);flex-direction:column;justify-content:flex-start;}
.rnd-lst {gap:var(--gap-sm);margin-top:var(--gap-xl);}
.rnd-lst a {display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;color:inherit;}
.rnd-lst > div {display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;}
.rnd-lst > div > a {width:100%;}
.rnd-txt {display:flex;flex-direction:column;align-items:flex-start;}
.rnd-lst i {display:flex;width:136rem;height:136rem;align-items:center;justify-content:center;margin-bottom:26rem;border:1rem solid var(--opac-wh-40);border-radius:var(--radius-md);background:var(--opac-wh-01);font-style:normal;backdrop-filter:blur(12rem);}
.rnd-lst i img {display:block;width:92rem;height:auto;max-height:86rem;object-fit:contain;}
.rnd-lst>div:nth-child(2) i img {width:80rem;max-height:80rem;}
.rnd-lst>div:nth-child(3) i img {width:80rem;max-height:80rem;}
.rnd-lst strong {font-size:var(--font30);font-weight:var(--fw-semibold);}
.rnd-lst small {margin-top:10rem;color:var(--gray-a);font-size:var(--font18);}
.contact-con {align-items:center;justify-content:space-between;}
.contact-sec {height:726rem;}
.contact-btn {display:flex;width:200rem;height:200rem;align-items:center;justify-content:center;flex-direction:column;gap:6rem;border:1rem solid var(--opac-wh-txt);border-radius:50%;font-size:var(--font24);font-weight:var(--fw-semibold);}
.contact-btn span {display:flex;width:60rem;height:60rem;font-weight:var(--fw-regular);line-height:1;}
.contact-btn span img {display:block;width:100%;height:100%;}

.news-sec {padding:var(--sec-pad) 0;background:var(--wh);}
.news-con {gap:var(--gap-xl);}
.news-tit {width:calc(37.5% - 50rem);}
.news-tit p {margin:42rem 0 0;color:var(--gray-8);font-size:var(--font22);line-height:normal;}
.news-lst {width:780rem;flex:none;border-top:1rem solid var(--bk);}
.news-item {gap:50rem;padding:46rem 24rem;border-bottom:1rem solid var(--bk);transition:background .2s;}
.news-item:hover {background:var(--gray-fa);}
.news-item time {display:flex;width:auto;flex:none;flex-direction:column;align-items:center;gap:10rem;}
.news-item time strong {font-size:45rem;line-height:1;font-weight:var(--fw-medium);}
.news-item time span {margin:0;color:var(--gray-8);font-size:var(--font16);font-weight:var(--fw-light);}
.news-txt {display:flex;min-width:0;flex:1;flex-direction:column;gap:10rem;}
.news-txt b {font-size:var(--font24);font-weight:var(--fw-medium);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-txt small {color:var(--gray-8);font-size:var(--font16);font-weight:var(--fw-light);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-arrow {display:flex;width:48rem;height:48rem;flex:none;align-items:center;justify-content:center;}
.news-arrow img {display:block;width:100%;height:100%;}

@media (max-width:800px) {
    .main-visual {width:100%;height:auto;aspect-ratio:375 / 640;background:url(../img/main/hero_m.jpg) no-repeat center center / cover;}
    .main-visual-img {object-position:62% center;}
    .main-visual-dim {background:linear-gradient(180deg,rgba(4,16,7,.38),rgba(4,16,7,.18) 48%,rgba(4,16,7,.52));}
    .visual-txt {bottom:auto;top:50%;transform:translate(-50%,-50%);text-align:center;}
    .main-visual h2 {font-size:var(--font30);line-height:1.2;margin-bottom:20rem;}
    .main-visual p {font-size:var(--font16);line-height:normal;}
    .intro-sec {padding:var(--gap-md) 0;}
    .intro-con {display:block;}
    .intro-txt {position:static;width:100%;padding:0;}
    .con-tit h3 {font-size:38rem;line-height:1.18;}
    .intro-txt p {margin-top:24rem;font-size:var(--font16);}
    .intro-txt>a {margin-top:var(--gap-lg);}
    .history-wrap {width:100%;height:712.282rem;margin-top:var(--gap-lg);}
    .history-item {width:148.682rem;padding:18.585rem;border-radius:10rem;}
    .history-item span {font-size:12.08rem;}
    .history-item strong {font-size:55.756rem;}
    .history-item small {font-size:18.585rem;}
    .item-founded {left:15.8rem;top:65.51rem;height:185.853rem;}
    .img-chicken {right:0;top:0;width:148.682rem;height:185.853rem;border-radius:10rem;}
    .img-pig {left:123.13rem;top:286.21rem;width:148.682rem;height:185.853rem;border-radius:10rem;}
    .item-years {left:0;top:407.02rem;height:153.329rem;}
    .item-countries {left:186.32rem;top:558.95rem;height:153.329rem;}
    .product-sec {padding:var(--gap-md) 0;}
    .con-top {flex-direction:column;align-items:flex-start;gap:var(--gap-sm);margin-bottom:var(--gap-sm);}
    .product-con {overflow:visible;margin:0;padding:0;}
    .product-lst {height:auto;flex-direction:column;gap:10rem;}
    .product-item {width:100%;flex:none;border-radius:10rem;}
    .product-item.is-active {flex:none;border-color:var(--bk);}
    .opacity-txt {display:none;}
    .product-item:not(.is-active) .product-img {display:none;}
    .product-img {flex:none;height:240rem;}
    #mainpage .product-img img {width:180rem;height:240rem;transform:translate(-50%,-50%) scale(.72);}
    #mainpage .product-ctvital .product-img img {width:100rem;transform:translate(-50%,-50%) scale(.72);}
    #mainpage .product-item.is-active .product-img img {transform:translate(-50%,-50%) scale(1);}
    .product-info {padding:21rem 16rem;align-items:center;justify-content:space-between;}
    .product-item:not(.is-active) .product-txt {position:static;width:auto;height:auto;overflow:visible;opacity:1;visibility:visible;transform:none;pointer-events:auto;}
    .product-item.is-active .product-txt,
    .product-item.is-active.is-initial .product-txt {animation:none;opacity:1;visibility:visible;transform:none;}
    .product-txt h4 {font-size:var(--font16);font-weight:var(--fw-semibold);}
    .product-txt p {display:none;margin:0;font-size:12rem;line-height:1.4;}
    .product-info i {width:24rem;height:24rem;font-size:10rem;}
    .product-item.is-active .product-info {padding:16rem;align-items:flex-end;}
    .product-item.is-active .product-txt h4 {font-size:var(--font20);font-weight:var(--fw-bold);}
    .product-item.is-active .product-txt p {display:block;}
    .img-visual-sec picture, .img-visual-sec img {height:100%;}
    .img-visual-sec img {width:100%;object-fit:cover;}
    .img-visual-sec::after {background:linear-gradient(180deg,rgba(7,12,16,.44),rgba(7,12,16,.18) 50%,rgba(7,12,16,.62));}
    .img-visual-con {position:absolute;padding-top:var(--gap-md);padding-bottom:var(--gap-md);}
    .img-visual-con p {margin-top:24rem;font-size:var(--font16);line-height:normal;}
    .rnd-sec {height:auto;background-image:url(../img/main/research_mobile.jpg);}
    .rnd-con {position:relative;inset:auto;padding-top:var(--gap-md);padding-bottom:var(--gap-md);justify-content:flex-start;}
    .rnd-lst {flex-direction:column;gap:20rem;margin-top:var(--gap-sm);}
    .rnd-lst>div {position:relative;width:100%;padding:0;flex:none;flex-direction:row;align-items:center;gap:0;border:0;background:none;backdrop-filter:none;}
    .rnd-lst>div>a {flex-direction:row;align-items:center;gap:30rem;padding:20rem 24rem;border:1rem solid var(--opac-wh-40);border-radius:10rem;background:var(--opac-wh-01);backdrop-filter:blur(6.618rem);}
    .rnd-lst i {width:50rem;height:50rem;flex:none;margin:0;border:0;background:none;backdrop-filter:none;}
    .rnd-lst i img {width:100%;max-height:100%;}
    .rnd-lst>div:nth-child(2) i img,
    .rnd-lst>div:nth-child(3) i img {width:100%;max-height:100%;}
    .rnd-txt {min-width:0;flex:1;}
    .rnd-lst strong {font-size:var(--font20);line-height:1.3;}
    .rnd-lst small {margin-top:6rem;font-size:var(--font16);line-height:1.3;}
    .contact-con {align-items:flex-start;justify-content:space-between;flex-direction:column;}
    .contact-sec {height:494rem;}
    .contact-btn {align-self:flex-end;width:100rem;height:100rem;font-size:var(--font16);}
    .contact-btn span {width:31rem;height:31rem;}
    .news-sec {padding:var(--gap-md) 0;}
    .news-con {display:block;}
    .news-tit, .news-lst {width:100%;}
    .news-tit p {margin:24rem 0 40rem;font-size:var(--font16);}
    .news-item {gap:12rem;padding:20rem 10rem;}
    .news-item time {width:auto;gap:10rem;}
    .news-item time strong {font-size:var(--font30);}
    .news-item time span {font-size:var(--font14);}
    .news-txt b {font-size:var(--font18);letter-spacing:-.36rem;}
    .news-txt small {font-size:var(--font14);letter-spacing:-.28rem;}
    .news-arrow {width:40rem;height:40rem;}

    .intro-sec .round-btn{margin:50rem auto 0;width:fit-content;}
/* 
    .intro-con{flex-wrap: wrap;}
    .intro-con>div{width:100%;} */
}