@charset "utf-8";
@import url(common.css);
@import url(animate.css);

/*---------------------------------------------------*/
/*                      layout                       */
/*---------------------------------------------------*/
.wrap{ position: relative; width:100%; min-width: 1190px; /*height:2920px;*/ float: left; overflow: hidden;}
.orange{ color:#ec9446;}
.blue{ color:#596ec6;}

/*area1*/
.area1{ position: relative; width:100%;height: 980px; }
.logo{ position: absolute; z-index: 10; top:50px; left: 45px;}
.txtbox{ position: relative; width: 100%; height: 980px;}
.txtbox .text {
    position:absolute;
    top:35%;
    left:30%;
    width: 620px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.txtbox .text h2{ font-size: 80px;
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
    -ms-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
}
.txtbox .text h3{  font-size: 18px;
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
    -ms-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2s both;
}


/*메인예약수정 191112*/
.main_reserv_wrap{ position: absolute; padding:25px; top:50px; right:5%;background-color: rgba(255, 255,255, 0.8)}  
.main_reserv_title{font-size:17px;font-weight:bold; vertical-align: middle;display: flex;}
.main_reserv_wrap hr{display:block}
.main_reserv_wrap h3{font-size:14px;margin-top: 18px; font-weight:bold; color:#333}
.main_reserv_wrap ul { margin-top: 15px;list-style: none;display: inline-block;}
.main_reserv_wrap ul > li { position:relative;display:table;}
.main_reserv_wrap ul li .label_wrap{width: 280px; padding: 12px 8px; background-color: white; border: 1px solid #e7e7e7; border-top: 0;font-size:12px;float:right}
.main_reserv_wrap ul li .title{margin-left:4px;line-height:14px;}
.main_reserv_wrap ul li .sub{color:#b1b1b1; font-size: 12px; color: #b1b1b1; float: right;}
.main_reserv_btn{ color:white;  background-color: #0e253a;font-size:18px;width:100%;display:block;text-align:center;padding:15px;letter-spacing:-1px}

.main_reserv_wrap li label {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.main_reserv_wrap .check {
  width: 14px;
  height: 14px;
  border: 2px solid #aaa;
  border-radius: 100%;
  cursor: pointer;
  background-color: white;
  padding:unset;
  float:left;
}

.main_reserv_wrap .check:before {
    content: "";
    position: absolute;
    margin-top: 3px;
    padding: 2px;
    left: 14px;
    border-radius: 100%;
    transition: all 0.25s;
}

.main_reserv_wrap input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.main_reserv_wrap input[type="radio"]:checked ~ label .label_wrap {
  background-color:#005991;transition: all 0.6s;
}

.main_reserv_wrap input[type="radio"]:checked ~ label .title {
	font-weight:bold;
}

.main_reserv_wrap input[type="radio"]:checked ~ label .sub{
	color:#fff;
}

.main_reserv_wrap input[type="radio"]:checked ~ label .check:before {
  	background: #777;
}

.main_reserv_wrap input[type="radio"]:checked ~ label {
  color: #fff;
}


/*-----------------메인우측달력-----------------*/
.monthSelect{ width: 330px; height: 47px; line-height: 47px; padding:0 40px; background:url('../../images/intro/selectBg1.gif')repeat left; border:1px solid #dddddd; color:#b2b2b2 ; font-size: 12px; float: left;}
.monthBox2{margin-top:15px;
     width:280px;
    height: 375px;
    border: solid 1px #e3e3e3;
    background:#fff;
    display: none; 
    padding: 10px;
    overflow:hidden;
}
/* -----------------달력 - calendar -----------------*/
.monthBox2 .monthChoice{width:180px; overflow:hidden; margin:0 auto;height:38px;padding: 5px 0;}
.monthBox2 .monthChoice span{ float: left;}
.monthBox2 .monthChoice .monthBtn{float:left;letter-spacing:0;display:block;padding:0px; width: 15px;} 
.monthBox2 .monthChoice .month{float:left;margin:0 auto; color: #1d1d1d; font-weight:bold; width:150px; height:23px; font-size:19px; text-align:center; line-height:23px;}

.monthBox2 .calTxt{width:100%;margin:10px auto;text-align:center;font-size:15px;letter-spacing:0;}

.monthBox2 .mainCalendar {text-align:center;width:100%;margin:0 auto;height:265px;}
.monthBox2 .mainCalendar tbody th {font-size:13px;color:#444444;font-weight: bold;height:34px;}
.monthBox2 .mainCalendar td div {
font-size:13px;width:30px;color:#b7b7b7;cursor: pointer;margin: auto;
height:38px;line-height:34px;vertical-align: middle;}

.gray{width:30px;height:34px;line-height:34px;font-size: 13px;color:#b7b7b7;letter-spacing: -1px;
cursor: pointer;}

.monthBox2 .mainCalendar .sun{color: #bf3b3b;height: 20px;}
.monthBox2 .mainCalendar th{font-size:11px}
.monthBox2 .mainCalendar .possible div{ color:#444; background:url('../../images/intro/dot_blue.png')no-repeat; background-position: 3px 7px;}
.monthBox2 .mainCalendar .impossible div{ color:#444; background:url('../../images/intro/dot_red.png')no-repeat; background-position: 3px 7px;}
.monthBox2 .mainCalendar .beforeOpen div{ color:#444; background:url('../../images/intro/dot_gray.png')no-repeat; background-position: 3px 7px;}
.monthBox2 .mainCalendar .today div{width:30px;height:34px;line-height:34px;color:white;border-radius:5px;}
.monthBox2 .mainCalendar .today div{background:url('../../images/intro/mtodayIm.png')no-repeat;     background-position: 3px 4px;}
.monthBox2 .resChoice{width:200px;height:20px;margin:20px auto 0;text-align:center;letter-spacing:0;}
.monthBox2 .resChoice span{font-size:12px;color:#a3a1a1; width: 90px;}
.monthBox2 .resChoice img{width:15px;height:15px; vertical-align: middle;}

/*//메인예약변경 191112*/


@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}




@-webkit-keyframes in {
  from {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes in {
  from {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
  }
}

#main_slides {
  position:relative;
  width: 1px;
  height: 1px;
  left: -9999px;
}

#slideshow {
  position:relative;
  overflow: hidden;
  width: 100%;
  height: 980px;
}

#slideshow .slide, #slideshow span, #slideshow .static-content {
  display: block;
  position: absolute;
   width: 100%;
  height: 980px;
}

#slideshow .slide span {
  background-size: cover;
  background-position: center;
}

#slideshow span.animate {
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
}
#slideshow span.animate.in {
    -webkit-animation-name: in;
    -ms-animation-name: in;
    animation-name: in;
}


/*-----------------실시간예약-----------------*/
.mainTopReser{ position: absolute;  top:600px; left:50%; margin-left: -590px;}
.mainTopReser .reserBg{ width:1180px; height:154px; opacity:0.8; background-color: #fff; display: block;}
.mainTopReser .topReserBox{position: absolute; top:0; left: 0; width: 100%;}
.topReseWrap{ width:940px; margin: 33px auto;}
.topReseWrap h3{ font-size: 12px; color:#bcbcbc;}
.topReseWrap h3 strong{ font-size: 17px; color: #373737; margin-right: 10px;}
.topReser{ width: 100%; margin: 20px 0;}
.topReser > span{float: left;width: 73px; padding-right: 5px; margin-right: 5px; }
.topReser .SelectWrap{  float: left; width: 673px;}
.topReser .mReserbtn{ float: left; width: 175px; height: 46px; text-align: center; margin: 0 5px; color: #fff; line-height: 45px; background-color: #0e253a;}
/*-----------------상단예약 drop menu-----------------*/
.divSelectWrap {
width:331px; overflow:hidden; border:1px solid #dddddd;  margin:0 10px 0 0;  padding:12px 0;color:#b2b2b2 ; font-size: 12px; background-color: #fff;float: left;} 

.divSelectText {width:327px; float:left; height: 21px; cursor:pointer; background:url('../../images/intro/selectBg2.gif')repeat left; padding-left:39px; margin-left: 1px; }

.divSelectWrap ul{
display: none;
margin:25px 0 -6px 0;
width:331px;   /*divSelectWrap에서 현재 padding값 뺀 값 */
overflow:auto; 
overflow-x:hidden; 
overflow-y:hidden;
background-color: #fff;
margin-left:-1px;
border-left:1px solid #dddddd;
border-right:1px solid #dddddd;
}

.divSelectWrap ul li {  padding:15px 0 0 40px;}
.divSelectWrap ul li:last-child {  padding:15px 0 15px 40px;}
.divSelectWrap ul li.selected  {background-color : none;cursor:pointer; }
.divSelectWrap ul li:hover { background-color : none;cursor:pointer; }


/*-----------------상단달력-----------------*/
.monthSelect{ width: 330px; height: 47px; line-height: 47px; padding:0 40px; background:url('../../images/intro/selectBg1.gif')repeat left; border:1px solid #dddddd; color:#b2b2b2 ; font-size: 12px; float: left;}
.monthBox{
    position:absolute;
    top:70px;
    left: 539px;
    margin-top:-375px;
    width:330px;
    height: 375px;
    border: solid 1px #e3e3e3;
    background:#fff;
    display: none; 
    padding: 10px;
    overflow:hidden;
}
/* -----------------상단달력 - calendar -----------------*/
.monthBox .monthChoice{width:180px; overflow:hidden; margin:0 auto;height:40px;padding: 10px 0;}
.monthBox .monthChoice span{ float: left;}
.monthBox .monthChoice .monthBtn{float:left;letter-spacing:0;display:block;padding:0px; width: 15px;} 
.monthBox .monthChoice .month{float:left;margin:0 auto; color: #1d1d1d; font-weight:bold; width:150px; height:23px; font-size:19px; text-align:center; line-height:23px;}

.monthBox .calTxt{width:100%;margin:10px auto;text-align:center;font-size:15px;letter-spacing:0;}

.monthBox .mainCalendar {text-align:center;width:100%;margin:0 auto;height:265px;}
.monthBox .mainCalendar tbody th {font-size:13px;color:#444444;font-weight: bold;height:34px;}
.monthBox .mainCalendar td div {
font-size:13px;width:30px;color:#b7b7b7;cursor: pointer;margin: auto;
height:38px;line-height:34px;vertical-align: middle;}

.gray{width:30px;height:34px;line-height:34px;font-size: 13px;color:#b7b7b7;letter-spacing: -1px;
cursor: pointer;}

.monthBox .mainCalendar .sun{color: #bf3b3b;height: 20px;}

.monthBox .mainCalendar .possible div{ color:#444; background:url('../../images/intro/dot_blue.png')no-repeat; background-position: 3px 7px;}
.monthBox .mainCalendar .impossible div{ color:#444; background:url('../../images/intro/dot_red.png')no-repeat; background-position: 3px 7px;}

.monthBox .mainCalendar .today div{width:30px;height:34px;line-height:34px;color:white;border-radius:5px;}
.monthBox .mainCalendar .today div{background:url('../../images/intro/mtodayIm.png')no-repeat;     background-position: 3px 4px;}

.monthBox .resChoice{width:200px;height:20px;margin:20px auto 0;text-align:center;letter-spacing:0;}
.monthBox .resChoice span{font-size:12px;color:#a3a1a1; width: 90px;}
.monthBox .resChoice img{width:15px;height:15px; vertical-align: middle;}


/*2area*/
.area2{ position: relative; width:100%;height: 980px; background-color: #f5f5f5; }
.are2_tit{ width: 380px; margin:0 auto 46px; text-align: center; padding-top: 123px; }
.are2_tit h2{ font-size:48px ; color:#0e253a;}
.are2_tit h4{font-size:15px; color:#989898;}
.area2_slider{ width: 1200px; margin: 0 auto;}
.area2_slider h2{ text-align: center; font-size: 30px; color:#505050; margin-bottom: 28px;}


 /* Slider */
.slick-slide img {
	width: 382px;
	height: 382px;
	/* border:3px solid #fff; */
	display: block;
}

.slick-slide {
	transition: all ease-in-out .3s;
    opacity: 1;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
	
	margin: 0px 15px;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}



/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 63px;
    height: 63px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    outline: none;
}
.slick-prev:hover:before, 
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: 1;
}

.slick-prev:before,
.slick-next:before
{
    opacity: 1;
}

.slick-prev
{
    left: -80px;
	outline: none;
}
.slick-prev:before
{
    content: '';
	background: url(../../images/intro/btn_both.png) no-repeat;
	width:63px;
	height: 63px;
	display: block;
	outline: none;
}
.slick-prev:hover:before
{
    content: '';
	background: url(../../images/intro/btn_both_over.png) no-repeat;
	width:63px;
	height: 63px;
	display: block;
	outline: none;
}
.slick-next
{
    right: -80px;
	outline: none;
}
.slick-next:before
{
    content: '';
	background: url(../../images/intro/btn_both.png) no-repeat;
	width:63px;
	height: 63px;
	display: block;
	outline: none;
	transform:rotate(-180deg);
	
}
.slick-next:hover:before
{
    content: '';
	background: url(../../images/intro/btn_both_over.png) no-repeat;
	width:63px;
	height: 63px;
	display: block;
	outline: none;
}


/*mobile_area*/
.area_mobile{position: relative; width:100%; height: 857px; background:url('../../images/intro/bg_area_mobile.jpg') no-repeat center center; background-size: cover;}
.area_mobile .text_box{ position: absolute; top:13%; left:17%;}
.area_mobile .text_box h2{ color:#2f2f30;font-size: 45px; line-height: 62px; }
.area_mobile .text_box h2 span{ color:#2770b3; font-size: 47px;}
.area_mobile .text_box h3{ color:#646464;font-size: 18px;line-height: 30px;}
.area_mobile .font_underline{color:#2770b3; font-size:19px; border-bottom:1px solid #2770b3}
   
/*3area*/
.area3{position: relative; width:100%; height: 960px; background:url('../../images/intro/bg_area3.gif') no-repeat center center; background-size: cover;}
.area3 .text_box{ position: absolute; top:32%; left:17%;}
.area3 .text_box h2{ color:#2f2f30;font-size: 45px;}
.area3 .text_box h2 span{ color:#2770b3; font-size: 47px;}
.area3 .text_box h3{ color:#646464; font-size: 18px;line-height: 30px;}


/*sidebanner*/
/*-----------------따라다니는판넬(family site)-----------------*/
#sidebar-menu{ position: relative;}
.fixPannel2{position:fixed; top: 56%; left: 0; width: 55px; height: 285px; margin-top: -200px; background-color: #41292D; border-top-right-radius: 15px; border-bottom-right-radius: 15px; z-index: 600;}

.fixPannel2 .pannelBtn{ width: 55px; height: 320px; display: block;cursor: pointer;}
.fixPannel2 h4{
	position: absolute;
	color: #7a8b9a;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);font-size: 12px;
	left:-81px; top:146px; width:214px; text-align: center;}
.fixPannel2 h4 span{ color: #fff;}

.fmlbn {
	position: relative;
	height: 39px;
	margin: 0 auto;
	text-align: left;
}
.fmlbn img{
    position: absolute;
    left: 0;
    top:0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.fmlbn img.second_bn:hover{
    opacity: 0;
}
.fmlbn a {font-size: 24px !important; opacity: 0.5;}
.fmlbn a b {font-size: 23px !important;}


/*family site 판넬내용*/
.sidenav_wrap2{
  position:fixed;
  z-index: 650;
  top: 56%;
  left: 0;
  margin-top:-200px;
  overflow-x: hidden;
}
.sidenav2 {
  margin-bottom: 15px;
  height: 365px;
  width: 280px;
  padding-top: 35px;
  background-color: #0f253a;  
  transition: 0.3s;/*열고닫히는속도*/
  -ms-transition: 0.3s;
  -webkit-transition: 0.3s;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px; 
}
.sidenav2 .closebtn { position: absolute; padding: 8px; top: 8px; right: 8px; display: block; -webkit-transition: 0.3s; -ms-transition: 0.3s;transition: 0.3s; color: #fff; }
.sidenav2 .closebtn:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); /* Safari */
    -ms-transform:rotate(360deg); /*explorer*/
    -moz-transform:rotate(360deg); /*firefpx*/
    -o-transform:rotate(360deg); /*opera*/
	 color: #fff;
}
.sidenav2 strong{ 
    position: absolute;
    text-transform:uppercase;
    color: #fff;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    margin-left: -12px;
    font-weight: 500;
    top:100px;
    left: 0;
}
.sidenav2 .sideList{ clear: both; float: left; width: 210px; margin-left: 30px; margin-top: -8px; }
.sidenav2 .sideList li{ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #6e6e7c; text-align: center;}
.sidenav2 .sideList li:last-child{ border-bottom:none;}
.sidenav2 .sideList li a{ font-size:18px; color: #fff;transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s;}
.sidenav2 .sideList li a:hover{ color:#749dc9; opacity: 1;}