html,body{
  padding: 0;
  margin: 0; 
} 
html{height: 100% }
body{   
  font-family: 'Museo Slab', serif;
  color: #000000;
  font-size: 21px; 
  font-weight: 300;
  margin: 0px;
  padding:0;
  line-height: 1.3; 
  background:#ffffff;  
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */

  position: relative;
  overflow-x: hidden;
}
 
b, strong{
  font-weight: 500; 
  font-family: inherit;
}
h1,h2,h3,h4,h5,h6{   
  margin:0;  
  color: #000; 
  line-height: 1;   
} 

.white{ color: #ffffff !important } 

.nowrap{ white-space: nowrap; }
 
a{
  color:inherit;
  -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
a:hover{ text-decoration: none; color: inherit; }
   
.form-control{
  -webkit-appearance: none;
  font-size: 20px;
  border-radius: 0;
  border:2px solid #ccc;
  padding: 0 10px;
  height: 40px;
  line-height: 40px
}
 

.radio-group, 
.checkbox-group{ 
  padding-left:0; 
  position:relative;
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-align:center;
  display:inline-block;
  vertical-align:top
}
.radio-group{ display:inline-block; position:relative}


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  height: 0;
  position: absolute;
  width: 0
}
.checkbox-group label:before,
.radio-group label:before {
  content: "";
  display: inline-block;

  margin-right: 5px;
  position: absolute;
  left:0;
  top:5px;
  background-color: transparent;
  border: 1px solid #aaaaaa; 
  width:16px;
  height:16px; 

   -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.radio-group label:before { 
  
  /*-webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;*/
  
}
.radio-group label,
.checkbox-group label {
  position:relative;
  padding-left:30px;
  padding-right:15px;
  text-align:left;
  margin:1px 0;
  display:block;
  font-weight:300;
  font-size:inherit;
  line-height:25px;
  cursor:pointer;

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.checkbox-group label{color: inherit;}
.checkbox-group label span{ font-size: 12px; font-style: italic; color: #8f8f8f } 
.radio-group label{color: inherit; padding-left: 28px} 

 
.radio-group input[type="radio"]:checked + label:after {
    content: "";
    color: #ea6f21;
  background-color:#555;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  position:absolute;
  left:3px;
  top:9px;
  width:12px;
  height:12px;
}
 

.checkbox-group input[type="checkbox"]:checked + label:after,
.checkbox-group input[type="checkbox"]:checked + .error + label:after {
  content: "";
  width:15px;
  height:15px;
  position:absolute;
  top: 8px;
  left: 2px;
  display:block; 
  background-image: url(../img/icons/icon-checked.svg);
  background-position:0 0;
  background-size: 11px;
  background-repeat: no-repeat;
  
}
  
.checkbox-disable.checkbox-group label:before{
  background-color:#c0c0c0;
  border:2px solid #b1b1b1;
  cursor:default !important
}
.checkbox-disable.checkbox-group input[type="checkbox"]:checked + label:after {
  content:'';
}


.form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 0.5;
}

.form-control::-moz-placeholder {
  color: #000000;
  opacity: 0.5;
}

.form-control:-ms-input-placeholder {
  color: #000000;
  opacity: 0.5;
}

.form-control::-ms-input-placeholder {
  color: #000000;
  opacity: 0.5;
}

.form-control::placeholder {
  color: #000000;
  opacity: 0.5;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}



.input-block{
  display: block;
  position: relative;
  margin-bottom: 20px
}
.input-text{
  display: block;
  font-size: 15px;
  font-weight: 300;
  padding-bottom: 5px;
}
.input-text .star{
  display: inline-block;
  padding-left: 3px;
  color: #d34836;
  font-style: normal;
}

.card{
  border:0;
  border-radius: 0;
}

.card-photo{
  position: relative;
  display: block;
  overflow: hidden;
}
.card-photo .photo{
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.card-photo .photo img{ width: 100% }


.select-hidden {
  /*display: none;*/
  opacity: 0;
  visibility: hidden;
  padding-right: 0;

  width: 100%;
  height: 60px;

  position: relative;
  z-index: 99
}

.select {
  position:relative;
  padding-left:0 !important;
  cursor:pointer;
  display:block;
  margin-bottom:0; 
  height: 40px; 
  cursor: pointer;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
  padding:0;
  color: #a5a7a9;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.has-value .select-styled{ color: #221f1f}
.select-styled:after {
  content:'';
  position: absolute;
  right: 20px;
  top: 50%;
  width:15px;
  height:15px;
  vertical-align:top;
  margin-left:1px;
  margin-top:-6px;  

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-arrow-listbox.svg);
}
 
 
.select-options {
  display: none;
  position: absolute;
  top: 52px;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border:1px solid #f1f1f1;
  max-height: 200px;
  overflow-x: auto;
}
.select-options li {
  margin: 0;
  padding: 5px 0;
  text-indent: 20px; 
  font-size: 16px;
  font-weight: 300;
  color: #373337;
  font-family: inherit;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:hover {
  background: #f1f1f1;
}
.select-options li[rel="hide"] {
  display: none;
}
 
span.error{
  font-family: tahoma,arial;
  font-size: 11px;
  color: red;
  display: block;
  margin-bottom:5px;
  margin-top:3px; 

  display: none !important;
}
.form-control.error{ border-color: #ffaaaa !important; background-color: #ffeaea !important }

.valid + .select-styled{border-color: #ffaaaa; background-color: #ffeaea }
.has-value .select-styled{ border-color: #fff !important; background-color: #fff !important }
  
/* ============== Icon Setup   =============== */ 


.icons{
  display:inline-block;
  position:relative;
  vertical-align:top;
  /*background-image:url(../img/icons.png);*/
  background-size: contain;
  background-repeat:no-repeat;
  background-position: 0 0;
}


 
  
/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
   height:5px;
   vertical-align:top;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arrow-left{
   border-top: 1px solid #676767;
   border-left: 1px solid #676767;
   -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);  
}

.arrow-right{
  border-top: 1px solid #676767;
  border-left: 1px solid #676767;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px;
   border-top: 1px solid #000000;
   border-left: 1px solid #000000;
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}

.page{
  position: relative; 
  display: block;   
  overflow: hidden;
}  
.btn{
  padding: 0 20px;
  position: relative;
  background-color: #dadada;
  border-radius: 0;
  height: 45px;
  line-height: 43px;
  font-family: inherit;
  font-size: 14px;
  overflow: hidden;
  font-family: 'Brandon Grotesque';
  font-weight: bold;
  -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
}
 
 
.btn-black{
  border:0px solid #333333;
  background-color: #333333;
  color: #fff;
}
.pc .btn-black:hover {
  color: #fff;
  background-color: #f3794d;; 
} 
 
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
}

.btn-white{
  border:0 !important;
  background-color: #fff;
  color: #f16521;
  line-height: 45px
}
.btn-white:hover {
  color: #fff;
  background-color: #000000; 
} 


.btn-outline-white{
  border:1px solid #fff;
  background-color: transparent;
  color: #fff;
}
.btn-outline-white:hover {
  color: #fff;
  background-color: #c0a781;
  border-color: #c0a781;
} 
 
.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
}

.container-fluid{
  max-width:100% ;  
  padding-left: 50px;
  padding-right:50px; 
}
.container{
  width: 100%;
  max-width:calc(1150px + 100px);  
  padding-left: 50px;
  padding-right: 50px 
}  

.gnb-box {
  position:fixed;
  top:0;
  left:0; 
  right: 0;
  bottom:0;
  z-index:1021;
  pointer-events:none;
  background-color:transparent;
  border:0 solid #fff;
  box-sizing:border-box;
  
  -webkit-transition:border .3s ease-in, background 0s linear;
    transition:border .3s ease-in, background 0s linear;
}
.gnb-box.gnb1{border:15px solid #ffffff;}
.gnb-box.gnb2{border:20px solid #ffffff;}

.btn-icon{
  padding: 0;
  background-color: transparent !important;
  width: 40px; 
  height:40px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 999;

  top: -1px;
  overflow: visible;
}
.btn-icon:before{ display: none; }
/*.btn-icon:after{
  content: '';
  position: absolute;
  top: -16px;
  left: -11px;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;

  opacity: 0;

  -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
}
.scrolling .btn-icon:after{ opacity: 1 }
.scrolling .btn-icon span{ background-color: #000 }*/

.btn-icon span{ 
  height: 3px;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
  -webkit-transform-origin: 25px, 1px;
  -ms-transform-origin: 25px, 1px;
  transform-origin: 25px, 1px;
}  

.header.dark .btn-icon span,
.gnb-open .btn-icon span{ background-color: #000 }
.header.dark .navbar-option .lang,
.header.dark .navbar-option .lang a{ color: #000 }


.pc .btn-icon:hover span:nth-child(1):before,
.pc .btn-icon:hover span:nth-child(3):before { 
   -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.btn-icon span:nth-child(1) { 
    top: 0;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}

.btn-icon span:nth-child(2) {
    top: 12px;
    -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}

.btn-icon span:nth-child(3) { 
    top: 24px;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}


.gnb-open .btn-icon span:nth-child(1){
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
    transform: rotate(45deg) translate3d(10px, 10px, 0)
}

.gnb-open .btn-icon span:nth-child(2){
    -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0)
}

.gnb-open .btn-icon span:nth-child(3) {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(-45deg) translate3d(7px, -7px, 0);
    transform: rotate(-45deg) translate3d(7px, -7px, 0)
}


.gnb-open.device,
.gnb-open.device body{  
  overflow: hidden;
  position: relative;
}

.gnb-box { display: block !important; }
.gnb-open .gnb-box {
  border-width: 50vh 50vw !important;
  background-color: transparent;
  -webkit-transition: border .3s ease-in, background 0s linear .3s;
  transition: border .3s ease-in, background 0s linear .3s;
}
.gnb-open .navbar-brand{ opacity: 0; pointer-events: none; } 
.header .container-fluid{ z-index: 1021 }
  
.navbar-popup .navlist{
  width: auto;
  text-align: center;
  padding: 0;
  margin: 0 !important;

  position: fixed;
  left: 0;
  right: 0;
  z-index: 1022;
  visibility: hidden;
  pointer-events: none;

  top: 50%;
  transform: translateY(-50%);

  -webkit-backface-visibility: hidden;
  -webkit-transform:translateY(-50%) translateZ(0) scale(1.0, 1.0);
}

.navbar-popup .navlist .icon{
  display: inline-block;
  vertical-align: middle;

  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 5px solid #000;
}

.gnb-open .navbar-popup .navlist{
  visibility: visible;
  pointer-events: auto;
}

.navbar-popup::before {
    content: '';
    position: fixed;
    border: 25px solid #f1f1f1;
    top: 0;
    right: 0;
    left: 0;
    border: ;
    bottom: 0;
    display: block;
    z-index: 99999;
    pointer-events: none;

    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

.gnb-open .navbar-popup::before{ opacity: 1 }

.navbar-popup .navlist li{
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0, 36px, 0);
  transform: translate3d(0, 36px, 0);
}
.navbar-popup .navlist li a{
  padding:8px 10px;  
  font-size: 18px;
  display:inline-block;
  font-family: 'Museo Slab 700';
  text-transform: uppercase;
} 
.navbar-popup .navlist li.active > a,
.pc .navbar-popup .navlist li a:hover{color: #61abff}

.navbar-popup .navlist li.lang{
  font-size: 12px;
}
.navbar-popup .navlist li.lang hr{
  width: 100px;
  margin: 20px auto;
  border-top: 1px solid rgba(0,0,0,.5);
}
.navbar-popup .navlist li.lang a{
  font-size: 12px;
  font-family: 'Museo Slab 300';
  padding: 8px;
}
.navbar-popup .navlist li.lang a.active{
  font-family: 'Museo Slab 700';
}
.navbar-popup .navlist li.followus a{ padding:8px 3px; }
.navbar-popup .navlist li.followus svg path{
  fill: #000;
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
} 

.pc .navbar-popup .navlist li.followus:hover svg path{ opacity: 0.75 }
.navbar-popup .navlist li .sub p{ margin: 0 }
.navbar-popup .navlist li .sub p:last-child{ margin-bottom: 10px  }
.navbar-popup .navlist li .sub a{
  font-size: 12px;
  font-family: 'Museo Slab 300';
  padding:3px 5px
}

.gnb-open .navbar-popup .navlist li{
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; 
}
.gnb-open .navbar-popup .navlist li{
  opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.gnb-open .navbar-popup .navlist li:nth-child(1) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.gnb-open .navbar-popup .navlist li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.gnb-open .navbar-popup .navlist li:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.gnb-open .navbar-popup .navlist li:nth-child(4) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.gnb-open .navbar-popup .navlist li:nth-child(5) {
  -webkit-transition-delay: 0.5s;
  transition-delay:0.5s;
}
.gnb-open .navbar-popup .navlist li:nth-child(5) {
  -webkit-transition-delay:0.6s;
  transition-delay:0.6s;
}
.gnb-open .navbar-popup .navlist li:nth-child(6) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.gnb-open .navbar-popup .navlist li:nth-child(7) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
.gnb-open .navbar-popup .navlist li:nth-child(8) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}
.gnb-open .navbar-popup .navlist li:nth-child(9) {
  -webkit-transition-delay: 1s;
  transition-delay:1s;
}

@media (max-height: 520px) {
  .navbar-popup::before{border: 15px solid #f1f1f1;}
  .navbar-popup .navlist li a{
    font-size: 12px;
    padding: 5px 10px;
  }

  .navbar-popup .navlist li.lang hr{ margin: 15px auto }
}

@media (max-height: 420px) {
  .navbar-popup::before{border:5px solid #f1f1f1;}
  .navbar-popup .navlist li.followus{ display: none; }
  .navbar-popup .navlist li.lang hr{ margin: 5px auto }
}
@media (max-width: 767px) {
  .navbar-popup::before{border: 10px solid #f1f1f1;}
}
 
.header{
  display: block;
  position:fixed;
  top: 0;
  left: 0;
  right: 0; 
  z-index:1023;     
  background-color:transparent; 
  box-shadow: 0 0 50px 0 rgba(0, 0, 0,0);
  border-bottom: 1px solid rgba(0,0,0,0);
  padding:70px 0 0;

  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
.header.ontop{
  position:absolute;
} 

.navbar-brand{
  width: 175px;
  margin: 0 0 0 25px; 
}
.navbar-brand img{
  display: block;
  width: 100%
}

.navbar-option{
  position: absolute;
  top: 10px;
  right: 50px;
  width: 70px;
  text-align: center;
}
.navbar-option.t-30{top: 50px}

.navbar-option .lang{
  display: block;
  text-align: center;
  color: #fff;
  margin: 30px 0
}
.navbar-option .lang a{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 14px;
  font-family: 'Museo 300';
}
.navbar-option .lang a.active{
  font-family: 'Museo Sans 900';
}
.pc .navbar-option .lang a:hover{ color: #f3794d }

.navbar-option .followus{
  display: block;
  text-align: center;
  color: #fff;
  margin: 30px 0
}
.navbar-option .followus a{
  display: block;
  width: 30px;
  height: 30px;
  margin: 10px auto
}

.navbar-option .followus a{
  width: 100%;
  height: 100%;
}

.navbar-option .followus a svg path{
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

.pc .navbar-option .followus a:hover svg path{ fill: #f3794d }

.header.dark .navbar-option .followus a svg path{ fill: #000 }

.gnb-open .navbar-option .lang,
.gnb-open .navbar-option .followus{ display: none; }

.fp-viewing-7 .header,
.fp-viewing-8 .header,
.fp-viewing-9 .header{
  opacity: 0;
  pointer-events: none;
}
/**/
/**/

.div-table{
  display: table;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}  
.div-table-cell{
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
} 
.background{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}  

.section{
  display: block;
  position: relative;
}

.menu-shortcut{
  display: block;
  margin: 0 auto;
  width: 640px;

  position: fixed;
  top: 50%;
  left: 50%;

  margin: -320px 0 0 -322px;
  z-index: 9;

  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}

 
.menu-shortcut img{
  width: 100%;
}
.icons-shortcut ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.icons-shortcut ul li{
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;

  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); 

  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
.icons-shortcut ul li img{
  width: 65px;
  height: 65px;
}

.icons-shortcut ul li.c01{
  top: 247px;
  left: 465px;
}
.icons-shortcut ul li.c02{
  top: 247px;
  left: 111px;
}

.icons-shortcut ul li.c03{
  top: 327px;
  left: 465px
}
.icons-shortcut ul li.c04{
  top: 327px;
  left: 111px;
}
.icons-shortcut ul li.c05{
  top: 380px;
  left: -21px;
}
.icons-shortcut ul li.c06{
  top: 380px;
  left:593px;
}

.fp-viewing-1 .icons-shortcut ul li.c01,
.fp-viewing-2 .icons-shortcut ul li.c02,
.fp-viewing-3 .icons-shortcut ul li.c03,
.fp-viewing-4 .icons-shortcut ul li.c04,
.fp-viewing-5 .icons-shortcut ul li.c05,
.fp-viewing-6 .icons-shortcut ul li.c06{ 
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); 
}


.section-openning{
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-openning .bg-wrap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.section-openning .background{
   -webkit-animation-delay: 3s; 
    animation-delay: 3s;
    -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2); 

   -webkit-transition: all 5s ease-in-out;
     -moz-transition: all 5s ease-in-out;
       -o-transition: all 5s ease-in-out;
      -ms-transition: all 5s ease-in-out;
          transition: all 5s ease-in-out;
}
.shortcut-text {
  position: relative;
  display: inline-block;
  text-align: center;
  z-index: 9;

  width: 640px;
  height: 310px; 
  margin: 0 auto;

  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.shortcut-text .blue{ color: #62cff6 }
.shortcut-text .orange{ color: #f3794d }

.shortcut-text h2,
.shortcut-text h3,
.shortcut-text h4{
  color: #fff;
  font-style: normal;
  font-family: 'Museo Slab 500';
}

.shortcut-text h2{
  color: #fff;
  font-size: 38px; 
  line-height: 1.1
}
.shortcut-text h3{
  color: #fff;
  font-size: 24px;
  position: relative; 
   line-height: 1.2 
}
.section0 .shortcut-text{ padding-top: 18px }
.section0 .shortcut-text h3{ 
  font-size: 27px;  
  top: 49px
}

.section1 .shortcut-text h3,
.section2 .shortcut-text h3{  
  top: 41px
}

.section3 .shortcut-text,
.section4 .shortcut-text{ padding-top: 65px }

.section3 .shortcut-text h3,
.section4 .shortcut-text h3{top: 48px}

.section5 .shortcut-text{ padding-top: 28px }
.section5 .shortcut-text h3{top: 66px}

.section6 .shortcut-text{ padding-top: 28px }
.section6 .shortcut-text .logo{
  display: block;
  width: 230px;
  margin: 0 auto
}
.section6 .shortcut-text .logo img{
  width: 100%
}
.section6 .shortcut-text h3{top: 52px}

/*animate*/
.section0.fp-completely .background,
.section1.fp-completely .background,
.section2.fp-completely .background,
.section3.fp-completely .background,
.section4.fp-completely .background,
.section5.fp-completely .background,
.section6.fp-completely .background{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); 
}

.fp-viewing-7 .menu-shortcut{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.section-instagram{ 
  background-color: #fff;
  z-index: 1000;
}
.section-instagram .fp-tableCell{
  vertical-align: top;
}
.heading{
  display: block;
  text-align: center;
  position: relative;
  z-index: 9;
  padding: 100px 0 80px
}
.heading h2{
  font-family: 'Brandon Grotesque';
  font-weight: bold;
  font-size: 24px;
  color:#000;
}
.heading .icon{
  display: block;
  margin: 0 auto;
  width: 40px;
  height: 40px; 
  margin-top:20px; 
}
.heading .icon img{
  width: 100%
}

.instagram-feed-wrap{
  display: block;
  height: calc(100% - 265px);
  padding: 0 15px 15px; 
  margin-bottom: 80px;
  overflow: hidden;
  position: relative;
} 
.instagram_gallery.row { margin: -5px -5px 0;}
.instagram_gallery.row .col-sm-2{ padding: 5px;}
.instagram_gallery.row .col-sm-2 img{ width: 100%;}
.pc .instagram_gallery.row .col-sm-2:hover{ opacity: 0.65 }

.section-banner{
  display: block;
  height: 100vh;
  background-color: #000
}
.section-banner.h-auto{ height: auto; }
.section-banner.h-auto img{ width: 100% }

.section-aboutus,
.section-tgh-pattaya,
.section-tgh-silver,
.section-tgh-accom,
.section-location,
.section-menu{
  padding: 40px 0;
}
.article.vertical{
  position: absolute;
  top: -130px;
  left: 150px;
  width: 450px; 
  padding: 40px 50px;
  background-color: rgba(228,249,255,0.9);
  color: #4d4d4d;
  z-index: 1000;
  font-family: 'Museo 300';
  font-size: 19px;
  line-height: 1.5
}
.article.vertical h5{
  font-size:27px;
  font-family: 'Museo Slab 700'; 
   margin-bottom: 40px;
}
.article.vertical h5 .font-xs{
  font-family: 'Museo Slab 300';
  font-size: 21px;
  display: block;
  padding-top: 5px;
}
.article.vertical h2{
  font-family: 'Museo Slab 700';
  font-size: 48px;
  line-height: 1.1;
  text-transform: uppercase;
}
.article.vertical h2.reserve{ font-size: 3vw }
.article.vertical h3{
  font-size: 27px;
  font-family: 'Museo Slab 700';
  margin-bottom: 30px;
  line-height: 1.2
}
.article.vertical h4{
  font-size: 24px;
  font-family: 'Museo Slab 700';
}
.article.vertical p{ margin-bottom: 30px }
.article.vertical hr.line-xs{
  width: 50px;
  margin: 40px 0;
  border-top: 1px solid rgba(0,0,0,1);
}
.article.vertical .font24{font-family: 'Museo 300';font-size: 24px;}

.article.vertical .button{
  display: block;
  padding: 50px 0;
  text-align: center;
}
.article.vertical .button .btn{
  padding: 0 40px;
}
.article .blue{
  color: #61abff
}
.article .orange{
  color: #f3794d
}
.article .contactus{
  font-size: 24px;
  line-height: 1.3
}
.article .contactus h3{
  display: block;
  
}
.pc .article .contactus a:hover{
  color: #000
}
 
.article.vertical.pattaya{
  background-color: #e4f9ff;
  width: 345px;
  left: auto;
  right: 150px;
  top: -170px;
}
.article.vertical.accommodation{
  width: 504px;
  left: auto;
  right: 150px;
  top: -170px;
  background-color: rgba(234,234,234,0.9);
}

.article.vertical.accommodation .button{
  padding:35px 0 
}

.article.vertical.deluxe{
  width: 504px; 
  background-color: rgba(236,228,220,0.85);
}
.article.vertical.twobed{
  background-color: rgba(234,234,234,0.9);
  left: auto;
  right: 150px;
  top: -170px;
}

.article.vertical.location1,
.article.vertical.location2{
  position: relative;
  background-color: rgba(255,243,234,0.95);
  top: 0;
  left: auto;
  display: block;
  margin: -150px auto 0;
}

.article.vertical.location2{
  background-color: rgba(228,249,255,0.98);
  margin-top:50px 
}

.article.vertical.menu{
  background-color: rgba(228,249,255,0.98);
  margin-top:50px;
  width: 380px
}



.gallery-wrap{
  display: block;
  position: relative;
} 
.gallery-wrap .gallery-item{ 
  margin-bottom: 20px;
  display: block;
} 
.gallery-wrap img{ width: 100% }
.gallery-wrap .pr-7vw{ padding-right: 7vw }
.gallery-wrap.grid .row{ margin: 0 -10px; position: relative; }
.gallery-wrap.grid .row.pos-bottom{
  position: absolute;
  bottom: 0;
  right: 20px
}
.gallery-wrap.grid .row > div{ padding: 0 10px; }
.gallery-wrap.grid .row > div.pos-right{left: 33.333333%}
.gallery-wrap.grid .row > div.col-7.pos-right{left: 41.666667%}
.gallery-wrap.grid .row > div.absolute-col{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.gallery-wrap.grid .row > div.absolute-col.right{
  left: auto;
  right: 0
}
.gallery-wrap.grid .row > div.absolute-col .gallery-item{
  position: relative;
  display: block;
  height: calc(50% - 20px);
  overflow: hidden;  
}
.gallery-wrap.grid .row > div.absolute-col.h3p4 .gallery-item{
  height:calc(35% - 20px); 
}
.gallery-wrap.grid .row > div.absolute-col.h3p4 .gallery-item + .gallery-item{
  height:calc(65% - 20px); 
}
.gallery-wrap.grid .row > div.absolute-col a img{ width: 110% }
.gallery-wrap.grid .row > div.absolute-col{height: 100% }
.gallery-wrap.grid .mt-20{margin-top:20px }
.pc .gallery-wrap a:hover{ /*opacity: 0.75*/ }
.mw-80{ max-width: 80% }
.mw-70{ max-width: 70% }
.mw-60{ max-width: 60% }
.mw-50{ max-width: 50% }

.gallery-item.text .inner{
  display: inline-block;
}
.gallery-item.text .inner h3{
  font-family: 'Museo Slab 700';
  font-size: 50px;
  text-transform: uppercase;
}
.gallery-item.text .inner hr.line-xs{
  width: 50px;
  margin: 30px 0;
  border-top: 1px solid rgba(0,0,0,1);
}
.gallery-item.text .inner h4{
  font-family: 'Museo 300';
  font-size: 20px; /*24px;*/
  line-height: 1.3
}

.article.aboutus h2{
  font-family: 'Museo Slab 700';
  font-size: 50px;
  line-height: 1.1
}
.article.aboutus.silver{ 
  left: auto;
  right: 150px;
  background-color: rgba(255,243,234,0.85);
}

.zoning{
  display: block;
  text-align: center;
} 

/*.section0,
.section1,
.section2,
.section3,
.section4,
.section5,
.section6,
.section7{ display: none !important; }*/

.section-journey{
  position: relative;
  margin-bottom:60px;
  z-index: 1020
}
.section-journey .site-info{}
.section-journey .site-info .article{
  padding: 100px 7vw 90px;
}
.section-journey .logo { 
  width: 350px;
  display: inline-block;
  padding-top: 70px
}
.section-journey .logo img{ width: 100% }

.section-location {
  position: relative;
  z-index: 1010;
  margin-bottom:80px 
}
 
.section-location .photo1{ margin-top:-150px  }
.section-location .photo2{
  position: absolute;
  left: 15px;
  right: 0;
  bottom: 0
}
.section-location .photo1 .text,
.section-location .photo2 .text{
  position: absolute;
  bottom: 50px; 
  left: 50px;
  right: 50px;
  color: #fff;
  font-size:24px; 
  text-transform: uppercase;
  font-family: 'Museo 300';
  display: block;
}
.section-location .photo2 .text{
  text-align: right;
}

.section-location .qr-code,
.section-location .map{
  display: inline-block;
  vertical-align: top;
  width: 130px;
}
.section-location .map{ 
  vertical-align: bottom;
  margin:0 0 0 15px;
  position: relative;
  top: -5px
}
.section-location .qr-code img,
.section-location .map img{ width: 100% }

.section-menu .gallery-item{
  position: relative; 
}
.section-menu .gallery-item.has-menu{ margin-bottom:40px  }
.section-menu .gallery-item.has-menu.top{ margin-top:20px  }

.section-menu .food-menu{
  position: absolute;
  bottom:-40px;
  left: 20px;
  color: #000;
  font-size: 19px;
  font-weight: 500;
  z-index: 999;
  display: block;
  white-space: normal; /*nowrap;*/
  line-height: 40px;
}
.section-menu .food-menu.top{
  bottom: auto;
  top: -40px;
}
.section-menu .food-menu.right{
  left: auto;
  right: 20px;
}
.section-menu .food-menu.bottom0{ bottom:0 }
.section-menu .food-menu .arrowUp{
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 7px solid black;

  display: inline-block;
  vertical-align: middle;

  position: relative;
  top: -2px;
  margin: 0 10px 0 0;
}
.section-menu .food-menu .arrowDown{
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 7px solid black;

  display: inline-block;
  vertical-align: middle;

  position: relative;
  top: -2px;
  margin: 0 10px 0 0;
}
.section-menu .food-menu .arrowLeft{
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  
  border-right: 7px solid black;

  display: inline-block;
  vertical-align: middle;

  position: relative;
  top: -2px;
  margin: 0 10px 0 0;
}

.section-menu .food-menu .arrowRight{
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  
  border-left: 7px solid black;

  display: inline-block;
  vertical-align: middle;

  position: relative;
  top: -2px;
  margin: 0 10px 0 0;
}

.food-type{
  position: absolute;
  border:1px solid #000;
  padding: 0 10px; 
  z-index: 999;
  text-align: center;
  min-width: 320px;
  height: 200px;
}
.food-type h3{
  font-size: 50px;
  text-align: center;
  font-family: 'Museo Slab 700';
  
  line-height: 200px;
}
.food-type h3 span{
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.food-type.th-food{
  right: 150px;
  top: -5vw;
}
.food-type.seafood{
  right: 150px;
  bottom: 100px;
}
.food-type.inter{
  left: 150px;
  bottom: -70px;
}
.food-type.sweet{
  right: 12vw;
  top: 10vw;
}
.food-type.cooktail{
  left: 17vw;
  bottom: 15vw;
}

.food-type.thai{
  left: 50px;
  top: 30%;
}

.food-type.japan{
  right: 150px;
  bottom:-36px
}

.food-type.inter2{
  left: 150px;
  bottom: -90px;
}
.food-type.sweet2{
  right:10vw;
  top: 30%;
}
.food-type.cocktails2{
  left:13vw;
  top: -15vw;
}


.video-wrapper{
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: black;
  background-image: ;
  background-position: center center;
  background-size: contain;
  object-fit: cover;
} 

.section-site-info{ 
  background-color: #fff;
  z-index: 1040;
}
.section-site-info .fp-tableCell{
  vertical-align: top;
  text-align: center;
}
.site-links{
  position: absolute; 
  width: auto;
  top: 50px;
  left: 7vw;
  right: 7vw;
  
  z-index: 120;
}
.site-links .navbar-brand{
  margin: 0;
  list-style-type: none;
  max-width: 150px;
}
.site-links ul.nav{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.site-links ul.nav li{
  margin: 0;
  padding: 0; 
  display: inline-block;
}
.site-links ul.nav li a,
.site-links ul.nav li > span{
  color: #fff;
  font-size: 14px;
  font-family: 'Museo Sans 900';
  line-height: 1;
  display: block;
  cursor: pointer;
  padding: 8px 0
}
.pc .site-links ul.nav li a:hover{ color:#ffbd7b }

.site-links ul.nav li.dropdown .dropdown-menu{
  display: block;
  opacity: 0;
  top: 120%;
  margin: 0;
  left: 50%;
  right: auto;
  width: 120px;
  margin-left:-82px; 
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.75);
  background-color:rgba(255,255,255,0.2);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.site-links ul.nav li.dropdown .dropdown-menu a{
  display: block;
  padding: 5px 20px;
  text-align: center;
}
.pc .site-links ul.nav li.dropdown .dropdown-menu a:hover{ color: #000 }
.site-links ul.nav li.dropdown:hover .dropdown-menu{
  top: 100%;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.header .site-links{ 
  left: auto;
  right: 30px;
  top: auto;
  margin-top:20px;
  margin-bottom:30px ;
  width: 850px;
}
.header .site-links ul.nav { margin-right:-50px  }
.header .site-links ul.nav li a,
.header .site-links ul.nav li > span{
  padding: 0 50px;
  text-align: left;
  position: relative;
}

.header .site-links ul.nav li > a:before,
.header .site-links ul.nav li > span:before{
  content: '';
  position: absolute;
  left: 50px;
  right: 50px;
  bottom: -13px;
  border-bottom:1px solid #fff;
  display: block; 
  opacity: 0
}
.header .site-links ul.nav li.active > a:before,
.header .site-links ul.nav li.active > span:before{
  opacity: 1
}
.pc .header .site-links ul.nav li:hover > a{ color: #fff }

.pc .header .site-links ul.nav li:hover a:before,
.pc .header .site-links ul.nav li:hover span:before{ opacity: 1}

.pc .header .site-links ul.nav li.dropdown:hover a:before,
.pc .header .site-links ul.nav li.dropdown:hover span:before{ opacity: 0}

.header.dark .site-links ul.nav li a,
.header.dark .site-links ul.nav li > span{ color: #000 }

.header.dark .site-links ul.nav li > a:before,
.header.dark .site-links ul.nav li > span:before{border-bottom:1px solid #000;}

.site-info .article{
  position: relative;
  z-index: 100;
  display: inline-block;
  color: #fff;
  padding:200px 7vw 70px;
  font-size: 21px;
  text-align: left;
}
.site-info .article h2{
  color: inherit;
  font-size: inherit;
  text-transform: uppercase;
  font-family: 'Museo Slab 500';
  font-weight: normal;
  margin-bottom: 5px;
}
.site-info .article h2.strong{
  font-family: 'Museo Slab 700';
}
.site-info .article h2.orange{ color:#ffbd7b }
.site-info .article h2.blue{ color:#62cff6 }

.site-info .article p{ margin-bottom: 25px; }
.site-info .article p:last-child{ margin-bottom: 0; }
.site-info .article a{ color: inherit; }
.pc .site-info.left .article a:hover{ color: #ffbd7b }
.pc .site-info.right .article a:hover{ color: #62cff6 }

.site-info.right .article .inner{ float: right; }

.section-copyright{
  background-color: #fff;
  padding: 40px 0 35px;
  z-index: 1000;
  text-align: center;
  font-family: 'Museo Sans 900';
  font-style: normal;
  font-size: 14px;
  color: #333333
}
 
 
@media (min-width: 1119px) and (max-width: 1440px) {}    

@media (max-width: 1380px) {
  .article.vertical{
    left: 100px;
    padding: 30px 40px;
    width: 400px;
  }
  .article.aboutus h2{
    font-size: 42px;
  }
  .article.vertical h5{
    font-size: 24px;
  }
  .article.vertical .button{
    padding: 50px 0
  }

  .gallery-wrap.grid img{ max-width: 100% } 

  .article.vertical.menu{
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    width: auto;
    margin-left: 15px;
    margin-right:15px; 
    margin-bottom: 20px;
    line-height: 1.8;
    padding: 50px 
  }
  .article.vertical.menu{ margin-top: 0 }
}

@media (max-width: 1200px) {
  .btn-icon.d-block{ display: inline-block !important; }
  .navbar-option.t-30{ top: 10px }
  .gallery-item.text .inner h3{font-size: 35px}
  .gallery-item.text .inner h4{font-size: 20px}

  .food-type{
    width: 250px;
    height: 180px;
  }
  .food-type h3{
    line-height: 180px;
    font-size: 40px
  }
  .food-type.th-food,
  .food-type.seafood{
    right: 7vw
  } 
}

@media (max-width: 1024px) {
  .header{ padding-top: 50px; }

  .navbar-brand{ width: 145px; }
  .menu-shortcut{
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
  }
  .shortcut-text{
    width: 500px;
    height: 250px;
  }
  .shortcut-text h2{ 
    font-size: 29px;
    line-height: 1.2;
  }
  .shortcut-text h3{font-size: 22px;}
 
  .section0 .shortcut-text h3{font-size: 20px; top: 33px;}
  .section1 .shortcut-text h3,
  .section2 .shortcut-text h3{ top: 26px; }

  .section3 .shortcut-text h3, 
  .section4 .shortcut-text h3{top: 28px;}

  .section5 .shortcut-text h3{ top: 47px; }

  .section6 .shortcut-text .logo{ width: 185px; }
  .section6 .shortcut-text h3{top: 39px;}

  .icons-shortcut ul li img{
    width: 50px;
    height: 50px;
  }

  .icons-shortcut ul li.c01{
    top: 192px;
    left: 364px;
  }
  .icons-shortcut ul li.c02{
    top: 192px;
    left: 88px;
  }

  .icons-shortcut ul li.c03{
    top: 255px;
    left: 364px
  }
  .icons-shortcut ul li.c04{
    top: 255px;
    left: 88px;
  }
  .icons-shortcut ul li.c05{
    top: 297px;
    left: -15px;
  }
  .icons-shortcut ul li.c06{
    top: 297px;
    left:465px;
  }

  .site-info .article{ 
    font-size: 19px;
    padding: 200px 40px 40px;
  }
  .instagram-feed-wrap{ margin-bottom: 50px }

  .gallery-wrap.grid .row > div.absolute-col.h3p4 .gallery-item{ height: calc(40% - 4px); }
  .gallery-wrap.grid .row > div.absolute-col.h3p4 .gallery-item + .gallery-item {height: calc(60% - 4px);}
}

@media (max-width: 991.98px) { 
  .container {
    padding-left: 30px;
    padding-right: 30px;
  } 

  .heading{ padding: 80px 0 65px }
  .site-info .article{
    width: 100%;
    max-width: 400px;
  }
  .site-links{ display:none; }
  .site-info .article{
    padding: 70px 20px 70px;
  }

  .article.vertical,
  .article.vertical.pattayaเธก
  .article.vertical.accommodation{
    position: relative;
    top: auto!important;
    left: auto !important;
    right: auto !important;
    width: auto!important;
    margin-left: 15px;
    margin-right:15px; 
    margin-bottom: 20px;
    line-height: 1.8;
    padding: 50px 
  }
  .article.vertical.menu{ margin-top: 0 } 
  .article.vertical h5{ font-size: 20px }
  .article.aboutus h2{ font-size: 32px }
  .article.vertical h5 .font-xs{font-size: 18px;padding-top:10px; }

  .article.vertical.location{
    width: 90%;
    padding:50px 30px;
  }

  .article.vertical.location h2{ font-size: 3.5vw }
  .article.vertical.location h3{ font-size:2.5vw}
  .article.vertical.location .font24{
    font-size: 2vw;
    line-height: 1.5
  }

  .section-location .qr-code, 
  .section-location .map{
    width: 80px
  }

  .gallery-item.text .inner h3{font-size: 4vw}
  .gallery-item.text .inner h4{font-size: 2vw}

  .section-menu .gallery-wrap.grid img{ max-width: 100% }
  .section-menu .food-menu{
    top: 0 !important;
    left: 15px !important;
    right: auto;
  }
  .section-menu .gallery-item.has-menu{ padding-top: 40px; margin-bottom:20px  }

  .food-type{
    position: relative;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 80%;
    display: block;
    margin: 30px auto ;
    height: auto;
    padding: 20px;
  }
  .food-type h3{
    height: auto;
    line-height: normal;
    font-size: 30px
  }
  .food-type h3 br{ display: none; }

  .section-menu .food-menu .arrowUp,
  .section-menu .food-menu .arrowLeft {
    border:0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid black; 
  }

  .section-site-info .site-info{ text-align: center; }
  .section-journey .logo{ width: 250px }
  .section-journey .site-info .article{
    display: block;
    text-align: center;
    max-width: 100%;
    width: 100%;
    padding: 50px 7vw 80px;
  }
}
 
    
@media (max-width:767px) {
   
  .container,
  .container-fluid {
    padding-left: 25px;
    padding-right: 25px;
  }  

  .gnb-box.gnb1{border: 10px solid #ffffff;}
  #fp-nav.fp-right{ right: 15px; }  
  .menu-shortcut{
    width: 100%;
    height:auto;
    max-width: 80%; 
    margin: 0; 

    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    -webkit-backface-visibility: hidden;
    -webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.0, 1.0);
  }
  .shortcut-text{
    max-width: 80%;
    height: 250px;
  }
  .shortcut-text h2{ 
    font-size: 4.8vw;
    line-height: 1.2;
  }
  .shortcut-text h3{font-size: 3.5vw;}
 
  .section0 .shortcut-text{ padding-top: 15px; }
  .section0 .shortcut-text h3{font-size: 3.5vw; top: 4vw;}
  .section1 .shortcut-text h3,
  .section2 .shortcut-text h3{ top: 3.5vw; }

  .section3 .shortcut-text h3, 
  .section4 .shortcut-text h3{top: 4.8vw;}

  .section3 .shortcut-text, 
  .section4 .shortcut-text{ padding-top: 9vw }

  .section5 .shortcut-text{padding-top: 4vw}
  .section5 .shortcut-text h3{ top: 7.5vw; }

  .section6 .shortcut-text{ padding-top:4vw  }
  .section6 .shortcut-text .logo{ width: 130px; }
  .section6 .shortcut-text h3{top: 5.5vw;}

  .icons-shortcut ul li img{
    width: 8vw;
    height:8vw;
  }

  .icons-shortcut ul li.c01{
    top: 29.5vw;
    left: 56vw;
  }
  .icons-shortcut ul li.c02{
    top: 29.5vw;
    left:13.5vw;
  }

  .icons-shortcut ul li.c03{
    top: 39.5vw;
    left: 56vw;
  }
  .icons-shortcut ul li.c04{
    top: 39.5vw;
    left:13.5vw;
  }
  .icons-shortcut ul li.c05{
    top: 46vw;;
    left: -2.7vw;
  }
  .icons-shortcut ul li.c06{
    top: 46vw;
    left:72vw;
  }

  .article.vertical{ 
    padding:30px;
    font-size: 17px;
    margin: 0 10px 20px
  }
  .article.aboutus h2{font-size: 24px}
  .article.vertical p{ margin-bottom: 20px }
  .article.vertical .font24{ font-size: 20px }



  .gallery-wrap.grid .row{ margin: 0 -2px }
  .gallery-wrap.grid .row > div{ padding: 0 2px }
  .gallery-wrap .gallery-item{margin-bottom: 4px; }

  .gallery-wrap.grid .row > div.absolute-col .gallery-item{height: calc(50% - 4px);}

  .gallery-item.text .inner hr.line-xs{ margin: 4vw 0; width: 4vw }

  .section-location .photo2{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top:-150px; 
  }

  .section-location .photo1 .text, 
  .section-location .photo2 .text{
    bottom: 30px;
    left: 20px;
    right: 20px;
    font-size: 16px;
  }

  .article.vertical.location{
    padding:30px 20px;
    
  }
  .article.vertical.location1{margin-top: 0 !important}

  .article.vertical.location h2{ font-size:8.5vw}
  .article.vertical.location h3{ font-size:5vw}
  .article.vertical.location .font24{
    font-size: 5vw;
    line-height: 1.5
  }

  .article.vertical.location hr.line-xs{ margin: 30px 0 }
  .section-menu .gallery-item{ margin-bottom:10px  }
  .section-menu .gallery-wrap.grid .row { margin: 0 -5px }
  .section-menu .gallery-wrap.grid .row > div{ padding: 0 5px }

  .gallery-wrap.grid .row.pos-bottom{
    position: relative;
    right: auto;
    bottom: auto;
  }

  .article .contactus{
    font-size: 20px
  }

}
 
@media (max-width:576px) {
  .header{ padding-top: 30px; }
  .header .navbar-brand{
    margin: 0 0 0 5px;
    width: 90px;
  }

  .btn-icon{
    width: 35px;
    height: 35px;
  }

  .navbar-option{ right: 5px; }
  .navbar-option .followus{ display: none; }
   
  .heading{padding:45px 0 40px;}
  .heading h2{ font-size: 18px; }
  .heading .icon{
    width: 30px; 
    height: 30px;
    margin-top:15px 
  }
  .instagram_gallery.row .col-sm-2{ width: 25% }
  .site-info .article{
    font-size: 16px;
    text-align: center;
  }

  .section-copyright{ padding: 30px 0 25px; }
  .article.vertical .button .btn{ padding: 0 20px }

  .article.vertical h2{ font-size: 40px }
  .article.vertical.menu{ padding: 30px }
  .food-type h3{font-size: 23px}

  .article .contactus{
    font-size: 18px
  }
  .section-journey .logo{ width: 180px }
}
@media (max-width:369px) {}