@import url('https://fonts.cdnfonts.com/css/voltaire');
@import url('https://fonts.cdnfonts.com/css/cloister-black');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');
@import url('https://fonts.cdnfonts.com/css/rousseau-deco');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap');

:root{
	--color-primary:#E9B129;
}
html{
	font-size:13px;
}

body{
	min-width:1200px;
}
@media(max-width:767px){
	body{
		min-width:100%;
		max-width:100%;
	}
}
.align-center{
	text-align:center!important;
}
.fluid{
	width:100%;
}
input,
select{
	
}
textarea{
	border-radius:2px!important;
}
input:not(readonly="readonly"):focus,
select:focus,
textarea:focus{
	border-color:#121212!important;
	outline:0;
}
.half{
	width:50%!important;
}
body.active::before{
	content:'';
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:9998;
	background-color:rgba(0,0,0,.8);
}
#wrapper{
	overflow-x:hidden;
}
#mobileMent{
	display:none;
}


@media screen and (orientation: landscape) {
	html,body{
		width:100vw;
		height:100vh;
	}

}


@media (hover: none) and (pointer: coarse) { /* 모바일 세로모드 */
	#wrapper{
		display:none;
	}
	#mobileLogo{
		height:30px;
		transform: rotate(-90deg);
		display:flex;
		align-items:center;
		justify-content: center;
		
	}
	#mobileMent{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		display:flex;
		align-items:center;
		justify-content:center;
		height:100%;
		z-index:9999;
	}
	.rotate-guide {
	  position: fixed;
	  inset: 0;
	  background: #111;
	  color: #fff;
	  z-index: 9998;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  gap: 1.5rem;
	  text-align: center;
	}

/* 📱 휴대폰 바디 */
.phone {
  width: 70px;
  height: 120px;
  border: 3px solid #fff;
  border-radius: 12px;
  position: relative;
  animation: rotatePhone 2.2s ease-in-out infinite;
  transform-origin: center center;
}

/* 📱 화면 */
.phone .screen {
  position: absolute;
  inset: 8px;
  border-radius: 6px;
  background: #333;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 🔁 회전 애니메이션 */
@keyframes rotatePhone {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

/* 텍스트 */
.rotate-guide p {
  font-size: 1rem;
  opacity: 0.85;
}
}
.btn{
	box-shadow:none;
	border-radius:0;
	display:inline-flex;
}
.btn.btn-danger{
	background-color:red;
	color:#fff;
	border:1px solid #121212;
}
.btn.btn-small{
	height:24px;
	padding:.5rem 0;
	min-width:50px;
	font-size:.9rem;
	width:auto;
}
.btn.btn-primary{
	border-color:#121212;
	color:#121212;
}
.action{
	margin-top:1rem;
}
.table-title{
	display:block;
	background-color:#333;
	color:#fff;
	padding:1rem;
	text-align:center;
	width:100%;
	font-size:1.5rem;
	font-weight:bold;
	margin-bottom:1px;
}
table{
	width:100%;
	border-collapse:collapse;
	border:1px solid #333;
}
table thead tr{
	background-color:var(--color-primary);
	color:#121212;
	font-weight:bold;
	text-align:center;
}
table thead th{
	border-right:1px solid #fff;
	line-height:1.2;
	border-bottom:1px solid #121212;
}
table thead th:last-child{
	border-right:0;
}
table th,
table td{
	padding:.5rem;
}
table td{
	border-right:1px solid #dfdfdf;
}
table td:last-child{
	border-right:0;
}


#contact{
	margin-top:1rem;
}
#contact th,
#contact td{
	font-size:1.1rem;	
}
#contact tbody tr{
	border-bottom:1px solid #dfdfdf;
}
#contact tbody tr:last-child{
	border-bottom:0;
}
#contact tbody tr th{
	border-right:1px solid #ddd;
	background-color:#f8f8f8;
	font-weight:bold;
}
#contact .required{
	font-size:.9rem;
	color:red;
	padding-left:.5rem;
}
#contact .required::before{
	content:'*';
}
#contact input.total{
	border:0;
	width:100px!important;
	text-align:right;
	font-weight:bold;
	font-size:1.3rem!important;
}

