/*
	공통 라인 : #d6d6d6
	공통 포인트 : #fd4976
	공통 폰트 : #333 #666 # 999
*/
@import url('//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css');
/*@import url('//cdn.jsdelivr.net/font-spoqa-han-sans/2.1.0/css/SpoqaHanSans-kr.css');*/
@import url('//img3.bojagicard.com/fonts/spoqa/SpoqaHanSans-kr.css');
@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard-subset.css');
@import url('//img3.bojagicard.com/fonts/BookkMyungjo/BookkMyungjo.css');
@import url('//img3.bojagicard.com/fonts/SMSEMyungJoStd/SMSEMyungJoStd.css');
:root {
  --bj-brand-navy: #1b2631;
  --bj-accent: #c92e54;
  --bj-accent-violet: #7166a9;
  --bj-accent-rose: #b56f78;
  --bj-accent-hover: #a82445;
  --bj-accent-soft: #fff0f4;
  --bj-accent-line: #f3ccd7;
  --bj-on-accent: #ffffff;
  --bj-canvas: #f9f7f7;
  --bj-chrome-surface: #f1f1f1;
  --bj-surface: #ffffff;
  --bj-surface-soft: #f4f1f0;
  --bj-information-surface: #f8f7f4;
  --bj-line: #ece9e6;
  --bj-shell-divider: #f0eeec;
  --bj-line-strong: #938d86;
  --bj-ink-strong: #1b2631;
  --bj-text: #303c45;
  --bj-text-muted: #667078;
  --bj-text-disabled: #8d9499;
  --bj-brand: var(--bj-accent);
  --bj-brand-hover: var(--bj-accent-hover);
  --bj-brand-soft: var(--bj-accent-soft);
  --bj-brand-soft-tx: var(--bj-accent);
  --bj-text-strong: var(--bj-ink-strong);
  --bj-text-soft: var(--bj-text-muted);
  --bj-text-disable: var(--bj-text-disabled);
  --bj-bg: var(--bj-canvas);
  --bj-border: var(--bj-line);
  --bj-border-strong: var(--bj-line-strong);
  --bj-accent-dark: var(--bj-brand-navy);
  --bj-accent-warm: var(--bj-accent);
  --bj-nav-hover-surface: var(--bj-chrome-surface);
  --bj-nav-hover-ink: var(--bj-brand-navy);
  --bj-nav-focus-ring: var(--bj-line-strong);
  --bj-danger: #963e46;
  --bj-star: #9a7440;
  --fw-bg: var(--bj-canvas);
  --fw-surface: var(--bj-surface);
  --fw-border: var(--bj-line);
  --fw-border-strong: var(--bj-line-strong);
  --fw-text: var(--bj-ink-strong);
  --fw-text-soft: var(--bj-text-muted);
  --fw-accent: var(--bj-brand-navy);
  --fw-danger: var(--bj-danger);
  --fw-q-bg: var(--bj-canvas);
  --fw-a-bg: var(--bj-surface-soft);
}

/********************
    COMMON STYLES
 ********************/

/*공통사용 색상*/
:root {
    
    /* font size 폰트 사이즈 : 미디어 쿼리에 따라 변화함  */
    --bodyFontSize: 14px;
    --menuFontSize : 13px;  /* 메뉴 폰트 크기 */
    --priceAreaFontSize : 12px; /* 가격 영역 크기 */
    --areaTitleFontSize : 30px;
    --descFontSize : 12px;
    --boldFontWeight : 500;
    --defaultFontWeight : 300;
    
    --btnFontSize: 16px;
    --titleFontSize : 16px;
    
    /* 버튼 높이 : 미디어 쿼리에 따라 변화함 */
    --btnHeight: 50px;
    
    /* font 폰트 컬러 */
    --basicFontColor: #333333;
    --fontWhite: #ffffff;
    --fontLightGray: #aaaaaa;
    --fontMediumGray: #777777;
    --fontDarkGray: #666666;
    --fontPink: var(--bj-accent);
    
    /* 다용도컬러 */
    --primaryColor : var(--bj-brand-navy);
    --lightGray: #aaaaaa;
    --mediumGray: #777777;
    --darkGray: #666666;
    --pink: var(--bj-accent);
    --hlColor: var(--bj-accent);
    
    /* head menu 공통색상 */
    --optionTitle: #333333;
    --optionBorder: #eeeeee;
    --padding40: 40px;

    /* table 가격 테이블 */
    --tableBdTop: #1b2631 ;
    --tableBd: #dddddd;
    --tableHeader: #f9f7f7;
    --tableTitle: #696969;
    --tableDesc: #8e8e8e;

    /* margin & padding 마진 패딩 간격*/
    --tabConMt: 50px;

    /* swiper slide 스와이퍼 슬라이드 */
    --swiperDefault: #fbfaf8;
    --swiperActive: #21251f;

    /* step 제작일정 */
    --scheduleText: #333333;
    --stepBorder: #dddddd;

    /* notice 공지 */
    --noticeHeader: #333333;
    --noticeBody: #777777;
    --noticeBodyDeco: #666666;

    /* benefit 혜택 */
    --benefitTitleColor: #333333;
    --benefitContentColor: #777777;
    --benefitContentDecoColor: #666666;
    --benefitBorder: #ebdccf;
    --benefitTitleBorder: #626262;

    /* rating 후기 별점 */
    --starPink: #ff9392;

    /* event 이벤트 */
    --eventTitleColor: #333333;
    --eventDescColor: #999999;
    --eventBoder: #dddddd;

    /* product 상품 */
    --pdNameColor: #333333;
    --pdDescColor: #aaaaaa;
    --pdBorderColor: #dddddd;

    /* order module product 주문 오더 모듈 프로덕트 */
    --ompBgColor: #ffffff;
    --ompBorderColor: #bbbbbb;
    --ompBorderColor2: #e1e1e1;

    /* pager 페이저 페이지네이션*/
    --currentPageBorder : #bbbbbb;
    --pagerIndexColor: #777777;

    /* 주문페이지 자세히보기 */
    --viewmoreMint : #82c5b0;

    /* sns 그룹*/
    --snsBlog: #0dc9c2;
    --snsCafe: #42b6cd;
    --snsFacebook: #6d90d0;
    --snsInstagram: #c66dd0;

    /* afterlist 후기 */
    --reviewBorderTop: #777777;
    --afterListBorderBottom: #dddddd;
    --afterListContentBg: #fafafa;
    
    /* popup 팝업 스타일 */
    --popupBorder: #21252f;
    --popupTitleBox: #f9f7f7;
    --popupContentBox: #ffffff;
    --popupPadding: 20px;
    --popupMobilePadding: 14px;
    
    /* 연하장 */
    --nbPointColorA: #cc523e;
    
    /* *****************************
        버튼 스타일 모음
    ***************************** */
    
    /* 무료샘플 담기 버튼 */
    --btnBorderFreeSampleAdd: #a1a1a1;
    --btnBgColorFreeSampleAdd: #ffffff;
    
    /* 무료샘플 신청 버튼 */
    --btnBorderFreeSampleRequest: #f2f2f2;
    --btnBgColorFreeSampleRequest: #f9f7f7;
    
    /* 웨딩 스템프 담기 버튼 */
    --btnBorderAddtoCart: #a1a1a1;
    --btnBgColorAddtoCart: #ffffff;
    --bgAddtoCartCount: #1b2631;
    
    /* 주문하기 버튼 */
    --btnBorderPrdOrder: #1b2631;
    --btnBgColorPrdOrder: #1b2631;
    
    /* 특급 당일 주문 버튼 */
    --btnBorderExpressOrder: #f9dad5;
    --btnBgColorExpressOrder: #fdf5f3;
    
    /* 이용 후기 버튼 */
    --btnBorderAfterReview: #9da1a6;
    --btnBgColorAfterReview: #ffffff;


    /* *****************************
        상세 탭메뉴 스타일 모음
    ***************************** */
    --borderPrdTabMenu: #eaeaea;
    --bgColorPrdTabMenu: #fbf9f9;
    --activeBgColorPrdTabMenu: #1b2631;
    
    /* 탭메뉴 위 간격 */
    --tabHrefHeadHeight: 100px;
    
    /* *****************************
        input, select 스타일 모음
    ***************************** */
    --inputSelctBorderColor: #dddddd;
}
/********************
    공통 테이블 스타일
********************/
table.common_table {
    width: 100%;
    border-top: 1px solid var(--tableBdTop);
    table-layout: fixed;
    color: var(--basicFontColor);
    border-spacing: 0;
}
table.common_table * {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
table.common_table thead,  table.common_table .table_head{
    background-color: var(--tableHeader);
    text-align: center;
}
table.common_table thead td, table.common_table thead th {
    font-weight: var(--boldFontWeight);
}
table.common_table th, table.common_table td {
    height: 45px;
    line-height: 44px;
    padding: 0 12px;
    font-weight: 300;
    border-bottom: 1px solid var(--tableBd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--defaultFontWeight);
    font-size: var(--bodyFontSize);
}
table.common_table td.tl {
    text-align: left !important;
}
table.common_table td.tc {
    text-align: center !important;
}
table.common_table td.tr {
    text-align: right !important;
}
table.common_table td.content_td {
    white-space: wrap !important;
    line-height: 22px !important;
    padding: 12px !important;
    background-color: #ffffff;
    text-align: left !important;
}
table.common_table td.answer_td {  /* 질문 답변과 같은 리스트 답변 td 영역 */
    white-space: wrap !important;
    line-height: 22px !important;
    padding: 12px 40px !important;
    background-color: var(--tableHeader);
    text-align: left !important;
}
/********************
    모달 레이어 적용시 필요한 바디 제어 클래스
********************/
.body-scroll-lock {
    overflow: hidden;
    position: fixed;
    width: 100%;
    overscroll-behavior: none;
    touch-action: none;    
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
#ui-datepicker-div { top: -99999999px; display:none; }  /* JQUERY-UI 버그 수정 */
#modal_box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    z-index: 13;
}
#mask {
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    display: none;
}


