/*=================================================
            REM 설정
=================================================*/
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

html, body{
    position: relative;

    font-family: "Pretendard Variable", "Pretendard", Sans-Serif;
    font-size: 16px;
    font-weight: 400;
    color: #222222;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1199.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 14px;
    }
}
/***** md *****/
@media (min-width: 768px) and (max-width: 991.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 13px;
    }
}
/***** sm *****/
@media (min-width: 576px) and (max-width: 767.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 12px;
    }
}
/***** xs *****/
@media (min-width: 100px) and (max-width: 575.98px) {
    html:not(.iframe),
    body:not(.iframe){
        font-size: 12px;
    }
}

/*=================================================
			텍스트 설정
=================================================*/
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    margin: 0;
}

h1,.h1{
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.56em;
}

h2,.h2{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6em;
}

h3,.h3{
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6em;
}

h4,.h4{
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.58em;
}

h5,.h5{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.56em;
}

h6,.h6{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.63em;
}

.display-1{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.57em;
}

.display-2{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5em;
}

.bold{
    font-weight: 700;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 100px) and (max-width: 767px) {
    h1,.h1{
        font-size: 2rem;
        font-weight: 700;
        line-height: 1em;
    }

    h2,.h2{
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.56em;
    }

    h3,.h3{
        font-size: 1.333rem;
        font-weight: 700;
        line-height: 1.63em;
    }

    h4,.h4{
        font-size: 1.167rem;
        font-weight: 700;
        line-height: 1.57em;
    }

    h5,.h5{
        font-size: 1.167rem;
        font-weight: 400;
        line-height: 1.57em;
    }

    h6,.h6{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5em;
    }

    .display-1{
        font-size: 1.167rem;
        font-weight: 500;
        line-height: 1.57em;
    }

    .display-2{
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5em;
    }
}

/*=================================================
			버튼, 색 설정
=================================================*/
/*****#####===== point-color =====#####*****/
.point-color-primary{
    color: #A12126 !important;
}

.point-color-secondary{
    color: #555555;
}

.point-color-secondarylight{
    color: #999999 !important;
}

.point-color-secondarydark{
    color: #222222 !important;
}

/*****#####===== point-btn =====#####*****/
.point-btn-primary {
    color: #ffffff !important;

    background-color: #A12126;
    border: 1px solid #A12126;
}

.point-btn-sub {
    color: #222222 !important;

    background-color: transparent;
    border: 1px solid #dddddd;
}

.point-btn-fill-sub {
    color: #ffffff !important;

    background-color: #999999;
    border: 1px solid #999999;
}

.point-btn-fill-subdark {
    color: #ffffff !important;

    background-color: #454545;
    border: 1px solid #454545;
}

.point-btn-subprimary {
    color: #A12126 !important;

    background-color: transparent;
    border: 1px solid #A12126;
}

.point-btn-primarylight {
    color: #A12126 !important;

    background-color: #FFF4F4;
    border: 1px solid #FFF4F4;
}

/*****#####===== point-btn =====#####*****/
[class*="point-btn"]{
    padding: 1.125rem;

    font-weight: 400;
    text-align: center;

    border-radius: 0.25rem;

    cursor: pointer;
}

[class*="point-btn"].btn-small{
    min-width: 7.125rem;
    padding: 0.875rem;
}

[class*="point-btn"].btn-submit{
    min-width: 10rem;
    padding: 1rem 0;

    font-weight: 500;

    border-radius: 0.5rem;
}

/*=================================================
			[Common] 공통
=================================================*/
.col-form-form .pretty {
    margin-bottom: 10px;
}
/*****#####===== 폼 =====#####*****/
.form-control{
    padding: 0.75rem 1rem;

    color: #222222;
}

.form-control:focus{
    color: #222222;

    border: 1px solid #777777;
}

.form-control::placeholder{
    color: #999999;
}

/*****##### 폼 타이틀 #####*****/
.form-title{
    margin-bottom: 0.5rem;

    font-weight: 500;
}

/*****##### 폼 그룹 #####*****/
.form-group-wrap:not(:last-child){
    margin-bottom: 3.75rem;
}

.form-group:not(:last-child){
    margin-bottom: 1.25rem;
}

/*****#####===== 셀렉트 박스 =====#####*****/
.form-box{
    background: #ffffff;

    border: 1px solid #DDDDDD;
    border-radius: 0.25rem;
}

.form-box .form-control{
    display: inline-block;

    height: 100%;
    padding: 0.625rem 1rem;

    border: none;
}

