@charset "utf-8";
/* 레이아웃, 공통 */
.layout {
    width: 90%;
    max-width: 1540px;
    margin: 0 auto;
}
.layoutWide {
    width: 94%;
    max-width: 1760px;
    margin: 0 auto
}

/* display block */
.displayBlock {
    display: block;
}

/* display flex */
.displayFlex {
    display: flex;
}
.jContSpaceBetween {
    justify-content: space-between;
}
.jContCenter {
    justify-content: center;
}
.jContFlexEnd {
    justify-content: flex-end;
}
.aItemsFlexStart {
    align-items: flex-start;
}
.aItemsFlexEnd {
    align-items: flex-end;
}
.aItemsCenter {
    align-items: center;
}
.aItemsStrench {
    align-items: stretch;
}
.flexBasic {
    display: flex;
    align-items: center;
}
.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fDirectionColumn {
    flex-direction: column;
}
.flexWarp {
    flex-wrap: wrap;
}

/* display grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* gap */
.gapCol85 {
    gap: 0 var(--space-85);
}
.gapCol70 {
    gap: 0 var(--space-70);
}
.gapCol50 {
    gap: 0 var(--space-50);
}
.gapCol20 {
    gap: var(--space-10) var(--space-20);
}
    @media all and (max-width:1200px) {
        .gapCol85 {
            gap: 0 var(--space-30);
        }
    }
    @media all and (max-width:640px) {
        .gapCol85 {
            gap: 0 var(--space-20);
        }
    }

/* margin */
.mt120 {
    margin-top: var(--space-120);
}
.mt110 {
    margin-top: var(--space-110);
}
.mt100 {
    margin-top: var(--space-100);
}
.mt90 {
    margin-top: var(--space-90);
}
.mt80 {
    margin-top: var(--space-80);
}
.mt70 {
    margin-top: var(--space-70);
}
.mt55 {
    margin-top: var(--space-55);
}
.mt50 {
    margin-top: var(--space-50);
}
.mt40 {
    margin-top: var(--space-40);
}
.mt35 {
    margin-top: var(--space-35);
}
.mt25 {
    margin-top: var(--space-25);
}
.mt20 {
    margin-top: var(--space-20);
}
.mt15 {
    margin-top: var(--space-15);
}
.mt10 {
    margin-top: var(--space-10);
}
.mr120 {
    margin-right: var(--space-120);
}
.mr85 {
    margin-right: var(--space-85);
}
.mr70 {
    margin-right: var(--space-70);
}
.mr80 {
    margin-right: var(--space-80);
}
.ml195 {
    margin-left: var(--space-195);
}
.ml150 {
    margin-left: var(--space-150);
}
.ml120 {
    margin-left: var(--space-120);
}
.ml95 {
    margin-left: var(--space-95);
}
.ml40 {
    margin-left: var(--space-40);
}
.ml30 {
    margin-left: var(--space-30);
}
.ml25 {
    margin-left: var(--space-25);
}