img {
    border: 0;
}
.checkbox_button {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    background-color: #f2f2f2;
    border: 1px solid #d9d9d9;
    color: #737171;
    font-size: 11px;
}
.checkbox_button > input {
    margin: 0;
    vertical-align: -2px;
}
/* common font */
.title1, block_title, block_title_02, block_title_movie, block_title_movie > b, .bill_block_title,
.oblock_title {
    font-family: 'Pretendard';
}
/* common font-color */
.block_title, .block_title_02, .block_title_movie, .block_title_movie > b, .oblock_title {
	color: #333333;
}

.title1 {  /* PAGE TITLE */
    font-size: 26px;
    color: #555555;
    letter-spacing: -2px;
}
.block_title {
	font-size: 18px;
}
.block_title_02 {
	font-size: 14px;
	font-weight: bold; 
}
/* Movie page */
.block_title_movie, .block_title_movie > b {
	font-size: 20px;
}
.block_title_movie {
    margin-bottom: 18px; 
    margin-top: 55px;
}
.bill_block_title {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	background-color: #6b6b6b;
	color: #eeeeee;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: -2px;
	padding: 10px;
	padding-left: 20px;
}
.order_included_notice {
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.wedding_time_select { width: 100px; }


/* 주소, 우편번호 관련 */
.zip_number, .addr1, .addr2 {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height: 34px;
    border: 1px solid #ebebeb;
    font-size: 12px;
    padding-left: 6px;
}
.addr_map_btn {
    height: 30px;
    width: auto;
    margin-right: 0px;
    cursor: pointer;
}
.zip_number {
    width: 62px;
}
.zip_btn {
    margin-left: 6px;
}
.addr1, .addr2 {
    width: 100%;
    margin-top: 6px;
}
.daum_map_icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 12px;
}
/* 주소, 우편번호 관련 */


input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}  /* Remove number type input's spinner */

input[name=hand1], input[name=hand2], input[name=hand3], input[name=tel1], input[name=tel2], input[name=tel3] {
    width: 60px;
    padding: 4px;
}
select { padding: 0px }
.tel_input, .tel_select {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 62px;
    border: 1px solid #ebebeb;
    padding: 5px;
}
.unm_input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 138px;
    border: 1px solid #ebebeb;
    padding: 5px;
}
.bai_memo {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 100%;
    border: 1px solid #ebebeb;
    padding: 5px;
}
/** COMMON STYLES **/


/**  TABLE STYLE DEFINITION #1 **/
.oblock_title, .oblock { width: 880px; margin: auto;  }
.oblock_title {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    margin-top: 30px;
    /* font-family: 'NanumBarunGothic'; */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-top: 30px;
    padding-bottom: 6px;
}
.oblock {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border: 8px solid #eeeeee;
    padding: 20px;
    padding-bottom: 9px;
}
.oblock_notice {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border-bottom: 2px solid #e4e4e4;
    color: #9d9d9d;
    vertical-align: bottom;
    padding-bottom: 4px;
}
.oborder {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    display: inline-block;
    border: 8px solid #e1e1e1;
    padding-left:28px;
    padding-top:20px;
    padding-right:20px; 
    padding-bottom:20px;
}
.otbl {  /* order table */
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}  
.otr {} /* order table tr */
.oth, .otd, .otbl > tbody > tr > th, .otbl > tbody > tr > td {
    height: 44px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border-bottom: 1px solid #ebebeb;
    font-family: 'Pretendard';
}
.oth, .otbl > tbody > tr > th {
    width: 100px;
    color: #737171;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: -1px;
    padding-bottom: 10px;
    padding-top: 12px;
    padding-right: 20px;
    text-align: right;
    vertical-align: top;
}
.otd, .otbl > tbody > tr > td {
      color: #909090;
      padding-top: 10px;
      padding-bottom: 10px;
}
.otbl > tbody > tr:last-child > th { /* REMOVE LAST ROW BOTTOM BORDER LINE */
    border-bottom: 1px solid #ffffff;
}
.otbl > tbody > tr:last-child > td {
    border-bottom: 1px solid #ffffff;
}

.otbl > tbody > tr > td > input[name="unm"], .otbl > tbody > tr > td > input[name="eml1"] {
    width: 117px;
}
.otbl > tbody > tr > td > input[name="eml2"] {
    width: 163px;
}

.otbl > tbody > tr > td > input[type="text"], .otbl > tbody > tr > td > input[type="tel"],
.otbl > tbody > tr > td > input[type="number"], .otbl > tbody > tr > td > input[type="password"] {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height: 34px;
    border: 1px solid #ebebeb;
    padding-left: 6px;
    padding-right: 6px;
}

/*
.otbl > tbody > tr > td > select {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 1px solid #ebebeb; padding-left: 2px; padding-right: 2px; height: 25px; 
}
*/



.otbl > tbody > tr > td > select[name=tel1] { width: 62px; }

.otbl > tbody > tr > td > textarea {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 1px solid #ebebeb;
	padding: 4px;
}


/**  TABLE STYLE DEFINITION #2 **/
.vtbl { width: 100%; border-spacing: 0; border-collapse: collapse; border-top: 1px solid #d6d6d6; }  /* vertical table */
.vth, .vtd, .vtbl > tbody > tr > th, .vtbl > tbody > tr > td {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	height: 42px;
	font-family: 'Pretendard';
	font-size: 12px;
	border-bottom: 1px solid #ebebeb; 
	padding-top: 8px;
	padding-bottom: 8px;
}
.vth, .vtbl > tbody > tr > th {
    width: 150px;
    background-color: #fafafa;
    color: #666666;
    font-size: 12px;
    font-weight: bold;
    padding-left: 20px;
    text-align: left;   
    vertical-align: middle;
}
.vtd, .vtbl > tbody > tr > td {
    color: #909090;
    padding: 0;
    padding-left: 30px;
}
.vtbl > tbody > tr > td input, .vtbl > tbody > tr > td select  {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	height: 29px;
	border: 1px solid #d6d6d6;
	color: #666666;
}
.vtbl > tbody > tr > td input {
    width: 209px;
    padding-left: 8px;
}
.vtbl > tbody > tr > td input[name=hand2], .vtbl > tbody > tr > td input[name=hand3],
.vtbl > tbody > tr > td input[name=tel2], .vtbl > tbody > tr > td input[name=tel3] {
    width: 70px;
}
.vtbl > tbody > tr > td input[type=checkbox] {
    width: auto;
    height: auto;
}
.vtbl > tbody > tr > td select {
    min-width: 70px;
    padding-left: 4px;
    vertical-align: middle;
}
.vtbl > tbody > tr > td select[name=domain] {
    width: 209px;
}
.email {
    float: left;
}
select[name=mount_t] {
    border: 1px solid #707070;
    padding: 3px;
}
.mount_mg {
    width: 52px;
    border: 1px solid #707070;
    padding: 3px;
    IME-MODE: disabled;
}
.spacer1 { /* 주문페이지용 스페이서 */
    height: 34px;
    font-size: 0;
    margin: 0;
}
#order_btn {
    cursor: pointer;
}
#order_btn_wrapper, .order_btn_wrapper {
    clear: both;
    margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
}
#order_btn_loading {
    display: none;
    text-align: center;
}
.obong > tbody > tr > th {
    padding-top: 14px;
}
.nobline > th, .nobline > td {
    border-bottom: 0;
}
.obong_name_auto_popup {
    display: none;
    cursor: pointer;
    position: absolute;
    left: -19px;
    bottom: 14px;
}
.obong_sere_btn {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    background-color: #f2f2f2;
    border: 1px solid #d9d9d9;
    margin-left: 12px;
    padding-left: 6px;
    padding-left: 8px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 2px;
}
.obong_postpaid {  }
.obong_postpaid_txt {
    width: 460px;
    color: #909090;
    display: none;
    font-size: 11px;
    line-height: 19px;
    padding: 6px;
    padding-left: 3px;
    position: absolute;
    top: 28px;
    left: 250px;
}
/**  TABLE STYLE DEFINITION  **/

