@charset "utf-8";
@import url("css/NotoKR.css");

body {
  margin: 0;
  padding: 0;
}

.typer {
	text-align: center;
	top: 50%;left: 50%;transform: translate(-50%, -10%); width: 100%; z-index:99; color: #fff;
    position: absolute;
    overflow: hidden;
    margin: 0 auto;
    white-space: nowrap;
    word-wrap: break-word;
    font-weight: 100;
	font-size: 0.9em;
	line-height: 1.5em;
	text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.7);
    animation: typing 2s steps(500, end) 1;
}
.typer strong {font-size:1em; font-weight: 600px; letter-spacing: 1px; margin-bottom: 20px; position: relative; text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.7);}
.typer p {font-size: 0.7em; color: #ffee71;}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/*---메인 롤링 이미지---*/
.fullBackground {background-position: center center;background-attachment: fixed;background-size: cover;position: absolute;top: 0; width: 100%;height: 100%;}
.caption { width: 100%; font-size: 3.5vh; text-transform: uppercase; color: #fff; position: absolute; top: 25%; padding: 0 3%;  left: 0; text-align: center;letter-spacing: 1.1px; font-family:  'Noto Sans Medium';}
.caption span {font-size:13px; display: block; line-height: 30px}

/*--- 메인아이콘---*/
.main_icon { position: absolute; top:35%; display: inline-block;width: 100%;}
.main_icon > div {margin:auto; padding:0 20%;}
.main_icon > div.iconBox {}
.main_icon > div.iconBox >p {padding:50px 0 0 }
.main_icon p {float: left; width: 33.33%;text-align: center; margin-bottom: 20px;}
.main_icon p a {}
.main_icon p a span {display: block; font-size:1.8vh; color: #fff}
.main_icon p a img {width:100%;}


div.reservBox { /* position:absolute; left:50%; bottom:120px; margin-left:-350px; width:700px;*/ text-align:center;}
div.calBox { display:none;  text-align:center; height:370px;width: 95%;    margin: 0 3%;}
div.calBox.show {display:inline-block;position: absolute;   left: 0px;    top: 2%; z-index: 99999}
div.calBox ul.calInner {padding: 5% 0; height:360px; background-color:#fff;}
div.calBox ul.calInner li { display:inline-block;/* width:320px;*/ text-align:center;}
div.calBox ul.calInner li:nth-child(2) { margin-left:16px;}
h2.calHead { font-size:22px;}
.calInner table.calenda { margin-top:15px; width:100%; border:1px solid #d2d2d2;}
.calInner table.calenda thead { background-color:#e6e6e6;}
.calInner table.calenda th { height:20px;font-size:11px; font-weight:300;}
.calInner table.calenda th.sun {color:#fd0019;}
.calInner table.calenda th.sat {color:#1abff0;}
.calInner table.calenda td { height:35px; border:1px solid #d2d2d2; color:#7d7d7d;}
.calInner table.calenda td.sun a {color:#fd0019;}
.calInner table.calenda td.sat a {color:#1abff0;}
.calInner table.calenda td a { display:inline-block; width:100%; height:100%; font-size:13px; line-height:35px;}
.calInner table.calenda td a.today {  background-color:#4d642e; color:#fff;}
.calInner table.calenda td a.reserved {  background-color:#3b4856;  color:#fff;}
table.calenda td a.closed { background:url('../img/reserv_closed.jpg') no-repeat top left;  color:#aaa;}
ul.colorIndex { position:relative; left:20px; top:-40px; float:left;}
ul.colorIndex li { margin-right:15px;  display:inline-block;  font-size:13px; color:#333;}
ul.colorIndex li span {float:left; margin-right:8px; display:inline-block; width:15px; height:15px;}
ul.colorIndex li span.box01 { background-color:#4d642e;}
ul.colorIndex li span.box03 { background:url('../img/reserv_closed.jpg') no-repeat top left; border:1px solid #ccc;}
ul.colorIndex li span.box02 { background-color:#3b4856;}
div.closedBtn { float:right; position:relative; right:20px; bottom:45px; display:inline-block; padding:5px 28px 5px 0; background:url('../img/closedBtn.png') no-repeat center right; font-size:14px; color:#000; cursor:pointer;}

div.calenda_main > table.cal_table_main_main tr td {vertical-align: middle;	height: 42px;background: #FFF;font-size: 14px;text-align: center;color: #333;
	cursor: pointer;border: 1px solid #ddd;}
div.calenda_main > div.calHead_main { position: relative; margin-bottom: 5px;   width: 100%;}
div.calenda_main > div.calHead_main span.arrow_l { position: absolute;  left: 0;}
span.arrow_l > img{display: inline-block; float: left}
 h2.month {display: inline-block;float: left;font-size: 16px; font-family: 'Noto Sans DemiLight'; text-align: center; color: #000;font-weight: bold; line-height: 33px; width: 78%;}
div.calenda_main > div.calHead_main span.arrow_r { position: absolute; right: 0;  top: 0;  text-align: right;}
span.arrow_r > img{display: inline-block; float: left}


div.reservBar { position:relative; margin:130% auto 0; width:80%; height:30px; background:rgba(0,0,0,0.5);border: 1px solid #5d5d5d;}
div.reservBar div.selectDate { padding:8px 5px; padding-right:0px; width:80%; font-size:13px; text-align:center; color:#ccc; cursor:pointer;   background:url('../img/menu_reserv.png') no-repeat 0px 6px;}
div.reservBar a.reservBtn { position:absolute; top:0;  right:0; display:block; width:30%; height:28px; background-color:#cd042a; font-size:13px; line-height:28px; text-align:center; color:#fff;}