.wrap{
    width: 100%;
    overflow: hidden;
}
/* menu_배너  */
.menu_banner{
    width: 100%;
    height: 264px;

    position: relative;
}
.main_banner1{ background: url(../../img/shop_page/main_banner1.jpg) no-repeat center / cover;}
.main_banner2{ background: url(../../img/shop_page/main_banner2.jpg) no-repeat center / cover;}
.main_banner3{ background: url(../../img/shop_page/main_banner.jpg) no-repeat center / cover;}
.banner_txt{
    font-family: "moon";
    width: 100%;
    height: 60px;
    text-align: center;
    font-weight: 600;
    opacity: 1;

    position: absolute;
    top: 46%;

    transform: translateY(-50%);
    
    animation: text 1.5s ease normal;
}
.banner_txt > h1{
    font-size: 30px;
    margin-bottom: 15px;
}
.banner_txt > h1 +p{ 
    font-size: 16px;
}
@keyframes text{
    0%{opacity: 0; transform: translateY(0%);}
    100%{opacity: 1; transform: translateY(-50%); }
}
.contents{
    width: 1200px;
    /* overflow: auto; */
    margin: 0 auto;
    margin-top: 30px;
}
/* 메뉴 클릭 페이지 바뀜 */
.click_menu{
    width: 100%;
    height: 50px;
    border-bottom: 5px solid #839e69;
}
.click_menu > ul{
    width: 600px;
    height: 30px;
    margin: 10px auto;
}
.click_menu_li{
    width: calc(100% / 3);
    height: 100%;
    line-height: 30px;
    text-align: center;
    float: left;
    font-family: "baemin2";
    cursor: pointer;
}
.click_menu_li:hover{
    color:#839e69;
}
/*베스트 메뉴*/
.best_box{
    width: 100%;
    height: 400px;
    margin-top: 50px;
}
/* 베스트 왼쪽 이미지 */
.best_left_img{
    width: 320px;
    height: 400px;
    float: left;
    background: url(../../img/shop_page/best_big_img.png) no-repeat center / cover;
}
/* 베스트 오른쪽 부분 */
.best_right_box{
    width: calc(100% - 320px );
    height: 100%;
    float: right;
    padding-left: 20px;
    box-sizing: border-box; 

    position: relative;
}
/* 베스트 text */
.best_top_txt{
    width: 100%;
    height: 60px;
    font-family: "baemin2";
}
.best_top_txt > h2{
    width: 100%;
    height: 35px;
    font-size: 30px;
    font-weight: 600;
}
.best_top_txt > h2 + p{
    width: 100%;
    height: 23px;
    font-size: 18px;
}
/* 베스트 메뉴 */
.rig_bot_menu_box{
    width: 100%;
    height: 246px;
    margin-top: 92px;
    overflow: hidden;
    font-family: "baemin2";

    position: relative;
}
.best_menu_box{
    width: calc(100% / 4);
    height: 250px;
    float: left;

    position: absolute;
    top: 0;
}
.best_img{
    width: 100%;
    height: 200px;
    cursor: pointer;

    position: relative;
}
.best_inner_img{
    width: 100%;
    height: 100%;
}
.inner_img1{background: url(../../img/shop_page/best_img1.png) no-repeat center / cover;}
.inner_img2{background: url(../../img/shop_page/best_img2.png) no-repeat center / cover;}
.inner_img3{background: url(../../img/shop_page/best_img3.png) no-repeat center / cover;}
.inner_img4{background: url(../../img/shop_page/best_img4.png) no-repeat center / cover;}
.inner_img5{background: url(../../img/menu/tea22.png) no-repeat center / cover;}
.inner_img6{background: url(../../img/menu/tea6.png) no-repeat center / cover;}