.form-box select.form-control{
    padding: 0.5rem 2rem 0.5rem 1rem;

    background: url('/front/data/img/app/icon_select.svg') center right no-repeat;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.srch_wrap .form-grid{
    display: grid;
    grid-template-columns: 1fr 2.75rem;
    gap: 0.625rem;
    align-items: center;
}

.form-sm{
    width: 14.75rem;
}

.form-md{
    width: 22.625rem;
}

.form-lg{
    width: 25.125rem;
}

.select-box{
	position: relative;

	background: #ffffff;

	border: 1px solid #cccccc;
	border-radius: 0.25rem;
}

.select-box select{
	width: 100%;
	height: auto;
	padding: 0.5rem 0.875rem;

	background: #ffffff;

	border: none;
	border-radius: 0.25rem;

	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.select-box .select-icon{
	position: absolute;
	top: 50%;
	right: 0.333rem;

	transform: translateY(-0.825rem);
}

/*****#####===== 드랍존 =====#####*****/
.form-dropzone-single[data-type="image"] .dropzone .dz-message,
.form-dropzone-single[data-type="image"] .dz-preview .dz-image{
    width: 7rem;
    height: 7rem;
}

.form-dropzone-single[data-type="image"] .dropzone.dz-started{
    margin-bottom: 0.438rem;
}

.form-dropzone-multi[data-type="image"] .dz-preview .dz-remove,
.form-dropzone-single[data-type="image"] .dz-preview .dz-remove{
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;

    width: 1.5rem;
    height: 1.5rem;

    text-indent: -999999rem;

    background: url('/front/data/img/app/icon_dz_remove.svg') center center no-repeat;
    background-size: contain;

    z-index: 999;
}

[class*="form-dropzone-multi"][data-type="text"] .dz-preview{
    margin: 0.875rem 0 1.25rem;
}

[class*="form-dropzone-single"][data-type="text"] .dz-preview .dz-preview{
    margin: 0;
}

.attach-item,
[class*="form-dropzone"][data-type="text"] .dz-preview .dz-details{
    padding: 0.5rem;
}

[class*="form-dropzone"][data-type="text"] .dz-preview .dz-remove{
    width: 24px;
    height: 24px;

    transform: translateY(-40%);
}

[class*="form-dropzone"][data-type="text"] .dz-details .dz-filename{
    width: 80%;
}

[class*="form-dropzone"][data-type="text"] .dz-preview .dz-details .dz-filename span{
    padding: 0.5rem 0 0 2.75rem;
}

.attach-item.file-name::before,
[class*="form-dropzone"][data-type="text"] .dz-filename span::before{
    top: 0.375rem;
    left: 0.417rem;
}

.attach-item .file-size, [class*="form-dropzone"][data-type="text"] .dropzone .dz-details .dz-size{
    width: 10%;
}

/*****#####===== 소형 이미지 =====#####*****/
.item-img[data-type="small"]{
    width: 2rem;
    margin-right: 0.5rem;
}

/*****#####===== 검색 버튼 =====#####*****/
.srch-btn{
    background: transparent;
    border: none;
}

/*****#####===== 태그 버튼 =====#####*****/
.tag-btn{
    display: inline-block;

    padding: 0.25rem 1rem;

    color: #555555;

    background: #ffffff;

    border: 1px solid #DDDDDD;
    border-radius: 4rem;
}

/*****##### :.active #####*****/
.tag-btn.active{
    color: #A12126;

    border: 1px solid #A12126;
}

.tag-wrap{
    overflow: hidden;
}

.menu-item{
    cursor: pointer;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 577px) and (max-width: 768px) {
    [class*="form-dropzone"][data-type="text"] .dz-preview .dz-remove{
        transform: translateY(-25%);
    }
}

/***** xs *****/
@media (min-width: 100px) and (max-width: 576px) {
    [class*="form-dropzone"][data-type="text"] .dz-preview{
        margin: 0.667rem 0 1.25rem;
    }

    [class*="form-dropzone"][data-type="text"] .dz-details .dz-filename{
        width: 70%;
    }

    .attach-item .file-size, [class*="form-dropzone"][data-type="text"] .dropzone .dz-details .dz-size{
        width: 20%;
    }
}

/***** sm - xs *****/
@media (min-width: 100px) and (max-width: 768px) {
    /*****#####===== 폼 =====#####*****/
    .form-lg,
    .form-md,
    .form-sm{
        width: 100%;
    }

    /*****#####===== 검색 버튼 =====#####*****/
    .form-box .srch_val{
         width: 87%;
     }

     .form-box .srch-btn{
         width: 10%;
     }

    /*****#####===== 태그 버튼 =====#####*****/
    .tag-btn{
        padding: 0.375rem 1rem;
    }
 }

/*****#####===== 페이지 =====#####*****/
 .page-wrap{
    padding: 3.25rem 0 7rem;
}

/*****#####===== content =====#####*****/
/*****##### 타이틀 #####*****/
.content-content-title{
    margin-bottom: 1.25rem;
}

/*****##### 항목 #####*****/
.content-item:not(:last-child){
    margin-bottom: 1.5rem;
}

.content-item-title{
    margin-bottom: 0.625rem;

    font-weight: 500;
}

/*****##### 테이블 컨텐츠 #####*****/
.content-table-wrap{
    border-top: 1px solid #999999;
    border-bottom: 1px solid #DDDDDD;
}

.content-table-wrap .content-item:not(:last-child){
    margin-bottom: 0;

    border-bottom: 1px solid #DDDDDD;
}

.content-table-wrap .item-title,
.content-table-wrap .item-content{
    padding: 1.75rem 1.5rem;
}

.content-table-wrap .item-title{
    height: 100%;

    font-weight: 400;

    background: #F9F9F9;
}

.content-table-wrap .item-content.form{
    padding: 1rem 1.5rem;
}

/*****#####===== view =====#####*****/
.view-title-wrap{
    margin: 0 0 2.5rem;
    padding-bottom: 2.5rem;

    border-bottom: 1px solid #dddddd;
}

/*****#####===== lists =====#####*****/
.lists-wrap[data-type="table"] .lists-header{
    background: #A12126;
}

/*****#####===== write =====#####*****/
.write-content-wrap:not(:last-child){
    margin-bottom: 3.75rem;
}

.write-content-box{
    padding: 1rem 1.25rem;

    border: 1px solid #dddddd;
    border-radius: 0.25rem;
}

.write-content-box:not(:last-child){
    margin-bottom: 0.5rem;
}

.content-write-title{
    margin-bottom: 1rem;
}

/*****#####===== .active-btn =====#####*****/
.active-btn{
    display: inline-block;
}

.active-btn input~.state label{
    padding: 0.875rem 1rem;

    font-size: inherit;
}

.active-btn input:checked~.state label {
    color: #A12126;

    background-color: #ffffff;

    border: 1px solid #A12126;
}

/*****##### button.active #####*****/
button.active-btn{
    padding: 0.75rem 0;

    background: #ffffff;

    border: 1px solid #DDDDDD;
    border-radius: 0.25rem;
}

button.active-btn.active{
    color: #A12126;

    border: 1px solid #A12126;
}

/*****#####===== 타이틀 =====#####*****/
.page-title-wrap .page-title{
    font-size: 1.75rem;
}

.title-wrap{
    margin: 4rem 0 2.5rem;

    color: #222222;
}

/*****#####===== 밑줄 타이틀 =====#####*****/
.underline-title-wrap{
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
}

.underline-title-wrap .underline-title{
    font-size: 1.25rem;
}

/*****#####===== 자세히보기 버튼 =====#####*****/
.detail-btn{
    padding: 0.625rem;

    background: #ffffff;

    border: none;
    border-radius: 0.5rem;
}

.detail-btn.small{
    padding: 0.375rem;

    border-radius: 0.25rem;
}

.detail-btn.small svg{
    width: 13px;
    height: 13px;
}

.section_best .custom-slick-arrow {z-index:100;}
.section_best .slick-track {display:flex;}
.section_best .slick-slide, 
.section_best .slide-wrap {height:inherit;}
.section_best .slick-slide > div,
.section_best .slide_best,
.section_best .slide_best .component-wrap,
.section_best .component-wrap > div {position:relative; height:100%;}
.section_best .component-wrap > div > div:nth-of-type(2) {padding-bottom:calc(32px + 1rem)!important; padding-top:0!important;}
.section_best .component-wrap .info-wrap:nth-last-child(1) {position:absolute; bottom:1rem; width:calc(100% - 2rem); /*0.625rem*/}
.section_best .component-wrap .custom-btn  {margin-left:0!important; margin-right:0!important;}


/*.best_step1 .slick-slide, 
.best_step1 .slick-wrap {display:block; padding:0!important;}
.best_step1 .ratio-box {border:1px solid orange;}
.best_step1 .ratio-box > .ratio-content {border:1px solid black;}
*/

#current {width:100%;}
.thumb_wrap {display:flex; flex-flow:row wrap; margin-left:-5px; margin-right:-5px;}
.thumb {
    border: 1px solid #ddd;
    border-radius: 7px;
    width:1280px;
    height:640px;
    margin: auto;   
    margin:0 5px;
	 margin-top:20px; 
    display: inline-block;
}



/*****#####===== 토글 버튼 =====#####*****/
.toggle-btn{
    position: absolute;
    top: -1.75rem;
    left: 50%;

    padding: 0;

    background: transparent;
    border: none;

    transform: translateX(-50%);
}

/*****#####===== 게시판 =====#####*****/
.board-lists-wrap{
    border-top: 1px solid #999999;
}

.board-lists-wrap .lists-item{
    padding: 2.125rem 0;

    border-bottom: 1px solid #E9E9E9;
}

/*****#####===== stepper =====#####*****/
.count-wrap{
    width: 9.75rem;
}

.count-btn{
    padding: 0.625rem 0.625rem;
}

.count-num{
    padding: 0.5rem 0.438rem;

    font-size: 0.875rem;
}

/*****#####===== 리스트 아이템 라인형 =====#####*****/
.line-list-item{
    padding: 1rem 0;

    border-bottom: 1px solid #dddddd;
}

.each-col:nth-child(1) .line-list-item,
.each-col:nth-child(2) .line-list-item{
    border-top: 1px solid #dddddd;
}

.line-list-item .item-image{
    width: 3rem;
    height: 3rem;
}

/*****#####===== break-all =====#####*****/
.break-all{
    word-break: break-all;
}

/*****#####===== 페이지네이션 =====#####*****/
.pagination-wrap .page-link,
.pagination-wrap .page-link:hover,
.pagination-wrap .page-item.active .page-link{
    padding: 0.438rem 0.875rem;
}

.pagination-wrap .page-item.angle-item .page-link{
    margin: 0 0.5rem;
    padding: 0.438rem 0.438rem 0.25rem;

    border: 1px solid #DDDDDD;
    border-radius: 0.25rem;
}

.pagination-wrap .page-item.active .page-link{
    color: #A12126;
}

/*****#####===== 안내문구 =====#####*****/
.desc-wrap{
    padding-top: 0;
}

/*****#####===== 약관 =====#####*****/
.every-terms-wrap .terms-wrap{
    padding: 0 0.75rem;
}

.every-terms-wrap {
    border: 1px solid #cccccc;
    border-radius: 0.333rem;
}

.all-terms-wrap{
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;

    border-bottom: 1px solid #cccccc;
}

.every-terms-wrap .terms-wrap {
    padding: 0 1rem;
}

.terms-item{
    margin-bottom: 0.75rem;
}

/*****#####===== 별점 =====#####*****/
.rating-star-wrap[data-size="small"] [class^='rating-star'].active:before,
.rating-star-wrap[data-size="small"] [class^='rating-star'].active~[class^='rating-star']:before{
    content: url('/front/data/img/app/star_sm_on.svg');
}

.rating-star-wrap[data-size="small"] [class^='rating-star']:before{
    content: url('/front/data/img/app/star_sm_off.svg');
}

/*****#####===== 요청서 그리드 =====#####*****/
.req-grid{
    display: flex;
    align-items: center;
}

.req-image-wrap{
    display: flex;

    max-width: 12.5rem;
    margin-right: 1rem;
}

.req-image-wrap .req-item-image{
    width: 6rem;
}

.req-image-wrap .req-item-image + .req-item-image{
    margin-left: 0.5rem;
}

/*****#####===== 탭메뉴 =====#####*****/
.nav-tabs{
    padding-bottom: 0.75rem;

    border-bottom: 2px solid #dddddd;
}

.nav-tabs .tab-item{
    padding-bottom: 1rem;

    color: #999999;
}

.nav-tabs .tab-item.active{
    color: #222222;

    border-bottom: 2px solid #A12126;
}

/*****##### 슬라이드 #####*****/
.tab-menu[data-type="slide"]{
    margin-bottom: 0;
    padding-bottom: 0;

    overflow: hidden;
}

.tab-menu[data-type="slide"] .each-row{
    flex-wrap: nowrap !important;
    overflow-x: scroll;
    overflow-y: hidden;
}

.tab-menu[data-type="slide"] .each-row::-webkit-scrollbar {
    display: none;
}

.tab-menu[data-type="slide"] .tab-item.active{
    color: #222222;
}

/*****#####===== 매니저 등급 =====#####*****/
.mgr-tag{
    display: inline-block;

    padding: 0.125rem 0.5rem 0;

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;

    background: #dddddd;
    border-radius: 0.25rem;
}

.mgr-tag.yellow{
    background: #FFDF6F;
}

.mgr-tag.pink{
    background: #FFC5D3;
}

.mgr-tag.black{
    background: #222222;
}

/*****#####===== 커스텀 이미지 =====#####*****/
.custom-image{
    padding: 1rem;

    background: #F4F4F4;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 100px) and (max-width: 768px) {
    /*****#####===== 컨텐츠 =====#####*****/
    .content-item-title{
        font-size: 1.25rem;
    }

    /*****#####===== 리스트 아이템 =====#####*****/
    .each-col:nth-child(2) .line-list-item{
        border-top: none;
    }

    /*****#####===== 카운트 =====#####*****/
    .count-num{
        font-size: 1.167rem;
    }
}

@media (min-width: 576px){
    /*****#####===== display =====#####*****/
    .d-sm-none {
        display: none!important;
    }
}

/*=================================================
			[Pretty] pretty
=================================================*/
/*****#####===== pretty =====#####*****/
.pretty .state label:before,
.pretty .state label:after,
.pretty.p-svg .state .svg{
    top: calc((0% - (100% - 0.75em)) - 3%);

    width: calc(1em + 8px);
    height: calc(1em + 8px);

    border-radius: 0.25rem;
}

.pretty.p-svg .state .svg{
    padding: 0.125rem;
}

.pretty.p-svg input:checked~.state label:before{
    background-color: #A12126;
    border-color: #A12126;
}

.pretty.p-default input:checked~.state label:before{
    border-color: #A12126;
}

.pretty.p-default input:checked~.state label:after{
    background-color: #A12126 !important;
}

.pretty-item .state{
    font-size: 1rem;
}

/*****#####===== pretty-item =====#####*****/
[data-type="app"] .pretty-item .state{
    font-size: 0.875rem;
}

/*=================================================
			[Alert] fancy-alert
=================================================*/
/*****#####===== 알럿 =====#####*****/
.fancy-alert [class*="point-btn"]{
    padding: 0.75rem;
}

.fancy-alert .alert-btn-wrap .btn.confirm_ok_btn{
    background-color: #A12126;
}

/*=================================================
			[Popover] popover
=================================================*/
.popover .arrow{
    display: none;
}

.popover-item{
    width: 10.625rem;
    padding: 1rem;

    text-align: left;

    background: #ffffff;

    border: none;
    border-radius: 0.5rem;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
}

[class*="form-dropzone"] .dz-message svg path:nth-child(2){
    fill: #A12126 !important;
}

/*=================================================
			[Nav] 네비게이션
=================================================*/
/*****#####===== 네비게이션 =====#####*****/
#gnb-wrap{
    background: #A12126;

    color: #ffffff;

    border-bottom: 1px solid #CCCCCC;
}

/*****##### 상단 영역 #####*****/
.gnb-top-wrap{
    padding: 0.75rem 0;
    border-bottom: 1px solid #dddddd;
}

.gnb-top-wrap .top-nav-link{
    font-size: 0.875rem;
    color: #dddddd;
}

.gnb-top-wrap .each-col:not(:last-child)::after{
    content: '';
    display: inline-block;

    position: absolute;
    top: 50%;
    right: 0;

    width: 1px;
    height: 0.875rem;

    background: #D9D9D9;
    transform: translateY(-50%);
}

/*****##### .gnb-wrap #####*****/
.gnb-wrap{
    padding: 0;
}

.gnb-wrap .logo-wrap{
    display: inline-block;

    max-width: 15rem;
    /*max-width: 5rem;*/
}

.gnb-wrap .left-menu-wrap{
    width: 80%;
}

.gnb-wrap .right-menu-wrap{
    width: 20%;
}

/***** 메뉴 항목 *****/
.gnb-wrap .nav-link{
    padding: 1.75rem 2rem;

    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;

    cursor: pointer;
}

/* .gnb-wrap .nav-link.active{
    color: #A12126;
} */

/***** 버튼 *****/
.gnb-wrap .mem-btn{
    display: inline-block;

    width: 7.5rem;
    padding: 0.875rem 0;

    font-weight: 700;
    text-align: center;
    color: #ffffff;

    background: #454545;
    border-radius: 5rem;
}

.gnb-wrap .mem-btn.active{
    color: #A12126;

    background: #FFF4F4;
}

/***** 알림 버튼 *****/
.noti-btn.active::after{
    content: '';
    display: inline-block;

    position: absolute;
    top: 0;
    right: 0.5rem;

    width: 0.375rem;
    height: 0.375rem;

    background: #ffffff;

    border-radius: 50%;
}

/***** 매장주문 모바일 버튼 *****/
.store-btn{
    display: inline-block;

    padding: 0.625rem 0.5rem 0.5rem;

    border: 1px solid #ffffff;
    border-radius: 0.375rem;
}

.store-btn svg{
    margin-top: -0.125rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 767px) and (max-width: 992px) {
    .gnb-wrap .nav-link{
        padding: 1.23rem 1.23rem /*1.75rem 1.75rem*/;
    }

    /***** 알림 버튼 *****/
    .noti-btn.active::after{
        right: 0.75rem;
    }
}

/***** sm - sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    #gnb-wrap{
        border-bottom: none;
    }

    .gnb-wrap{
        padding: 1rem 0;
    }

    .gnb-wrap .left-menu-wrap,
    .gnb-wrap .right-menu-wrap{
        width: auto;
    }

    /***** 알림 버튼 *****/
    .gnb-wrap .noti-btn.active::after{
        right: 0.875rem;
    }
}

