/* 공통텍스트 */
.sub-title{
    font-size: 36px;
    letter-spacing: -2.2px;
}
.sub-txt{
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.025em;
    margin-top: 10px;
    font-family: 'Noto Sans KR', sans-serif;
}
.product.ko .price:after, .detail-product.ko .price:after{content:'원'}
.detail-product.ko .price:before{content:'가격 '}

.product.en .price:before, .detail-product.en .price:before{content:'₩';}



/* -------------------- 베스트 추천 메뉴 -------------------- */
.best_wrap .tabmnu{
    display: flex;
    justify-content: center;
    gap:20px;
    margin: 60px auto 80px;
}
.best_wrap .tabmnu li{
    display: flex;
    align-items:center ;
    justify-content: center;
    width: 167px;
    height: 45px;
    margin: unset;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.05em;
    border: 2px solid #000;
    border-radius: 21px;
    box-sizing: border-box;
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
}
.best_wrap .tabmnu li.on{
    color: #fff;
    background-color: #1c1c1c;
}

.best_wrap .slider-wrap{position: fixed; left: -100000000px; width: 100%;}
.best_wrap .slider-wrap.active{position: unset; left: unset;}

.best_wrap .btn-slider-box {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 40px;
  }

  .best_wrap .btn-slider-box .btn-slider {
    display: block;
    width: 35px;
    height: 35px;
    overflow: hidden;
  }

  .best_wrap .btn-slider-box .btn-slider.btn-slider-prev {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .best_wrap .btn-slider-box .btn-slider.btn-slider-prev .arrow {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .best_wrap .btn-slider-box .btn-slider.btn-slider-next {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

  .best_wrap .btn-slider-box .btn-slider .arrow {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(//cdn.dessert39.com/www/img/main/btn-slider-arrow.svg);
  }

  .best_wrap .btn-slider-box .progress-bar {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: calc(100% - 100px);
    max-width: 1200px;
    height: 2px;
    background-color: #d3d3d2;
    background-image: -webkit-gradient(linear, left top, right top, from(#555), to(#555));
    background-image: linear-gradient(to right, #555, #555);
    background-repeat: no-repeat;
    background-size: 0 100%;
    -webkit-transition: background-size 0.3s;
    transition: background-size 0.3s;
  }

  .best_wrap .menu-slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    height: 309px;
  }

  .best_wrap .menu-slider .slider-box {
    /* margin-right: 50px; */
  }

  .best_wrap .menu-slider .slider-box > a {
    display: block;
    max-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .best_wrap .menu-slider .slider-box .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .best_wrap .menu-slider .slider-box .inner .bg {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 100%;
  }

  .best_wrap .menu-slider .slider-box .inner img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: block;
    height: 100%;
    width: auto;
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }

  .best_wrap .menu-slider .slider-box .inner .tit {
    width: 220px;
    margin-top: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.5;
    height: 3.0em;
    text-align: center;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }

  .best_wrap .empty{
      width: 100%;
      text-align: center;
      margin: 180px 0;
  }
  .best_wrap .empty + .slider-none{display: none !important;}

	.dessert_btn_margin{
		margin-top:100px;
	}



/* -------------------- 유튜브 slide -------------------- */
.youtube_wrap .slide{
    position: relative;
    width: 100%;
    /* margin: 0 auto; */
    padding: 0 80px;
    margin-top: 45px;
    box-sizing: border-box;
}
.youtube_wrap .slide .swiper-container{
    padding-bottom: 30px;
}
.youtube_wrap .slide li .cont_video{
    width: 100%;
    height: 100%;
}
.youtube_wrap .slide .swiper-pagination-progressbar{
    /* width: 100%; */
    width: calc(100% - 160px);
    height: 2px;
}
.youtube_wrap .slide .swiper-pagination-progressbar-fill{
    background-color:#000;
}
.youtube_wrap .swiper-button-prev{left: 0px;}
.youtube_wrap .swiper-button-next{right: 0px;}
.youtube_wrap .swiper-button-prev,.youtube_wrap .swiper-button-next{
    color: #1c1c1c;
}
.youtube_wrap .swiper-button-prev:after,.youtube_wrap .swiper-button-next:after{
    font-size: 30px;
}

/* imgver */
.youtube_wrap .slide li .frame{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 112.3%;
}
.youtube_wrap .slide li .frame img{
    display: block;
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* -------------------- 메뉴 리스트 -------------------- */
.menu_wrap{
    position: relative;
    background-color: #fff;
}
.menu_wrap .top{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
}
.menu_wrap .center{
    padding-top: 150px;
}
.menu_wrap .category_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1044px;
    margin: 0 auto;
}
.menu_wrap .category_wrap li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 17px 34px;
    border: 2px solid #000;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menu_wrap .category_wrap li .icon{
    position: relative;
    width: 90%;
    height: 56px;
    margin-bottom: 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
    /* transition: background-image 0.3s;
    -webkit-transition: background-image 0.3s; */
}

.menu_wrap .category_wrap li .icon img{
    position: absolute;
    top: 0;left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.menu_wrap .category_wrap li .icon .w-ico{opacity: 0;}

.menu_wrap .category_wrap li .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/cake_btn_icon.svg);}
.menu_wrap .category_wrap li .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/parfait_btn_icon.svg);}
.menu_wrap .category_wrap li .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/macaron_btn_icon.svg);}
.menu_wrap .category_wrap li .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/cookie_btn_icon.svg);}
.menu_wrap .category_wrap li .icon05{background-image: url(//cdn.dessert39.com/www/img/menu/bakery_btn_icon.svg);}
.menu_wrap .category_wrap li .icon06{background-image: url(//cdn.dessert39.com/www/img/menu/roll_btn_icon.svg);}



/* 음료목록 */
.menu_wrap .category_wrap.bev_wrap li .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/coffee_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/frappe_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/tea,ade_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/gotbeverage_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon05{background-image: url(//cdn.dessert39.com/www/img/menu/cheese_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon06{background-image: url(//cdn.dessert39.com/www/img/menu/protein_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon07{background-image: url(//cdn.dessert39.com/www/img/menu/dc_btn_icon.svg);}
.menu_wrap .category_wrap.bev_wrap li .icon08{background-image: url(//cdn.dessert39.com/www/img/menu/zero_btn_icon.svg); transform:scale(1.1);}


/* 크리스마스 케이크 목록 */
.menu_wrap .category_wrap.xmas li .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/holecake.svg);}
.menu_wrap .category_wrap.xmas li .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/tray.svg);}
.menu_wrap .category_wrap.xmas li .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/season_cake.svg); transform:scale(0.9);}
.menu_wrap .category_wrap.xmas li .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/candle.svg);}


