/* body, html{background:#000 url(../images/bg_royal-galaxy-cruise.jpg) no-repeat center top; background-attachment: fixed;  position:relative;} */
.background{
  width:100vw; 
  height:100vh;
  top:0;
  left:0;
  position:fixed;
  background-image:url("../images/bg_royal-galaxy-cruise.jpg");
  background-size: cover; 
  background-position: center;
}
.background .water{
  width:100%; 
  height:100%;
  top:0;
  left:0;
  position:fixed;
  background-image:url("../images/cover-water.png");
  background-size: cover;
  background-position: center;
  filter:url("#turbulence");
}
main{z-index:30;}
#cover-banner{width:100%; display:block; text-align:center; position:relative; background:#000;}
#h-banner{width:100%; display:inline-block; position:relative; background:#000;}
/* #h-banner span{width:auto; text-align:center; display:block; position:absolute; z-index:993; left:50%; top:50%; transform: translate(-50%, -50%);}
#h-banner span h1, #h-banner span h2{margin:0; text-transform:uppercase; display:block; text-shadow: 3px 3px 2px rgba(0,0,0,0.7); opacity:0;
}
#h-banner span h1.name{font-size:4em; font-weight:500; margin-top:40px; color:#EF3937;
transition: all 0.5s ease 0.4s;
-ms-transition: all 0.5s ease 0.4s;
-webkit-transition: all 0.5s ease 0.4s;
}
#h-banner span h1 i{font-size:.8em;}
#h-banner span h2.topic{line-height:1.2; font-size:2.8em; font-weight:400; color:#FFF; 
transition: all 1s ease 1s;
-ms-transition: all 1s ease 1s;
-webkit-transition: all 1s ease 1s;
}*/
#h-banner .swiper-container img{width:100%; display:block; float:left; }
#h-banner em{width:100%; height:150px; display:block; position:absolute; top:0; left:0; z-index:800; background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
#h-banner .swiper-pagination-banner{width:auto; display:block; position:absolute; z-index:90; bottom:25px; left:50%; transform: translateX(-50%);}
#h-banner .swiper-pagination-bullet{width:18px; height:18px; cursor: pointer; margin: 0 5px; text-align: center; display: inline-block;
  border:2px solid #FFF;
  transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; opacity:.7;}
#our-package .swiper-pagination-clickable .swiper-pagination-bullet-active{background:#025ABE !important; 
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;}
#m-grid.head-home{position:absolute !important; top:0; z-index:999;}
#welcome{width:100%; padding:25px 25px 45px 25px; margin:-70px 0 25px 0; text-align:center; border-radius:20px; color:#000; display:block; float:left;  position:relative; z-index:10; overflow:hidden; border:1px solid #CCC; background:#FFF;}
/* #welcome::after{content:""; width:100%; height:100%; display:block; background:rgba(0,0,0,0.75); top:0; left:0; position:absolute; z-index:10;} */
#welcome .logo{width:100%; margin-bottom:25px; text-align:center; display:block;}
#welcome .logo img{display:inline-block;}
#welcome h3{margin:0 0 25px 0; padding:0; color:#EF3937; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif;}
#welcome .content{width:100%; margin:0; padding:0 7%; display:block;}
#welcome h4{width:100%; margin:0; padding:0 0 50px 0; text-align:center; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif; display:block; float:left; color:#6668AA; position:relative;}
#welcome h4::after{content:""; width:60px; height:3px; background:#EF3937; display:block; position:absolute; bottom:23px; left:50%; transform: translateX(-50%);}
#welcome h5{width:100%; margin:0 0 25px 0; padding:0; text-align:center; text-transform:uppercase; font-weight:400 !important; font-family:'Kanit', sans-serif; display:block; float:left;}
#welcome h5 b{font-weight:500;}


