@charset "UTF-8";

/* Header */
header {
    width: 100%;
    /* max-width: 1920px;
    margin: 0 auto; */
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 60px 95px 0 95px;
    background: transparent;
}
header .headerWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo a {
    display: flex;
    width: 280px;
}
header .logo a .white {
    display: none;
}
    @media all and (max-width: 1440px) {
        header .logo a {
            width: 250px;
        }
    }
    @media all and (max-width: 1199px) {
        header {
            padding: 25px 5% 0 5%;
        }
        header .logo a {
            width: 230px;
        }
    }
    @media all and (max-width: 1140px) {
        header {
            padding: 40px 5% 0 5%;
        }
    }
    @media all and (max-width: 1023px) {
        header .logo a {
            display: flex;
        }
    }
    @media all and (max-width: 767px) {
        header {
            padding: 30px 5% 0 5%;
        }
        header .logo a {
            width: 200px;
        }
    }
    @media all and (max-width: 640px) {
        header .logo a {
            display: flex;
            width: 155px;
        }
        header.floating-header .logo a .black{
            display: none;
        }
        header.floating-header .logo a .white{
            display: block;
        }
    }

/* Footer */
footer {
    background-color: #fcfcfc;
}
footer .footerTop .content,
footer .footerBottom .content {
    padding: 0 65px;
}
footer .footerTop {
    padding: 90px 0 100px 0;
    border-top: 1px solid #c9caca;
}
footer .footerTop .content {
    display: flex;
}
footer .footerTop .leftContent {
    margin-right: 230px;
}
footer .footerTop .leftContent h2 {
    display: block;
    line-height: 1.4;
    margin-bottom: 10px;
    font-size: var(--font-14);
    font-weight: var(--fw-bold);
}
footer .footerTop .leftContent pre {
    line-height: 1.6;
    letter-spacing: -0.5px;
    font-size: var(--font-12);
    font-weight: var(--fw-extralight);
}
footer .footerTop .rightContent {
    display: flex;
}
footer .footerTop .rightContent .colum:first-of-type {
    margin-right: 140px;
}
footer .footerTop .rightContent .colum:nth-of-type(2) {
    margin-right: 190px;
}
footer .footerTop .rightContent .colum strong {
    display: block;
    margin-bottom: 18px;
    font-size: var(--font-12);
    font-weight: var(--fw-bold);
}
footer .footerTop .rightContent .colum p,
footer .footerTop .rightContent .colum a {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-12);
    font-weight: var(--fw-extralight);
}
footer .footerBottom {
    padding: 60px 0 70px 0;
    border-top: 1px solid #c9caca;
}
footer .footerBottom .copy {
    font-size: var(--font-12);
}
    @media all and (max-width: 1400px) {
        footer .footerTop .leftContent {
            margin-right: 100px;
        }
        footer .footerTop .rightContent .colum:first-of-type{
            margin-right: 60px;
        }
        footer .footerTop .rightContent .colum:nth-of-type(2) {
            margin-right: 60px;
        }
    }
    @media all and (max-width: 1023px) {
        footer .footerTop .content,
        footer .footerBottom .content {
            padding: 0;
        }
        footer .footerTop {
            padding: 80px 0;
        }
        footer .footerTop .content {
            flex-wrap: wrap;
        }
        footer .footerTop .leftContent {
            width: 100%;
            margin-right: 0;
            margin-bottom: 40px;
        }
        footer .footerBottom {
            padding: 40px 0;
        }
    }
    @media all and (max-width: 767px) {
        footer .footerTop {
            padding: 60px 0;
        }
        footer .footerTop .leftContent h2,
        footer .footerTop .leftContent pre,
        footer .footerTop .rightContent .colum strong,
        footer .footerTop .rightContent .colum p,
        footer .footerTop .rightContent .colum a {
            font-size: var(--font-13);
        }
        footer .footerTop .leftContent h2 br {
            display: block;
        }
        footer .footerTop .rightContent {
            flex-wrap: wrap;
        }
        footer .footerTop .rightContent .colum:first-of-type {
            width: 100%;
            margin-right: 0;
            margin-bottom: 30px;
        }
        footer .footerTop .rightContent .colum:nth-of-type(2) {
            margin-right: 80px;
        }
        footer .footerTop .rightContent .colum strong {
            margin-bottom: 15px;
        }
        footer .footerBottom {
            padding: 30px 0;
        }
    }

/* 공통 */
.layout {
    width:90%;
    margin: 0 auto;
    max-width: 1730px
}
.navigation {
    margin-top: 70px;
}
.navigation a {
    color: var(--color-basic);
    font-size: var(--font-20);
    font-weight: var(--fw-semibold);
}
.navigation a:hover {
    color: var(--color-dark);
}
.txtArea h2 {
    font-size: var(--font-48);
    font-weight: var(--fw-semibold);
}
.txtArea pre,
.textWrap p {
    line-height: 1.7;
    color: var(--color-basic);
}
.global .txtArea pre,
.global .textWrap p {
    line-height: 1.75;
}
.pb320 {
    padding-bottom: 320px;
}
.mb320 {
    margin-bottom: 320px;
}
    @media all and (max-width: 1440px) {
        .txtArea h2 {
            font-size: var(--font-40);
        }
        .txtArea pre,
        .textWrap p {
            font-size: var(--font-17);
        }
        .navigation a {
            font-size: var(--font-18);
        }
    }
    @media all and (max-width: 1199px) {
        .txtArea h2 {
            font-size: var(--font-35);
        }
        .txtArea pre,
        .textWrap p {
            line-height: 1.5;
        }
        .global .txtArea pre,
        .global .textWrap p {
            line-height: 1.55;
        }
        .navigation {
            margin-top: 40px;
        }
        .pb320 {
            padding-bottom: 200px;
        }
        .mb320 {
            margin-bottom: 200px;
        }
    }
    @media all and (max-width: 1140px) {
        .txtArea h2 {
            font-size: var(--font-30);
        }
        .txtArea pre,
        .textWrap p {
            font-size: var(--font-15);
        }
        .navigation {
            margin-top: 40px;
        }
        .navigation a {
            font-size: var(--font-15);
        }
    }
    @media all and (max-width: 640px) {
        header.floating-header .navigation,
        header.floating-header .navigation a {
            color: var(--color-white);
        }
        .navigation {
            margin-top: 30px;
        }
        .navigation a {
            font-size: var(--font-12);
        }
        .txtArea h2 {
            font-size: var(--font-20);
            font-weight: var(--fw-extrabold);
        }
        .txtArea pre,
        .textWrap p,
        .global .txtArea pre,
        .global .textWrap p {
            line-height: 1.3;
            font-size: var(--font-13);
        }
    }

/* Main */
.mainVideo {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.mainVideo video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50%;
    object-position: 50%;
}
.mainVideo video.pc {
    display: block;
}
.mainVideo video.mobile {
    display: none;
}
    @media all and (max-width: 1023px) {
        .mainVideo video.mobile {
            display: block;
        }
        .mainVideo video.pc {
            display: none;
        }
    }