/* padding */
.ptpb110 {
    padding-top: var(--space-110);
    padding-bottom: var(--space-110);
}
.ptpb100 {
    padding-top: var(--space-100);
    padding-bottom: var(--space-100);
}
.ptpb30 {
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
}
.ptpb20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}
.prpl110 {
    padding-right: var(--space-110);
    padding-left: var(--space-110);
}
.prpl50 {
    padding-right: var(--space-50);
    padding-left: var(--space-50);
}
.prpl40 {
    padding-right: var(--space-40);
    padding-left: var(--space-40);
}
.prpl30 {
    padding-right: var(--space-30);
    padding-left: var(--space-30);
}
.pt210 {
    padding-top: var(--space-210);
}
.pt200 {
    padding-top: var(--space-200);
}
.pt190 {
    padding-top: var(--space-190);
}
.pt150 {
    padding-top: var(--space-150);
}
.pt140 {
    padding-top: var(--space-140);
}
.pt130 {
    padding-top: var(--space-130);
}
.pt90 {
    padding-top: var(--space-90);
}
.pt70 {
    padding-top: var(--space-70);
}
.pt50 {
    padding-top: var(--space-50);
}
.pb220 {
    padding-bottom: var(--space-220);
}
.pb100 {
    padding-bottom: var(--space-100);
}
.pb50 {
    padding-bottom: var(--space-50);
}
    @media all and (max-width:1200px) {
        .mt40 {
            margin-top: var(--space-30);
        }
        .mt120 {
            margin-top: var(--space-90);
        }
        .mt110 {
            margin-top: var(--space-70);
        }
        .mt100 {
            margin-top: var(--space-60);
        }
        .mt90,
        .mt80 {
            margin-top: var(--space-50);
        }
        .mt70 {
            margin-top: var(--space-40);
        }
        .mt55,
        .mt50 {
            margin-top: var(--space-30);
        }
        .mt35 {
            margin-top: var(--space-25);
        }
        .mt25 ,
        .mt20 {
            margin-top: var(--space-15);
        }
        .mt15 {
            margin-top: var(--space-10);
        }
        .ml40 {
            margin-left: var(--space-30);
        }
        .pt210 {
            padding-top: var(--space-160);
        }
        .pt190 {
            padding-top: var(--space-150);
        }
        .pt150 {
            padding-top: var(--space-120);
        }
        .pt140 {
            padding-top: var(--space-110);
        }
        .pt130 {
            padding-top: var(--space-100);
        }
        .pt90 {
            padding-top: var(--space-50);
        }
        .pt70 {
            padding-top: var(--space-40);
        }
        .pb220 {
            padding-bottom: var(--space-160);
        }
        .pt200 {
            padding-top: var(--space-160);
        }
        .prpl110 {
            padding-right: var(--space-50);
            padding-left: var(--space-50);
        }
        .ptpb110 {
            padding-top: var(--space-80);
            padding-bottom: var(--space-80);
        }
        .ptpb100 {
            padding-top: var(--space-70);
            padding-bottom: var(--space-70);
        }
        .pb50 {
            padding-bottom: var(--space-30);
        }
        .pt50 {
            padding-top: var(--space-30);
        }
        .ptpb30 {
            padding-top: var(--space-25);
            padding-bottom: var(--space-25);
        }
        .prpl50,
        .prpl30 {
            padding-right: var(--space-25);
            padding-left: var(--space-25);
        }
    }
    @media all and (max-width:1000px) {
        .mt120 {
            margin-top: var(--space-70);
        }
        .mt100 {
            margin-top: var(--space-50);
        }
        .mt90,
        .mt80 {
            margin-top: var(--space-40);
        }
        .mt70 {
            margin-top: var(--space-30);
        }
        .mt55,
        .mt50 {
            margin-top: var(--space-25);
        }
        .mt40 {
            margin-top: var(--space-20);
        }
        .mt10 {
            margin-top: var(--space-5);
        }
        .pt210 {
            padding-top: var(--space-120);
        }
        .pt200 {
            padding-top: var(--space-160);
        }
        .pt190 {
            padding-top: var(--space-120);
        }
        .pt150 {
            padding-top: var(--space-100);
        }
        .pt140 {
            padding-top: var(--space-90);
        }
        .pt90 {
            padding-top: var(--space-40);
        }
        .pt70 {
            padding-top: var(--space-30);
        }
        .pb220 {
            padding-bottom: var(--space-120);
        }
        .ptpb110 {
            padding-top: var(--space-60);
            padding-bottom: var(--space-60);
        }
        .ptpb100 {
            padding-top: var(--space-50);
            padding-bottom: var(--space-50);
        }
        
        .ptpb30 {
            padding-top: var(--space-25);
            padding-bottom: var(--space-25);
        }
        .prpl110 {
            padding-right: var(--space-40);
            padding-left: var(--space-40);
        }
        .prpl50,
        .prpl30 {
            padding-right: var(--space-20);
            padding-left: var(--space-20);
        }
    }
    @media all and (max-width: 640px) {
        .mt120,
        .mt110{
            margin-top: var(--space-50);
        }
        .mt100 {
            margin-top: var(--space-45);
        }
        /* .mt90,
        .mt80 {
            margin-top: var(--space-30);
        } */
        .mt50 {
            margin-top: var(--space-30);
        }
        .mt40 {
            margin-top: var(--space-25);
        }
        .mt35 {
            margin-top: var(--space-20);
        }
        .ml40 {
            margin-left: var(--space-20);
        }
        .pt210,
        .pt200 {
            padding-top: var(--space-120);
        }
        .pt190 {
            padding-top: var(--space-100);
        }
        .pt150 {
            padding-top: var(--space-80);
        }
        .pt140 {
            padding-top: var(--space-70);
        }
        .ptpb100 {
            padding-top: var(--space-40);
            padding-bottom: var(--space-40);
        }
        .ptpb30 {
            padding-top: var(--space-20);
            padding-bottom: var(--space-20);
        }
        .ptpb20 {
            padding-top: var(--space-12);
            padding-bottom: var(--space-12);
        }
        .prpl110 {
            padding-right: var(--space-20);
            padding-left: var(--space-20);
        }

    }

