.page {
    overflow: visible;
}
.footer {
    margin-top: 0;
}

.tab_cont {
    margin-top: 140px;
}
.detail_title {
    font-size: var(--ft22);
    font-weight: var(--semi-bold);
}
.detail_text {
    margin-top: 10px;
    color: var(--gray-500);
}
.pagination {
    margin-top: 40px;
}


.m_top {
    width: 100%;
    height: 46px;
    padding: 0 10px;
    background-color: var(--white);
    border-bottom: 1px solid var(--dark-line);
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
}
.m_btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.m_top_l {
    display: flex;
    align-items: center;
    gap: 10px;
}
.m_title {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    pointer-events: none;
}

/*----------------------- detail_area -----------------------*/
.detail_area {
    margin-top: 270px;
    display: flex;
    align-items: start;
    gap: 60px;
    overflow: hidden;
}

/*-- img_area --*/
.img_area {
    display: flex;
    align-items: start;
    gap: 10px;
    flex-shrink: 0;
}
.listimg {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.listimg li {
    width: 66px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--gray-200);
    cursor: pointer;
}
.listimg li img {
    filter: grayscale(1);
    transition: all .4s ease;
}
.listimg li.on img {
    filter: grayscale(0);
}
.keyimg_swiper {
    width: 530px;
    aspect-ratio: 1 / 1;
    background-color: var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.img_swiper_pagination {
    display: none;
}
.img_swiper_btn.swiper_btn_1 {
    margin-top: 14px;
    gap: 24px;
}

/*-- info_area --*/
.info_area {
    width: 100%;
}
.saller {
    width: fit-content;
    font-size: var(--ft16);
    color: var(--gray-500);
    margin-bottom: 14px;
    padding-right: 15px;
    background: url('/images/right_g.svg') no-repeat right center;
    background-size: 10px 10px;
}
.name {
    display: flex;
    gap: 60px;
    justify-content: space-between;
}
.product_name {
    font-size: var(--ft28);
    font-weight: var(--semi-bold);
    margin-bottom: 16px;
}
.share {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.info_area .rating {
    margin-bottom: 20px;
}
.info_area .price {
    margin-bottom: 0;
}
.info_area .price .per,
.info_area .price .current {
    font-size: var(--ft28);
}
.info_area .price .original {
    font-size: var(--ft20);
}

.point_get {
    margin-top: 24px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 8px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 8px;
}
.point_get img {
    width: 18px;
    height: 18px;
}
.point_get p {
    color: var(--gray-500);
}
.point_get p strong {
    font-weight: var(--semi-bold);
    color: var(--primary);
}


.iinfo_table {
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-line);
}
.iinfo_table th {
    width: 18%;
    padding: 10px 0;
    font-size: var(--ft16);
    text-align: start;
    font-weight: var(--medium);
    color: var(--gray-500);
}
.iinfo_table td {
    font-size: var(--ft16);
    color: var(--gray-500);
}

.option {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--dark-line);
    padding-left: 20px;
    margin: 10px 0;
}