/*****#####===== 모바일 네비게이션 =====#####*****/
#m-gnb-wrap{
    position: fixed;
    top:0;
    left:-100%;

    width: 100%;
    height: 100vh;

    background: #ffffff;

    overflow-y: scroll;

    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease-in-out;

    z-index: 1031;
}

/*****##### show #####*****/
#m-gnb-wrap.show{
    left: 0;
}

#m-gnb-wrap.show::-webkit-scrollbar{
    display: none;
}

.mo-gnb-wrap .mobile-top-close{
    cursor: pointer;
}

.mo-gnb-wrap .logo-wrap{
    width: 6rem;
}

/*****##### 상단 영역 #####*****/
.mo-gnb-wrap .gnb-top-wrap{
    margin-bottom: 1.75rem;
    padding: 0.875rem 0 2rem;
}

/***** 회원 버튼 *****/
.mo-gnb-wrap .mem-btn{
    display: block;

    margin-top: 1rem;
    padding: 1rem 0;

    font-weight: 700;
    text-align: center;
    color: #ffffff;

    background: #454545;
    border-radius: 0.5rem;
}

/***** : .active *****/
.mo-gnb-wrap .mem-btn.active{
    color: #A12126;

    background: #FFF4F4;
}

/*****##### 메뉴 항목 #####*****/
.mo-gnb-wrap .menu-wrap{
    margin-bottom: 1.667rem;
}