#orderSubmit{background-color:transparent;height:auto}
#orderSubmit img{height:auto;width:30%;}

/*
	Admin
*/
#admin #header{padding:3rem 0;}
#admin #header .container{position:relative;}
#admin #header__brand{font-size:2rem;font-weight:bold;}
#admin #header__logout{position:absolute;right:0;top:50%;transform:translateY(-50%)}
#admin #header__logout .btn{font-size:1.2rem;padding:1rem;}
#admin table{border-bottom:1px solid #121212;}
#admin table tbody tr{}
#admin table tbody tr td{border-right:0;border-bottom:1px solid #bbb;}
#admin table tbody tr:last-child{border-bottom:0;}
#admin table tbody tr:hover{background-color:#f1f1f1;}
#admin table th,
#admin table td{padding:.5rem 1rem;white-space:nowrap}
#admin table th{padding:1rem 1rem}
#admin table ul{display:table;border:1px solid #333;border-bottom:0;border-collapse:collapse;overflow:hidden;}
#admin table ul > li{display:table-row;border-bottom:1px solid #ddd;}
#admin table ul > li:last-child{border-bottom:1px solid #333;}
#admin table ul > li div{width:100%;white-space:nowrap;display:table-cell;padding:.5rem;border-right:1px solid #ddd;background-color:#fff;font-size:.95rem}
#admin table ul > li div:nth-child(1){}
#admin table ul > li div:nth-child(2),
#admin table ul > li div:nth-child(3){max-width:80px;min-width:80px;text-align:right;flex:0}
#admin table ul > li div:nth-child(3){border-right:0;}
#admin table ul > li em{padding:0 .5rem;color:#ddd;}
#admin table ul > li .badge{padding:.15rem;line-height:1;font-size:.8rem;min-width:30px;border-radius:100px;background-color:var(--color-primary);color:#fff;}
#admin table ul > li.hd{}
#admin table ul > li.hd div{font-size:.9rem;font-weight:bold;background-color:#b1b1b1;color:#fff;}
#admin .container{min-width:90%;max-width:90%;}