/* Philosophy */
.philosophy .pc .philosophy1 {
    margin-bottom: 280px;
}
.philosophy .pc .philosophy1 .content {
    display: flex;
    align-items: flex-end;
}
.philosophy .pc .philosophy1 .leftContent {
    width: 51.5%;
}
.philosophy .pc .philosophy1 .rightContent {
    width: 48.5%;
    padding: 0 95px 0 74px
}
.philosophy .pc .philosophy1 .rightContent .txtArea h2 {
    margin-bottom: 100px;
    line-height: 1.3;
}
.philosophy .pc .philosophy1 .rightContent .textWrap p:nth-child(4) {
    margin-top: var(--space-50);
}
.philosophy .pc .philosophy2 .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.philosophy .pc .philosophy2 .leftContent {
    width: 45.7%;
    padding: 0 74px 0 154px
}
.philosophy .pc .philosophy2 .leftContent .txtArea h2 {
    margin-bottom: 76px;
    font-weight: var(--fw-light);
    line-height: 1.05;
    letter-spacing: 2.55px;
}
.philosophy .pc .philosophy2 .leftContent .txtArea h2 strong {
    font-weight: var(--fw-bold);
    letter-spacing: -0.6px;
}
.philosophy .pc .philosophy2 .rightContent {
    width: 54.3%;
}
.philosophy.global .pc .philosophy1 .rightContent .textWrap p:nth-child(4) {
    margin-top: 0
}
.philosophy.global .pc .philosophy1 .rightContent .textWrap p:nth-child(5) {
    margin-top: var(--space-37);
}
    @media all and (max-width: 1919px) {
        .philosophy.global .pc .philosophy1 .rightContent .textWrap p br,
        .philosophy.global .pc .philosophy2 .leftContent .textWrap p br {
            display: none;
        }
    }
    @media all and (max-width: 1699px) {
        .philosophy .pc .philosophy1 .rightContent .textWrap p:nth-child(6) br,
        .philosophy .pc .philosophy2 .leftContent .textWrap p br {
            display: none;
        }
    }
    @media all and (max-width: 1440px) {
        .philosophy .pc .philosophy2 .leftContent .txtArea h2 {
            letter-spacing: 1.3px;
            letter-spacing: 2.15px;
        }

    }
    @media all and (max-width: 1199px) {
        .philosophy .pc .philosophy1 {
            margin-bottom: 150px;
        }
        .philosophy .pc .philosophy1 .rightContent {
            width: 48.5%;
            padding: 0 5% 0 30px;
        }
        .philosophy .pc .philosophy1 .rightContent .txtArea h2,
        .philosophy .pc .philosophy2 .leftContent .txtArea h2 {
            margin-bottom: 30px;
        }
        .philosophy .pc .philosophy1 .rightContent .txtArea h2 br {
            display: block;
        }
        .philosophy .pc .philosophy1 .rightContent .textWrap p:nth-child(4) {
            margin-top: var(--space-30);
        }
        .philosophy .pc .philosophy1 .rightContent .textWrap p br,
        .philosophy .pc .philosophy2 .leftContent .textWrap p br {
            display: none;
        }
        .philosophy .pc .philosophy2 .leftContent {
            width: 47%;
            padding: 0 30px 0 5%
        }
        .philosophy .pc .philosophy2 .rightContent {
            width: 53%;
        }
    }
    @media all and (max-width: 1140px) {
        .philosophy .pc .philosophy2 .leftContent .txtArea h2 {
            letter-spacing: 1.3px;
        }
    }
    @media all and (max-width: 1023px) {
        .philosophy .pc {
            display: block;
        }
        .philosophy .mobile {
            display: none;
        }
        .philosophy .pc .philosophy1 .leftContent {
            position: relative;
            height: 0;
            padding-bottom: 85%;
            overflow: hidden;
        }
        .philosophy.global .pc .philosophy1 .leftContent {
            padding-bottom: 95%;
        }
        .philosophy .pc .philosophy2 .rightContent {
            position: relative;
            height: 0;
            padding-bottom: 55%;
            overflow: hidden;
        }
        .philosophy.global .pc .philosophy2 .rightContent {
            padding-bottom: 62%;
        }
        .philosophy .pc .philosophy1 .leftContent img,
        .philosophy .pc .philosophy2 .rightContent img {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .philosophy .pc .philosophy2 .leftContent .txtArea h2 {
            letter-spacing: 1.3px;
        }
        .philosophy .pc .txtArea h2 br {
            display: block;
        }
    }
    @media all and (max-width: 767px) {
        .philosophy .pc .philosophy1 .rightContent .txtArea h2 br {
            display: block;
        }
    }
    @media all and (max-width: 640px) {
        .philosophy .pc {
            display: none;
        }
        .philosophy .mobile {
            display: block;
            width: 100%;
            background: center top / cover url("../images/philosophy-mobile.png") no-repeat;
            padding: 212px 0 210px
        }
        .philosophy .mobile .layout {
            width: 81%;
        }
        .philosophy .mobile .txtArea * {
            color: var(--color-white);
        }
        .philosophy .mobile .txtArea1 {
            margin-bottom: 180vh
        }
        .philosophy .mobile .txtArea1 h2 {
            margin-bottom: var(--space-77);
        }
        .philosophy .mobile .txtArea2 {
            position: relative;
            margin-bottom: 50vh;
            text-align: right;
        }
        .philosophy .mobile .txtArea3 h2 {
            margin-bottom: 40vh;
            font-weight: var(--fw-light);
            font-size: var(--font-25);
            line-height: 1.05;
            letter-spacing: 1.7px;
        }
        .philosophy .mobile .txtArea3 h2 strong {
            font-weight: var(--fw-bold);
            letter-spacing: 0.4px;
        }
        .philosophy .mobile .txtArea3 br {
            display: block;
        }
    }
    @media all and (max-width: 428px) {
        .philosophy .mobile .txtArea1 {
            margin-bottom: 200vw;
        }
        .philosophy .mobile .txtArea2 {
            margin-bottom: 70vw;
        }
        .philosophy .mobile .txtArea3 h2 {
            margin-bottom: 48vw;
        }
    }
    @media all and (max-width: 414px) {
        .philosophy .mobile .txtArea1 {
            margin-bottom: 198vw;
        }
        .philosophy .mobile .txtArea2 {
            margin-bottom: 68vw;
        }
        .philosophy .mobile .txtArea3 h2 {
            margin-bottom: 46vw;
        }
    }
    @media all and (max-width: 375px) {
        .philosophy .mobile .txtArea1 {
            margin-bottom: 180vw;
        }
        .philosophy .mobile .txtArea2 {
            margin-bottom: 60vw;
        }
        .philosophy .mobile .txtArea3 h2 {
            margin-bottom: 53vw;
        }
    }
    @media all and (max-width: 320px) {
        .philosophy .mobile .txtArea1 {
            margin-bottom: 152vw
        }
        .philosophy .mobile .txtArea2 {
            margin-bottom: 55vw;
        }
        .philosophy .mobile .txtArea3 h2 {
            margin-bottom: 46vw;
        }
    }

/* ingredient */
.ingredient1 {
    position: relative;
    margin-top: 380px;
}
.ingredient1 .itemWrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ingredient1 .itemWrap svg {
    width: 100%;
}

.ingredient2 {
    background-color: #F1F1F1;
    padding-bottom: 14%;
    margin-top: -16%;
}
.ingredient2 .layout {
    width: 75%;
    max-width: unset;
    text-align: right;
    position: relative;
}
.ingredient2 .txtArea {
    position: relative;
}
.ingredient2 .txtArea .textWrap {
    margin-top: var(--space-80)
}
.ingredient2 .textWrap p:nth-child(4) {
    margin-top: var(--space-50)
}
.ingredient2.global .textWrap p:nth-child(4) {
    margin-top: var(--space-70)
}
.ingredient1 .itemWrap.mobile,
.ingredient2 .txtArea.mobile {
    display: none
}
.ingredient2 .svgMac {
    display: none;
}
    /* ingredient1 미디어쿼리 */
    @media all and (min-width: 2000px) {
        /* .ingredient1 {
            padding-bottom: 8.5%
        } */
        .ingredient1 #ani2 {
            padding-bottom: 8.5%
        }
    }
    @media all and (max-width: 1728px) {
        .ingredient1 {
            margin-top: 350px;
        }
    }
    @media all and (max-width: 1440px) {
        .ingredient1 {
            margin-top: 360px;
        }
    }
    @media all and (max-width: 1199px) {
        .ingredient1 {
            margin-top: 270px;
        }
    }
    @media all and (max-width: 1140px) {
        .ingredient1 .txtArea .textWrap {
            margin-top:  70px;
        }
    }
    @media all and (max-width: 1023px) {
        .ingredient1 {
            margin-top: 220px;
            padding-bottom: 19%;
            background-color: #F1F1F1;
        }
        .ingredient1 .itemWrap.pc,
        .ingredient2 .txtArea.pc {
            display: none
        }
        .ingredient1 .itemWrap.mobile,
        .ingredient2 .txtArea.mobile {
            display: block
        }
        .ingredient2 {
            margin-top: 0;
        }
        .ingredient2 .layout {
            width: 81%;
        }
        .ingredient2 .txtArea {
            position: relative;
            text-align: left;
        }
        .ingredient2 .txtArea .textWrap {
            margin-top: 90px;
        }
    }
    @media (min-width:641px) and (max-width: 768px) {
        .ingredient1 {
            margin-top: 155px;
        }
        .ingredient1.mobile .svgTablet {
            display: block;
        }
        .ingredient1.mobile .svgMobile {
            display: none;
        }
    }
    @media all and (max-width: 767px) {
        .ingredient1 {
            margin-top: 155px;
        }
    }
    @media all and (max-width: 640px) {
        .ingredient1.mobile .svgTablet {
            display: block;
        }
        .ingredient1.mobile .svgMobile {
            display: block;
        }
        .ingredient1 .txtArea pre,
        .ingredient2 .textWrap p {
            font-size: var(--font-13);
        }
        .ingredient.global .ingredient2 .txtArea .textWrap {
            margin-top: 100px;
        }
    }

.ingredient3 {
    background-color: #F1F1F1;
    display: flex;
    justify-content: flex-end;
}
.ingredient3 .layout,
.ingredient3 .itemWrap {
    height: 100%;
}
.ingredient3 .inner .itemWrap.pc {
    width: 1920px;
    height: 2271px;
    background: right top / contain url("../images/ingredient-line.svg") no-repeat;
    position: relative;
    z-index: 1;
}
.ingredient3 .itemWrap.pc .item img {
    width: auto;
}
.ingredient3 .itemWrap.pc .item {
    position: absolute;
    display: flex;
    align-items: center;
}
.ingredient3 .itemWrap .item .itemTxt strong {
    display: block;
    font-weight: var(--fw-bold);
}
.ingredient3 .itemWrap .item .itemTxt p {
    font-weight: var(--fw-thin);
    margin-top: 10px;
}
.ingredient3 .itemWrap.pc .item .itemTxt {
    padding-left: 100px;
    font-size: var(--font-21);
}
.ingredient3 .itemWrap.pc .item2 .itemTxt,
.ingredient3 .itemWrap.pc .item5 .itemTxt {
    padding-left: 50px
}
.ingredient3 .itemWrap.pc .item1 {
    top: 88px;
    left: 58%;
}
.ingredient3 .itemWrap.pc .item1 {
    align-items: flex-end;
}
.ingredient3 .itemWrap.pc .item1 .itemTxt {
    margin-bottom: -17px;
}
.ingredient3 .itemWrap.pc .item2 {
    top: 456px;
    left: 30.1%;
    align-items: flex-start;
}
.ingredient3 .itemWrap.pc .item3 {
    top: 850px;
    left: 20.3%;
}
.ingredient3 .itemWrap.pc .item4 {
    top: 1339px;
    left: 29%;
    align-items: flex-start;
}
.ingredient3 .itemWrap.pc .item4 .itemTxt {
    padding-top: 10px;
}
.ingredient3 .itemWrap.pc .item5 {
    top: 1660px;
    left: 58.0%;
}
.ingredient3 .itemWrap.pc .item5 .itemTxt {
    margin-top: -70px
}
.ingredient3 .itemWrap.pc .mobile {
    display: none;
}
    /* ingredient3 미디어쿼리 */
    @media (min-width: 2057px) and (max-width: 2560px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 1780px;
            height: 2784px;
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 148px;
            left: 38%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 587px;
            left: 6.9%;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 990px;
            left: -4.3%;
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 1529px;
            left: 1.8%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 1990px;
            left: 31%;
        }
    }
    @media (min-width: 1921px) and (max-width: 2056px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 1520px;
            height: 2377px;
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 97px;
            left: 44%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 450px;
            left: 9.1%;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 850px;
            left: -5.1%;
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 1339px;
            left: 2.9%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 1690px;
            left: 37%;
        }
    }
    @media all and (max-width: 1728px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 1291px;
            height: 2019px;
        }
        .ingredient3 .itemWrap.pc .item .itemTxt {
            padding-left: 50px;
            font-size: var(--font-18);
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 77px;
            left: 40%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 425px;
            left: 6.3%;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 690px;
            left: -6.1%;
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 1119px;
            left: 1.5%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 1410px;
            left: 35.5%;
        }
    }
    @media all and (max-width: 1440px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 1050px;
            height: 1642px;
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 65px;
            left: 32%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 358px;
            left: 5%;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 581px;
            left: -7.5%;
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 919px;
            left: 1.5%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 1150px;
            left: 35.5%;
        }
    }
    @media all and (max-width: 1140px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 904px;
            height: 1452px;
        }
        .ingredient3 .itemWrap.pc .item .itemTxt {
            padding-left: 25px;
            font-size: var(--font-16);
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 48px;
            left: 40%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 308px;
            left: 5.2%;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 499px;
            left: -7.1%
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 791px;
            left: 1.5%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 984px;
            left: 35.5%;
        }
    }
    @media all and (max-width: 1119px) {
        .ingredient3 .inner .itemWrap.pc {
            width: 880px;
            height: 1377px;
        }
        .ingredient3 .itemWrap.pc .item1 .itemTxt {
            margin-bottom: 0;
        }
        .ingredient3 .itemWrap.pc .item1 {
            top: 45px;
            left: 40%;
        }
        .ingredient3 .itemWrap.pc .item2 {
            top: 268px;
            left: 7.6%;
        }
        .ingredient3 .itemWrap.pc .item2 .itemTxt {
            margin-bottom: 0;
        }
        .ingredient3 .itemWrap.pc .item3 {
            top: 478px;
            left: -7.3%;
        }
        .ingredient3 .itemWrap.pc .item4 {
            top: 761px;
            left: 0.9%;
        }
        .ingredient3 .itemWrap.pc .item5 {
            top: 970px;
            left: 38.9%;
        }
        .ingredient3 .itemWrap.pc .item5 .itemTxt br.reverse {
            display: block;
        }
    }
    @media all and (max-width: 1023px) {
        .ingredient3 .pc {
            display: none;
        }
        .ingredient3 .mobile {
            display: block;
        }
        .ingredient3 {
            padding: 40px 0 250px
        }
        .ingredient3 .inner {
            width: 100%;
            height: auto;
            background:transparent;
            margin-top: 0;
        }
        .ingredient3 .item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 140px;
        }
        .ingredient3 .item .itemTxt {
            text-align: center;
            font-size: var(--font-16);
            color: var(--color-basic);
        }
        .ingredient3 .item .itemTxt strong {
            margin-top: 16px;
        }
        .ingredient3 .item1 .itemTxt strong {
            margin-top:30px;
        }
    }
    @media all and (max-width: 767px) {
        .ingredient3 {
            padding: 20px 0 210px
        }
        .ingredient3 .item {
            padding-top: 160px;
        }
        .ingredient3 .item .itemTxt {
            font-size: var(--font-14);
        }
        .ingredient3 .item .itemTxt strong {
            margin-top: 25px;
        }
        .ingredient3 .item .itemTxt p {
            margin-top: 3px;
        }
        .ingredient3 .item3 .itemTxt br ,
        .ingredient3 .item4 .itemTxt br {
            display: block;
        }
        .ingredient3 .item5 .itemTxt br {
            display: none;
        }
        .ingredient3 .item5 .itemTxt br.reverse {
            display: block;
        }
    }
    @media all and (max-width: 640px) {
        .ingredient3 .item {
            padding-top: 130px;
        }
    }