/**  ORDER STYLE DEFINITION  **/
.bong_base {
    margin-top: 34px;
}
.order_form_tag {
    width:100px;
    background-color:fff;
}
.oblock_bong {
    padding-top: 0;
    padding-bottom:0;
}
wedding, .wedding {
    display: none;
}
.tel_type_sel  {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height: 25px;
    border: 1px solid #ebebeb;
    font-size: 12px;
    margin-right: 10px;
    padding-left: 6px;
    padding-right: 6px;
}
.tel_num_input { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #ebebeb; font-size: 12px;  height: 25px; width: 42px; padding-left: 6px; padding-right: 6px; }
/**  ORDER STYLE DEFINITION  **/


/* MYPAGE */
.order_detail_row_title { font-family: 'Pretendard'; font-size: 15px; letter-spacing: -1px; font-weight: bold; color: #a1a1a1; margin-bottom: 4px; }
/* MYPAGE */

.card_price {}

.poham_tbl { margin-bottom: 5px; clear: both; display: block; cursor: pointer; }
.poham_mypage_pmg_td { font-size: 0; padding-right: 6px; }
.poham_mypage_pmg { height: 33px; border:1px solid #dddddd; margin-right: 3px; }
.poham_mypage_pnm { color: #333; font-size: 11px;  }
.poham_mypage_order { color: #aaa; font-size: 11px; padding-top: 2px; }


/* DIY */
.diy_sian_file_btn { border: 1px solid #eaeaea; line-height: 0; position: relative; width: 120px; margin-left: 0; cursor: pointer;  display: inline-block; margin-right: 10px; }
.diy_sian_ext_icon { position: absolute; top: 16px; left: 40px; font-size: 11px; color: #555555; }
#aaa { display: none; }


.event_button {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	width: 374px; height: 46px;
	background-color: #2e253f;
	border-radius: 23px;
	font-size: 13px;
	font-family: 'Pretendard';
	color: #eeeeee; text-align: center;
	line-height: 46px;
	cursor: pointer;
}
.event_box_btn1 {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 2px solid #888888;
	width: 230px; height: 50px;
	color: #555555;
	cursor: pointer;
	font-family: 'Pretendard';
	font-size: 16px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
}
.spc_add {
    cursor: pointer;
}
.offsale_notice {
    display: inline-block;
    color: red;
    font-weight: bold;
}
#event_view_top_spacer {
    font-size: 0;
    line-height: 0;
    height: 54px;
}
#event_view_main_wrapper {
    font-size: 0;
    margin-bottom: 20px;
    position: relative;
}


/* Product List */

.card_code_blocks {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    position: relative;
    line-height: 16px;
    padding-top: 5px;
}
.sname_head, .sname_num { color: #333333; font-family: 'Pretendard'; font-size: 13px; font-weight: bold; }

.pl_prod_name {
    float: left;
    height: 16px;
    margin-right: 2px;
}
.pl_mark_img_wrapper {
    /*float: left;*/
    height: 16px;
}
.pl_mark_img {
    margin-left: 3px;
    margin-top: -2px;
}


/* MyPage */
.order_prod_fork_txt {
    text-align: center;
}
.order_prod_fork_chosen, .order_prod_fork_uploadeds > div {
    float: left;
}
.order_prod_fork_uploaded {
    display: inline-block;
}
.order_prod_fork_uploadeds {
    margin-top: 8px;
}
.order_prod_fork_uploadeds > div {
    border: 1px solid gray;
    margin-right: 10px;
}
/* 상세페이지 레이어 팝업 전용*/
.pframe_info_row  {
    overflow: visible;
}
.pframe_info_body {
    position: relative;
}



/* 
    헤더 탑 header=top
    : 로고, 회원가입, 맞춤제작, 주문혜택, 고객센터, 이벤트, 이용후기, 샘플후기
*/
.top_r1_block_wrapper {
    width: 1000px;
    height: 80px;
    margin: auto; 
    display: flex;
    justify-content: space-between;
}
.top_r1_block_wrapper > .top_r1_block {
    display: flex;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
    gap: 20px;
}
.top_r1_menu > ul {
    overflow: visible;
}
.top_r1_menu > ul > li > a.review_link_color {
    color: #fd9298;
}

.top_r1_menu > ul > li > a.sample_review_link_color {
    color: #78bea6;
}
.head_logo_row_block {
    display: inline-block;
    position: relative;
}
.top_r1_menu {
    position: relative;
}
.top_r1_menu > ul {
    list-style-type: none;
}
.top_r1_menu > ul > li {
    display: inline-block;
    list-style-type: none;
	padding-left: 14px;
	padding-right: 14px;
    position: relative;
}
.top_r1_menu > ul > li:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    top: 0;
    left: 0;
}
.top_r1_menu > ul > li:first-child:before {
    display: none;
}
.top_r1_menu > ul > li:first-child {
    background: none;
    padding-left: 0;
}
.top_r1_menu > ul > li:last-child {
    padding-right: 0;
}
.top_r1_menu > ul > li > a {
    color: #eee6f1;
    font-size: 12px;
    float: left;
    font-family: 'Pretendard';
}
.top_r1_menu > top_r1_menu_right > li {
    position: relative;
}
.top_r1_menu > top_r1_menu_right > li:before {
    content: '';
    width: 1px;
    height: 12px;
    background-color: #515b64;
}
#menu_r1 {
    width: 100%;
    background-color: #1b2631;
    position: relative;
    z-index: 101;
}
.top_r1_menu_event {
    position: relative;
}
.count_circle_r1 {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	background-color: #334659;
	border-radius: 8px;
	color: #ffffff;
    font-family: dotum;
	font-size: 11px;
	font-weight: normal;
	padding: 1px 7px;
}


/*
    상단 대메뉴
*/
#menu_r2 {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 100%;
    height: 58px;
    background-color: #ffffff;
    border-bottom: 1px solid #d1d1d1;
    position: relative;
}

#top_r2_left {
    margin: 0;
    width: calc(100% - 230px);
}
.top_r2_menu {
    display: flex;
}
.top_r2_menu_ul {
    display: flex;
    overflow: visible;
    position: relative;
}
.top_r2_menu_ul:after {
    position: absolute;
    content: ''; 
}
.top_r2_menu_ul > li {
    width: calc(100% / 7);    
    height: 58px;
    display: flex;
    align-items: center;
    position: relative;
    font-family: 'Pretendard';
}
/* 상단 대메뉴 : 고객정보, 검색, 즐겨찾기  */
#top_r2_right {
    width: 230px;
    height: 58px;
    display: flex;
    gap: 22px;
    justify-content: flex-end;
    overflow: visible;
}
#top_r2_right > li {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 상단 대메뉴 호버 이벤트 */
#under_line { /* 대메뉴 하단 활성화 표시 */
    width: 0;
    height: 1px;
    background-color: #333333;
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    transition: 0.2s;
    text-indent: -99999em;
}
.top_r2_menu_ul > li > a {
    color: #444444;
    display: inline-block;
    font-family: var(--bj-font-family, 'Pretendard');
    font-size: var(--bj-type-nav, 16px);
    font-weight: var(--bj-type-nav-weight, 600);
    /*line-height: 58px;*/
    line-height: var(--bj-type-nav-line, 1.5);
    letter-spacing: -.01em;
    position: relative;
}
/* 상단 서브메뉴 */
.top_r2_sub_menu {
    width: 100%;
    position: absolute;
    top: 58px;
    z-index: 52;
    display: none;
}
#all_menu_area {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 100vw;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    display: none;
    padding-top: 30px;
    padding-bottom: 40px;
    position: absolute;
    top: 58px;
    left: 50%;
    z-index: 51;
    transform: translateX(-50%);
    box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.3);
}
#all_menu_area img{
    vertical-align: top;
}
#all_menu_tbl {
    display: flex;
    width: 1000px;
    gap: 30px;
}
.menu_group {
    width: calc(100% - 230px);
    display: flex;
}
.sub_menu_row {
    width: calc(100% / 7);
}
.sub_menu_row > li {
    display: flex;
    flex-direction: column;
    font-family: 'Pretendard';
    gap: 20px;
}
.sub_menu_row > li a {
    font-family: 'Pretendard';
}
.sub_menu_title {
    color: #333333;
    font-family: 'Pretendard';
    font-size: 14px;
    font-weight: bold !important;
    /* margin-bottom: 7px; */
}
.sub_menu_row span,  .sub_menu_row span a {
    color: var(--basicFontColor);
    cursor: default;
    font-size: 13px;
    /* font-family: 'SpoqaHanSans-kr';*/
    font-family: 'Pretendard';
    font-weight: bold;
    line-height: 1;
    margin: 0;
    margin-bottom: 30px;
}
.sub_menu_row a {
    color: var(--basicFontColor);
    /*font-size: 15px;*/
    font-size: 13px;
    /* font-family: 'SpoqaHanSans-kr';*/
    font-family: 'Pretendard';
    font-weight: 400;
    line-height: 1;
}

/* 이벤트 메뉴 전용 */
.event_group {
    width: 200px;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.event_group > div {
    margin: 0;
}
.event_titile_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.event_titile_box > ul {
    display: flex;
    align-items: center;
    gap: 3px;
}
.event_titile_box > ul li:last-child{
    padding: 0 5px;
    background-color: #f9f1ee;
    border-radius: 50px;
    font-family: 'Pretendard';
    font-weight: bold;
    font-size: 11px;
    height: 15px;
    line-height: 15px;
}


.event_group a {
	font-family: 'Pretendard';
    /*font-size: 15px;*/
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.event_group .sub_menu_row{
    width: 100%;
}

.event_group .sub_menu_row > ul span, .event_group .sub_menu_row > ul span{
    color: var(--basicFontColor);
    /* font-family: 'SpoqaHanSans-kr';*/
    font-family: 'Pretendard';
    line-height: 1;
}

/*
    헤더메뉴 이벤트 슬라이드 영역
*/
.header_menu_event_slide_box {
    position: relative;
}
#header_menu_event_slide {
    overflow: hidden;
}
.event_group > div.event_slide_box {
    position: relative;
    width: inherit;
}
.header_menu_slide_btn {
    height: 10px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: none; /* 2025.08.29 이벤트 종료로 인한 미노출 */
}
.header_menu_slide_btn button {
    height: 10px;
    width: 10px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 0;
    text-indent: -999999rem;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 50%;
    transition: 0.3s; 
}
.header_menu_slide_btn button.swiper-button-disabled {
    background-color: #1b2631;
    width: 20px;
    border-radius: 30%;
    transition: 0.3s; 
}

/*
    헤더메뉴 청첩장 가이드 영역
*/
.event_guide_box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.event_guide_btn_wrap {
    margin: 0;
    display: flex;
    gap: 10px
}
.event_guide_btn_wrap a {
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    display: inline-block;
    font-family: 'Pretendard';
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    flex: 1;
}
.head_menu_event_event_view_more { /* 이벤트 더보기 */
    cursor: pointer;    
}




a.free_sample_link {
    color: #fd9298;
}
a.login_menu_link {
    color: #78bea6;
}
.all_menu_cursor_none {
    cursor: text;
}

/* head my page */
#head_mymenu {
	display: none;
}
.head_mymenu_btn, .head_search_btn, .direct_access_btn {
    cursor: pointer;
}
.headMyMenuList {
    display: grid;
    gap: 2px;
}
.headMyMenuLink,
.headerReviewMenuLink {
    gap: 10px;
}
.headerUtilityPopoverIconBox {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--bj-secondary, #625e5a);
    background: var(--bj-product-stage, #f5f3f1);
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.headerUtilityPopoverIcon {
    width: 17px;
    height: 17px;
    display: block;
}
.headerUtilityPopoverItem:hover .headerUtilityPopoverIconBox,
.headerUtilityPopoverItem:focus-visible .headerUtilityPopoverIconBox {
    color: var(--header-ink);
    background: var(--bj-clean, #ffffff);
    box-shadow: inset 0 0 0 1px var(--bj-line, #e4dfdc);
}
.headMyMenuFooter {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid var(--bj-line, #e4dfdc);
}
.headMyMenuFooter a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: var(--bj-control-radius, 8px);
    color: var(--bj-accent, #914552);
    font-family: var(--bj-font-family);
    font-size: 15px;
    font-weight: var(--bj-type-control-weight, 500);
    line-height: var(--bj-type-control-line, 1.6);
    text-decoration: none;
}
.headerUtilityPopoverIconBox--logout {
    color: var(--bj-accent, #914552);
    background: #fbf4f5;
}
.headMyMenuFooter a:hover,
.headMyMenuFooter a:focus-visible {
    color: var(--bj-accent, #914552);
    background: #fbf4f5;
    text-decoration: none;
    outline: none;
}


/* head-search */ 
#head_search {
    display: none;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 287px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    font-size: 0;
    position: absolute;
    z-index: 31;
    left: 50%;
    transform: translateX(-50%);
    top: 47px;
    padding: 20px;
}
/* 말풍선 ^ 모양 */
#head_search:before {
    content: '';
    position: absolute;
    border-bottom: 6px solid #cccccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    top: -6px;
    right: 132px;
    transform: translateX(-50%);
}
#head_search:after {
    content: '';
    position: absolute;
    border-bottom: 5px solid #ffffff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    top: -5px;
    right: 134px;
    transform: translateX(-50%);
}
#head_search_input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 195px;
    height: 38px;
    display: inline-block;
    outline: none;
    border: 1px solid #d6d6d6;
    padding-left: 8px;
}
#head_search_input::placeholder {
    color: silver;
    font-size: 11px;
}
#head_search_btn {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 48px;
    height: 38px;
    display: inline-block;
    background-color: #f7f5f6;
    border: 1px solid #d6d6d6;
    border-left: 0px solid transparent;
    color: #777777;
    cursor :pointer;
    font-size: 11px;
    margin-top: 0;
    line-height: 38px;
    text-align: center;
}


/* head favorite */
#head_favadd {
	display: none;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	font-size: 0;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
	position: absolute;
	right: -8px;
	top: 47px;
	z-index: 2;
}
/* 말풍선 ^ 모양 */
#head_favadd:before {
    content: '';
    position: absolute;
    border-bottom: 6px solid #dddddd;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    top: -6px;
    right: 14px;
}
#head_favadd:after {
    content: '';
    position: absolute;
    border-bottom: 5px solid #ffffff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    top: -5px;
    right: 15px;
}
.head_favadd_title_wrapper {
    display: flex;
    justify-content: space-between
}
.head_favadd_title {
    color: #787878;
    font-size: 11px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
}
.head_favadd_title:before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: #787878;
    position: absolute;
    top: 4px;
    left: -10px;
    transform: rotate(-45deg);
}
.head_favadd_desc {
    color: #787878;
    font-size: 11px;
    margin-top: 15px;
}

