/* BASIC css start */
:root {
    --purchased-prd-width: 10rem;
}

.detailPageWrapper {
    width: 100%;
    max-width: var(--content-max-width);
    min-width: var(--pc-min-width);
    padding: 1rem clamp(1rem, 5vw, var(--xlargegap));
    display: flex;
    gap: clamp(1rem, 5vw, var(--xlargegap));
    /* justify-content: center; */
}
.detailPageWrapper > form {
    display: none;
}
.detailLeft {
    width: 60%;
    scrollbar-width: thin;
}
.detailRight {
    width: 40%;
    height: calc(100vh - var(--header-height) - 2.25rem);
    overflow-y: scroll;
    position: sticky;
    top: calc(var(--header-height) + 2.25rem);
    /* Çì´õ + Çì´õ´º½º ³ôÀÌ */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.detailRight::-webkit-scrollbar {
    width: 0;
}
.detailRight:hover {
    scrollbar-width: thin;
}
.detailRight:hover::-webkit-scrollbar {
    width: 6px;
}
.productDetailMidTit {
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: var(--smallgap);
}
.selected-border {
    border: 1px solid var(--black) !important;
}
.prd-model {
    color: var(--textgrey);
    font-weight: 400;
}
/* ¸ÞÀÎ »óÇ°¸í */
.detailHeadName h4 {
    font-size: 1.675rem;
    font-weight: 600;
}
.detailHeadName .prd-model {
    font-size: 1rem;
}
.detailHeadPrice {
    margin-top: var(--midiumgap);
}
.detailHeadPrice > li {
    display: grid;
    grid-template-columns: repeat(2, 6rem);
    grid-template-rows: repeat(1, 1fr);
    line-height: 1.5rem;
}
.detailHeadPrice > li p {
}
.detailHeadPrice > li:nth-child(1) {
    color: var(--textgrey);
}
.detailHeadPrice > li:nth-child(2) p {
    /* font-size: 1.25rem; */
    font-weight: 500;
}
.detailHeadPrice > li:nth-child(3) p {
    color: var(--brandcolor);
    font-weight: 500;
}
/* ¸ÞÀÎ »óÇ°¸í ¿µ¿ª ® */
/* ¸ÞÀÎ ½æ³×ÀÏ ¿µ¿ª */
.detailImgContainer {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}
.detailImgContainer > img {
    width: 50%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
.detailImgContainer #lens_img {
    display: none;
}
.detailImgContainer #multi_image_thumb_list,
.detailImgContainer #multi_image_thumb_list > tbody,
.detailImgContainer #multi_image_thumb_list > tbody > tr {
    width: 100%;
}
.detailImgContainer #multi_image_thumb_list > tbody > tr > td:nth-child(1) {
    width: 50%;
}
.detailImgContainer #multi_image_thumb_list > tbody > tr > td:nth-child(2) {
    width: 50%;
}
.detailImgContainer #multi_image_thumb_list > tbody > tr > td img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
/* ±âº» ¿É¼Ç - ¿øŬ¸¯ */
.multiOption {
    margin-top: var(--largegap);
}
.MK-oneclick-list {
    display: flex;
    flex-flow: row wrap;
    gap: var(--xxsmallgap);
}
.MK-oneclick-value {
    display: none;
}
.MK-oneclick-li {
    font-size: 0.875rem;
    padding: 0 0.875rem;
    min-width: 6rem;
    text-align: center;
    border: 1px solid var(--bordergrey);
    line-height: 2.875rem;
    border-radius: 0.25rem;
    color: var(--charcol);
}
.MK-oneclick-li.MK-oneclick-sel {
    border: 1px solid var(--black);
}
.MK-oneclick-li.MK-oneclick-dis {
    background-color: var(--bggrey);
    color: var(--textgrey);
    text-decoration: line-through;
}
/* ±âº» ¿É¼Ç - ¿øŬ¸¯ ³¡ */

