@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;
}

/* variable */
:root {
    --base-color: #410cd9;
    --dark-gray: #262b35;
    --medium-gray: #868d98;
    --primary-font: "Pretendard-Regular", sans-serif;
    --alt-font: "Pretendard-Regular", sans-serif;
}

.bg-base-color {
    background-color: #410cd9;
}

.btn.btn-base-color {
    background-color: #410cd9;
}

.text-base-color,
.btn-link.text-base-color {
    color: #410cd9;
}

.bg-gradient-top {
    background-image: linear-gradient(
        to right,
        #410cd9,
        #fa928d,
        #fca19d,
        #fdafac,
        #fdbbb8
    );
}

header.sticky.sticky-active [data-header-hover="light"] {
    background-color: var(--white) !important;
}

/* reset */
body {
    font-size: 16px;
    line-height: 20px;
}

/* header */

header .navbar-brand img {
    max-height: 45px;
}

@media (max-width: 767px) {
    header .navbar-brand img {
        max-height: 30px;
    }

    #member_section .btn {
        padding: 5px 10px;
    }

    .btn i {
        margin-left: 0px;
    }
}

header .navbar-brand {
    padding: 10px 0;
}

.navbar .navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 400;
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background: var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar
    .navbar-nav
    .dropdown.dropdown-with-icon-style02
    .dropdown-menu
    li:hover
    a,
.navbar
    .navbar-nav
    .dropdown.dropdown-with-icon-style02
    .dropdown-menu
    li.active
    a {
    opacity: 0.5;
}

.top-space-margin {
    margin-top: 126px;
}
.ipad-top-space-margin {
    margin-top: 126px;
}
.full-screen.top-space-margin {
    height: calc(100vh - 126px);
}
.full-screen.ipad-top-space-margin {
    height: calc(100vh - 126px);
}

/* bg color */
.bg-gradient-sherpa-blue-black {
    background-image: linear-gradient(
        to right top,
        #23248c,
        #22236d,
        #232348,
        #222226,
        #232323
    );
}
.bg-gradient-sherpa-black-blue {
    background-image: linear-gradient(
        to right top,
        #232323,
        #222226,
        #232348,
        #22236d,
        #23248c
    );
}
/* bg transparent color */
.bg-base-color-transparent {
    background-color: rgba(87, 88, 214, 0.8);
}
/*  tabs style 05  */
.tab-style-05 .nav-tabs > li.nav-item {
    letter-spacing: -0.5px;
}
/* accordion */
.accordion .accordion-item .accordion-header .accordion-title i {
    top: 52%;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 25px;
}

/*  progress bar style 01  */
.progress-bar-style-01 .progress .progress-bar-title {
    bottom: 15px;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4.7rem;
    line-height: 4.7rem;
}
/* separator line */
.separator-line-9px {
    height: 9px;
}
/* tag */
.tag-cloud a {
    padding-top: 5px;
    padding-bottom: 9px;
}
/* blog comment */
.blog-comment li .btn-reply {
    padding-top: 5px;
    padding-bottom: 7px;
}
/* number pagination style 01 */
.pagination-style-01 .page-item .page-link {
    line-height: 42px;
}
.pagination-style-01 .page-item.active .page-link {
    background: var(--dark-gray);
    color: var(--white);
}
/* top right bottom left */
.bottom-minus-45px {
    bottom: -45px;
}
.right-minus-45px {
    right: -45px;
}
/* footer */
footer .footer-logo img {
    max-height: 26px;
}
footer ul li {
    margin-bottom: 0;
}
.footer-dark a:hover {
    color: var(--white);
}
/* model popup */
.mfp-bg {
    background: #000000;
    opacity: 0.7;
}
/* media query responsive */
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 13px;
        padding-right: 13px;
    }
    .sticky-wrap.shadow-in {
        left: 35px;
    }
}
@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}
@media (max-width: 991px) {
    .header-transparent .header-button .btn {
        color: var(--dark-gray);
        border-color: var(--dark-gray);
    }
    .header-transparent .header-button .btn:hover {
        border-color: var(--dark-gray);
        color: var(--white);
        background: var(--dark-gray);
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar
        .navbar-nav
        .dropdown.dropdown-with-icon-style02
        .dropdown-menu
        li:last-child
        a {
        padding-bottom: 17px;
    }

    header {
        margin-bottom: 80px;
    }
}
@media (max-width: 767px) {
    p {
        margin-bottom: 20px;
    }
    .page-title-extra-large h1 {
        font-size: 40px;
        line-height: 46px;
    }
}

.submenu-content {
    background-color: #161616c2 !important;
    background-image: linear-gradient(180deg, #111, #32323266);
}

.navbar .navbar-nav .dropdown .dropdown-menu.submenu-content a:hover {
    color: #efefef;
}

/************************************************
 * 홈 상품 목록
 ************************************************/
#product-slider {
    position: relative;
}
#product-slider .item {
    text-align: center;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    padding: 21px;
    border: 1px solid #efefef;
    background-color: #efefef;
    border-radius: 15px;
}