.pagination {
	margin-top:1rem;
	padding: 2rem;
	text-align: center;
	width:100%;
}
.pagination ul {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.pagination ul li {
	display: inline-block;
	margin: 0 3px;
}
.pagination ul li a {
	display: block;
	padding: 6px 12px;
	background: #f2f2f2;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
}
.pagination ul li.active a {
	background: #333;
	color: #fff;
	font-weight: bold;
}
.pagination ul li a:hover {
	background: #999;
	color: #fff;
}

#login{padding:10rem 0;display:flex;align-items:center;justify-content:center;height:100vh;flex-direction: column;background-color:#f8f8f8;}
#login #header__brand{font-size:1.3rem;font-weight:bold;margin-bottom:1rem;}
#login .container{min-width:500px;max-width:500px;margin:0 auto;}
#login .input-group input,
#login .input-group .btn{min-height:50px;}
#login .input-group input{background-color:#fff;border:3px solid #121212;}
#login .input-group .btn{min-width:100px;max-width:100px;color:#121212;background-color:#121212;color:#fff;border-color:#121212;}

/*
#modal{display:none;position:fixed;left:0;top:0;width:100%;height:100vh!important;align-items:center;justify-content:center;z-index:9999}
#modal .inner{position:relative;width:400px;margin:0 auto;}
#modal.active{display:block;margin:0 auto}
#ajax-modal-content{padding:1rem;border:2px solid #121212;min-height:100px;}

#modal button{background-color:#121212;color:#fff;position:absolute;right:0;top:0;border:0;padding:1rem;text-align:center;}
*/
#modal button{border:0;}

body.active{overflow:hidden;}

.only-mb{display:none;}
@media(max-width:767px){
	html,body{
		width:100%;
	}
	.only-mb{display:block;}
	#wrapper,
	.container{min-width:100%;max-width:100%;margin:0;}
	#contact tbody tr th{width:30%;}
	#contact tbody tr td input{width:100%!important;}

}

.field{
	margin-bottom:1rem;
}
.field label{
	font-weight:normal;
}
.field > label{
	margin-bottom:.5rem;
}
.input-group{
	display:flex;
	align-items:center;
}
.input-group input{
	margin-right:.5rem;
}
.input-group label{
	margin-bottom:0;
}
.field input[type="text"]{
	border:0;
}
.field input[type="radio"]{
	background-color:transparent;
	width:15px!important;
	height:15px!important;
	border:1px solid #bbb!important;
}
.field input[type="radio"]:checked::before{
	background-color:#352719;
	width:10px;
	height:10px;
}
.field.submit{
	text-align:center;
}
.field.submit .btn{
	font-size:1rem;
	border-radius:100px;
	width:auto;
	height:auto;
	padding:1rem 2rem;
	width:100%;
}
.field textarea{
	min-height:60px;
	border-radius:1rem!important;
	border:0;
}
.field p{
	margin-top:.5rem;
}


/*
	Intro
*/
#intro{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9998;
	
	background-color:rgba(0,0,0,1);
}
#intro {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  overflow: hidden;
  background:url('') no-repeat center center;
	background-size:cover;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.password-frame {
	width:50%;
	position:relative;
}
.password-frame img{
	width:100%;
}
.password-frame #pw_frame{
	position:relative;
	z-index:2;
	top:-1%;
}
.password-frame #frame_shadow{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:1;
}
.password-frame #pw_bg{
	position:absolute;
	left:0;
	top:0%;
	z-index:1;
}
#pwResult{
	position:absolute;
	right:-100%;
	top:0;
	z-index:2;
}
.password-boxes{
	position:absolute;
	width:100%;
	height:100%;
	left:20%;
	top:40.7%;
	z-index:3;
}
.password-boxes input {
  width: 11.8%;
  height: 11%;
  margin: 1.2%;
  text-align: center;
  transition: 0.3s;
  background-color:transparent;
  box-shadow:none;
   font-size: clamp(1vw, 5vw, 10vw);
  color:#121212;
  font-weight:bold;
  border:0;
  outline:0;
}
.password-boxes input {
  color: #121212;
  transition: color 0.2s ease;
}

.password-boxes input.error {
  color: #e53935; /* 빨간색 */
}

@media screen and (orientation: landscape) {
	.password-frame{
		width:40%;
	}
}

#hint{
	position:absolute;
	width:60%;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	z-index:5;
}

#wrong {
  color: #e53935;
  font-weight: 600;
}

#wrong{
	color:#CA2616;
	font-weight:bold;
	font-size:1.3vw;
	position:absolute;
	top:57.6%;
	left:50%;
	transform:translateX(-50%);
	z-index:4;
}

.password-boxes input.error {
  border-color: red;
  color: red;
}

.wrong-message {
  color: red;
  margin-top: 10px;
  display: none;
  font-weight: bold;
  animation: fadeIn 0.4s ease;
}

#countdown{
	font-size: clamp(1vw, 3vw, 10vw);
	color:#4A2814;
	font-weight:bold;
	position:absolute;
	left:27%;
	display:flex;
	align-items:center;
	justify-content:center;
	top:42%;
	z-index:3;
	text-align:center;
	height: 15%;
	width:45%;
	letter-spacing:2px;
}
#countdown.exp{
	font-size: clamp(1vw, 4vw, 10vw);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hint {
  margin-top: 20px;
  font-size: 14px;
}