/* Ingredient Icon Effect */
svg#ingredient-icon1 .svg-elem-1 {
    stroke-dashoffset: 76.93926239013672px;
    stroke-dasharray: 76.93926239013672px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-1 {
    stroke-dashoffset: 153.87852478027344px;
}
svg .svg-elem-2 {
    stroke-dashoffset: 44.636505126953125px;
    stroke-dasharray: 44.636505126953125px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-2 {
    stroke-dashoffset: 89.27301025390625px;
}
svg#ingredient-icon1 .svg-elem-3 {
    stroke-dashoffset: 44.636505126953125px;
    stroke-dasharray: 44.636505126953125px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
        transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-3 {
    stroke-dashoffset: 89.27301025390625px;
}
svg#ingredient-icon1 .svg-elem-4 {
    stroke-dashoffset: 44.636512756347656px;
    stroke-dasharray: 44.636512756347656px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-4 {
    stroke-dashoffset: 89.27302551269531px;
}
svg#ingredient-icon1 .svg-elem-5 {
    stroke-dashoffset: 44.63650894165039px;
    stroke-dasharray: 44.63650894165039px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-5 {
    stroke-dashoffset: 89.27301788330078px;
}
svg#ingredient-icon1 .svg-elem-6 {
    stroke-dashoffset: 64.87379837036133px;
    stroke-dasharray: 64.87379837036133px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-6 {
    stroke-dashoffset: 129.74759674072266px;
}
svg#ingredient-icon1 .svg-elem-7 {
    stroke-dashoffset: 35.10431671142578px;
    stroke-dasharray: 35.10431671142578px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-7 {
    stroke-dashoffset: 70.20863342285156px;
}
svg#ingredient-icon1 .svg-elem-8 {
    stroke-dashoffset: 35.10431671142578px;
    stroke-dasharray: 35.10431671142578px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-8 {
    stroke-dashoffset: 70.20863342285156px;
}
svg#ingredient-icon1 .svg-elem-9 {
    stroke-dashoffset: 35.10431671142578px;
    stroke-dasharray: 35.10431671142578px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-9 {
    stroke-dashoffset: 70.20863342285156px;
}
svg#ingredient-icon1 .svg-elem-10 {
    stroke-dashoffset: 35.10431671142578px;
    stroke-dasharray: 35.10431671142578px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-10 {
    stroke-dashoffset: 70.20863342285156px;
}
svg#ingredient-icon1 .svg-elem-11 {
    stroke-dashoffset: 64.8742446899414px;
    stroke-dasharray: 64.8742446899414px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-11 {
    stroke-dashoffset: 129.7484893798828px;
}
svg#ingredient-icon1 .svg-elem-12 {
    stroke-dashoffset: 76.93852996826172px;
    stroke-dasharray: 76.93852996826172px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-12 {
    stroke-dashoffset: 153.87705993652344px;
}
svg#ingredient-icon1 .svg-elem-13 {
    stroke-dashoffset: 81.15447585392351px;
    stroke-dasharray: 81.15447585392351px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
        transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon1.active .svg-elem-13 {
    stroke-dashoffset: 162.30895170784703px;
}

/* ingredient-icon2 */
svg#ingredient-icon2 .svg-elem-1 {
    stroke-dashoffset: 121.38052083641213px;
    stroke-dasharray: 121.38052083641213px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
        transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
svg#ingredient-icon2.active .svg-elem-1 {
    stroke-dashoffset: 242.76104167282426px;
}

