/*
 * Your global styles here
 */
 html,
 body {
     height: 100%;
     color:var(--hmn-text-color);
     letter-spacing: -0.6px;
     line-height: 150%;
     
 }
 
 html {
     background: white;
 }
 
 body {
     margin: 0;
 }
 body *{
    letter-spacing: -0.6px;
    line-height: 150%;
 }
 body:not(.formfactor_Large){
    touch-action: pan-y;
 }
 
 .layout{
     padding:0 20px;
 }
 :root{
    --hmn-gray-0: #ffffff;
    --hmn-gray-5: #f8f8f8;
    --hmn-gray-10: #f0f0f0;
    --hmn-gray-20: #e4e4e4;
    --hmn-gray-30: #d8d8d8;
    --hmn-gray-40: #c6c6c6;
    --hmn-gray-50: #8e8e8e;
    --hmn-gray-60: #717171;
    --hmn-gray-70: #555555;
    --hmn-gray-80: #2d2d2d;
    --hmn-gray-90: #1d1d1d;
    --hmn-gray-100: #000000;

     --hmn-title-font-family : 'theJamsil';
     --hmn-content-font-family : 'notoSansKR';
     --hmn-main-color : #DA291C;
     --hmn-text-color : var(--hmn-gray-100);
     --hmn-text-second-color : #222222;
     --hmn-text-info-color : #9C4229;
     --hmn-radius-border : 10px;
     --hmn-page-title-font-size : 30px;
     --hmn-page-title-sub-color : #02B59A;
     --hmn-content-title-font-size : 24px;
     --hmn-content-subtitle-font-size : 18px;
     --hmn-content-default-font-size : 16px;
     --hmn-content-detail-font-size : 14px;
     --hmn-form-label-font-size : 14px;
     --hmn-form-input-font-size : 16px;
     --hmn-font-default-color : var(--hmn-gray-90);
     --hmn-font-body-color : var(--hmn-gray-70);

     --hmn-gnb-search-border-color: var(--hmn-gray-30);
     --hmn-gnb-search-font-size : 16px;
     --hmn-gnb-font-size : 20px;
     --hmn-gnb-menu-font-size : 14px;
     --hmn-gnb-menu-font-color : #333333;

     --hmn-border-color : var(--hmn-gray-40);
     --hmn-border-error-color : #EB003B;

     --hmn-button-border-radius : 6px;
     --hmn-button-brand-color : #333333;
     --hmn-button-brand-mute-color : #343B4C;
     --hmn-button-brand-font-color : #343B4C;
     --hmn-button-brand-disabled-color : var(--hmn-gray-20);
     --hmn-button-brand-disabled-font-color : var(--hmn-gray-5);
     --hmn-button-outline-border-color : var(--hmn-gray-40);
     --hmn-button-outline-text-color : var(--hmn-gray-70);
     --hmn-button-mute-background-color: #F4F4F4;
     --hmn-button-mute-text-color : #333333;
     --hmn-button-second-color : var(--hmn-gray-70);
     --hmn-button-accent-color : var(--hmn-main-color);
     --hmn-button-link-border-color : #DDDDDD;
     --hmn-button-text-color : #333333;
     --hmn-button-outline-hover : #F5F5F5;
     --hmn-button-brand-hover : #111111;
     --hmn-button-accent-hover : #A30B00;

     --hmn-content-button-font-size : 12px;

     --hmn-form-input-border-radius : 4px;
     --hmn-form-input-border-color : var(--hmn-gray-30);
     --hmn-form-input-label-color : #333333;
     --hmn-form-input-border-active-color : var(--hmn-main-color);
     --hmn-form-faux-border-color : #DDDDDD;
     --hmn-form-faux-disabled-border-color : #F5F5F5;
     --hmn-form-input-disabled-color : #F5F5F5;
     --hmn-form-input-disabled-font-color : #777777;

     --hmn-layout-width-size : 1440px;

     --hmn-dropdown-button-border-color : #333333;
     --hmn-dropdown-button-border-radius : 30px;
     --hmn-dropdown-footer-background-color : var(--hmn-gray-10);
     --hmn-dropdown-footer-button-refresh : #B4B4B4;
     --hmn-dropdown-footer-button-save : #333333;
     --hmn-dropdown-accent-color : #1BB293;
     --hmn-dropdown-footer-multiple-background-color:#F9F9FB;
     --hmn-dropdown-multiple-border-color : #E8E8E8;

     --hmn-pill-background-color : #EDEFF2;
     --hmn-pill-border-radius : 6px;
     --hmn-pill-text-color : #333;

     --hmn-scroll-bar-thumb-color : #D2D2D2;
     --hmn-scroll-bar-thumb-border-radius : 4px;

     --hmn-home-footer-text-color : #B3B3B3;

     --hmn-table-head-background-color : #F5F5F5;
     --hmn-table-head-text-color : #333333;
     --hmn-table-head-border-color : #666666;
     --hmn-table-border-color : #D1D1D1;
     --hmn-table-divider-border-color : #777777;
     --hmn-table-col-border-color : #d1d1d1;
     --hmn-table-text-color : var(--hmn-font-default-color);
     --hmn-table-col-background-color-hover : #DA291C0D;

     --hmn-content-date-text-color : #888888;
     --hmn-content-title-icon-color : #eaeaea;
     --hmn-content-divider : #D9D9D9;
     --hmn-product-name-color : #777777;
     --hmn-product-cost-color : #333333;
     --hmn-voc-registration : var(--hmn-main-color);
     --hmn-voc-processing : #1CA98C;
     --hmn-voc-complete : var(--hmn-gray-100);
     --hmn-voc-divider : var(--hmn-gray-30);

     --hmn-page-layout-border-color : #D1D1D1;
     --hmn-page-path-font-color : #666666;
     --hmn-slide-item-active : #343B4C;
     --hmn-slid-nav-button-color : #F5F5F5;
     --hmn-category-button-hover : #F5F5F5;
     --hmn-category-button-active : #343B4C;
     --hmn-third-categoty-background-color : #F5F5F5;
     --hmn-categoty-result-border-color : #D1D1D1;
     --hmn-product-id-text-color : #777777;
     --hmn-product-order-text-color : #333333;
     --hmn-product-before-price-text-color : #EC2027;

     --hmn-badge-main-color : var(--hmn-main-color);
     --hmn-badge-accent-color : #02B59A;
     --hmn-badge-mute-color : #444444;

     --hmn-cart-order-background-color : #F5F5F5;
     --hmn-cart-order-confirm-divider-color : #D1D1D1;
     --hmn-cart-order-text-color : #333333;

     --hmn-tab-button-default-background-color : #F5F5F5;
     --hmn-tab-button-default-text-color : #777777;

     --hmn-img-default-background : #F5F5F5;

     --slds-c-modal-radius-border : 0;
     --slds-c-modal-color-border : #E5E6EA;
     --slds-c-modal-sizing-border : 1px;
     --slds-c-modal-heading-font-weight : 400;
     --slds-c-modal-heading-font-size : 24px;
     --dxp-s-form-element-color-border : var(--hmn-border-color);
     --dxp-s-section-columns-max-width : unset;
     --dxp-s-component-wrapper-spacer-size : 0;
     --dxp-s-component-wrapper-spacer-size-mobile : 0;
 }
 community_layout-section.comm-section-container{
     padding: 0!important;
 }

.slds-input-has-icon_left-right .slds-input__icon_right,
.slds-input-has-icon_right .slds-input__icon{
    right:7px;
 }
*:not(input):focus-visible{
    outline: none;
}
 /*[S] lightning modal */
 .formfactor_Large .slds-modal_large,
 .formfactor_Large .slds-modal_medium,
 .formfactor_Large .slds-modal_small{
    width:100vw;
    overflow:hidden;
    overflow-x: auto;
 }
 .slds-modal_large .slds-modal__container{
    width:1200px;
 }
 .slds-modal_medium .slds-modal__container{
    width:800px;
 }
 .slds-modal_small .slds-modal__container{
    width:860px;
 }

 /* .slds-modal_large .slds-modal__container .modal-content_body{
    width:1200px;
 }
 .slds-modal_medium .slds-modal__container .modal-content_body{
    width:800px;
 }
 .slds-modal_small .slds-modal__container .modal-content_body{
    width:860px;
 } */