.success-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.eye-cover {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #000;
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  0% { left: -100%; }
  100% { left: 0; }
}

.eyes {
  font-size: 48px;
  opacity: 0;
  animation: fadeInEyes 1s 1s forwards;
}

@keyframes fadeInEyes {
  to { opacity: 1; }
}

/*
	Page Main
*/

#promotion{
	/*
	background:url('../img/bg.png') no-repeat center center;
	background-size:cover;
	min-height:100vh;
	*/
	position:relative;
	width:100%;
	height:100%;
	z-index:1;
}

#promotion *{
	/*transform:scale(.9);*/
}
#fixed-img{
	position:relative;
	z-index:1;
}
#fixed-img img{
	width:100%;
}

#table{
	position:absolute;
	left:0;
	top:0;
	padding-top:52%;
	z-index:9999;
}

#char{
	position:absolute;
	right:6%;
	top:4%;
	width:25%;
	z-index:8888;
}
#char img{
	width:100%;
	cursor:pointer;
	transition:.5s;
}
#char img:hover{
	transform:scale(1.1);
}
#bg{
	width:40%;
	display:block;
	margin:0 auto;
	transform:scale(.9);
	
	animation-fill-mode: both;
}

#bg.play {
  animation: introZoom 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
#tip{
	position:absolute;
	width:6.5%;
	height:10%;
	display:inline-block;
	z-index:50;
	left:60.4%;
	top:29.3%;
}
	#tip .inside{
		position:relative;
		cursor:pointer;
	}
	#tip img{
		width:100%;
		position:relative;
		left:0;
	}
		
		#tip-group{
			position:absolute;
			display:inline-block;
			margin-top:21.4%;
			transition: .6s;
		}
		#tip-group:hover{
			
		}
		#tip #tip-head{
			top:0%;
			z-index:2;
			position:absolute;
			left:10%;
			top:4.3%;
			width:82.5%;
			transition:.2s;
		}
		
			#tip:hover #tip-head{
				left:-2%;
				top:-13%;
				transform: rotate(-15deg);
			}
			#tip:not(:hover) #tip-head{
				animation: tipCapBounce .35s cubic-bezier(.22,.61,.76,1);
			}

		#tip #tip-body{
			top:100%;
			margin-top:55%!important;
			z-index:1;
		}
	
	/* tip open */
	#tip .open #tip-head{
		left:-2%;
				top:-13%;
				transform: rotate(-15deg);
	}
	
	#table{
		position:absolute;
		top:-13.4%;
		z-index:20;
	}

#plant{
	position:absolute;
	left:3%;
	top:27.8%;
	width:15%;
	z-index:40;
}
#plant img{
	width:100%;
}
	
#chairs{
	position:absolute;
	display:inline-block;
	text-align:center;
	z-index:30;
	top:54%;
	left:6%;
	z-index:40;
	width:90%;

}
	#chair-group{
		position:absolute;
		z-index:40;
		 position: absolute;
	    top: 0;
	    transform: translateY(40vw);
		width:100%;
		display:flex;
		justify-content:center;

	}
	#chairs div{
		width:100%;
		position:relative;
		z-index:20;
		cursor:pointer;
		transform:scale(1.05);
		transition:transform 1s cubic-bezier(.22,.61,.36,1);
	}
	#chairs div img{width:100%;transition:.5s}
	#chairs div:hover > img{
		transform:scale(1.11)!important;
	}
	
	
	
	

/*
	Order Area
*/
#orderArea{
	background-color:rgba(13,4,7,1);
	text-align:center;
	bottom:-27%;
	z-index:30;
	position:absolute;
	width:100%;
	height:30%;

}
#orderArea a{
	display:block;
	padding:8% 0;
	color:#775B2E;
	font-size:300%;
	font-family: 'Voltaire', sans-serif;
	transition:.3s;
	cursor:default;
	letter-spacing:-2px;
}
/*
#orderArea a:hover{
	color:#9C6826;
}*/