#product-slider .item:hover {
    border: 1px solid #ccc;
}

#product-slider .item .desc {
    font-size: 11px;
    color: #888;
}

#product-slider .item .line {
    max-width: 100%; /* 부모 요소의 너비에 맞게 반응형 조절 */
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc;
}

/**************************************************
 * Ȩ
 **************************************************/
.youtube-area {
    position: relative;
}

.youtube-area .channel-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
}

.youtube-area .channel-wrapper img {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.home-list .item {
    background-size: cover;
    border-radius: 5px;
    margin-bottom: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.item {
    position: relative;
}
.prompt {
    color: #fff;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    right: 0px;
    font-size: 13px;
    padding: 10px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0)
    ); /* �Ʒ����� ���� �׶��̼� */
    opacity: 0.9;
    border-bottom-left-radius: 10px; /* ���� �Ʒ� �𼭸� �ձ۰� */
    border-bottom-right-radius: 10px; /* ������ �Ʒ� �𼭸� �ձ۰� */
    height: 53px;
    overflow: hidden;
}

#search-form .btn {
    margin-left: 10px;
    border-radius: 10px;
    text-align: center;
}

#search-form .btn i {
    margin: 5px;
}

/**************************************************
 * �˻�
 **************************************************/

#btn-area {
    background-color: #ffffff;
    overflow: hidden;
    flex-wrap: nowrap;
}

#btn-area .left {
    width: 130px;
    background-color: #fff;
    border: 0px;
    padding: 10px 0px 10px 0px;
}

#btn-area select {
    height: 56px;
    margin-right: 10px;
    padding: 9px;
}
#btn-area input {
    padding: 9px;
}

#btn-area .center {
    width: auto; /* �߰�: ������ ������ ���� */
    flex-grow: 1;
    padding: 10px 10px 10px 10px;
}

#btn-area .right {
    width: 90px;
    padding: 10px 0px 10px 0px;
}

#btn-area input {
    height: 56px;
}

#btn-area button {
    height: 56px;
    width: 100%;
    border-radius: 10px;
}

#btn-area button i {
    margin: 0px;
}

@media (max-width: 767px) {
    h1,
    .h1 {
        font-size: 3.375rem;
        line-height: 3.375rem;
    }

    h2,
    .h2 {
        font-size: 2.738rem;
        line-height: 2.738rem;
    }

    h3,
    .h3 {
        font-size: 2.213rem;
        line-height: 2.725rem;
    }

    #btn-area .left select {
        height: 40px;
    }

    #btn-area .right {
        width: 80px;
    }

    #btn-area input {
        height: 40px;
    }

    #btn-area button {
        height: 40px;
        text-wrap: nowrap;
    }

    .tab-style-04 .nav-tabs .nav-item {
        width: auto;
        display: inline-block;
        margin: 0 auto 10px;
    }

    .page-title-double-large h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/********************
 * �̹��� ����
 *******************/