/* bg box */
.beigef5Box {
    background-color: var(--color-beige-f5);
}
.beigef0Box {
    background-color: var(--color-beige-f0);
}
.beigefbBox {
    background-color: var(--color-beige-fb);
}

/* font-family */
.fm-jeju {
    font-family: var(--fm-jeju);
}
.fm-en {
    font-family: var(--fm-en);
}

/* text-align */
.textAlignCenter {
    text-align: center;
}

/* color */
.colorPrimary {
    color: var(--color-primary);
}
.colorBeiged4 {
    color: var(--color-beige-d4);
}
.colorBeigeee {
    color: var(--color-beige-ee);
}
.colorBeigeF1 {
    color: var(--color-beige-f1);
}
.colorDark {
    color: var(--color-dark);
}
.colorWhite {
    color: var(--color-white);
}
.colorWineae {
    color: var(--color-wine-ae);
}

/* font-weight */
.fwLight {
    font-weight: var(--fw-light);
}
.fwNormal {
    font-weight: var(--fw-normal);
}
.fwMedium {
    font-weight: var(--fw-medium);
}
.fwBold {
    font-weight: var(--fw-bold);
}

/* font-size */
.font195 {
    font-size: var(--font-195);
}
.font70 {
    font-size: var(--font-70);
}
.font65 {
    font-size: var(--font-65);
}
.font55 {
    font-size: var(--font-55);
}
.font40 {
    font-size: var(--font-40);
}
.font30 {
    font-size: var(--font-30);
}
.font25 {
    font-size: var(--font-25);
}
.font23 {
    font-size: var(--font-23);
}
.font22 {
    font-size: var(--font-22);
}
.font20 {
    font-size: var(--font-20);
}
.font18 {
    font-size: var(--font-18);
}
.font17 {
    font-size: var(--font-17);
}
.font16 {
    font-size: var(--font-16);
}
.font15 {
    font-size: var(--font-15);
}
    @media all and (max-width: 1200px) {
        .font195 {
            font-size: 130px;
        }
        .font70,
        .font65 {
            font-size: var(--font-45);
        }
        .font40 {
            font-size: var(--font-32);
        }
        .font30 {
            font-size: var(--font-25);
        }
        .font25 {
            font-size: var(--font-22);
        }
        .font23 {
            font-size: var(--font-20);
        }
        .font18 {
            font-size: var(--font-16);
        }
        .font17 {
            font-size: var(--font-16);
        }
        .font16 {
            font-size: var(--font-15);
        }
        .font15 {
            font-size: var(--font-14);
        }
    }
    @media all and (max-width: 1000px) {
        .font195 {
            font-size: 100px;
        }
        .font70,
        .font65 {
            font-size: var(--font-35);
        }
        .font40 {
            font-size: var(--font-25);
        }
        .font30 {
            font-size: var(--font-22);
        }
        .font25 {
            font-size: var(--font-20);
        }
        .font23 {
            font-size: var(--font-18);
        }
    }
    @media all and (max-width: 640px) {
        .font195 {
            font-size: 90px;
        }
        .font70,
        .font65 {
            font-size: var(--font-35);
        }
        .font40 {
            font-size: var(--font-25);
        }
        .font30 {
            font-size: var(--font-20);
        }
        .font25 {
            font-size: var(--font-18);
        }
    }

