@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 40px;
    --main-width: 1420px;
    --basic-color: #222;
    --bg-color: #fafaf5;
    --point-color01: #008d54;
    --point-color02: #77be59;
    --point-color0201: #14a83b;
    --header-color: #fff;
    --header-height: 96px;
    --subnav-height: 56px;

    --form-dot: #00a650;
    --form-border: #e7e7e7;
    --form-gray: #f1f2ef;
    --form-focus: #222;
    --form-basic: #333;
    --form-chk: #00a650;
    --form-fontsize : 16px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;
    --form-placeholder : rgba(34,34,34,.5);
    --form-padding : 21px;
    --form-padding1 : 14px 21px;
    --input-height: 54px;
    --input-gap: 20px;
    --input-buttonw : 120px;
    --textarea-height: 227px;
}

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

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

::selection{background-color: var(--point-color01); color: #fff;}
/* body:not(#main){padding-right: 0 !important; overflow-y: auto !important;}*/
html {
    font-size: 16px;
    &:lang(ko) {
        letter-spacing: -0.25px;
        word-break: keep-all;
    }
    &:lang(en){
        font-size: 14px;
    }
}
body {
    font-family: 'Pretendard', 'Malgun Gothic', '맑은고딕', '돋움', 'dotum', 'Helvetica', 'AppleSDGothicNeo', sans-serif;
    font-weight: 400;
    color: var(--basic-color);
    background-color: var(--bg-color);
    :lang(en) &{
        font-family: 'Roboto', sans-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 <= 1320px) {
        width: auto;
        padding-left: var(--main-gap);
        padding-right: var(--main-gap);
    }
}
.grid03 {
    position: relative;
    max-width: 1150px;
    margin: 0 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: 14px;
    > 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{
    :is(span, a){font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: bold; color: #222; letter-spacing: 0; text-transform: uppercase}
    :is(span, a)::after{content: ""; position: relative; top: -1px; display: inline-block; width: 12px; height: 2px; background-color: var(--point-color01); vertical-align: middle; border-radius: 2px; margin-left: 10px;}
    @media (width <= 1023px) {
        :is(span, a){font-size: 12px;}
        :is(span, a)::after{width: 10px; margin-left: 8px;}
    }
}
.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;}
/* ==========================================================================
    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
   ========================================================================== */
.tit-sec01{
    font-weight: bold;
    & .txt-en{font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--point-color01); line-height: 20px; letter-spacing: 0; text-transform: uppercase; margin-bottom: 11px;}
    & .title{font-size: 32px; line-height: 42px;}
    & p{font-size: 16px; font-weight: 300; line-height: 24px; margin-top: 12px;}
    @media (width <= 1200px) {
        & .txt-en{margin-bottom: 7px}
        & .title{font-size: 30px; line-height: 40px;}
    }
    @media (width <= 1023px) {
        & .txt-en{font-size: 13px;}
        & .title{font-size: 28px;}
    }
    @media (width <= 767px) {
        & .txt-en{margin-bottom: 4px;}
        & .title{font-size: 24px; line-height: 35px}
        & p{font-size: 15px; line-height: 22px;}
    }
}
.tit-sec02{
    font-weight: bold;
    & .txt-en{font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--point-color0201); line-height: 20px; letter-spacing: 0; text-transform: uppercase; margin-bottom: 21px;}
    & .title{font-size: 36px; line-height: 48px;}
    & p{font-size: 16px; font-weight: 300; line-height: 30px; margin-top: 9px;}
    @media (width <= 1200px) {
        & .txt-en{margin-bottom: 12px;}
        & .title{font-size: 32px; line-height: 42px;}
    }
    @media (width <= 1023px) {
        & .txt-en{font-size: 13px;}
        & .title{font-size: 28px; line-height: 38px;}
    }
    @media (width <= 767px) {
        & .txt-en{margin-bottom: 9px;}
        & .title{font-size: 26px; line-height: 38px;}
    }
}
.tit-sec03 {
    text-align: center;
    & .txt-en{font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: bold; color: var(--point-color01); text-transform: uppercase; letter-spacing: 0; margin-bottom: 5px;}
    & .main-text{font-size: 36px; font-weight: bold; line-height: 1.25;}
    & p{font-size: 18px; color: #666; line-height: 28px; margin-top: 17px;}
    @media (width <= 1200px) {
        & .main-text{font-size: 32px;}
        & p{font-size: 17px; line-height: 26px; margin-top: 14px;}
    }
    @media (width <= 1023px) {
        & .main-text{font-size: 30px;}
        & p{margin-top: 10px;}
    }
    @media (width <= 767px) {
        & .main-text{font-size: 26px;}
        & p{font-size: 16px;}
    }
}


.pg-title{
    text-align: center;
    padding-top: 84px;
    & .txt-en{font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: bold; color: var(--point-color01); text-transform: uppercase; margin-bottom: 7px;}
    & .title{font-size: 36px; font-weight: bold;}
    html:lang(en) &{
        & .txt-en{display: none;}
    }
    @media (width <= 1200px) {
        padding-top: 60px;
        & .title{font-size: 32px;}
    }
    @media (width <= 1023px) {
        padding-top: 50px;
        & .txt-en{font-size: 13px;}
        & .title{font-size: 30px;}
    }
    @media (width <= 767px) {
        padding-top: 40px;
        & .title{font-size: 28px;}
    }

}

/* ==========================================================================
    MAIN VISUAL & MAIN CONTENTS - main.css
    ========================================================================== */


/* ==========================================================================
    About
    ========================================================================== */
.pg-about{
    & .sec01{
        padding-top: 135px;
        padding-bottom: 60px;
        & .inner-sec{display: grid; grid-template-columns: repeat(2, 1fr);}
        & .left-area{max-width: 610px; padding-right: 60px;}
        & .image{margin-top: 50px;}
        & .image img{border-radius: 15px;}
        & .txt-set > li:not(:last-child){margin-bottom: 38px}
        & .txt-set .title{font-size: 22px; font-weight: bold; color: var(--point-color01)}
        & .txt-set p{font-size: 18px; font-weight: 300; line-height: 32px; margin-top: 11px;}
    }
    & .sec02{
        padding-top: 98px;
        padding-bottom: 20px;
        & .tit-area{display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 29px; border-bottom: 1px solid #71be47;}
        & .tit-area .tit-sec02 .txt-en{color: var(--point-color01); margin-bottom: 7px;}
        & .tit-area .txt-aside{font-size: 14px;}
        & .cont-area {
            padding-top: 92px;
            & .bi{text-align: center; padding: 0 40px;}
            & .bi img{max-width: 453px;}
            & p{font-size: 17px; font-weight: 300; color: #666; line-height: 30px; text-align: center; margin-top: 30px;}
        }
        & .list-color {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 65px;
            margin-top: 68px;
            > li{box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.07);}
            & .color-box{height: 106px;}
            & .color-box.c01{background: linear-gradient(to right, #14a73c 0%, #14a73c 10%, #74b04b 25%, #d5e59e 70%, #d5e59e 100%)}
            & .color-box.c02{background-color: var(--point-color01);}
            & .color-box.c03{background-color: var(--point-color02);}
            & .info-box{display: flex; justify-content: space-between; align-items: center; height: 35px; padding: 0 14px; background-color: #fff;}
            & .txt-color{font-family: 'Roboto', sans-serif; font-size: 11px; color: #666;}
        }
        & .btn-more{text-align: center; margin-top: 67px;}
    }

    @media (width <= 1200px) {
        & .sec01{
            padding-top: 100px;
            padding-bottom: 50px;
            & .txt-set p{font-size: 17px; line-height: 30px;}
        }
        & .sec02{
            padding-top: 60px;
            padding-bottom: 0;
            & .list-color{gap: 40px;}
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            padding-top: 80px;
            padding-bottom: 40px;
            & .inner-sec{grid-template-columns: 1fr; gap: 40px;}
            & .left-area{max-width: 100%; padding-right: 0;}
            & .image{text-align: center; margin-top: 30px;}
            & .image img{max-width: 640px;}
            & .txt-set .title{font-size: 20px;}
        }
        & .sec02{
            padding-top: 50px;
            & .tit-area .txt-aside{font-size: 13px;}
            & .cont-area{
                padding-top: 80px;
                & .bi img{max-width: 370px;}
            }
            & .list-color{gap: 30px;}
            & .btn-more .button04{width: 180px; height: 52px;}
        }
    }
    @media (width <= 767px) {
        & .sec01{
            padding-bottom: 40px;
            & .txt-set p{font-size: 16px; line-height: 28px;}
        }
        & .sec02{
            padding-top: 40px;
            & .cont-area{
                padding-top: 40px;
                & .bi{padding: 0}
                & .bi img{max-width: 370px;}
                & p{font-size: 16px; line-height: 28px;}
            }
            & .tit-area .txt-aside{display: none}
            & .list-color {
                gap: 14px;
                margin-top: 50px;
                & .color-box{height: 70px;}
                & .info-box{padding: 0 5px;}
                & .txt-color{font-size: 10px;}
            }
            & .btn-more{margin-top: 50px;}
        }
    }
}

/* ==========================================================================
    상품소개
    ========================================================================== */
.list-icon{
    > ul{display: grid; grid-template-columns: repeat(3, 200px); justify-content: center; gap: 110px;}
    > ul > li{text-align: center}
    & .ico{display: flex; justify-content: center; align-items: center; height: 94px;}
    & .ico01 img{width: 78px;}
    & .ico02 img{width: 81px;}
    & .ico03 img{width: 80px;}
    & .txt-set{margin-top: 26px;}
    & .txt-set .title{font-size: 20px; font-weight: bold}
    & .txt-set p{font-size: 16px; color: #666; line-height: 1.3; margin-top: 9px;}
    @media (width <= 1200px) {
        > ul{gap: 60px;}
    }
    @media (width <= 1023px) {
        > ul{gap: 20px;}
        & .ico{height: 80px;}
        & .ico img{scale: .9}
        & .txt-set .title{font-size: 18px}
        }
    @media (width <= 767px) {
        ul{grid-template-columns: 1fr; gap: 40px;}
        & .txt-set .title{font-size: 20px}
    }
}
.list-lr{
    > ul > li{display: flex; justify-content: space-between; gap: 100px; padding-top: 50px; padding-bottom: 50px;}
    > ul > li:nth-child(even){flex-direction: row-reverse;}
    > ul > li > div{width: 530px;}
    & .right-area{display: flex; justify-content: center; align-items: center; border-top: 1px solid #e6e6e4;}
    & .txt-set{text-align: center}
    & .txt-set .txt-en{font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: bold; color: var(--point-color01); letter-spacing: 0; text-transform: uppercase; margin-bottom: 20px;}
    & .txt-set .main-text{font-size: 24px; font-weight: 200; line-height: 36px;}
    @media (width <= 1280px) {
    }
    @media (width <= 1200px) {
        > ul > li{gap: 80px; padding-top: 40px; padding-bottom: 40px;}
    }
    @media (width <= 1023px) {
        > ul > li{gap: 60px; padding-top: 30px; padding-bottom: 30px;}
        & .txt-set .txt-en{font-size: 13px; margin-bottom: 15px;}
        & .txt-set .main-text{font-size: 22px; line-height: 33px;}
    }
    @media (width <= 767px) {
        > ul > li{flex-direction: column; gap: 40px; padding-top: 20px; padding-bottom: 20px;}
        > ul > li:nth-child(even){flex-direction: column;}
        > ul > li > div{width: 100%;}
        & .right-area{width: 100%; border-top: 0}
    }
}
.list-round{
    > ul{display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
    > ul > li{display: flex; height: 52px; font-size: 16px; font-weight: bold; overflow: hidden;}
    > ul > li > div{display: flex; justify-content: center; align-items: center; padding: 0 24px; border: 1px solid var(--point-color01);}
    & .r-item{color: #fff; background-color: var(--point-color01); border-radius: 26px 0 0 26px;}
    & .r-vl{color: var(--point-color01); background-color: #fff; border-radius: 0 26px 26px 0;}
    @media (width <= 1200px) {
        > ul{gap: 14px;}
    }
    @media (width <= 1023px) {
        > ul{gap: 14px;}
        > ul > li{height: 46px; font-size: 15px;}
        > ul > li > div{padding: 0 18px;}
        & .r-item{border-radius: 23px 0 0 23px;}
        & .r-vl{border-radius: 0 23px 23px 0;}
    }
    @media (width <= 767px) {
        > ul{gap: 12px;}
        > ul > li{height: 42px;}
        > ul > li > div{padding: 0 16px;}
        & .r-item{border-radius: 21px 0 0 21px;}
        & .r-vl{border-radius: 0 21px 21px 0;}
    }
}
.pg-prod{
    .sec01{
        padding-top: 112px;
        padding-bottom: 100px;
        & .tit-sec03 p{font-size: 17px;}
        & .list-icon{margin-top: 65px;}
        & .list-lr{margin-top: 65px;}
    }
    .sec02{
        padding-top: 145px;
        padding-bottom: 140px;
        background-color: #faf3d6;
        & .tit-sec02{text-align: center; margin-bottom: 102px;}
        & .tit-sec02 .txt-en{color: var(--point-color02); margin-bottom: 9px;}
        & .tit-sec02 .title{color: var(--point-color01);}
        & .efficacy-container{
            display: grid;
            grid-template-columns: 29% 1fr 29%;
            & .obj{text-align: center; translate: 0 -26px;}
            & .obj img{max-width: 552px;}
            & .list-desc > li{display: flex; gap: 10px;}
            & .list-desc > li:not(:last-child){margin-bottom: 32px;}
            & .list-desc .num{position: relative; top: 1px; font-size: 11px; font-weight: 800; letter-spacing: 0;}
            & .list-desc .txt-set .title{font-size: 20px; font-weight: bold; color: var(--point-color01);}
            & .list-desc .txt-set p{font-size: 16px; color: #666; line-height: 24px; word-break: keep-all; margin-top: 7px;}
            & .txt-right{text-align: right;}
            & .txt-right > li{flex-direction: row-reverse}
        }
        & .list-round{max-width: 1000px; margin: 30px auto 0;}
    }
    .sec03{
        padding-top: 140px;
        & .list-box > ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px;}
        & .list-box .item-box > a{display: block; height: 100%; background-color: #fff; border-radius: 15px; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.1);}
        & .list-box .thumb{position: relative; border-radius: 15px 15px 0 0; overflow: hidden;}
        & .list-box .info-box{position: relative; padding: 0 40px 50px; margin-top: -2px;}
        & .list-box .info-box .tit-box{font-size: 24px; font-weight: bold; color: var(--point-color01); margin-bottom: 12px;}
        & .list-box .info-box > ul > li{font-size: 16px; color: #666; line-height: 26px; padding-left: 8px; text-indent: -8px;}
        & .list-box .info-box > ul > li::before{content: "· "; color: var(--point-color01);}
        & .list-box .info-box .btn-more01{margin-top: 19px;}
    }
    html:lang(vi) &{
        @media (width > 1280px) {
            & .list-box .info-box{padding: 0 20px 30px;}
            & .list-box .info-box .tit-box{font-size: 22px;}
        }
    }

    @media (width <= 1420px) {
        .sec03{
            & .list-box > ul{gap: 40px;}
        }
    }
    @media (width <= 1280px) {
        .sec03{
            & .list-box .info-box{padding: 0 20px 30px;}
            & .list-box .info-box .tit-box{font-size: 22px;}
        }
    }
    @media (width <= 1200px) {
        .sec01{
            padding-top: 100px;
            padding-bottom: 100px;
        }
        .sec02{
            padding-top: 100px;
            padding-bottom: 80px;
            & .tit-sec02{margin-bottom: 80px;}

        }
        .sec03{
            padding-top: 100px;
            & .list-box > ul{gap: 30px;}
            & .list-box .info-box{padding: 0 20px 30px;}
            & .list-box .info-box .tit-box{font-size: 20px;}
            & .list-box .info-box > ul > li{font-size: 15px;}
        }
    }
    @media (width >= 768px) and (width <= 1200px) {
        .sec03{
            padding-top: 80px;
            & .list-box > ul{gap: 20px;}
            & .list-box .info-box{padding: 0 18px 30px;}
            & .list-box .info-box .tit-box{font-size: 19px;}
            & .list-box .info-box > ul > li{font-size: 14px; line-height: 22px;}
        }
    }
    @media (width <= 1023px) {
        .sec01{
            padding-top: 80px;
            padding-bottom: 90px;
        }
        .sec02{
            padding-top: 80px;
            padding-bottom: 90px;
            & .tit-sec02{margin-bottom: 60px;}
            & .efficacy-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
                & .obj{order: 1; grid-area: 1 / 1 / 2 / 3;}
                & .obj img{max-width: 450px;}
                & .list-desc > li:not(:last-child){margin-bottom: 20px;}
                & .txt-left{order: 2;}
                & .txt-right{order: 3; text-align: left;}
                & .txt-right > li{flex-direction: row;}
                & .list-desc .txt-set .title{font-size: 18px;}
            }
            & .list-round{margin-top: 60px;}
        }
    }
    @media (width <= 767px) {
        .sec01{
            padding-bottom: 80px;
            & .tit-sec03 p{font-size: 17px;}
        }
        .sec02{
            & .efficacy-container {
                grid-template-columns: 1fr;
                gap: 0;
                & .obj{order: 1; grid-area: 1 / 1 / 1 / 1;}
                & .txt-left > li:last-child{margin-bottom: 20px;}
            }
        }
        .sec03{
            & .list-box > ul{grid-template-columns: 1fr; gap: 20px;}
            & .list-box .info-box .tit-box{font-size: 22px;}
            & .list-box .info-box > ul > li{font-size: 16px;}
        }
    }
}

/* ==========================================================================
    홍보
    ========================================================================== */
.pg-board{
    & .top-promote{padding-top: 95px; padding-bottom: 20px;}
    @media (width <= 1200px) {
        & .top-promote{padding-top: 80px;}
    }
    @media (width <= 1023px) {
        & .top-promote{padding-top: 64px;}
    }
    @media (width <= 767px) {
        & .top-promote{padding-top: 56px;}
    }
}

/* ==========================================================================
    문의하기
    ========================================================================== */
.pg-contact{
    &#content{padding-bottom: 0;}
    & .sec01 {
        padding-top: 95px;
        padding-bottom: 59px;
        border-bottom: 1px solid #ebebe9;
    }
    & .sec02 {
        padding-top: 87px;
        padding-bottom: 108px;
        & .contact-container{position: relative; display: grid; grid-template-columns: 430px 1fr; gap: 80px;}
        & .tit-set{font-weight: bold; letter-spacing: 0; margin-bottom: 40px;}
        & .tit-set .txt-en{font-size: 14px;  color: var(--point-color01); text-transform: uppercase; margin-bottom: 5px;}
        & .tit-set .title{font-size: 42px; font-weight: bold; line-height: 56px;}
        & address > ul > li:not(:last-child){margin-bottom: 35px;}
        & address .a-item{font-family: 'Poppins', sans-serif; font-weight: bold; color: #c7c3bd; letter-spacing: 0; margin-bottom: 13px;}
        & address p{color: #555; line-height: 26px; word-break: keep-all;}
    }
    & .sec03{
        & .map-container .map-area{width: 100%; height: 640px;}
        & .map-container .map-area iframe{width: 100%; height: 100%;}
    }
    @media (width <= 1280px) {
        & .sec02 {
            & .contact-container{grid-template-columns: 350px 1fr; gap: 60px;}
        }
    }
    @media (width <= 1200px) {
        & .sec01 {
            padding-top: 80px;
        }
        & .sec02 {
            padding-top: 70px;
            padding-bottom: 80px;
            & .contact-container{grid-template-columns: 300px 1fr; gap: 40px;}
            & .tit-set{margin-bottom: 30px;}
            & .tit-set .txt-en{margin-bottom: 0}
            & .tit-set .title{font-size: 36px;}
            & address > ul > li{font-size: 15px;}
            & address > ul > li:not(:last-child){margin-bottom: 25px;}
            & address .a-item{margin-bottom: 10px;}
        }
        & .sec03{
            & .map-container .map-area{height: 480px;}
        }
    }
    @media (width <= 1023px) {
        & .sec01 {
            padding-top: 64px;
        }
        & .sec02 {
            padding-top: 60px;
            padding-bottom: 70px;
            & .contact-container{grid-template-columns: 1fr; gap: 20px;}
            & address > ul{display: flex; flex-wrap: wrap;}
            & address > ul > li{width: 50%;}
            & address > ul > li:first-child{width: 100%;}
        }
        & .sec03{
            & .map-container .map-area{height: 400px;}
        }
    }
    @media (width <= 767px) {
        & .sec01 {
            padding-top: 56px;
        }
        & .sec02 {
            & .tit-set{margin-bottom: 24px;}
            & .tit-set .title{font-size: 30px;}
        }
        & .sec03{
            & .map-container .map-area{height: 320px;}
        }
    }
}


/* ==========================================================================
    약관 등
    ========================================================================== */
.pg-terms{
    .guide .full{padding: var(--main-gap); font-size: 16px; color: #666; line-height: 26px;}
    .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) {
        .guide .con_text{font-size: 15px; line-height: 26px;}
    }
}

/*준비중*/
.empty-data{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    & p{display: inline-block; font-size: 14px; color: #999; line-height: 30px; padding-top: 42px; background: url("/assets/site/img/common/quote01.png") no-repeat center 0 / 36px auto;}
    @media (width <= 1023px) {
        height: 300px;
    }
    @media (width <= 767px) {
        height: 240px;
    }

}


/* ==========================================================================
    기타 다국어
    ========================================================================== */
html:lang(ja),
html:lang(cn) {
    & .main-sec01 .list-box .info-box p,
    & .pg-about .sec01 .txt-set p,
    & .pg-about .sec02 .cont-area p{font-weight: 400;}
    & .list-lr .txt-set .main-text{font-weight: 500}
    & .pg-prod .sec02 .list-desc .txt-set p{word-break: break-all;}
}



/* ==========================================================================
    etc
    ========================================================================== */
.invalid-feedback{position: relative;}