/* Ãß°¡ ±¸¼º »óÇ° ½ÃÀÛ */
.detailAddOption {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--xsmallgap);
    margin-top: var(--largegap);
}
.detailAddOption .productDetailMidTit {
    padding-bottom: 0.25rem;
}
.detailAddOption > div {
    width: 100%;
    display: flex;
    align-items: center;
}

.detailAddOption > div .add-option-img {
}
.detailAddOption > div .add-option-img img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.detailAddOption > div .add-option-wrap {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 6rem;
    padding: 0 var(--xxsmallgap);
    justify-content: space-between;
}
.detailAddOption > div .add-option-wrap h3 {
    font-size: 0.875rem;
}
.detailAddOption > div .add-option-wrap .add-option-price {
    margin-bottom: 0.375rem;
}
.detailAddOption > div .add-option-wrap .add-option-option select,
.detailAddOption > div .add-option-wrap .add-option-option a {
    width: 100%;
    border: 1px solid var(--bordergrey);
    font-size: 0.875rem;
    padding: var(--xxsmallgap);
    text-align: center;
}
.detailAddOption > div .add-option-wrap .add-option-option a {
    display: block;
}
.detailAddOption > div .add-option-wrap .add-option-option select {
    padding-left: 1rem;
}
/* Ãß°¡ ±¸¼º »óÇ° ³¡ */

/* !!!!!!»óÇ° Á¶Á¤ ½ÃÀÛ!!!!!! */
.detailOptionAdjust {
    border-top: 1px solid var(--bordergrey);
    margin-top: var(--largegap);
}
.MK_inner-opt-cm {
    display: flex;
    flex-flow: column nowrap;
}
.MK_inner-opt-cm > li {
    padding: var(--midiumgap) 0;
    display: grid;
    grid-template-rows: repeat(3, 1.875rem);
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--bordergrey);
}
.MK_inner-opt-cm > li > * {
    line-height: 1.875rem;
}
/* !ÃÖÁ¾ »óÇ°¸í & ¿É¼Ç */
.MK_inner-opt-cm > li .MK_p-name {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.MK_inner-opt-cm > li .MK_p-name p strong {
    font-size: 0.875rem;
    font-weight: 400;
}
.MK_inner-opt-cm > li .MK_p-name span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--darkgrey);
}
/* !ÃÖÁ¾ »óÇ° ¼ö·® Á¶Àý */
.MK_inner-opt-cm > li .MK_qty-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 4rem;
}
.MK_inner-opt-cm > li .MK_qty-ctrl > input {
    order: 2;
    width: var(--xsmallgap);
}
.MK_inner-opt-cm > li .MK_qty-ctrl .MK_btn-up {
    order: 3;
}
.MK_inner-opt-cm > li .MK_qty-ctrl .MK_btn-dw {
    order: 1;
}
.MK_inner-opt-cm > li .MK_qty-ctrl a img {
    display: none;
}
.MK_inner-opt-cm > li .MK_qty-ctrl .MK_btn-up::before {
    content: "+";
}
.MK_inner-opt-cm > li .MK_qty-ctrl .MK_btn-dw::before {
    content: "-";
    font-size: 1.5rem;
    font-weight: 300;
}
/* !ÃÖÁ¾ »óÇ° °¡°Ý */

.MK_inner-opt-cm > li .MK_price {
    font-size: 0.875rem;
    font-weight: 400;
}
/* !ÃÖÁ¾ »óÇ° »èÁ¦ */
.MK_inner-opt-cm > li .MK_btn-del {
}
.MK_inner-opt-cm > li .MK_btn-del::before {
    content: "»èÁ¦";
    font-size: 0.75rem;
    color: var(--darkgrey);
}
.MK_inner-opt-cm > li .MK_btn-del img {
    display: none;
}
.detailOptionTotalPrice {
    margin-top: var(--smallgap);
}
/* !!!!!!»óÇ° Á¶Á¤ ³¡!!!!!! */