.best_txt{
    width: 100%;
    height: 50px;
}
.best_txt{
    width: 100%;
    height: 46px;
    text-align: center;
}
.best_txt > h3{
    width: 100%;
    height: 25px;
    font-size: 16px;
    font-weight: 600;
}
.best_txt > h3 + p{
    width: 100%;
    height: 15px;
    font-size: 13px ;
}
/* 베스트 상품 버튼  */
.btn_slide{
    position: absolute;
    top: 0;

    transform: translateY(-20px);

    width: 50px;
    height: 300px;
    border: none;
    background: transparent;
    color: #000;
    font-size: 30px;
    font-weight: 800;
    outline: none;
    cursor: pointer;

}
.rig_bot_menu_box:hover #right_btn2{
    background: linear-gradient(to left, rgba(0,0,0,0.25),transparent);
}
.rig_bot_menu_box:hover #left_btn2{
    background: linear-gradient(to right, rgba(0,0,0,0.25),transparent);
}
#left_btn2{
    left: 0;
}
 #right_btn2{
    right: 0;
}
        
/*상품*/
.shop_box{
    width: 100%;
    margin-top: 50px;
    display: none;
    
} 
.shop_box_text{
    width: 100%;
    height: 48px;
    font-size: 30px;
    font-family: "baemin2";
    font-weight: 600;
    border-bottom: 5px solid #839e69;
}
.shop_top_box{
    width: 100%;
    height: 385px;
    margin-top: 30px;
}
.shop_inner{
    width:  calc(100% / 4);
    height: 100%;
    float: left;

    position: relative;
}
.before_hov{
    width: 100%;
    height: 100%;
}
.shop_img{
    width: 100%;
    height: 261px;
}
.shop_img1{background: url(../../img/menu/tea1.png) no-repeat center /cover;}
.shop_img2{ background: url(../../img/menu/tea2.png) no-repeat center /cover;}
.shop_img3{ background: url(../../img/menu/tea3.png) no-repeat center /cover;}
.shop_img4{background: url(../../img/menu/tea4.png) no-repeat center /cover;}

.shop_img5{background: url(../../img/menu/tea5.png) no-repeat center /cover;}
.shop_img6{ background: url(../../img/menu/tea6.png) no-repeat center /cover;}
.shop_img7{ background: url(../../img/menu/tea7.png) no-repeat center /cover;}
.shop_img8{background: url(../../img/menu/tea8.png) no-repeat center /cover;}

.shop_img9{background: url(../../img/menu/tea9.png) no-repeat center /cover;}
.shop_img10{ background: url(../../img/menu/tea10.png) no-repeat center /cover;}
.shop_img11{ background: url(../../img/menu/tea11.png) no-repeat center /cover;}
.shop_img12{background: url(../../img/menu/tea12.png) no-repeat center /cover;}

.shop_img13{background: url(../../img/menu/tea13.png) no-repeat center /cover;}
.shop_img14{ background: url(../../img/menu/tea14.png) no-repeat center /cover;}
.shop_img15{ background: url(../../img/menu/tea15.png) no-repeat center /cover;}
.shop_img16{background: url(../../img/menu/tea16.png) no-repeat center /cover;}

.shop_img17{background: url(../../img/menu/tea17.png) no-repeat center /cover;}
.shop_img18{ background: url(../../img/menu/tea18.png) no-repeat center /cover;}
.shop_img19{ background: url(../../img/menu/tea19.png) no-repeat center /cover;}
.shop_img20{background: url(../../img/menu/tea20.png) no-repeat center /cover;}

.shop_img21{background: url(../../img/menu/tea21.png) no-repeat center /cover;}
.shop_img22{ background: url(../../img/menu/tea22.png) no-repeat center /cover;}
.shop_img23{ background: url(../../img/menu/tea23.png) no-repeat center /cover;}
.shop_img24{background: url(../../img/menu/tea24.png) no-repeat center /cover;}