.image_section_wrapper {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
}

.image_section_wrapper img {
    border-radius: 10px;
    border: 1px solid #ddd;
}

#prompt_wrapper {
    border: 0px;
}
#prompt_wrapper h3.card-header {
    font-size: 1.25rem;
    font-weight: 700;
}
#prompt_wrapper h4 {
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.bg-gradient-solitude-blue-fair-pink {
    background-image: linear-gradient(
        to bottom,
        #f8ebe9,
        #f6ebed,
        #f2ebf0,
        #eeebf1,
        #eaecf1
    );
}

#form .btn {
    position: relative;
}
#form label.active {
    font-weight: bold;
    color: #333;
}

.btn-count {
    position: absolute;
    top: -9px;
    right: -6px;
    border-radius: 10px;
    background-color: #c00;
    color: #fff;
    font-size: 13px;
    padding: 0px 5px;
    display: none;
}

.modal input[type="range"] {
    border: 0; /* border ���� */
}

.button-wrapper {
    min-height: 40px;
    margin-bottom: 20px;
}

.button-wrapper a {
    border: 1px solid #ccc;
    background-color: #4caf50;
    color: #fff;
    padding: 10px 5px;
    margin: 4px 4px;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    letter-spacing: -0.5px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-wrapper a:hover {
    background-color: #45a049;
    color: #fff;
    border-color: #45a049;
}

#attachment_content .item {
    cursor: pointer;
}

.ar-section {
    display: none;
}

/********************************
 * �̹��� ���
 ********************************/

.grid-item {
    margin-bottom: 5px; /* �� ������ ���� ���� */
    padding: 5px; /* ���� ���� (���� ����) */
    opacity: 0; /* ���� ������ ���� */
    transition: opacity 0.5s ease; /* �ִϸ��̼� ȿ���� �ڿ������� ��Ÿ�� */
}

.grid {
    margin-left: -5px; /* �������� ���� ���ʿ� ����� �� ������ ���� */
}

.grid-item img {
    border-radius: 3px;
}
.grid-item a {
    position: relative;
    height: 100%;
    display: block;
}
.grid.is-visible .grid-item {
    opacity: 1; /* Masonry�� ������ ���̰� �� */
}

/********************************
 * 프론트 이미지관련
 ********************************/
.img_wrapper {
    position: relative;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.img_wrapper img {
    border-radius: 10px;
    max-width: 100%;
}

.btn_wrapper {
    margin-top: 10px;
}

.btn_wrapper .btn {
    border: 1px solid #ddd;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5); /* ������, 50% ���� */
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 13px;
}

.btn_wrapper .btn:over {
    background-color: rgba(0, 0, 0, 0.7); /* ������, 50% ���� */
}

.btn_wrapper .btn i {
    margin-left: 0px;
}

.border .btn-wrapper {
    position: absolute;
    bottom: 20px;
    width: 96%;
    z-index: 10;
}

.video-item {
    position: relative;
}

.video-item img {
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 100%;
}

.video-item .icon-box {
    opacity: 0.5;
}

.blur-image {
    filter: blur(
        5px
    ); /* ���� ������ ������ �� �ֽ��ϴ�. ���ڰ� Ŭ���� �� ������ϴ�. */
}

/********************************
 * 비디오
 ********************************/

.video_section_wrapper {
    padding: 10px;
}

#video_section video {
    width: 100%; /* ���� ũ�⸦ �θ� ��ҿ� ���� */
    height: auto; /* ������ ���� �ڵ����� ���� ���� */
    max-width: 100%; /* �θ� ��Һ��� ũ�� �ʵ��� ���� */
}

.progress-bar {
    height: 16px;
}

/********************************
 * �α��� �� ȸ������
 ********************************/

.modal .nav-tabs > li.nav-item {
    padding: 0 3px;
}