/* ingredient-icon3 */
svg#ingredient-icon3 .svg-elem-1 {
    stroke-dashoffset: 74.56464385986328px;
    stroke-dasharray: 74.56464385986328px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
  svg#ingredient-icon3.active .svg-elem-1 {
    stroke-dashoffset: 149.12928771972656px;
  }
  
  svg#ingredient-icon3 .svg-elem-2 {
    stroke-dashoffset: 37.91919708251953px;
    stroke-dasharray: 37.91919708251953px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-2 {
    stroke-dashoffset: 75.83839416503906px;
  }
  
  svg#ingredient-icon3 .svg-elem-3 {
    stroke-dashoffset: 34.6900520324707px;
    stroke-dasharray: 34.6900520324707px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-3 {
    stroke-dashoffset: 69.3801040649414px;
  }
  
  svg#ingredient-icon3 .svg-elem-4 {
    stroke-dashoffset: 69.50029754638672px;
    stroke-dasharray: 69.50029754638672px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-4 {
    stroke-dashoffset: 139.00059509277344px;
  }
  
  svg#ingredient-icon3 .svg-elem-5 {
    stroke-dashoffset: 74.56464385986328px;
    stroke-dasharray: 74.56464385986328px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-5 {
    stroke-dashoffset: 149.12928771972656px;
  }
  
  svg#ingredient-icon3 .svg-elem-6 {
    stroke-dashoffset: 37.91919708251953px;
    stroke-dasharray: 37.91919708251953px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-6 {
    stroke-dashoffset: 75.83839416503906px;
  }
  
  svg#ingredient-icon3 .svg-elem-7 {
    stroke-dashoffset: 34.6900520324707px;
    stroke-dasharray: 34.6900520324707px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-7 {
    stroke-dashoffset: 69.3801040649414px;
  }
  
  svg#ingredient-icon3 .svg-elem-8 {
    stroke-dashoffset: 69.50029754638672px;
    stroke-dasharray: 69.50029754638672px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
  svg#ingredient-icon3.active .svg-elem-8 {
    stroke-dashoffset: 139.00059509277344px;
  }
  
  svg#ingredient-icon3 .svg-elem-9 {
    stroke-dashoffset: 74.79888916015625px;
    stroke-dasharray: 74.79888916015625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-9 {
    stroke-dashoffset: 149.5977783203125px;
  }
  
  svg#ingredient-icon3 .svg-elem-10 {
    stroke-dashoffset: 38.007781982421875px;
    stroke-dasharray: 38.007781982421875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-10 {
    stroke-dashoffset: 76.01556396484375px;
  }
  
  svg#ingredient-icon3 .svg-elem-11 {
    stroke-dashoffset: 34.77833557128906px;
    stroke-dasharray: 34.77833557128906px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-11 {
    stroke-dashoffset: 69.55667114257812px;
  }
  
  svg#ingredient-icon3 .svg-elem-12 {
    stroke-dashoffset: 69.75096893310547px;
    stroke-dasharray: 69.75096893310547px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-12 {
    stroke-dashoffset: 139.50193786621094px;
  }
  
  svg#ingredient-icon3 .svg-elem-13 {
    stroke-dashoffset: 74.79888916015625px;
    stroke-dasharray: 74.79888916015625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-13 {
    stroke-dashoffset: 149.5977783203125px;
  }
  
  svg#ingredient-icon3 .svg-elem-14 {
    stroke-dashoffset: 38.007781982421875px;
    stroke-dasharray: 38.007781982421875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-14 {
    stroke-dashoffset: 76.01556396484375px;
  }
  
  svg#ingredient-icon3 .svg-elem-15 {
    stroke-dashoffset: 34.77833557128906px;
    stroke-dasharray: 34.77833557128906px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-15 {
    stroke-dashoffset: 69.55667114257812px;
  }
  
  svg#ingredient-icon3 .svg-elem-16 {
    stroke-dashoffset: 69.75096893310547px;
    stroke-dasharray: 69.75096893310547px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-16 {
    stroke-dashoffset: 139.50193786621094px;
  }
  
  svg#ingredient-icon3 .svg-elem-17 {
    stroke-dashoffset: 74.79889678955078px;
    stroke-dasharray: 74.79889678955078px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-17 {
    stroke-dashoffset: 149.59779357910156px;
  }
  
  svg#ingredient-icon3 .svg-elem-18 {
    stroke-dashoffset: 38.007781982421875px;
    stroke-dasharray: 38.007781982421875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-18 {
    stroke-dashoffset: 76.01556396484375px;
  }
  
  svg#ingredient-icon3 .svg-elem-19 {
    stroke-dashoffset: 34.778350830078125px;
    stroke-dasharray: 34.778350830078125px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-19 {
    stroke-dashoffset: 69.55670166015625px;
  }

  svg#ingredient-icon3 .svg-elem-20 {
    stroke-dashoffset: 69.75096893310547px;
    stroke-dasharray: 69.75096893310547px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-20 {
    stroke-dashoffset: 139.50193786621094px;
  }
  
  svg#ingredient-icon3 .svg-elem-21 {
    stroke-dashoffset: 74.79889678955078px;
    stroke-dasharray: 74.79889678955078px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-21 {
    stroke-dashoffset: 149.59779357910156px;
  }
  
  svg#ingredient-icon3 .svg-elem-22 {
    stroke-dashoffset: 38.007781982421875px;
    stroke-dasharray: 38.007781982421875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-22 {
    stroke-dashoffset: 76.01556396484375px;
  }
  
  svg#ingredient-icon3 .svg-elem-23 {
    stroke-dashoffset: 34.778350830078125px;
    stroke-dasharray: 34.778350830078125px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-23 {
    stroke-dashoffset: 69.55670166015625px;
  }
  
  svg#ingredient-icon3 .svg-elem-24 {
    stroke-dashoffset: 69.75096893310547px;
    stroke-dasharray: 69.75096893310547px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-24 {
    stroke-dashoffset: 139.50193786621094px;
  }
  
  svg#ingredient-icon3 .svg-elem-25 {
    stroke-dashoffset: 74.56463623046875px;
    stroke-dasharray: 74.56463623046875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-25 {
    stroke-dashoffset: 149.1292724609375px;
  }
  
  svg#ingredient-icon3 .svg-elem-26 {
    stroke-dashoffset: 37.9192008972168px;
    stroke-dasharray: 37.9192008972168px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  ssvg#ingredient-icon3vg.active .svg-elem-26 {
    stroke-dashoffset: 75.8384017944336px;
  }
  
  svg#ingredient-icon3 .svg-elem-27 {
    stroke-dashoffset: 34.6900520324707px;
    stroke-dasharray: 34.6900520324707px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-27 {
    stroke-dashoffset: 69.3801040649414px;
  }
  
  svg#ingredient-icon3 .svg-elem-28 {
    stroke-dashoffset: 69.50028991699219px;
    stroke-dasharray: 69.50028991699219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-28 {
    stroke-dashoffset: 139.00057983398438px;
  }
  
  svg#ingredient-icon3svg .svg-elem-29 {
    stroke-dashoffset: 74.56463623046875px;
    stroke-dasharray: 74.56463623046875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-29 {
    stroke-dashoffset: 149.1292724609375px;
  }
  
  svg#ingredient-icon3 .svg-elem-30 {
    stroke-dashoffset: 37.9192008972168px;
    stroke-dasharray: 37.9192008972168px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-30 {
    stroke-dashoffset: 75.8384017944336px;
  }
  
  svg#ingredient-icon3 .svg-elem-31 {
    stroke-dashoffset: 34.6900520324707px;
    stroke-dasharray: 34.6900520324707px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-31 {
    stroke-dashoffset: 69.3801040649414px;
  }
  
  svg#ingredient-icon3 .svg-elem-32 {
    stroke-dashoffset: 69.50028991699219px;
    stroke-dasharray: 69.50028991699219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-32 {
    stroke-dashoffset: 139.00057983398438px;
  }
  
  svg#ingredient-icon3 .svg-elem-33 {
    stroke-dashoffset: 74.69928741455078px;
    stroke-dasharray: 74.69928741455078px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-33 {
    stroke-dashoffset: 149.39857482910156px;
  }
  
  svg#ingredient-icon3 .svg-elem-34 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-34 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-35 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-35 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-36 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-36 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-37 {
    stroke-dashoffset: 74.69928741455078px;
    stroke-dasharray: 74.69928741455078px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-37 {
    stroke-dashoffset: 149.39857482910156px;
  }
  
  svg#ingredient-icon3 .svg-elem-38 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-38 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-39 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-39 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-40 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-40 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-41 {
    stroke-dashoffset: 74.69927978515625px;
    stroke-dasharray: 74.69927978515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-41 {
    stroke-dashoffset: 149.3985595703125px;
  }
  
  svg#ingredient-icon3 .svg-elem-42 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-42 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-43 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-43 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-44 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-44 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-45 {
    stroke-dashoffset: 74.69927978515625px;
    stroke-dasharray: 74.69927978515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-45 {
    stroke-dashoffset: 149.3985595703125px;
  }
  
  svg#ingredient-icon3 .svg-elem-46 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-46 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-47 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-47 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-48 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-48 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-49 {
    stroke-dashoffset: 74.69927215576172px;
    stroke-dasharray: 74.69927215576172px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-49 {
    stroke-dashoffset: 149.39854431152344px;
  }
  
  svg#ingredient-icon3 .svg-elem-50 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-50 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-51 {
    stroke-dashoffset: 34.73516082763672px;
    stroke-dasharray: 34.73516082763672px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-51 {
    stroke-dashoffset: 69.47032165527344px;
  }
  
  svg#ingredient-icon3 .svg-elem-52 {
    stroke-dashoffset: 69.62905883789062px;
    stroke-dasharray: 69.62905883789062px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-52 {
    stroke-dashoffset: 139.25811767578125px;
  }
  
  svg#ingredient-icon3 .svg-elem-53 {
    stroke-dashoffset: 74.69927215576172px;
    stroke-dasharray: 74.69927215576172px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-53 {
    stroke-dashoffset: 149.39854431152344px;
  }
  
  svg#ingredient-icon3 .svg-elem-54 {
    stroke-dashoffset: 37.97259521484375px;
    stroke-dasharray: 37.97259521484375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-54 {
    stroke-dashoffset: 75.9451904296875px;
  }
  
  svg#ingredient-icon3 .svg-elem-55 {
    stroke-dashoffset: 34.73516082763672px;
    stroke-dasharray: 34.73516082763672px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-55 {
    stroke-dashoffset: 69.47032165527344px;
  }
  
  svg#ingredient-icon3 .svg-elem-56 {
    stroke-dashoffset: 69.62905883789062px;
    stroke-dasharray: 69.62905883789062px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-56 {
    stroke-dashoffset: 139.25811767578125px;
  }
  
  svg#ingredient-icon3 .svg-elem-57 {
    stroke-dashoffset: 74.69927978515625px;
    stroke-dasharray: 74.69927978515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-57 {
    stroke-dashoffset: 149.3985595703125px;
  }
  
  svg#ingredient-icon3 .svg-elem-58 {
    stroke-dashoffset: 37.972591400146484px;
    stroke-dasharray: 37.972591400146484px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-58 {
    stroke-dashoffset: 75.94518280029297px;
  }
  
  svg#ingredient-icon3 .svg-elem-59 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-59 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-60 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg.active .svg-elem-60 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-61 {
    stroke-dashoffset: 74.69927978515625px;
    stroke-dasharray: 74.69927978515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-61 {
    stroke-dashoffset: 149.3985595703125px;
  }
  
  svg#ingredient-icon3 .svg-elem-62 {
    stroke-dashoffset: 37.972591400146484px;
    stroke-dasharray: 37.972591400146484px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-62 {
    stroke-dashoffset: 75.94518280029297px;
  }
  
  svg#ingredient-icon3 .svg-elem-63 {
    stroke-dashoffset: 34.73515319824219px;
    stroke-dasharray: 34.73515319824219px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-63 {
    stroke-dashoffset: 69.47030639648438px;
  }
  
  svg#ingredient-icon3 .svg-elem-64 {
    stroke-dashoffset: 69.6290512084961px;
    stroke-dasharray: 69.6290512084961px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-64 {
    stroke-dashoffset: 139.2581024169922px;
  }
  
  svg#ingredient-icon3 .svg-elem-65 {
    stroke-dashoffset: 110.98947505503725px;
    stroke-dasharray: 110.98947505503725px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon3.active .svg-elem-65 {
    stroke-dashoffset: 221.9789501100745px;
  }
  