/*  !!!!!!!°ü·Ã »óÇ° (Ä÷¯) ½ÃÀÛ!!!!!!! */
.related-prd {
    margin-top: var(--largegap);
}
.related-prd .prd-cont {
    display: flex;
    flex-flow: row wrap;
    gap: var(--xxsmallgap);
}
.related-prd .prd-cont .prd-list {
    /* flex: 1; */
    width: 6rem;
    border: 1px solid var(--bordergrey);
}
.related-prd .prd-cont .prd-list img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
/*  !!!!!!!°ü·Ã »óÇ° (Ä÷¯) ³¡!!!!!!! */

/*  !!!!!!!¿¬°ü »óÇ° (Àå¹Ù±¸´Ï/±¸¸Å) ½ÃÀÛ!!!!!!! */
.purchased-prd .prd-scroll-wrap {
    position: relative;
}
.purchased-prd .prd-cont {
    display: flex;
    gap: var(--smallgap);
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.purchased-prd .prd-cont::-webkit-scrollbar {
    display: none;
}
.purchased-prd .prd-scroll-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--bordergrey);
    border-radius: 50%;
    background-color: var(--white);
    color: var(--charcol);
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
}
.purchased-prd .prd-scroll-prev {
    left: -0.875rem;
}
.purchased-prd .prd-scroll-next {
    right: -0.875rem;
}
.purchased-prd .prd-cont .prd-list {
    width: var(--purchased-prd-width);
}

.purchased-prd .prd-cont .prd-list img {
    width: var(--purchased-prd-width);
    aspect-ratio: 3/4;
    object-fit: contain;
}

.purchased-prd .prd-cont .prd-list .prd-name {
    width: var(--purchased-prd-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--charcol);
    margin-top: var(--xxsmallgap);
}
.purchased-prd .prd-cont .prd-list .prd-model {
    font-size: 0.75rem;
    margin: var(--xxsmallgap) 0 var(--xsmallgap) 0;
}
.purchased-prd .prd-cont .prd-list .prd-price {
    font-size: 0.75rem;
}
/*  !!!!!!!¿¬°ü »óÇ° (Àå¹Ù±¸´Ï/±¸¸Å) ³¡!!!!!!! */
.detailHeadBtnsWrapper {
    position: sticky;
    bottom: 0;
    padding-bottom: 2.5rem;
    background-color: var(--white);
}
.detailHeadBtns {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--smallgap);
    margin-top: var(--largegap);
}
.detailBtnsUtil {
    width: 100%;
}
.detailBtnsUtil > a {
    width: 100%;
    line-height: 2.5rem;
    border-radius: 0.25rem;
    background: var(--lightgrey);
    text-align: center;
    display: block;
}
.detailBtnsPurchase {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: var(--smallgap);
}
.detailBtnsPurchase > a,
.detailBtnsPurchase > button {
    /* flex: 1; */
    width: calc(50% - var(--smallgap) / 2);
    line-height: 2.5rem;
    border-radius: 0.25rem;
    text-align: center;
}

.detailBtnsPurchase > a {
    background-color: var(--black);
    color: var(--white);
}
.npaybtnWrapper {
    background-color: #1ec800;
}
.kpaybtnWrapper {
    background-color: #f7e600;
}
.detailBtnsPurchase > button > div {
    position: absolute;
    top: 2.5rem;
    z-index: 3;
    padding: 1rem 0;
    display: none !important;
    background-color: var(--white);
}
.detailBtnsPurchase > button:hover > div {
    display: block !important;
}
/* ³×ºñ°ÔÀÌ¼Ç ½ÃÀÛ */
.detailNav {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    font-size: 0.875rem;
    gap: 1.5rem;
    padding: var(--xlargegap) 0 var(--largegap) 0;
    color: var(--textgrey);
}
#detailNav1 > a:nth-child(1) {
    color: var(--black);
    border-bottom: 2px solid var(--black);
}
#detailNav2 > a:nth-child(2) {
    color: var(--black);
    border-bottom: 2px solid var(--black);
}
#detailNav3 > a:nth-child(3) {
    color: var(--black);
    border-bottom: 2px solid var(--black);
}
#detailNav4 > a:nth-child(4) {
    color: var(--black);
    border-bottom: 2px solid var(--black);
}
/* ³×ºñ°ÔÀÌ¼Ç ³¡ */