.modal h2 {
    font-size: 1.438rem;
    line-height: 1.438rem;
}

.bg-kakao {
    background-color: #ffcd01 !important;
}

.bg-naver {
    background-color: #2cd153 !important;
}

.bg-google {
    background-color: #4285f4 !important;
}

.form-group.icon-input {
    position: relative;
}

.form-group.icon-input i {
    position: absolute;
    left: 15px;
    top: 15px;
}

.form-group.icon-input input {
    padding-left: 35px !important;
}

.tooltip-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #007bff;
}

.tooltip-text {
    visibility: visible;
    width: 72px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 0px 2px;
    position: absolute;
    top: -85%;
    left: 0%;
    transform: translateX(35%);
    z-index: 1;
    font-size: 11px;
    opacity: 0.7;
}

.tooltip-link:hover .tooltip-text {
    visibility: visible;
}

.tooltip-link .tooltip-text::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/**************************************
 * 배경제거
 **************************************/

#background-section {
    width: 100%; /* 기본적으로 100%로 설정 */
    max-width: 600px; /* 최대 600px */
    height: auto; /* 높이는 콘텐츠에 따라 자동으로 조정 */
    border: 1px solid #ccc;
    min-height: 300px;
}

.bg-damier-large {
    background-size: 28px 28px;
    background-image: repeating-conic-gradient(
        #f5f2fa 0% 25%,
        transparent 0% 50%
    );
    background-position: center;
}

.beforeAfter img {
    max-width: none; /* 기본 max-width를 해제 */
    height: auto; /* 높이를 자동으로 조정하여 비율 유지 */
}

/**************************************
 * 약관
 **************************************/
#terms h3 {
    font-size: 1.813rem;
    line-height: 2.125rem;
}

#terms p {
    margin-bottom: 10px;
}

/**************************************
 * 블렌드
 **************************************/
.blend-section {
    width: 100%; /* 기본적으로 100%로 설정 */
    max-width: 600px; /* 최대 600px */
    height: auto; /* 높이는 콘텐츠에 따라 자동으로 조정 */
    border: 1px solid #ccc;
    min-height: 300px;
}

.media_list img {
    max-width: 100%;
    border-radius: 5px;
}

.media_list .img_wrapper {
    position: relative;
    background-size: 28px 28px;
    background-image: repeating-conic-gradient(
        #f5f2fa 0% 25%,
        transparent 0% 50%
    );
    background-position: center;
    border: 1px solid #eee;
    border-radius: 10px;
}

.media_list .img_wrapper .img {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
}

.media_list .img_wrapper .btn-section {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
}

.media_list .img_wrapper:hover .btn-section {
    display: block;
}

.media_list .img_wrapper .btn-section .btn-content {
    min-height: 22.5px;
}

.media_list .img_wrapper .btn-section a {
    flex: 1;
    padding: 2px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #eee;
    font-size: 11px;
    opacity: 0.9;
}

.media_list .img_wrapper .btn-section a:hover {
    background-color: #999;
    color: #fff;
}

.media_list .img_wrapper .dropdown {
    position: absolute;
    right: 8px;
    top: 8px;
}
.media_list .img_wrapper .dropdown .btn {
    opacity: 0.9;
    font-size: 13px;
    padding: 5px;
}

hr.dropdown-divider {
    border-top: 1px solid #232529 !important;
}

.page-link {
    padding: 0.369rem 0.7rem;
}

.video_wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}

#icon_list i.fa-icon {
    font-size: 20px;
}

#icon_list .tx-12 {
    white-space: nowrap; /* 텍스트를 한 줄로 표시하여 줄바꿈을 방지 */
    overflow: hidden; /* 넘치는 텍스트를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표(...) 표시 */
    display: block; /* 요소를 블록 레벨로 설정 (필요 시) */
    width: 100%; /* 요소의 너비를 설정 (적절한 값으로 조정) */
}

.tab-small-text .nav-link {
    font-size: 13px;
}