@charset "UTF-8";
body {margin:0;}
.area {padding: 0 10%;}
h2,
.area h2 {text-align: center; margin-bottom: 20px;}
.sound {overflow:hidden; text-indent:-5000px; position:absolute; line-height:0; font-size:0; width:0; height:0;}
input:focus {border: 1px solid #94caed !important; outline: 0;}
.img_con img {max-width: 100%;}

/***** 청첩장 *****/
#area1 {position: relative; max-width:800px; margin: 0 auto; overflow: hidden;}
#area1 img {display: table; margin: 0 auto; width: 100%;}
#area1 #lottieBox {position: absolute; width:100%; top:0; left:0; z-index:1;}

/* #area1 .photo-image {right:0;} */

#area1 .heart{position:absolute;bottom:0;width:100%;height:100%; z-index: 10;}
#area1 .heart img{width:40%;margin:0;position: absolute;}
#area1 .heart .img01{transform: scaleX(-1);left:0;bottom:20%;animation: img01Animation 4.5s infinite linear;}
#area1 .heart .img02{right:0;bottom:20%;animation: img02Animation 3s infinite linear;}

/* @media screen and (min-width:801px){
    #area1 #lottieBox { right:50%; transform: translateX(50%);}
} */

/* Base
----------------------- */
* {-webkit-text-size-adjust: none; -moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;} 
html,body {height:100%;}
html {font:16px/1.2 "나눔명조","Nanum Myeongjo", "Malgun Gothic", "나눔고딕", "NanumGothic", "NanumGothicWEB", "돋움", Dotum, "굴림", Gulim, sans-serif; color:#666; letter-spacing:-1px; }
html, button, input, select, textarea {font:16px/1.2 "나눔명조","Nanum Myeongjo", "맑은 고딕", "Malgun Gothic", "나눔고딕", "NanumGothic", "NanumGothicWEB", "돋움", Dotum, "굴림", Gulim, sans-serif; color:#666; letter-spacing:-1px;}
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, b, 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; vertical-align: baseline;}
li {list-style: none;}
/* Links
----------------------- */
a {text-decoration: none;}
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }

/* Typography
----------------------- */
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

@keyframes img01Animation {
    0% {
        transform: translate(-200px, 100%) scaleX(-1);
    }
    100% {
        transform: translate(100px, -500%) scaleX(-1);
    }
}

@keyframes img02Animation {
    0% {
        transform: translate(100%, 0) scaleX(-1);
    }
    100% {
        transform: translate(40%, -400%) scaleX(-1);
    }
}