/*
 * Globals
 */
  
@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #FFF;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: rgba( 255, 255, 255, 0 );
  border: 1px solid #FFF;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #333;
}
body {
  color: #fff;
  text-align: center;
  
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  /*display: table;*/
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}

.site-wrapper-inner {
  /*display: table-cell;*/
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 15px;
}


/*
 * Header
 */
#titlebar{
  color:#000;
  width:100%;
  background-color: #FFF;
  opacity: 0.9;
  z-index:10000;
  padding-left:50px; padding-right: 50px;
  border-bottom: 2px solid #FFF;
}


#menu-icon {
    display: none;
    color:#000;
}
.masthead-nav
{
  margin:0 auto;
}
.masthead-nav > li {
  display: inline-block;
}

.masthead-nav > li > a, .masthead-nav span {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: normal;
  /* IE8 proofing */
  
  border-bottom: 2px solid transparent;
}
.fontblack{
  color: #000; 
}
.fontwhite{
  color:#FFF;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #FFF;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  font-weight: bold;
  color: #38798D;
}
.masthead-brand {
  font-size: 20px;
  font-family: 'Jeju Hallasan', serif;
}


#second-menu
{
  /*margin-top:75px;*/
  color:#FFF;
  width:100%;
  background-color: #2C2E2F;
  opacity: 0.9;
  z-index:10000;
  padding-left:50px; padding-right: 50px;
  vertical-align:middle;
}

#second-menu > li {
  display: inline-block;
}

#second-menu > li + li {
  margin-left: 20px;
}

#second-menu > li > a, #second-menu span {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: normal;
  color: #FFF; /* IE8 proofing */
  color: rgba(255,255,255,.95);
  border-bottom: 2px solid transparent;
}

#second-menu > li > a:hover,
#second-menu > li > a:focus {
  background-color: transparent;
  border-bottom-color: #FFF;
  border-bottom-color: rgba(255,255,255,.25);
}

#second-menu > .active > a,
#second-menu > .active > a:hover,
#second-menu > .active > a:focus {
  font-weight: bold;
  color: #FFF;
  border-bottom-color: #FFF;
}

.main-contents{
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/*
 * Main1
 */

  #main1{
  z-index: 1;
  width:100%;
  background-color: #000;
  margin:-50px 100 100 -50px;
  background-image: url('images/main.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  }
  /*.cover {

    background-color: #FFFFFF;
    margin-top:30%;
    margin-bottom:30%;
  }*/

  

  .lead{
    margin-top:10px;
  }
  .cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
  }
  .cover-heading{
    width:500px;
  }
  .cover-heading{
    margin:0 auto;
    font-family: 'Jeju Hallasan', serif;
    padding: 10px 20px;
    color:#FFF;
    font-size:70px;
  }
  .cover > .lead{
    font-family: 'Jeju Myeongjo', serif;
  }

  .masthead {
      padding:height;
      /*position: fixed;*/
      top: 0;
  }
  #guide{
    text-shadow: none; 
    color:#3D3D3D;
  }
  .table{
    font-size:15px;
    text-align: left;
    color:#000;
    border-color: #C7CCCE;
    text-shadow: 0 1px 3px rgba(0,0,0,.0);
  }

  .table th{
    background-color: #C7CCCE;
  }
  #reservation{
    text-align: center;
    background-color:#2BA3C4;
    color:#FFF;
    font-size: 20px;
    font-weight: bold;
  }


  #contents-menu{
    padding-top:50px;
    vertical-align: middle;
    background-color: #E8EBEC;
    display: block;
    width:100%;
    padding-bottom:50px;
  }
  #contents-menu > ul{

    width:100%;
    height:150px;
    list-style:none;
    padding-left:0px;
  }

  #contents-menu > ul > li{
    width:24.7%;
    display: inline-block;
    line-height:150px;
    height:150px;
    background-color: #DCE0E3;
  }
  #contents-menu > ul > li > h1{
    height:400px;
    margin-top:12%;
    color:#000;
    text-shadow: 0 1px 3px rgba(0,0,0,.0);
    font-family: 'Jeju Myeongjo', serif;
  }

  #room-info{
    width:70%;
    margin:0 auto;

  }