/* ingredient-icon4 */
/***************************************************
 * Generated by SVG Artista on 7/1/2024, 10:08:54 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 svg#ingredient-icon4 .svg-elem-1 {
    stroke-dashoffset: 36.685943603515625px;
    stroke-dasharray: 36.685943603515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-1 {
    stroke-dashoffset: 73.37188720703125px;
  }
  
  svg#ingredient-icon4 .svg-elem-2 {
    stroke-dashoffset: 34.5911750793457px;
    stroke-dasharray: 34.5911750793457px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-2 {
    stroke-dashoffset: 69.1823501586914px;
  }
  
  svg#ingredient-icon4 .svg-elem-3 {
    stroke-dashoffset: 83.07085418701172px;
    stroke-dasharray: 83.07085418701172px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-3 {
    stroke-dashoffset: 166.14170837402344px;
  }
  
  svg#ingredient-icon4 .svg-elem-4 {
    stroke-dashoffset: 36.68593978881836px;
    stroke-dasharray: 36.68593978881836px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-4 {
    stroke-dashoffset: 73.37187957763672px;
  }
  
  svg#ingredient-icon4 .svg-elem-5 {
    stroke-dashoffset: 34.59117889404297px;
    stroke-dasharray: 34.59117889404297px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-5 {
    stroke-dashoffset: 69.18235778808594px;
  }
  
  svg#ingredient-icon4 .svg-elem-6 {
    stroke-dashoffset: 83.07024383544922px;
    stroke-dasharray: 83.07024383544922px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-6 {
    stroke-dashoffset: 166.14048767089844px;
  }
  
  svg#ingredient-icon4 .svg-elem-7 {
    stroke-dashoffset: 36.68593978881836px;
    stroke-dasharray: 36.68593978881836px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-7 {
    stroke-dashoffset: 73.37187957763672px;
  }
  
  svg#ingredient-icon4 .svg-elem-8 {
    stroke-dashoffset: 34.59117889404297px;
    stroke-dasharray: 34.59117889404297px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-8 {
    stroke-dashoffset: 69.18235778808594px;
  }
  
  svg#ingredient-icon4 .svg-elem-9 {
    stroke-dashoffset: 83.07086181640625px;
    stroke-dasharray: 83.07086181640625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-9 {
    stroke-dashoffset: 166.1417236328125px;
  }
  
  svg#ingredient-icon4 .svg-elem-10 {
    stroke-dashoffset: 83.07086181640625px;
    stroke-dasharray: 83.07086181640625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-10 {
    stroke-dashoffset: 166.1417236328125px;
  }
  
  svg#ingredient-icon4 .svg-elem-11 {
    stroke-dashoffset: 36.685943603515625px;
    stroke-dasharray: 36.685943603515625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-11 {
    stroke-dashoffset: 73.37188720703125px;
  }
  
  svg#ingredient-icon4 .svg-elem-12 {
    stroke-dashoffset: 34.5911750793457px;
    stroke-dasharray: 34.5911750793457px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-12 {
    stroke-dashoffset: 69.1823501586914px;
  }
  
  svg#ingredient-icon4 .svg-elem-13 {
    stroke-dashoffset: 110.98947505503725px;
    stroke-dasharray: 110.98947505503725px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon4.active .svg-elem-13 {
    stroke-dashoffset: 221.9789501100745px;
  }
  

/* ingredient-icon5 */
/***************************************************
 * Generated by SVG Artista on 7/1/2024, 10:14:40 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 svg#ingredient-icon5 .svg-elem-1 {
    stroke-dashoffset: 126.25504302978516px;
    stroke-dasharray: 126.25504302978516px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-1 {
    stroke-dashoffset: 252.5100860595703px;
  }
  
  svg#ingredient-icon5 .svg-elem-2 {
    stroke-dashoffset: 154.7454833984375px;
    stroke-dasharray: 154.7454833984375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-2 {
    stroke-dashoffset: 309.490966796875px;
  }
  
  svg#ingredient-icon5 .svg-elem-3 {
    stroke-dashoffset: 126.25505065917969px;
    stroke-dasharray: 126.25505065917969px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-3 {
    stroke-dashoffset: 252.51010131835938px;
  }
  
  svg#ingredient-icon5 .svg-elem-4 {
    stroke-dashoffset: 140.4937744140625px;
    stroke-dasharray: 140.4937744140625px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-4 {
    stroke-dashoffset: 280.987548828125px;
  }
  
  svg#ingredient-icon5 .svg-elem-5 {
    stroke-dashoffset: 126.25503540039062px;
    stroke-dasharray: 126.25503540039062px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-5 {
    stroke-dashoffset: 252.51007080078125px;
  }
  
  svg#ingredient-icon5 .svg-elem-6 {
    stroke-dashoffset: 140.49375915527344px;
    stroke-dasharray: 140.49375915527344px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-6 {
    stroke-dashoffset: 280.9875183105469px;
  }
  
  svg#ingredient-icon5 .svg-elem-7 {
    stroke-dashoffset: 154.7454833984375px;
    stroke-dasharray: 154.7454833984375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-7 {
    stroke-dashoffset: 309.490966796875px;
  }
  
  svg#ingredient-icon5 .svg-elem-8 {
    stroke-dashoffset: 126.25505065917969px;
    stroke-dasharray: 126.25505065917969px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-8 {
    stroke-dashoffset: 252.51010131835938px;
  }
  
  svg#ingredient-icon5 .svg-elem-9 {
    stroke-dashoffset: 110.98947505503725px;
    stroke-dasharray: 110.98947505503725px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
            transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  }
  
  svg#ingredient-icon5.active .svg-elem-9 {
    stroke-dashoffset: 221.9789501100745px;
  }
  
    /* 미디어쿼리 */
    @media all and (max-width: 1440px) {
        svg#ingredient-icon5 {
            width: 250px;
        }
    }
    @media all and (max-width: 1199px) {
        svg#ingredient-icon1 {
            width: 102px;
        }
        svg#ingredient-icon2 {
            width: 30px;
        }   
        svg#ingredient-icon3 {
            width: 132px;
        }
        svg#ingredient-icon4 {
            width:167px;
        }
        svg#ingredient-icon5 {
            width: 230px;
        }
    }
    @media all and (max-width: 1023px) {
        svg#ingredient-icon5 {
            width: 250px;
        }
    }
    @media all and (max-width: 900px) {
        svg#ingredient-icon1 {
            -webkit-transform: rotate(-32deg);
            transform: rotate(-32deg);
        }
        svg#ingredient-icon4 {
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }
        svg#ingredient-icon5 {
            -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
        }
    }
    @media all and (max-width: 767px) {
        svg#ingredient-icon1 {
            width: 90px;
        }
        svg#ingredient-icon2 {
            width: 25px;
        }   
        svg#ingredient-icon3 {
            width: 79.5px;
        }
        svg#ingredient-icon4 {
            width:95px;
        }
        svg#ingredient-icon5 {
            width:150px;
        }
    }
    @media all and (max-width: 640px) {
        svg#ingredient-icon1 {
            width: 75px;
            -webkit-transform: rotate(-32deg);
            transform: rotate(-32deg);
        }
        svg#ingredient-icon2 {
            width: 18px;
        }   
        svg#ingredient-icon3 {
            width: 64.5px;
        }
        svg#ingredient-icon4 {
            width:80px;
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }
        svg#ingredient-icon5 {
            width: 135px;
            -webkit-transform: rotate(-9deg);
            transform: rotate(-9deg);
        }
    }

    /* Clinical research */
.clinical .layout {
    width: 81%;
    max-width: 1330px;
}
.clinical h2 {
    text-align: center;
}
.clinical .itemImgWrap .itemImg {
    position: relative;
}
.clinical .itemImgWrap .itemImg span.lable {
    position: absolute;
    font-size: var(--font-17);
}
.clinical1 {
    padding: 405px 0 172px;
    text-align: center;
}
.clinical1 .textWrap {
    margin-top: 87px
}
.clinical1 .clinicalItem {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 48px;
    margin-top: 145px
}
.clinical1 .clinicalItem .itemImgWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 15px;
}
.clinical1 .clinicalItem .itemImg img {
    width: 100%;
}
.clinical1 .clinicalItem .itemTxt {
    font-size: var(--font-19);
}
.clinical1 .clinicalItem .itemTxt strong {
    font-weight: var(--fw-semibold);
}
.clinical1 .itemImgWrap .itemImg span.lable {
    left: 17px;
    top: 8px;
    color: var(--color-white);
    font-weight: var(--fw-thin);
}
.clinical2 .itemImgWrap .itemImg span.lable {
    left: 29px;
    top: 23px;
}
.clinical .clinical2 .itemImgContainer span.lable {
    position: absolute;
    font-weight: var(--fw-light);
    font-size: var(--font-12);
}
.clinical .clinical2 .itemImgContainer .before span.lable {
    left: 15px;
    top: 15px;
}
.clinical .clinical2 .itemImgContainer .after span.lable {
    right: 15px;
    top: 15px;
}
 /* 새로운 CSS 추가 */