.relation {
    width: 100%;
    padding: 1rem 0 2rem 0;
}
.relation .prdList {
    display: flex;
    flex-flow: row nowrap;
}
.relation .prdList .item {
    margin: var(--xsmallgap) var(--xsmallgap) var(--xsmallgap) 0;
    width: 16.7vw;
    max-width: 200px;
    min-width: 166px;

    display: flex;
    flex-flow: column nowrap;
}
.relation .prdList .item .relatedThumb {
    width: 100%;
    height: 22.3vw;
    max-height: 267px;
    min-height: 221px;
    display: block;
}
.relation .prdList .item > p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.prd-detail {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.prd-detail > img {
    width: 100%;
}
#productWrap {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 5rem 0;
}
#productWrap > h4 {
    font-weight: 700;
    padding: 0.5em;
}
#productWrap > div {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--bordergrey);
}
#productWrap > div > p:nth-child(1) {
    width: 30%;
    padding: 1rem;
    background-color: var(--lightgrey);
}
#productWrap > div > p:nth-child(2) {
    width: 70%;
    padding: 1rem;
}

.boardWrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
}
.boardWrapper > h4 {
    margin-right: auto;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 1.5rem;
}
.boardWrapper > h5 {
    margin-right: auto;
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: 1.125rem;
}
.boardHead,
.boardList {
    display: flex;
    width: 100%;
    align-items: center;
}
.boardHead > p,
.boardList > p {
    font-size: 0.875rem;
    padding: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}
.boardHead > p:nth-child(1),
.boardList > p:nth-child(1) {
    width: 10%;
}
.boardHead > p:nth-child(2),
.boardList > p:nth-child(2) {
    width: 40%;
}
.boardList > p:nth-child(2) {
    color: var(--black);
    font-weight: 500;
}
.boardHead > p:nth-child(3),
.boardList > p:nth-child(3) {
    width: 15%;
}
.boardHead > p:nth-child(4),
.boardList > p:nth-child(4) {
    width: 20%;
}
.boardHead > p:nth-child(5),
.boardList > p:nth-child(5) {
    width: 15%;
}
.boardHead {
    background-color: #f8f8f8;
    font-weight: 500;
    border-radius: var(--xsmallgap);
}
.boardHead > p {
    color: var(--black);
}
.boardList {
    border-bottom: 1px solid var(--bordergrey);
}
.boardList > p > span {
    display: flex;
    gap: 0.5em;
}
.boardList > p > span svg {
    width: 1.25rem;
    height: 1.25rem;
}
.boardList > p > span path {
    fill: none;
    stroke: #111111;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}
.MS_review_content_box {
    width: 100%;
}
.review_board_content {
    font-size: 0.875rem;
    width: 100%;
}
.review_board_content > div {
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid var(--bordergrey);
}
.MS_qna_content_box {
    width: 100%;
}
.qna_board_content {
    font-size: 0.875rem;
    width: 100%;
}
.qna_board_content > div {
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid var(--bordergrey);
    display: flex;
    align-items: center;
}
.qna_board_content > div > input:nth-child(2) {
    background-color: var(--lightgrey);
    height: 2.25rem;
    width: 7rem;
    font-size: 0.75rem;
    padding: 1rem;
}
.qna_board_content > div > input:nth-child(3) {
    width: 4rem;
    height: 2.25rem;
    background-color: var(--black);
    color: var(--white);
    font-size: 0.75rem;
}
.board-btns {
    display: flex;
    gap: 1rem;
}
.board-btns > a {
    line-height: 2.5rem;
    width: 7rem;
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    border-radius: 2.5rem;
}
.paging {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.875rem;
}
.paging .now {
    font-weight: 700;
    color: #000000;
}
/* ¸®ºä */
#recmd_review_container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: var(--xsmallgap);
}
.recmd_review {
    width: 25%;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.375rem;
    box-shadow: 0px 1px 4px #00000025;
}
.recmd_review > img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}
.review_title {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.375rem;
}
.review_title h5 {
    font-size: 0.9125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review_write {
    display: flex;
    justify-content: space-between;
    padding: 0 0.375rem 0.75rem 0.375rem;
}
.review_write h6 {
    color: var(--darkgrey);
}
/* 

Æ÷Å丮ºä

*/

.review_board_file_preview {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.25rem;
    width: 100%;
}
.review_board_file_preview img {
    width: 12.5%;
    aspect-ratio: 1/1;
    border-radius: var(--xsmallgap);
    cursor: pointer;
    overflow: hidden;
    object-position: center;
    object-fit: cover;
}
.review_board_file_preview img:hover {
    transition: 0.3s;
    opacity: 0.4;
}
#review_board_file_bg {
    display: none;
    /* display: flex; */
    flex-flow: column nowrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: #00000060;
    z-index: 100;
}
#review_board_file_close {
    padding: 0.75rem;
    border-radius: 2rem;
    background-color: var(--white);
    cursor: pointer;
}
#review_board_file_close svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: var(--black);
    stroke-width: 2px;
}

