@charset "UTF-8";
/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Libre+Baskerville&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Eczar:wght@400;600&family=Libre+Baskerville:ital@0;1&display=swap');

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;}
#area1 img {display: table; margin: 0 auto; width: 100%;}

.d_day_box {position: absolute; top: 5.5%; left: 7%; background: #e0dad5; border-radius: 50%; z-index: 999;}
.d_day_box div {position: absolute; left: -44%; bottom: 42%; width: 100%; height: 100%; transform: rotate(-90deg);}
.d_day_box span {position: absolute; top:0; left: 0; width: auto; transform-origin: bottom center; font-family: 'EB Garamond', serif; color: #908981; letter-spacing: 0;}

.d_day_box .d_day { text-align: center; color:#908981; letter-spacing: -0.15px; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic;}

.d_day_box span:nth-child(8) {transform:rotate(43deg) !important;}
.d_day_box span:nth-child(10) {transform:rotate(53deg) !important;}
.d_day_box span:nth-child(12) {padding-right: 1px !important;}
.d_day_box span:nth-child(13) {transform:rotate(71deg) !important;}


@media screen and (min-width:801px) {
    
    .d_day_box { width: 176px; height: 176px; line-height: 176px; }
    .d_day_box span {font-size: 18px;}
    .d_day_box .d_day {font-size: 42px !important;}
}

@media screen and (max-width:800px) {
    .d_day_box { width: 130px; height: 130px; line-height: 130px; }
    .d_day_box span {font-size: 14px;}
    .d_day_box .d_day {font-size: 30px !important;}
}

@media screen and (max-width:480px) {
    .d_day_box {width: 90px; height: 90px; line-height: 90px;}
    .d_day_box span {font-size: 10px;}
    .d_day_box .d_day { font-size: 22px !important;}
}

@media screen and (max-width:300px) {
    .d_day_box {width: 60px; height: 60px; line-height: 60px;}
    .d_day_box .d_day {font-size: 13px !important;}
}

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