.slds-button.slds-modal__close{
    top: 6px;
    right: 6px;
    transform: translateY(100%);
    z-index: 1;
}
.slds-button.slds-modal__close .slds-button{
    width:40px;
    height:40px;
    background-image : url('/sfsites/c/cms/delivery/media/MCZ4HB7ZP3PVAWHM6FGHCLKNCPNM');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
.slds-button.slds-modal__close lightning-primitive-icon{
    display: none;
}
.slds-modal__header{
    padding: 37px 30px 24px;
    text-align: left;
    border:none;
}
.product-detail_header .slds-modal__header{
    padding-top: 40px;
    padding-bottom: 0;
}
.slds-modal__title {
    font-family: 'theJamsil';
}
.slds-modal__content{
    padding:0;
    overflow: hidden;
    overflow-x:auto;
    min-height:unset!important;
    max-height: unset!important;
}

.modal-content_header{
    padding: 0 30px 20px;
}
.modal-content_body{
    padding:0 30px;
    min-height: 30vh; /*임시*/
    max-height: 80vh; /*임시*/
    overflow: hidden;
    overflow-y: auto;
}
.slds-modal__footer{
    border:0;
    padding: 22px 30px 25px;
}
.slds-modal__footer:before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #d1d1d1;
    transform: translateY(-22px);
}
.modal_footer{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px
}
.modal_footer button{
    height: 50px;
    width: 250px;
    font-size: 18px;
    justify-content: center;
}
body:not(.formfactor_Large) .modal-content_body{
    height: calc(var(--vh, 1vh) * 100 - 68px - env(safe-area-inset-bottom, 0)); /* - 컨텐츠 안의 헤더 높이 - 푸터 높이*/
    min-height:unset;
    max-height:unset;
}
body:not(.formfactor_Large) .slds-modal__footer{
    padding: 20px;
}
/*[E] lightning modal */

/*[S] lightning modal 상품상세*/
body:not(.formfactor_Large) .slds-modal__container{
    margin:0;
    padding:0;
    justify-content: flex-start;
    width:100%;
}
body:not(.formfactor_Large) .slds-modal__close{
    position: absolute;
    right: 16px;
    top: 20px;
    transform:unset;
}
body:not(.formfactor_Large) .slds-modal__close .slds-button{
    width: 24px;
    height: 24px;
    background-size: contain;
}
body:not(.formfactor_Large) .slds-modal__header{
    padding: 20px 16px;
    min-height: 68px;
}
body:not(.formfactor_Large) .hmn-modal-header_title{
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-align: center;
}
/*[E] lightning modal 상품상세*/