.shop_img30{background: url(../../img/menu/tea30.png) no-repeat center /cover;}
.shop_img31{background: url(../../img/menu/tea31.png) no-repeat center /contain;}
.shop_img32{background: url(../../img/menu/tea32.png) no-repeat center /cover;}
.shop_img33{background: url(../../img/menu/tea33.png) no-repeat center /cover;}

.shop_img34{background: url(../../img/menu/tea34.png) no-repeat center /cover;}
.shop_img35{background: url(../../img/menu/tea35.png) no-repeat center /cover;}
.shop_img36{background: url(../../img/menu/tea36.png) no-repeat center /cover;}
.shop_img37{background: url(../../img/menu/tea37.png) no-repeat center /cover;}

.shop_img40{background: url(../../img/menu/tea40.png) no-repeat center /cover;}
.shop_img41{background: url(../../img/menu/tea41.png) no-repeat center /cover;}
.shop_img42{background: url(../../img/menu/tea42.png) no-repeat center /cover;}
.shop_img43{background: url(../../img/menu/tea43.png) no-repeat center /cover;}

.shop_img44{background: url(../../img/menu/tea44.png) no-repeat center /cover;}
.shop_img45{background: url(../../img/menu/tea45.png) no-repeat center /cover;}
.shop_img46{background: url(../../img/menu/tea46.png) no-repeat center /cover;}
.shop_img47{background: url(../../img/menu/tea47.png) no-repeat center /cover;}

.shop_img48{background: url(../../img/menu/tea48.png) no-repeat center /cover;}
.shop_img49{background: url(../../img/menu/tea49.png) no-repeat center /cover;}
.shop_img50{background: url(../../img/menu/tea50.png) no-repeat center /cover;}
.shop_img51{background: url(../../img/menu/tea51.png) no-repeat center /cover;}

.shop_img52{background: url(../../img/menu/tea52.png) no-repeat center /cover;}
.shop_img53{background: url(../../img/menu/tea53.png) no-repeat center /cover;}
.shop_img54{background: url(../../img/menu/tea54.png) no-repeat center /cover;}
.shop_img55{background: url(../../img/menu/tea55.png) no-repeat center /cover;}


.shop_txt{
    width: 100%;
    height: 50px;
    text-align: center;
}
.shop_txt > h3{
    width: 100%;
    height: 20px;
    font-size: 16px;
    font-weight: 600;
}
.shop_txt > h3 + p{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}
/* 메뉴 아이콘 */
.icon_box{
    width:190px;
    height: 30px;

    position: absolute;
    bottom: 17px;
    left: 56%;

    transform:  translateX(-50%);
}
.shop_left_icon{
    width: 90px;
    height: 100%;
    float: left;
    margin-right: 10px;
}
.shop_rig_icon{
    width:90px;
    height: 100%;
    float: left;
}
.left_icon_img{
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 5px;
}
.hov_icon1{
    background: url(../../img/icon/gray_heart_icon.png) no-repeat center /cover;
}
.hov_icon2{background: url(../../img/icon/gray_text_icon.png)no-repeat center /cover;}
.shop_icon_txt{
    width: 50px;
    height: 100%;
    float: left;
    line-height: 30px;
    font-size: 18px;
    color: #bcbcbc;
    font-weight: 500;
}
/* 상품 호버 */
.shop_hover{
    width: 100%;
    height: 367px;
    border:  3px solid #839e69;
    box-sizing: border-box;
    cursor: pointer;
    display: none;
    
    position: absolute;
    top: 0;
    left: 0;
}
.buy_box{
    width: 100px;
    height: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    font-family: "baemin2";
    background: #839e69;
    color: #fff;
    cursor: pointer;

    position: absolute;
    bottom: -20px;
    left: 50%;

    transform: translateX(-50%);
}
.shop_inner:hover .shop_hover{
    display: block;
}
/* 더보기 버튼  */
.plus_btn{
    width: 130px;
    height: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    font-family: "baemin2";
    background: #839e69;
    margin: 20px auto;
    cursor: pointer;
}
.shop_box {
    display: none;
}