.mo-gnb-wrap .menu-wrap .item-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 1.75rem 0;
}

.mo-gnb-wrap .menu-wrap .item-title{
    font-size: 1.5rem;
    font-weight: 700;
}

/*****##### 하단 메뉴 항목 #####*****/
.mo-gnb-wrap .bottem-menu-wrap .item-wrap{
    margin-bottom: 1.667rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 100px) and (max-width: 991px) {
    #mgr-gnb-wrap{
        position: relative;

        width: 100%;
        height: auto;
        padding-bottom: 0;

        box-shadow: none;
    }

    #mgr-gnb-wrap .pc-gnb-wrap{
        display: none;
    }

    #mgr-gnb-wrap .m-gnb-wrap{
        display: block;
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;

        background: #00754a;
    }

    .mgr-gnb-wrap .logo-wrap{
        display: inline-block;
    }
}

/*=================================================
			[Footer] 푸터
=================================================*/
.footer-wrap{
    padding: 3.75rem 0;

    color: #ffffff;

    background: #A12126;

    border-top: 1px solid #D9D9D9;
}

.footer-menu{
    margin-bottom: 1.25rem;
}

.footer-menu .each-col:not(:last-child)::after{
    content: '';
    display: inline-block;

    position: absolute;
    top: 50%;
    right: 0;

    width: 1px;
    height: 0.875rem;

    background: #D9D9D9;
    transform: translateY(-50%);
}