/* 무료 샘플 */
#sample_cards_box {
    width: 362px;
    display: none;
    margin: 0;
    position: absolute;
    right: 0;
    top: 54px;
    z-index: 100;
}
#sample_cards_box .btn_request_sample_cards {
    display: none;
}
#sample_cards_box .btn_request_free_sample {
    padding: 0 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sample_cards_box .btn_request_free_sample > button {
    height: 40px;
    background-color: var(--primaryColor);
    border: none;
    color: #ffffff;
    padding: 0 30px;
    font-weight: bold;
    cursor: pointer;
}


#sample_cards_box .sample_cards_count_txt {
    color: var(--basicFontColor);
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-bottom: 0;
    font-weight: var(--boldFontWeight);
}
#sample_cards_box .sample_cards_count_txt li {
    font-family: 'Pretendard';
    display: flex;
    align-items: center;
}
#sample_cards_box .sample_cards_count_txt img {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#sample_cards_box .sample_cards_count_txt .avail_cnt{
    color: #ff7473;
}
#sample_cards_box #sample_cards {
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.25);
}

/* 말풍선 ^ 모양 */
#sample_cards_box:before {
    content: '';
    position: absolute;
    border-bottom: 6px solid #dddddd;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    top: -6px;
    right: 10%;
    transform: translateX(-50%);
}
#sample_cards_box:after {
    content: '';
    position: absolute;
    border-bottom: 5px solid #ffffff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    top: -4px;
    right: 10%;
    transform: translateX(-6px);
}

/* 푸터에 영향을 줌 삭제 금지 */
.main_section_area_inner {
    width: 1000px;
}






/* 상품리스트 row 정렬 관련 */
.product_filter_select { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:1px solid #e1e1e1; padding: 6px; margin-right: 4px; color: #666666; width: 150px; }


#pl_sort_row1 {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border-top: 1px solid #e1e1e1;
    margin-top: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 38px;
}
.pl_sort_motive_button {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border: 1px solid #ededed;
    color: #777777;
    cursor: pointer;
    height: 30px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    margin-right: 6px;
    /*
    padding-left: 6px;
    padding-right: 6px;
    min-width: 60px;
    */
    margin-right: 1.5px;
    padding-left: 9px;
    padding-right: 9px;
}

#pl_sort_row2, #pl_sort_row3 {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

#pl_sort_row2 {
    display: flex;
    border: 1px solid #e1e1e1;
    border-left: 0;
    border-right: 0;
    position: relative;
    padding-top: 16px;
    padding-bottom: 16px;
}
#pl_sort_row2 > div {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 333px;
    padding-left: 20px;
    border-right: 1px solid #ededed;
    margin-left: 0;
    margin-right: 0;
}
#pl_sort_row2 > div:last-child {
    border-right: 0px solid transparent;
}
.pl_sort_row2_button {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border-right: 1px solid #eeeeee;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    position: relative;
}
.pl_sort_row2_button:before {
    content: '+';
    position: absolute;
    top: -2px;
    right: -12px;
    font-size: 15px;
}
#pl_sort_row3 .pl_sort_row3_button {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 180px;
    border-right: 1px solid #e1e1e1;
    color: #666666;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    padding-left: 20px;
    position: relative;
    margin-right: 25px;
    text-align: left;
}
#pl_sort_row3 .pl_sort_row3_button:last-child {
    border-right: 0px solid #e1e1e1;
}
.pl_sort_row3_button:before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid #999999;
    position: absolute;
    top: 0;
    left: 0;
}
.pl_sort_row3_button.pl_sort_row3_button_on:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #444444;
    position: absolute;
    top: 3px;
    left: 3px;
}
.pl_sort_row2_button.pl_sort_enabled:before {
    content: '-';
    top: -2px;
    right: -12px;
}
.pl_sort_row2_button span {
   /* color: #bbbbbb;*/
    font-weight: normal;
}
.pl_sort_row2_button:last-of-type {
    border-right: 0;
}

#pl_sort_row23 {
    margin-bottom: 65px;
}
#pl_sort_row3 {
    background-color: #fafafa;
    border-bottom: 1px solid #e1e1e1;
    border-top: 0;
    padding-left: 28px;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 50px;
}

.pl_sort_row3_button_wrapper {
    display: none;
}

.pl_sort_shape_button, .pl_sort_colour_button {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.pl_sort_shape_button {
    width: 62px;
    margin-right: 25px;
}
.pl_sort_colour_button {
    width: 36px;  /* 35px는 '화이트' 텍스트 볼드일때 넘침 */
    margin-right: 20px;
}

.pl_sort_shape_icon, .pl_sort_colour_icon {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
}
.pl_sort_shape_text, .pl_sort_colour_text {
    color: #666666;
    text-align: center;
    margin-left: 0;
    margin-top: 15px;
    font-size: 11px;
}

.pl_sort_shape_icon {
    background-color: #ffffff;
    border: 1px solid #ededed;
    width: 62px;
    height: 62px;
}


.pl_sort_colour_icon {
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    border: 1px solid #ededed;
    border-radius: 3px;
}
.pl_sort_colour_icon.pl_sort_colour_icon_on {
    border: 1px solid #ff7473;
}

.pl_sort_enabled {  /* 순서주의 */
    color: #ff7473;
}
.pl_sort_enabled_bold {
    color: #fd4976;
    font-weight: bold;
}

.wedding_notify_card_banner {
    background-color: #ecf4ff;
    border: 1px solid #d3d9ef;
    color: #6d8bbf;
    font-size: 11px;
    font-weight: bold;
    height: 38px;
    line-height: 38px;
    margin-bottom: -1px;
    text-align: center;
}
.pl_card_desc_banner {
   margin-top: 65px;
   margin-bottom: 65px;
}



/* 상품리스트 크게작게 */
#pl_sort_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*margin-top: 30px;*/
    margin-bottom: 30px;
    position: relative;
}
#pl_sort_row > div {
    margin-left: 0;
    margin-right: 0;
}
.pl_sort_row_left {
    color: #777777;
}

/* 크게 작게 버튼 */
.pl_sort_row_right {
    display: flex;
    align-items: center;
}
.rpc_btn_row {
    margin-right: 5px;
}
.rpc_btn_row .rpc_btn:last-child {
    margin-left: -4px;
}
.rpc_btn {
    display: inline-block;
    border: 1px solid #bbbbbb;
    color: #bbbbbb;
    cursor: pointer;
    font-size: 11px;
    padding-left: 23px;
    padding-right: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
    position: relative;
}
.rpc_btn.btn_large {
    border-right: none;
}
.rpc_btn.btn_small {
    border-left: none;
}
.rpc_btn.btn_large:after {
    content: '';
    width: 11px;
    height: 11px;
    background-color: #aaaaaa;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(calc(-50% + -0.5px));
}
.rpc_btn_on.btn_large:after {
    background-color: #ff9392;
}
.rpc_btn.btn_small:after {
    content: '';
    width: 1px;
    height: 11px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 15px;
    /*transform: translateY(-53.4%);*/
    transform: translateY(calc(-50% + -0.5px));
}
.rpc_btn.btn_small:before {
    content: '';
    width: 11px;
    height: 1px;
    background-color: #ffffff;
    border-top: 5px solid #aaaaaa;
    border-bottom: 5px solid #aaaaaa;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(calc(-50% + -0.5px));
}
.rpc_btn_on.btn_small:before {
    border-top: 5px solid #ff9392;
    border-bottom: 5px solid #ff9392;
}
.rpc_btn_on {
   border: 1px solid #ff9392;
   color: #ff9392;
}
.rpc_btn_on.btn_large {
    border-right: 1px solid #ff9392;
}
.rpc_btn_on.btn_small {
    border-left: 1px solid #ff9392;
}
.pl_pic_select {
    width: 190px;
    height: 33px;
    border: 1px solid #bbbbbb;
    color: #777777;
    padding-left: 5px;
}
/* 상품리스트 sub 메뉴 : 2025.01.22 prouct_list_css.php 로 이동
.product_list_preserved_flower, .product_list_st, .product_list_cb, .product_list_sealing_sticker {
    margin-top: 70px;
}
*/