/*
	Menu
*/
#sectionMenu{
	position:relative;
	z-index:50;
	margin-top:14%;
	background-color:transparent;
}
#sectionMenu .inside{
	position:relative;
}
#sectionMenu #menuArea{
	position:absolute;
	width:70%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	margin-top:34%;
}
#sectionMenu #menuArea .inner{
	position:relative;
	z-index:2;
}

#sectionMenu #menuArea #pan{
	width:100%;
	position:relative;
	z-index:1;
}
#sectionMenu #bg-menu{
	width:100%;
}

#menuWrap{
	position:absolute;
	display:flex;
	padding:9%;
	width:100%;
}
#menuWrap ul{
	display:flex;
	width:80%;
	margin-left:-3%;
	padding-left:5%;
	padding-top:20%;
}
#menuWrap ul li{
	width:33.33%;
	padding-left:3%;
}
#menuWrap ul li img{
	width:100%;
	height:200%;
	object-fit:cover;
}
#menuWrap #menu-left{
	width:45%;
}
#menuWrap #menu-right{
	width:45%;
	position:relative;
	right:-13%;
}
#menuWrap img{
	
}

#menuWrap p{
	font-family: "Sofia Sans Condensed", sans-serif;
	line-height:1.25;
	color:#412D06;
	margin-top:.05rem;
	font-size: clamp(14px, 1.3vw, 22px);
	font-weight:600;
}

#menuWrap .img1,
#menuWrap .img2,
#menuWrap .img3,
#menuWrap .img4{
	width:100%;
}

#menuWrap h2,
#menuWrap small{
	font-family:'Voltaire'!important;
	color:#412D06;
	font-weight:400;
	font-size: clamp(22px, 2.2vw, 42px);
	letter-spacing:-3px;
}
#menuWrap small{
	font-size:80%;
	letter-spacing:0;
	font-family: "Sofia Sans Condensed", sans-serif!important;
	font-weight:bold;
}

	.item{
		display:block;
		margin-top:-2%;
	}
		.item__head{
			float:left;
			width:50%;
			margin-left:0%;
		}
			.item-img{
			}
				.img1{
					margin-left:-18%;
					width:106%!important;
					margin-top:-2%;
				}
				#menuWrap .img2{
					width:90%;
				}
				.img3{
					position:relative;
					right:-18%;
				}
				.img-card{
					position:absolute;
					z-index:-1;
					width:30%;
					left:13%;
					top:20%;
					display:inline-block;
				}
				.img-card1{
					width:11%;
					top:22%;
					left:17.6%;
				}
				.item-body1{
					margin-left:0%!important;
					padding-left:3%;
				}
				
				.item2{
					margin-top:14%;
				}
				#menuWrap .img2{
					position:relative;
					right:-20%;
					margin-top:-7%;
				}
				.img-card2{
					left:43%;
					top:-8%;
					width:32%;
				}
				#menuWrap .img3{
					width:86%;
					
				}
				.img-card3{
					left:auto;
					right:27%;
					top:0%;
					width:34%;
				}
				.img4{
					margin-top:20%;
					position:relative;
					right:-10%;
					width:106%!important;
				}
				.img-card4{
					left:-6%;
					top:-8%;
					width:67%!important;
				}
				.item4{
					margin-top:10%;
				}
				
				#btn_order{
					position:absolute;
					left:55%;
					bottom:18%;
					display:inline-block;
				}
				#btn_order img{
					width:70%;
				}
				
		.item__body{
			float:left;
			width:50%;
			text-align:center;
			padding-top:15%;
			margin-left:-5%;
		}
		
		.item__body-inside{
			width:70%;
		}

		.item .item-title{
			display:block;
			font-family:'Cloister Black',sans-serif;
			font-size:2vw;
			letter-spacing:-5%;
			white-space:nowrap;
		}
		.item .item-title small{
			font-size:60%;
			display:block;
			font-weight:bold;
			font-family: 'Voltaire', sans-serif;
		}
		.item .item-desc p{
			font-family: 'Voltaire', sans-serif;
			color:#121212;
			font-size:.8vw;
			line-height:1.3;
			
		}
	
	.item:nth-child(even) .item__head{
		margin-top:-15%;
		margin-left:-8%;
	}
	.item:nth-child(even) .item__body{
		padding-top:2%;
		margin-left:5%;
	}
	
	#menu-right .item:nth-child(odd) .item__body{	
		position:relative;
		right:-13%;
		margin-top:-5%;
	}
	#menu-right .item:nth-child(even) .item__head{	
		position:relative;
		right:-10%;
	}