.footer-wrap .info-wrap{
    margin-bottom: 1.25rem;
}

.footer-wrap .list-inline-item{
    margin-bottom: 0.25rem;
}

.footer-wrap .list-inline-item:not(:last-child){
    padding-right: 0.5rem;
}

.footer-wrap .each-line:not(:last-child):after{
    height: 0.875rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .footer-wrap{
        padding: 3.75rem 0 9rem;

        border-top: 1px solid #D9D9D9;
    }
}

/*=================================================
			[Component] 공통
=================================================*/
.component-wrap [class*="point-btn"]{
    border-radius: 0.5rem;
}

/*****#####===== 이미지 =====#####*****/
.component-wrap .item-image{
    margin-bottom: 0.5rem;
}

/*****#####===== 타이틀 =====#####*****/
.component-wrap .item-title{
    margin-bottom: 0.5rem;
}

/*****#####===== 자세히보기 버튼 출력 : .detail =====#####*****/
.component-wrap .item-image.detail{
    position: relative;
}

/*****##### 자세히보기 버튼 #####*****/
.component-wrap .detail-btn{
    position: absolute;
    bottom: 0.375rem;
    right: 0.375rem;
}

/*=================================================
			[Component] gds_item.php
=================================================*/
.component-wrap[data-comp="gds_item"]{
    margin-bottom: 1.875rem;
}