.lineEffect {
    position: relative;
    width: 100%;
    height: 1px;
    background: #abaaaa;
    margin: 34px auto 20px auto;
}
.lineEffect.mobile {
    display: none;
}
.clinical2 {
    background-color: #F2F2F2;
    padding: 152px 0 210px;
    text-align: left;
}
.clinical2 .txtArea {
    margin-bottom: 140px;
}
.clinical2 h3 {
    font-size: var(--font-22);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.clinical2 .lineEffect {
    margin: 12px 0 16px
}
.clinical2 .itemInfoLeft .text {
    line-height: 1.6;
    font-weight: var(--fw-light);
}
.clinical2 .clinicalItem:not(:last-of-type) {
    margin-bottom: 297px;
}
.clinical2 .itemImgWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 38px;
    margin-bottom: 59px
}
.clinical2 .itemImgContainer {
    display: none;
}
.clinical2 .itemInfo {
    display: flex;
}
.clinical2 .itemInfo .itemInfoLeft {
    width: 13.2%;
    padding-left: 10px
}
.clinical2 .itemInfo .itemInfoRight {
    width: 86.8%;
    padding-left: 68px;
}
.clinical2 .itemInfo .itemInfoRight .itemList:last-of-type {
    margin-top: 57px
}
.clinical2 .itemInfo .itemInfoRight .itemListWrap {
    display: flex;
    font-weight: var(--fw-light);
}
.clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type {
    width: 43%;
}
.clinical2 .itemInfo .itemInfoRight .itemListWrap ol:last-of-type {
    width: 55%;
}
.clinical2 .itemInfo .itemInfoRight .itemListWrap ol li:not(:last-child) {
    margin-bottom: 7px
}
.clinical1 .textWrap.mobile {
    display: none;
}
.clinical.global .itemInfo .itemInfoRight .itemListWrap span.line-breake {
    display: block;
    padding-left: var(--space-20)
}
    /* Clinical research 미디어쿼리 */
    @media all and (max-width: 1440px) {
        .clinical.global .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            flex-wrap: wrap;
        }
        .clinical.global .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type {
            width: 100%;
            margin-bottom: 7px
        }
        .clinical.global .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:last-of-type {
            width: 100%;
        }
        .clinical.global .itemInfo .itemInfoRight .itemListWrap span.line-breake {
            display: none;
            padding-left: 0
        }
    }
    @media all and (max-width: 1199px) {
        .clinical1 {
            padding: 270px 0 172px;
        }
        .clinical1 .textWrap.pc {
            display: block
        }
        .clinical1 .textWrap {
            margin-top: 67px;
        }
        .clinical1 .clinicalItem {
            grid-gap: 0 28px;
            margin-top: 85px;
        }
        .clinical1 .clinicalItem .itemTxt {
            font-size: var(--font-17);
        }
        .lineEffect {
            margin: 24px auto 12px auto;
        }
        .clinical2 h3 {
            font-size: var(--font-20);
        }
        .clinical2 .itemInfo {
            font-size: var(--font-17);
        }
        .clinical2 .itemImgWrap {
            grid-gap: 0 28px;
            margin-bottom: 39px;
        }
        .clinical2 .txtArea {
            margin-bottom: 100px;
        }
        .clinical2 .clinicalItem:not(:last-of-type) {
            margin-bottom: 200px;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            justify-content: space-between;
        }
        .clinical2 .itemInfo .itemInfoLeft {
            width: 20%;
            padding-left: 10px;
        }
        .clinical2 .itemInfo .itemInfoRight {
            width: 80%;
            padding-left: 45px;
        }
    }
    @media all and (max-width: 1140px) {
        .clinical1 .clinicalItem .itemImgWrap {
            grid-gap: 0 10px;
        }
        .clinical2 h3 {
            font-size: var(--font-18);
        }
        .clinical2 .itemInfo {
            font-size: var(--font-16);
        }
        .clinical2 .itemInfo .itemInfoRight {
            padding-left: 25px;
        }
        .clinical1 .clinicalItem .itemTxt strong {
            display: block;
            margin-bottom: 5px
        }
    }
    @media all and (max-width: 1023px) {
        .clinical1 {
            padding: 240px 0 140px;
        }
        .clinical1 .clinicalItem {
            grid-gap: 0 20px;
            margin-top: 75px;
        }
        .clinical1 .clinicalItem .itemImgWrap {
            grid-gap: 0 10px;
        }
        .clinical1 .clinicalItem .itemTxt {
            font-size: var(--font-15);
        }
        .clinical2 {
            padding: 140px 0 180px;
        }
        .clinical2 h3 {
            font-size: var(--font-16);
        }
        .clinical2 .itemImgWrap {
            grid-gap: 0 20px;
        }
        .clinical2 .itemImgWrap .itemImg span.lable {
            left: 15px;
            top: 15px;
            font-size: var(--font-14);
        }
        .clinical2 .itemInfo {
            font-size: var(--font-15);
        }
        .clinical2 .itemInfo .itemInfoRight {
            padding-left: 25px;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            flex-wrap: wrap;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap br.reverse {
            display: none;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type,
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:last-of-type {
            width:100%;
        }
        .lineEffect.pc {
            display: block;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-child {
            margin-bottom: 7px
        }
        .clinical2 .clinicalItem:not(:last-of-type) {
            margin-bottom: 160px;
        }
    }
    @media all and (max-width: 767px) {
        .clinical .layout {
            width: 81%;
        }
        .lineEffect {
            margin: 20px 0 16px;
        }
        .lineEffect.pc {
            display: none;
        }
        .clinical1 .textWrap.pc,
        .lineEffect.mobile {
            display: none;
        }
        .clinical1 .textWrap.mobile,
        .lineEffect.mobile {
            display: block;
        }
        .clinical1 {
            padding: 196px 0 75px;
            background-color: #f1f1f0;
        }
        .clinical1 .textWrap {
            margin-top: 57px;
        }
        .clinical1 .clinicalItem {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 80px 0;
            margin-top: 120px;
        }
        .clinical1 .clinicalItem .itemTxt,
        .clinical2 .itemInfoLeft .text {
            font-size: var(--font-12);
        }
        .clinical1 .clinicalItem .itemTxt strong {
            display: block;
            margin-bottom: 5px
        }
        .clinical1 .clinicalItem .itemImgWrap {
            grid-gap: 0 8px;
        }
        .clinical1 .textWrap i {
            font-style: normal;
            margin: 21px 0 15px;
            display: block;
        }
        .clinical .clinical1 .itemImgWrap .itemImg span.lable {
            font-size: var(--font-11);
            left: 10px;
            top: 6px;
        }
        .clinical2 {
            padding: 60px 0 210px;
            background-color: #e7e7e6;
        }
        .clinical2 .txtArea {
            margin-bottom: 55px;
        }
        .clinical2 .clinicalItem:not(:last-of-type) {
            margin-bottom: 133px;
        }
        .clinical2 .lineEffect {
            margin: 18px 0 18px;
        }
        .clinical2 .itemImgWrap {
            display: none;
        }
        .clinical2 .itemImgContainer {
            position: relative;
            display: block;
        }
        .clinical2 .before-after {
            position: relative;
            width: 100%;
            padding-top: 100%;
            overflow: hidden;
        }
        .clinical2 .before,
        .clinical2 .after {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background-size: cover;
            background-position: center;
        }
        .clinical2 .before {
            z-index: 2;
            clip-path: inset(0 50% 0 0);
            /* Initial clipping to show left half */
        }
        .clinical2 .handle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            /* Initial position of the handle */
            width: 1px;
            background-color: #fff;
            cursor: ew-resize;
            z-index: 3;
        }
        .clinical2 .handle img {
            z-index: 2;
            position: absolute;
            bottom: 5px;
            width: 7px;
        }
        .clinical2 .handle img.iconLeft {
            left: -17px;
        }
        .clinical2 .handle img.iconRight {
            right: -17px;
        }
        .clinical2 h3 {
            margin-bottom: 7px;
            font-size: var(--font-12);
        }
        .clinical2 .itemInfo {
            flex-direction: column;
        }
        .clinical2 .itemInfo .itemInfoLeft,
        .clinical2 .itemInfo .itemInfoRight {
            width: 100%;
            padding: 0;
            text-align: center;
        }
        .clinical2 .itemInfo .itemInfoRight h3,
        .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            padding-left: 0;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            font-size: var(--font-12);
        }
        .clinical2 .itemInfo .itemInfoRight .itemList:first-of-type {
            margin-top: 44px;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap {
            flex-direction: column;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type,
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:last-of-type {
            width: 100%;
        }
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type,
        .clinical2 .itemInfo .itemInfoRight .itemListWrap ol li:not(:last-child),
        .clinical.global .clinical2 .itemInfo .itemInfoRight .itemListWrap ol:first-of-type {
            margin-bottom: 6px;
        }
        
        .clinical2 .itemInfo .itemInfoRight .itemListWrap br.reverse {
            display: block;
        }
    }

/* Media */
.media {
    margin-top: 177px
}
.media .instagram .layout,
.media .postList .layout,
.media .postDetail .layout {
    width: 79.3%;
    padding: 5% 0 9%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media .postList .layout {
    padding-top: 0
}
.media .instagram .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.media .instagram .item {
    width: 72%;
    display: flex;
    justify-content: flex-end;
}
.media .instagram .item .itemList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 12px 10px;
}
.media .instagram .item .itemList li {
    display: flex;
    position: relative;
}
.media .instagram .item .itemList a {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.media .instagram .item .itemList a img {
    transform: scale(1);
    transition: var(--transition);
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media .instagram .item .itemList a:hover img {
    transform: scale(1.05);
}
.media .instagram .instagramTitle {
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.media .instagram .instagramTitle strong {
    font-size: var(--font-31);
    margin-bottom: 4%;
    font-weight: var(--fw-bold);
}
.media .instagram .instagramTitle strong a:hover {
    color: var(--color-dark);
}
.media .instagram .instagramTitle span {
    display: block;
    margin-bottom: 2px
}
.media .instagram .instagram strong {
    display: block;
    font-weight: var(--fw-semibold);
}
    /* Media 미디어쿼리 */
    @media all and (min-width: 1931px) {
        .media .instagram .layout {
            padding: 4% 0 8%;
        }
        .media .instagram .itemList {
            width: 100%;
        }
    }
    @media all and (max-width: 1728px) { 
        .media .instagram .layout {
            width: 70%;
            padding: 5% 0 10%;
        }
        .media .instagram .instagramTitle strong {
            font-size: var(--font-23);
        }
    }
    @media all and (max-width: 1199px) {
        .media {
            margin-top: 112px;
        }
        .media .instagram .layout {
            padding: 10% 0 15%;
        }
        .media .instagram .item {
            width: 100%;
            justify-content: center;
        }
        .media .instagram .item .itemList {
            grid-template-columns: repeat(4, 1fr);
        }
        .media .instagram .instagramTitle strong {
            font-size: var(--font-20);
        }
    }
    @media all and (max-width: 1023px) {
        .media .postDetail .layout {
            padding: 15% 0 20%;
        }
    }
    @media all and (max-width: 767px) {
        .media {
            margin-top: 91px
        }
        .media .instagram .layout {
            padding: 15% 0 20%;
        }
        .media .instagram .instagramTitle strong {
            font-size: var(--font-16);
            margin-bottom: 20px
        }
        .media .instagram .item .itemList {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 9px;
        }
    }

/* 텍스트형 타입2 */
.media .board .layout {
    display: block;
}
.normalBoardList .tHead {
    display: flex;
    align-items: center;
    height: 55px;
    border: 1px solid #abb1b5;
    border-width: 1px 0;
}
.normalBoardList .tHead .row {
    display: flex;
    align-items: center;
    width: 100%;
}
.normalBoardList .tHead .row .th {
    text-align: center;
}
.normalBoardList .tHead .row .number,
.normalBoardList .tBody .row .numberContent {
    flex: 0 0 108px;
    text-align: center;
}
.normalBoardList .tHead .row .subject,
.normalBoardList .tBody .row .subjectContent {
    flex: 1 1 auto;
}
.normalBoardList .tHead .row .date,
.normalBoardList .tBody .row .dateContent {
    flex: 0 0 180px;
}
.normalBoardList .tHead .row span {
    color: var(--color-dark);
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
}
.normalBoardList .tBody .row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-18) 0;
    border-bottom: var(--border);
}
.normalBoardList .tBody .row .td {
    font-weight: var(--fw-light);
    font-size: var(--font-15);
}
.normalBoardList .tBody .row .subjectContent {
    text-align: center;
    font-weight: var(--fw-regular);
}
.normalBoardList .tBody .row .subjectContent a:hover p {
    color: var(--color-dark);
}
.normalBoardList .tBody .row .subjectContent img {
    width: 40px;
    margin-right: var(--space-20);
}
.normalBoardList .tBody .row .dateContent {
    color: var(--color-basic);
    text-align: center;
    font-weight: var(--fw-light);
}
.normalBoardList .tBody .row.topic .noticeTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 32px;
    margin: 0 auto;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-12);
    font-weight: var(--fw-bold);
}
/* .normalBoardList .tBody .row.topic .noticeTxt {
    width: 60px;
} */
    /* 미디어쿼리 1200px이하 */
    @media all and (max-width: 1200px) {
        .media .postList .layout {
            width: 90%;
            padding-top: 0;
            padding-bottom: 20%
        }
        .normalBoardList .tHead {
            height: 54px;
        }
        .normalBoardList .tBody .row .td {
            font-size: var(--font-15)
        }
        .normalBoardList .tHead .row .number,
        .normalBoardList .tBody .row .numberContent {
            flex: 0 0 90px;
        }
        .normalBoardList .tHead .row .date,
        .normalBoardList .tBody .row .dateContent {
            flex: 0 0 140px;
        }
        .normalBoardList .tBody .row .subjectContent {
            margin: 0 auto
        }
        .normalBoardList .tBody .row .subjectContent img {
            width: 34px;
            margin-right: var(--space-15);
        }
    }
    /* 미디어쿼리 768px이하 */
    @media all and (max-width: 1000px) {
        .normalBoardList .tHead {
            height: 50px;
        }
        .normalBoardList .tBody .row {
            padding: var(--space-18) 0
        }
        .normalBoardList .tHead .row .date,
        .normalBoardList .tBody .row .dateContent {
            flex: 0 0 110px;
        }
        .normalBoardList .tBody .row .subjectContent img {
            width: 28px;
            margin-right: var(--space-10);
        }
    }
    /* 미디어쿼리 768px이하 */
    @media all and (max-width: 640px) {
        .normalBoardList .tHead {
            height: 40px;
            /* display: none; */
        }
        .normalBoardList {
            border-top: 1px solid #abb1b5;
        }
        .normalBoardList .tHead .row span {
            font-size: var(--font-13);
        }
        .normalBoardList .tHead .row .th.date {
            display: none;
            font-size: var(--font-13);
        }
        .normalBoardList .tBody .row {
            padding: var(--space-15) 0 var(--space-15) var(--space-45);
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .normalBoardList .tHead .row .number,
        .normalBoardList .tBody .row .numberContent {
            flex: 0 0 32px;
        }
        .normalBoardList .tBody .row .subjectContent .ellipsis1 {
            font-size: var(--font-13);
        }
        .normalBoardList .tHead .row .date,
        .normalBoardList .tBody .row .dateContent {
            flex: 0 0 50px;
        }
        .normalBoardList .tBody .row .numberContent {
            position: absolute;
            left: 0;
            width: 32px;
            font-size: var(--font-13);
        }
        .normalBoardList .tBody .row.topic .noticeTxt {
            width: 32px;
            height: 22px;
        }
        .normalBoardList .tBody .row .dateContent {
            flex: unset;
            margin: var(--space-5) auto 0;
            font-size: var(--font-12);
            text-align: center;
        }
        .en .normalBoardList .tBody .row .numberContent {
            width: 48px;
        }
        .en .normalBoardList .tBody .row.topic .noticeTxt {
            width: 46px;
            height: 20px;
            font-size: var(--font-10);
        }
        .en .normalBoardList .tBody .row {
            padding-left: var(--space-60)
        }
    }

    
/* 게시글 상세보기 */
.postDetail {
    min-height: 40vw;
}
.boardView {
    border-bottom: var(--border)
}
.boardView .viewHead {
    border: var(--border);
    border-width: 1px 0;
    text-align: center;
    padding: var(--space-30) 0;
}
.boardView .viewTitle {
    font-size: var(--font-22);
    margin-bottom: var(--space-15);
    font-weight: var(--fw-bold);
    word-wrap: break-word;
}
.boardView .viewDate {
    display: block;
    font-size: var(--font-14);
    color:var(--color-basic);
    font-weight: var(--fw-light);
}
.boardView .postTitleSub {
    font-size: var(--font-25);
    color: var(--color-basic);
    font-weight: var(--fw-medium);
    display: block;
}
.boardView .viewFile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-20);
}
.boardView .viewFile .fileList {
    padding: var(--space-7) var(--space-15);
    font-size: var(--font-14);
    border:var(--border);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    color: var(--color-gray99);
    border-radius: 10000px;
}
.boardView .viewFile .fileList:not(:last-of-type) {
    margin-right: var(--space-10);
}
.boardView .viewFile .fileList svg {
    width: 13px;
    margin-right: var(--space-10)
}
.boardView .viewFile .fileList svg Path {
    fill: var(--color-basic)
}
.boardView .viewFile .fileList:hover {
    border:1px solid var(--color-basic);
    color: var(--color-basic)
}
.boardView .viewContent {
    font-size: var(--font-16);
    font-weight: var(--fw-regular);
    color: var(--color-basic);
    /* text-align: center; */
    padding: var(--space-40) 5%;
    line-height: 1.4;
}
.boardView .viewContent * {
    word-break: break-word;
    font-family: inherit !important;
    font-weight: revert;
    /* font-size: inherit !important; */
}
.boardView .viewContent img {
    width: auto;
    margin:0 auto
}
    /* 게시글 상세보기 미디어쿼리 */
    @media (max-width: 1200px) {
        .media .postDetail .layout {
            width: 90%;
        }
        .boardView .viewTitle {
            font-size: var(--font-20);
        }
        .boardView .viewContent img {
            width: 100%;
            max-width: auto !important;
        }
        .boardView .viewContent {
            font-size: var(--font-15);
        }
    }
    @media (max-width: 1000px) {
        .boardView .viewHead {
            padding: var(--space-25) var(--space-10);
        }
        .boardView .viewContent {
            font-size: var(--font-15);
            padding: var(--space-35) var(--space-10);
        }
    }
    @media (max-width: 640px) {
        .boardView .viewHead {
            padding: var(--space-15) var(--space-10);
        }
        .boardView .viewContent {
            padding: var(--space-25) var(--space-10);
        }
        .boardView .viewTitle {
            font-size: var(--font-17);
            margin-bottom: var(--space-10);
        }
        .boardView .viewDate {
            font-size: var(--font-13);
        }
        .boardView .viewFile .fileList {
            padding: var(--space-5) var(--space-12);
            font-size: var(--font-13);
        }
        .boardView .viewFile .fileList svg {
            width: 11px;
            margin-right: var(--space-7);
        }
    }

/* 게시판 하단 & 버튼 */
.boardBottom {
    display: flex;
    justify-content: center;
    margin-top: var(--space-70);
}
.boardBottom .btnSubmit {
    width: 75px;
    height: 35px;
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-basic);
}
.boardBottom .btnSubmit:hover {
    transform: translateY(5px)
}
    /* 게시판 하단 & 버튼 미디어쿼리 */
    @media all and (max-width:1200px) {
        .boardBottom {
            margin-top: var(--space-40);
        }
    }
    @media all and (max-width:1000px) {
        /* .boardBottom .btnSubmit {
            width: 80px;
            height: 80px;
            font-size: var(--font-20);
        } */
    }
    @media all and (max-width:640px) {
        .boardBottom {
            margin-top: var(--space-30);
        }
        .boardBottom .btnSubmit {
            width: 63px;
            height: 32px;
            font-size: var(--font-14);
        }
    }

