@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
body,th,td,input,select,textarea,button {font-size:16px; line-height:1.5; font-family: 'Nanum Gothic', sans-serif; color:#333} 



.closed_section{background: #dfdfdf; width: 100%; height: 100%; display: none; align-items: center; justify-content: center;}
.closed_section .sin_close_title{font-size: 1.8rem; margin-bottom: 20px; margin-top: 10px;}
.closed_section .sin_close_text{font-size: 1.3rem; margin-bottom: 20px; text-align: center;}
.closed_section .sin_close_footer{background: #2b2b2b; color:#969696; padding: 10px;}
.closed_section .sin_close_footer .top_list_box{}
.closed_section .sin_close_footer .top_list_box li{margin-bottom: 10px;}
.closed_section .sin_close_footer .top_list_box li img,
.closed_section .sin_close_footer .top_list_box li div{display: inline-block; vertical-align: middle;}
.closed_section .sin_close_footer .top_list_box li div p{color: #969696;}
.closed_section .sin_close_footer .top_list_box li div a{color: #969696;}
.closed_section .sin_close_footer .link_box{border-bottom: 1px solid #969696; border-top: 1px solid #969696}
.closed_section .sin_close_footer .link_box ul{padding: 10px 0; text-align: center;}
.closed_section .sin_close_footer .link_box ul li{display: inline-block; border-right: 1px solid #969696; margin-right: 10px; padding-right: 10px;}
.closed_section .sin_close_footer .link_box ul li:last-child{border-right: none;}
.closed_section .sin_close_footer .link_box ul li a{color: #969696;}
.closed_section .sin_close_footer .text_box{margin-top: 10px; text-align: center;}
.closed_section .sin_close_footer .text_box p{margin-bottom: 5px;}

#content{display: none;}



h1{font-size: 1.4rem; text-align: center;}
section > h1 >img{display: block; width: 100%; height: auto;}
.card_theme_content{width: 100%; max-width: 400px; margin:0 auto;}
.cover{position: relative; }
.cover > i{position: absolute; left: 15px; top: 15px; cursor: pointer; display: none; z-index: 300;}
.cover .flower{position: absolute; height:auto;}
.cover .flower1{left: 50%; top: 2%; transform: translateX(-50%); width: 15%; z-index: 100;}
.cover .belt{position: absolute; bottom: 25%; left: 50%; z-index: 100; display: block; width: 100%; height: auto; max-width: 317px; transform: translateX(-50%);}


.cover .bg_img{display: block; width: 100%; height: auto; position: relative; z-index: 200;}
.cover .cover_title_box{padding: 0px 23px;  font-size: 1.4rem; text-align: left; position:absolute; left: 0; top: 78%; box-sizing: border-box; width: 100%; z-index: 300;}
.cover .cover_title_box h1{text-align: center; padding-right: 0%;}
.cover .cover_img_content{position: absolute; left: 50%; top: 32%; width: 100%; height: 66%; transform: translateX(-50%); max-width: 400px; overflow: hidden; z-index: 100;}
.cover .cover_img_content > div{width: 100%; padding-top: 74%; position: relative; background: #FFF; }
.cover .cover_img_content .cover_img{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 100%;}
.cover .cover_img_content .stiker_box{position: absolute; left: 50%; bottom: 0;  transform: translateX(-50%); width: auto; height: 100%;}
.stiker{position: absolute; z-index: 100;}
.bar{display: block; width: 40px; height: 5px; margin:0 auto; background:#f1c1ad;}
.cover .bar{background: #FFF;}
.cover .date_box{text-align: center; padding-right: 0%; position: absolute; left: 0; bottom: 5%; width: 100%; z-index: 300; box-sizing: border-box;}
.cover .date_box p{padding-bottom: 5px; font-size: 1.3rem; color: #787878;}



.invitation{background: #fff;}
.invitation h1{padding-top: 30px;  color: #fff; letter-spacing: 8px;}
.invitation .text_box{text-align: center; padding: 0 10px; font-size: 1.3rem; color: #666;}
.invitation .text_box span{line-height: 2.2; }

.invitation .name_text{text-align: center; font-size: 1.3rem; color: #666; margin-top: 20px; padding-bottom: 30px;}
.invitation .name_text i{color: #fac7b9;}
.invitation .main_img_box{width: 100%; position: relative; overflow: hidden;}
/*.invitation .main_img_box:before{content: ""; display: block; padding-bottom: 100%;}*/
.invitation .main_img_box .main_img{display: block; width: 100%; height: auto;}
.invitation .main_img_box .main_stiker_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}





.invitation .name_box{margin:0 auto; background: #f4f3f2; padding: 20px 10px;}
.invitation .name_box .left{float: left; width: 50%; text-align: center;}
.invitation .name_box .right{float: right; width: 50%; text-align: center;}
.invitation .name_box  span{font-size: 1.2rem;  display: inline-block;}
.invitation .name_box  span.name{font-size: 1.5rem; margin-bottom: 10px; padding: 0 5px;}
.invitation .name_box  span.img-btn a{display: inline-block; width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; position: relative;}
.invitation .name_box  span.img-btn a:before{content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; background-image: url(../image/img_btn.png)}

.invitation .name_box .left.wname3,
.invitation .name_box .right.wname4{margin-bottom: 10px;}


/* 웨딩 관련 css */
.invitation .name_box .wedding{margin-top: 20px; margin-bottom: 10px;}
.invitation .name_box .wedding span{font-size: 1.3rem;}


/* 신랑 색 */
.invitation .name_box .left.wname1 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .left.wname1 span.img-btn.sms a{background-color: #b18463;}

/* 신부 색 */
.invitation .name_box .right.wname2 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .right.wname2 span.img-btn.sms a{background-color: #b18463;}


/* 신랑 아버지 색 */
.invitation .name_box .left.wname3 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .left.wname3 span.img-btn.sms a{background-color: #b18463;}


/* 신부 아버지 색 */
.invitation .name_box .right.wname4 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .right.wname4 span.img-btn.sms a{background-color: #b18463;}


/* 신랑 어머니 색 */
.invitation .name_box .left.wname5 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .left.wname5 span.img-btn.sms a{background-color: #b18463;}


/* 신부 어머니 색 */
.invitation .name_box .right.wname6 span.img-btn.tel a{background-color: #b18463;}
.invitation .name_box .right.wname6 span.img-btn.sms a{background-color: #b18463;}



.invitation .name_box span.tel a:before{background-position: 0 -120px;}
.invitation .name_box span.sms a:before{background-position: 0 -140px;}
.invitation .date_picker_content{}
.invitation .date_picker_content #D-DAY{text-align: center; margin: 30px 0 20px 0; color: #b18463; font-size: 1.9rem; font-weight: bold;}
.invitation .date_picker_content .calendar_box{background: #f4f0ed; padding: 20px 5%;}
.invitation .date_picker_content #calendar{width: 100%;text-align: left;}
.invitation .date_picker_content #calendar #tbCalendarYM{text-align: center; padding-bottom: 30px; color: #333333; font-size: 1.7rem; font-weight: bold;}
.invitation .date_picker_content #calendar .date td{display: inline-block; width: 14.28%; text-align: center; position: relative; font-size: 1.2rem; font-weight: bold}
.invitation .date_picker_content #calendar .datelist td:before{content: ""; display: block; padding-top: 100%;}
.invitation .date_picker_content #calendar .datelist span{position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold;}
.invitation .date_picker_content #calendar .datelist .active span{background: #b18463; color: #fff; border-radius: 50%; }




.thank_you_content{background: #fff; display: none;}
.thank_you_content h1{padding-top: 30px; margin-bottom: 30px; color: #fff; letter-spacing: 5px;}
.thank_you_content h1 img{display: block; width: 100%; height: auto;}
.thank_you_content .text_box{margin-top: 30px; text-align: center; padding: 0 10px; font-size: 1.3rem; color: #666;}




.comment{background:#FFF;}
.comment h1{padding-top: 30px; margin-bottom: 30px; color: #fac7b9; letter-spacing: 5px;}
.comment .comment_box{margin-top: 30px; text-align: center; padding: 0 10px; font-size: 1.3rem; color: #666;}











.photo{background: #FFF; padding-bottom: 30px;}
.photo h1{padding-top: 30px; color: #fac7b9; letter-spacing: 5px;}
.photo .sub_gallery_box{padding-top: 30px; padding-left: 15px; padding-right: 15px;}
.photo .sub_gallery_box figure{float: left; width: 33.33%;}
/*.photo .sub_gallery_box figure img{display: block; width: 100%; height: auto;}*/



.photo .sub_gallery_box figure{float: left;}
.photo .sub_gallery_box figure:first-child{width: 100%;}
.photo .sub_gallery_box figure{width: 33.3333%;}
.photo .sub_gallery_box figure a{display: block; width: 100%;height: 0; padding-bottom: 100%; position: relative; box-sizing: border-box;  overflow: hidden;}
.photo .sub_gallery_box figure a{border:5px solid #FFF;}
.photo .sub_gallery_box figure:nth-child(1) a{border:none;}
.photo .sub_gallery_box figure:nth-child(2) a{border-right: 2.5px solid #FFF; border-left: 0;}
.photo .sub_gallery_box figure:nth-child(3) a{border-left:  2.5px solid #FFF; border-right:  2.5px solid #FFF;}
.photo .sub_gallery_box figure:nth-child(4) a{border-left:  2.5px solid #FFF; border-right: 0;}
.photo .sub_gallery_box figure .curtain_box{width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; left: 0; top: 0; display: none; align-items: center; justify-content: center;}
.photo .sub_gallery_box figure .curtain_box span{color: #FFF; font-size: 3rem;}
.photo .sub_main_img{position: absolute; left: 50%; top: 50%; width: auto; height: 100%; transform: translate(-50%,-50%);}




.movie{background: #faf8f8; padding-bottom: 30px;}
.movie h1{padding-top: 30px; margin-bottom: 30px; color: #fac7b9; letter-spacing: 5px;}
.movie .movie_box{display: block; width: 100%; height: 0; padding-bottom: 56.25%; margin-top: 30px; position: relative;}
.movie .movie_box iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


.location{background: #faf8f8;}
.location h1{margin-bottom: 30px; color: #fac7b9; letter-spacing: 5px; box-sizing: border-box;}
.location .text_box{padding-top: 30px; text-align: center;}
.location .text_box strong{font-size: 1.9rem; font-weight: bold;}
.location .text_box p{font-size: 1.3rem;}
.location .text_box p.center{margin: 5px 0;}
.location .map_box{display: block; width: 100%; height: 0; padding-bottom: 100%; margin-top: 30px; position: relative;}
.location .map_box #map{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.location .map_box .map_text_box{width: 170px; text-align: center;}

.location .map_box #googleMap{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}



.location .load_map{padding: 0 15px; margin-bottom: 20px; margin-top: 30px; }
.location .load_map:last-child{margin-bottom: 0;}
.location .load_map p{margin-bottom: 5px;}
.location .load_map:last-child p:last-child{margin-bottom: 0;}
.location .load_map strong{font-size: 1.4rem; color: #555555; font-weight: bold;}
.location .load_map span{font-size: 1.2rem; color: #727781;}



.guest_book{background: #f5f4f5;}
.guest_book h1{padding-top: 30px; margin-bottom: 30px; color: #fac7b9; letter-spacing: 5px; text-align: center;}
.guest_book > strong{display: block; margin-top: 30px; margin-bottom: 30px; font-size: 1.5rem; font-weight: bold; text-align: center; color: #666;}
.guest_book .guest_link{display: block; width: 250px; height: 45px; background: #ffffff; color: #000; text-align: center; line-height: 45px; margin:0 auto; font-size: 1.3rem;}
.guest_book .guest_preview{padding-top: 40px;}
.guest_book .guest_preview ul li{padding: 0 10px; padding-bottom: 15px;}
.guest_book .guest_preview ul li > div{background: #eae9e9; padding: 5px 15px;}
.guest_book .guest_preview ul li > div span{font-size: 1.2rem;}
.guest_book .guest_preview ul li > div.top .naem{float: left;}
.guest_book .guest_preview ul li > div.top .time{float: right;}
.guest_book .guest_preview ul li > div.bom .text{float: left;  white-space: pre-line; word-break:break-all;}
.guest_book .guest_preview ul li > div.bom .close{position: relative; float: right; width: 15px; height: 15px; cursor: pointer;}
.guest_book .guest_preview ul li > div.bom .close em{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #000;}
.guest_book .guest_preview ul li > div.bom .close em.line1{transform: rotate(45deg);}
.guest_book .guest_preview ul li > div.bom .close em.line2{transform: rotate(-45deg);}
.guest_book .guest_preview_all button{display: block; width: 150px; height: 40px; line-height: 40px; text-align: center; color: #666; font-size: 1.3rem; border:1.5px solid #aaaaaa; margin:0 auto;}
.guest_book .guest_preview ul.close li:nth-child(n+3){display: none;}






.footer{background: #FFF; padding-top: 40px;}
.footer .bank_box{margin-bottom: 30px; text-align: center;}
.footer .bank_box p:first-child{font-size: 1.2rem; color: #555; margin-bottom: 10px;}
.footer .bank_box p span{color: #000; font-weight: bold;}
.footer .gallery_save{padding: 10px 0; background: #fac7b9; text-align: center;}
.footer .gallery_save span,
.footer .gallery_save button{display: inline-block; vertical-align: middle;}
.footer .gallery_save span{font-size: 1.2rem; color: #FFF; margin-right: 10px;}
.footer .gallery_save button{padding: 3px 5px; border-radius: 3px; background: #f5dddc; color: #2c76bf;}
.footer .sns_box{text-align: center; margin-bottom: 20px;}
.footer .sns_box a{display: inline-block; overflow: hidden; width: 48px; height: 48px; margin:0 4px; border-radius: 50%; background: url(../image/img_sns.png);}

.footer .sns_box a.kakao{background-color: #7c848a;}
.footer .sns_box a.face{background-color: #7c848a; background-position: 0 -144px;}
.footer .sns_box a.band{background-color: #7c848a; background-position: 0 -96px;}
.footer .sns_box a.story{background-color: #7c848a; background-position: 0 -48px;}

.footer .copyight{text-align: center; padding-bottom: 30px; font-size: 1rem;}

.meun_plus_btn{position: fixed; margin-right:-195px; right: 50%; bottom:25px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.4); transition: 0.3s; z-index: 200;}
.meun_plus_btn span{position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 70%; height: 2.5px; background: #FFF;}
.meun_plus_btn .line1{}
.meun_plus_btn span.line2{transform: translate(-50% , -50%) rotate(270deg); }
.meun_plus_btn.active{transform: rotate(45deg);}


.menu{display: none; opacity: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 199; transition: 0.3s;}
.menu ul{max-width: 400px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 0; overflow: hidden; transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.27);}
.menu ul li{text-align: right; margin-bottom: 10px;}
.menu ul li span{display: inline-block; vertical-align: middle; font-size: 1.3rem; color: #FFF;}
.menu ul li a{display: inline-block; vertical-align: middle; width: 40px; height: 40px; margin-left: 8px; margin-right: 2px; border-radius: 50%; background-color: #927660; position: relative;}
.menu ul li a:before{position: absolute; content: ""; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50% , -50%); background-image: url(../image/img_btn.png);}
.menu ul li:nth-child(2) a:before{background-position:0 -20px;}
.menu ul li:nth-child(3) a:before{background-position:0 -40px;}
.menu ul li:nth-child(4) a:before{background-position:0 -100px;}
.menu ul li:nth-child(5) a:before{background-position:0 -80px;}
.menu ul li:nth-child(6) a:before{background-position:0 -180px;}




@media screen and (max-width: 400px) {
	.meun_plus_btn{right: 8px; margin-right: 0;}
	.menu ul li a{margin-right: 5px;}
}


.pac-container{ z-index: 1500 !important; }