/*****#####===== 이미지 =====#####*****/
.component-wrap[data-comp="gds_item"] .item-image{
    background: #F4F4F4;
}

/*****#####===== 가격 =====#####*****/
.component-wrap[data-comp="gds_item"] .item-price{
    margin-bottom: 0.5rem;

    font-weight: 700;
}

/*=================================================
			[Component] gds_item.php
=================================================*/
.component-wrap[data-comp="sticker_item"]{
    margin-bottom: 1.875rem;
}

/*=================================================
			[Component] gds_list_item.php
=================================================*/
/*****#####===== 이미지 =====#####*****/
.component-wrap[data-comp="gds_list_item"]{
    margin-bottom: 3.333rem;
}

.component-wrap[data-comp="gds_list_item"] .item-image{
    margin-bottom: 0.625rem;

    background: #F4F4F4;
}

/*****#####===== 타이틀 =====#####*****/
.component-wrap[data-comp="gds_list_item"] .goods-title{
    display: inline-block;
}
.component-wrap[data-comp="gds_list_item"] .goods-title .point-color-secondary {color:#222222;}
.component-wrap[data-comp="gds_list_item"] .goods-title .page-h4 {font-size:14px}
.component-wrap[data-comp="gds_list_item"] .goods-title .font-w400 {font-weight:700;}

/*****##### 박스당 수량 #####*****/
.component-wrap[data-comp="gds_list_item"] .goods-box-num{
    display: inline-block;
}

.component-wrap[data-comp="gds_list_item"] .detail-btn{
    bottom: 8px;
    right: 8px;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 100px) and (max-width: 992px) {
    /*****##### 박스당 수량 #####*****/
    .component-wrap[data-comp="gds_list_item"] .goods-box-num{
        margin: 0.5rem 0;
    }

    /*****#####===== 가격 =====#####*****/
    .component-wrap[data-comp="gds_list_item"] .goods-price{
        margin: 0.75rem 0 0.5rem;
    }

    /*****##### 수량 #####*****/
    .component-wrap[data-comp="gds_list_item"] .count-wrap{
        width: 100%;
        margin-top: 0.5rem;
    }
}

/*=================================================
			[Component] gds_main_item.php
=================================================*/
/*****#####===== 이미지 영역 =====#####*****/
.component-wrap[data-comp="gds_main_item"] .custom-btn{
    margin-top: 0.625rem;
    padding: 0.25rem 0;

    border-radius: 0.25rem;
}

/*****#####===== 정보 영역 =====#####*****/
.component-wrap[data-comp="gds_main_item"] .info-wrap:not(:last-child){
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;

    border-bottom: 1px solid #dddddd;
}

.component-wrap[data-comp="gds_main_item"] .info-item{
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.625rem;
}

.component-wrap[data-comp="gds_main_item"] .info-title{
    color: #555555;
}

.component-wrap[data-comp="gds_main_item"] .info-content{
    word-break: break-all;
    word-wrap: break-word;
}


/*=================================================
			[Component] mgr_item.php
=================================================*/
.component-wrap[data-comp="mgr_item"]{
    padding: 2rem 0;

    border-bottom: 1px solid #dddddd;
}

.component-wrap[data-comp="mgr_item"] .mgr-row{
    align-items: flex-end;
}

/*****#####===== 이미지 =====#####*****/
.component-wrap[data-comp="mgr_item"] .mgr-image{
    width: 8rem;
    height: 8rem;
}

/*****#####===== 매니저 태그 =====#####*****/
.component-wrap[data-comp="mgr_item"] .mgr-tag{
    margin-bottom: 0.25rem;
}

/*****#####===== 타이틀 =====#####*****/
.component-wrap[data-comp="mgr_item"] .mgr-title{
    margin-bottom: 0.25rem;
}

/*****#####===== 정보 영역 =====#####*****/
.component-wrap[data-comp="mgr_item"] .mgr-info{
    margin-bottom: 0.375rem;
}

/*****##### 정보 항목 #####*****/
.component-wrap[data-comp="mgr_item"] .each-line:not(:last-child){
    margin-right: 0.625rem;
    padding-right: 0.375rem;
}

.component-wrap[data-comp="mgr_item"] [class*="point-btn"]{
    padding: 1rem 0;
}

.component-wrap[data-comp="mgr_item"] .mgr-btn-inner .each-col:not(:last-child) [class*="point-btn"]{
    margin-bottom: 0.625rem;
}

/*****#####===== 한 줄 소개 영역 =====#####*****/
.component-wrap[data-comp="mgr_item"] .intro-view-wrap{
    display: none;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 577px) and (max-width: 768px) {
    .component-wrap[data-comp="mgr_item"] .mgr-row{
        align-items: flex-start;
    }

    .component-wrap[data-comp="mgr_item"] .mgr-btn-inner{
        margin-top: 1rem;
    }

    .component-wrap[data-comp="mgr_item"] .mgr-btn-inner .each-col:not(:last-child) [class*="point-btn"]{
        margin-bottom: 0.625rem;
    }
}

/***** xs *****/
@media (min-width: 100px) and (max-width: 576px) {
    .component-wrap[data-comp="mgr_item"] .mgr-row{
        align-items: flex-start;
    }

    .component-wrap[data-comp="mgr_item"] .mgr-image{
        width: 5.833rem;
        height: 5.833rem;
    }
}

/*=================================================
			[Component] est_item.php
=================================================*/
/*****#####===== 이미지 =====#####*****/
.component-wrap[data-comp="est_item"] .mgr-image{
    width: 6.25rem;
    height: 6.25rem;
}

/*****#####===== 항목 =====#####*****/
.component-wrap[data-comp="est_item"] .item-desc{
    display: inline-block;

    min-width: 6.5rem;
    margin: 0 0.375rem 0.5rem 0;
}

.component-wrap[data-comp="est_item"] .item-title{
    margin-right: 0.375rem;
}

.component-wrap[data-comp="est_item"] .item-content{
    color: #555555;
}

/*****#####===== 버튼 =====#####*****/
.component-wrap[data-comp="est_item"] .btn-small{
    padding: 0.625rem 0;
}

.component-wrap[data-comp="est_item"] [class*="point-btn"]{
    border-radius: 0.25rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .component-wrap[data-comp="est_item"] .item-desc{
        min-width: 8rem;
    }

    .component-wrap[data-comp="est_item"] [class*="point-btn"]{
        margin-top: 0.625rem;
    }
}

/*=================================================
			[Component] review_item.php
=================================================*/
.component-wrap[data-comp="review_item"]{
    padding: 1.125rem 0;

    border-bottom: 1px solid #dddddd;
}

.component-wrap[data-comp="review_item"] .review-content-wrap{
    display: flex;
}

.component-wrap[data-comp="review_item"].active .review-content-wrap{
    display: block;
}


.component-wrap[data-comp="review_item"] .item-image-wrap{
    margin-right: 1.5rem;
}

.component-wrap[data-comp="review_item"].active .review-content-wrap .item-image-wrap{
    margin-right: 0;
}

.component-wrap[data-comp="review_item"] .item-image{
    width: 4.25rem;
    height: 4.25rem;

    border-radius: 0.25rem;

    overflow: hidden;
}


.component-wrap[data-comp="review_item"] .item-image-wrap .each-col:first-child ~ .each-col{
    /*display: none;*/
}

.component-wrap[data-comp="review_item"].active .item-image-wrap .each-col:first-child ~ .each-col{
    display: block;
}

.component-wrap[data-comp="review_item"].active .arrow_btn{
    transform: rotateZ(-180deg);
}

/*Best 답례떡*/
#bests_lists .gds_item > .row > div {flex-basis: 100%; }
#bests_lists .component-wrap[data-comp="gds_list_item"],
#bests_lists .gds_item {height:100%; padding-bottom:26px;}
#bests_lists .count-wrap {width:100%; margin-top:10px; font-size:14px;}
#bests_lists .count-wrap > .row {justify-content:center;}
#bests_lists .gds_item .info-wrap {padding-bottom: 0.5rem;}
#bests_lists .gds_item .goods-price,
#bests_lists .gds_item .goods-price .page-h4{font-size: 14px; color: #a12126;}
#bests_lists .gds_item > .row > div:last-child {position:absolute; bottom:3.333rem; width: calc(100% - 18px);}



.best_view .tteok-box {display:block; width:360px;}

@media (min-width: 100px) and (max-width: 992px) {
	.component-wrap[data-comp="gds_list_item"] .goods-price {margin:0;}
	#bests_lists .gds_item {padding-bottom:12px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.best_view .box-inner-wrap {width: calc(100vw - 350px)!important;}
}

@media (max-width: 768px) {
	.best_view .box-inner-wrap {width:100vw!important; height:330px!important;}
	.best_view .tteok-box {width:260px;}
}