/*-- option_list --*/
.option_list {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.option_box {
    width: 100%;
    padding: 24px 30px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    position: relative;
}
.option_close {
    width: 26px;
    height: 26px;
    background-color: var(--gray-300);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}
.option_close img {
    width: 20px;
    height: 20px;
    transition: transform .4s ease;
}
.option_close:hover img {
    transform: rotate(90deg);
}
.option_name {
    font-weight: var(--medium);
    padding-right: 50px;
}
.option_btm {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.option_price {
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
}

/*-- total_price --*/
.total_price {
    font-size: var(--ft28);
    font-weight: var(--semi-bold);
    color: var(--primary);
    margin-top: 30px;
    text-align: right;
}
.total_price span {
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    color: var(--gray-600);
    margin-right: 10px;
}

/*-- btn_list --*/
.btn_list {
    margin-top: 40px;
}


/*----------------------- partner -----------------------*/
.partner {
    width: 100%;
    margin: 80px auto;
    background-color: var(--gray-100);
    border-radius: 8px;
    display: flex;
    gap: 60px;
    align-items: center;
}
.page .partner.container-sm {
    padding: 50px 120px;
}
.partner_img_swiper {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--gray-600);
    position: relative;
    flex-shrink: 0;
}
.partner_img_swiper .swiper_num {
    width: 50px;
    background-color: rgba(0, 0, 0, .6);
    padding: 4px 12px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 14px;
}
.partner_img_swiper .swiper_num,
.partner_img_swiper .swiper_num span {
    font-size: var(--ft12);
    font-weight: var(--semi-bold);
    color: var(--white);
}
.partner__name {
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
    margin-bottom: 16px;
}
.partner__text {
    color: var(--gray-500);
    margin-bottom: 24px;
}
.partners_r .sec_more {
    width: fit-content;
}

/*----------------------- product_detail -----------------------*/
.product_detail {
    border-top: 1px solid var(--dark-line);
    position: relative;
}

/*-- detail_nav --*/
.detail_nav {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid var(--dark-line);
    background-color: var(--white);
    position: sticky;
    top: calc(34px + 62px);
    left: 0;
    z-index: 1;
}
.nav_inner {
    height: 100%;
}
.detail_nav ul {
    width: calc(100% - 390px);
    height: 100%;
    display: flex;
}
.detail_nav li {
    width: 100%;
    height: 100%;
}
.detail_nav a {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-500);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.detail_nav .nav_num {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-400);
}
.detail_nav li.show {
    border-bottom: 2px solid var(--primary);
}
.detail_nav li.show a,
.detail_nav li.show .nav_num {
    font-weight: var(--semi-bold);
    color: var(--primary);
}




.detail_flex {
    display: flex;
    gap: 80px;
}

.detail_wrap {
    width: 100%;
    margin-top: 40px;
    padding-bottom: 160px;
}

/*----------------------- detail_viewer -----------------------*/
.viewer {
    max-height: 1200px;
    height: 1200px;
    overflow: hidden;
    position: relative;
}
.viewer::after {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}
.view_on.viewer::after {
    display: none;
}
.view_btn {
    width: 100%;
    max-width: 420px;
    height: 60px;
    border-radius: 8px;
    background-color: var(--white);
    border: 1px solid var(--dark-line);
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
    cursor: pointer;
}
.view_btn.view_close {
    display: none;
}
.viewer.view_on {
    height: auto;
    max-height: none;
}
.viewer.view_on ~ .view_btn.view_more {
    display: none;
}
.viewer.view_on ~ .view_btn.view_close {
    display: flex;
}

/*----------------------- notice -----------------------*/
.notice_table {
    width: 100%;
    margin-top: 50px;
    border-top: 1px solid var(--gray-400);
}
.notice_table th {
    width: 40%;
    padding: 20px;
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
    text-align: left;
    background-color: var(--gray-200);
    border-bottom: 1px solid var(--dark-line);
}
.notice_table td {
    padding: 20px;
    font-size: var(--ft16);
    color: var(--gray-500);
    border-bottom: 1px solid var(--dark-line);
}

/*----------------------- fold -----------------------*/
.fold_list {
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid var(--gray-400);
}
.fold_box {
    width: 100%;
    border-bottom: 1px solid var(--dark-line);
}
.fold_main {
    width: 100%;
    padding: 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.fold_main p {
    font-weight: var(--semi-bold);
}
.fold_drop {
    width: 12px;
    height: 12px;
    transition: transform .4s ease;
}
.fold_sub {
    padding: 0 20px 30px;
    display: none;
}
.fold_sub p {
    color: var(--gray-500);
}

.fold_main.fold_on .fold_drop {
    transform: rotate(180deg);
}

/*----------------------- qna -----------------------*/
.qna_header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.qna_l {
    display: flex;
    align-items: center;
    gap: 20px;
}

/*-- my_toggle --*/
.my_toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.my_toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.my_toggle > span {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-500);
}
.toggle {
    width: 40px;
    height: 18px;
    border-radius: 9px;
    background-color: var(--gray-300);
    position: relative;
    transition: background .4s ease;
}
.toggle span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--white);
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    transition: left .4s ease;
}

