@charset "euc-kr";

@font-face {
    font-family: 'NanumSquareNeoBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

BODY,TD,input,DIV,form,a,p,span,TEXTAREA,center,pre,blockquote {font-family:'NanumSquareNeo' !important;}


 /* ===== ¸Ç À§·Î ¹öÆ° ===== */
  .floating-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }

  /* ===== °øÅë ¹öÆ° ½ºÅ¸ÀÏ ===== */
  .floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Á¤È®ÇÑ Áß¾ÓÁ¤·Ä */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
    box-shadow:
      0 5px 5px rgba(0,0,0,0.35),
      inset 0 1px 1px rgba(255,255,255,0.15);
  }

  .floating-wrap.show .floating-btn {
    opacity: 1;
    transform: translateY(0);
  }



  /* ===== ÀüÈ­ ¹öÆ° ===== */
  .call-btn {
    background: #18a8f1;
   margin-bottom: 10px;
  }

  .call-btn img {
    width: 30px;
  }

  .call-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  }
  
  

  /* ===== ºí·Î±× ¹öÆ° ===== */
  .blog-btn {
    background: #21ac38;
   margin-bottom: 10px;
  }

  .blog-btn img {
    width: 30px;
  }

  .blog-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  }
  

  /* ===== ÀνºÅ¸ ¹öÆ° ===== */
  .insta-btn {
    background: #d1254f;
   margin-bottom: 10px;
  }

  .insta-btn img {
    width: 30px;
  }

  .insta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  }

 

  /* ===== À¯Æ©ºê ¹öÆ° ===== */
  .youtube-btn {
    background: #e73828;
   margin-bottom: 10px;
  }

  .youtube-btn img {
    width: 30px;
  }

  .youtube-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  }

  /* ===== Ä«Ä«¿À ¹öÆ° ===== */
  .kakao-btn {
    background: #FEE500;
   margin-bottom: 10px;
  }

  .kakao-btn img {
    width: 30px;
  }

  .kakao-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
  }

  /* ===== ¸ÇÀ§ ¹öÆ° ===== */
  .top-btn {
    background: linear-gradient(145deg, #111, #333);
  }

  /* È­»ìÇ¥ Á¤È®È÷ Á¤Áß¾Ó */
.arrow {
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: translateY(2px) rotate(45deg);
}

  .top-btn:hover {
    background: linear-gradient(145deg, #000, #555);
    transform: translateY(-4px);
  }

  /* ===== ¹ÝÀÀÇü ===== */
  @media (max-width: 1024px) {
    .floating-wrap {
      right: 20px;
      bottom: 20px;
    }
    .floating-btn {
      width: 50px;
      height: 50px;
    }
  }

  @media (max-width: 768px) {
    .floating-wrap {
      right: 16px;
      bottom: 16px;
    }
    .floating-btn {
      width: 44px;
      height: 44px;
    }

    /* ¸ð¹ÙÀÏ¿¡¼­ È­»ìÇ¥ ´õ ÀÛ°Ô */
    .arrow {
      width: 10px;
      height: 10px;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
    }

    .call-btn img {
      width: 25px;
    }

    .blog-btn img {
      width: 25px;
    }

    .insta-btn img {
      width: 25px;
    }

    .youtube-btn img {
      width: 25px;
    }

    .kakao-btn img {
      width: 25px;
    }
  }

/* ==============================================
   layout
   ============================================== */

/* sub body */

#subBodyLine { width: 100%; min-height: 1px; border-top: 1px solid #eeeeee; padding-top: 30px; margin: 0 auto 30px; }
#subBodyLine1 { width: 100%; min-height: 1px; border-top: 1px solid #eeeeee; padding-top: 0px; margin: 0 auto 0px; }

#subBodyLine_foot { width: 100%; min-height: 1px; border-top: 1px solid #eeeeee; padding-top: 10px; margin: 0 auto 10px; }
#subBody { top:20px;margin:0 auto;max-width:1200px;min-height:100px; height:auto;padding:0px; }
#subBody1 { width: 95%; min-height: 100px; padding-top: 0px; margin: 0 auto 30px; }

/* body right */

#subBody .bodyRight {min-height: 500px;}
#subBody .bodyRight .titleArea { position: relative; height: 64px; border-bottom: 1px solid #d8d8d8; padding: 12px 0; margin-bottom: 45px;}
#subBody .bodyRight .titleArea h3 { line-height: 40px; font-size: 22px;}
#subBody .bodyRight .titleArea ul.location { position: absolute; right: 0; bottom: 14px; height: 20px;}
#subBody .bodyRight .titleArea ul.location li { float: left; color: #4e4e4e; background: url(../images/common/location_devider.png) left center no-repeat; padding-left: 12px; margin-left: 6px;}
#subBody .bodyRight .titleArea ul.location li.home { background-image: url(../images/common/location_home.png); padding-left: 16px;}


/* mediaquery for mobile */

@media only screen and (max-width: 1200px) {

/* sub body */
#subBodyLine { width: 100%; min-height: 1px; border-top: 0px solid #FFFFFF; padding-top: 0px; margin: 0 auto 0px; }
#subBody { width: auto; min-height: 100px; padding: 0px 10px 0px 0px; margin: 0 auto 20px 10px; }

/* body right */

#subBody .bodyRight { min-height: 20px;}
#subBody .bodyRight .titleArea { position: relative; height: 64px; border-bottom: 1px solid #d8d8d8; padding: 12px 0; margin-bottom: 45px;}
#subBody .bodyRight .titleArea h3 { line-height: 40px; font-size: 22px;}
#subBody .bodyRight .titleArea ul.location { position: absolute; right: 0; bottom: 14px; height: 20px;}
#subBody .bodyRight .titleArea ul.location li { float: left; color: #4e4e4e; background: url(../images/common/location_devider.png) left center no-repeat; padding-left: 12px; margin-left: 6px;}
#subBody .bodyRight .titleArea ul.location li.home { background-image: url(../images/common/location_home.png); padding-left: 16px;}

}

#hd_login_msg {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}


@media(min-width: 1200px) {
#m_blank{height:30px}
#m_blank1{height:0px}
#m_blank2{height:30px}
}



@media(max-width: 1201px) {
#m_blank{height:100px}
#m_blank1{height:20px}
#m_blank2{height:90px}
}


/* ==============================================
   unit
   ============================================== */

/* form */


/* align */

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}

/* button */

a {
     -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
     transition: all 0.2s ease;
}



/* ==============================================
   contents
   ============================================== */

/* introduce */

#subBody.introduce .btnList { margin-top: 50px; }

/* product */

.productSlide { position: relative; height: 350px; margin-bottom: 50px; overflow: hidden; }
.productSlide ul.slides li { height: 350px; }

.productSlide ul.flex-direction-nav li a { display: block; position: absolute; top: 50%; width: 47px; height: 47px; text-indent: -9999px; margin-top: -24px; cursor: pointer; z-index: 999; }
.productSlide ul.flex-direction-nav li a.flex-prev { left: 20px; background: url(../images/common/btn_slide_prev.png) 0 0 no-repeat; }
.productSlide ul.flex-direction-nav li a.flex-next { right: 20px; background: url(../images/common/btn_slide_next.png) 0 0 no-repeat; }

/* reservation */

.reservationBox {*zoom:1;} /* Hack for browser IE5.5~7 */
.reservationBox:after { content:" "; display:block; clear:both;} /* float virtual element */
.reservationBox { border: 4px solid #4a4a4a; padding: 40px 0; }
.reservationBox h4 { line-height: 40px; font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.reservationBox .writeArea { float: left; width: 50%; height: 100px; padding: 0 38px; }
.reservationBox .writeArea a.btn { background-color: #cb3233 !important; padding: 0 20px; margin-left: 10px; }
.reservationBox .searchArea { float: left; width: 50%; height: 100px; border-left: 1px solid #4a4a4a; padding: 0 38px; }
.reservationBox .searchArea input.submit { color: #fff !important; font-weight: bold !important; background-color: #cb3233 !important; padding: 0 20px !important; }

#subBody.reservationIntro .btnList { margin-top: 50px; }

@media only screen and (max-width: 800px) {


/* introduce */

#subBody.introduce .btnList { margin-top: 30px; }

/* product */

.productSlide { position: relative; height: 200px; margin-bottom: 30px; }
.productSlide ul.slides li { height: 200px; }

.productSlide ul.flex-direction-nav li a { width: 24px; height: 24px; margin-top: -12px; }
.productSlide ul.flex-direction-nav li a.flex-prev { left: 6px; -webkit-background-size: 100% auto; background-size: 100% auto; }
.productSlide ul.flex-direction-nav li a.flex-next { right: 6px; -webkit-background-size: 100% auto; background-size: 100% auto; }

/* reservation */

.reservationBox { padding: 16px 16px 24px; }
.reservationBox h4 { line-height: 30px; }
.reservationBox .writeArea { float: none; width: auto; height: auto; padding: 0 0 24px 0; }
.reservationBox .writeArea a.btn { width: 160px; text-align: center; padding: 0; margin: 10px 0 0 0; }
.reservationBox .searchArea { float: none; width: auto; height: auto; border: 1px solid #4a4a4a; border-width: 1px 0 0; padding: 15px 0 0 0; }
.reservationBox .searchArea input.text { width: 100px; }
.reservationBox .searchArea input.submit { padding: 0 10px !important; }

#subBody.reservationIntro .btnList { margin-top: 30px; }

}