@charset "utf-8";

/* /// font /// */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap&subset=korean');

/* /// reset /// */
*{padding:0; margin:0; word-break:keep-all; font-family: 'Noto Sans KR', sans-serif; }
html,body{width:100%;height:100%;}
html{overflow-x:hidden;}
body,b,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,tr,td,thead,tbody,form,fieldset,legend,input,textarea,button{margin:0; padding:0;
line-height: 1;}
table,th,tr,td,thead,tbody,input,textarea{}
ul,ol,li,dl,dt,dd {list-style:none;}
i,em,address{font-style:normal;}
label,button{cursor:pointer;}
button{border:none;background: none;line-height:1;}
select { /* 네이티브 외형 감추기 -webkit-appearance: none; -moz-appearance: none; appearance: none; */ vertical-align:middle;}
select::-ms-expand { display: none; }
hr,legend {display:none;}
img,fieldset,iframe{border:none;}
img{vertical-align:top; max-width: 100%;}
textarea{padding:8px;resize:none;}
caption {display:none;}
input,select,button{vertical-align:middle;}
table{border:none; border-collapse:collapse; padding:0; border-spacing:0; }
fieldset{min-width:100%;}
a:link,a:visited,a:active,a:focus{text-decoration:none;}
a:hover{text-decoration:none;}

input[type=text]::-ms-clear{display:none;}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"]{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
input[type="text"]:hover,input[type="text"]:focus,
input[type="password"]:hover,input[type="password"]:focus,
input[type="email"]:hover,input[type="email"]:focus,
input[type="number"]:hover,input[type="number"]:focus,
input[type="tel"]:hover,input[type="tel"]:focus{border-color: #bbb;}
input, select{
	padding:10px;
	line-height:1;
}
select{
	padding:12px 10px;
	width:220px;
	-webkit-appearance: none; 
	-moz-appearance: none;
	appearance: none;
	border:1px solid #ddd;
	background: url('../img/btn/select_btn.png') no-repeat 95% center;  
}
input.input_rbox, select.input_rbox, textarea.input_rbox{
	border:1px solid #ddd;
	border-radius:2px;
}
input.input_bborder{
	border:0 none;
	border-bottom:1px solid #ddd;
}
input.input_bborder:focus{
	outline:none;border-color:#7e47ef;
}
input.wf, select.wf{width:100%;}
textarea.wf{
	width:calc(100% - 16px);
	height:60px;
}
.tel_box{overflow:hidden;}
.tel_box > *{float:left;}
.tel_box select{width:100px;}
.tel_box input{
	margin-left:10px;
	width:158px;
}
.half_box{display:inline-block;}
.half_box + .half_box{margin-left:30px;}
.half_box input{width:203px;}

/* button */
.btn{
	margin:0 auto;
	display:block;
	width:100%;
}
.btn.rbtn{
	border-radius:3px;
}
.btn.bg_purple{
	color:#fff;
	background:#5a58bd;
}
.btn.bg_purple2{
	color:#fff;
	background:#7e47ef;
}

.btn.bg_gray{
	color:#000000;
	background:#ebebeb;
}

/* /// Common /// */
*{-webkit-text-size-adjust:none}
.modal{
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
	z-index:100;
/* 
IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. 
컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.
startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.
하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.
*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */}
/* 감추는 전용 */
.blind, legend{display:block;overflow:hidden;position:absolute;top:-1000em;left:0}
.skip a{display:block;position:absolute;left:0;top:-9999em;width:100%;background-color:#272727;color:#aaa;font: bold 12px/3.4 arial,sans-serif;text-align:center;z-index: 99999;}
.skip a:hover,.skip a:active,.skip a:focus{top:0}

/*  */
.container{
	margin:0 auto;
	width:1200px;
}

/* float */
.fl{float:left;}
.fr{float:right;}
.clearfix{clear:both; overflow:hidden;}

/* text-align */
.tac{text-align:center;}
.tar{text-align:right;}
.tal{text-align:left;}

/* fontweight */

/* /// header /// */
#wrap{
	width:100%;
	overflow-x:hidden;
	overflow-y:hidden;
}
#ifm_ok{display:none;}
#header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	background:#2d2d2d;
	z-index:100;
}
#header h1{
	position:absolute;
	top:20px;
	left:50px;
}
#header nav.main_nav{text-align:center;}
#header nav.main_nav > ul > li{
	padding:30px 46px 30px 50px;
	display:inline-block;
	position:relative;
	line-height:1;
	vertical-align: middle;
}
#header nav.main_nav > ul > li.back_bling{ padding: 20px 46px 28px 50px;}
#header nav.main_nav > ul > li.back_bling a{position:relative; z-index:20}
#header nav.main_nav > ul > li.back_bling .blink{
	position: absolute;
    left: -13px;
    top: -9px;
	width:216px;
}
 #header nav.main_nav > ul > li.back_bling .blink{
	animation-name: blink;
    animation-duration: 0.5s;
	animation-iteration-count: infinite;
} 
@keyframes blink {
    0% { opacity:1 }
	50%{ opacity:1 }
	51%{opacity:0}
    100% { opacity:0 }
}
#header nav.main_nav > ul > li > a{
	display:block;
	font-size:20px;
	font-weight:600;
	color:#fff;
	text-transform:uppercase;
} 
#header nav.main_nav > ul > li:nth-child(4) > a{color:#fffd73;}
#header .all_menu_btn{
	position:absolute;
	top:33px;
	right:50px;
	width:20px;
	height:15px;
}