.field{
	margin-bottom:1rem;
}
.field label{
	font-weight:bold;
}
.field label em{
	color:red;
}
.field input[type="text"]{
	background-color:transparent;
	border-radius:0;
	border-bottom:2px solid #121212;
	font-size:1.2rem;
	font-weight:bold;
	padding-left:0;
	padding-right:0;
}

/*
@media screen 
  and (max-width: 1024px) 
  and (orientation: landscape) {
	#menuWrap p{font-size:1rem;}
	#menuWrap small{font-size:1.2rem;}
	#menuWrap h2{font-size:1.8rem;letter-spacing:-2px}
	#sectionMenu .inside{transform:scale(.9);}
}*/

/*
	Contract
*/
#sectionContact{
	position:relative;
	z-index:10;
	background-color:rgba(13,4,7,1);
	margin-top:-10%;
	min-height:500px;
	text-align:center;
	padding:20% 0;
}
#sectionContact .inside{
	position:relative;
}
#sectionContact img{
	width:40%;
}
#sectionContact #go{
	font-family: 'Voltaire', sans-serif;
	color:#EFC868;
	font-size:3rem;
	letter-spacing: -2px;
}
#sectionContact #logo{
	text-align:center;
	margin-top:10%;
	position:absolute;
	bottom:5%;
	cursor:pointer;
	width:100%;
}
#sectionContact #logo img{
	width:10%;
}
#sectionContact a{
	display:inline-block;
	width:10%;
	background-color:transparent;
	position:absolute;
	left:53%;
	bottom:22%;
	font-size:0;
	height:1.8%;
	z-index:50;
}
#sectionContact a#x{
	bottom:22%;
}
#sectionContact a#instagram{
	bottom:20%;
}
#sectionContact a#email{
	bottom:18%;
	left:51%;
	width:14%;
}

/*
	Modal
*/
#modal{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	z-index:-1;
	visibility:hidden;
	transition:.3s;
	overflow-y:auto;
	padding:10%;
}
#modal.active{
	opacity:1;
	z-index:9999;
	visibility:visible;
}
#modal #modal-content2{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:30;
}

#modal-order,
#modal-tip{
	margin:0 auto;
}

.modal-close{width:10%;display:inline-block;position:absolute;right:-15%;top:-0%;z-index:9999;}
.modal-close img{width:100%;}


/* Modal - Tip */
#modal-tip{
	width:30vw;
	min-width:500px;
	position:relative;
	height:800px;
}
#modal-tip #tip-bg{
	width:100%;
}

#tip-header{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:1;
}
#tip-bottom,
#order-bottom{
	position:absolute;
	left:0;
	bottom:0%;
	width:100%;
	z-index:1;
}
#modal-tip-body,
#modal-order-body{
	position:relative;
	background:url('../img/bg_tip_pattern.png') repeat-y left 100%;
	background-position:0 50%!important;
	background-size:100%;
	min-height:100%;
	padding-top:5%;
	padding-bottom:13%;
}
#modal-tip-body,
#modal-order-body {
	position: relative;
	background: none;
	
	padding-top: 5%;
	padding-bottom: 13%;
}