@media (min-width: 927px){
  /*
   * Main2
   */
  .masthead-nav > li + li {
  margin-left: 70px;
  }
  #main1{
    height:820px;
  }
  ._pattern-overlay { 
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0.3;
    bottom: 0;
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/vegas/2.3.1/overlays/03.png);
  }
   #room-items{
    width:100%;
    position: absolute;
    top:700px;
    left:50%;
    transform: translateX(-50%);
   }
  .center-position{
    position: absolute;
    top: 350px;
    left:50%;
    transform: translateX(-50%);
    z-index: 1000;
  }
  .cover-heading{
    background-color: rgba( 25, 25, 25, 0.8 );
  }
  #main2{
    z-index: 2000;
    float:right;
    height:100%;
  }
  #main2 img{
    width:100%;
  }
  #main2 .title-text{
    padding:20px;
    position: absolute;
    top: 950px;
    right: 100px;
    z-index: 1100;
    display: inline-block;
    color: #FFF;
    text-align: left;
    background-color: rgba( 25, 25, 25, 0.25 );
  }
  
  #main2 h1{
    font-size:50px;
    font-weight: bold;
  }
  #main2 p{
    font-size:20px;
  }

  #gallery{
    background-color: #000;
  }
  .lefttext{
    left: 200px;
  }

  .righttext{
    right: 200px;
  }

  /*
   * Main2
   */

  #main3{
    margin-top:1420px;
    float:right;
    position:absolute;
    height:100%;
  }
  #main3 img{
    width:100%;
    height:100%;
  }
  #main3 .title-text{
    position: absolute;
    bottom: 550px;
    right: 100px;
    z-index: 1100;
    display: inline-block;
    color: #FFF;
    text-align: left;
  }
  #main3 h1{
    font-size:50px;
    font-weight: bold;
  }
  #main3 p{
    font-size:20px;
  }
  /*
   * Footer
   */

  .mastfoot {
    padding-left:30%;
    text-align: left;
    bottom:0px;
    background-color: #242924;
    color: #999; /* IE8 proofing */
    color: rgba(255,255,255,.5);
  }


  /*
   * Affix and center
   */

    /* Pull out the header and footer */
    
    .mastfoot {
      
    }
    /* Start the vertical centering */
    .site-wrapper-inner {
      vertical-align: middle;
    }
    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
      width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
  #contents-menu-inner-mobile{
    display: none;
    height: 0px;
  }
  #contents-menu-inner-pc{
    display: block;
  }
  
}

/*모바일 mobile*/
@media(max-width: 1011px){
  #contents-menu > ul > li{
      width:23.7%;
      display: inline-block;
      line-height:150px;
      height:150px;
      background-color: #DCE0E3;
    }
    #contents-menu > ul > li > h1{
      line-height:100px;
      font-size: 15px;
  }

}
@media (max-width: 926px){
  .masthead-nav > li + li {
  margin-left: 20px;
  }
  #main1{
    height:300px;
    margin-top:-75px;
  }
  
  #main1{
      background-image: url('images/mobilemain.jpg');
  }
  #room-items{
    display:none;
   }

  .center-position{
    margin-top:70px;
  }
  #titlebar{
    min-height:70px;
    color:#FFF;
    width:100%;
    background-color: #FFF;
    opacity: 0.9;
    z-index:10000;
    padding-left:50px; padding-right: 50px;
    border-bottom: 2px solid #FFF;
  }

  #menu-icon {
    position: absolute;
    top:25px; right:25px;
    display: inline-block;
  }
  .masthead-nav
  {
    margin-right:0px;
  }

  .menu-list{
    display: none;
  }
  .cover-heading{
    margin:0 auto;
    font-family: 'Jeju Hallasan', serif;
    padding: 10px 20px;
    color:#FFFFFF;
    font-size:50px;
    white-space:nowrap;
    text-shadow: none;
  }
  .cover-heading{
    padding-top:60px;
    width:80%;
  }
  .mobile-title{
    padding:2px;
    background-color: rgba( 25, 25, 25, 0.8 );
  }
  #main2{
    float:right;
    background-image: url('images/5-2.jpg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    
  }
  #main2 img{
    width:100%;
  }
  #main2 .title-text{
    width:100%;
    background-color: #505F68;

    padding-top:20px;
    padding-bottom:20px;
    white-space:default;
    top: 550px;
    right: 100px;
    z-index: 1100;
    display: inline-block;
    color: #FFF;
    text-align: center;
  }
  #main2 h1{
    font-size:35px;
    font-weight: bold;
  }
  #main2 p{
    font-size:13px;
  }

  #contents-menu{
    display: block;
    width:100%;
    padding:0;
    margin:0;
  }
  #guide{
    padding-top:30px;
  }

  .table{
    width:100%;
    font-size:15px;
    text-align: left;
    color:#000;
    border-color: #C7CCCE;
    text-shadow: 0 1px 3px rgba(0,0,0,.0);
  }

  .table th{
    background-color: #C7CCCE;
  }
  #reservation{
    text-align: center;
    background-color:#2BA3C4;
    color:#FFF;
    font-size: 20px;
    font-weight: bold;
  }
  #contents-menu-inner-mobile{
    padding-top:30px;
    display: block;
  }

  #contents-menu-inner-pc{
    display: none;
    height: 0px;
  }
  
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
  }
}