@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.product_explanation_contents {font-family: 'NanumSquare', 'BareunDotumPro1', '돋움', Dotum, dotum; color: #121212;text-align: left;}
.product_explanation_contents label {margin: 0;}
.product_explanation_contents .explanation_title {text-align: center;font-size: 1em;color: #ff562f;letter-spacing: 0.1em; font-family: 'NanumSquareExtraBold', 'BareunDotumPro1', '돋움', Dotum, dotum;}
.product_explanation_contents .explanation_title>span {font-size: 4.6em;line-height: 160%;font-weight: bolder;}
.product_explanation_contents .explanation_explane {text-align: center;color: #212121;font-weight: bolder;letter-spacing: 0.1em;}
.product_explanation_contents .explanation_explane>span {font-size: 2em;line-height: 140%; font-family: 'Pretendard-Bold', 'NanumSquareBold', 'BareunDotumPro1', '돋움', Dotum, dotum;}

.product_explanation_contents .contents_group {padding: 1em 0; line-height: 3.6em;}
.product_explanation_contents .contents_group:not(:last-child) {border-bottom: 1px solid #d5d3d3;}
.product_explanation_contents .contents_group .contents_title {padding-top: 2.5em;}
.product_explanation_contents .contents_group .contents_title>span{font-size: 2.4em;color: #ff562f;font-weight: bold;vertical-align: top;font-family: 'NanumSquareExtraBold', 'BareunDotumPro1', '돋움', Dotum, dotum;}
.product_explanation_contents .contents_group>p {padding: 2.5em 0;}
.product_explanation_contents .contents_group>p>span {font-size: 1.6em;color: #212121;line-height: 2em;vertical-align: middle; font-family: 'Pretendard-Medium', 'NanumSquareMedium', 'BareunDotumPro1', '돋움', Dotum, dotum;}

.product_explanation_contents .contents_group>div {display: flex;padding: 2.5em 0;}
.product_explanation_contents .contents_group>div ._colgroup {flex: 1 100%; }
.product_explanation_contents .contents_group>div ._colrow {display: flex;padding: 0.6em 0;}
/* 1_column */
.product_explanation_contents .contents_group>ul {padding: 2.5em 0; display: flex;flex-wrap: wrap;}
.product_explanation_contents .contents_group>ul li {flex: 1 100%;display: flex;padding: 0.6em 0;}
.product_explanation_contents .contents_group ._colrow>span,
.product_explanation_contents .contents_group li>span{font-size: 1.6em;color: #212121;letter-spacing: 0.1em;line-height: 180%; font-family: 'Pretendard-Medium', 'NanumSquareMedium', 'BareunDotumPro1', '돋움', Dotum, dotum;}
.product_explanation_contents .contents_group span._numbering {color: #212121;margin-right: 0.5em;white-space: nowrap;}
.product_explanation_contents .contents_group span._numbering::after {content: ".";}

.product_explanation_contents .contents_group>ul._column2 li {flex: 1 50%;width: 50%;min-width: 50%;}
.product_explanation_contents .contents_group ._numbering {
}
.product_explanation_contents .contents_group>ul li ._text {
}

.product_explanation_contents div._image {
    position: relative;
    padding: 0;
    display: block;
    margin-top: 3em;
    overflow: hidden;
}
.product_explanation_contents div._image::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 804.5 452.4'%3E%3C/svg%3E");
    width: 100%;
}
.product_explanation_contents div._image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}
.product_explanation_contents div._video {position: relative;padding: 0;display: block;margin-top: 3em;}
.product_explanation_contents div._video::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 804.5 452.4'%3E%3C/svg%3E");
    width: 100%;
}
.product_explanation_contents div._video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.popup[popupname] .pop_contents_wrap::-webkit-scrollbar {
    width:3px; height: 3px;
}
.popup[popupname] .product_explanation_contents {
    width: 40vw;
    min-width: 500px;
    max-width: 700px;
    font-size: 8px;
    padding-bottom: 12em !important;
    padding: 40px;
}
.popup[popupname] .product_explanation_contents::before {
    content: "CLINIC";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    line-height: 100%;
    font-family: 'NanumSquare', 'BareunDotumPro1', '돋움', Dotum, dotum;
    color: white;
    padding-left: 5.8em;
    font-weight: 100;
    background: #ff562f;
}
.popup[popupname] .product_explanation_contents::after {
    content: "BEAUTY LOUNGE";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    line-height: 100%;
    font-family: 'NanumSquareExtraBold', 'BareunDotumPro1', '돋움', Dotum, dotum;
    color: white;
    padding-right: 5.8em;
    font-weight: bolder;
}
.popup[popupname] .product_explanation_contents .explanation_title>span {
    font-size: 4.3em;
}

.popuplayer .popup[popupname] .title {/* background: #ff562f; *//* top: -1px; */}
.popuplayer .popup[popupname] .pop_contents_wrap {
    max-height: 95vh;
    scrollbar-width: thin;
}
.popuplayer .popup[popupname] .msg_wrap {
    max-width: 100vw;
}
.popuplayer .popup[popupname] .msg_wrap .msg {
    width: 500px;
}
@media (max-width: 914px) {
    .product_explanation_contents {
        font-size: 8px;
        padding: 3em;
    }
    .popuplayer .popup[popupname] .pop_contents_wrap {
        max-height: 95vh;
        scrollbar-width: auto;
    }
    .popup[popupname] .product_explanation_contents {
        width: 95vw;
        min-width: auto;
        font-size: 6px;
        padding: 4em;
    }
    .popup[popupname] .product_explanation_contents .contents_group>p>span,
    .popup[popupname] .product_explanation_contents .contents_group li>span,
    .popup[popupname] .product_explanation_contents .contents_group ._colrow>span, 
    .popup[popupname] .product_explanation_contents .contents_group li>span {
        font-size: 2em;
    }
    .popup[popupname] .product_explanation_contents::before {
        font-size: 8px;
    }
    .popup[popupname] .product_explanation_contents::after {
        font-size: 8px;
    }
}
