@import url(https://fonts.googleapis.com/earlyaccess/kopubbatang.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400&display=swap');
a{color:#717171;}
.clear{clear:both;}
* {box-sizing: border-box; font-family: 'KoPub Batang', serif !important; font-size: 14px;}
body {max-width: 550px; height: 100vh; margin:0 auto; }

.ribbon_wrap .bgm {position: absolute; top: 4%;left: 14%; z-index: 9999;width: 30px;background-color: rgba(213, 178, 156, 0.32); height: 30px;padding: 8px;border-radius: 20px;}
.ribbon_wrap .bgm img {width: 100%;}

.ribbon_wrap {width: 100%; height: 100%; position: relative; z-index: 99; background-color: #f4efea;}
.ribbon_wrap .swiper-container {width: 100%; height: 100%; overflow: hidden;}
.ribbon_wrap .swiper-container .swiper-slide {overflow: hidden; }
.ribbon_wrap .swiper-pagination {text-align: center; padding: 0 0 3vh 0; z-index:5;}

/* 페이지네이션 */
.ribbon_wrap .swiper-container-horizontal>.swiper-pagination-bullets,
.ribbon_wrap .swiper-pagination-custom, .swiper-pagination-fraction {display: inline-block; text-align: center; width: 100%;}
.ribbon_wrap .swiper-pagination-bullet-active {background-color: #f3b2b0;}
.ribbon_wrap .swiper-pagination-bullet {background-color: #f3b2b0;}


/* 슬라이드1 ************************************************************/
.ribbon_wrap .slide1 {position: relative; background-color: #f4efea;}
.ribbon_wrap .slide1 .main_wrap {background-image: url(/skin/F/images/ribbon_top.png); width: 100%; height: 88vh; margin-top: 3vh; background-size: 100% 100%;}
.ribbon_wrap .slide1 .main_wrap .title {font-size: 14px;color: #706967;margin: 6vh 0 0;padding: 10px;display: inline-block;position: relative;border-top: 1px solid #b3a4a0;border-bottom: 1px solid #b3a4a0;}
.ribbon_wrap .slide1 .main_wrap .title .heart1 {position: absolute; top: 48px; left: -30%; width: 14%;}
.ribbon_wrap .slide1 .main_wrap .title .heart2 {position: absolute; top: 12px; right: -36%; width: 18%;}
.ribbon_wrap .slide1 .main_wrap .wedding_info_wrap {width: 80%; margin: 0 auto; display: inline-block; margin-top: 5vh;}
.ribbon_wrap .slide1 .main_wrap .wedding_info_date .top_date {font-size: 4.2vh; width: 30px; display: inline-block; margin-top: 10px;}
.ribbon_wrap .slide1 .main_wrap .wedding_info_name {display: inline-block;text-align: center;font-size: 3.2vh;line-height: 5vh;color: #706967;letter-spacing: 8px;}
.ribbon_wrap .slide1 .main_wrap .wedding_info_name .and {font-style: italic;letter-spacing: 0;font-size: 2.8vh;}
.ribbon_wrap .slide1 .main_wrap .wedding_info_name .date {font-size: 2.1vh;letter-spacing: 0;line-height: 1.5;margin-top: 3vh;}


/* 슬라이드2 ************************************************************/
.ribbon_wrap .slide2 {background-color: #f4efea;}
.ribbon_wrap .slide2 .info_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide2 .info_wrap .info_wrap_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.ribbon_wrap .slide2 .info_wrap .title{color: #333; font-size: 14px;}
.ribbon_wrap .slide2 .info_wrap .title img {width: 17px; vertical-align: middle; margin-bottom: 2vh;}
.ribbon_wrap .slide2 .info_wrap .article{font-size:14px; color: #555; margin-top: 5vh; line-height: 30px; padding: 0 25px; overflow-y: scroll; height: 33.8vh;}

.ribbon_wrap .slide2 .profile{padding-top: 1vh;color: #555;line-height: 30px;/* border-top: 1px solid #d0bae8; */width: 90%;margin: 1vh auto 0;}
.ribbon_wrap .slide2 .profile .groom::before {content: ""; width: 18px; height: 2px; margin-bottom: 13px; background-color: #f3b2b0; display: inline-block;}
.ribbon_wrap .slide2 .profile li{display:inline-block;width: 100%;vertical-align:top; margin-bottom: 1vh;}
.ribbon_wrap .slide2 .profile li .name{color:#555; font-size:14px;}
.ribbon_wrap .slide2 .article{font-size:14px; color: #555; margin-top: 28px; line-height: 26px; padding: 0 27px;}


/* 슬라이드3 ************************************************************/
.ribbon_wrap .slide3 {background-color: #f4efea;}
.ribbon_wrap .slide3 .pic_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide3 .pic_wrap .pic_wrap_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.ribbon_wrap .slide3 .pic_wrap .title{color: #333; font-size: 14px;}
.ribbon_wrap .slide3 .pic_wrap .title img {width: 17px; vertical-align: middle; margin-bottom: 2vh;}
.ribbon_wrap .slide3 .pic_wrap .photo{height:auto; display:block;overflow:hidden; margin-top: 3vh;}
.ribbon_wrap .slide3 .pic_wrap .photo .gallery-wrap{background-color: #fff;background-repeat: repeat;padding:15px 10px 10px; margin-bottom:10px;}
.ribbon_wrap .slide3 .pic_wrap .photo .gallery{text-align: center; height: 47vh; overflow-y: scroll;}
.ribbon_wrap .slide3 .pic_wrap .photo .gallery div{width: 32%;height: 17vh;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;}

.ribbon_wrap .slide3 .pic_wrap .photo .scroll {font-family: 'Noto Sans KR', sans-serif !important; color: #dd9589; font-size: 12px; margin-top: 10px; text-align: right;}
.ribbon_wrap .slide3 .pic_wrap .photo .scroll .xi-hand-pointing {transform: rotate(-85deg); font-size: 16px;}


/* 슬라이드4 ************************************************************/
.ribbon_wrap .slide4 {background-color: #f4efea;}
.ribbon_wrap .slide4 .watch_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide4 .watch_wrap .watch_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.ribbon_wrap .slide4 .title{color: #333; font-size: 14px;}
.ribbon_wrap .slide4 .title img {width: 17px; vertical-align: middle; margin-bottom: 2vh;}
.ribbon_wrap .slide4 .movie .cont {width: 95%; margin: 0 auto; margin-top: 2.5vh;}


/* 슬라이드5 ************************************************************/
.ribbon_wrap .slide5 {background-color: #f4efea;}
.ribbon_wrap .slide5 .watch_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide5 .watch_wrap .watch_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.ribbon_wrap .slide5 .title{color: #333; font-size: 14px;}
.ribbon_wrap .slide5 .title img {width: 17px; vertical-align: middle; margin-bottom: 2vh;}
.ribbon_wrap .guestbook{margin-top:30px;}
.ribbon_wrap .guestbook .cont {background-color:#fff;}
.ribbon_wrap .guestbook .cont li{padding:10px 5px; border-bottom:1px dotted #ddd; text-align:left; }
.ribbon_wrap .guestbook .cont li:last-child{border-bottom:0;}
.ribbon_wrap .guestbook .cont,
.ribbon_wrap .guestbook .cont a{color:#777; font-size:11px; line-height:16px; width: 93%; margin: 0 auto; font-family: 'Noto Sans KR', sans-serif !important;}
.ribbon_wrap .guestbook .cont .name{display:inline-block; padding-right:3px; font-family: 'Noto_b' !important; font-size: 12px; color: #333;}
.ribbon_wrap .guestbook .cont .date{display:block; font-family: 'Noto Sans KR', sans-serif !important; font-size: 12px;}
.ribbon_wrap .guestbook .cont .memo{display:block; padding-top:5px; font-size:12px; word-break: break-all; font-family: 'noto_r' !important;}
.ribbon_wrap .guestbook .scroll {font-family: 'Noto Sans KR', sans-serif !important; color: #dd9589; font-size: 12px; margin-top: 10px; text-align: right; width: 93%;}
.ribbon_wrap .guestbook .scroll .xi-hand-pointing {transform: rotate(-85deg); font-size: 16px;}
.ribbon_wrap .guestbook .write{margin-top: 10px; margin-right: 10px; display: inline-block; float: right;}
.ribbon_wrap .guestbook .write a {font-size: 11px; font-family: 'noto_r' !important;}
.ribbon_wrap .guestbook .write a:first-child:after{content: " | ";opacity:0.5; }

/* 슬라이드6 ************************************************************/
.ribbon_wrap .slide6 {background-color: #f4efea; position: relative;}
.ribbon_wrap .slide6 .call_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide6 .call_wrap .call_wrap_inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 95%;}

/* 신랑신부 연락처 */
.ribbon_wrap .call_wrap .call {margin: 0 auto;}
.ribbon_wrap .call_wrap .call .calling {margin-bottom: 20px;}
.ribbon_wrap .call_wrap .call .calling span {color: #717171;font-weight: normal;}
.ribbon_wrap .call_wrap .call .calling>a {display: inline-block;vertical-align: middle;}
.ribbon_wrap .call_wrap .call .calling>a i {margin: 0 10px;font-size: 18px;border-radius: 100%;}
.ribbon_wrap .call_wrap a.parents {border: 1px solid #e4dfdc;border-radius: 20px;width: calc(100% - 16%);display: inline-block;height: 2.8rem;line-height: 2.8rem;color: #777;box-sizing: border-box;/* margin-bottom: 35px; */font-weight: normal;}

/* 혼주에게 연락하기 */
.ribbon_wrap .call_parents_black {background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 1;}
.hidden {width: 100%; height: 100%; min-height: 100%; overflow: hidden;}
.ribbon_wrap .call_parents_wrap {background-color: #fff;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 300px;position: absolute;/* border-radius: 5px; */display: none; z-index: 2;}
.ribbon_wrap .call_parents_wrap .tit {display: inline-block;width: 100%;line-height: 45px;background-color: #dd9589;color: #fff;font-family: 'Noto_m' !important;}
.ribbon_wrap .call_parents_wrap .tit i {font-size: 19px;margin: 12px;position: absolute;right: 0;color: #fff;}
.ribbon_wrap .call_parents_wrap>li {width: 100%;margin: 0 auto;text-align: left;display: inline-block;}
.ribbon_wrap .call_parents_wrap>li>p {padding: 10px 0;font-family: 'noto_m' !important;text-indent: 8px;background-color: #f7f7f7;color: #777;}
.ribbon_wrap .call_parents_wrap>li>p i {color: #d8816d;font-size: 10px;margin-right: 10px;}

.ribbon_wrap .call_parents_wrap .groom_call_inner {text-align: center;width: 82%;margin: 10px auto;}
.ribbon_wrap .call_parents_wrap .groom_call_inner>p {display: inline-block;font-family: 'noto_r' !important;color: #777;}
.ribbon_wrap .call_parents_wrap .groom_call_inner p:first-of-type {width: 58%; text-align: left;}
.ribbon_wrap .call_parents_wrap .groom_call_inner p:nth-of-type(2) {width: 40%; text-align: right;}

.ribbon_wrap .call_parents_wrap .bride_call_inner {text-align: center;width: 82%;margin: 10px auto;}
.ribbon_wrap .call_parents_wrap .bride_call_inner>p {display: inline-block;font-family: 'noto_l';color: #777; font-family: 'noto_r' !important;}
.ribbon_wrap .call_parents_wrap .bride_call_inner p:first-of-type {width: 58%; text-align: left;}
.ribbon_wrap .call_parents_wrap .bride_call_inner p:nth-of-type(2) {width: 40%; text-align: right;}
.ribbon_wrap .call_parents_wrap .only-mobile {display: inline-block; vertical-align: middle;}
.ribbon_wrap .call_parents_wrap .only-mobile i {margin: 0 10px; font-size: 18px;}

/* 계좌번호 */
.ribbon_wrap .deliver_bank .title{color: #333; font-size: 14px;}
.ribbon_wrap .deliver_bank .title img {width: 17px;vertical-align: middle;margin-bottom: 2vh;}
.ribbon_wrap .deliver_bank {padding-top: 3vh;}

.ribbon_wrap .deliver_bank a.side {width: 100%;/* border-radius: 3px; */border: 1px solid #dd9589;color: #dd9589;padding: 8px;display: inline-block;box-sizing: border-box;font-family: 'noto_r' !important;margin-bottom: 10px;font-size: 13px;position: relative;}
.ribbon_wrap .deliver_bank a>span {position: absolute;right: 19px;top: 50%;display: block;width: 9px;height: 1px;background-color: #dd9589;}
.ribbon_wrap .deliver_bank a>span.plus {transform: rotate(90deg);}
.ribbon_wrap .deliver_bank a.on>span.plus {display: none;}
.ribbon_wrap .deliver_bank .bank_hide {display: none;}
.ribbon_wrap .deliver_bank .bank_hide>ul li {padding: 0 10px 10px;}

.ribbon_wrap .deliver_bank .deliver_bank_inner {width: 90%; max-width: 300px; display: inline-block; margin-top: 10px;}

.ribbon_wrap .deliver_bank .deliver_bank_inner li {margin-bottom: 20px;text-align: left;}
.ribbon_wrap .deliver_bank .deliver_bank_inner .bank_hide {overflow-y: scroll; height: 200px;}
.ribbon_wrap .deliver_bank .deliver_bank_inner li:last-of-type {margin-bottom: 0;}
.ribbon_wrap .deliver_bank .deliver_bank_inner li>p {text-align: left;height: 2rem;line-height: 2rem;font-size: 13px;font-family: 'Noto_M' !important;color: #555;}

.ribbon_wrap .deliver_bank .middle_border>li {width: 100%; height: 1px; background-color: #ddd; display: block; margin-top: 20px; margin-bottom: 10px !important; padding: 0 !important}

.ribbon_wrap .deliver_bank .deliver_bank_inner li span {font-size: 12px;font-family: 'noto_r' !important; line-height: 2rem;}
.ribbon_wrap .deliver_bank .deliver_bank_inner li span:nth-of-type(1) {text-align: left;}
.ribbon_wrap .deliver_bank .deliver_bank_inner li span:nth-of-type(3) {width: 80%;display: inline-block;text-align: left;background-color: #fafafa;text-indent: 10px;}
.ribbon_wrap .deliver_bank .deliver_bank_inner li .account_copy {width: 17%;display: inline-block;background-color: #dd9589;color: #fff;text-align: center; cursor: pointer;}



/* 슬라이드7 ************************************************************/
.ribbon_wrap .slide7 {background-color: #f4efea;}
.ribbon_wrap .slide7 .load_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide7 .load_wrap .load_inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.ribbon_wrap .slide7 .load_wrap .load_inner .map {max-width: 420px; margin: 0 auto;}

/* 지도 */
.ribbon_wrap .slide7 .title{color: #333; font-size: 14px;}
.ribbon_wrap .slide7 .title img {width: 17px; vertical-align: middle; margin-bottom: 2vh;}
.ribbon_wrap .slide7 #map {width: 100% !important;height: 28vh !important;margin-top: 2vh;}
.ribbon_wrap .slide7 #nmap{width:100%;height:500px;}
.ribbon_wrap .slide7 .map-zoom{}
.ribbon_wrap .slide7 .map-zoom img{width:100%}
.ribbon_wrap .slide7 .navi {width: 100%;text-align: right;padding: 15px 15px 0;box-sizing: border-box;}
.ribbon_wrap .slide7 .navi_in span {font-family: 'noto_b' !important;font-size: 12px;}
.ribbon_wrap .slide7 .navi_in {font-family: 'noto_r' !important;display: inline-block;padding: 0.4rem 11px;background-color: #f4efea;border-radius: 5px;font-size: 11px;}
.ribbon_wrap .slide7 .navi_in img {height: 18px;vertical-align: middle;margin-right: 5px;}

.ribbon_wrap .slide7 .direction{padding: 1vh 8%;}
.ribbon_wrap .slide7 .direction table{width:100%; border-collapse: collapse; }
.ribbon_wrap .slide7 .direction th,
.ribbon_wrap .slide7 .direction td{color:#333;font-size:13px;padding: 0 0px 5px 0px;font-family: 'Noto Sans KR', sans-serif !important;}
.ribbon_wrap .slide7 .direction th{width: 10%;text-align: left;color: #1b1e31;padding: 0px 0px 5px;font-family: 'Noto Sans KR', sans-serif !important;}
.ribbon_wrap .slide7 .direction td{width:auto; text-align:left; line-height:18px;}

/* 슬라이드8 ************************************************************/
.ribbon_wrap .slide8 {background-color: #f4efea;}
.ribbon_wrap .slide8 .share_wrap {background-color: #fff;width: 90%;height: 94vh;margin: 0 auto;margin-top: 3vh;position: relative;}
.ribbon_wrap .slide8 .share_wrap .share_inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}

.ribbon_wrap .sns {margin: 0;display: inline-block;width: 100%;}
.ribbon_wrap .sns ul {display: inline-block;text-align: center;width: 85%;}
.ribbon_wrap .sns li {float: left; width: 25%; font-size: 13px;}
.ribbon_wrap .sns li i {font-size: 25px;text-align: center;vertical-align: middle;color: #dd9589;border: 1px solid #dedede;padding: 10px;border-radius: 50%;}
.ribbon_wrap .sns li span {display: none;}

/* 갤러리 전체화면 */
#gallery-view {width: 100%; height: 100%; position: fixed; top: 0; left: 50%; background: #333; z-index: 9; max-width: 550px; transform: translate(-50%, 100%);}
#gallery-view .swiper-container {height: 100%;}
#gallery-view .swiper-slide {background-size: contain; background-repeat: no-repeat; background-position: center;}
#gallery-view .close {background-image: url("/skin/test/images/close.png"); background-repeat: no-repeat; background-size: cover; color: #fff; height: 20px; position: absolute; right: 10px; text-indent: -9999px; top: 10px; width: 20px; z-index: 99;}

#gallery-view .swiper-button-next.swiper-button-disabled, #gallery-view  .swiper-button-prev.swiper-button-disabled {opacity: 1;}

#gallery-view .swiper-button-next {background-image: url(/skin/test/images/right_btn.png) !important; background-size: auto; right: 0px; width: 30px; height: 40px; background-color: rgb(0,0,0,0.2);}
#gallery-view .swiper-button-prev {background-image: url(/skin/test/images/left_btn.png) !important; background-size: auto; left: 0px; width: 30px; height: 40px; background-color: rgb(0,0,0,0.2);}

#gallery-view .swiper-button-prev:after, #gallery-view .swiper-container-rtl .swiper-button-next:after {content: none;}
#gallery-view .swiper-button-next:after, #gallery-view .swiper-container-rtl .swiper-button-prev:after {content: none;}

/* 인스타 유튜브 라이브 스트리밍 */
.ribbon_wrap .live_bottom {margin-bottom: 10px !important;}


/* 광고 */
#footer > .pm{position:relative;}
#footer > .pm img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;}

/*참석여부*/
.sign{padding: 10px 0px; font-size: 13px;width: 90%;margin: 0 auto; border: 1px solid #f3b2b0; margin-bottom: 30px;}
.sign > a {color: #fff; font-family: 'Noto Sans KR', sans-serif !important; color: #f3b2b0;}
.sign > a > i{font-size: 25px;vertical-align: middle; color: #f3b2b0;}