/*[S] 컨텐츠 레이아웃*/
.content_layout{
    padding: 0 0px 66px;
    margin:0 auto;
    width : var(--hmn-layout-width-size);
}
.theme_layout:not([data-formfactor="Large"]) .content_layout{
    width:100%;
    padding: 0 16px 34px;
}
/*[E] 컨텐츠 레이아웃*/

 /*[S] 노티벨*/
 notifbell-notifications .buttonIcon{
    width: auto!important;
    height: auto!important;
    display: flex;
    flex-flow: column;
 }
 /* notifbell-notifications .buttonIcon:after{
    content:'알림';
    font-size: 11px;
    color: var(--hmn-gnb-menu-font-color);
    white-space: nowrap;
 } */
 notifbell-notifications .defaultIcon{
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 notifbell-notifications .countDot{
    background-color: var(--hmn-main-color);
    right: 5px!important;
    top: 5px!important;
    
    width:7.5px;
    height:7.5px;
 }
 notifbell-notifications .counterLabel{
    color: transparent!important;
 }
 notifbell-notifications button.closeButton svg.closeButton, 
 notifbell-notifications button.closeButton > div.closeButton{
    padding:0;
    margin:0;
 }
 notifbell-notifications c-notifications-panel .slds-dropdown{
    border: 1px solid #000!important;
    border-radius: 0px;
    box-shadow: 0px 4px 10px 0px #00000040;
 }
 notifbell-notifications c-notifications-panel .slds-dropdown:before{
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    transform: rotate(45deg);
    position: absolute;
    background-color: #fff;
    top: -4.5px;
    right: 10px;
    z-index: -1;
 }
 /*[E] 노티벨*/

 /*[S] 버튼*/
button{
    background-color: transparent;
    outline: none;
    border: 0;
    padding: 5px 16px;
    border-radius: var(--hmn-button-border-radius);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
}
button.outline,
.outline{
    border:1px solid var(--hmn-button-outline-border-color);
    color:var(--hmn-button-outline-text-color);
    border-radius: var(--hmn-button-border-radius);
    min-height:30px;
    padding: 2px 16px;
}
button.outline:hover,
.outline:hover{
    background-color: var(--hmn-button-outline-hover);
}


.slds-button:focus {
    box-shadow: none;
}

button.brand,
.brand{
    background-color: var(--hmn-button-brand-color);
    border:1px solid var(--hmn-button-brand-color);
    color: var(--hmn-gray-0);
    border-radius: var(--hmn-button-border-radius);
    padding: 5px 16px;
    min-height:30px;
}


.formfactor_Large button.brand:hover,
.formfactor_Large  button.brand:focus,
.formfactor_Large  button.brand:active,
.formfactor_Large  .brand:hover,
.formfactor_Large  .brand:focus,
.formfactor_Large  .brand:active{
    background-color: var(--hmn-button-brand-hover);
}
button:disabled{
    background-color: var(--hmn-form-input-disabled-color);
}
button.brand:disabled,
.brand:disabled{
    background-color: var(--hmn-button-brand-disabled-color);
    border:1px solid var(--hmn-button-brand-disabled-color);
    color:var(--hmn-button-brand-disabled-font-color);
}
button.brand-outline,
.brand-outline{
    border:1px solid var(--hmn-button-brand-color);
    border-radius: var(--hmn-button-border-radius);
    color : var(--hmn-button-brand-font-color);
    padding: 5px 16px;
    min-height:30px;
}

.formfactor_Large  button.brand-outline:hover,
.formfactor_Large  button.brand-outline:focus,
.formfactor_Large  button.brand-outline:active,
.formfactor_Large  .brand-outline:hover,
.formfactor_Large  .brand-outline:focus,
.formfactor_Large  .brand-outline:active{
    background-color:var(--hmn-button-outline-hover);
}
button.brand-outline:disabled,
.brand-outline:disabled{
    border:1px solid var(--hmn-button-brand-disabled-color);
    color:var(--hmn-button-brand-disabled-font-color);
}
button.mute{
    border:1px solid var(--hmn-button-outline-border-color);
    background-color:var(--hmn-button-mute-background-color);
    color:var(--hmn-button-mute-text-color);
    border-radius: var(--hmn-button-border-radius);
    padding: 5px 16px;
    min-height:30px;
}
.content_btn{
    font-size:var(--hmn-content-button-font-size );
}
.with-icon_btn{
    display: inline-flex;
    gap: 3px;
}
.with-icon_btn .icon_wrap{
    flex-shrink: 0;
    display: flex;
}
button.second,
.second{
    background-color: var(--hmn-button-second-color);
    border:1px solid var(--hmn-button-second-color);
    color: var(--hmn-button-brand-font-color);
    border-radius: var(--hmn-button-border-radius);
    padding: 5px 16px;
    min-height:30px;
}
.formfactor_Large  button.second:hover,
.formfactor_Large  button.second:focus,
.formfactor_Large  button.second:active,
.formfactor_Large  .second:hover,
.formfactor_Large  .second:focus,
.formfactor_Large  .second:active{
    background-color: var(--hmn-button-brand-mute-color);
    border:1px solid var(--hmn-button-brand-mute-color);
}
button.second:disabled,
.second:disabled{
    background-color: var(--hmn-button-brand-disabled-color);
    border:1px solid var(--hmn-button-brand-disabled-color);
    color:var(--hmn-button-brand-disabled-font-color);
}

button.accent2,
.accent2{
    background-color: var(--hmn-button-accent-color);
    border:1px solid var(--hmn-button-accent-color);
    color: var(--hmn-gray-0);
    border-radius: var(--hmn-button-border-radius);
    padding: 5px 16px;
    min-height:30px;
}

button.accent,
.accent{
    background-color: var(--hmn-button-accent-color);
    border:1px solid var(--hmn-button-accent-color);
    color: var(--hmn-gray-0);
    border-radius: var(--hmn-button-border-radius);
    padding: 5px 16px;
    min-height:30px;
}

.formfactor_Large  button.accent:hover,
.formfactor_Large  button.accent:focus,
.formfactor_Large  button.accent:active,
.formfactor_Large  .accent:hover,
.formfactor_Large  .accent:focus,
.formfactor_Large  .accent:active,
.formfactor_Large  button.accent2:hover,
.formfactor_Large  button.accent2:focus,
.formfactor_Large  button.accent2:active,
.formfactor_Large  .accent2:hover,
.formfactor_Large  .accent2:focus,
.formfactor_Large  .accent2:active{
    background-color: var(--hmn-button-accent-hover);
}
button.accent:disabled,
.accent:disabled{
    background-color: var(--hmn-button-brand-disabled-color);
    border:1px solid var(--hmn-button-brand-disabled-color);
    color:var(--hmn-button-brand-disabled-font-color);
}
button.accent-outline,
.accent-outline{
    border:1px solid var(--hmn-button-accent-color);
    border-radius: var(--hmn-button-border-radius);
    color : var(--hmn-button-accent-color);
    padding: 5px 16px;
    min-height:30px;
    background-color: var(--hmn-gray-0);
}
.formfactor_Large  button.accent-outline:hover,
.formfactor_Large  button.accent-outline:focus,
.formfactor_Large  button.accent-outline:active,
.formfactor_Large  .accent-outline:hover,
.formfactor_Large  .accent-outline:focus,
.formfactor_Large  .accent-outline:active{
    background-color:var(--hmn-button-outline-hover);
}
button.accent-outline:disabled,
.accent-outline:disabled{
    border:1px solid var(--hmn-button-brand-disabled-color);
    color:var(--hmn-button-brand-disabled-font-color);
}

button.refresh{
    padding:5px 14px;
}
button.link{
    min-height:30px;
    padding: 5px 16px;
    border:1px solid var(--hmn-button-link-border-color);
    border-radius: 0;
    color: var(--hmn-add-card-text-color);
    font-size: 13px;
}
button.link .ico-link_wrap{
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
}

.formfactor_Large  button.link:hover,
.formfactor_Large  button.link:focus,
.formfactor_Large  button.link:active,
.formfactor_Large  .link:hover,
.formfactor_Large  .link:focus,
.formfactor_Large  .link:active{
    background-color:var(--hmn-button-outline-hover);
}

 /*[E] 버튼*/

 /*[S] 뱃지*/
.badge{
    border : 1px solid var(--hmn-dropdown-button-border-color);
    border-radius: 6px;
    background-color: var(--hmn-gray-0);
    padding:0 5px;
    font-size: 11px;
    height:20px;
}
/*[E] 뱃지*/


 /*[S] 인풋*/
 .slds-form-element{
    margin-bottom:0;
 }
 label,
 .slds-form-element__label {
    display: block;
    font-size: 12px;
    font-weight: 600!important;
    color : var(--hmn-form-input-label-color);
    margin-bottom:10px;
    font-family: var(--hmn-content-font-family);
 }
 .order-date lightning-datepicker .slds-form-element__label{
    font-size: 13px;
    color: var(--hmn-gray-90);
    font-weight: 400 !important;
 }
 .input_column{
    display: flex;
    flex-direction: column;
 }
 input,
 textarea,
 .slds-combobox__input,
 lightning-datepicker .slds-input,
 .slds-form-element__control[type="month"] input{
    -webkit-appearance: none;
    border-radius: var(--hmn-form-input-border-radius);
    outline: none;
    box-shadow: none;
    border: 1px solid var(--hmn-form-input-border-color);
    /* padding: 5px 10px;
    font-size: 12px; */
    padding: 4px 7px;
    font-size: 16px;
    color: var(--hmn-gray-100);
    font-family: var(--hmn-content-font-family);
 }
 lightning-datepicker .slds-input,
 .slds-form-element__control[type="month"] input{
    padding: 5px 32px 5px 7px;
    font-size: 14px;
 }
 input:focus,
 textarea:focus,
 .slds-input:focus, 
 .slds-combobox__input.slds-has-focus, .slds-combobox__input:focus,
 lightning-datepicker .slds-input.slds-has-focus, lightning-datepicker .slds-input:focus{
    border-color: var(--hmn-form-input-border-color);
    box-shadow: none;
    outline: none;
 }
 input::placeholder,
 textarea::placeholder,
 .slds-combobox__input[data-value=''] span[part='input-button-value'],
 lightning-datepicker .slds-input.slds-has-focus, lightning-datepicker .slds-input::placeholder,
 .slds-form-element__control[type="month"] input::placeholder{
    color:#999999;
 }
 /* input:valid:not(:placeholder-shown),
 lightning-datepicker .slds-input:not(:placeholder-shown) 
 textarea:valid:not(:placeholder-shown),
 .slds-combobox__input:not([data-value]){
    border-color: var(--hmn-form-input-border-active-color);
 }*/
 input.error,
 textarea.error{
    border: 1px solid var(--hmn-border-error-color);
 }
 textarea{
    height: 300px;
    resize: none;
 }
 .input-box + .input-box{
    margin-top:14px;
 }
 input[type="checkbox"],
 input[type="radio"]{
    display: none;
 }
 input[type="checkbox"] + label,
 input[type="radio"] + label {
    display: flex;
    align-items: center;
    color: var(--hmn-form-input-label-color);
    padding-top: 0;
    font-size: var(--hmn-form-label-font-size);
    font-weight: 400!important;
    margin-bottom:0;
 }
 .faux{
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid var(--hmn-form-input-border-color);
    margin-right: 10px;
    background-color:var(--hmn-gray-0);
 }
 table input[type="checkbox"] + label .faux{
    width:22px;
    height:22px;
    border:1px solid var(--hmn-form-faux-border-color);
 }
 input[type="radio"] + label .faux{
    border-radius: 100%;
 }
 input[type="checkbox"]:checked + label .faux,
 input[type="radio"]:checked + label .faux{
    position:relative;
    border: 1px solid var(--hmn-form-input-border-active-color);
 }
 input[type="checkbox"]:checked + label .faux{
    background-color:var(--hmn-form-input-border-active-color);
    background-image: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.63159 5.48018L5.92738 10.3422L14.3684 0.789551" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
 }
 input[type="radio"]:checked + label .faux:after{
    content:'';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height:12px;
    border-radius: 100%;
    background-color:var(--hmn-form-input-border-active-color);
    transform: translateX(-50%) translateY(-50%);
 }
 input[type="checkbox"]:disabled + label .faux,
 input[type="checkbox"]:disabled:checked + label .faux{
    background-color: var(--hmn-form-faux-disabled-border-color);
 }
.slds-form-element__help,
.slds-assistive-text{
    display: none;
}
.slds-combobox_container .slds-combobox__input.fix-slds-input_faux{
    line-height:normal;
    color: var(--hmn-form-input-label-color);
    font-family: var(--hmn-content-font-family);
    
}


.slds-combobox_container .slds-input__icon-group lightning-icon{
    display: none;
}
.slds-combobox_container .slds-input__icon-group{
    width:24px;
    height:32px;
    margin-top: 0;
    transform: translateY(-50%);
    right: 7px;
    background-image: url('data:image/svg+xml,<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.2727 1.28561L5.49998 6.42847L0.727251 1.28561" stroke="%23666666" stroke-width="1.4" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    
}
.slds-combobox_container .slds-is-open .slds-input__icon-group{
    transform: translateY(-50%) rotate(180deg);
}
lightning-datepicker .slds-input,
.slds-form-element__control[type="month"] input{
    padding-right: 28px!important;
}
lightning-datepicker .slds-form-element__control > .slds-input__icon lightning-primitive-icon{
    display: none;
}
lightning-datepicker .slds-form-element__control > .slds-input__icon{
    width:14px;
    height:24px;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

lightning-datepicker .slds-form-element__control > .slds-input__icon button,
.slds-form-element__control[type="month"] input::-webkit-calendar-picker-indicator{
    width:100%;
    height:100%;
    background-image: url('data:image/svg+xml,<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="2.80005" width="16" height="16.2" rx="2" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.556 1V4.6" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.44397 1V4.6" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 8.19995H17" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.slds-form-element__control[type="month"] input::-webkit-calendar-picker-indicator{
    position:absolute;
    right:7px;
    width:20px;
    height:20px;
}
.order-date lightning-datepicker .slds-input{
    height: 36px;
    font-size: 14px;
    border-color:#ccc
 }
.filter-order .slds-combobox__input:not([data-value]){
    border:0
}
.filter-order .slds-combobox_container .slds-combobox__input.fix-slds-input_faux{
    border: 0;
    padding: 0 27px 0 0;
    font-size: 14px;
    
}
.filter-order .slds-combobox_container .slds-input__icon-group{
    right: 0;
}
.filter-order .slds-combobox_container .slds-input__icon-group{
    background-image: url('data:image/svg+xml,<svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_4808_26188)"><path fill-rule="evenodd" clip-rule="evenodd" d="M-1103.45 -555.333H120.545V1214.27H-1103.45V-555.333Z" fill="white"/><path d="M4.63635 4.66675L8.88635 8.94453L13.1364 4.66675" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_4808_26188"><rect width="17" height="14" fill="white"/></clipPath></defs></svg>');
}
input[type="number"]{
    text-align: center;
    font-size: 14px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input:disabled,
textarea:disabled{
    background-color: var(--hmn-form-input-disabled-color);
    color: var(--hmn-form-input-disabled-font-color);
}
body:not(.formfactor_Large) .slds-dropdown-trigger_click.slds-is-open .slds-dropdown{
    min-width:160px;
}
body:not(.formfactor_Large) .slds-listbox_vertical .slds-listbox__option{
    font-size: 12px;
}
 /*[E] 인풋*/

 /*[S] voc 인풋*/
 .voc_body .slds-combobox__input{
    height: 44px;
    padding: 4px 16px;
 }
 .voc_body input{
    height: 44px;
    padding: 4px 16px;
 }
 /*[E] voc 인풋*/

 /* [S] 필터 내 인풋 */
 .filter_wrap .slds-combobox_container .slds-combobox__input.fix-slds-input_faux {
    padding: 3px 7px;
    font-size: 14px;
    min-height: unset;
    height: 28px;

}
.filter_wrap input[type="text"]{
    padding: 4px 7px;
    font-size: 14px;
    min-height: unset;
    height: 28px;
}
.filter_wrap lightning-datepicker .slds-input{
   min-height: unset;
   height:28px;
}
.filter_wrap lightning-datepicker .slds-form-element__control > .slds-input__icon button{
    background-size: unset;
    background-image: url('data:image/svg+xml,<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.07167 15.4575C4.28596 15.6525 4.53587 15.75 4.8214 15.75H15.5362C15.8218 15.75 16.0717 15.6525 16.286 15.4575C16.5002 15.2635 16.6074 15.0368 16.6074 14.7773V4.72276C16.6074 4.46376 16.5002 4.23676 16.286 4.04176C16.1882 3.94887 16.0715 3.87519 15.9427 3.82509C15.814 3.77498 15.6757 3.74945 15.5362 3.75001H4.8214C4.53587 3.75001 4.28596 3.84751 4.07167 4.04251C3.85739 4.23651 3.75024 4.46326 3.75024 4.72276V14.7773C3.75024 15.0363 3.85739 15.2625 4.07167 15.4575Z" stroke="%23666666" stroke-width="1.2"/><path d="M7.36632 2.25V3.375M16.6074 6H3.75024M12.9913 2.25V3.375" stroke="%23666666" stroke-width="1.2" stroke-linecap="round"/><path d="M7.1349 10.7204L8.95016 12.3966C9.00128 12.4469 9.06284 12.4869 9.1311 12.5143C9.19935 12.5416 9.27286 12.5557 9.34713 12.5556C9.4982 12.5556 9.63052 12.5026 9.74409 12.3966L13.2236 9.14985C13.2773 9.10208 13.32 9.04459 13.3492 8.98089C13.3783 8.91719 13.3933 8.84862 13.3931 8.77935C13.3932 8.71003 13.3781 8.64143 13.3488 8.57772C13.3195 8.51402 13.2766 8.45656 13.2228 8.40885C13.1699 8.35816 13.1067 8.31795 13.0368 8.29063C12.967 8.2633 12.8919 8.24944 12.8161 8.24985C12.7447 8.24736 12.6734 8.25858 12.6068 8.28284C12.5402 8.30709 12.4796 8.34386 12.4288 8.39085L9.34713 11.2671L7.92882 9.97935C7.87771 9.92906 7.81614 9.88902 7.74789 9.86169C7.67964 9.83435 7.60613 9.82028 7.53186 9.82035C7.45759 9.82028 7.38408 9.83435 7.31583 9.86169C7.24758 9.88902 7.18601 9.92906 7.1349 9.97935C7.08101 10.0271 7.03812 10.0845 7.00883 10.1482C6.97953 10.2119 6.96447 10.2805 6.96454 10.3499C6.96454 10.4909 7.02132 10.6144 7.1349 10.7204Z" fill="%23666666"/></svg>');
}
.filter_wrap .slds-combobox_container .slds-input__icon-group{
    width:14px
}
.theme_layout:not([data-formfactor="Large"]) .filter_wrap .slds-combobox_container .slds-combobox__input.fix-slds-input_faux {
    padding: 2px 20px 2px 7px;
    font-size: 14px;
}


.theme_layout:not([data-formfactor="Large"]) input,
.theme_layout:not([data-formfactor="Large"]) .slds-combobox__input,
.theme_layout:not([data-formfactor="Large"]) textarea{
    padding: 0 16px;
    font-size: 16px;
    height: 50px;
}
.theme_layout:not([data-formfactor="Large"]) textarea{
    height:240px;
    padding: 14px 16px;
}
.theme_layout:not([data-formfactor="Large"]) c-hmn_voc-insert input,
.theme_layout:not([data-formfactor="Large"]) c-hmn_voc-insert .slds-combobox__input,
.theme_layout:not([data-formfactor="Large"]) c-hmn_voc-insert textarea,
.theme_layout:not([data-formfactor="Large"]) c-hmn_voc-insert lightning-datepicker .slds-input{
    border-color: #8E8E8E;
}

.theme_layout:not([data-formfactor="Large"]) .filter_content  input,
.theme_layout:not([data-formfactor="Large"]) .filter_content .slds-combobox__input{
    height:32px;
    font-size: 14px;
    padding: 0 10px;
}
.theme_layout:not([data-formfactor="Large"]) .input_date .slds-input::-webkit-clear-button,
.theme_layout:not([data-formfactor="Large"]) .input_date .slds-input::-webkit-inner-spin-button,
.theme_layout:not([data-formfactor="Large"]) .slds-input[type="date"]::-webkit-clear-button,
.theme_layout:not([data-formfactor="Large"]) .slds-input[type="date"]::-webkit-inner-spin-button{
    display: none;
}
.theme_layout:not([data-formfactor="Large"]) .input_date .slds-input::-webkit-calendar-picker-indicator,
.theme_layout:not([data-formfactor="Large"]) .slds-input[type="date"]::-webkit-calendar-picker-indicator{
    background:transparent;
    z-index:1;
}
.theme_layout:not([data-formfactor="Large"]) .input_date .slds-input:after,
.theme_layout:not([data-formfactor="Large"]) .slds-input[type="date"]:after{
    content : '';
    position: absolute;
    top:50%;
    right:14px;
    width:16px;
    height:18px;
    transform: translateY(-50%);
    z-index:0;
    background-repeat: no-repeat;
    background-size : contain;
    background-image: url('data:image/svg+xml,<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="2.7998" width="16" height="16.2" rx="2" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.5559 1V4.6" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.44409 1V4.6" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 8.2002H17" stroke="%23666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.theme_layout:not([data-formfactor="Large"]) .order-date .input_date .slds-input{
    height: 36px;
}
.theme_layout:not([data-formfactor="Large"]) .filter_wrap-m .slds-combobox__input{
    font-size: 14px;
    height:33px;
}
.theme_layout:not([data-formfactor="Large"]) .filter_wrap-m .filter-order{
    width:100%;
}


 /* [E] 필터 내 인풋 */

 /*[S] 카운터*/
 .counter{
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.count{
    width: 36px;
    height: 36px;
    padding:0;
    justify-content: center;
    border-radius: 0;
    background-color: var(--hmn-gray-0);
}
.counter input{
    width: 65px;
    border-radius: 0;
    height: 36px;
    border-color: #DDDDDD;
    border-top: 0;
    border-bottom: 0;
    text-align: center;
}
.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[data-formfactor="Large"] .counter .count:hover,
[data-formfactor="Large"] .counter .count:focus,
[data-formfactor="Large"] .counter .count:active{
    background-color:var(--hmn-button-outline-hover);
}

 /*[E] 카운터*/
 

 
 /*[S] 알럿, 컨펌*/
 .dialog{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 999999;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .dialog .dialog_container{
     position:relative;
     width:500px;
     background-color: #fff;
     z-index: 1;
     overflow: hidden;
     border-radius: var(--slds-c-modal-radius-border);
 }
 .dialog .dialog_body{
     min-height: 110px;
     display:flex;
     justify-content:center;
     align-items:center;
     flex-flow: column;
 }
 .dialog .dialog_body .title{
     color:var(--hmn-gray-100);
     font-size:18px;
     font-weight:bold;
     font-family: 'theJamsil';
 }
 .dialog .dialog_body .title + .desc{
     margin-top:20px;
 }
 .dialog .dialog_body .desc{
     align-items:center;
 }
 
 .dialog .btn_wrap{
     width:100%;
     height: 50px;
     display: flex;
     justify-content: center;
     border-top:1px solid var(--slds-c-modal-color-border);
 }
 .dialog .btn_wrap button{
     border:0;
     width:100%;
     height:100%;
     white-space: nowrap;
     overflow: hidden;
     background-color: #fff;
     font-size: 16px;
     font-weight: 300;
     color: var(--hmn-text-second-color);
     box-shadow: none;
     border:0;
     border-radius: 0;
     justify-content: center;
 }
 .dialog .btn_wrap button:hover,
 .dialog .btn_wrap button:focus{
     background-color: #fff;
     border-color:ADADAD;
     box-shadow: none;
     color: var(--hmn-text-second-color);
 }
 .dialog .dim{
     background-color: rgba(0,0,0, 0.5);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }
 .dialog .btn_wrap button + button{
    border-left: 1px solid var(--slds-c-modal-color-border);
 }

 body:not(.formfactor_Large) .dialog .dialog_container{
    width: calc(100vw - 60px);
 }
 body:not(.formfactor_Large) .dialog .dialog_body{
    min-height:167px;
 }
 body:not(.formfactor_Large) .dialog .btn_wrap button.btn_confirm{
    font-weight: 600;
 }
 body:not(.formfactor_Large) .dialog .dialog_container.small{
    width:500px;
 }
 /*[E] 알럿, 컨펌*/
 
 /*[S] 테이블*/
 table:not(.slds-datepicker__month){
    color: var(--hmn-table-text-color);
    font-size: 12px;
    border-bottom: 1px solid var(--hmn-table-col-border-color);
    border-top:1px solid var(--hmn-table-border-color );
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
 }
 table:not(.slds-datepicker__month) thead th,
 table:not(.slds-datepicker__month) thead td{
    background-color:var(--hmn-table-head-background-color);
    /* padding: 10px 7px; */
    text-align: center;
    min-height: 40px;
    font-size: 13px;
    color: var(--hmn-table-head-text-color);
    font-weight: 600;
 }
 table:not(.slds-datepicker__month) thead th{
    border-bottom: 1px solid var(--hmn-table-head-border-color);
 }
 table:not(.slds-datepicker__month) tbody td{
    /* padding: 14px 10px; */
    text-align: center;
 }
 /* table:not(.slds-datepicker__month) tbody tr:hover td{
    background-color:var(--hmn-table-col-background-color-hover);
 } */
 table:not(.slds-datepicker__month) thead th + th,
 table:not(.slds-datepicker__month) thead td + td,
 table:not(.slds-datepicker__month) tbody td + td{
    border-left: 1px solid var(--hmn-table-col-border-color);
 }
 table:not(.slds-datepicker__month) tbody tr + tr td{
    border-top:1px solid var(--hmn-table-col-border-color);
 }
 /* table:not(.slds-datepicker__month) tbody tr:nth-child(5n) td{
    border-top-color:var(--hmn-table-divider-border-color);
 } */
 table:not(.slds-datepicker__month) thead td .col,
 table:not(.slds-datepicker__month) thead th .col{
    padding: 14px 12px 10px;
 }
 table:not(.slds-datepicker__month) tbody td .col{
    text-align: left;
    padding: 14px 12px;
 }
 table:not(.slds-datepicker__month) tbody td .col,
 table:not(.slds-datepicker__month) thead td .col,
 table:not(.slds-datepicker__month) thead th .col{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
 }
 
 table:not(.slds-datepicker__month) tbody td .align-right{
    text-align: right;
 }
 table:not(.slds-datepicker__month) tbody td .align-left{
    text-align: left;
 }
 table:not(.slds-datepicker__month) .col-checkbox{
    display: flex;
    justify-content: center;
 }
.thead_group th:not([rowspan]){
    border-bottom-color: var(--hmn-categoty-result-border-color);
    border-left : 1px solid var(--hmn-categoty-result-border-color);
}
.thead_group:last-of-type th{
    border-bottom-color : var(--hmn-table-head-border-color);
}

.thead_group th.table-first_col{
    border-left:0;
}

 /* @media all and (max-width:1024px) {
    table:not(.slds-datepicker__month) thead{
        display:none;
    }
    table:not(.slds-datepicker__month) thead th + th,
    table:not(.slds-datepicker__month) thead td + td, 
    table:not(.slds-datepicker__month) tbody td + td,
    table:not(.slds-datepicker__month) tbody tr + tr{
        border-left:0;
    }
    table:not(.slds-datepicker__month) tbody tr,
    table:not(.slds-datepicker__month) tbody td{
        display: block;
    }
    table:not(.slds-datepicker__month) tbody td{
        text-align: left;
    }
    table:not(.slds-datepicker__month) tbody tr + tr td:not(:first-of-type){
        border-top:0;
    }
    table:not(.slds-datepicker__month) tbody td:before{
        content : attr(data-head);
        font-weight: bold;
    }
    table:not(.slds-datepicker__month) tbody .align-right{
        text-align: left;
    }
    table:not(.slds-datepicker__month) .col-checkbox{
        display: block;
    }
 } */
 /*[E] 테이블*/

 /*[S] 페이지 */
 /* .page{
    border-top:1px solid var(--hmn-page-layout-border-color);
} */
 .content_title{
    font-size: var(--hmn-page-title-font-size);
    font-weight: 600;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--hmn-gray-100);
    text-align: center;
}
.content_title-sub{
    color: var(--hmn-page-title-sub-color);
}
 /*[E] 페이지 */

 /*[S] 풀페이지 */
.full-page_layout{
    display: flex;
    height: calc(100vh - 80px);
    overflow: hidden;
}
.full-page_layout .filter_wrap{
    width: 190px;
    height: 100%;
    overflow-y: auto;
    background-color: #F8F8F8;
    padding:50px 25px;
}
.full-page_layout .filter_wrap .button_wrap{
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 42px 1fr;
    margin-top: 127px;
    font-size: 12px;
}
.full-page_layout .filter_wrap .button_wrap button.brand{
    padding:5px 25px;
}
.full-page_layout .filter_wrap lightning-combobox,
.full-page_layout .filter_wrap lightning-combobox .slds-form-element__control,
.full-page_layout .filter_wrap lightning-combobox lightning-base-combobox,
.full-page_layout .filter_wrap lightning-combobox lightning-base-combobox .slds-combobox_container{
    position: static;
}
.full-page_layout .filter_wrap lightning-combobox lightning-base-combobox .slds-combobox_container .slds-listbox{
    top: auto;
    width: 50px;
    left: auto;
    margin-top: 32px;
}

.full-page_layout .content_wrap{
    width: 100%;
    height:calc(100vh - 80px);
    flex: 1;
    position: relative;
    overflow: hidden;
    
}
.full-page_layout .content_overflow{
    overflow:hidden;
    overflow-y: auto;
    height:100%;
}
.full-page_layout .content_wrap.with-footer{
    padding-bottom:80px;
}
.full-page_layout .content_footer{
    width: 100%;
    height: 80px;
    background-color: #EEEEEE;
    position: absolute;
    bottom: 0;
    right: 0;
}
.page_header{
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px 0 24px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}
.page_title{
    font-family: var(--hmn-title-font-family);
    font-size: 30px;
    font-weight: 700;
    color : var(--hmn-text-color);
}
.page_info-text{
    font-style: normal;
    font-size: 12px;
    color : var(--hmn-text-info-color);
}
.table-button_wrap{
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 99px;
    background-color: #fff;
    height: 42px;
    z-index: 1;
}
.table-button_container-left,
.table-button_container-right{
    display: flex;
    align-items: center;
}
.full-page_layout table thead{
    position: sticky;
    top: 141px;
    z-index: 1;
}
.content-footer_wrap{
    display: flex;
    gap:55px;
    justify-content: space-between;
    padding:17px 30px;
}
.content-footer_container-left{
    display: flex;
    gap: 55px;
    font-size: 13px;
    white-space: nowrap;
}
.content-footer_container-left dt{
    color: var(--hmn-gray-60);
    
}
.content-footer_container-left dt:after{
    content:':';
    padding:0 4px;
}
.content-footer_container-left dd{
    color: var(--hmn-gray-70);
    font-weight: 600;
}
.content-footer_container-right{
    display: flex;
    gap: 24px;
    align-items: center;
}
.content-footer_wrap dl{
    display: flex;
}
.content-footer_container-right .button_wrap button{
    padding : 5px 25px;
}
.content-footer_container-right .button_wrap button + button{
    margin-left: 10px;
}

@media all and (max-width: 1500px) {
    .content-footer_container-left dt,
    .content-footer_container-left dd{
        max-width : 45px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.click_text {
    text-decoration: underline;
}

.click_text:hover {
    color: #02B59A;
    cursor: pointer;
}


body:not(.formfactor_Large) .filter_pannel-body .slds-dropdown-trigger_click.slds-is-open .slds-dropdown{
    min-width:100%;
}
body:not(.formfactor_Large) .filter_pannel-body .slds-listbox_vertical .slds-listbox__option{
    font-size: 12px;
}
 /*[E] 풀페이지*/

 /*[S] 홈 메인 컨텐츠*/
 .main_card{
    background-color:#fff;
    border-radius:14px;
    padding:25px 40px;
    height:100%;
 }
  /*[E] 홈 메인 컨텐츠*/

/*[S] GNB */
  .theme_layout[data-scrolling=true] .gnb_nav{
    position:fixed;
    top:0;
    left:0;
    background-color: #fff;
    z-index: 30;
}
.store_selector .slds-combobox__input{
    border: 1px solid var(--hmn-gray-60);
    border-radius: 20px;
    padding: 0 32px 0 12px;
    font-size: 12px;
    color: var(--hmn-text-second-color);
    line-height: 12px;
    font-size: 12px!important;
    color: var(--hmn-text-second-color);
}
/* .theme_layout[data-scrolling=true] .nav-product_list{
    gap: 60px;
} */
.theme_layout[data-scrolling=true] .gnb_nav .hidden-el{
    display: flex;
}
.theme_layout[data-scrolling=true] .gnb_nav-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--hmn-layout-width-size);
    margin: 0 auto;
}
.theme_layout[data-scrolling=true] .gnb_nav .hidden-el .search_input{
    width:260px;
}
.theme_layout[data-scrolling=true] .gnb_header{
    margin-bottom:80px;
}
.theme_layout[data-scrolling=true] .gnb_nav .menu_wrap{
    position: unset;
}
.gnb_layout .slds-combobox_container .slds-combobox__input.fix-slds-input_faux{
    height : 30px;
    min-height: 0;
}
/*[E] GNB */

/*[S] tab */
.tab_wrap{
    background-color: var(--hmn-tab-button-default-background-color);
    height: 62px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
}
.tab_wrap button{
    font-size: 18px;
    font-weight: 600;
    color: var(--hmn-tab-button-default-text-color);
    border-radius: 0;
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}
.tab_wrap button:hover{
    background-color: #E9E9E9;
    border-radius: 8px;
}
.tab_wrap button.is-active{
    background-color: var(--hmn-main-color);
    color:var(--hmn-gray-0);
    border-radius: 8px;
}
/*[E] tab */

/*[S] 수정해야할 클래스*/
.result_list{
    border-top:0!important;
}


/*[S] 풀페이지 가이드 공통 */
.comm_wrapper .page_layout{
    /* padding:24px 0 160px 0; */
    padding: 45px 0 160px 0;
}



/*[S] 중분류*/
.comm_wrapper .second-category{
    margin-top:40px;
}
.comm_wrapper .category_wrap{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #D1D1D1;
    border-left: 1px solid #D1D1D1;
}
.comm_wrapper .category_wrap button{
    height:45px;
    width:100%;
    display: block;
    padding: 0;
    border-bottom: 1px solid #D1D1D1;
    border-right: 1px solid #D1D1D1;
    text-align: center;
    width: 100%; 
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 20px;
    color:#333333;
    font-size: 14px;
}

.comm_wrapper .category_wrap button:hover{
    background-color: var(--hmn-category-button-hover);
}
.comm_wrapper .category_wrap button[data-active=true]{
    background-color: var(--hmn-category-button-active);
    color:#fff;

}
.comm_wrapper .category_wrap button.empty_wrap{
    border-top: 0;
    pointer-events: none;
}
/*[E] 중분류*/


/*[S] 결과 */
/* .content{
    margin-top:50px;
} */



.bold_title {
    font-size: 16px;
    font-weight: 600;
}
.default_title {
    font-weight: 400;
}

.comm_wrapper .category-result_wrap{
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 63px;
}
.comm_wrapper .filter_wrap{
    position: sticky;
    top: 90px;
    /* height: calc(100vh - 90px); */
    height: fit-content;
    z-index: 2;
}
.comm_wrapper .filter_title{
    font-weight: 600;
}
.comm_wrapper .filter_wrap dl{
    border-bottom: 1px solid var(--hmn-categoty-result-border-color);
}

.comm_wrapper .filter_wrap dt:not(:empty){
    font-weight: 600;
    padding-top: 24px;
    font-size: 14px;
}
.comm_wrapper .filter_wrap dl:first-child dt{
    padding-top:0;
}
.comm_wrapper .filter_wrap dd{
    padding: 10px 0 24px;
}
.comm_wrapper .ico-info{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(2px);
    width:18px;
    height:18px;
    padding : 0;
    margin-left: 5px;
}
.comm_wrapper .filter-button_wrap{
    margin-top: 40px;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    height: 36px;
}
.comm_wrapper .filter-button_wrap button{
    justify-content: center;
    padding:0;
    gap:3px;
}
.comm_wrapper .search-input_wrap,
.comm_wrapper .category-input_wrap{
    position: relative;
}
.comm_wrapper .search-input_wrap input,
.comm_wrapper .category-input_wrap{
    width:100%;
    padding-right: 28px;
    padding-left: 7px;
    min-height: unset;
    height:28px;
}
.comm_wrapper .category-input_wrap:hover,
.comm_wrapper .category-input_wrap:active,
.comm_wrapper .category-input_wrap:focus{
    background-color:#fff!important;
}
.comm_wrapper .btn_search,
.comm_wrapper .category_search{
    position: absolute;
    top: 50%;
    right: 7px;
    padding: 0;
    transform: translateY(-50%);
}
.comm_wrapper .category_search{
    transform: translateY(-58%);
}
.comm_wrapper .category-input_wrap{
    cursor: pointer;
}
.comm_wrapper .category-input_wrap p{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color : var(--hmn-text-color);
    text-align: left;
}

.comm_wrapper .scroll_table {
    border-top: 0px;
}

.comm_wrapper .top-fix_row {
    position: sticky;
    top: 0;
}

.comm_wrapper .bottom-fix_row {
    position: sticky;
    bottom: 0;
}


.comm_wrapper .result_layout{
    padding-bottom:17px;
}

.comm_wrapper .result_layout header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.comm_wrapper .header_filter{
    display: flex;
    align-items: center;
    gap: 20px;
}
.comm_wrapper .header_filter .btn_group{
    display: flex;
    align-items: center;
    gap: 10px;
}


.comm_wrapper .btn_display{
    width: 30px;
    height: 24px;
    padding: 0;
}
.comm_wrapper .result_list .col{
    padding:20px 10px;
}
.comm_wrapper .flex-col{
    display: flex;
    text-align: left;
}
.comm_wrapper .result_list table tbody tr td:first-child .col{
    padding-left: 0;
}
.comm_wrapper .col_product-name{
    position: relative;
    display: grid;
    grid-template-columns: 154px minmax(0, 1fr);
    gap:20px;
}
.comm_wrapper .product_content{
    width: 100%;
    display: flex;
    flex-flow: column;
}
.comm_wrapper .img_wrap{
    width: 154px;
    height:154px;
    background-color: #F5F5F5;

    display: flex;
    justify-content: center;
    align-items: center;
}
.comm_wrapper .product_name{
    width:100%;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    white-space: normal;
    -webkit-box-orient: vertical;
}
.formfactor_Large .comm_wrapper .product_name:hover,
.formfactor_Large .comm_wrapper .product_name:active,
.formfactor_Large .comm_wrapper .product_name:focus{
    color:#02B59A;
}


.comm_wrapper .event-badge_wrap{
    position: absolute;
    top: 10px;
    left: 10px;
    justify-content: flex-end;
    display: flex;
    gap:3px;
}
.comm_wrapper .item-id{
    order : 3;
    color: var(--hmn-product-id-text-color);
    font-size: 13px;
}
.comm_wrapper .item-state{
    display: flex;
    gap: 5px;
    align-items: center;
    order : 1;
    margin:11px 0 15px 0;
}
.comm_wrapper .item-name{
    order:2;
}
/* .comm_wrapper .item-order{
    display: flex;
    gap : 14px;
} */
.comm_wrapper .item-order{
    order:4;
    color: var(--hmn-product-order-text-color);
    font-size: 14px;
    display: flex;
    gap : 14px;
}
.comm_wrapper .item-order span{
    font-weight: 600;
}
.comm_wrapper .dynamic-cell{
    display: none;
}
.comm_wrapper .item-schedule{
    order : 5;
    color: var(--hmn-product-order-text-color);
    font-size: 14px;
    margin-top: 5px;
}
.comm_wrapper .item-schedule span{
    font-weight: 600;
}
.comm_wrapper .result_list table.display-table .item-schedule{
    display: none;
}
.badge-upper-temp{
    border-color: var(--hmn-badge-main-color);
    color: var(--hmn-badge-main-color);
}
.badge-lower-temp{
    border-color: var(--hmn-badge-accent-color);
    color: var(--hmn-badge-accent-color);
}
.badge-dc{
    border-color: var(--hmn-badge-mute-color);
    color: var(--hmn-badge-mute-color);
}
.badge-event{
    border-color: var(--hmn-badge-main-color);
    background-color: var(--hmn-badge-main-color);
    color: var(--hmn-gray-0);
}
.badge-new{
    border-color: var(--hmn-badge-accent-color);
    background-color: var(--hmn-badge-accent-color);
    color: var(--hmn-gray-0);
}
.badge-fc{
    border-color: #6255F1;
    background-color: #6255F1;
    color: #fff;
    display: block;
}
.badge-md{
    border-color: #C09264;
    background-color: #C09264;
    color: #fff;
    display: block;
}
.badge-plc{
    border-color: #130000;
    background-color: #000;
    color: #fff;
}
.comm_wrapper .result_list{
    margin-top:13px;
    border-top: 1px solid var(--hmn-categoty-result-border-color);
}
.comm_wrapper .event-badge_wrap .badge{
    display: flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height:30px;
    border-radius: 100%;
}
.comm_wrapper .price-col{
    font-size: 16px;
    font-weight: 600;
}
.comm_wrapper .before-price{
    font-weight: 400;
    color: var(--hmn-product-before-price-text-color);
    font-size: 14px;
    text-decoration: line-through;
    min-height: 21px;
}
.comm_wrapper .item-unit{
    font-size: 14px;
    margin-bottom: 14px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comm_wrapper .unit-counter_container{
    margin-bottom: 35px;
}
.comm_wrapper .control-col{
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: -21px;
}
.comm_wrapper .btn_cart,
.comm_wrapper .btn_fav{
    padding: 3px;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;


}


.comm_wrapper .colgroup-product-name{
    width:640px;
}
.comm_wrapper .colgroup-price{
    width:160px;
}
.comm_wrapper .result_list table.display-card thead{
    display: none;
}
.comm_wrapper .result_list table.display-card thead td + td, 
.comm_wrapper .result_list table.display-card tbody td + td{
    border-left: none;
}
.comm_wrapper .result_list table.display-card .img_wrap{
    /* display: block; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.comm_wrapper .result_list table thead td .col,
.comm_wrapper .result_list table thead th .col{
   padding: 9px 0px 10px;
   font-weight: 600;
   line-height: 125%;
}
.comm_wrapper .result_list table tbody td .col{
   padding: 14px 12px;
   line-height: 125%;
}


.comm_wrapper .result_list table.display-table tbody tr td:last-child .col{
    padding-right: 5px;
}
.comm_wrapper .result_list table.display-table .col{
    font-size: 13px;
    padding : 10px 6px;
}
.comm_wrapper .result_list table.display-table .col-checkbox{
    padding-right: 5px;
}
.comm_wrapper .result_list table.display-table .col_product-name{
    display:block;
}
.comm_wrapper .result_list table.display-table .img_wrap,
.comm_wrapper .result_list table.display-table .item-order,
.comm_wrapper .result_list table.display-table .item-unit{
    display: none;
}
.comm_wrapper .result_list table.display-table .event-badge_wrap{
    position: unset;
    width: auto;
}
.comm_wrapper .result_list table.display-table .item-id,
.comm_wrapper .result_list table.display-table .item-state,
.comm_wrapper .result_list table.display-table .item-name{
    order : unset;
}
.comm_wrapper .result_list table.display-table .dynamic-cell{
    display: table-cell;
}
.comm_wrapper .result_list table.display-table colgroup col.dynamic-cell{
    display: table-column;
}
.comm_wrapper .result_list table.display-table .item-state{
    margin: 0 0 0 5px;
    gap: 3px;
}
.comm_wrapper .result_list table.display-table .product_name{
    font-size: 14px;
    -webkit-line-clamp: 1;
}
.comm_wrapper .result_list table.display-table .event-badge_wrap{
    justify-content: center;
    margin-left: 3px;
}
.comm_wrapper .result_list table.display-table .product_content{
    flex-flow: row;
    flex-wrap: wrap;
}
.comm_wrapper .result_list table.display-table .event-badge_wrap .badge{
    width:auto;
    height:20px;
    border-radius: 6px;
}
.comm_wrapper .result_list table.display-table .colgroup-product-name{
    width: 536px;
}
.comm_wrapper .result_list table.display-table .colgroup-qty{
    width: 75px;
}
.comm_wrapper .result_list table.display-table .colgroup-order{
    width: 67px;
}
.comm_wrapper .result_list table.display-table .colgroup-unit{
    width: 65px;
}
.comm_wrapper .result_list table.display-table .colgroup-price{
    width: 106px;
}
.comm_wrapper .result_list table.display-table .dynamic-cell .col{
    text-align: center;
}
.comm_wrapper .result_list table.display-table .price-col{
    font-weight: 400;
}
.comm_wrapper .result_list table.display-table .price-col.col{
    text-align: right;
}
.comm_wrapper .result_list table.display-table .before-price{
    min-height: unset;
}
.comm_wrapper .result_list table.display-table .unit-counter_container,
.comm_wrapper .result_list table.display-table .control-col{
    margin-bottom: 0;
}

.comm_wrapper .result_list table .fc-comment_tr td{
    border-top: 0;
    padding-left: 206px;
    text-align: left;
    /* transform: translateY(-10px); */
}

.comm_wrapper .result_list table .fc-comment_tr .comment_wrap {
    border-top: 1px dashed #D1D1D1;
    border-radius: 6px;
    padding: 15px 0;
}

.comm_wrapper .result_list table .fc-comment_tr td .comment_wrap p{
    display: flex;
    gap: 4px;
    font-size: 14px;
    padding-bottom: 5px;
}

.comm_wrapper .result_list table .fc-comment_tr td .comment_wrap p:first-child{
    
}

.comm_wrapper .result_list table .ico-fc{
    margin-top:-2px;
    flex-shrink: 0;
}
.comm_wrapper .result_list table.display-table .fc-comment_tr{
    display: none;
}

.tr-total_summary{
    background-color: #767676;
}
/*[E] 결과 */

/*[S] 카테고리 팝오버 */
.comm_wrapper .category_popover{
    position: absolute;
    z-index:3;
    bottom: -5px;
    transform: translateY(100%);
    border: 1px solid var(--hmn-dropdown-button-border-color);
    /* border-radius: var(--hmn-radius-border); */
    background-color:#fff;
    background-color: #fff;
    min-width: 175px;
    max-width:480px;
    overflow: hidden;

}
.comm_wrapper .popover_content{
    padding: 20px;
}
.comm_wrapper .popover_footer{
    background-color: var(--hmn-dropdown-footer-background-color);
    padding: 10px 15px;
    
}
.comm_wrapper .popover_footer_btn-layout{
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top:7px;
}
.comm_wrapper .popover_footer .hmn_dropdown_btn{
    height: 22px;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    
    padding-top: 0;
    padding-bottom: 0;
    border:0;
}
.comm_wrapper .popover_btn-refresh{
    background-color: var(--hmn-dropdown-footer-button-refresh);
}
.formfactor_Large .comm_wrapper .popover_btn-refresh:hover,
.formfactor_Large .comm_wrapper .popover_btn-refresh:focus,
.formfactor_Large .comm_wrapper .popover_btn-refresh:active{
    background-color: #696969;
}
.comm_wrapper .popover_btn-save{
    background-color: var(--hmn-dropdown-footer-button-save);
}
.formfactor_Large .comm_wrapper .popover_btn-save:hover,
.formfactor_Large .comm_wrapper .popover_btn-save:focus,
.formfactor_Large .comm_wrapper .popover_btn-save:active{
    background-color: #111111;
}
.comm_wrapper .popover_content .radio_column + .radio_column{
    margin-top:12px;
}

.comm_wrapper .popover_content-multiple{
    display: flex;
    min-width: 480px;
    height:340px;
}
.comm_wrapper .popover_content-multiple ~ .popover_footer{
    background-color: var(--hmn-dropdown-footer-multiple-background-color);
}
.comm_wrapper .popover_content-multiple > section{
    flex:1;
}
.comm_wrapper .multiple_section{
    height:100%;
    padding: 10px 0;
}
.comm_wrapper .multiple_section + .multiple_section{
    border-left: 1px solid var(--hmn-dropdown-multiple-border-color);
}
.comm_wrapper .overflow_block{
    height:100%;
    overflow:hidden;
    overflow-y:auto;
}
.comm_wrapper .overflow_block::-webkit-scrollbar {
    width: 4px;
}
   
.comm_wrapper .overflow_block::-webkit-scrollbar-track {
    background: transparent;
}

.comm_wrapper .overflow_block::-webkit-scrollbar-thumb {
    background: var(--hmn-scroll-bar-thumb-color); 
    border-radius: var(--hmn-scroll-bar-thumb-border-radius);
}

.comm_wrapper .popover_select a,
.comm_wrapper .popover_select label{
    width: 100%;
    display: block;
    font-size: 13px;
    color: #222222;
    padding: 6px 15px 8px;
    text-decoration: none !important;
}

.comm_wrapper .popover_select a:hover,
.comm_wrapper .popover_select a:focus,
.comm_wrapper .popover_select a.is-active{
    background-color:var(--hmn-dropdown-accent-color);
    color:#fff;
}

.comm_wrapper .popover_select label{
    display: flex;
    gap: 10px;
    cursor: pointer;
}
.comm_wrapper .popover_select label:hover{
    color:var(--hmn-dropdown-accent-color);
}
.comm_wrapper .popover_select .faux{
    width: 12px;
    height: 12px;
    border: 0;
    margin:0;
}
.comm_wrapper .category_popover input[type="checkbox"]:checked + label{
    color : var(--hmn-dropdown-accent-color);
}
.comm_wrapper .category_popover input[type="checkbox"]:checked + label .faux{
    content:'';
    background-color:transparent;
    background-image : url('/sfsites/c/cms/delivery/media/MCO3PUDSMYOJGZBCQTKVLHU65L6M');
    background-repeat: no-repeat;
    background-position: center;
}

.comm_wrapper .popover_checkbox_wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.comm_wrapper .pill{
    display: inline-block;
    background-color:var(--hmn-pill-background-color);
    border-radius: var(--hmn-pill-border-radius);
    padding:10px;
    font-size: 11px;
    color: var(--hmn-pill-text-color );
}
.formfactor_Large .comm_wrapper .pill:hover,
.formfactor_Large .comm_wrapper .pill:active,
.formfactor_Large .comm_wrapper .pill:focus{
    background-color: #E1EAF4;
}
.comm_wrapper .btn_pill-delete{
    display: inline-flex;
    align-items: center;
    width: 9px;
    height: 9px;
    padding: 0;
    margin-left: 7px;
}

.comm_wrapper .line_change {
    text-wrap: auto;
    padding: 0px !important;
    white-space: normal !important;
    word-break: auto-phrase;
}
/*[E] 카테고리 팝오버*/


/*[S] 버튼 */
.excel_btn {
    border: 1px solid #35A46F;
    color: #1A8853;
}


.remove_btn {
    border: 1px solid #DA291C;
    color: #DA291C;
}

.function_btn {
    border: 1px solid #333333;
    color: #333333;
}

.content_img {
    width: 18px;
    margin-right: 3px;
}
/*[E] 버튼 */

.content_empty {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.content_empty span {
    color: #777777;
}

/*[S] Swiper */
:root{
    --swiper-pagination-bottom : unset;
    --swiper-pagination-top : 20px;
    --swiper-pagination-fraction-color:#FFFFFF;
}
.swiper .swiper-pagination-fraction{
    left: unset !important;
    right:16px;
    width: fit-content;
    background: #0000004D;
    border-radius: 16px;
    font-size: 12px;
    padding: 0 15px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2px;
}
.hmn-swiper-bullets .swiper-pagination-bullet{
    width:10px;
    height:10px;
    margin : 0 3px;
    background:#343B4C33;
}
.hmn-swiper-bullets .swiper-pagination-bullet-active{
    background:#343B4C;
}
/*[E] Swiper */

.tooltip_box {
    position: absolute;
}

.tooltip_box .pull {
    background-color: #fff;
    position: relative;
    width: 100px;
    height: 34px;
    color: #000;
    border-radius: 6px;
    bottom: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border: 1px solid #666666;
}

.tooltip_box .pull:before{
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    transform: rotate(45deg);
    position: absolute;
    bottom: -4.5px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
}

.tooltip_box .pull-m {
    right: 30px;
}

.cell_accent {
    background-color: #F5EDE6;
}

/*[S] 홈 점포 셀렉트 */
.home_header .hmn-home-store_list > button{
    width: 22px;
    height: 22px;
    border-color: var(--hmn-gray-40);
    background-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.92855 1.42871L4.99998 5.35728L1.07141 1.42871" stroke="%23555555" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}
.home_header .hmn-home-store_list lightning-primitive-icon{
    display: none;
}
/*[E] 홈 점포 셀렉트 */
.empty_wrap{
    border-top: 1px solid #D1D1D1;
    padding-top: 16px;
}
.hmn-empty_block{
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--hmn-gray-70);
    padding:40px 0px;
}

/*[S] 모바일 필터 판넬*/
.filter_pannel{
    position: fixed;
    top: 0;
    right: -100vw;
    z-index: 20;
    width: 100%;
    height: 100vh;
    background-color:  #000000B2;
    opacity:0;
    transition: opacity .2s;
}
.filter_pannel .filter_pannel-body{
    position: absolute;
    top: 0;
    right: -220px;
    width: 220px;
    height: 100%;
    padding: 50px 30px;
    background-color: #fff;
    transition: right .2s ease;
    transition-delay: 0.2s;
}
.filter_pannel .filter_pannel-body header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #222222;
    padding-bottom: 17px;
    margin-bottom: 20px;
}
.filter_pannel .filter_pannel-body header h3{
    font-size: 20px;
    font-family: var(--hmn-title-font-family);
}
.filter_pannel[data-open=true]{
    right : 0;
    opacity : 1;
}
.filter_pannel[data-open=true] .filter_pannel-body{
    right : 0;
}
.filter_pannel[data-closing=true] .filter_pannel-body{
    right: -220px;
    transition-delay: 0s;
}
.filter_pannel .filter_content{
    height: calc(100vh - 150px);
    overflow: hidden;
    overflow-y: auto;
}
.filter_pannel .filter_content > dl{
    border-bottom: 1px solid #D1D1D1;
    padding :20px 0;
}
.filter_pannel .filter_content > dl:first-of-type{
    
    padding-top : 0;
}
.filter_pannel .filter_content > dl > dt{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color:#1d1d1d;
    
}
.filter_pannel .filter-button_wrap{
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    margin-top:33px;
}
.filter_pannel .filter-button_wrap button{
    padding : 0px;
    height:36px;
    display: flex;
    justify-content: center;
}
.filter_pannel .filter-button_wrap button.brand{
    width: 100%;
    justify-content: center;
    gap: 3px;
    font-size: 12px;
}
.filter_pannel .categories-col{
    display: flex;
    flex-flow: column;
    gap: 7px;
}
/*[E] 모바일 필터 판넬*/

/*[S] 약관동의 */

.version_wrap .slds-combobox__input{
    height: 44px;
    padding: 4px 16px;
}
body:not(.formfactor_Large) .version_wrap .slds-combobox__input{
    height: 48px;
}
.term-modal_header .slds-modal__header{
    display: flex;
    align-items: center;
    gap: 10px;
}
/*[E] 약관동의 */