.wrap{
    width: 100%;
    overflow: hidden;
}
/* 메인배너 */
.main_banner{
    width: 100%;
    height: 584px;
    background: url(../../img/menu_page/banner.jpg) no-repeat center / cover;

    position: relative;
}
/* 메인배너 사진 올라오는거 */
/* 망고 */
.move_tea1{
    width: 130px;
    height: 220px;
    background: url(../../img/menu_page/main_banner_box1.png) no-repeat center / cover;
    opacity: 1;
    
    position: absolute;
    top: 0;
    left: 0;

    transform: rotateZ(13deg);

    animation: banner 2s ease normal;
}
@keyframes banner{
    0%{opacity: 0.3; top:60px; }
    100%{opacity: 1; top:0px; }
}
/* 블루베리 */
.move_tea2{
    width: 130px;
    height: 220px;
    background: url(../../img/menu_page/main_banner_box2.png) no-repeat center / cover;
    opacity: 1;
    
    position: absolute;
    top: 60%;
    left: 10%;

    transform: rotateZ(-20deg);

    animation: banner2 2s ease normal;
}
@keyframes banner2{
    0%{opacity: 0.3; top:70%; }
    100%{opacity: 1; top:60%; }
}
/* 딸기 */
.move_tea3{
    width: 130px;
    height: 220px;
    background: url(../../img/menu_page/main_banner_box3.png) no-repeat center / cover;
    opacity: 1;
    
    position: absolute;
    top: 25%;
    right: 5%;

    transform: rotateZ(22deg);

    animation: banner3 2s ease normal;
}

@keyframes banner3{
    0%{opacity: 0.3; top:30%; }
    100%{opacity: 1; top:25%; }
}

.contents{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 120px;
}
/* 상단 텍스트 */
.top_text_box{
    width: 100%;
    height: 90px;
    border-left: 3px solid #999;
    font-family: "moon";
    padding-left: 10px;
    box-sizing: border-box;
    margin-bottom: 50px;
    
}
.top_text_box > h3{
    width: 100%;
    height: 30px;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 10px;
}
.top_p{
    width: 100%;
    height: 20px;
    font-size: 18px;
    font-weight: 600;
}
/* 딸기 */
.tea_box{
    width: 100%;
    height: 600px;

    position: relative;
}
.tea_left_img{
    width: 789px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 0;

    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s;
}
.tea_stra_img{
    background: url(../../img/menu_page/stra_tea_img.jpg) no-repeat center / cover;
}
.tea_rig_img{
    width: 495px;
    height:502px;

    position: absolute;
    bottom: 0;
    right: 0;

    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s;
}
.stra_img{background:url(../../img/menu_page/stra_img.png) no-repeat center / cover;}
/* 망고 */
.mang_tea_box{
    width: 100%;
    height: 600px;
    margin: 200px 0;

    position: relative;
}
.mang_left_img{
    width: 495px;
    height:502px;
    background: url(../../img/menu_page/mang_img.png) no-repeat center / cover;

    position: absolute;
    bottom: 0;
    left: 0;

    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s;
}
.mang_rig_img_box{
    width: 789px;
    height: 485px;

    position: absolute;
    top: 0;
    right: 0;

    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s;
}
.mang_rig_img{
    width: 100%;
    height: 100%;
    background: url(../../img/menu_page/mang_tea_img.jpg) no-repeat center / cover;
    
    
}
.mang_mini_img{
    width: 150px;
    height: 300px;
    background: url(../../img/menu_page/mang_mini_img.png) no-repeat center / cover;

    position: absolute;
    top: -84px;
    left: -411px;
}
/* 블루베리 */
.tra_blu_img{
    background: url(../../img/menu_page/blue_tea_img.jpg) no-repeat center / cover;
}
.blu_img{background: url(../../img/menu_page/blue_img.png) no-repeat center / cover;}

/* 배너2 */
.banner2{
    width: 100%;
    height: 580px;
    background: url(../../img/menu_page/tea_set2.jpg) no-repeat center / cover;
}
/* 티 먹는법 */
.eat_tea_box{
    width: 100%;
    height: 600px;
    background: #eeeee2;
    margin-top: 150px;
    padding-top: 30px;
    box-sizing: border-box;
}
.eat_inner_box{
    width: 1200px;
    margin: 0 auto;
    font-family: "moon";
}
.eat_inner_box > h2{
    width: 100%;
    height: 30px;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}
