@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

.jua {font-family: 'Jua', sans-serif;}


/* 음식, 식당 */
#mainmodal {display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: #000; z-index: 9999;}
#modal-con {width: 100%; display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 10000;background: #FBF7EE;border-radius: 5px;text-align: center; max-width: 320px;height: 180px;}
.modal-con_ {display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%; position: relative;}
.modal-con_ > p {font-size: 16px; font-weight: 500; color: #511B00; margin-bottom: 18px; line-height: 1.4;}
.modal-con_ > a {width: 260px; height: 50px; background: #C9A18D; color: #fff; font-size: 20px; font-weight: 500; box-shadow: 6px 6px 6px 0 #EAE0C8;}
.qr_con_video video {width: 101%;height: 101%; position: absolute;left: -1px;top: -1px;z-index: 2;}
.qr-top-btn {display: flex;align-items: center;justify-content: center;}
.qr-top-btn > a {display: flex;align-items: center;}
.qr-top {z-index: 9;}



/* 스탬프 */
.stamp-top {width: 100%;height: 50px;position: fixed;top: 0;left: 0;background: #C9A18D;z-index: 2;}
.stamp-con {width: 100%; height: calc(var(--vh, 1vh) * 100); background: url(../../images/stamp-bg.png) ; background-size: 100% 100%; padding-top: 50px; text-align: center;}
.stamp-con  h1 > p {font-size: 12px; color: #511B00;}
.stamp-con  h1 > b {font-size: 22px; color: #AC281B;}
.stamp-con h1 > b > span {display: inline-block;vertical-align: middle;padding-right: 5px;padding-left: 1px;margin-top: -7px;}
.stamp-con h1 {width: 280px;margin: 0 auto;white-space: nowrap;margin-bottom: -15px;background: url(../../images/stamp-bg.png);position: relative;margin-top: 15px;}
.stamp-list {display: flex;flex-wrap: wrap;border: 2px solid #F05849;border-radius: 7px;padding-top: 28px;}
.stamp-list > li {width: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;}
.stamp-list > li:nth-child(9), .stamp-list > li:last-child {margin-bottom: -14px;}
.stamp-img {margin-bottom: -25px; position: relative;}
.stamp-name {position: relative;width: 110px;height: 25px;background: #AC281B;font-size: 14px;font-weight: 500;color: #fff;border-radius: 3px;padding: 2px 0;}
.inactive-bg {background: rgba(81,27,0,0.6);position: absolute;top: 0;left: 50%;width: 90px;height: 90px;border-radius: 100%;transform: translateX(-50%);}

.stamp-list > li > a.active .inactive-bg {display: none;}
.modal-con_ > button {position: absolute;top: 0;right: 0;width: 50px;height: 50px;}
.modal-con_.stamp > p {margin-bottom: 0;}
.modal-con_.stamp > p > span {color: #511B00; font-weight: 700;}



/* about */
.about-con {background: #FBF7EE; padding-top: 50px; padding-bottom: 25px;}
.about-con h1 {color: #511B00; text-align: center; margin-top: 40px;}
.about-con h1 > p {font-size: 18px; font-weight: 700; color: inherit;}
.about-con h1 > b {font-size: 36px; font-weight: normal; color: inherit;}
.about-con h1 > b > span {display: inline-block;vertical-align: middle; padding-left: 5px; margin-top: -3px;}
.about-img {max-width: 320px; margin: 0 auto; position: relative; z-index: 1;}
.about-img img {width: 100%;}

.about-list {margin-top: -20px;}
.about-list > li:not(:last-child){margin-bottom: 30px;}
.about-list > li {position: relative; background: #fff; border-radius: 5px; padding: 30px 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.about-list > li > h2 {font-size: 28px; font-weight: normal; margin-bottom: 12px;}
.about-list > li > p {font-size: 14px;color: #232323; margin-bottom: 10px;}
.about-list > li > p > span {font-weight: 700;}

.star {position: absolute;top: 20px;right: 12px;}
.foodImg01 {position: absolute;top: -90px; right: -20px; width: 170px; height: 135px;}
.foodImg02 {position: absolute;bottom: -80px; right: -20px; z-index: 1; width: 165px; height: 230px;}
.phone {position: absolute;bottom: 20px;right: -20px; width: 150px; height: 165px;}







@media screen and (max-width:320px){
    .stamp-con h1 {width: 220px;}
    .stamp-con h1 > p {font-size: 10px;}
    .stamp-con h1 > b {font-size: 16px;}
    .stamp-img img {width: 70px;}
    .inactive-bg {width: 70px; height: 70px;}


    .foodImg01 {display: none;}
    .foodImg02 {display: none;}
    .phone {display: none;}
    .about-list > li {padding: 15px 20px;}
}