#review_board_file_close:hover {
    background-color: var(--black);
    transition: 0.3s;
}
#review_board_file_close:hover svg {
    stroke: var(--white);
}
#review_board_file_container {
    height: 60rem;
    border-radius: 1rem;
    background-color: #fff;
    display: flex;
    padding: 1rem;
    gap: 1rem;
}
.review_board_file_main {
    width: 38rem;
    height: 100%;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.review_board_file_main_img {
    width: 100%;
    height: 38rem;
    /* border-radius: 1rem; */
    overflow: hidden;
}
.review_board_file_main_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.review_board_file_main_imglist {
    width: 100%;
    display: flex;
    gap: var(--xsmallgap);
    justify-content: center;
}
.review_board_file_main_imglist img {
    width: 5rem;
    height: 5rem;
    border-radius: var(--xsmallgap);
    background-color: #00000020;
    object-fit: cover;
    object-position: center;
}
.review_board_file_main_subject {
    display: flex;
    gap: var(--xsmallgap);
    align-items: center;
    padding-bottom: var(--xsmallgap);
}
.review_board_file_main_subject h5 {
    font-weight: 700;
}
.review_board_file_main_subject .MS_review_mark_icon {
    font-size: 1.25rem;
}
.review_board_file_main_writed p {
    font-size: 0.75rem;
}
.review_board_file_main_writed p:first-child {
    padding-bottom: 0.25rem;
}
.review_board_file_main_info {
}
.review_board_file_main_text {
    flex: 1;
    overflow: scroll;
    font-size: 0.95rem;
}
/*  */
.review_board_file_list {
    overflow: scroll;
    display: grid;
    grid-gap: var(--xsmallgap);
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: repeat(3, 1fr);
}
.review_board_file_list .review_board_file_main_title {
    display: none;
}
.review_board_file_list > a {
    width: 9rem;
    height: 9rem;
    border-radius: var(--xsmallgap);
    overflow: hidden;
}
.review_board_file_list > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review_board_file_list > a > img:hover {
    transition: 0.3s;
    opacity: 0.3;
}
.review_board_file_recommend a {
    font-size: 0.875rem;
    color: var(--darkgrey);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 1rem;
    width: max-content;
    line-height: 2rem;
    border-radius: 1.5rem;
    box-shadow: 1px 1px 3px #00000030;
}
.review_board_file_recommend a svg {
    width: 0.875rem;
    fill: #00c6b7;
}
.review_board_file_recommend a span {
    font-size: 0.575rem;
    font-weight: 700;
}

.review_board_file_recommend a:hover {
    transition: 0.3s;
    background-color: var(--lightgrey);
}
.review_board_file_recommend a:hover svg {
    transition: 0.3s;
    fill: var(--brandcolor);
}

.MS_review_content_box {
    display: none;
}

/* BASIC css end */