.eat_box{
    width: calc((100% - 40.01px ) / 3 );
    height: 461px;
    float: left;
    margin-top: 30px;

    position: relative;
}
.circle{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #999;
    line-height: 40px;
    text-align: center;
    font-size: 20px;

    position: absolute;
    top: -21px;
    left: 50%;

    transform: translateX(-50%);

}
.eat_box:nth-of-type(2){
    margin: 0 20px;
    margin-top: 30px;
}
.eat_text{
    width: 100%;
    height: 150px;
    background: #fff;

    position: relative;
}
.eat_text_h3 {
    width: 100%;
    height: 30px;
    font-size: 25px;
    font-weight: 600;
    text-align: center;

    position: absolute;
    top: 40%;
    left: 50%;

    transform: translate(-50%);
}
.eat_text_p{
    width: 100%;
    height: 20px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;

    position: absolute;
    top: 60%;
    left: 50%;

    transform: translate(-50%);
}
.eat_img_box{
    width: 100%;
    height: calc(100% - 150px);
    background: #eeeeee;

    position: relative;
}
/* 티먹는법 1 */
.eat_img1{
    width: 126px;
    height: 115px;

    background: url(../../img/menu_page/tea_icon01.png) no-repeat center / cover;

    position: absolute;
    top: 20px;
    left: 54%;

    transform: translateX(-50%);

    animation: down  2s ease infinite;
}
@keyframes down{
    0%{top:20px;}
    100%{top:100px;}
}
.eat_img2{
    width: 166px;
    height: 133px;

    background: url(../../img/menu_page/tea_icon04.png) no-repeat center / cover;

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

    transform: translateX(-50%);
}
/* 티먹는법 2 */
.eat_img3{
    width: 130px;
    height: 115px;

    background: url(../../img/menu_page/tea_icon01.png) no-repeat center / cover;

    position: absolute;
    bottom: 54px;
    left: 54%;

    transform: translateX(-50%);
}
.eat_img4{
    width: 175px;
    height: 155px;

    background: url(../../img/menu_page/tea_bot_water1.png) no-repeat center / cover;

    position: absolute;
    top: 51px;
    left: 40%;

    transform: translateX(-50%);
    transform: rotateZ(0deg);

    animation: icon2  2s ease infinite;
}
@keyframes icon2 {
    0%{transform: rotateZ(0deg)}
    100%{transform: rotateZ(-28deg)}
}
.eat_img5{
    width: 166px;
    height: 133px;

    background: url(../../img/menu_page/tea_icon04.png) no-repeat center / cover;

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

    transform: translateX(-50%);

    animation: water1 2s ease infinite;
}
@keyframes water1{
    0%{background: url(../../img/menu_page/tea_icon04.png) no-repeat center / cover;}
    50%{background: url(../../img/menu_page/tea_icon_water.png) no-repeat center / cover;}
    100%{background: url(../../img/menu_page/tea_icon_fullwater.png) no-repeat center / cover;}
}
/* 티먹는법 3 */
.eat_img6{
    width: 130px;
    height: 110px;
    background: url(../../img/menu_page/tea_icon05.png) no-repeat center / cover;

    position: absolute;
    top: 57px;
    left: 50%;

    transform: translateX(-50%);
}
.eat_img7{
    width: 57px;
    height: 111px;
    background: url(../../img/menu_page/tea_icon06.png) no-repeat center / contain;

    position: absolute;
    top: 75.5px;
    left: 50%;

    transform: translateX(-50%);
    transform-origin: left;
    transform: rotateZ(0deg);

    animation: clock 2s ease infinite;
}

@keyframes clock{
    0%{transform: rotateZ(0deg);}
    100%{transform: rotateZ(365deg);}
}
.eat_img8{
    width: 155px;
    height: 148px;
    background: url(../../img/menu_page/tea_icon_last00.png) no-repeat center / cover;

    position: absolute;
    top: 145px;
    left: 50%;

    transform: translateX(-50%);

    animation: last 2s ease infinite;
}
@keyframes last{
    0%{background: url(../../img/menu_page/tea_icon_last00.png) no-repeat center / cover;}
    25%{background: url(../../img/menu_page/tea_icon_last01.png) no-repeat center / cover;}
    50%{background: url(../../img/menu_page/tea_icon_last02.png) no-repeat center / cover;}
    100%{background: url(../../img/menu_page/tea_icon_last03.png) no-repeat center / cover;}
}