#modal-tip-body::before,
#modal-order-body::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 0;
	width: 100%;
	height: 90%;
	background: url(../img/bg_tip_pattern.png) repeat-y;
	background-size: 100%;
	pointer-events: none;
	overflow:hidden;
}
@media(max-width:1000px){
	#modal-tip-body::before,
	#modal-order-body::before{
		max-height:100%;
	}
}
#modal-order-body::before{
	/*
	top:5%;
	height:90%;
	*/
}
#modal-tip-content{
	width:80%;
	z-index:10;
	background-color:#EBE0D8;
	box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.5),
    0 12px 24px rgba(0, 0, 0, 0.52),
    0 16px 32px rgba(0, 0, 0, 0.55);
	position:relative;
	left:50%;
	margin-top:10%;
	transform:translateX(-50%);
	z-index:9;
	padding:10rem 2rem;
	padding-top:11rem;
}
#modal-tip-content #amountArea{
	
}
#modal-tip-content ul.order-list{
	padding:1%;
	display:block;
	padding:2%;
}
#modal-tip-content ul.order-list li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	border:1px solid #121212;
	margin-bottom:.5rem;
	background-color:rgba(255,255,255,.7);
	padding:5%;
}
#modal-tip-content ul.order-list li img{
	height:60px;
	border:1px solid #121212;
}
#modal-tip-content ul.order-list li .item{
	margin-bottom:0;
	font-weight:normal;
}

#modal-tip-content ul.tip-list{
	position:relative;
	z-index:10;
}
#modal-tip-content ul.tip-list > li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	position:relative;
	padding:.25rem 0;
	font-size:.9rem;
}
#modal-tip-content ul.tip-list > li::before{
	content:'';
	width:60%;
	margin-left:3%;
	height:2px;
	border-bottom:3px dotted #121212;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
#modal-tip-content ul.tip-list > li#custom::before{
	width:50%;
	margin-left:8%;
}
#modal-tip-content ul.tip-list > li label{
	margin-bottom:0;
	font-size:200%;
	font-family: 'Rousseau Deco', sans-serif;
	font-weight:normal;
}
#modal-tip-content ul.tip-list > li input[type="radio"]{
	border:3px solid #121212!important;
	border-radius:0;
	width:2rem!important;
	height:2rem!important;
	transition:.3s;
}
#modal-tip-content ul.tip-list > li input[type="radio"]:checked::before{
	content:'';
	width:4rem;
	height:4rem;
	background:url('../img/check.png') no-repeat center center;
	background-size:100%;
	position:absolute;
	top:-50%!important;
	margin-top:-80%;
	left:50%;
	transform:translateX(-50%);
}
#modal-tip-content ul.tip-list > li input[type="radio"]:disabled{
	
}

#modal-tip-content .input-group{
	justify-content:center;
	border-bottom:3px solid #121212;
	width:60%;
	margin:0 auto;
}
#modal-tip-content .input-group input{
	border:0;
	font-size:3rem;
	font-weight:bold;
	text-align:center;
	font-family: "Alex Brush", cursive;
}
#modal-tip-content .input-group label{
	font-size:2.5rem;
	font-family: 'Voltaire', sans-serif;
}

#modal-tip-content .item{
	display:flex;
	align-items:center;
	text-align:left;
	justify-content:flex-start;
}
#modal-tip-content .item .item__head{
	width:auto;
	font-size:0;
}
#modal-tip-content .item .item__body{
	padding-top:0;
	text-align:left;
	padding-left:10%;
	flex:1 1 auto;
	white-space:nowrap;
}
#modal-tip-content textarea{
	background-color:transparent;
	border:2px solid #121212;
	border-radius:0!important;
}
#modal-tip-content textarea:focus{
	outline:0;
}

#tip-submit{
	background-color:transparent!important;
	display:inline-block!important;
	width:auto!important;
	cursor:pointer;
	position:relative;
	z-index:10;
}
#tip-submit img{
	width:30%;
}