#header nav.main_nav > ul > li > ul{
	padding:20px 0;
	display:none;
	position:absolute;
	top:calc(100% - 5px);
	left:calc(50% - 110px);
	width:220px;
	background:#ffffff;
	border-top:5px solid #7e47ef;
}
#header nav.main_nav > ul > li:hover > ul{
	display:block;
}
#header nav.main_nav > ul > li > ul li a{
	padding:10px 0;
	display:block;
	font-size:18px;
	font-weight:350;
	color:#555;
	line-height:1;
}
#header nav.main_nav > ul > li > ul li a:hover{
	font-weight:500;
	color:#7e47ef;
	text-decoration:underline;
}
#header .all_menu_btn span{
	display:block;
	position:absolute;
	right:0;
	width:100%;
	height:2px;
	background:#fff;
}
#header .all_menu_btn span.top{top:0;}
#header .all_menu_btn span.middle{
	top:calc(50% - 1px);
	width:15px;
	opacity:1;
}
#header .all_menu_btn span.bottom{bottom:0;}
#header .all_menu_btn.on{
	position:fixed;
}
#header .all_menu_btn.on span.top{
	top:-4px;
	transform: translate3d(0, 8px, 0) rotate(225deg);
	-webkit-transform: translate3d(0, 8px, 0) rotate(225deg);
	-moz-transform: translate3d(0, 8px, 0) rotate(225deg);
	-o-transform: translate3d(0, 8px, 0) rotate(225deg);
}
#header .all_menu_btn.on  span.middle{
	top:50%;margin-top:-2px;opacity:0;
	transform: translate3d(0, 150px, 0) rotate(-720deg);
	-webkit-transform: translate3d(0, 150px, 0) rotate(-720deg);
	-moz-transform: translate3d(0, 150px, 0) rotate(-720deg);
	-o-transform: translate3d(0, 150px, 0) rotate(-720deg);	
}
#header .all_menu_btn.on  span.bottom{
	bottom:0;
	transform: translate3d(0, -9px, 0) rotate(-225deg);
	-webkit-transform: translate3d(0, -9px, 0) rotate(-225deg);
	-moz-transform: translate3d(0, -9px, 0) rotate(-225deg);
	-o-transform: translate3d(0, -9px, 0) rotate(-225deg);
	-ms-transform: translate(0, -9px) rotate(-45deg);
}

.all_menu{
	display:none;
	position:fixed;
	top:calc(50% - 262px);
	left:calc(50% - 600px);
	width:1200px;
	text-align:center;
	z-index:1000;
}
.menu_top{
	position:relative;
	background:#7e47ef;
}
.menu_top .pop_colse{
	position:absolute;
	top:15px;
	right:15px;
}
.menu_top h2{
	padding:20px 0;
	font-size:26px;
	font-weight:600;
	color:#fff;
	line-height:1;
}
.menu_bottom{
	padding:40px 0 60px;
	background:#fff;
}
.menu_bottom > ul > li{
	padding:0 16px 0 20px ;
	display:inline-block;
	width:calc(100%/6 - 40px);
	vertical-align:top;
}
.menu_bottom > ul > li > a{
	font-size:18px;
	font-weight:600;
	color:#333;
	line-height:1;
}
.menu_bottom > ul > li  ul{
	margin-top:30px;
	padding-top:20px;
	border-top:1px solid #000;
}
.menu_bottom > ul > li:nth-child(4) ul{ margin-top: 12px;}
.menu_bottom > ul > li > ul  li a{
	padding:10px 0;
	display:block;
	font-size:16px;
	font-weight:350;
	color:#555;
	line-height:1;
}
/* /// header end /// */