/* 메인 */
/* mainVisual */
.mainVisual {
    position: relative;
}
.visualSwiper .swiper-slide {
    position: relative;
}
.visualSwiper .swiper-slide .textArea {
    width: 50%;
    max-width: 678px;
    position: absolute;
    top: 18%;
}
.visualSwiper .swiper-slide .textArea img.bgBi {
    opacity: 0.1;
}
.visualSwiper .swiper-slide.mv1 .textArea {
    left: 7%;
}
.visualSwiper .swiper-slide.mv2 .textArea {
    right: 7%;
}
.visualSwiper .swiper-slide.mv3 .textArea {
    left: 7%;
}
.visualSwiper .swiper-slide .textWrap {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
}
.visualSwiper .swiper-slide .textWrap .mvLogo {
    width: 90%;
    max-width: 554px;
    margin: 0 auto;
}
.visualSwiper .swiper-slide .textWrap .mvLogo svg {
    width: 100%;
    margin: auto
}
.visualSwiper .swiper-slide .textWrap .mvLogo svg path {
    fill: var(--color-beige-d4);
}
.visualSwiper .swiper-slide.mv2 .textWrap svg path {
    fill: var(--color-primary);
}
.visualSwiper .swiper-slide.mv3 .textWrap svg path {
    fill: var(--color-primary);
}
.mainVisual .swiper-slide img.mobile {
    display: none;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mainVisual {
            height: 600px;
        }
        .mainVisual .swiper {
            height: 100%;
        }
        .visualSwiper .swiper-slide .textArea {
            width: 35%;
            top: 25%;
        }
        .visualSwiper .swiper-slide .textArea .font30 {
            font-size: var(--font-25);
        }
        .visualSwiper .imgArea {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .mainVisual .swiper-bottom {
            bottom: var(--space-30);
        }
    }
    @media all and (max-width: 1000px) {
        .mainVisual {
            height: 500px;
        }
        .visualSwiper .swiper-slide .textArea {
            width: 38%;
            top: 25%;
        }
        .visualSwiper .swiper-slide .textArea .font30 {
            font-size: var(--font-22);
        }
        .visualSwiper .swiper-slide.mv1 .textArea {
            left: 5.5%;
        }
        .visualSwiper .swiper-slide.mv2 .textArea {
            right: 5.5%;
        }
        .visualSwiper .swiper-slide.mv3 .textArea {
            left: 5.5%;
        }
    }
    @media all and (max-width:640px) {
        .mainVisual {
            height: 600px;
        }
        .mainVisual .swiper-slide img.pc {
            display: none;
        }
        .mainVisual .swiper-slide img.mobile {
            display: block;
        }
        .visualSwiper .swiper-slide .textArea {
            width: 100%;
            top: 20%;
        }
        .visualSwiper .swiper-slide .textArea img.bgBi {
            width: 60%;
            margin: 0 auto
        }
        .visualSwiper .swiper-slide .textArea .font30 {
            font-size: var(--font-20);
        }
        .visualSwiper .swiper-slide .textWrap .mvLogo {
            width: 60%;
            margin-bottom: 5px;
        }
        .visualSwiper .swiper-slide.mv1 .textArea,
        .visualSwiper .swiper-slide.mv2 .textArea,
        .visualSwiper .swiper-slide.mv3 .textArea {
            left: 0;
            right: 0;
            margin: 0 auto
        }
    }

/* mainStory */
.mainStory {
    position: relative;
}
.symbolBg {
    width: 35%;
    max-width: 592px;
    position: absolute;
    top:0;
    right: 0;
    z-index: -1;
}
.mSContent1 {
    text-align: center;
}
.mSContent1 h2 {
    margin-bottom: var(--space-40);
}
.mSContent1 .biImg {
    width: 80%;
    max-width: 1040px;
    margin: auto
}
.mSContent2 .slogan1 strong,
.mSContent2 .slogan2 strong {
    line-height: 0.8;
}
.mSContent2 .slogan1 strong {
    margin-top: -5px;
}
.mSContent2 .slogan2 .leftCont {
    padding: 0 6%  0 9%
}
.mSContent2 .slogan2 .leftCont .imgArea {
    max-width:534px
}
.mSContent2 .slogan2 .rightCont {
    padding-top: var(--space-50);
}
.mSContent2 .slogan2 .leftCont,
.mSContent2 .slogan2 .rightCont {
    width: 50%;
}
.mSContent2 .slogan2 .iconArea .item {
    text-align: center;
}
.mSContent2 .slogan2 .iconArea .item p {
    line-height: normal;
}
.mSContent2 .slogan2 .iconArea .item img {
    height: 57px;
}
.mSContent3 .logoImg {
    width: 70%;
    max-width: 1029px;
}
.mSContent3  .logoImg img {
    width: 100%;
}
.mSContent4 .leftCont,
.mSContent4 .rightCont {
    width: 50%;
}
.mSContent4 .leftCont .textarea {
    padding-left: 9%
}
.mSContent4 .rightCont {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.mSContent4 .rightCont .imgArea {
    padding: 0 9.5% 0 5%;
}
.mSContent4 .rightCont .imgArea img {
    max-width: 534px;
}
.mSContent4 .rightCont p {
    line-height: 1.2;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mSContent2 .slogan2 .leftCont {
            padding: 0 6% 0 6%;
        }
        .mSContent2 .slogan2 .rightCont {
            padding-top: var(--space-20);
        }
        .mSContent2 .slogan2 .iconArea {
            margin-left: 0
        }
        .mSContent2 .slogan2 .iconArea .item img {
            height: 45px;
        }
        .mSContent3 .logoImg {
            width: 60%
        }
        .mSContent4 .rightCont .imgArea {
            padding: 0 9.5% 0 14.5%
        }
    }
    @media all and (max-width: 1000px) {
        .mSContent1 h2 {
            margin-bottom: var(--space-25);
        }
        .mSContent2 .slogan2 .leftCont {
            width: 50%;
            padding-left: 0
        }
        .mSContent4 .leftCont .textarea {
            padding-left: 0
        }
        .mSContent4 .leftCont .textarea pre {
            white-space: normal;
        }
        .mSContent4 .rightCont .imgArea {
            padding: 0 0 0 12%;
        }
    }
    @media all and (max-width: 640px) {
        .mSContent1 .biImg {
            width: 100%;
        }
        .mSContent1 h2 {
            font-size: var(--font-22);
        }
        .mSContent2 .slogan2 {
            flex-wrap: wrap;
        }
        .mSContent2 .slogan2 .leftCont,
        .mSContent2 .slogan2 .rightCont {
            width:100%;
        }
        .mSContent2 .slogan2 .rightCont {
            padding-top: var(--space-50);
        }
        .mSContent2 .slogan2 .leftCont {
            padding: 0;
        }
        .mSContent2 .slogan2 .leftCont .imgArea {
            width: 80%;
        }
        .mSContent2 .slogan2 .rightCont .inner{
            width: 80%;
        }
        .mSContent2 .slogan2 .rightCont .textArea {
            margin-left: -65px
        }
        .mSContent2 .slogan2 .iconArea .item img {
            height: 40px;
        }
        .mSContent2 .slogan2 .iconArea .item p {
            font-size: var(--font-15);
        }
        .mSContent3 .layoutWide {
            justify-content: center;
        }
        .mSContent3 .logoImg {
            width: 80%;
        }
        .mSContent4 .layout {
            flex-wrap: wrap;
        }
        .mSContent4 .layout .leftCont,
        .mSContent4 .layout .rightCont {
            width: 100%;
        }
        .mSContent4 .rightCont .imgArea {
            width: 100%;
            padding: 0;
            display:flex;
            justify-content: flex-end;
        }
        .mSContent4 .rightCont .imgArea img {
            width: 80%;
        }
        .mSContent4 .layout .rightCont p {
            font-size: var(--font-22);
        }
        .symbolBg {
            width: 45%;
        }
    }

.mainTechnology {
    position: relative;
}
.mainTechnology .technologyBg {
    width: 35%;
    position: absolute;
    top: -3.3%;
    left: 0;
    max-width: 489px;
    z-index: 0;
}
.mainTechnology .technologyBg img {
    width: 100%;
}
.mTContent1 .textArea .inner {
    width:80%;
    max-width: 1100px;
}
.mTContent1 .textArea .leftCont {
    padding-top: 6.3%;
}
.mTContent1 .textArea .rightCont .imgArea img {
    border: var(--border);
}
.mTContent1 .textArea .rightCont .imgArea:nth-of-type(2) {
    padding: var(--space-30) 0 0 var(--space-25)
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mTContent1 .textArea .rightCont .imgArea img {
            width: 150px;
        }
        .mTContent1 .textArea .rightCont .imgArea:nth-of-type(2) {
            padding: var(--space-30) 0 0 var(--space-15)
        }
    }
    @media all and (max-width: 1000px) {
        .mTContent1 .textArea .inner {
            width:100%;
        }
        .mTContent1 .textArea .leftCont {
            padding-right: 3%;
            padding-top: 4.3%;
        }
        .mTContent1 .textArea .rightCont .imgArea img {
            width: 120px;
        }
        .mainTechnology .technologyBg {
            top: -1.3%;
        }
        .mTContent1 .textArea .rightCont .imgArea:nth-of-type(2) {
            padding-top: var(--space-20);
        }
    }
    @media all and (max-width: 640px) {
        .mTContent1 .textArea .inner {
            flex-wrap: wrap;
        }
        .mTContent1 .textArea .leftCont {
            padding-right: 0;
        }
        .mTContent1 .textArea .rightCont {
            width: 100%;
            margin-top: var(--space-20);
            justify-content: space-between;
        }
        .mTContent1 .textArea .rightCont .imgArea {
            width: 48%;
        }
        .mTContent1 .textArea .rightCont .imgArea:nth-of-type(2) {
            padding:0
        }
        .mTContent1 .textArea .rightCont .imgArea img {
            width: 100%
        }
    }

.mTContent2 .defintionList .item {
    background-color: var(--color-beige-eb);
}
.mTContent2 .defintionList .item img {
    width: 30px;
}
.mTContent2 .defintionList .item pre {
    text-align: center;
}
.mTContent2 .content2 {
    border-top: var(--border);
}
.mTContent2 .imgList .item .textArea {
    background-color: var(--color-basic);
}
.mTContent2 .imgList .item:last-of-type .textArea {
    background-color: var(--color-primary);
    padding-left: var(--space-10);
    padding-right: var(--space-10)
}
.mTContent2 .imgList .item {
    width: 44%;
}
.mTContent2 .imgList .item1 {
    border: 1px solid var(--color-basic);
}
.mTContent2 .imgList .item2 {
    border: 1px solid var(--color-primary);
}
.mTContent2 .imgList .circle {
    width: 13%
}
.mTContent2 .imgList .circle img {
    width: 80%;
    max-width: 117px;
    margin: auto;
}
.mTContent2 .imgList .circle span {
    white-space: nowrap;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mTContent2 .defintionList .item img {
            width: 25px;
        }
        .mTContent2 .defintionList .item pre {
            white-space: normal;
        }
    }
    @media all and (max-width: 1000px) {
        .mTContent2 .imgList .item span {
            font-size: var(--font-15);
        }
        .mTContent2 .imgList .item p {
            font-size: var(--font-17);
        }
    }
    @media all and (max-width: 1000px) {

    }
    @media all and (max-width: 640px) {
        .mTContent2 .defintionList {
            grid-template-columns: repeat(1, 1fr);
        }
        .mTContent2 .content1 strong {
            text-align: center;
        }
        .mTContent2 .content2 .imgList {
            flex-wrap: wrap;
        }
        .mTContent2 .imgList .item {
            width: 100%;
        }
        .mTContent2 .imgList .circle {
            width: 100%;
            padding: var(--space-10) 0
        }
        .mTContent2 .imgList .circle img {
            width: 80px
        }
        .mainTechnology .technologyBg {
            width: 40%;
            top: 2%;
        }
    }

.mainLineup {
    width: 100%;
    background: url("/public/images/lineup-bg.jpg") no-repeat center / cover;
}
.mainLineup .titleArea svg {
    width: 110px;
}
.mainLineup .titleArea svg path {
    fill: var(--color-beige-d4);
}
.mainLineup .lineupList .item {
    position: relative;
    width: 49%;
    /* padding-left: var(--space-130); */
}
/* .mainLineup .lineupList .item .logoImgBi {
    position: absolute;
    top: -50%;
    left: 0;
    transform: translateY(50%);
}
.mainLineup .lineupList .item .logoImgBi svg {
    opacity: 0.09;
    width: 285px;
    mix-blend-mode: multiply;
} */
.mainLineup .lineupList .item .imgArea {
    cursor: pointer;
    position: relative;
    max-width: 638px;
}
/* .mainLineup .lineupList .item .suject {
    position: absolute;
    bottom: var(--space-10);
    left: var(--space-15);
}
.mainLineup .lineupList .item .circleLabel {
    position: absolute;
    right: -5px;
    bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
    height: 85px;
    background-color: var(--color-primary);
    border-radius: 50%;
} */
.mainLineup .lineupList .item .viewBtn {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10000000000000000000px;
}
.mainLineup .lineupList .item .viewBtn a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 200px;
    height: 200px;
    background-color: var(--color-beige-f1);
    border-radius: 50%;
}
.mainLineup .lineupList .item .viewBtn span {
    display: block;
    margin-top: 10%;
}
.mainLineup .lineupList .item .viewBtn img {
    width: 26px;
}
.mainLineup .lineupList .item .imgArea:hover .viewBtn {
    opacity: 1;
    visibility: visible;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mainLineup .lineupList .item .viewBtn a {
            width: 150px;
            height: 150px;
        }
        .mainLineup .lineupList .item .viewBtn span {
            font-size: var(--font-20);
        }
        .mainLineup .lineupList .item .viewBtn img {
            width: 23px;
        }
    }
    @media all and (max-width: 1000px) {
        .mainLineup .titleArea svg {
            width: 90px;
        }
        .mainLineup .lineupList .item .viewBtn a {
            width: 130px;
            height: 130px;
        }
        .mainLineup .lineupList .item .viewBtn span {
            font-size: var(--font-18);
        }
        .mainLineup .lineupList .item .viewBtn img {
            width: 20px;
        }
    }
    @media all and (max-width: 640px) {
        .mainLineup .lineupList {
            flex-wrap: wrap;
        }
        .mainLineup .lineupList .item {
            width: 100%;
        }
        .mainLineup .lineupList .item .viewBtn {
            left: 50%;
            top: 52%;
        }
        .mainLineup .lineupList .item .viewBtn a {
            width: 110px;
            height: 110px;
        }
        .mainLineup .lineupList .item .imgArea > img {
            margin-left: -8%
        }
        .mainLineup .lineupList .item .viewBtn span {
            font-size: var(--font-16);
        }
        .mainLineup .lineupList .item .viewBtn img {
            width: 18px;
            
        }
    }

.mainFaq .titleArea h2 {
    line-height: 0.8;
}
.mainFaq .faqList {
    width: 68%;
    max-width: 1046px;
}
.mainFaq .faqList .list {
    cursor: pointer;
    margin-bottom: var(--space-30);
    padding-bottom: var(--space-30);
    border-bottom: var(--border-ee);
}
.mainFaq .faqList .list:last-of-type {
    margin-bottom: 0;
    border-bottom: 0;
}
.mainFaq .faqList .questions .bi {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-10);
}
.mainFaq .faqList .questions p {
    flex: 1 1 auto
}
.mainFaq .faqList .questions .arrow {
    transition: var(--transition);
    transform-origin: center;
    width: 26px;
}
.mainFaq .faqList .questions .arrow.on {
    transform: rotate(-180deg);
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .mainFaq .faqList .questions p {
            font-size: var(--font-20);
        }
        .mainFaq .faqList .list {
            margin-bottom: var(--space-25);
            padding-bottom: var(--space-25);
        }
        .mainFaq .faqList .questions .bi {
            width: 23px;
        }
        .mainFaq .faqList .questions .arrow {
            width: 23px;
        }
        .mainFaq .faqList .answer {
            padding-top: var(--space-20);
            padding-bottom: var(--space-20);
        }
    }
    @media all and (max-width: 1000px) {
        .mainFaq .faqList {
            width: 75%;
        }
        .mainFaq .faqList .list {
            margin-bottom: var(--space-20);
            padding-bottom: var(--space-20);
        }
        .mainFaq .faqList .questions p {
            font-size: var(--font-18);
        }
        .mainFaq .faqList .answer {
            padding-top: var(--space-15);
            padding-bottom: var(--space-15);
        }
        .mainFaq .faqList .questions .arrow {
            width: 20px;
        }
        .mainFaq .faqList .questions .bi {
            width: 20px;
        }
    }
    @media all and (max-width: 640px) {
        .mainFaq .layout {
            flex-wrap: wrap;
        }
        .mainFaq .titleArea,
        .mainFaq .faqList {
            width: 100%;
        }
        .mainFaq .titleArea {
            margin-bottom: var(--space-30);
            text-align: center;
        }
        .mainFaq .faqList .list {
            margin-bottom: var(--space-15);
            padding-bottom: var(--space-15);
        }
        .mainFaq .faqList .questions p {
            font-size: var(--font-16);
        }
    }