.menu_wrap .category_wrap li p{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-align: center;
    line-height: 1.5;
    padding: 0 5px;
    transition: color 0.3s;
}

.menu_wrap .cont-wrap{
    margin-top: 100px;
}
.menu_wrap .cont-wrap h2{
    margin-bottom: 50px;
    text-align: center;
}

/* ice hot */
.menu_wrap ol.orhot{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.menu_wrap ol.orhot li{
    position: relative;
    color: #999;
    font-size: 20px;
    margin-right: 25px;
    transition: color 0.4s;
    cursor: pointer;
}
.menu_wrap ol.orhot li::after{
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background-color: #1c1c1c;
    transition: width 0.4s;
    content: '';
}
.menu_wrap ol.orhot li.act{
    color: #1c1c1c;
    font-weight: 700;
}
.menu_wrap ol.orhot li.act::after{
    width: 100%;
}
.menu_wrap ol.orhot li:last-child{margin-right: 0;}



.menu_wrap .product-container{
    display: flex;
    flex-wrap: wrap;
}
.menu_wrap .product{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(100%/5 - 120px/5);
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 20px #26262618;
    border-radius: 10px;
    box-sizing: border-box;
    transition: box-shadow 0.4s;
}
.menu_wrap .product:nth-of-type(5n){margin-right: 0;}

.menu_wrap .product .iconbox{
    position: absolute;
    top: 5%;
	right: 5%;
    width: 65px;
}
.menu_wrap .product .iconbox img{
    display: block;
    width: 100%;
}

.menu_wrap .product .frame{
    max-height: 170px;
}
.menu_wrap .product .frame img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.menu_wrap .product .tit{
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 15px 0;
    line-height: 1.4;
}
.menu_wrap .product .sub{
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.4;

    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.menu_wrap .product .sub .engtit{
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 300;
    color: #4d4d4d;
}
.menu_wrap .product .btn-detail{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 36px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.05em;
    border: 2px solid #000;
    box-sizing: border-box;
    border-radius: 18px;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.menu_wrap .product .detail{display: none;}
.menu_wrap .product .from{display: none;}

.menu_wrap .product .ex-txt{
    font-size: 15px;
    color: #666;
    margin-top: 25px;
    margin-bottom: -5px;
    line-height: 1.3;
}

.menu_wrap .list-none{
    width: 100%;
    background-color: #fff;
    padding: 50px 0;
    box-shadow: 0 0 20px #26262618;
    border-radius: 10px;
}
.menu_wrap .list-none .frame{
    width: 25%;
    max-width: 230px;
    min-width: 120px;
    margin: 0 auto;
    opacity: 0.2;
}
.menu_wrap .list-none .frame img{
    display: block;
    width: 100%;
    height: 100%;
}





/* -------------------- popup -------------------- */
.popup-wrap{
    display: none;
    position: fixed;
    left: 50%;top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 605px;
    margin: 0 auto;
    z-index: 1001;
}

.popup{
    position: relative;
    width: 90%;
	overflow-y: auto;
	max-height: 90vh;
    margin: 0 auto;    
    border-radius: 25px;
    background-color: #fff;
}

.popup::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 너비 */	
}
.popup::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #1b1b1b; /* 스크롤바의 색상 */    
    border-radius: 10px;
}

.popup::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .1);  /*스크롤바 뒷 배경 색상*/
}