/* 페이징 */
.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-100)
}
.pagination .pagingNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8B8B8B;
    margin: 0 var(--space-8);
    font-size: var(--font-12);
    font-weight: var(--fw-normal);
    transition: var(--transition);
}
/* .pagination .current,
.pagination .pagingNumber:hover {
    color: var(--color-white);
    font-weight: var(--fw-bold);
    background-color: var(--color-dark);
} */
.pagination .current,
.pagination .pagingNumber:hover {
    color: var(--color-dark);
}
.pagination .pagingFrist,
.pagination .pagingLast,
.pagination .pagingPrev,
.pagination .pagingNext {
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pagination .pagingNext {
    margin: 0 var(--space-5) 0 var(--space-15)
}
.pagination .pagingPrev {
    margin: 0 var(--space-15) 0 var(--space-5)
}
.pagination .pagingPrev a:hover,
.pagination .pagingNex a:hover {
    opacity: 0.5;
}
.pagination .pagingFrist a,
.pagination .pagingLast a,
.pagination .pagingPrev a,
.pagination .pagingNext a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination img {
    width: 100%
}
    /* 페이징 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .pagination {
            margin-top: var(--space-100)
        }
        .pagination .pagingNumber {
            font-size: var(--font-16);
        }
        .pagination .pagingFrist,
        .pagination .pagingLast,
        .pagination .pagingPrev,
        .pagination .pagingNext {
            width: 18px;
        }
    }
    @media all and (max-width: 1000px) {
        .pagination {
            margin-top: var(--space-80)
        }
        .pagination .pagingNumber {
            margin: 0 var(--space-10);
            font-size: var(--font-14);
        }
        .pagination .pagingNext {
            margin: 0 var(--space-5) 0 var(--space-15)
        }
        .pagination .pagingPrev {
            margin: 0 var(--space-15) 0 var(--space-5)
        }
        .pagination .pagingFrist,
        .pagination .pagingLast,
        .pagination .pagingPrev,
        .pagination .pagingNext {
            width: 16px;
        }
    }
    @media all and (max-width:640px) {
        .pagination {
            margin-top: var(--space-60)
        }
        .pagination .pagingNumber {
            margin: 0 var(--space-5);
            font-size: var(--font-12);
        }
        .pagination .pagingFrist,
        .pagination .pagingLast,
        .pagination .pagingPrev,
        .pagination .pagingNext {
            width: 12px;
        }
        .pagination .pagingNext {
            margin: 0 var(--space-5) 0 var(--space-15)
        }
        .pagination .pagingPrev {
            margin: 0 var(--space-15) 0 var(--space-5)
        }
    }


    /* Clinic */
.clinic {
    margin: 274px 0 140px;
}
.clinic .layout {
    width: 79.3%;
}
.clinic1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-75);
}
.clinic1 h4 {
    font-weight: var(--fw-bold);
    font-size: var(--font-25);
}
.clinic2 h4 {
    display: none;
}
.clinic1 .search {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    max-width: 420px;
    color:var(--color-white)
}
.clinic1 .search form {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: transparent;
    border: var(--border);
    overflow: hidden;
}
.clinic1 .search .form-input,
.clinic1 .search .form-select,
.clinic1 .search .form-button {
    height:55px;
}
.clinic1 .search .form-input,
.clinic1 .search .form-select {
    padding: 0 var(--space-10);
    border-right: 0;
    color: var(--color-basic);
    font-size: var(--font-16);
}
.clinic1 .search .form-select {
    flex: 0 0 90px;
    padding: 0 var(--space-10);
    background-position: right var(--space-12) center;
    background-size: 10px auto;
    background-image: url("../../views/board/bootstrap/images/icon-select.svg");
    background-repeat: no-repeat;
    background-color: transparent;
    position: relative;
    border-right: var(--border);
    border-radius: 0 !important;
}
.clinic1 .search .form-select option {
    background: var(--color-black);
    padding: 3px 0;
}
.clinic1 .search .form-input {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
    font-size: var(--font-16);
}
.clinic1 .search .form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 55px;
    background: #727171
}
.clinic1 .search .form-button img {
    width:18px;
}
.clinic2 {
    margin-bottom: 90px
}
.clinic2 .map {
    width: 100%;
    height: 540px;
}
.clinic2 .info-title {
    padding: 8px 5px;
    white-space: nowrap;
    font-size: var(--font-15);
}
.clinic3 {
    margin-bottom: var(--space-60)
}
.clinic3 .clinicList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--space-75) var(--space-18);
}
.clinic3 .clinicList .post {
    text-align: center;
}
.clinic3 .clinicList .post .postTitle {
    font-size: var(--font-17);
    display: block;
    margin-top: var(--space-25);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    word-break: break-all;
}
.clinic3 .clinicList .post .postImg {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 53.3900%;
    overflow: hidden;
    background-color: #F8F9F9;
}
.clinic3 .clinicList .post .postImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: var(--transition);
}
.clinic3 .clinicList .post .postImg:hover img {
    filter: grayscale(0%);
}
.clinic4 p {
    font-size: var(--font-12);
    text-align: center;
    color: #B3B3B4;
}
    /* Clinic 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .clinic {
            margin: 214px 0 140px;
        }
        .clinic .layout {
            width: 90%;
        }
        .clinic1 {
            margin-bottom: var(--space-60)
        }
        .clinic1 .search .form-input,
        .clinic1 .search .form-select,
        .clinic1 .search .form-button {
            height:50px;
            font-size: var(--font-14);
        }
        .clinic1 .search .form-button {
            flex: 0 0 50px;
        }
        .clinic1 .search .form-select {
            flex: 0 0 20%;
            padding: 0 var(--space-10);
        }
        .clinic1 .search .form-button img {
            width: 13px;
        }
        .clinic2 {
            margin-bottom: var(--space-45);
        }
        .clinic2 .map {
            height: 450px;
        }
        .clinic3 .clinicList {
            grid-gap: var(--space-60) var(--space-18);
        }
        .clinic3 .clinicList .post .postTitle {
            font-size: var(--font-16);
            margin-top: var(--space-20)
        }
    }
    @media all and (max-width: 1000px) {
        .clinic {
            margin: 180px 0 130px;
        }
        .clinic1 {
            margin-bottom: var(--space-40)
        }
        .clinic1 h4 {
            font-size: var(--font-20);
        }
        .clinic1 .search .form-select {
            flex: 0 0 80px;
        }
        .clinic1 .search .form-input,
        .clinic1 .search .form-select,
        .clinic1 .search .form-button {
            height:45px;
        }
        .clinic1 .search .form-button {
            flex: 0 0 45px;
        }
        .clinic2 {
            margin-bottom: var(--space-30);
        }
        .clinic2 .map {
            height: 400px;
        }
        .clinic3 {
            margin-bottom:  var(--space-50)
        }
        .clinic3 .clinicList {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: var(--space-40) var(--space-15);
        }
        .clinic3 .clinicList .post .postTitle {
            margin-top: var(--space-15);
            font-size: var(--font-14);
        }
    }
    @media all and (max-width: 640px) {
        .clinic {
            margin: 130px 0 100px;
        }
        .clinic .wrap {
            display: flex;
            flex-direction: column-reverse;
        }
        .clinic1 {
            flex-direction: column;
            margin-bottom: var(--space-25);
            padding-bottom: var(--space-18);
            border-bottom: 1px solid var(--color-basic);
        }
        .clinic1 h4 {
            display: none
        }
        .clinic2 h4 {
            text-align: center;
            display: block;
            font-weight: var(--fw-bold);
            font-size: var(--font-18);
            margin-bottom: var(--space-15);
        }
        .clinic1 .search {
            width: 100%;
        }
        .clinic1 .search form {
            flex-wrap: wrap;
            max-width: 100%;
        }
        .clinic1 .search .form-select {
            flex: 0 1 50%;
            border-bottom: var(--border);
            background-position: right var(--space-12) center;
            background-size: 8px auto;
        }
        .clinic1 .search .form-select:last-of-type {
            border-right: 0
        }
        .clinic1 .search .form-input,
        .clinic1 .search .form-select,
        .clinic1 .search .form-button {
            height:42px;
            font-size: var(--font-13);
        }
        .clinic1 .search .form-button {
            flex: 0 0 42px;
        }
        .clinic1 .search .form-button img {
            width: 13px;
        }
        .clinic2 {
            margin-bottom: 13px
        }
        .clinic2 .map {
            height: 256px;
        }
        .clinic3 {
            padding: 0 var(--space-8);
            margin-bottom: var(--space-40)
        }
        .clinic3 .clinicList {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-33) var(--space-16);
        }
        .clinic3 .clinicList .post .postTitle {
            margin-top: var(--space-10);
            font-size: var(--font-12);
        }
    }

/* Clinic View */
.clinicDetail {
    border-top: var(--border)
}
.clinicDetail .clinicName {
    font-size: var(--font-20);
    padding: var(--space-25) 5%;
    border-bottom: var(--border);
    font-weight: var(--fw-bold);
}
.clinicDetail .clinicName span {
    font-weight: var(--fw-regular);
}
.clinicDetail .clinicCall,
.clinicDetail .clinicAddress {
    padding: var(--space-20) 5%;
    display: flex;
    align-items: baseline;
    border-bottom: var(--border);
    font-size: var(--font-16);
}
.clinicDetail .clinicInfo strong {
    font-weight: var(--fw-bold);
    font-size: inherit;
    flex: 0 1 15.221%
}
.clinicDetail .clinicInfo p {
    flex: 0 1 auto;
    flex-wrap: wrap;
}
.clinicDetail .clinicMap {
    padding: var(--space-30) 5% 0;
}
.clinicDetail .clinicMap .map {
    height: 650px;
}
.clinicDetail .clinicBottom {
    display: flex;
    justify-content: flex-end;
    margin: var(--space-40) 5% var(--space-77)
}
.clinicDetail .clinicBottom .btnSubmit {
    width: 134px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    font-size: var(--font-17);
    color: var(--color-gray66);
    border-radius: 8px;
    border: 1px solid var(--color-gray66);
    transition: var(--transition);
}
.clinicDetail .clinicBottom .btnSubmit:hover {
    background-color: #A8A9A9;
    color: var(--color-white);
    border: 1px solid #A8A9A9;
}
    /* Clinic View 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .clinicDetail .clinicName {
            padding: var(--space-25) 5%;
        }
        .clinicDetail .clinicMap {
            padding-top: var(--space-30)
        }
        .clinicDetail .clinicMap .map {
            height: 400px;
        }
        .clinicDetail .clinicBottom .btnSubmit {
            width: 120px;
            height: 40px;
            font-size: var(--font-16);
        }
    }
    @media all and (max-width: 1000px) {
        .clinicDetail .clinicName {
            padding: var(--space-22) var(--space-15);
        }
        .clinicDetail .clinicCall,
        .clinicDetail .clinicAddress {
            padding: var(--space-15) var(--space-15);
        }
        .clinicDetail .clinicInfo strong,
        .clinicDetail .clinicInfo p {
            font-size: var(--font-15);
        }
        .clinicDetail .clinicMap {
            padding: var(--space-20) var(--space-15) 0;
        }
        .clinicDetail .clinicMap .map {
            height: 350px;
        }
        .clinicDetail .clinicBottom .btnSubmit {
            width: 104px;
            height: 38px;
            border-radius: 6px;
            font-size: var(--font-14);
        }
        .clinicDetail .clinicBottom {
            margin: var(--space-30) var(--space-15) var(--space-50)
        }
    }
    @media all and (max-width: 640px) {
        .clinicDetail .clinicName {
            font-size: var(--font-17);
            padding: var(--space-15) var(--space-10);
        }
        .clinicDetail .clinicName span {
            display: block;
            font-size: var(--font-13);
            margin-bottom: 5px;
        }
        .clinicDetail .clinicCall,
        .clinicDetail .clinicAddress {
            padding: var(--space-12) var(--space-10);
            align-items: center;
        }
        .clinicDetail .clinicInfo strong {
            font-size: var(--font-13);
            flex: none;
            width: 85px;
        }
        .clinicDetail .clinicInfo p {
            width: calc(100% - 85px);
            font-size: var(--font-13);
            color: #727171
        }
        .clinicDetail .clinicMap {
            padding: var(--space-12) var(--space-10) 0;
        }
        .clinicDetail .clinicMap .map {
            height: 260px;
        }
        .clinicDetail .clinicBottom .btnSubmit {
            width: 54px;
            height: 24px;
            border-radius: 4px;
            font-size: var(--font-11);
        }
        .clinicDetail .clinicBottom {
            margin: var(--space-11) var(--space-10) var(--space-33)
        }
    }