.productPop {
    max-width: 1300px;
}
.productPop .ppWrap {
    display: flex;
    flex-wrap: wrap;
}
.productPop .ppWrap .ppLeft,
.productPop .ppWrap .ppRight {
    width: 50%;
    position: relative;
}
.productPop .ppWrap .ppLeft .productImg {
    position: relative;
}
.productPop .ppWrap .ppSlogan {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: var(--space-30);
}
.productPop .ppWrap .ppLeft .ppSlogan {
    color: var(--color-wine-7c);
}
.productPop .ppWrap .ppRight .ppSlogan {
    opacity: 0.7;
}
.productPop.juveacell8 .ppRight {
    background-color: var(--color-wine-7c);
}
.productPop.juveacell3 .ppRight {
    background-color: #FBFBFB;
}
.productPop.juveacell8 .ppRight {
    color: #e5d8d0;
}
.productPop.juveacell3 .ppRight {
    color: var(--color-wine-7c)
}
.productPop .ppWrap .titlearea {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(229, 216, 208, 0.3);
    padding-bottom: var(--space-25);
}
.productPop .ppWrap table {
    text-align: left;
    font-size: var(--font-18);
}
.productPop .ppWrap table th,
.productPop .ppWrap table td {
    padding: var(--space-8) 0
}
.productPop .ppWrap table tr:first-of-type th,
.productPop .ppWrap table tr:first-of-type td {
    padding-top: 0;
}
.productPop .ppWrap table th {
    font-weight: var(--fw-bold);
    vertical-align: top;
}
.productPop .ppWrap table td {
    font-weight: var(--fw-light);
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .productPop .ppWrap .ppLeft .productImg {
            height: 100%;
            display: flex;
            align-items: center;
        }
        .productPop .ppWrap .ppLeft  {
            background-color: #E8DCD4;
            display: flex;
            align-items: center;
        }
        .productPop.juveacell3 .ppRight {
            padding-bottom: var(--space-70);
        }
        .productPop .ppWrap .titlearea h3 {
            font-size: var(--font-22);
        }
        .productPop .ppWrap table th,
        .productPop .ppWrap table td {
            font-size: var(--font-16);
        }
        .productPop .ppWrap .ppSlogan {
            bottom: var(--space-20);
        }
    }
    @media all and (max-width: 1000px) {
        .productPop .ppWrap {
            align-items: stretch;
        }
        .productPop .ppWrap .titlearea {
            padding-bottom: var(--space-15);
        }
        .productPop .ppWrap .titlearea h3 {
            font-size: var(--font-20);
        }
        .productPop .ppWrap table th,
        .productPop .ppWrap table td {
            font-size: var(--font-15);
        }
        .productPop .ppWrap table col:first-of-type {
            width: 25%;
        }
        .productPop .ppWrap table td {
            padding-left: var(--space-10)
        }
        .productPop .ppWrap table th {
            border-right: 1px solid rgba(229, 216, 208, 0.3);
        }
    }
    @media all and (max-width: 640px) {
        .productPop .ppWrap {
            align-items: center;
            flex-direction: column-reverse;
        }
        .productPop .ppWrap .ppLeft,
        .productPop .ppWrap .ppLeft .productImg {
            display: block;
            align-items: unset;
        }
        .productPop .ppWrap .ppLeft,
        .productPop .ppWrap .ppRight {
            width: 100%;
        }
        .productPop.juveacell3 .ppRight {
            padding-bottom: var(--space-20);
        }
        .productPop .ppWrap .ppSlogan {
            bottom: var(--space-10);
            font-size: var(--font-16);
        }
        .productPop .ppWrap .ppRight .ppSlogan {
            display: none;
        }
    }