@charset "utf-8";

/* Nested rules in this file should stay one line where practical. */

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 40px;
    --main-width: 1420px;
    --basic-color: #222;
    --bg-color: #f5f1e8;
    --point-color01: #2D4A35;
    --point-color02: #9f9a6d;
    --point-color0201: #ecdbc1;
    --point-color0202: #F5F0E8;
    --point-color03: #B8966C;
    --point-color0301: #E9DECF;
    --header-color: #F5F0E8;
    --footer-color: #3e4430;
    --header-height: 140px;
    --fixed-header-height: 100px;
    --subnav-height: 56px;
    --radius01 : 8px;

    --form-dot: #b59460;
    --form-border: #e7e7e7;
    --form-gray: #fff;
    --form-focus: #2D4A35;
    --form-basic: #333;
    --form-chk: #2D4A35;
    --form-fontsize : 16px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;;
    --form-placeholder : #bbb;
    --form-padding : 21px;
    --form-padding1 : 14px 21px;
    --input-height: 54px;
    --input-gap: 30px 14px;
    --input-buttonw : 120px;
    --textarea-height: 144px;
}

@media (width <= 1280px) {
    :root {
        --main-gap: 40px;
        --header-height: 130px;
    }
}

@media (width <= 1200px) {
    :root {
        --header-height: 110px;
        --fixed-header-height: 90px;
        --subnav-height: 54px;
        --input-gap: 20px 14px;
    }
}
@media (width <= 1023px) {
    :root {
        --header-height: 76px;
        --fixed-header-height: 76px;
        --input-height: 48px;
        --form-fontsize : 15px;
        --form-padding : 16px;
        --form-padding1 : 12px 16px;
        --subnav-height: 50px;
    }
}
@media (width <= 767px) {
    :root {
        --main-gap: 20px;
        --subnav-height: 48px;
        --input-buttonw : 94px;
    }
}

::selection{background-color: var(--point-color01); color: #fff;}
/* body:not(#main){padding-right: 0 !important; overflow-y: auto !important;}*/
html {
    font-size: 16px;
    letter-spacing: -0.25px;
    &:lang(ko){word-break: keep-all;}
    &:lang(en){letter-spacing: 0;}
    &:lang(ja){word-break: break-all;}
}
body {
    font-family: 'Pretendard', 'Malgun Gothic', '맑은고딕', '돋움', 'dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;
    font-weight: 400;
    color: var(--basic-color);
    line-height: 1.25;
    background-color: var(--bg-color);
    :lang(en) &{
        font-family: 'Roboto', sans-serif;
    }
    :lang(ja) &{
        font-family: "Noto Sans JP", serif;
    }
}

#content {
    min-height: 400px;
    padding-bottom: 120px;
    @media (width <= 1023px) {
        padding-bottom: 100px
    }
    @media (width <= 767px) {
        padding-bottom: 80px
    }
}
.main-grid{
    position: relative;
    width: var(--main-width);
    margin: 0 auto;
    @media (width <= 1530px) {
        width: auto;
        padding-left: var(--main-gap);
        padding-right: var(--main-gap);
    }
}