#tip-paper{
	width:100%;
	position:absolute;
	top:80%;
	left:-40%;
	z-index:1;
	margin-bottom:-5%;
}
#tip-pen{
	width:60%;
	position:absolute;
	margin-top:-90%;
	right:-30%;
	
	z-index:1;
}
#holder{
	top:0;
	width:60%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	margin-top:-2%;
	z-index:10;
}

/* Modal - Order */
#modal-order{
	width:30vw;
	min-width:500px;
	position:relative;
}
#modal-order #tip-bg{
	width:100%;
}
#modal-order-body{
	position:relative;
}
#modal-order-content{
	width:80%;
	z-index:10;
	background-color:#F6EDE4;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	z-index:9;
	border-radius:1rem;
	padding:20% 5%;
	margin-top:10%;
}
#modal-order-content ul{
	padding:20% 10%;
}
#modal-order-content ul li{
	display:flex;
	justify-content:space-between;
}

#holder{
	width:60%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	margin-top:-2%;
	z-index:10;
}

/*
@media screen and (orientation:portrait) {
  html::before {
    content: "가로모드로 전환해주세요.";
    position: fixed;
    z-index: 9999;
    background: black;
    color: white;
    width: 100vw;
    height: 100vh;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
  }
}*/
@media screen and (orientation: landscape) and (max-height: 480px) {
  html{width:100%;min-width:100vw;}
  label{font-size:50%;}
  
}

/* -------------------------------- 
	 샘플 화면
---------------------------------- */
.item{
	cursor:pointer;
}
.item img{
	transition:.3s;
}
.item:hover img{
	transform:scale(1.1);
}
#ajax-sample{
	display:flex;
	width:100%;
}


.sample{
	position:absolute;
	display:flex;
	padding:9%;
	width:100%;
	display:none;
}
.sample #sample-left{
	width:43%;
}
.sample #sample-right{
	width:43%;
	position:relative;
	right:-14%;
}
/*
.sample img{
	width:100%;
}

.sample ul{
	display:flex;
	flex-wrap:wrap;
	margin-left:-1rem;
	padding:5rem 0;
}
.sample ul li{
	width:33.3333%;
	padding-left:1rem;
	padding-bottom:2rem;
}
.sample ul li:first-child{
	
}
*/

#promotion{
	background-color:#000;
}
/* ----- BG ----- */


@keyframes introZoom {
  /* 시작 */
  0% {
    opacity: 0.1;
    transform: scale(1);
  }

  /* 빠르게 도달 */
  35% {
    opacity: 1;
    transform: scale(1.1555);
  }

  

  /* 최종 */
  100% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.animate__customBounceUp2 { /* 테이블 애니 */
  animation-name: customBounceUp2;
  animation-fill-mode: both;
}

@keyframes customBounceUp2 {

  /* 시작 */
  0% {
    opacity: 0;
    transform: translate3d(0, 120px, 0) scale(1);
  }

  /* 빠르게 도달 */
  35% {
    opacity: 1;
    transform: translate3d(0, -6px, 0) scale(1.1555);
  }

  /* 👇 거의 멈춘 것처럼 (scale + 위치 둘 다 감속) */
  70% {
    transform: translate3d(0, 2px, 0) scale(1.152);
  }

  /* 👇 아주 천천히 안착 */
  85% {
    transform: translate3d(0, 0.5px, 0) scale(1.151);
  }

  /* 최종 */
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.15);
  }
}



.animate__customBounceUp {
  animation-name: customBounceUp;
  animation-fill-mode: both;
}

@keyframes customBounceUp {
  /* 시작: 아래 + 작게 */
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0) scale(1);
  }

  /* 올라오며 거의 도착 */
  60% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1);
  }

  /* 👇 여기서 살짝 커졌다가 */
  80% {
    transform: translate3d(0, 1px, 0) scale(1);
  }

  /* 최종 안착 */
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}