@charset "utf-8";

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;color:#333;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
html{-webkit-text-size-adjust:none}
img { vertical-align:top; }
html,body{height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: 'Malgun Gothic', sans-serif;}

.text-hidden {position: absolute;text-indent: -9999em;font-size: 0;}
img {max-width: 720px; width: 100%;}

#wrap {overflow: hidden; width: 100%; background: #fff;}
.container, .foot {width: 100%;}
.inner {position: relative; width: 720px; margin: 0 auto;}
div[class^="btn"] a {display: block; width: 100%; height: 100%;}

section {position: relative;}
.main {background: #ffe5e0;}
.s1 {background: #ffe5e0;}
.s2 {background: #ffc8bf;}
.s3 {background: #ffe5e0;}
.s4 {background: #ffc8bf;}

.main .img-box .img {position: absolute; max-width: none;}
.main .img-box .img-tit1 {left: 0; top: 10.8%; width: 100%; transform: translateY(-80px); opacity: 0;}
.main .img-box .img-tit2 {left: 0; top: 18.6%; width: 100%; transform: translateY(-80px); opacity: 0;}
.main .img-box .img-box {left: 0; bottom: 0; transform: scale(0) translateY(200px); transform-origin: center bottom; opacity: 0; z-index: 1;}
.main .img-box .img-box2 {left: 0; bottom: 0; transform: scale(0) translateY(200px); transform-origin: center bottom; opacity: 0; z-index: 2;}
.main .img-box .img-item1 {left: 0; bottom: 0; width: 100%; transform: scale(0) translateY(100px); transform-origin: center bottom; opacity: 0;}
.main .img-box .img-item2 {right: 0; bottom: 0; width: 100%; opacity: 0;}
.main .img-box .img-card1 {left: 50%; bottom: 25.1%; width: 100%; transform: scale(0) rotate(6deg) translateX(-50%) translateY(300px); transform-origin: left bottom; opacity: 0; z-index: 1;}
.main .img-box .img-card2 {left: 50%; bottom: 25.1%; width: 100%; transform: scale(0) rotate(-8deg) translateX(-50%) translateY(300px); transform-origin: left bottom; opacity: 0; z-index: 1;}
.main .img-box .img-balloon1 {left: 8.8%; top: 26.5%; width: 10.14%; opacity: 0;}
.main .img-box .img-balloon2 {right: 9.3%; top: 11.1%; width: 10.14%; opacity: 0;}
.main .img-confetti {position: absolute; left: 50%; bottom: 0; width: 1920px; transform: scale(0) translateX(-50%) translateY(300px); transform-origin: left bottom; opacity: 0;}
.ani .main .img-box .img-tit1 {animation: topMoveAni 1s .3s ease forwards;}
.ani .main .img-box .img-tit2 {animation: topMoveAni .8s .4s ease forwards;}
.ani .main .img-box .img-box {animation: boxMoveAni .8s .45s ease forwards;}
.ani .main .img-box .img-box2 {animation: boxMoveAni .8s .45s ease forwards;}
.ani .main .img-box .img-item1 {animation: itemMoveAni .6s .5s ease-in-out forwards, opacityAni .8s .5s ease-in forwards;}
.ani .main .img-box .img-item2 {animation: opacityAni 1s .9s ease forwards;}
.ani .main .img-box .img-card1 {animation: cardMoveAni1 .6s .7s ease forwards, cardMoveAni1_2 .6s 1.3s ease forwards, opacityAni 1.3s .7s ease forwards;}
.ani .main .img-box .img-card2 {animation: cardMoveAni2 .6s .7s ease forwards, cardMoveAni2_2 .6s 1.3s ease forwards, opacityAni 1.3s .7s ease forwards;}
.ani .main .img-box .img-balloon1 {animation: opacityAni 1s 1s ease forwards, upDownAni2 2s 1.4s ease-in-out infinite alternate;}
.ani .main .img-box .img-balloon2 {animation: opacityAni 1s 1.2s ease forwards, upDownAni 1.5s 1.6s ease-in-out infinite alternate;}
.ani .main .img-confetti {animation: confettiMoveAni 1s .6s ease-out forwards, opacityAni 1.2s .55s ease-in forwards;}

.section .btn {position: absolute; left: 50%; width: 91.4%; transform: translateX(-50%); text-indent: -999em;}
.s1 .btn {bottom: 5.1%; height: 6.9%; margin-left: .4%;}
.s2 .btn1 {bottom: 17.4%; height: 8.8%;}
.s2 .btn2 {bottom: 6.8%; height: 8.8%;}

.footer {background: #E5EAF0;}

.btn-floating {overflow: hidden; position: absolute; left: 50%; top: 1061px; width: 656px; background: transparent; border-radius: 24px;
  z-index: 99; transform: translateX(-50%); opacity: 0; animation: opacityAni .8s .2s ease forwards; 
  box-shadow: 10px 0 15px rgba(149,122,140,.5);}
.btn-floating.on {position: fixed; top: 39px;}
.btn-floating .btn {float: left; width: 50%; height: 100%;}
.btn-floating .btn1 {text-align: right;}
.btn-floating .btn2 {text-align: left;}
.btn-floating .btn img {max-width: 328px;}

@keyframes topMoveAni {
  0% {transform: translateY(-80px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@keyframes boxMoveAni {
  0% {transform: scale(0) translateY(200px); opacity: 0;}
  100% {transform: scale(1) translateY(0); opacity: 1;}
}
@keyframes itemMoveAni {
  0% {transform: scale(0) translateY(100px);}
  100% {transform: scale(1) translateY(0);}
}
@keyframes confettiMoveAni {
  0% {transform: scale(0) translateX(-50%) translateY(300px);}
  100% {transform: scale(1) translateX(-50%) translateY(0);}
}

@keyframes cardMoveAni1 {
  0% {transform: scale(0) rotate(6deg) translateX(-50%) translateY(300px);}
  100% {transform: scale(1) rotate(6deg) translateX(-50%) translateY(50px);}
}
@keyframes cardMoveAni2 {
  0% {transform: scale(0) rotate(-8deg) translateX(-50%) translateY(300px);}
  100% {transform: scale(1) rotate(-8deg) translateX(-50%) translateY(50px);}
}
@keyframes cardMoveAni1_2 {
  0% {transform: scale(1) rotate(6deg) translateX(-50%) translateY(50px);}
  100% {transform: scale(1) rotate(0) translateX(-50%) translateY(0);}
}
@keyframes cardMoveAni2_2 {
  0% {transform: scale(1) rotate(-8deg) translateX(-50%) translateY(50px);}
  100% {transform: scale(1) rotate(0) translateX(-50%) translateY(0);}
}

@keyframes opacityAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes upDownAni {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-25%);
  }
}
@keyframes upDownAni2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(30%);
  }
}