/* /// footer /// */
#footer{
	padding:80px 0 75px;
	color:#888888;
	background:#343434;
}
#footer .container div{margin-left:90px;}
#footer .container div:nth-child(1){
	margin-left:0;
	width:37.92%;
}
#footer .container div ul{margin:25px 0 25px;}
#footer .container div ul li, #footer .container div p.copyright{
	margin-right:15px;
	display:inline-block;
	font-size:14px;
	font-weight:300;
	color:#868686;
	line-height:1.4;
	letter-spacing:-1px;
}
#footer .container div ul li:nth-child(1), 
#footer .container div ul li:nth-child(5),
#footer .container div p.copyright{margin-left:0;}
#footer .container div h3{
	font-size:18px;
	font-weight:600;
	line-height:1;
}
#footer .container div > strong{
	margin-top:10px;
	display:block;
	font-size:38px;
	font-weight:600;
	color:#fff;
	line-height:1;
	letter-spacing:-1.5px;
}
#footer .container div:last-child > strong{color:#5797fe;font-size:23px;}
#footer .container div strong + p{
	margin-top:15px;
}
#footer .container div p{
	font-size:18px;
	line-height:1;
}
#footer .container div:nth-child(2) > p:last-child{
	margin-top:10px;
	font-weight:600;
}
#footer .container div:last-child > p{color:#fff;}
.footer_info{}
/* /// footer end /// */

/* /// quick /// */
.quick_menu{
	position:fixed;
	right:50px;
	bottom:calc(50% - 160px);
	z-index:10;
}
.quick_menu a{
	display:block;
	width:84px;
	height:84px;
}
.quick_menu li:nth-child(1) a{background:url('/img/ico/ico_quick01.png')no-repeat right center;}
.quick_menu li:nth-child(1) a:hover{
	margin-left:-182px;
	width:266px;
	background:url('/img/ico/ico_hquick01.png')no-repeat right center;
}
.quick_menu li:nth-child(2) a{background:url('/img/ico/ico_quick02.png')no-repeat right center;}
.quick_menu li:nth-child(3) a{background:url('/img/ico/ico_quick03.png')no-repeat right center;}
.quick_reservation{background:url('/img/ico/ico_quick05.png')no-repeat right center;}
.quick_reservation:hover{background:url('/img/ico/ico_hquick05.png')no-repeat right center;}
.quick_pay{background:url('/img/ico/ico_quick04.png')no-repeat right center;}
.quick_pay:hover{background:url('/img/ico/ico_hquick04.png')no-repeat right center;}
.quick_menu .mobile_more{display:none;}
/* /// quick end /// */

/* /// ud_btn /// */
.ud_btn{
	position:fixed;
	right:50px;
	bottom:30px;
	z-index:10;
}
/* /// ud_btn end /// */

/* /// 팝업 /// */
.popup{
	padding:0 45px;
	display:none;
	position:fixed;
	top:calc(50% - 317.5px);
	left:calc(50% - 265px);
	width:440px;
	background:#fff;
	border-radius:10px;
	z-index:1000;
}
.pop_top{
	padding:60px 0 40px;
	position:relative;
	text-align:center;
}
.pop_top h3{
	font-size:28px;
	font-weight:600;
	color:#000;
}
.pop_top a{
	position:absolute;
	top:30px;
	right:-17px;
}

/* 카드결제하기 */
.pop_val{
	clear:both;
	overflow:hidden;
	text-align:center;
	border-radius:3px;
	border:1px solid #ddd;
	border-left:0;
}
.pop_val li{
	float:left;
	width:calc(100%/2);
}
.pop_val li a{
	padding:15px 0;
	display:block;
	font-size:16px;
	font-weight:400;
	color:#888;
	border-left:1px solid #ddd;
}
.pop_val li a:hover, .pop_val li a.on{
	color:#fff;
	font-weight:600;
	background:#7e47ef;
}
.pop_formbox{
	margin-top:10px;
	padding-bottom:60px;
	display:none;
}
.pop_formbox#payment_p01{display:block;}
.pop_formbox label{
	padding:30px 0 20px;
	display:block;
	font-size:16px;
	font-weight:400;
	color:#aaa;
	line-height:1;
}
.pop_formbox label + input.input_bborder{padding-top:0;}
.pop_formbox button{
	margin-top:30px;
	padding:20px 0;
	font-size:20px;
}
.pop_formbox .select_txt{    
	display: inline-block;
    width: 45%;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    margin-left: 4%;
}
#payment .pop_formbox .select_txt input[type="text"]{
	padding:0;
	width:100%;
	border:0 none;
}
/* 카드결제하기 end */