.book{width:auto; padding:10px 25px 10px 50px; line-height:1.3; border-radius:10px; font-size:1.4em; color:#FFF; font-weight:500; font-family:'Kanit', sans-serif;  text-transform:uppercase; background:#EF3937; position:relative; display:inline-block;}
.book i{line-height:1.3; font-size:1em; color:#FFF; font-style:normal; position:absolute; left:25px; top:10px; transform: scale(1); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
.book:hover i{transform: scale(1.2); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

#our-package{width:100%; margin:40px 0 60px 0; display:block; float:left; position:relative;}
#our-package h3{margin:0 0 25px 0; padding:0; color:#6668AA; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif;}
#our-package h3 a{color:#6668AA;}
#our-package h3 i{padding-right:10px; line-height:44px; font-size:25px; color:#EF3937;}
#our-package .swiper-wrapper{height:auto;}
#our-package .swiper-container{width:100%; display:block; float:left;}
#our-package .swiper-container img{width:100%; display:block;}
#our-package .content{width:100%; padding:0; display:block; list-style:none; float:left; font-family:'Kanit', sans-serif; transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;}
#our-package .content span{width:100%; border-radius:15px;
border:2px solid #6668AA; overflow:hidden; display:block;
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);
}
#our-package .content span a{width:100%; text-align: center; display:block; text-decoration:none;}
#our-package .content span .pic{background:rgba(0,0,0,1); position:relative;}
#our-package .pic .price{width:auto; padding:0 5px; background:#025ABE; display:block; position:absolute; left:0; bottom:20px; z-index:30;overflow:hidden; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#our-package .pic .price .num{width:auto; margin:0; padding:6px 10px 6px 40px; line-height:1.2; font-size:120%; font-weight:400; color:#FFF; display:block; position:relative; font-family:'Kanit', sans-serif; background:#025ABE;}
#our-package .pic .price .num i{width:auto; display: block; position:absolute; left:15px; top:9px;}
#our-package .content span a img{width:100%; opacity:.7; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#our-package .content:hover span a img{scale:1.03; opacity:1; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#our-package .content span a p{width:100%; height:48px; line-height:20px; font-size:1em; margin:0; padding:4px 3px; color:#000; display: flex;   font-weight:400; justify-content: center; align-items: center; background:#FFF;
}
#our-package .swiper-pagination-package{width:auto; display:none; position:absolute; z-index:50; bottom:-30px; left:50%; transform: translateX(-50%);}
#our-package .swiper-pagination-clickable .swiper-pagination-bullet{width:18px; height:18px; cursor: pointer; margin: 0 5px; text-align: center; display: inline-block;}
#our-package .swiper-pagination-clickable .swiper-pagination-bullet-active{background:#025ABE; transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;}
#our-package .package-next{right:-50px; top:calc(50% + 22px);}
#our-package .package-prev{left:-50px; top:calc(50% + 22px);}
#our-package .package-next, #our-package .package-prev{background-image:none !important;}
#our-package .package-next i, #our-package .package-prev i{width:27px; height:44px; font-size:50px; color:#EF3937; display:block;}

/* #channel{width:100%; display:block; float:left;}
#channel h3{margin:0 0 25px 0; line-height:44px; padding:0; color:#6668AA; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif;}
#channel h3 i{padding-right:10px; line-height:40px; font-size:27px; color:#EF3937; position: relative;}
#channel .container{width:100%; display:block;}
#channel .container iframe{width:100%; height:550px;}
#channel .row{margin:0 -10px;}
#channel .content{width:33.33%; padding:0 10px; display:block; float:left;}
#channel .content blockquote{max-width:100%;}
#channel .container .swiper-pagination-review{display:none;} */
/* #review .tiktok-embed a, #review .tiktok-embed a:link, #review .tiktok-embed > section > p{display:none !important;} */

