*{box-sizing: border-box}

body{font-family: 'Varela Round', sans-serif;
font-family: 'Nanum Gothic', sans-serif;overflow: hidden;
background: #eb76a0 url(../02_07/img/wrapbg1.jpg)no-repeat center bottom;background-size: contain;width: 100%;height: 100vh}
.logo{position: absolute;left: 6%;top: 3%;z-index: 100;width: 92px;height: 92px}
.bgwrap{width: 100%;height:22.495%;position: absolute;left: 0;top: 0;z-index: 10;
background: url(../02_07/img/bg_icecream_menu.gif) top center;
background-size: cover;box-shadow: 0px 15px 40px #ab3359}
.wrap{width: 66.6667%;height: 768px;position: relative;z-index: 10;left: 50%;top: 50%;transform: translate(-50%,-50%);}

.aniImg{position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%}
.aniImg ul{width: 100%;height: 100%;}
.aniImg li{position: absolute;z-index: 100;width: 32%;height: 32%;top: 10%}
.aniImg li img{position: absolute;opacity: 0}
.aniImg li .obj1{left: -11%;top: -100%;transform-origin: center center}
.aniImg li .obj2{left: -100%;top: 250px;animation: obj 3s ease-in-out infinite}
.aniImg li .obj3{left: 0;top: 400px;animation: obj1 3s ease-in-out infinite}

.aniImg li img:nth-child(1){width: 100%;}
.aniImg li img:nth-child(2){width: 60%;}
.aniImg li img:nth-child(3){width: 60%;}

.aniImg li.on img{opacity: 1;}
.aniImg li.on .obj1{top: 0px;}
.aniImg li.on .obj2{left: -50%}
.aniImg li.on .obj3{left: 49%}

@keyframes obj{
    0%{padding-top: 0;}
    50%{padding-top: 15px;}
    100%{padding-top: 0}
}
@keyframes obj1{
    0%{padding-top: 15px;}
    50%{padding-top: 0;}
    100%{padding-top: 15px}
}

.bgcon{position: absolute;left: 2%;top: 39%;width: 20.888%;height: 50.791%}
.bgcon img{width: 100%;}

.btnarea{position: relative;width: 100%;left: 35%;top: 160px;z-index: 10;color: #fff}

.title{width: 100%;height: 180px;}
.title li{line-height: 2}
.title li h2{font-size: 3.5em;position: absolute;top: -200px;opacity: 0;}
.title li h3{font-size: 1.5em;position: absolute;top: -100px;opacity: 0;color: #271a12}
.title li p{position: absolute;top: -300px;opacity: 0;}

.title li.on h2{top: 0px;opacity: 1;}
.title li.on h3{top: 100px;opacity: 1;}
.title li.on p{top: 150px;opacity: 1;}

.aniBtn{padding-top: 64px}
.aniBtn .line{width: 44.270%;height: 10px;}
.aniBtn .line span{display: block;width: 44%;height: 100%;background: #1f4c9a;}

.aniBtn li{width: 19.5%;background: #fff;color: #000;float: left;text-align: center;padding: 16px 0;cursor: pointer;border: 2px solid #e43aa0;}
.aniBtn li:nth-child(2){margin: 0 4%}

.event .hoverBtn{position: absolute;left: 50%;top: 135%;cursor: pointer;}
.event .hoverAni{position: absolute;left: 58%;top: -80px;opacity: 0;}

.event .hoverBtn .on{display: none}
.event .hoverBtn:hover .off{display: none}
.event .hoverBtn:hover .on{display: block}