.my_toggle input[type="checkbox"]:checked ~ label .toggle  {
    background-color: var(--primary);
}
.my_toggle input[type="checkbox"]:checked ~ label .toggle span {
    left: calc(40px - 14px - 2px);
}

/*-- write_btn --*/
.write_btn {
    width: fit-content;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: var(--white);
    border: 1px solid var(--dark-line);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.write_btn img {
    width: 16px;
    height: 16px;
}
.write_btn span {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
}

/*-- qna_table --*/
.qna_table {
    width: 100%;
    margin-top: 24px;
    border-top: 1px solid var(--gray-400);
}
.qna_table th,
.qna_table td {
    height: 60px;
    border-bottom: 1px solid var(--dark-line);
}
.qna_table th {
    font-size: var(--ft16);
    font-weight: var(--medium);
}
.qna_table td {
    font-size: var(--ft16);
    text-align: center;
    color: var(--gray-500);
}
.qna_table .status {
    font-weight: var(--semi-bold);
    color: var(--gray-400);
}
.qna_table .status.complete {
    color: var(--primary);
}
.qna_table .qna_title {
    cursor: pointer;
}
.secret {
    display: flex;
    align-items: center;
    gap: 8px;
}
.secret_icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.secret p {
    color: var(--gray-500);
}

.qna_table .qna_hide td {
    height: auto;
    border-bottom: none;
}
.qna_box_list {
    width: 100%;
    padding: 40px;
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--dark-line);
    display: none;
}
.qna_box {
    width: 100%;
    display: flex;
    align-items: start;
    gap: 20px;
}
.qna_box.qna_a {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--dark-line);
}
.qna_cir {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.qna_cir.cir_q {
    background-color: var(--gray-500);
}
.qna_cir.cir_a {
    background-color: var(--primary);
}
.qna_box p {
    text-align: start;
}

/*-- m_qna_table --*/
.m_qna_table {
    display: none;
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid var(--gray-400);
}
.m_qna_table li {
    border-bottom: 1px solid var(--dark-line);
}
.m_qna_table_td {
    padding: 10px;
}
.m_status {
    width: fit-content;
    display: block;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: var(--gray-200);
    font-size: var(--ft12);
    font-weight: var(--semi-bold);
    color: var(--gray-500);
    margin-bottom: 6px;
}
.m_status.complete {
    background-color: var(--primary-bg);
    color: var(--primary);
}
.m_qna_title p {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
}
.m_qna_btm {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.m_qna_btm p {
    font-size: var(--ft14);
    color: var(--gray-400);
}

/*----------------------- review -----------------------*/
.review_header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


/*-- review_info --*/
.review_info {
    width: 100%;
    padding: 30px 0;
    margin-top: 40px;
    border-radius: 8px;
    background-color: var(--gray-100);
    display: flex;
    justify-content: center;
}
.review_total {
    width: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    border-right: 1px solid var(--dark-line);
}
.review_total > p {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
    text-align: center;
}
.summary {
    display: flex;
    align-items: center;
    gap: 12px;
}
.summary_star {
    width: 40px;
    height: 40px;
}
.summary_num {
    font-size: var(--ft40);
    font-weight: var(--semi-bold);
    color: var(--primary);
}

.review_filter {
    width: 64%;
    padding: 0 70px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.review_filter > div {
    display: flex;
    align-items: center;
    gap: 24px;
}
.score_title,
.score_count {
    font-size: 13px;
    font-weight: var(--medium);
    color: var(--gray-500);
}
.score_title {
    width: 65px;
    flex-shrink: 0;
}
.score_count {
    width: 20px;
    flex-shrink: 0;
    text-align: right;
}
.gauge {
    width: 260px;
    height: 12px;
    border-radius: 6px;
    background-color: var(--white);
}
.percentile {
    display: flex;
    width: 0;
    height: 100%;
    background-color: var(--gray-300);
    border-radius: 6px;
}
.review_filter div:first-child .percentile {
    background-color: var(--primary);
}

/*-- review_event --*/
.review_event {
    width: 100%;
    padding: 40px 0 30px;
    margin-top: 20px;
    border-radius: 8px;
    background-color: var(--gray-100);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reveiw_event_title {
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    text-align: center;
    margin-bottom: 10px;
}
.review_event_text {
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 20px;
}
.review_event_text strong {
    font-weight: var(--semi-bold);
}

/*-- review_form --*/
.review_form {
    margin-top: 40px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img_review label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    opacity: .5;
    transition: opacity .4s ease;
}
.img_review img {
    width: 18px;
    height: 18px;
}
.img_review span {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
}
.img_review input[type="checkbox"]:checked ~ label {
    opacity: 1;
}

/*-- review_list --*/
.review_list {
    width: 100%;
    padding: 0 30px;
    border-top: 1px solid var(--dark-line);
}
.review_box {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid var(--dark-line);
    display: flex;
    gap: 70px;
}
.review_l {
    width: 250px;
    flex-shrink: 0;
}
.rating_box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.rating_star {
    display: flex;
    align-items: center;
    gap: 4px;
}
.rating_star img {
    width: 16px;
    height: 16px;
}
.rating_text {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
    line-height: 1;
}
.review_user,
.review_date {
    font-size: var(--ft14);
    color: var(--gray-500);
}
.review_user {
    margin-bottom: 4px;
}

.review_title {
    font-size: var(--ft18);
    font-weight: var(--medium);
    margin-bottom: 10px;
}
.review_text {
    color: var(--gray-500);
}

.photo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.photo_preview {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.photo_num {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
    text-align: right;
    position: absolute;
    right: 8px;
    bottom: 5px;
    z-index: 2;
}

.review_more {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.review_more span {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--primary);
}
.review_more span.more_close {
    display: none;
}
.review_more img {
    width: 10px;
    height: 10px;
}

.review_more.review_on span.more_open {
    display: none;
}
.review_more.review_on span.more_close {
    display: block;
}
.review_more.review_on img {
    transform: rotate(180deg);
}


.photo_more {
    display: none;
}
.photo_more img {
    border-radius: 8px;
    margin-bottom: 10px;
}

/*----------------------- detail_aside -----------------------*/

/*-- detail_aside --*/
.detail_aside {
    width: 390px;
    height: calc(100vh - (34px + 62px + 60px));
    padding: 40px 30px;
    background-color: var(--white);
    border-left: 1px solid var(--dark-line);
    border-right: 1px solid var(--dark-line);
    flex-shrink: 0;
    position: sticky;
    top: calc(34px + 62px + 60px);
    right: 0;
}
.aside_inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.aside_top {
    height: 100%;
    overflow-y: scroll;
}
.aside_top::-webkit-scrollbar {
    width: 3px;
}
.detail_aside .saller {
    margin-bottom: 10px;
}
.detail_aside .product_name {
    font-size: var(--ft18);
    margin-bottom: 12px;
}
.detail_aside .option_list {
    padding-top: 24px;
    border-top: 1px solid var(--dark-line);
}
.detail_aside .option_box {
    padding: 20px;
}
.detail_aside .option_close {
    width: 20px;
    height: 20px;
}
.detail_aside .option_close img {
    width: 16px;
    height: 16px;
}
.detail_aside .option_name {
    font-size: var(--ft14);
}
.detail_aside .option_btn {
    height: 32px;
}
.detail_aside .option_btn div {
    width: 30px;
    height: 30px;
}
.detail_aside .option_price {
    font-size: var(--ft18);
}

.aside_btm {
    flex-shrink: 0;
}
.aside_btm .total_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aside_btm .total_price span {
    font-size: var(--ft16);
}
.aside_btm .total_price span.aside_total {
    font-size: var(--ft28);
    font-weight: var(--bold);
    color: var(--primary);
}
.aside_btm .btn_list {
    margin-top: 30px;
}




/*----------------------- sns_popup -----------------------*/
.sns_popup  .popup_box {
    width: 100%;
    max-width: 360px;
}
.sns_list {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sns_list li {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.url {
    width: 100%;
    margin-top: 30px;
    padding: 5px 5px 5px 18px;
    background-color: var(--gray-200);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.url_copy {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--gray-400);
    padding: 8px 24px;
    background-color: var(--white);
    border-radius: 8px;
    border: 1px solid var(--dark-line);
    cursor: pointer;
}


/*----------------------- qna_popup -----------------------*/
.qna_popup .popup_box {
    max-width: 480px;
}
.qna_popup .secret_w {
    margin-top: 10px;
}
.qna_popup .secret_w  p {
    font-weight: var(--medium);
}

.qna_chk_popup .popup_text {
    margin-bottom: 20px;
    font-weight: var(--normal);
}
.qna_chk_popup form {
    width: 100%;
}

.m_btm {
    display: none;
}

@media all and (max-width: 1800px) {
    /*-- partner --*/
    .partner {
        width: calc(100% - 240px);
    }
}

@media all and (max-width: 1600px) {
    /*-- detail_area --*/
    .detail_area {
        gap: 40px;
    }
    .keyimg_swiper {
        width: 500px;
    }

    /*-- detail_aside --*/
    .detail_aside {
        padding: 20px;
    }
    .aside_top .saller,
    .aside_top .product_name,
    .aside_top .price {
        display: none;
    }
    .detail_aside .option_list {
        padding-top: 16px;
        margin-top: 16px;
    }
    .aside_btm .btn_list {
        margin-top: 20px;
    }
    
}

@media all and (max-width: 1400px) {
    .page .container-sm {
        padding: 0 100px;
    }

    /*-- detail_area --*/
    .img_area {
        width: 400px;
        flex-direction: column;
    }
    .img_l {
        order: 2;
    }
    .listimg {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
    .listimg li {
        width: 100%;
    }
    .img_swiper_btn.swiper_btn_1 {
        display: none;
    }
    .keyimg_swiper {
        width: 100%;
    }
    .saller {
        margin-bottom: 8px;
    }
    .product_name {
        font-size: var(--ft24);
    }
    .info_area .price .per, 
    .info_area .price .current {
        font-size: var(--ft24);
    }
    .info_area .price .original {
        font-size: var(--ft18);
    }
    .info_area .rating {
        margin-bottom: 12px;
    }
    .rating {
        background-size: 16px 16px;
        padding-left: 22px;
    }
    .rating p {
        font-size: var(--ft16);
    }

    /*-- partner --*/
    .partner {
        width: calc(100% - 160px);
        gap: 40px;
    }
    .page .partner.container-sm {
        padding: 30px 60px;
    }
    .partner_img_swiper {
        width: 170px;
        height: 170px;
    }
    .partner__text {
        margin-bottom: 16px;
    }

    /*-- product_detail --*/
    .page .detail_flex.container-sm {
        gap: 60px;
    }
    .detail_nav {
        height: 50px;
    }

    /*-- detail_aside --*/
    .detail_aside {
        width: 330px;
        height: calc(100vh - (34px + 62px + 50px));
        top: calc(34px + 62px + 50px);
    }
    .aside_btm .total_price span.aside_total {
        font-size: var(--ft24);
    }

    /*-- detail_viewer --*/
    /*-- notice --*/
    .notice_table {
        margin-top: 30px;
    }
    .notice_table th,
    .notice_table td {
        padding: 14px;
    }

    /*-- fold --*/
    .fold_list {
        margin-top: 30px;
    }
    .fold_main {
        padding: 16px;
    }
    .fold_sub {
        padding: 0 16px 20px;
    }

    /*-- qna --*/
    .qna_header {
        margin-top: 10px;
    }
    .qna_table th, 
    .qna_table td {
        height: 54px;
    }
    .qna_box_list {
        padding: 30px;
    }
    .qna_box {
        gap: 14px;
    }
    .qna_cir {
        width: 28px;
        height: 28px;
    }

    /*-- review --*/
    .review_total {
        width: fit-content;
        padding: 0 30px;
        gap: 10px;
    }
    .summary_star {
        width: 30px;
        height: 30px;
    }
    .summary_num {
        font-size: var(--ft32);
    }
    .review_filter {
        padding: 0 40px;
    }
    .review_filter > div {
        gap: 16px;
    }
    .gauge {
        width: 100%;
    }
    .review_box {
        flex-direction: column;
        gap: 20px;
    }
    .review_title {
        font-size: var(--ft16);
    }
}

@media all and (max-width: 1200px) {
    .page .container-sm {
        padding-left: 40px;
        padding-right: 100px;
    }
    .partner {
        width: calc(100% - 140px);
        margin-left: 40px;
    }

    /*-- detail_area --*/
    .page .detail_flex.container-sm {
        padding-left: 40px;
        padding-right: 100px;
        gap: 40px;
    }
    .img_area {
        width: 340px;
    }

    /*-- qna_sec --*/
    .qna_table td,
    .qna_table .status {
        font-size: var(--ft14);
    }
}

@media all and (max-width: 1024px) {
    .h_top,
    .h_inner {
        display: none;
    }
    .m_top {
        display: flex;
    }

    .page .container-sm {
        padding: 0 40px;
    }
    .page .detail_flex.container-sm  {
        padding-right: 40px;
    }
    .tab_cont {
        margin-top: 100px;
    }
    
    /*-- detail_area --*/
    .detail_area {
        margin-top: 90px;
    }
    .share {
        width: 20px;
        height: 20px;
    }

    /*-- partner --*/
    .partner {
        width: calc(100% - 80px);
    }
    .page .partner.container-sm {
        margin: 60px auto;
    }

    /*-- product_detail --*/
    .detail_nav {
        height: 40px;
        top: 46px;
    }
    .detail_nav ul {
        width: 100%;
    }
    .detail_nav a {
        font-size: var(--ft14);
    }

    /*-- qna_sec --*/
    .qna_table th, .qna_table td {
        height: 46px;
    }

    /*-- review --*/
    .review_list {
        padding: 0;
    }

    /*-- detail_aside --*/
    .detail_aside {
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: end;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 16;
        background: none;
        border: none;
        opacity: 0;
        pointer-events: none;
    }
    body:has(.detail_aside.on) {
        overflow: hidden;
        height: 100%;
        min-height: 100%;
        touch-action: none;
    }
    .detail_aside.on {
        opacity: 1;
        pointer-events: all;
    }
    .aside_inner {
        width: 100%;
        height: fit-content;
        max-height: 80vh;
        overflow-y: auto;
        padding: 30px 30px 20px;
        border-radius: 12px 12px 0 0;    
        background-color: var(--white);
        position: relative;
        z-index: 1;
        transform: translateY(20%);
        opacity: 0;
        transition: transform .4s ease, opacity .4s ease;
    }
    .detail_aside.on .aside_inner {
        transform: translateY(0);
        opacity: 1;
    }
    .aside_bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        position: absolute;
        top: 0;
        left: 0;
    }

    .m_btm {
        width: 100%;
        height: 65px;
        padding: 10px;
        background-color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 5;
    }
    .btm_buy {
        width: 100%;
        height: 100%;
        background-color: var(--primary);
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--ft16);
        font-weight: var(--semi-bold);
        color: var(--white);
        cursor: pointer;
    }

    .detail_wrap {
        padding-bottom: 120px;
    }
}

@media all and (max-width: 900px) {
    .page .container-sm {
        padding: 0 20px;
    }
    .page .detail_flex.container-sm {
        padding: 0 20px;
    }
}

@media all and (max-width: 768px) {
    .m_top_l {
        gap: 4px;
    }
    .tab_cont {
        margin-top: 80px;
    }

    /*-- detail_area --*/
    .detail_area {
        margin-top: 46px;
        flex-direction: column;
        gap: 20px;
    }
    .page .detail_area.container-sm {
        padding: 0;
    }
    .img_area {
        width: 100%;
    }
    .keyimg_swiper {
        border-radius: 0;
        position: relative;
    }
    .listimg {
        display: none;
    }
    .info_area {
        padding: 0 20px;
    }
    .img_swiper_pagination {
        display: flex;
        position: absolute;
        bottom: 20px !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 3;
    }
    .img_swiper_pagination .swiper_pagination_bullet {
        background-color: var(--gray-300);
        transform: scale(0.9);
        transition: transform .4s ease;
    }
    .img_swiper_pagination .swiper_pagination_bullet_active {
        background-color: var(--white);
        transform: scale(1.2);
    }

    .name {
        gap: 20px;
    }
    .product_name {
        font-size: var(--ft20);
        margin-bottom: 8px;
    }
    .share img {
        width: 18px;
        height: 18px;
    }
    .info_area .price .per, 
    .info_area .price .current {
        font-size: var(--ft20);
    }
    .info_area .price .original {
        font-size: var(--ft16);
    }
    .point_get {
        margin-top: 16px;
        padding: 10px 14px;
        gap: 6px;
    }
    .point_get img {
        width: 14px;
        height: 14px;
    }
    .point_get p {
        font-size: var(--ft14);
    }
    .iinfo_table {
        margin-top: 16px;
        padding-top: 16px;
    }
    .iinfo_table th {
        width: auto;
        padding: 6px 0;
        padding-right: 16px;
    }
    .option_box {
        padding: 16px;
    }
    .option_price {
        margin-top: 20px;
        font-size: var(--ft18);
    }
    .total_price span {
        font-size: var(--ft16);
        margin-right: 6px;
    }
    .total_price {
        font-size: var(--ft22);
    }
    .btn_list {
        margin-top: 30px;
        gap: 6px;
    }

    /*-- partner --*/
    .page .partner.container-sm {
        padding: 30px 20px;
    }
    .partner {
        width: calc(100% - 40px);
        flex-direction: column;
        gap: 20px;
    }
    .partners_r * {
        text-align: center;
    }
    .partner__name {
        font-size: var(--ft18);
        margin-bottom: 8px;
    }
    .partners_r .sec_more  {
        margin: 0 auto;
    }
    .partner_img_swiper .swiper_num {
        right: 10px;
        bottom: 10px;
    }

    /*-- product_detail --*/
    .view_btn {
        font-size: var(--ft16);
        height: 54px;
    }
    .detail_title,
    .detail_text {
        text-align: left;
    }
    .detail_title {
        font-size: var(--ft20);
    }
    .detail_text {
        font-size: var(--ft14);
        margin-top: 6px;
    }
    .write_btn {
        padding: 8px 12px;
    }
    .write_btn img {
        width: 14px;
        height: 14px;
    }
    .write_btn span {
        font-size: var(--ft14);
    }
    .detail_nav {
        height: auto;
    }
    .detail_nav ul {
        width: 100%;
    }
    .detail_nav li {
        height: auto;
    }
    .detail_nav a {
        padding: 4px 0;
        text-align: center;
        flex-direction: column;
        gap: 2px;
    }
    .detail_nav .nav_num {
        font-size: var(--ft12);
    }

    .viewer {
        max-height: 500px;
        height: 500px;
    }

    /*-- notice --*/
    .notice_table {
        margin-top: 24px;
    }
    .notice_table th, 
    .notice_table td {
        padding: 10px;
        font-size: var(--ft14);
    }

    /*-- fold --*/
    .fold_list {
        margin-top: 24px;
    }
    .fold_main {
        padding: 14px 10px;
    }
    .fold_drop {
        width: 10px;
        height: 10px;
    }
    .fold_sub {
        padding: 0 10px 14px;
    }
    .fold_sub p {
        font-size: var(--ft14);
    }

    /*-- qna --*/
    .qna_header {
        margin-top: 20px;
    }
    .qna_l {
        gap: 12px;
    }
    .my_toggle {
        gap: 12px;
    }
    .my_toggle::after {
        margin-left: 0;
    }
    .my_toggle label span {
        font-size: var(--ft14);
    }
    .toggle {
        width: 30px;
        height: 14px;
    }
    .toggle span {
        width: 10px;
        height: 10px;
    }
    .my_toggle input[type="checkbox"]:checked ~ label .toggle span {
        left: calc(30px - 10px - 2px);
    }
    .secret_toggle label {
        gap: 6px;
    }
    .secret_toggle img {
        width: 14px;
        height: 14px;
    }
    .secret_toggle span {
        font-size: var(--ft14);
    }

    .qna_table {
        display: none;
    }
    .m_qna_table {
        display: block;
    }
    .secret {
        gap: 4px;
    }
    .m_qna_table .qna_box_list {
        padding: 20px;
        display: none;
    }
    .qna_box {
        gap: 10px;
    }
    .qna_cir {
        width: 24px;
        height: 24px;
        font-size: var(--ft14);
    }
    .qna_box p {
        font-size: var(--ft14);
    }
    .qna_box.qna_a {
        margin-top: 16px;
        padding-top: 16px;
    }

    /*-- review --*/
    .review_header {
        justify-content: start;
    }
    .review_form {
        margin-top: 24px;
        margin-bottom: 10px;
    }
    .img_review img {
        width: 14px;
        height: 14px;
    }
    .img_review span {
        font-size: var(--ft14);
    }
    .review_info {
        margin-top: 24px;
    }
    .review_total {
        gap: 4px;
    }
    .summary {
        gap: 8px;
    }
    .summary_star {
        width: 24px;
        height: 24px;
    }
    .summary_num {
        font-size: var(--ft28);
    }
    .review_filter {
        gap: 6px;
    }
    .review_filter > div {
        gap: 10px;
    }
    .gauge {
        height: 9px;
    }
    .review_event {
        padding: 30px 0;
        margin-top: 10px;
    }
    .type_list {
        right: auto;
        left: 0;
    }

    .rating_box {
        gap: 4px;
        margin-bottom: 4px;
    }
    .rating_star {
        gap: 2px;
    }
    .rating_star img {
        width: 12px;
        height: 12px;
    }
    .rating_text {
        font-size: var(--ft14);
    }
    .review_user {
        margin-bottom: 0;
    }
    .review_box {
        gap: 10px;
    }
    .review_title {
        margin-bottom: 4px;
    }
    .review_text {
        font-size: var(--ft14);
    }
    .photo {
        margin-top: 10px;
    }
    .photo_preview {
        width: 72px;
        height: 72px;
    }
    .review_box {
        padding: 20px 0;
    }
    .review_more {
        padding: 4px 0;
    }
    

    /*-- detail_aside --*/
    .aside_inner {
        padding: 14px;
    }
    .option_btm {
        margin-top: 10px;
    }
    .detail_aside .option_box {
        padding: 14px;
    }
}

@media all and (max-width: 600px) {
    /*-- review --*/
    .review_info {
        padding: 20px 30px;
        flex-direction: column;
        gap: 20px;
    }
    .review_total {
        border-right: 0;
    }
    .review_total,
    .review_filter {
        width: 100%;
    }
    .review_filter {
        padding: 0;
    }

    .reveiw_event_title {
        font-size: var(--ft16);
        margin-bottom: 6px;
    }
    .review_event_text {
        font-size: var(--ft14);
        margin-bottom: 16px;
    }
}