/**********************************************
상세 탭메뉴
**********************************************/ 
.tab_href_head {
    /* 상단 고정스크롤바 영향 고려 */
    height: var(--tabHrefHeadHeight);
}
.tab_href_btns {
    font-size: 0;
    display: flex;
    justify-content: center;
    border: 1px solid var(--borderPrdTabMenu);
}
.tab_href_btn {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height: 50px;
    line-height: 48px;
    background-color: var(--bgColorPrdTabMenu);
    border-right: 1px solid var(--borderPrdTabMenu);
    color: var(--basicFontColor);
    display: block;
    text-align: center;
    font-family: 'Pretendard';
    font-size: var(--titleFontSize);
    cursor: pointer;
    flex: 1;
}
.tab_href_btn:last-child {
    border-right: none;
}
.tab_href_btn_on {
	background-color: var(--activeBgColorPrdTabMenu);
	color: var(--fontWhite);
}
.faq_tab_href_btn {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    padding: 10px 15px;
    border: 1px solid var(--borderPrdTabMenu)
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-family: "Malgun Gothic";
    font-size: 13px;
    color: var(--basicFontColor);
    cursor: pointer;
}
.faq_tab_href_btn_on {
    border: 1px solid var(--borderPrdTabMenu);
	color: var(--hlColor);
}
.tab_href_btn_after_count {
    font-family: "Malgun Gothic";
    font-size: 13px;
    color: var(--fontMediumGray);
    margin-left: -3px;
}
.tab_href_btn_after_count:before {
    content: '(';
}
.tab_href_btn_after_count:after {
    content: ')';
}


/**********************************************
이용후기
**********************************************/  
.after_list_write_group {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.after_list_top{
    margin: 0;
    position: relative;
    height: 40px;
}
.after_list_top p {
    font-size: 12px;
    font-weight: bolder;
    margin: 0;
    color: var(--pagerIndexColor);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.after_list_top p span {
    color: var(--starPink);
}
.after_list_top button{
    width: 200px;
    height: 40px;
    border: none;
    border: 1px solid var(--btnBorderAfterReview);
    background-color: var(--btnBgColorAfterReview);
    cursor: pointer;
    font-weight: bolder;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    box-sizing: border-box;
}
.after_list_top button a {
    color: var(--fontMediumGray);
    font-size: 14px;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    box-sizing: border-box;
}

/* 2026 header renewal: desktop navigation and utility system */
.bojagiPcHeaderTop,
#menu_r2 {
    --header-navy: var(--bj-brand-navy);
    --bojagi-logo-color: var(--bj-brand-navy);
    --header-ink: var(--bj-brand-navy);
    --header-muted: var(--bj-text-muted);
    --header-line: var(--bj-header-divider, #f0eeec);
    --header-selection-accent: var(--bj-brand-navy, #1b2631);
    --header-glass-bg: color-mix(in srgb, var(--bj-header-surface, #fdfdfc) 97%, transparent);
    --header-glass-filter: saturate(108%) blur(10px);
    font-family: var(--bj-font-family);
}
.bojagiPcHeaderTop {
    background: var(--bj-header-surface, #fdfdfc) !important;
    background: var(--header-glass-bg) !important;
    -webkit-backdrop-filter: var(--header-glass-filter);
    backdrop-filter: var(--header-glass-filter);
}
#menu_r2 {
    background: transparent !important;
}
#menu_r1.bojagiPcHeaderTop {
    z-index: 122;
}
.bojagiPcHeaderTop .top_r1_block_wrapper {
    width: 1000px;
    height: 64px;
    align-items: center;
}
.pdpSharedHeaderIdentity {
    display: none;
}
.bojagiPcHeaderTop .bojagiPcBrandBlock,
.bojagiPcHeaderTop .head_logo_row_block,
.bojagiPcHeaderTop .bojagiBrandHeading {
    margin: 0;
}
.bojagiPcHeaderTop .head_logo_row_block,
.bojagiPcHeaderTop .bojagiBrandHeading,
.bojagiPcHeaderTop .head_logo_row_block a {
    height: 64px;
    display: flex;
    align-items: center;
}
.bojagiPcHeaderTop #main_logo_img {
    width: 148px;
    height: 64px;
    max-width: none;
    max-height: none;
    display: block;
    flex: 0 0 148px;
    background-color: var(--bojagi-logo-color);
    -webkit-mask: url('/card/img/bojagi_logo_dark.png?v=20260720') center / contain no-repeat;
    mask: url('/card/img/bojagi_logo_dark.png?v=20260720') center / contain no-repeat;
}
.headerUtility {
    width: auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
}
.headerUtilityItem {
    width: 40px;
    height: 44px;
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--header-ink);
}
.headerUtilityButton,
.headerUtility .unifiedCartEntry {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--header-ink) !important;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}
.headerUtilityButton:hover,
.headerUtilityButton:focus-visible,
.headerUtilityButton[aria-expanded="true"],
.headerUtility .unifiedCartEntry:hover,
.headerUtility .unifiedCartEntry:focus-visible {
    color: var(--header-ink) !important;
    background: var(--bj-nav-hover-surface, #f3f1f0);
    outline: none;
}
.headerUtilityButton:focus-visible,
.headerUtility .unifiedCartEntry:focus-visible {
    box-shadow: 0 0 0 2px var(--bj-nav-focus-ring, #cdc6c2);
}
.headerIcon {
    width: 21px;
    height: 21px;
    display: block;
    pointer-events: none;
}
/* 장바구니 아이콘도 윗줄 아이콘과 같은 21px */
.headerUtility .unifiedCartEntry-ico svg {
    width: 21px;
    height: 21px;
}
/* 검색은 모든 폭에서 같은 버튼이다. PC에서는 글자를, 모바일에서는 아이콘을 보인다. */
.headerUtilityText,
.headerUtilitySeparator {
    display: none;
}
@media (max-width: 767px) {
    .headerUtility .headerUtilityItem--review,
    .headerUtility .headerUtilityItem--event,
    .headerUtility .headerUtilityItem--support {
        display: none;
    }
}
@media (min-width: 768px) {
    .headerUtility .headerUtilityItem--search {
        width: auto;
        margin-right: 12px;
    }
    .headerUtility .headerSearchButton {
        width: auto !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        font-family: var(--bj-font-family);
        font-size: 14.5px;
        font-weight: 500;
        letter-spacing: -.01em;
        white-space: nowrap;
    }
    .headerUtility .headerSearchButton .headerUtilityText {
        display: inline-flex;
    }
    /* 전역 span 12px 규칙보다 공통 유틸리티 글자 크기가 우선한다. */
    .headerUtility .headerUtilityText {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
    }
    .headerUtility .headerUtilityItem--text {
        width: auto;
    }
    .headerUtility .headerUtilityItem--text > .headerUtilityButton {
        width: auto !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center;
        padding: 0 10px;
        font-family: var(--bj-font-family);
        font-size: 14.5px;
        font-weight: 500;
        letter-spacing: -.01em;
        white-space: nowrap;
    }
    .headerUtility .headerUtilityItem--text > .headerUtilityButton > .headerIcon {
        display: none;
    }
    .headerUtility .headerUtilityItem--text .headerUtilityText {
        display: inline-flex;
        align-items: center;
    }
    .headerUtility .headerUtilityCaret {
        width: 14px;
        height: 14px;
        margin-left: 2px;
    }
    .headerUtility .headerUtilitySeparator {
        display: block;
        width: 1px;
        height: 14px;
        margin: 0 8px;
        background: var(--bj-line);
    }
}
.headerUtility .unifiedCartEntry-badge {
    top: 1px !important;
    right: 0 !important;
    color: var(--bj-on-accent) !important;
    background: var(--bj-accent) !important;
}
.headerUtilityPopover {
    box-sizing: border-box;
    width: 220px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 52px;
    left: 50%;
    right: auto;
    z-index: 140;
    padding: 6px;
    border: 1px solid var(--bj-line, #e4dfdc);
    border-radius: 10px;
    color: var(--bj-text);
    background: var(--bj-surface);
    box-shadow: 0 12px 28px rgba(25,39,49,.12), 0 2px 8px rgba(25,39,49,.05);
    transform: translate(calc(-50% + var(--header-utility-popover-offset-x, 0px)), -4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.headerReviewDropdown {
    display: block;
}
.headerUtilityPopoverHost.is-open > .headerUtilityPopover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(calc(-50% + var(--header-utility-popover-offset-x, 0px)), 0);
}
.headerUtilityPopoverItem {
    box-sizing: border-box;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--bj-control-radius, 8px);
    color: var(--header-ink);
    font-family: var(--bj-font-family);
    font-size: 15px;
    font-weight: var(--bj-type-control-weight, 500);
    line-height: var(--bj-type-control-line, 1.6);
    text-decoration: none;
}
.headerUtilityPopoverItem > span:not(.headerUtilityPopoverIconBox),
.headMyMenuFooter a > span:not(.headerUtilityPopoverIconBox) {
    font: inherit;
}
.headMyMenuLink.headerUtilityPopoverItem,
.headerReviewMenuLink.headerUtilityPopoverItem {
    height: 48px;
}
.headerUtilityPopoverItem:hover,
.headerUtilityPopoverItem:focus-visible {
    color: var(--header-ink);
    background: var(--bj-nav-hover-surface, #f3f1f0);
    outline: none;
}
.headerUtility #head_search {
    top: 52px;
    z-index: 140;
    border-color: var(--header-line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(25,39,49,.18);
}
.headerUtility #head_search {
    left: auto;
    right: -122px;
    transform: none;
}
.headerUtility #head_search::before,
.headerUtility #head_search::after,
.headerUtility #head_mymenu::before,
.headerUtility #head_mymenu::after {
    display: none !important;
}

#menu_r2 {
    height: 52px;
    border-bottom-color: var(--header-line, #f0eeec);
    background: var(--bj-canvas);
}
#menu_r2 .fixed_header_content_box {
    z-index: 121;
    height: 52px;
    border-bottom-color: var(--header-line, #f0eeec);
    background: var(--bj-canvas);
    background: var(--header-glass-bg);
    -webkit-backdrop-filter: var(--header-glass-filter);
    backdrop-filter: var(--header-glass-filter);
}
#menu_r2 .top_r2_block {
    width: 1000px;
    height: 52px;
    margin: 0 auto;
}
#menu_r2 .top_r2_menu {
    width: 100%;
    height: 52px;
    align-items: center;
}
#menu_r2 #top_r2_left {
    width: calc(100% - 126px);
    min-width: 0;
    height: 52px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 26px;
}
.headerAllMenuButton {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 24px;
    height: 40px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: var(--header-ink);
    background: transparent;
    cursor: pointer;
    transition: opacity .16s ease;
}
.headerAllMenuButton:hover,
.headerAllMenuButton:focus-visible,
.headerAllMenuButton[aria-expanded="true"] {
    color: var(--header-ink);
    background: transparent;
    outline: none;
}
.headerAllMenuButton:hover {
    opacity: .68;
}
.headerAllMenuButton:focus-visible {
    box-shadow: 0 0 0 2px var(--bj-nav-focus-ring, #cdc6c2);
}
.headerAllMenuIcon {
    width: 22px;
    height: 22px;
}
#menu_r2 .top_r2_menu_ul {
    width: 718px;
    height: 52px;
    flex: 0 1 718px;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0;
}
#menu_r2 .top_r2_menu_ul > li {
    width: auto;
    height: 52px;
    flex: 0 0 auto;
    justify-content: center;
}
#menu_r2 .top_r2_menu_ul > li::after {
    content: '';
    width: 22px;
    height: 2px;
    position: absolute;
    right: auto;
    bottom: 0;
    left: 50%;
    border-radius: 2px;
    background: var(--header-selection-accent);
    transform: translateX(-50%) scaleX(0);
    transition: transform .16s ease, background-color .16s ease;
}
#menu_r2 .top_r2_menu_ul > li.is-active::after,
#menu_r2 .top_r2_menu_ul > li.is-hovered::after,
#menu_r2 .top_r2_menu_ul > li:focus-within::after {
    background: var(--header-selection-accent);
    transform: translateX(-50%) scaleX(1);
}
#menu_r2 .top_r2_menu_ul > li > a {
    box-sizing: border-box;
    width: auto;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--header-ink);
    font-size: var(--bj-type-nav);
    font-weight: var(--bj-type-nav-weight);
    line-height: var(--bj-type-nav-line);
    letter-spacing: -.01em;
    text-align: center;
}
#menu_r2 .top_r2_menu_ul > li.is-active > a,
#menu_r2 .top_r2_menu_ul > li.is-hovered > a {
    color: var(--header-ink);
    font-weight: var(--bj-type-nav-weight);
}
#menu_r2 .top_r2_menu_ul > li > a:focus-visible {
    color: var(--header-ink);
    outline: none;
}
/* 결혼 쪽 여섯 칸과 그 밖(초대장·명함·인쇄 제작)을 나누는 가는 세로선 — PC 메뉴 줄에만.
   좁은 폭 규칙(li width:auto !important)이 폭을 0 으로 덮지 않게 선택자를 한 단계 더 좁힌다. */