.grid01 {
    position: relative;
    padding-left: var(--main-gap);
    padding-right: var(--main-gap);
}
.grid02{
    position: relative;
    width: 1240px;
    margin: 0 auto;
    @media (width <= 1530px) {
        width: auto;
        padding-left: var(--main-gap);
        padding-right: var(--main-gap);
    }
}
.half-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.sub-grid {
    position: relative;
    width: 1100px;
    margin: 0 auto;
}
.default-logo{
    width: 193px;
    @media (width <= 767px) {
        width: 168px;
    }
}
.bg-gray{background-color: #f9f9f9}
.btn-sns {
    display: flex; align-items: center; gap: 27px;
    > a{padding: 5px; transition: .2s ease-in-out}
    & .ytube{width: 22px;}
    & .blog{width: 21px;}
    & .facebook{width: 11px;}
    & .instagram{width: 20px;}
    & .sns-x{width: 19px;}
}

.btn-more01 > a{display: inline-block; font-size: 18px; font-weight: 500; color: #666; padding: 10px 34px 10px 0; background: url('/assets/site/img/common/arr01.svg') no-repeat right center; transition: .3s ease-in-out}
.btn-more01.white > a{color: #fff; background-image: url('/assets/site/img/common/arr01w.svg')}
.btn-more02 > a{display: inline-block; font-size: 16px; font-weight: bold; padding-right: 16px; background: url('/assets/site/img/common/arr0502.png') no-repeat right center / 6px auto; transition: .3s ease-in-out}
.btn-more03 > a{display: inline-block; font-size: 17px; font-weight: bold; padding-right: 22px; background: url('/assets/site/img/common/arr0601.png') no-repeat right center / 14px auto; transition: .3s ease-in-out}
.btn-more04 > a{display: inline-block; width: 138px; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 11px 0; border-bottom: 1px solid #222; background: url('/assets/site/img/common/arr0101.png') no-repeat right 4px / 15px auto; transition: .3s ease-in-out}
.btn-more04 .ico01{background: url('/assets/site/img/common/arr0504.png') no-repeat right center / 6px auto;}
.btn-more04 .ico02{background: url('/assets/site/img/common/ico_dw0103.png') no-repeat right center / 18px auto;}

.img-round01{border-radius: var(--radius01);}

/* ==========================================================================
    FORM, BOARD
   ========================================================================== */
input,
select{width: 100%; height: var(--input-height);}
textarea{overflow-y: auto}
.modal-backdrop{z-index: 49;}
.note-frame{z-index: 1099;}

/* ==========================================================================
    COMPONENT
   ========================================================================== */
.sub-tit-area{
    padding-top: 78px;
    padding-bottom: 27px;
    font-family: 'Poppins', sans-serif;
    color: var(--point-color01);
    letter-spacing: 0;
    & .inner-sec{display: flex; justify-content: space-between; align-items: flex-end;}
    & .pg-title {
        & .title{font-size: 65px; font-weight: bold; line-height: 1.25}
    }
    & .main-copy{font-size: 15px; color: var(--point-color01); padding-bottom: 14px;}
    @media (width <= 1023px) {
        padding-top: 60px;
        padding-bottom: 15px;
        & .pg-title {
            & .title{font-size: 50px;}
        }
        & .main-copy{font-size: 14px; padding-bottom: 10px;}

    }
    @media (width <= 767px) {
        padding-top: 40px;
        padding-bottom: 15px;
        & .pg-title {
            & .title{font-size: 32px;}
        }
        & .main-copy{display: none}
    }
}
/* ==========================================================================
    MAIN VISUAL & MAIN CONTENTS - main.css
    ========================================================================== */


/* ==========================================================================
    COMPANY
    ========================================================================== */
.pg-about {
    .sec-cont{padding: 140px 0 20px;}
    .main-text{font-size: 58px; font-weight: bold; color: var(--point-color01); line-height: 68px; word-break: keep-all;}
    .desc-set{margin-top: 50px;}
    .desc-set p{font-size: 18px; color: #666; line-height: 28px;}
    .desc-set p:not(:last-child){margin-bottom: 20px;}
    .prod-image{position: relative; margin-top: 80px;}
    .prod-image img{border-radius: var(--radius01);}
    .rotate-circle {
        display: none;
        position: absolute; top: 0; right: 87px;
        width: 232px; aspect-ratio: 1;
        animation: rotate 14s linear infinite;
        translate: 0 -70%; pointer-events: none;
        text { font-size: 18px; font-weight: 300; fill: var(--point-color01); letter-spacing: 13px; }
    }
    @media (width <= 1280px) {
        .sec-cont{padding: 110px 0 0;}
        .main-text{font-size: 50px; line-height: 58px;}
        .rotate-circle {width: 190px; right: 20px; translate: 0 -50%;}
    }
    @media (width <= 1023px) {
        .sec-cont{padding: 90px 0 0;}
        .main-text{font-size: 43px; line-height: 52px;}
        .desc-set{margin-top: 40px;}
        .desc-set p{font-size: 17px; line-height: 27px;}
        .desc-set p:not(:last-child){margin-bottom: 15px;}
        .prod-image{margin-top: 60px;}
        .prod-image .image{height: 340px;}
        .rotate-circle {display: none;}
    }
    @media (width <= 767px) {
        .sec-cont{padding: 60px 0 0;}
        .main-text{font-size: 30px; line-height: 45px;}
        .desc-set{margin-top: 30px;}
        .desc-set p{font-size: 16px; line-height: 26px;}
        .prod-image{margin-top: 50px;}
        .prod-image .image{height: 240px;}
        .prod-image img{object-position: 80% 50%;}

    }
}


/* ==========================================================================
    Collection
    ========================================================================== */
.pg-prod {
    font-size: 18px; font-weight: 300; color: #666; line-height: 28px;
    & .row-detail{display: flex; flex-wrap: wrap; margin-bottom: 140px;}
    & .tit-row{width: 110px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: bold; color: var(--point-color01); line-height: 1; letter-spacing: 0; text-transform: uppercase;}
    & .tit-row01{font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: bold; color: var(--point-color01); letter-spacing: 0;}
    & .img-set{width: 53.165%; display: flex; flex-direction: column; gap: 20px; padding-right: 80px;}
    & .img-set img{max-width: 655px;}
    & .info-detail{flex: 1;}
    & .info-detail .tit-ko{font-size: 18px; color: #333; margin-top: 9px;}
    & .info-detail .desc{margin-top: 40px;}
    & .info-detail .desc p:not(:last-child){margin-bottom: 30px}
    & .info-detail .desc .dash{padding-left: 12px; text-indent: -12px;}
    & .info-detail .desc .dash::before{content: "- ";}
    & .list-spec{padding-top: 30px; border-top: 1px solid #000;}
    & .list-spec > li{font-size: 17px; margin-bottom: 25px}
    & .list-spec .l-item{font-family: 'Poppins', sans-serif; color: #444;}
    & .list-spec .l-vl{margin-top: 7px;}
    & .refer-text{font-size: 14px; line-height: 21px;}
    & .refer-text p{padding-left: 12px; text-indent: -12px;}
    & .refer-text p:not(:last-child){margin-bottom: 6px;}
    & .refer-text p::before{content: "※ ";}
    & .refer-btext{font-weight: 600}
    & .list-spec + .refer-text{padding-top: 6px;}
    & .desc + .refer-text{margin-top: 60px;}
    & .table-container + .refer-text{margin-top: 20px;}
    & .table-container .refer{margin-bottom: 28px;}
    & .table-container .tit-table{margin-bottom: 15px;}
    & .row-detail-w{margin-bottom: 100px;}
    & .row-detail-w .main-text{font-size: 60px; color: rgba(62,33,12,.5); line-height: 1; text-align: center; margin-bottom: 48px;}
    & .img-set01{display: flex; flex-direction: column; gap: 40px;}
    & .img-set01 .row-set{display: flex; gap: 40px;}
    & .img-set01 .align-end{justify-content: flex-end}
    & .img-set01 .row-set img{height: 430px;}
    & .copyright-vis{
        background: url('/assets/site/img/contents/bg_prod01.jpg') no-repeat center / cover;
        & .inner-sec{display: flex; justify-content: space-between; align-items: center; height: 215px; padding-left: 110px;}
        & .txt-set{color: var(--point-color0201);}
        & .txt-set .title{color: var(--point-color0201); text-transform: uppercase}
        & .txt-set p{opacity: .8; margin-top: 17px;}
        & .logo img{max-width: 341px;}
    }
    & .list-ico-text{
        > li:not(:last-child){margin-bottom: 34px;}
        & .ico{margin-bottom: 18px;}
        & .ico img{width: 50px;}
        & .title{font-weight: bold;}
        & p{margin-top: 5px;}
    }
    @media (width <= 1530px) {
        & .dspn{display: none;}
        & .copyright-vis{
            & .inner-sec{padding-left: 0;}
        }
    }
    @media (width <= 1280px) {
        font-size: 17px; line-height: 27px;
        & .row-detail{margin-bottom: 100px;}
        & .img-set{width: 50%;}
        & .img-set01 .row-set img{height: 340px;}
    }
    @media (width <= 1200px) {
        font-size: 16px; line-height: 25px;
        & .tit-row01{font-size: 18px;}
        & .img-set{width: 48%; padding-right: 60px;}
        & .img-set01 .row-set img{height: 280px;}
        & .list-spec > li{font-size: 16px; margin-bottom: 16px;}
        & .info-detail .desc{margin-top: 30px;}
        & .desc + .refer-text{margin-top: 40px;}
        & .list-ico-text{
            & .ico{margin-bottom: 14px;}
            & .ico img{width: 45px;}
        }
        & .copyright-vis{
            & .logo img{max-width: 300px;}
        }
    }
    @media (width <= 1023px) {
        font-size: 16px; line-height: 27px;
        & .row-detail{margin-bottom: 80px;}
        & .tit-row{width: 100%; margin-bottom: 20px;}
        & .info-detail .tit-ko{font-size: 17px;}
        & .img-set{width: 50%; padding-right: 20px;}
        & .info-detail{padding-left: 20px;}
        & .info-detail .desc{margin-top: 20px;}
        & .img-set01{gap: 20px;}
        & .img-set01 .row-set{gap: 20px;}
        & .img-set01 .row-set img{height: 220px;}
        & .row-detail-w .main-text{font-size: 54px; margin-bottom: 36px;}
        & .copyright-vis{
            & .inner-sec{flex-direction: column-reverse; align-items: center; gap: 20px; text-align: center; height: auto; padding: 48px 0;}
            & .logo img{max-width: 280px;}
        }
    }
    @media (width <= 767px) {
        & .row-detail{flex-direction: column; gap: 20px;}
        & .tit-row{margin-bottom: 0}
        & .tit-row01{font-size: 17px;}
        & .list-spec{margin-top: 30px;}
        & .img-set{width: 100%; padding-right: 0; text-align: center}
        & .img-set img{max-width: 100%;}
        & .info-detail{padding-left: 0;}
        & .row-detail-w .main-text{font-size: 48px; line-height: 46px}
        & .img-set01 .row-set{flex-direction: column;}
        & .img-set01 .row-set img{width: 100%; height: auto;}
        & .copyright-vis{
            & .inner-sec{padding: 40px 0;}
            & .logo img{max-width: 230px;}
        }
    }
}
.top-detail {
    & .inner-sec{position: relative; display: grid; grid-template-columns: 720fr 640fr; align-items: center; gap: 60px; padding: 130px 0 100px; border-bottom: 1px solid #d5d5d5;}
    & .info-area {
        & .btn-container{margin-top: 38px;}
        & .btn-buy{display: inline-flex; width: 170px; }
        & .btn-buy span{font-size: 17px;}
    }
    @media (width <= 1280px) {
        & .inner-sec{padding: 120px 0 100px;}
    }
    @media (width <= 1200px) {
        & .inner-sec{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 40px; padding: 100px 0;}
        & .info-area{
            display: flex; flex-direction: column;
            & .btn-container{margin-top: auto;}
            & .btn-buy{width: 160px; height: 48px; margin-top: 20px;}
            & .btn-buy span{font-size: 16px;}
        }
    }
    @media (width <= 1023px) {
        & .inner-sec{grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 40px 0 60px;}
        & .info-area {
            & .btn-container{margin-top: 30px;}
            & .btn-buy{margin-top: 0;}
        }
    }
    @media (width <= 767px) {
        & .info-area .btn-container{margin-top: 40px;}
    }
}
.pg-product {
    font-size: 18px; font-weight: 300; color: #666; line-height: 28px;
    overflow: hidden;
    .text-group {
        .txt-en{font-size: 14px; font-weight: 200; color: #000; line-height: 1; margin-bottom: 25px; letter-spacing: 0;}
        .main-text{font-size: 36px; font-weight: 700; color: var(--point-color01); line-height: 1.42; letter-spacing: -0.5px;}
        .main-text.s01{font-size: 40px;}
        .main-text.s02{font-size: 24px;}
        .main-text.s03{font-size: 34px;}
        .main-text.s04{font-size: 26px;}
        .desc{margin-top: 15px;}
        .desc strong{font-weight: 600; color: var(--basic-color);}
    }
    .prod-img{border-radius: var(--radius01);}
    .lr-detail {
        padding-top: 100px; padding-bottom: 120px;
        .main-copy {
            position: relative; text-align: center;
            &::after{content: ""; display: block; width: 1px; height: 200px; background-color: #000; margin: 80px auto;}
            &.no-line{margin-bottom: 260px;}
            &.no-line::after{display: none;}
        }
        .lr-desc{display: flex; flex-direction: column; gap: 120px;}
        .lr-row{display: flex; gap: 80px;}
        .lr-image{flex: 720;}
        .lr-txtset{flex: 620; padding-top: 60px;}
        .lr-txtset .desc{margin-top: 32px;}
        .lr-row:nth-child(even) .lr-txtset{text-align: right; order: -1;}
    }
    .grid-detail {
        .title-bar{text-align: center; padding: 32px 0 38px; border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: 80px;}
        .title-bar .desc{margin-top: 10px;}
        .grid-list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 100px 60px;}
        .grid-item {
            .thumb{aspect-ratio: 867 / 800}
            .info-desc{margin-top: 31px;}
            .info-desc .txt01{margin-top: 1px;}
            .info-desc .txt02{margin-top: 20px;}
            .info-desc strong{display: block;}
        }
    }
    .diagram-detail {
        padding-top: 112px; padding-bottom: 120px;
        .diagram-title{text-align: center; margin-bottom: 53px;}
        .diagram-circle{display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}
        .circle-item{width: 200px; aspect-ratio: 1; border: 1px solid #c79b64; border-radius: 50%; background-color: #f6f0e7; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #c79b64; text-align: center;}
        .circle-item.is-active{background-color: #bd9766; border-color: #bd9766; color: #fff;}
        .txt-en{font-size: 12px; font-weight: 500; line-height: 1; margin-bottom: 8px;}
        .step-title{font-size: 22px; font-weight: 700; line-height: 1.1;}
        .diagram-note{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 60px auto 0;}
        .note-item{display: flex; justify-content: center; align-items: center; gap: 17px; height: 68px; font-size: 22px; font-weight: 400; color: var(--point-color03); text-align: center; line-height: 1.4; padding: 0 28px; background-color: #eaded0; border-radius: 8px;}
        .note-item strong{font-weight: 700;}
        .bar{opacity: .7;}
    }
    .vis-detail {
        padding-bottom: 60px;
        .main-copy {
            position: relative; text-align: center;
            &::before{content: ""; display: block; width: 1px; height: 200px; background-color: #000; margin: 0 auto 80px;}
        }
        .wide-vis{margin-top: 80px;}
    }
    :lang(en) &,
    :lang(ja) & {
        .grid-detail .grid-item .info-desc strong{display: inline;}
    }
    :lang(en) & {
        .diagram-detail {
            .step-title{line-height: 1.2;}
            .diagram-note{max-width: 1200px;}
            .note-item{font-size: 18px;}
        }
    }
    :lang(ja) & {
        font-size: 17px; font-weight: 400;
        .diagram-detail .note-item{font-size: 20px;}
    }
    @media (width <= 1420px) {
        .lr-detail .lr-row{gap: 60px;}
    }
    @media (width > 1280px) {
        :lang(en) & {
            .grid-detail .grid-item .info-desc .txt02{font-size: 17px; line-height: 27px;}
        }
    }
    @media (width <= 1280px) {
        font-size: 17px; line-height: 27px;
        .text-group {
            .main-text{font-size: 32px;}
            .main-text.s01{font-size: 36px;}
            .main-text.s02{font-size: 21px;}
            .main-text.s03{font-size: 30px;}
            .main-text.s04{font-size: 23px;}
        }
        .lr-detail {
            padding-top: 100px; padding-bottom: 120px;
            .main-copy {
                &::after{height: 170px; margin: 70px auto;}
                &.no-line{margin-bottom: 230px;}
            }
            .lr-desc{gap: 80px;}
            .lr-row{align-items: center; gap: 40px;}
            .lr-txtset{padding-top: 0;}
            .lr-txtset .desc{margin-top: 25px;}
        }
        .grid-detail {
            .title-bar{margin-bottom: 60px;}
            .grid-list{gap: 80px 40px;}
            .grid-item {
                .info-desc strong{display: inline;}
                .info-desc .txt02{margin-top: 15px;}
            }
        }
        .diagram-detail {
            padding-top: 100px; padding-bottom: 76px;
            .circle-item{width: 180px;}
            .step-title{font-size: 20px;}
            .note-item{font-size: 20px;}
        }
        .vis-detail {
            padding-bottom: 40px;
            .main-copy::before{height: 170px; margin: 0 auto 75px;}
            .wide-vis{margin-top: 60px;}
        }
        :lang(ja) & {
            font-size: 16px;
        }
    }
    @media (width <= 1200px) {
        font-size: 16px; line-height: 25px;
        .text-group {
            .main-text{font-size: 27px;}
            .main-text.s01{font-size: 30px;}
            .main-text.s02{font-size: 20px;}
            .main-text.s03{font-size: 26px;}
            .main-text.s04{font-size: 20px;}
            .desc{margin-top: 10px;}
        }
        .lr-detail {
            padding-top: 80px; padding-bottom: 90px;
            .main-copy {
                &::after{height: 140px; margin: 60px auto;}
                &.no-line{margin-bottom: 170px;}
            }
        }
        .vis-detail .main-copy::before{height: 140px; margin: 0 auto 60px;}
        :lang(en) & {
            .diagram-detail .note-item{font-size: 17px;}
        }
        :lang(ja) & {
            font-size: 15px;
        }
    }
    @media (width <= 1023px) {
        .lr-detail {
            padding-top: 60px; padding-bottom: 70px;
            .main-copy {
                &::after{height: 100px; margin: 50px auto;}
                &.no-line{margin-bottom: 150px;}
            }
            .lr-desc{gap: 60px;}
            .lr-row{flex-direction: column; align-items: stretch; gap: 30px;}
            .lr-image,
            .lr-txtset{flex: 1;}
            .lr-txtset .desc{margin-top: 15px;}
            .lr-row:nth-child(even) .lr-txtset{text-align: left; order: initial;}
        }
        .grid-detail {
            .grid-list{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 40px;}
            .grid-item {
                .info-desc{margin-top: 25px;}
                .info-desc .txt02{margin-top: 12px;}
            }
        }
        .diagram-detail{
            padding-top: 80px; padding-bottom: 80px;
            .diagram-title{margin-bottom: 40px;}
            .circle-item{width: 150px;}
            .step-title{font-size: 19px;}
            .diagram-note{grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px;}
            .note-item{font-size: 19px;}
        }
        .vis-detail {
            padding-bottom: 30px;
            .main-copy::before{height: 100px; margin: 0 auto 50px;}
            .wide-vis{aspect-ratio: 688 / 300; margin-top: 50px;}
        }
        :lang(ja) & {
            .diagram-detail .note-item{font-size: 18px;}
        }
    }
    @media (width <= 767px) {
        .text-group {
            .main-text{font-size: 24px;}
            .main-text.s01{font-size: 26px;}
            .main-text.s03{font-size: 24px;}
        }
        .lr-detail {
            .main-copy {
                &::after{height: 60px; margin: 40px auto;}
                &.no-line{margin-bottom: 130px;}
            }
            .lr-row{gap: 26px;}
            .lr-txtset .desc{margin-top: 12px;}
        }
        .grid-detail {
            .title-bar {
                margin-bottom: 40px;
                .desc{word-break: break-all;}
            }
            .grid-list{grid-template-columns: minmax(0, 1fr); gap: 50px;}
            .grid-item .thumb{aspect-ratio: 30 / 19;}
        }
        .diagram-detail {
            padding-bottom: 56px;
            .circle-item{width: calc(50% - 6px); max-width: 160px;}
            .note-item{height: 56px; padding: 0 16px; font-size: 16px; gap: 10px;}
        }
        .vis-detail {
            .main-copy::before{height: 60px; margin: 0 auto 40px;}
            .wide-vis{aspect-ratio: 688 / 400; margin-top: 40px;}
        }
        :lang(en) {
            .grid-detail .title-bar .desc{word-break: keep-all;}
            .diagram-detail{
                .note-item{flex-direction: column; gap: 4px; height: auto; padding: 14px 16px;}
                .bar{display: none;}
            }
        }
        :lang(ja) & {
            .text-group .main-text.s01{font-size: 23px;}
            .diagram-detail .note-item{font-size: 17px;}
        }
    }
}
.prod-iruna {
    @media (width <= 767px) {
        .lr-detail .text-group .desc{font-size: 15px;}
    }
}

.caution-container {
    padding-top: 100px;
    padding-bottom: 100px;
    & .row-detail{margin-bottom: 0;}
    & .list-ico-text{margin-top: 80px;}
    @media (width <= 1200px) {
        & .list-ico-text{margin-top: 40px;}
    }
}

.guide-container {
    & .table-container:first-child{padding-top: 65px; border-top: 1px solid var(--point-color0202);}
    & .table-container:not(:last-child){margin-bottom: 65px;}
    & .tit-table{font-size: 26px; font-weight: bold; color: #000; margin-bottom: 20px;}
    & .table01 .tw01{width: 20.45%;}
    & .table01 .t-item{word-break: keep-all;}
    :lang(ja) {
        & .table01 .t-item{word-break: break-all;}
        & .table01 th, & .table01 td{font-size: 17px; line-height: 27px;}
    }
    @media (width <= 1200px) {
        & .tit-table{font-size: 24px;}
        & .table01 th, & .table01 td{font-size: 17px; line-height: 27px;}
        :lang(ja) {
            & .table01 th, & .table01 td{font-size: 16px; line-height: 26px;}
        }
    }
    @media (width <= 1023px) {
        & .table-container:first-child{padding-top: 50px;}
        & .table-container:not(:last-child){margin-bottom: 50px;}
        & .tit-table{font-size: 22px;}
        & .table01 th, & .table01 td{font-size: 16px; line-height: 26px; padding: 12px 20px;}
        :lang(ja) {
            & .table01 th, & .table01 td{font-size: 15px; line-height: 25px;}
        }
    }
    @media (width <= 767px) {
        & .tit-table{font-size: 20px;}
        & .table01 table{min-width: 460px;}
        & .table01 .tw01{width: 100px;}
        & .table01 th, & .table01 td{font-size: 15px; line-height: 25px; padding: 10px 14px;}
        :lang(en) {
            & .table01 .tw01{width: 116px;}
        }
        :lang(ja) {
            & .table01 th, & .table01 td{font-size: 14px; line-height: 24px;}
        }
    }
}

/* ==========================================================================
    SUPPORT
    ========================================================================== */
.pg-faq{
    padding-top: 80px;
    padding-bottom: 80px;

}

.pg-request{


}

/* ==========================================================================
    약관 등
    ========================================================================== */
.pg-terms{
    & .sub-tit-area .pg-title .title {font-size: 36px;}
    & .guide .full{padding: var(--main-gap); font-size: 16px; color: #666; line-height: 26px; background-color: #f5f5f5;}
    & .guide .con_text{font-size: 16px; color: #555; line-height: 28px;}
    & .guide .con_text ol > li > div.tit{font-size: 16px; color: #333}
    @media (width <= 1023px) {
        &#content{padding-bottom: 0}
        & .guide{margin-left: calc(var(--main-gap) * -1); margin-right: calc(var(--main-gap) * -1);}
        & .guide .full{padding: var(--main-gap) var(--main-gap) 100px}
    }
    @media (width <= 767px) {
        & .sub-tit-area .pg-title .title {font-size: 28px;}
        & .guide .con_text{font-size: 15px; line-height: 26px;}
    }
}

/*준비중*/
.empty-data{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    & .txt-set{text-align: center; padding-top: 137px; background: url("/assets/site/img/common/symbol.png") no-repeat center 0 / 83px auto;}
    & .main-text{font-family: 'Poppins', sans-serif; font-size: 17px; color: var(--point-color01); letter-spacing: 0;}
    & p{font-size: 14px; color: #999; margin-top: 11px;}
    @media (width <= 1200px) {
        height: 450px;
    }
    @media (width <= 1023px) {
        height: 300px;
        & .txt-set{padding-top: 121px; background: url("/assets/site/img/common/symbol.png") no-repeat center 0 / 68px auto;}
    }
    @media (width <= 767px) {
        height: 240px;
        & .txt-set{padding-top: 106px; background: url("/assets/site/img/common/symbol.png") no-repeat center 0 / 58px auto;}
    }
}

/* ==========================================================================
    기타 다국어
    ========================================================================== */
html:lang(en) {

}

/* ==========================================================================
    etc
    ========================================================================== */
.p-arco .row01 .img-set {margin-top: 4rem;}
.p-arco .caution-container .list-ico-text {margin-top: 40px;}
.p-arco .caution-content:first-child {margin-bottom: 5rem;}

@media (width <= 767px) {
    .p-arco .row01 .img-set {margin-top: 0;}
}

/* ==========================================================================
    Collection List
    ========================================================================== */
.pd_list_section {
    position: relative;
    /* width: 1920px; */
    margin: 0 auto;
}

.pd_list_section .inner-sec {
    position: relative;
    display: grid;
    grid-auto-rows: 5fr;
    grid-template-columns: 1fr 1fr 1fr;;
    gap: 5rem;
    padding: 5rem;
}

@media (width <= 1450px) {
    .pd_list_section .inner-sec{
        gap: 3rem;
        padding: 3rem;
        grid-auto-rows: 10fr;
    }
}

@media (width <= 1024px) {
    .pd_list_section .inner-sec{
        gap: 2rem;
        padding: 3rem;
        grid-auto-rows: 14fr;
        grid-template-columns: 1fr 1fr;;
    }
}

@media (width <= 768px) {
    .pd_list_section .inner-sec{
        gap: 2rem;
        padding: 20px;
        grid-auto-rows: 14fr;
        grid-template-columns: 1fr;;
    }
}


.prod_box {
    width: 100%;
    height: 100%;
}

.prod_box .info-box {padding-top: 24px;}
.prod_box .info-box .sub-text {color: #555; margin-bottom: 7px;}
.prod_box .info-box .title {font-size: 24px; font-weight: 800; color: #000; letter-spacing: 0;}

.pd_banner {position: relative; display: flex; width: 100%;}
.pd_banner .image { width: 65%;}
.pd-cont {position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 35%; color: #fff; padding: 65px; background: var(--point-color03);}
.ban-tit {font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: bold; line-height: 60px;}
.ban-text {font-size: 18px; line-height: 28px; margin-top: 12px;}
.ban-bot {text-align: end;}

@media (width <= 1600px) {
    .pd-cont{padding: 45px;}
}
@media (width <= 1420px) {
    .pd_banner .image { height: 480px;}
    .ban-tit {font-size: 34px; line-height: 50px;}
    .ban-text {font-size: 17px;}
}
@media (width <= 1280px) {
    .pd_banner .image{flex: 1; width: auto; height: 430px;}
    .pd-cont{width: 420px;}
    .ban-tit {font-size: 32px; line-height: 48px;}
    .ban-bot img{width: 114px;}
}

@media (width <= 1023px) {
    .pd_banner .image{flex: 0 0 50%; height: 400px;}
    .pd-cont{width: 50%; padding: 40px;}
    .ban-tit {font-size: 30px; line-height: 46px;}
    .ban-bot img{width: 106px;}
}
@media (width <= 767px) {
    .pd_list_section{margin-top: 30px;}
    .pd_banner{flex-direction: column;}
    .pd_banner .image{flex: 0 0 auto; width: 100%; height: auto;}
    .pd-cont{width: 100%; padding: 50px 20px;}
    .ban-tit {font-size: 29px; line-height: 45px;}
    .ban-bot{display: none;}
}


/* ==========================================================================
    폰트 및 기타 다국어
    ========================================================================== */
html:lang(en) {

}
html:lang(ja) {

}