.popup .cover{
    display: flex;
    align-items: flex-end;
    height: 380px;
    background-color: #ecf9e8;
}
.popup .cover .frame{
    height: 90%;
    max-height: 350px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}
.popup .cover .frame img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup .info{
    width: 100%;
    text-align:center;
	box-sizing:border-box;
}
.popup .pdinfo{
	padding: 30px;
}


.popup .info .tit{
    font-size: 26px;
    letter-spacing: -0.05em;
    margin-bottom: 12px;
    line-height: 1.4;
}
.popup .info .engtit{
    font-weight: 300;
    font-size: 18px;
}
.popup .info .detail{
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.05em;
    line-height: 1.4;
    margin: 30px 0;
}
.popup .info .price{
    font-size: 22px;
    letter-spacing: -0.05em;
}
.popup .info .btn-wrap{display: none;}
.popup .info .btn-order{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 44px;
    margin: 0 auto;
    color: #fff;
    font-size: 16px;
    background-color: #000;
    border-radius: 20px;
    margin-top: 27px;
}


.popup .pop_btm{
	background:#f8f9fa;
}
.popup .info .ex-txt{
    color: #666;    
    font-size: 16px;
	line-height:1.5;
	padding:20px;
	box-sizing: border-box;
}


.popup .topbox{
    display: flex;
    align-items: center;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}

.popup .topbox .iconbox{
    width: 100px;
}
.popup .topbox .iconbox img{
    display: block;
    width: 100%;
}

/*국가 아이콘 삭제 240116 lyi*/
.popup .from{
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;left: 0;
    display: none;
}
.popup .from .flag{
    width: 50px;
    height: 36px;
    margin-right: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}
/*
.popup .from .flag.f-ita{background-image: url(//cdn.dessert39.com/www/img/menu/italy.svg);}
.popup .from .flag.f-usa{background-image: url(//cdn.dessert39.com/www/img/menu/America.svg);}
.popup .from .flag.f-bel{background-image: url(//cdn.dessert39.com/www/img/menu/belgium.svg);}
.popup .from .flag.f-fra{background-image: url(//cdn.dessert39.com/www/img/menu/france.svg);}
.popup .from .flag.f-jpn{background-image: url(//cdn.dessert39.com/www/img/menu/japan.svg);}
*/
.popup .from p{
    font-size: 30px;
    letter-spacing: -0.025em;
}
.popup .btn-clse{
    position: absolute;
    top: 0;right: 0;
    font-size: 40px;
}

.popup .nutribox{
    border-top: 1px solid #ddd;
}
.popup .nutribox ol{
    display: flex;
    flex-wrap: wrap;
}
.popup .nutribox ol li{
    width: 50%;
    line-height: 1.3;
    margin-top: -4px;
    padding: 0px 6px 12px 6px;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
}
.popup .nutribox ol li:nth-of-type(1),
.popup .nutribox ol li:nth-of-type(2){
    margin-top: 0;
    padding-top: 12px;
}
.popup .nutribox ol li:nth-of-type(2n-1){
    border-right: 1px solid #ddd;
}
.popup .allergicbox{
    font-size: 15px;
    padding: 12px 5px;
    text-align: center;
    line-height: 1.3;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
}



.popup-back{
    display: none;
    position: fixed;
    left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
}

.criteria{
	margin:20px;
	font-size: 12px;
	text-align:left;
	font-weight:500;
}
.criteria i{
	font-size: 12px;
	color:#000;
}



