@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%;}

/***** 청첩장 *****/

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

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

.flower1 {
    background-image: url(https://resources.barunsonmcard.com/upload/template/MC3215/flower1.png);
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
}
.flower2 {
    background-image: url(https://resources.barunsonmcard.com/upload/template/MC3215/flower2.png);
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
}
.flower3 {
    background-image: url(https://resources.barunsonmcard.com/upload/template/MC3215/flower3.png);
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
}

/* 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 {}