#menu_r2 #top_r2_menu_ul > li.navGroupDivider.navGroupDivider {
    width: 1px !important;
    height: 14px;
    flex: 0 0 1px !important;
    align-self: center;
    margin: 0;
    padding: 0;
    background: var(--bj-line);
    scroll-snap-align: none;
}
#menu_r2 #top_r2_menu_ul > li.navGroupDivider::after {
    display: none;
}
@media (max-width: 767px) {
    #menu_r2 #top_r2_menu_ul > li.navGroupDivider.navGroupDivider {
        display: none !important;
    }
}
/* (2026-11-06 대표님 34536 «다닥다닥» · 카드 2639 «안 2») PC 메뉴 줄 — 718px 고정 폭에 space-between 이라 글자 사이가 18px 뿐이었다.
   칸 폭을 글에 맞추고(auto) 칸 사이를 공용 간격 토큰 한 단계로, 결혼 쪽과 그 밖(초대장·명함·인쇄 제작) 사이 세로선 양옆도 한 단계 더 띄운다.
   1040px 아래는 공용 폭 규칙(common/bojagi-design-system.css · 가로로 넘기는 메뉴)이 맡으니 손대지 않는다. 1280 에서 무료 샘플까지 65px 남는다. */
@media (min-width: 1040px) {
    #menu_r2 .top_r2_menu_ul {
        width: auto;
        flex: 0 1 auto;
        justify-content: flex-start;
        column-gap: var(--bj-space-1);
    }
    #menu_r2 #top_r2_menu_ul > li.navGroupDivider.navGroupDivider {
        margin: 0 var(--bj-space-1);
    }
}
/* 연하장 철 10칸은 태블릿 폭(744~899)에서 넘친다(810px 아래) — 그 폭만 글자 15px·여백 9px 로 한 줄에 둔다. */
@media (min-width: 744px) and (max-width: 899px) {
    #menu_r2 #top_r2_menu_ul.top_r2_menu_ul[data-nav-count="10"] > li > a {
        padding: 0 9px !important;
        font-size: 15px !important;
    }
}
#menu_r2 #top_r2_right {
    box-sizing: border-box;
    width: 126px;
    height: 52px;
    flex: 0 0 126px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}
.headerSampleEntry {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
}
.headerSampleEntry .btn_free_sample_box {
    width: auto;
    min-width: 0;
    height: 52px;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--header-ink);
    background: transparent;
    font-size: var(--bj-type-nav);
    font-weight: var(--bj-type-nav-weight);
    line-height: var(--bj-type-nav-line);
    letter-spacing: -.01em;
    white-space: nowrap;
}
.headerSampleEntry .btn_free_sample_box:hover,
.headerSampleEntry .btn_free_sample_box:focus-visible,
.headerSampleEntry .btn_free_sample_box.active {
    color: var(--header-ink);
    background: transparent;
    border: 0;
    outline: none;
}
.headerSampleEntry .btn_free_sample_box.active .headerSampleIconWrap::after {
    width: 22px;
    height: 2px;
    content: '';
    position: absolute;
    right: 1px;
    bottom: -9px;
    border-radius: 1px;
    background: currentColor;
}
.headerSampleEntry .btn_free_sample_box.is-count-updated .headerSampleIcon {
    animation: headerSampleCountFeedback .48s cubic-bezier(.22, .72, .2, 1);
}
@keyframes headerSampleCountFeedback {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-2px) scale(1.1); }
}
.headerSampleEntry .btn_free_sample_box:hover .headerSampleLabel,
.headerSampleEntry .btn_free_sample_box:focus-visible .headerSampleLabel {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.headerSampleEntry .headerSampleLabel {
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--bj-type-nav-weight);
    line-height: var(--bj-type-nav-line);
}
.headerSampleEntry .btn_free_sample_box.active .headerSampleLabel {
    font-weight: 700;
    text-decoration: none;
}
.headerSampleIconWrap {
    width: 24px;
    height: 24px;
    position: relative;
    display: grid;
    flex: 0 0 24px;
    place-items: center;
}
.headerSampleIcon {
    width: 22px;
    height: 22px;
    display: block;
}
/* 목록 붙은 줄 [샘플 담기 N]·[♡ 찜 N] 배지(common/catalog_rail.php · 대표님 11-10 41449)도 이 배지 한 벌 */
/* (2026-11-12 마실장 · 대표님 42954 손님 화면 14px) 숫자 = 배지·수량 글 단계 --bj-type-caption(14) · 종전 10px.
   동그라미는 종전(겉 18 · 테두리 2 · 안 14 · 숫자 10)과 같은 비율을 em 으로 — 안 높이 1.4em · 좌우 .4em · 테두리 2px 그대로.
   자리는 종전 가운데(그림 칸 오른쪽 끝 · 위에서 2px) 그대로 — 숫자가 10px 이면 종전 top:-7px · right:-9px 와 같은 값이 된다. 색 그대로. */
.headerSampleEntry .headerSampleCount.sample_pick_count,
.catalogRailActions .catalogRailActions__badge {
    box-sizing: border-box;
    min-width: calc(1.4em + 4px);
    height: calc(1.4em + 4px);
    display: grid;
    place-items: center;
    position: absolute;
    top: -.7em;
    right: calc(-.7em - 2px);
    padding: 0 .4em;
    border: 2px solid var(--bj-canvas);
    border-radius: calc(.7em + 2px);
    color: #fff;
    background: var(--bj-sample-accent, var(--bj-charcoal, #1a1a18));
    font-family: var(--bj-font-family, inherit);   /* 놓인 곳 글꼴과 무관하게 한 벌(머리말은 * 규칙 Pretendard · 목록은 Pretendard Variable 이었다) */
    font-size: var(--bj-type-caption, 14px);
    font-weight: var(--bj-type-action-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1.4em;
    text-align: center;
}
.headerSampleEntry .headerSampleCount[hidden],
.catalogRailActions .catalogRailActions__badge[hidden] {
    display: none !important;
}
.headerSampleEntry .ui-fixed_bottom_banner_free_sample {
    display: none !important;
}
.headerSampleEntry #sample_cards_box {
    top: 46px;
}

#all_menu_area {
    box-sizing: border-box;
    width: 188px;
    display: block;
    visibility: hidden;
    opacity: 0;
    min-height: 0;
    top: 58px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
#all_menu_area.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#all_menu_tbl {
    box-sizing: border-box;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
}
#all_menu_tbl .sub_menu_row,
#all_menu_tbl .all_menu_flyout__panel {
    box-sizing: border-box;
    width: 188px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--bj-line);
    border-radius: 13px;
    background: var(--bj-surface);
    box-shadow: 0 16px 38px rgba(25,39,49,.14);
}
#all_menu_tbl .sub_menu_row {
    position: relative;
    display: none;
    animation: bojagiMegaPanelIn .16s ease both;
}
#all_menu_tbl .sub_menu_row.is-visible {
    display: block;
}
@keyframes bojagiMegaPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
#all_menu_tbl .sub_menu_title {
    display: none;
}
#all_menu_tbl .sub_menu_title a {
    color: var(--header-ink);
    font-family: var(--bj-font-family);
    font-size: 14px;
    font-weight: 700;
}
#all_menu_tbl .all_menu_top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}
#all_menu_tbl .all_menu_top > a,
#all_menu_tbl .all_menu_flyout > a {
    min-height: 36px;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--bj-text);
    font-family: var(--bj-font-family);
    padding: 0 13px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