#blog{width:100%; margin:45px 0 0 0; padding:0; border-radius:10px; overflow:hidden; text-align:center; display:block; position:relative;}
#blog h3{margin:0 0 25px 0; line-height:44px; padding:0; color:#6668AA; text-transform:uppercase; font-weight:500 !important; font-family:'Kanit', sans-serif;}
#blog h3 a{color:#6668AA;}
#blog h3 i{padding-right:10px; line-height:40px; font-size:27px; color:#EF3937; position: relative;}
#blog ul{width:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
#blog ul li{height:100%; border:1px solid #CCC; display:grid; border-radius:10px; overflow:hidden; grid-template-rows: auto 1fr auto;}
#blog ul .pic{overflow:hidden; position:relative; display:flex; -moz-box-pack:center; justify-content:center; -moz-box-align:center; align-items:center; height:100%;}
#blog ul .pic img{width:100%; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#blog ul .content{padding:8px 16px 16px 16px; text-align:left; background:#FFF; font-family:'Kanit', sans-serif; align-self: start;}
#blog ul .more{width:calc(100% - 30px); height:44px; line-height:44px; padding:0; margin:0 15px 15px 15px; color:#FFF; font-size:1.1em; text-align:center; font-style:normal; border-radius:10px; font-family:'Kanit', sans-serif; background:#6668AA; align-self:end}
#blog ul h5{margin:0 0 10px 0; color:#6668AA; line-height:1.3; text-align:left; font-weight:500;}
#blog ul p{width:100%; margin:0 0 10px 0; padding:0; line-height:1.2; font-size:1.1em; text-align:left; font-weight:300;
display:-webkit-box;
line-clamp: 4;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow: hidden;
text-overflow: ellipsis;
}
#blog ul li:hover .pic img{scale:1.07; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#blog ul li:hover h5{color:#EF3937;}

.tiktok-embed{border-radius:20px;}
/* .card-header{display:none !important;} */

footer{margin:50px 0 20px 0;}

header{margin-bottom:140px;}
nav.menu{top:86px;}

@media (min-width: 1921px) {
  #h-banner{width:1920px;}
}

@media (max-width: 1300px) {
  #m-grid.head-home{padding:0 25px;}
  nav.menu{width:100%; margin:0;}
  #h-banner .package-next, #h-banner .package-prev{display:none;}
  #our-package{margin-bottom:90px;}
  #our-package .swiper-pagination-package{display:block;}
  #our-package .package-next{right:5px;}
  #our-package .package-prev{left:5px;}
  #our-package .package-next, #our-package .package-prev{display:none;}
}
@media (max-width: 1280px) {
  main{position:relative; z-index:20;}
  #m-grid.home{position:absolute; left:calc(50% - 650px); top:0; z-index:999;}
}
@media (max-width: 1024px) {
/* #h-banner span h1.name{font-size:3em;}
#h-banner span h1 i{font-size:.7em;}
#h-banner span h2.topic{font-size:1.8em;} */
}

@media (max-width: 840px) {
  header{margin-bottom:60px;}
  nav.menu{top:86px;}
}
@media (max-width: 780px) {
  /* #h-banner span{top:65%;}
  #h-banner span h1.name{font-size:2.5em;}
  #h-banner span h1 i{font-size:.6em;}
  #h-banner span h2.topic{font-size:1.5em;} */
  #welcome{margin-top:30px;}
  /* #welcome h6{padding:0 2%;} */
  #welcome .content{padding:0 2%;}
  #welcome h6{width:100%; text-align:center;}
  #welcome .license{width:50%; margin:35px 25% 0 25%;}

  #our-package h3, #review h3{margin-bottom:5px;}
  #our-package .content span a p{height:46px; line-height:18px; padding:5px 3px; font-size:1em; font-weight:400;}

  #blog ul{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 600px) {
  header{margin-bottom:60px;}
  nav.menu{top:96px;}
}
@media (max-width: 480px) {
  header{margin-bottom:35px;}
  nav.menu{top:71px;}
  #welcome{margin-top:40px;}
  #welcome .logo img{max-width:100%;}
  #m-grid.head-home{padding: 0 15px;}
  /* #h-banner span{display:none;} */
  #h-banner .swiper-pagination-banner{display:none;}
  #our-package{margin:14px 0 75px 0;}
  #our-package .content span a p{font-size:.9em;}
  #blog ul{grid-template-columns: repeat(1, 1fr);}
  footer{margin:35px 0 20px 0;}
  footer .icon{width:42px; margin: 0 3px;}
}
@media (max-width: 414px) {
  header{margin-bottom:60px;}
  nav.menu{top:66px;}
  #welcome{margin-top:30px;}
}