.hide{
  display: none;
}
.circleBox {
width: 100%;
position: absolute;
bottom: -70px;
display: flex;
align-items: center;
z-index: 9999;
cursor: pointer;
justify-content: center;
}
.circleBox .circle {
width: 40px;
height: 40px;
font-weight: 300;
color: white;
font-size: 35px;
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 2px solid white;
}
.popupBox {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 0 6%;
z-index: 9999;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.5);
}
.popupBox .reservation {
margin-top: 10%;
border-radius: 5%;
padding-bottom: 10%;
background: linear-gradient(0deg, #ffffff 60%, rgba(255, 76, 76, 0.2) 100%);
background-color: white;
position: relative;
}
.popupBox .reservation .reservationTitle {
padding: 8% 0 0 0;
text-align: center;
font-size: 28px;
color: #333333;
line-height: 28px;
}
.popupBox .reservation .reservationTxt {
padding: 4% 5% 0 5%;
font-size: 20px;
color: #333333;
line-height: 28px;
}
.popupBox .reservation .inputBox {
padding: 4% 5% 0 5%;
}
.popupBox .reservation .inputBox input {
width: 100%;
height: 50px;
outline: 0;
border: 0;
font-size: 20px;
text-indent: 40px;
border-radius: 20px;
background-color: #FAFAFA;
}
.popupBox .reservation .btnBox {
padding: 5% 5% 0 5%;
}
.popupBox .reservation .btnBox .btn {
width: 100%;
height: 50px;
color: white;
text-align: center;
border-radius: 20px;
line-height: 50px;
font-size: 20px;
background-color: #FF4C4C;
}
.popupBox .feedbackBox {
margin-top: 10%;
border-radius: 5%;
padding-bottom: 10%;
background: linear-gradient(0deg, #ffffff 60%, rgba(0, 168, 255, 0.2) 100%);
background-color: white;
position: relative;
}
.popupBox .feedbackBox .feedbackTitle {
padding: 8% 0 0 0;
text-align: center;
font-size: 28px;
color: #333333;
line-height: 28px;
}
.popupBox .feedbackBox .feedbackType {
padding: 4% 5% 0 5%;
font-size: 20px;
color: #333333;
line-height: 28px;
}
.popupBox .feedbackBox .feedbackList {
padding: 0% 5% 0 5%;
display: flex;
flex-wrap: wrap;
}
.popupBox .feedbackBox .feedbackList li {
width: auto;
padding: 1% 4%;
margin-right: 3%;
margin-top: 2%;
color: #4D4D4D;
font-size: 15px;
border-radius: 10px;
background-color: #FAFAFA;
}
.popupBox .feedbackBox .feedbackList li.active {
color: white;
background-color: #FF4C4C;
}
.popupBox .feedbackBox .textBox {
padding: 4% 5% 0 5%;
}
.popupBox .feedbackBox .textBox textarea {
width: 100%;
height: 80px;
border: 0;
outline: 0;
color: #999999;
font-size: 14px;
padding-top: 10px;
text-indent: 20px;
background-color: #FAFAFA;
}
.popupBox .feedbackBox .infoTxt {
padding: 4% 5% 0 5%;
color: #333333;
font-size: 20px;
line-height: 20px;
}
.popupBox .feedbackBox .inputBox {
padding: 4% 5% 0 5%;
}
.popupBox .feedbackBox .inputBox input {
width: 100%;
height: 50px;
outline: 0;
border: 0;
color: #999999;
font-size: 16px;
text-indent: 40px;
border-radius: 20px;
background-color: #FAFAFA;
}
.popupBox .feedbackBox .ysTxt {
padding: 1% 5% 0 5%;
font-size: 14px;
color: #999999;
}
.popupBox .feedbackBox .btnBox {
padding: 5% 5% 0 5%;
}
.popupBox .feedbackBox .btnBox .btn {
width: 100%;
height: 50px;
color: white;
text-align: center;
border-radius: 20px;
line-height: 50px;
font-size: 20px;
background-color: #FF4C4C;
}


.fackBtn{padding: 2px 5px;border-radius: 5px 0 0 5px; position: absolute;cursor: pointer;top: 0px;right: 0px;height: 20px;font-size: 14px;color: red;line-height:20px;text-decoration: underline;}
.fackBtn:before{content: "!";position: relative;top:4px;vertical-align: top;display: inline-block;padding: 0 4px;margin-right: 3px;height: 12px;line-height: 12px;font-size: 10px;border: 1px solid red;color:red;border-radius: 50%;text-align: center;}
.fackBtn:hover{color: red}
.fackBtn:hover:before{color: red;border-color:red}
/* feedback */
.fackBtn{cursor: pointer;}