.bg1 { background: url("/images/slider/slide_1.jpg"); }
.bg2 { background: url("/images/slider/slide_2.jpg"); }
.main-section-01 { display: flex; flex-direction: column; margin-top: 50rem; margin-bottom: 100rem; }
.main-section-02 { display: flex; flex-direction: column; margin-top: 50rem; padding-block: 100rem; /*margin-bottom: 100rem;*/ margin-bottom: 1rem; background: var(--grey1); }
.main-section-03 { display: flex; flex-direction: column; padding-bottom: 100rem; }
.main-subtitle { font-size: var(--fs20); font-weight: 300; color: var(--primary); text-align: center; font-family: var(--font2); }
.main-title { font-size: var(--fs36); font-weight: 700; text-align: center; }
.main-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); -moz-column-gap: 30rem; column-gap: 30rem; row-gap: 50rem; margin-top: 65rem; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .main-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20rem; }
 }
@media screen and (min-width: 481px) and (max-width: 600px) {
 .main-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20rem; }
 }
@media screen and (min-width: 601px) and (max-width: 1024px) {
 .main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30rem; }
 }
.main-grid .tourcard { display: flex; flex-direction: column; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.4s; }
.main-grid .tourcard:hover { box-shadow: 0px 0px 0px 3px rgb(28, 58, 111); }
.main-grid .tourcard:hover .tourcard-img img { scale: 1.02; transition: all 0.4s; }
.main-grid .tourcard:hover .tourcard-title > h1 { color: var(--primary); }
.main-grid .tourcard-img { overflow: hidden; height: 280rem; }
.main-grid .tourcard-img img { -o-object-fit: cover; object-fit: cover; width: 100%; scale: 1; transition: all 0.4s; }
.main-grid .tourcard-title { padding: 30rem 40rem; }
.main-grid .tourcard-title > h1 { font-size: var(--fs22); font-weight: 700; margin-bottom: 10rem; }
.main-grid .tourcard-title > p { font-size: var(--fs16); color: var(--grey6); margin-bottom: 20rem; height: 5ch; overflow: hidden; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.main-grid .tourcard-title > span { font-size: var(--fs22); font-weight: 700;display: block;text-align: right; }
.main-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); -moz-column-gap: 30rem; column-gap: 30rem; row-gap: 50rem; margin-top: 65rem; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .main-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20rem; }
 }
@media screen and (min-width: 481px) and (max-width: 600px) {
 .main-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20rem; }
 }
@media screen and (min-width: 601px) and (max-width: 1024px) {
 .main-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30rem; }
 }
.main-gallery .gallerycard { display: flex; flex-direction: column; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); background: var(--white); cursor: pointer; transition: all 0.4s; }
.main-gallery .gallerycard:hover { box-shadow: 0px 0px 0px 3px rgb(28, 58, 111); }
.main-gallery .gallerycard:hover .main-section-gallerycard-img img { scale: 1.02; transition: all 0.4s; }
.main-gallery .gallerycard:hover .main-section-gallerycard-title > h1 { color: var(--primary); }
.main-gallery .gallerycard-img { overflow: hidden; height: 210rem; }
.main-gallery .gallerycard-img img { -o-object-fit: cover; object-fit: cover; width: 100%; scale: 1; transition: all 0.4s; }
.main-gallery .gallerycard-title { padding: 30rem 40rem; }
.main-gallery .gallerycard-title > h1 { font-size: var(--fs20); font-weight: 700; margin-bottom: 10rem; }
.main-gallery .gallerycard-title > span { font-size: var(--fs16); color: var(--grey5); }
.main .cta { display: flex; justify-content: flex-end; align-items: center; height: 200rem; background: #be824e; padding-inline: 100rem; 
  /* background-image: url("/images/main/cta_bg1.png");  */
  background-repeat: no-repeat; 
  /* background-size: auto 250%;  */
  background-position: center left; }
@media screen and (min-width: 320px) and (max-width: 480px) {
 .main .cta { padding-inline: 30rem; }
 }
@media screen and (min-width: 481px) and (max-width: 600px) {
 .main .cta { padding-inline: 30rem; }
 }
@media screen and (min-width: 601px) and (max-width: 768px) {
 .main .cta { padding-inline: 30rem; }
 }
@media screen and (min-width: 769px) and (max-width: 1024px) {
 .main .cta { padding-inline: 30rem; }
 }
.main .cta .cta-text { text-align: right; }
.main .cta .cta-text h1 { color: var(--white); font-size: var(--fs30); font-weight: 300; text-shadow: var(--text-shadow); }
.main .cta .cta-text p { color: var(--white); font-size: var(--fs16); text-shadow: var(--text-shadow); }
.main .btn-more { display: flex; align-items: center; gap: 10rem; background: var(--white); border: 1px solid var(--primary); color: var(--primary); padding: 10rem 20rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; transition: all 0.4s; }
.main .btn-more:hover { background: var(--primary); border: 1px solid var(--primary); color: var(--white); }