@charset "utf-8";
@import url("./common.css");

.wrap { overflow:hidden; text-align:center; background:#8ab663; }
.wrap img,
.inner { display:inline-block; width:1920px; }

h1 .star { display:none; position:absolute; left:55.6%; top:336px; width:46px; animation:sparkle 1.5s infinite ease-in-out; }
h1 .smile { position:absolute; right:320px; bottom:170px; display:inline-block; width:72px; }
@keyframes sparkle {
    0%, 100% { 
        transform: scale(0.9);
    }
    50% { 
        transform: scale(1.1);
    }
}

.con03 .txt_area { overflow:hidden; position:absolute; bottom:364px; left:50%; transform:translateX(-50%); display:inline-block; width:1200px; height:470px; border-radius:70px; background:#fff url('../images/mid/txt_area.png') center no-repeat; background-size:cover; }
    .con03 .txt_area img { width:100%; }
.con03 .inner .dog { position:absolute; left:387px; bottom:213px; transform:translateX(0); display:inline-block; width:152px; }

.con02 .inner .girls { position:absolute; right:360px; bottom:25px; display:inline-block; width:933px; transform:translateX(0); }
.con02 .card_area,
.con02 .card_area ul { position:absolute; top:460px; left:50%; transform:translateX(-50%); width:1200px; height:613px; }
.con02 .card_area img { width:100%; }
.con02 .card_area ul { top:-25px; display:flex; flex-wrap:wrap; justify-content: space-between; }
.con02 .card_area ul li { display:inline-block; margin-top:25px; width:230px; height:295px; box-sizing:border-box; }
    .con02 .card_area ul li.hanok.on { background:url('../images/mid/card_hanok.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.camping.on { background:url('../images/mid/card_camping.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.summer.on { background:url('../images/mid/card_summer.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.dog.on { background:url('../images/mid/card_dog.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.bf.on { background:url('../images/mid/card_bf.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.enjoy.on { background:url('../images/mid/card_enjoy.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.historical.on { background:url('../images/mid/card_historical.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.picnic.on { background:url('../images/mid/card_picnic.png') center no-repeat; background-size:100% auto; }
    .con02 .card_area ul li.play.on { background:url('../images/mid/card_play.png') center no-repeat; background-size:100% auto; }

.bok { position:relative; }
.bok .dog { opacity:0; position:absolute; right:0px; bottom:0px; display:inline-block; width:1075px; transform:translateX(0); }
.bok .talk { opacity:0; position:absolute; right:1090px; bottom:610px; display:inline-block; width:263px; transform:translateX(0); }
.bok.action .dog { animation: popUpDog 0.6s ease-out forwards; }
.bok.action .talk { animation: popUpTalk 0.5s ease-out forwards; animation-delay: 0.6s; }

/* 강아지 이미지 애니메이션 */
@keyframes popUpDog {
    0% {
        opacity: 0;
        transform: translate(100%, 100%) scale(0.5); /* 아래에서 시작 */
    }
    70% {
        opacity: 1;
        transform: translate(0, -10px) scale(1.1); /* 위로 튀어나오면서 살짝 커짐 */
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1); /* 원래 크기로 */
    }
}
/* 말풍선 이미지 애니메이션 */
@keyframes popUpTalk {
    0% {
        opacity: 0;
        transform: translate(0, 10px) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(0, -5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@media screen and (max-width:1920px) {
    
    .inner { width:100%; }
    .wrap h1 img,
    .wrap p img, 
    .wrap .inner img { position:relative; left:50%; transform:translateX(-50%); } 

    .wrap h1 .smile { left:auto; right:-35%; bottom:240px; }
    .con02 .inner .girls { left:auto; right:7%; }
    .con03 .inner .dog { left:10%; transition:all 0.3s; }
    
    .bok .talk { left:30%; }
}

@media screen and (max-width:1400px) {
    .bok .talk { left:400px; }
}