/* 예약팝업 */
.popup#reservation{top:calc(50% - 450px);}
.popup#reservation .btn.bg_purple{width:260px;}
/* 예약팝업 end */

/* 예약문의 팝업 */
.popup#reservation02{top:calc(50% - 444px);}
.popup#reservation02 .btn.bg_purple{width:260px;}
/* 예약문의 팝업 end */
/* /// 팝업 end /// */

/* /// 반응형 /// */
@media screen and (min-width: 1361px ) and (max-width: 1780px){
	#header nav.main_nav > ul{padding-left:220px;}
	/*190604수정*/
	/* #header nav.main_nav > ul > li{padding:30px 11px 30px 15px;} */
	#header nav.main_nav > ul > li { padding: 30px 25px}
	#header nav.main_nav > ul > li.back_bling img{left: 2px;}
}
@media screen and (min-width: 1241px ) and (max-width: 1360px){
	#header h1{left:10px;}
	#header nav.main_nav > ul{padding-left:200px;}
	#header nav.main_nav > ul > li{padding:30px 15px;}
	#header nav.main_nav > ul > li > ul li a{text-align:center;}
	#header .all_menu_btn{right:10px;}
}
@media screen and (max-width: 1240px){
	.container{width:calc(100% - 40px);}
	#header{height:80px;}
	.main_nav{display:none;}
	#header h1{left:20px;}
	#header .all_menu_btn{right:20px;}
	.all_menu{
		top:80px;
		left:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		background:#fff;
	}
	.menu_top{display:none;}
	.menu_bottom{
		padding:15px 20px;
		max-height:calc(100% - 80px);
		text-align:left;
		overflow-y:auto;
	}
	.menu_bottom > ul > li{
		padding:0;
		display:block;
		width:100%;
	}
	.menu_bottom > ul > li > a{
		padding:20px 10px 15px;
		display:block;
		line-height:1;
		border-bottom:1px solid #cccccc;
	}
	.menu_bottom > ul > li > a.point{color:#7e47ef;}
	.menu_bottom > ul > li > ul{
		margin-top:0;
		padding:15px 0;
		display:none;
		background:#f9f9f9;
		border-top:3px solid #7e47ef;
	}
	.menu_bottom > ul > li > ul li a{
		padding:15px 25px;
	}
	.menu_bottom > ul > li > ul li a:hover{
		color:#7e47ef;
		text-decoration:underline;
	}
	.quick_menu, .ud_btn{right:20px;}
	
	#footer .container div{margin-bottom:40px;}
	#footer .container div:nth-child(1){width:100%;}
	#footer .container div:nth-child(2){margin-left:0;}

	/* 팝업 */
	.apDiv{left:20px !important;top:unset !important; max-width:calc(100% - 40px);height:auto !important;}
}
@media screen and (max-width: 768px){
	input, select{padding:4.5px 10px;}
	select{
		padding:7.5px 10px;
		width:150px;
		background-position:97% center;
		background-size:10px;
	}
	.tel_box select{width:60px;}
	.tel_box input{width:calc(50% - 40px);}
	.half_box{width:49%;}
	.half_box + .half_box{margin-left:0;}
	.half_box input{width:100%;}

	/* header */
	#header{height:50px;}
	#header h1{
		top:15px;
		left:15px;
		width:115px;
	}
	#header .all_menu_btn{
		top:17px;
		right:15px;
	}
	.all_menu{top:50px;}
	
	/* footer */
	#footer{padding:50px 0 60px;}
	#footer .container div{
		margin-left:0;
		width:100%;
	}
	#footer .container div.footer_info > img{width:115px;}
	#footer .container div ul{margin:15px 0 20px;}
	#footer .container div ul li, 
	#footer .container div p.copyright{
		margin-right:10px;
		font-size:10px;
	}
	#footer .container div > strong{font-size:24px;}
	#footer .container div:last-child > strong{font-size:17px;}
	#footer .container div strong + p{margin-top:15px;}
	#footer .container div p{font-size:12px;}
	
	.quick_menu a, .quick_menu li a, .ud_btn li a{
		display:block;
		width:60px;
		height:60px;
		background-size:cover !important;
	}
	.quick_menu{
		bottom:200px;
		width:48px;
		height:48px;
	}
	.quick_menu.on{
		padding-bottom:48px;
		height:192px;
	}
	.quick_menu ul{
		display:none;
		position:absolute;
		top: -108px;
		left: -10px;

		z-index:0;
	}
	.quick_menu.on ul{display:block;}
	.quick_menu a{margin-left:0;padding-left:0;}
	.quick_menu li:nth-child(1) a{background: url(/img/ico/quick_02.png)no-repeat right top;}
	.quick_menu li:nth-child(1) a:hover{
		    margin-left: -124px;
			padding: 0;
			width: 184px;
		background: url(/img/ico/ico_mohquick01.png)no-repeat right top;
	}
	.web_reservation{display:none}
	.quick_menu li:nth-child(2) a{background: url(/img/ico/quick_02.png)no-repeat right 26%;}
	.quick_menu li:nth-child(3) a{background: url(/img/ico/quick_02.png)no-repeat right 51%;}
	/* .quick_menu li:nth-child(4) a{background: url(/img/ico/quick_02.png)no-repeat  right 60%;}
	.quick_menu li:nth-child(4) a:hover{background: url(/img/ico/hquick_02.png)no-repeat  right 60%;} */
	.quick_menu li:nth-child(5) a{background: url(/img/ico/quick_02.png)no-repeat  right 76%;}
	.quick_menu li:nth-child(5) a:hover{background: url(/img/ico/hquick_01.png)no-repeat  right 76%;}
	.quick_menu .mobile_more{
		display:block;
		position:absolute;
		/* bottom:0;
		left:0; */
		bottom: 100px;
		left: -10px;
		height:60px;
		z-index:11;
		background: url(/img/ico/ico_plus.png)no-repeat center bottom;
		/*background: url(/img/ico/ico_moquick.png)no-repeat center bottom;*/
	}
	.quick_menu.on .mobile_more{
		/* height:55px; */
		height:70px;
		background: url(/img/ico/ico_moquick.png)no-repeat center bottom;
	}
	.quick_reservation{
		display:block;
		position:absolute;
		bottom:40px;
		right:-1px;
		height:60px;
		z-index:11;
		background: url(/img/ico/m_reservation.png)no-repeat center bottom;
	}
	.quick_reservation:hover{background: url(/img/ico/h_m_reservation.png)no-repeat center bottom;}
	.quick_pay{
		position:absolute;
		bottom: -20px;
		right:-1px;
		height:60px;
		background: url(/img/ico/m_pay.png)no-repeat center bottom;
	}
	.quick_pay:hover{background: url(/img/ico/m_pay.png)no-repeat center bottom;}


	/* popup */
	.popup{
		padding:0 25px;
		top:60px;
		left:20px;
		right:20px;
		width:calc(100% - 90px);
	}
	.pop_top a{
		top:15px;
		right:-10px;
		width:24px;
	}
	.pop_top{padding:40px 0 10px;}
	.pop_top h3{font-size:20px;}
	.pop_bottom{}
	.pop_val li a{
		padding:13px 0;
		font-size:10px;
	}
	.pop_formbox{padding-bottom:40px;}
	.pop_formbox label{
		padding:20px 0 10px;
		font-size:10px;
	}
	.popup#payment{top:calc(50% - 226.25px);}
	.popup#reservation{top:calc(50% - 302px);}
	.popup#reservation02{top:calc(50% - 306.75px);}
	.popup#reservation .btn.bg_purple{
		margin-top:20px;
	}
	.pop_formbox button{
		padding:23px 0;
		width:130px;
		font-size:14px;
	}
	.pop_formbox .select_txt{
		width:56%; font-size:16px
	}
	#payment .pop_formbox .select_txt{padding:5.5px 0;}
	.pop_bottom .select_wid{width:38%}
}
@media screen and (max-width: 640px){
}
/* 팝업만 수정 */
@media screen and (min-width: 769px){
	.popup#reservation02{top:calc(50% - 320px);}
	.popup_edit .pop_top{padding:30px 0 15px;}
	.popup_edit .pop_top h3{text-align:left;}
	.popup_edit .pop_formbox{padding-bottom:30px;}
	.popup_edit .pop_formbox label{padding:15px 0 10px;}
}
/* ie 핵 */
@media screen and (min-width:0\0){
	select{padding:10px;}
}