/* -------------------- order-store -------------------- */
.order-store .search-form{
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 68px;
    margin: 52px auto;
    background-color: #fafbfc;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    border-radius: 34px;
}
.order-store .search-form .search-input{
    width: 95%;
    height: 100%;
    padding-left: 20px;
    font-size: 18px;
    background-color: transparent;
    box-sizing: border-box;
}
.order-store .search-form .btn-search{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.order-store .store-table{
    border-top: 3px solid #232323;
    border-bottom: 3px solid #232323;
}
.order-store h3{
    font-size: 18px;
    padding: 20px 0;
    text-align: center;
}
.order-store .store-li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 15px;
    border-top: 2px solid #d8d8d8;
    box-sizing: border-box;
}
.order-store .store-li h4{
    font-size: 20px;
    line-height: 1.5;
}
.order-store .store-li .sub{
    color: #444;
    font-size: 16px;
    letter-spacing: -0.025em;
    line-height: 1.5;
}
.order-store .store-li .a-tel{
    width: 130px;
    margin-left: 10px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background-color: #c5c5c5;
    border-radius: 24px;
    flex-shrink: 0;
}
.order-store .store-li .a-tel .ico{
    transform: rotate(-45deg);
}
.order-store .empty-li{
    text-align: center;
    padding: 120px 0;
    font-size: 18px;
    border-top: 2px solid #d8d8d8;
}