#all_menu_tbl .all_menu_top > a:hover,
#all_menu_tbl .all_menu_top > a:focus-visible,
#all_menu_tbl .all_menu_flyout:hover > a,
#all_menu_tbl .all_menu_flyout:focus-within > a {
    color: var(--header-ink);
    background: var(--bj-nav-hover-surface, #f1f1f1);
    outline: none;
}
#all_menu_tbl .all_menu_top > a.has-divider {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
#all_menu_tbl .all_menu_top > a.is-utility {
    color: var(--bj-text-muted);
    font-weight: 500;
}
/* 다른 칸이 주인인 목록으로 가는 입구 표시. 옛 .sub_menu_row span 규칙(굵게·아래 여백)을 되돌린다. */
#all_menu_tbl .all_menu_top > a .navLinkOut {
    margin: 0;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: inherit;
}
#all_menu_tbl .all_menu_divider {
    width: auto;
    height: 1px;
    margin: 6px 10px;
    background: var(--bj-line);
}
/* 위 메뉴 펼침의 옆 칸 — «청첩장과 함께» 아래 상품(표 common/header_menu9.php all_menu_links · 틀 card/head-menu2.php).
   여닫기는 CSS 만: 마우스 = :hover(터치 화면은 종전처럼 누르면 바로 목록으로) · 키보드 = :focus-within(줄에 포커스가 오면 열리고 Tab 이 안으로 들어간다).
   자리 = 펼침 판 오른쪽에 윗선을 맞춘다. 줄 높이에 맞추면 판 아래로 길게 내려가 낮은 창(1366×768)에서 끝 줄이 잘린다. */
#all_menu_tbl .all_menu_flyout {
    margin: 0; /* 옛 공용 규칙 div { margin: 0 auto }(card/css/css.css) 가 이 줄을 가운데로 줄이지 않게 — 다른 줄과 같은 너비 */
}
#all_menu_tbl .all_menu_flyout__panel {
    position: absolute;
    top: -1px; /* 펼침 판 테두리 두께만큼 — 두 판의 윗선을 맞춘다 */
    left: calc(100% + var(--bj-space-1));
    visibility: hidden;
    opacity: 0;
    /* 닫힐 때만 늦춘다 — 줄에서 옆 칸 위쪽으로 비스듬히 옮기면 다른 줄을 지나므로, 옮기는 동안(0.5초쯤으로 잡음) 닫히지 않게 */
    transition: opacity .16s ease .36s, visibility 0s linear .52s;
}
/* 줄과 옆 칸 사이(판 안쪽 여백·테두리·틈)를 잇는다 — 지나는 동안 :hover 가 끊기지 않게. 1px 은 옆 칸 테두리 두께 */
#all_menu_tbl .all_menu_flyout__panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: calc(var(--bj-space-2) + 1px);
}
@media (hover: hover) {
    #all_menu_tbl .all_menu_flyout:hover > .all_menu_flyout__panel {
        visibility: visible;
        opacity: 1;
        transition-delay: .06s; /* 스쳐 지날 때 안 열리게(위 펼침 메뉴와 같은 60ms) */
    }
}
#all_menu_tbl .all_menu_flyout:focus-within > .all_menu_flyout__panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s; /* 포커스가 오면 바로 — 다음 Tab 이 안으로 들어가야 한다 */
}