@media screen and (min-width: 1024.1px) {

    /* -------------------- 베스트 추천 메뉴 -------------------- */

    .best_wrap .menu-slider .slider-box:hover .inner img {
        -webkit-animation: menu_hover 0.7s;
                animation: menu_hover 0.7s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
      }
      .best_wrap .menu-slider .slider-box:hover .inner .tit .deco-biline {
        background-size: 100% 100%;
      }



    .menu_wrap .category_wrap li:hover{
        background-color: #000;
    }
    .menu_wrap .category_wrap li:hover .icon path{
        fill: #fff;
    }
    .menu_wrap .category_wrap li:hover .i_stroke path{
        stroke: #fff;
    }
    .menu_wrap .category_wrap li:hover p{color: #fff;}


    .menu_wrap .product:hover{
        box-shadow: 0 0 20px #26262635;
    }
    /* .menu_wrap .product .btn-detail:hover{
        color: #fff;
        background-color: #000;
        box-shadow: 0 0 20px #26262625;
    } */

    
    .menu_wrap .category_wrap li:hover .icon .b-ico{opacity: 0;}
    .menu_wrap .category_wrap li:hover .icon .w-ico{opacity: 1;}

    .menu_wrap .category_wrap li:hover .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/cake_btn_icon_w.svg);}
    .menu_wrap .category_wrap li:hover .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/parfait_btn_icon_w.svg);}
    .menu_wrap .category_wrap li:hover .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/macaron_btn_icon_w.svg);}
    .menu_wrap .category_wrap li:hover .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/cookie_btn_icon_w.svg);}
    .menu_wrap .category_wrap li:hover .icon05{background-image: url(//cdn.dessert39.com/www/img/menu/bakery_btn_icon_w.svg);}
    .menu_wrap .category_wrap li:hover .icon06{background-image: url(//cdn.dessert39.com/www/img/menu/roll_btn_icon_w.svg);}


    /* 음료목록 */
    .menu_wrap .category_wrap.bev_wrap li:hover .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/coffee_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/frappe_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/tea,ade_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/gotbeverage_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon05{background-image: url(//cdn.dessert39.com/www/img/menu/cheese_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon06{background-image: url(//cdn.dessert39.com/www/img/menu/protein_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon07{background-image: url(//cdn.dessert39.com/www/img/menu/dc_btn_icon_w.svg);}
    .menu_wrap .category_wrap.bev_wrap li:hover .icon08{background-image: url(//cdn.dessert39.com/www/img/menu/zero_btn_icon_w.svg);}

    /* 크리스마스 케이크 목록 */
    .menu_wrap .category_wrap.xmas li:hover .icon01{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/holecake_w.svg);}
    .menu_wrap .category_wrap.xmas li:hover .icon02{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/tray_w.svg);}
    .menu_wrap .category_wrap.xmas li:hover .icon03{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/season_cake_w.svg);}
    .menu_wrap .category_wrap.xmas li:hover .icon04{background-image: url(//cdn.dessert39.com/www/img/menu/xmas/candle_w.svg);}



    /* ice hot */
    .menu_wrap ol.orhot li:hover{color: #1c1c1c;}
    .menu_wrap ol.orhot li:hover::after{width: 100%;}
}


@media screen and (max-width: 1350px) {
    .best_wrap .menu-slider .slider-box {
    /* margin-right: 45px; */
  }
  .best_wrap .menu-slider{
      height: 281px;
  }
  .best_wrap .menu-slider .slider-box .inner .bg {
    width: 200px;
    height: 200px;
  }
  .best_wrap .menu-slider .slider-box .inner .tit {
    width: 200px;
    font-size: 17px;
    margin-top: 30px;
  }
}


@media screen and (max-width: 1300px) {
    .menu_wrap .product{
        width: calc(100%/4 - 60px/4);
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .menu_wrap .product:nth-of-type(5n){margin-right: 20px;}
    .menu_wrap .product:nth-of-type(4n){margin-right: 0px;}

    .menu_wrap .category_wrap li{
        margin: 0 10px 20px;
    }
}



@media screen and (max-width: 1150px) {

    .best_wrap .section-title {
        margin-bottom: 70px;
      }
      .best_wrap .btn-bubble {
        margin-top: 30px;
      }
      .best_wrap .btn-slider-box {
        margin-top: 30px;
      }
      .best_wrap .menu-slider{
        height: 253px;
    }
      .best_wrap .menu-slider .slider-box {
        /* margin-right: 40px; */
      }
      .best_wrap .menu-slider .slider-box .inner .bg {
        width: 180px;
        height: 180px;
      }
      .best_wrap .menu-slider .slider-box .inner .tit {
        width: 180px;
        font-size: 16px;
        margin-top: 25px;
      }

      .best_wrap .empty{
        margin: 150px 0;
    }
}



@media screen and (max-width: 1024px) {
    .best_wrap .tabmnu{margin-bottom: 50px;}

    .best_wrap .menu-slider .slider-box.slick-current .inner img {
        -webkit-animation: menu_hover 0.7s;
                animation: menu_hover 0.7s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
      }
    /* -------------------- 메뉴 리스트 -------------------- */

    .menu_wrap .category_wrap li{
        width: 120px;
        height: 120px;
    }
    .menu_wrap .category_wrap li .icon{
        height: 50px;
    }
    .menu_wrap .category_wrap li p{
        font-size: 15px;
        letter-spacing: -0.1em;
    }


    .menu_wrap .product{
        width: calc(100%/3 - 40px/3);
    }
    .menu_wrap .product:nth-of-type(4n){margin-right: 20px;}
    .menu_wrap .product:nth-of-type(3n){margin-right: 0px;}
    .menu_wrap .product .frame{
        max-height: 150px;
    }
    .menu_wrap .product .tit{
        font-size: 18px;
        margin: 10px 0;
    }
    .menu_wrap .product .sub{font-size: 17px;}
    .menu_wrap .product .btn-detail{
        width: 100px;
        height: 34px;
        margin-top: 20px;
    }

    .menu_wrap .product .ex-txt{
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: 0;
    }



    /* -------------------- 유튜브 slide -------------------- */
    .youtube_wrap .slide{
        padding: 0 50px;
    }
    .youtube_wrap .slide .swiper-pagination-progressbar{
        width: calc(100% - 100px);
    }



    /* -------------------- popup -------------------- */
    .popup-wrap{
        max-width: 520px;
    }
    .popup-wrap .popup{
        overflow-y: auto;
        max-height: 90vh;
    }
    .popup .cover{
        height: 330px;
    }
    .popup .cover .frame{padding: 10px;}
    .popup .info .tit{font-size: 22px;}
    .popup .info .engtit{font-size: 16px;}
    .popup .info .detail{font-size: 16px; margin: 25px 0;}
    .popup .info .price{font-size: 20px;}
    .popup .info .ex-txt{font-size: 15px;}
    /* .popup .info .btn-wrap{display: block;} */

    .popup .topbox{top: 25px;}
    .popup .topbox .iconbox{width: 85px;}
    .popup .from .flag{width: 40px; height: 28px;}
    .popup .from p{font-size: 26px;}
    .popup .btn-clse{font-size: 36px;}
}


@media screen and (max-width: 991px) {
    .menu_wrap .top{top: 70px;}
}


@media screen and (max-width: 850px) {


    /* 공통텍스트 */
    .sub-title{
        font-size: 32px;
    }
    .sub-txt{
        font-size: 17px;
        margin-top: 10px;
    }



    /* -------------------- 베스트 추천 메뉴 -------------------- */
    .best_wrap .tabmnu{
        gap:unset;
    }
    .best_wrap .tabmnu li{
        width: 140px;
        height: 40px;
        font-size: 15px;
        margin-right: 10px;
    }
    .best_wrap .tabmnu li:last-of-type{margin-right: 0;}

    .best_wrap .section-title {
        margin-bottom: 60px;
    }
    .best_wrap .menu-slider .slick-list {
        /* padding: 0 0 0 0 !important; */
    }
    .best_wrap .menu-slider .slider-box {
        /* margin-right: 35px; */
    }





    /* -------------------- 메뉴 리스트 -------------------- */
    .menu_wrap .center{padding-top: 120px;}

    .menu_wrap .category_wrap li{
        width: 100px;
        height: 100px;
        margin: 0 6px 12px;
    }
    .menu_wrap .category_wrap li .icon{
        height: 45px;
        margin-bottom: 5px;
    }
    .menu_wrap .category_wrap li p{
        font-size: 14px;
    }



    .menu_wrap .cont-wrap{
        margin-top: 70px;
    }
    .menu_wrap .cont-wrap h2{
        margin-bottom: 30px;
    }

    /* ice hot */
    .menu_wrap ol.orhot{
        margin-bottom: 35px;
    }
    .menu_wrap ol.orhot li{
        font-size: 18px;
    }


    .menu_wrap .product{
        width: calc(100%/3 - 30px/3);
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .menu_wrap .product:nth-of-type(5n),
    .menu_wrap .product:nth-of-type(4n){
        margin-right: 15px;
    }
    .menu_wrap .product:nth-of-type(3n){
        margin-right: 0;
    }
    .menu_wrap .product .tit{
        font-size: 16px;
    }
    .menu_wrap .product .sub{font-size: 15px;}
    .menu_wrap .product .btn-detail{
        width: 90px;
        height: 32px;
    }
    .menu_wrap .product .ex-txt{
        font-size: 13px;
    }



    /* -------------------- order-store -------------------- */
    .order-store .search-form{
        height: 58px;
    }
    .order-store .search-form .search-input{
        font-size: 17px;
    }

    .order-store .store-li{
        padding: 15px;
    }
    .order-store .store-li h4{
        font-size: 18px;
    }
    .order-store .store-li .sub{
        font-size: 15px;
    }
    .order-store .store-li .a-tel{
        width: 110px;
        line-height: 42px;
        font-size: 17px;
    }

    .order-store .empty-li{font-size: 17px;}

}



@media screen and (max-width: 700px) {

    .best_wrap .menu-slider .slider-box {
        /* margin-right: 30px; */
      }
      .best_wrap .menu-slider{
        height: 215px;
    }
      .best_wrap .menu-slider .slider-box .inner .bg {
        width: 150px;
        height: 150px;
      }
      .best_wrap .menu-slider .slider-box .inner .tit {
        width: 150px;
        font-size: 15px;
        margin-top: 20px;
      }

      .best_wrap .empty{
        margin: 120px 0;
    }
}



@media screen and (max-width: 600px) {


    /* 공통텍스트 */
    .sub-title{
        font-size: 30px;
    }
    .sub-txt{
        font-size: 16px;
        margin-top: 5px;
    }



    /* -------------------- 베스트 추천 메뉴 -------------------- */
    .best_wrap .tabmnu{
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        /* max-width: 400px; */
        margin-bottom: 30px;
    }
    .best_wrap .tabmnu li{
        width: calc(50% - 5px/2);
        margin-bottom: 5px;
        margin-right: unset;
    }

    .best_wrap .section-title {
        margin-bottom: 50px;
      }
      .best_wrap .btn-bubble {
        margin-top: 20px;
      }
      .best_wrap .btn-slider-box {
        margin-top: 20px;
        height: 30px;
      }
      .best_wrap .btn-slider-box .btn-slider {
        width: 30px;
        height: 30px;
      }
      .best_wrap .btn-slider-box .progress-bar {
        width: calc(100% - 80px);
      }
      .best_wrap .menu-slider{
        height: 207px;
    }
      .best_wrap .menu-slider .slider-box {
        /* margin-right: 25px; */
      }
      .best_wrap .menu-slider .slider-box .inner .tit {
        font-size: 14px;
        margin-top: 15px;
      }




    /* -------------------- 유튜브 slide -------------------- */
    .youtube_wrap .swiper-button-prev:after,.youtube_wrap .swiper-button-next:after{
        font-size: 25px;
    }




    /* -------------------- 메뉴 리스트 -------------------- */
    .menu_wrap .top{
        top: 50px;
    }
    .menu_wrap .category_wrap li{
        width: 95px;
        height: 95px;
        margin: 0 5px 10px;
    }
    .menu_wrap .category_wrap li .icon{
        height: 40px;
    }
    .menu_wrap .category_wrap li p{
        font-size: 13px;
        line-height: 1.3;
    }


    .menu_wrap .product{
        width: calc(100%/2 - 15px/2);
    }
    .menu_wrap .product:nth-of-type(3n){
        margin-right: 15px;
    }
    .menu_wrap .product:nth-of-type(2n){
        margin-right: 0;
    }



    /* -------------------- popup -------------------- */
    .popup-wrap{
        max-width: 450px;
    }
    .popup .cover{
        height: 290px;
    }
    .popup .info{}
    .popup .info .tit{font-size: 20px;}
    .popup .info .engtit{font-size: 15px;}
    .popup .info .detail{font-size: 15px; margin: 20px 0;}
    .popup .info .price{font-size: 18px;}
    .popup .info .ex-txt{
        font-size: 14px;
        
    }
    .popup .info .btn-order{
        width: 160px;
        height: 42px;
        font-size: 15px;
    }

    .popup .topbox{top: 20px;}
    .popup .from .flag{width: 35px; height: 22px;}
    .popup .from p{font-size: 24px;}
    .popup .btn-clse{font-size: 32px;}

    .popup .nutribox ol li{font-size: 14px;}
    .popup .allergicbox{
        font-size: 14px;
    }

    .popup .pdinfo{
        padding: 20px;
    }





    /* -------------------- order-store -------------------- */
    .order-store .search-form{
        height: 48px;
        margin: 35px 0;
    }
    .order-store .search-form .search-input{
        font-size: 16px;
    }
    .order-store .search-form .btn-search{
        right: 12px;
        font-size: 18px;
    }

    .order-store h3{
        font-size: 17px;
        padding: 15px 0;
    }
    .order-store .store-li{
        padding: 12px 10px;
    }
    .order-store .store-li h4{
        font-size: 17px;
    }
    .order-store .store-li .sub{
        font-size: 14px;
    }
    .order-store .store-li .a-tel{
        width: 95px;
        line-height: 38px;
        font-size: 16px;
    }

    .order-store .empty-li{
        font-size: 16px;
        padding: 100px 0;
    }

}




@media screen and (max-width: 450px) {


    /* 공통텍스트 */
    .sub-title{
        font-size: 23px;
    }
    .sub-txt{
        font-size: 15px;
    }



    /* -------------------- 베스트 추천 메뉴 -------------------- */
    .best_wrap .tabmnu{margin-top: 40px;}
    .best_wrap .tabmnu li{
        height: 35px;
        font-size: 14px;
        border: 1px solid #000;
    }



    /* -------------------- 유튜브 slide -------------------- */
    .youtube_wrap .slide{
        margin-top: 30px;
        padding: 0 35px;
    }
    .youtube_wrap .slide .swiper-container{
        padding-bottom: 25px;
    }
    .youtube_wrap .slide .swiper-pagination-progressbar{
        width: calc(100% - 70px);
    }



    /* -------------------- 메뉴 리스트 -------------------- */
    .menu_wrap .center{padding-top: 90px;}

    .menu_wrap .category_wrap li{
        width: calc(100%/3 - 30px/3);
        max-width: 95px;
    }


    .menu_wrap .cont-wrap{
        margin-top: 50px;
    }
    .menu_wrap .cont-wrap h2{
        margin-bottom: 20px;
    }

    .menu_wrap ol.orhot li{
        font-size: 17px;
    }

    .menu_wrap .product{padding: 10px;}
    .menu_wrap .product .iconbox{width: 52px;}
    .menu_wrap .product .frame{
        max-height: 130px;
    }
    .menu_wrap .product .tit{
        font-size: 15px;
    }
    .menu_wrap .product .sub{font-size: 14px;}
    .menu_wrap .product .btn-detail{
        width: 80px;
        height: 30px;
        font-size: 13px;
        margin: 12px 0 5px;
    }

    .menu_wrap .product .ex-txt{
        font-size: 12px;
        margin-top: 10px;
    }



    /* -------------------- popup -------------------- */
    .popup .cover{
        height: 240px;
    }
    .popup .info .tit{font-size: 18px; margin-bottom: 8px;}
    .popup .info .engtit{font-size: 14px;}
    .popup .info .detail{font-size: 14px; margin: 15px 0;}
    .popup .info .price{font-size: 16px;}
    .popup .info .ex-txt{font-size: 13px; padding: 15px;}
    .popup .info .btn-order{
        height: 38px;
        font-size: 14px;
    }
    .popup .topbox{top: 15px;}
    .popup .topbox .iconbox{width: 60px;}
    .popup .from .flag{width: 32px; height: 20px; margin-right: 10px;}
    .popup .from p{font-size: 20px;}
    .popup .btn-clse{font-size: 28px;}

    .popup .nutribox ol li{
        font-size: 13px;
        padding-bottom: 10px;
    }
    .popup .nutribox ol li:nth-of-type(1),
    .popup .nutribox ol li:nth-of-type(2){
        padding-top: 10px;
    }
    .popup .allergicbox{
        font-size: 13px;
        padding: 10px 5px;
    }





    /* -------------------- order-store -------------------- */
    .order-store .search-form{
        height: 42px;
        margin: 25px 0 30px;
    }
    .order-store .search-form .search-input{
        font-size: 15px;
    }
    .order-store h3{
        font-size: 16px;
    }
    .order-store .store-li .a-tel{
        width: 85px;
        line-height: 34px;
        font-size: 15px;
    }

    .order-store .empty-li{
        font-size: 15px;
        padding: 80px 0;
    }

}



@media screen and (max-width: 420px) {
    .best_wrap .btn-slider-box {
        margin-top: 15px;
      }
}



@media screen and (max-width: 360px) {


    /* 공통텍스트 */
    .sub-title{
        font-size: 22px;
    }
    .sub-txt{
        font-size: 14px;
        margin-top: 5px;
    }



    /* -------------------- 메뉴 리스트 -------------------- */
    .menu_wrap .product{
        width: calc(100%/2 - 10px/2);
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .menu_wrap .product:nth-of-type(5n),
    .menu_wrap .product:nth-of-type(4n),
    .menu_wrap .product:nth-of-type(3n){
        margin-right: 10px;
    }
    
    .menu_wrap .product:nth-of-type(2n){
        margin-right: 0;
    }
    .menu_wrap .product .frame{
        max-height: 110px;
    }
    .menu_wrap .product .tit{
        font-size: 14px;
    }
    .menu_wrap .product .sub{font-size: 13px;}
    .menu_wrap .product .btn-detail{
        width: 70px;
        height: 26px;
        font-size: 12px;
    }

}

/*-----220803 이예인 수정중*/
.category_icon .icon{
	position: relative;
    width: 90%;
    height: 56px;
    margin-bottom: 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
}

.category_icon a{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 17px 34px;
    border: 2px solid #000;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s;
}
.category_icon .icon img{
	position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.category_icon .icon .w-ico{
	opacity:0;
}

.category_icon p{
	font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.05em;
    text-align: center;
    line-height: 1.5;
    padding: 0 5px;
    transition: color 0.3s;
}
.category_cont_wrap{
	margin-top:100px;
}
.category_cont_wrap h2{
	margin-bottom:50px;
	text-align:center;
}


.category_cont{
	
}

/*content*/
.menu_container{
	display: flex;
	flex-wrap: wrap;
}
.menu_container .menu_cont_pt{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(100%/5 - 120px/5);
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 20px #26262618;
    border-radius: 10px;
    box-sizing: border-box;
    transition: box-shadow 0.4s;
}

html{
	scroll-behavior: smooth;
}

/*반응형*/

@media screen and (min-width: 1024.1px){
	.category_icon:hover .icon .w-ico {
		opacity: 1;
	}
	.category_icon:hover .icon .b-ico {
		opacity: 0;
	}
	.category_icon a:hover{
		background-color:#000;
	}
	.category_icon a:hover p{
		color: #fff;
	}
}

@media screen and (max-width: 1300px){
	.category_icon a {
		margin: 0 10px 20px;
	}
}

@media screen and (max-width: 1024px){
	.category_icon a {
		width:120px;
		height:120px;
	}
	.category_icon p{
		font-size: 15px;
		letter-spacing: -0.1em;
	}
	.category_icon .icon img{
		height:50px;
	}
}
@media screen and (max-width: 850px){
	.category_icon a {
		width: 100px;
		height: 100px;
		margin: 0 5px 12px;
	}
	.category_icon p{
		font-size: 14px;
	}
	.category_icon .icon img{
		height: 45px;
		margin-bottom: 5px;
	}
	.category_icon .icon{
		height:45px;
		margin-bottom:5px;
	}
}


@media screen and (max-width: 600px){
	.category_icon a {
		width:95px;
		height:95px;
	}
	.category_icon .icon{
		height:40px;
	}
	.category_icon .icon img{
		height:40px;
	}
}


/*제공량 추기*/
.amount{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    padding: 10px 0;
    background: #ebecef;
    font-weight: 500;
}