/* 삼선 버튼 전체 메뉴: 배경은 화면 폭으로, 콘텐츠 그리드는 1000px로 유지 */
.headerAllMenuPanel {
    box-sizing: border-box;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 52px;
    left: 0;
    z-index: 139;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--bj-line);
    border-radius: 0;
    background: var(--bj-canvas);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(27,38,49,.055);
    transform: translateY(-7px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    /* 판 높이 = 화면 − 헤더(열 때 스크립트가 잰다). 넘치면 판 안에서 스크롤하고, 끝에서 화면으로 번지지 않게 한다
       — 화면이 40px 넘게 스크롤되면 판을 닫는 규칙이 판 안 스크롤에 걸리지 않도록. */
    max-height: var(--header-all-menu-max-height, calc(100vh - 117px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.headerAllMenuPanel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (min-width: 768px) {
    /* 펼친 판 바탕 = 머리말 바탕(대표님 2026-11-09 «헤더 부분 바탕 컬러하고 똑같아야 돼») — 머리말 줄과 같은 변수라 계산값이 같다.
       그 위에 같은 색(--bj-header-surface) 한 겹을 깐다: 97% 유리색만 두면 판은 머리말 안쪽이라 흐림이 안 먹어 뒤 화면 글씨·사진이 메뉴 글자 뒤로 비친다. */
    .headerAllMenuPanel {
        background-color: var(--header-glass-bg);
        background-image: linear-gradient(var(--bj-header-surface, #fdfdfc), var(--bj-header-surface, #fdfdfc));
    }
    /* ☰ 를 마우스로 펼칠 때 — 단추(높이 40)와 판(줄 높이 52 아래) 사이 6px 를 지나는 동안 ‘벗어남’이 되지 않게 보이지 않는 다리 */
    .headerAllMenuButton {
        position: relative;
    }
    .headerAllMenuButton::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 6px;
    }
}
body.header-all-menu-open #menu_r2 .fixed_header_content_box {
    border-bottom-color: transparent;
}
.headerAllMenuPanelInner {
    box-sizing: border-box;
    width: 1000px;
    max-width: calc(100vw - 48px);
    margin: 0 auto;
    padding: 26px 0 30px;
}
/* 헤더 펼침과 같은 순서로 두 줄: 결혼 쪽 여섯 칸 / (가는 가로선) / 초대장·[연하장]·명함·인쇄 제작. 줄마다 같은 여섯 칸 격자. */
.headerAllMenuGrid {
    display: grid;
    grid-template-columns: repeat(var(--header-all-menu-columns, 6), minmax(0, 1fr));
    gap: 24px;
}
.headerAllMenuRowRule {
    height: 1px;
    margin: 22px 0;
    padding: 0;
    border: 0;
    background: var(--bj-line);
}
.headerAllMenuCompactShortcuts {
    display: none;
}
.headerAllMenuExperience {
    display: none;
}
.headerAllMenuMobileService {
    display: none;
}
.headerAllMenuGroup {
    min-width: 0;
}
.headerAllMenuGroupTitle {
    min-height: 20px;
    margin: 0 0 8px;
    color: var(--bj-brand-navy);
    font-family: var(--bj-font-family);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 20px;
}
.headerAllMenuGroupTitle a {
    color: var(--bj-brand-navy);
    font-family: var(--bj-font-family);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 20px;
    text-decoration: none;
}
.headerAllMenuGroupTitle a:hover,
.headerAllMenuGroupTitle a:focus-visible {
    color: var(--bj-nav-hover-ink, #1b2631);
    outline: none;
}
.headerAllMenuGroupTitle a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.headerAllMenuChildren {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 30px;
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.headerAllMenuChildren--columns-2 {
    grid-template-columns: minmax(0, 1fr);
}
.headerAllMenuChildItem {
    min-width: 0;
    margin: 0;
    padding: 0;
}
.headerAllMenuChildItem--divider-before {
    margin-top: 0;
}
.headerAllMenuDivider {
    display: none;
}
/* ☰ «청첩장과 함께» — 넓은 화면은 둘째 줄 맨 앞 자기 칸(청첩장 칸 바로 아래), 좁은 화면은 종전처럼 청첩장 칸 안의 한 줄(common/header_menu9.php) */
.headerAllMenuGroup--together {
    grid-column-start: 1;
}
@media (min-width: 768px) {
    .headerAllMenuChildItem--narrow-only {
        display: none;
    }
}
@media (max-width: 767px) {
    .headerAllMenuGroup--together {
        display: none;
    }
}
/* ☰ «봉투와 함께»(2026-11-10 대표님 41037~41045) — 넓은 화면은 둘째 줄 봉투 칸 바로 아래(칸 번호는 common/header_menu9.php 가 정함),
   좁은 화면은 «청첩장과 함께»처럼 봉투 칸 안의 한 줄 */
@media (min-width: 768px) {
    .headerAllMenuGroup--envelope_with {
        grid-column-start: var(--header-all-menu-column, auto);
    }
}
@media (max-width: 767px) {
    .headerAllMenuGroup--envelope_with {
        display: none;
    }
}
.headerAllMenuChildLink {
    height: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: var(--bj-text);
    font-family: var(--bj-font-family);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.35;
    text-decoration: none;
    transition: color .14s ease;
}
.headerAllMenuChildLink:hover,
.headerAllMenuChildLink:focus-visible {
    color: var(--bj-nav-hover-ink, #1b2631);
    background: transparent;
    outline: none;
}
.headerAllMenuChildLink:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.headerAllMenuShortcut {
    height: 30px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bj-text);
    font-family: var(--bj-font-family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-decoration: none;
    cursor: pointer;
}
.headerAllMenuShortcut:hover,
.headerAllMenuShortcut:focus-visible {
    color: var(--bj-nav-hover-ink, #1b2631);
    outline: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
/* 태블릿에서는 무료 샘플을 전체 메뉴에도 둔다. 모바일은 청첩장 칸에서 찾는다. */
@media (min-width: 768px) and (max-width: 1039px) {
    .headerAllMenuGrid {
        gap: 18px;
    }
    .headerAllMenuCompactShortcuts {
        display: flex;
        gap: 24px;
        margin-top: 22px;
        padding-top: 14px;
        border-top: 1px solid var(--bj-line);
    }
}
@media (max-width: 767px) {
    .headerAllMenuMobileService {
        display: block;
        padding: 0 18px;
        border-bottom: 1px solid var(--bj-line);
    }
    .headerAllMenuMobileService a {
        min-height: 48px;
        display: flex;
        align-items: center;
        color: var(--bj-text);
        font-family: var(--bj-font-family);
        font-size: 14px;
        text-decoration: none;
    }
    .headerAllMenuPanelInner {
        width: 100%;
        max-width: 100%;
        padding: 12px 18px 28px;
    }
    .headerAllMenuGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .headerAllMenuGroup {
        padding: 18px 0;
        border-bottom: 1px solid var(--bj-line);
    }
    .headerAllMenuRowRule {
        display: none;
    }
    .headerAllMenuGroupTitle,
    .headerAllMenuGroupTitle a {
        font-size: 16px;
    }
    .headerAllMenuChildren,
    .headerAllMenuChildren--columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        column-gap: 16px;
    }
    .headerAllMenuChildLink {
        height: auto;
        min-height: 44px;
        font-size: 14px;
    }
    .headerAllMenuExperience {
        display: block;
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid var(--bj-line);
    }
    .headerAllMenuExperience h4 {
        margin: 0 0 6px;
        color: var(--header-ink);
        font-family: var(--bj-font-family);
        font-size: 14.5px;
        font-weight: 600;
    }
    .headerAllMenuExperience ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .headerAllMenuExperience a,
    .headerAllMenuExperience button {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0;
        border: 0;
        color: var(--bj-text);
        background: transparent;
        font-family: var(--bj-font-family);
        font-size: 14px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .headerAllMenuExperience a:focus-visible,
    .headerAllMenuExperience button:focus-visible {
        outline: 2px solid var(--bj-nav-focus-ring, #cdc6c2);
        outline-offset: 2px;
    }
}
.fixed_header_bg_layer {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -1;
    background: rgba(18,28,35,.32);
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s;
}
.fixed_header_bg_layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
body.header-all-menu-open .fixed_header_bg_layer.is-open {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.bojagiMobileHeaderBack {
    display: none;
}
@media (max-width: 768px) {
    .headerUtility .headerUtilityPopover {
        width: min(220px, calc(100vw - 32px));
        left: auto;
        right: 0;
        transform: translateY(-4px);
    }
    .headerUtilityPopoverHost.is-open > .headerUtilityPopover {
        transform: translateY(0);
    }
    /* 이벤트의 PC 배너/분류 헤더는 출력하되 모바일에서만 감춘다. */
    #menu_r1.bojagiMobileEventHeader .join_conn_row_wrapper,
    #menu_r1.bojagiMobileEventHeader .header_top_fixed_banner_bar_area,
    #menu_r1.bojagiMobileEventHeader ~ #scroll_guide_line,
    #menu_r1.bojagiMobileEventHeader ~ #menu_r3,
    #menu_r1.bojagiMobileEventHeader ~ #menu_r4 {
        display: none !important;
    }
    /* 모바일 청첩장 랜딩은 PC 헤더 구조를 보존하고 좁은 화면에서만 카탈로그 헤더로 전환한다. */
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .join_conn_row_wrapper,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .header_top_fixed_banner_bar_area,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) ~ #scroll_guide_line,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) ~ #menu_r3,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) ~ #menu_r4 {
        display: none !important;
    }
    #menu_r1.bojagiMobileCompactHeader ~ #menu_r2 {
        display: none !important;
    }
    #menu_r1.bojagiMobileCompactHeader::after {
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background: var(--bj-shell-divider, #f0eeec);
        content: '';
        pointer-events: none;
    }
    #menu_r1.bojagiMobileCompactHeader .top_r1_block_wrapper {
        width: 100%;
        height: 62px;
        padding: 0 16px;
        position: relative;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiPcBrandBlock {
        width: 44px;
        flex: 0 0 44px;
    }
    #menu_r1.bojagiMobileCompactHeader[data-mobile-leading="back"] .bojagiPcBrandBlock {
        display: none;
    }
    #menu_r1.bojagiMobileCompactHeader[data-mobile-leading="back"] .bojagiMobileHeaderBack {
        width: 44px;
        height: 62px;
        display: inline-flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: flex-start;
        color: var(--bj-ink, #181817);
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiMobileHeaderBack .headerIcon {
        width: 24px;
        height: 24px;
    }
    #menu_r1.bojagiMobileCompactHeader .head_logo_row_block,
    #menu_r1.bojagiMobileCompactHeader .bojagiBrandHeading,
    #menu_r1.bojagiMobileCompactHeader .head_logo_row_block a {
        width: 44px;
        height: 62px;
    }
    #menu_r1.bojagiMobileCompactHeader #main_logo_img {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        background: url('/v5/dist/bojagi-simbol-black-logo.png') center / contain no-repeat;
        -webkit-mask: none;
        mask: none;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity {
        /* (QA #2982) 가운데 제목은 양쪽 같은 여백 — 오른쪽 아이콘 두 개(88)+여백(16)=104 를 양쪽에 · 320폭에서 장바구니 아이콘과 겹치던 것 */
        max-width: calc(100% - 208px);
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        overflow: hidden;
        color: var(--bj-ink, #181817);
        font-family: var(--bj-font-family);
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -.02em;
        text-align: center;
        text-overflow: ellipsis;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--catalog,
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--menu {
        display: inline-flex;
        margin: 0;
        padding: 0;
        align-items: center;
        gap: 7px;
        border: 0;
        background: transparent;
        color: var(--bj-ink, #181817);
        cursor: pointer;
        text-decoration: none;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--catalog > span:first-child,
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--menu > span:first-child {
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--menu:focus:not(:focus-visible) {
        outline: none;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--menu:focus-visible {
        outline: 2px solid var(--bj-nav-indicator, #1b2631);
        outline-offset: 4px;
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity__chevron {
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
    }
    #menu_r1.bojagiMobileCompactHeader .bojagiSharedHeaderIdentity--menu[aria-expanded="true"] .bojagiSharedHeaderIdentity__chevron {
        transform: translateY(2px) rotate(225deg);
    }
    #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--search,
    #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--review,
    #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--event,
    #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--support {
        display: none;
    }
    #menu_r1.bojagiMobileCompactHeader .headerUtility {
        margin-left: auto;
    }
    #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--account {
        order: 2;
    }
    #menu_r1.bojagiMobileCompactHeader .headerUtilityCart {
        order: 1;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .top_r1_block_wrapper {
        height: 56px;
        padding: 0 8px 0 12px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .bojagiPcBrandBlock {
        width: 48px;
        flex-basis: 48px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .head_logo_row_block,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .bojagiBrandHeading,
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .head_logo_row_block a {
        width: 44px;
        height: 56px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) #main_logo_img {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .bojagiSharedHeaderIdentity {
        max-width: calc(100% - 160px);
        font-weight: 700;
        letter-spacing: -.025em;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .bojagiSharedHeaderIdentity--catalog {
        height: 44px;
        padding: 0 12px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .bojagiSharedHeaderIdentity--catalog[aria-expanded="true"] .bojagiSharedHeaderIdentity__chevron {
        transform: translateY(2px) rotate(225deg);
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .headerUtility {
        width: 88px;
        height: 56px;
        flex: 0 0 88px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .headerUtilityItem {
        width: 44px;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .headerAccountMenu .head_mymenu_btn {
        position: relative;
    }
    #menu_r1:is(.bojagiMobileLandingHeader, .bojagiMobileNewyearCatalogHeader) .headerAccountMenu .head_mymenu_btn::after {
        width: 5px;
        height: 5px;
        position: absolute;
        right: 7px;
        bottom: 8px;
        border-radius: 50%;
        background: var(--bj-accent, #914552);
        content: '';
    }
    /* 반응형 이벤트 상세도 /m 이벤트 헤더의 계정 상태와 팝오버 표현을 공유합니다. */
    #menu_r1.bojagiMobileNewyearCatalogHeader .head_logo_row_block a {
        justify-content: center;
    }
    body #menu_r1.bojagiPcHeaderTop.bojagiMobileNewyearCatalogHeader .top_r1_block_wrapper {
        padding: 0 8px 0 12px;
    }
    #menu_r1.bojagiMobileNewyearCatalogHeader .bojagiSharedHeaderIdentity--catalog {
        color: var(--bj-brand-navy, #1b2631);
    }
    #menu_r1.bojagiMobileEventHeader:not(.bojagiMobileNewyearCatalogHeader) .top_r1_block_wrapper {
        padding-right: 4px !important;
        padding-left: 2px !important;
    }
    #menu_r1.bojagiMobileEventHeader[data-mobile-leading="back"] .bojagiMobileHeaderBack {
        align-items: center;
        justify-content: center;
    }
    #menu_r1.bojagiMobileEventHeader .headerAccountMenu .head_mymenu_btn {
        position: relative;
    }
    #menu_r1.bojagiMobileEventHeader .headerAccountMenu .head_mymenu_btn::after {
        width: 5px;
        height: 5px;
        position: absolute;
        right: 7px;
        bottom: 8px;
        border-radius: 50%;
        background: var(--bj-accent, #914552);
        content: '';
    }
    #menu_r1.bojagiMobileEventHeader .head_mymenu_btn[aria-expanded="true"] {
        background: transparent;
    }
    #menu_r1.bojagiMobileEventHeader .head_mymenu_btn .headerIcon {
        width: 22px;
        height: 22px;
    }
    #menu_r1.bojagiMobileEventHeader #head_mymenu {
        position: fixed;
        top: 70px;
        right: 8px;
        left: auto;
        transform: translateY(-4px);
    }
    #menu_r1.bojagiMobileEventHeader .headerAccountMenu.is-open > #head_mymenu {
        transform: translateY(0);
    }
    #menu_r1.bojagiMobileEventHeader .headMyLogoutLink,
    #menu_r1.bojagiMobileEventHeader .headMyLogoutLink:visited {
        color: var(--bj-accent, #914552) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .headerUtilityButton,
    .headerAllMenuButton,
    .headerAllMenuPanel,
    #all_menu_area,
    .fixed_header_bg_layer,
    #menu_r2 .top_r2_menu_ul > li::after,
    #all_menu_tbl .sub_menu_row {
        transition: none !important;
    }
}