@charset "UTF-8";
@import url(../font/stylesheet.css);
@import url(reset.css);
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500&display=swap");
html {
  scroll-behavior: smooth;
  font-family: 'Kanit', sans-serif; }

.font-optima {
  font-family: 'Optima'; }

.container {
  max-width: 70vw;
  margin: 0 auto; }
  @media (max-width: 1281px) {
    .container {
      max-width: 90vw; } }

sup {
  font-size: 58%;
  line-height: 0;
  vertical-align: super; }

.d-md-none {
  display: block; }
  @media (max-width: 767px) {
    .d-md-none {
      display: none; } }

.d-md-block {
  display: none; }
  @media (max-width: 767px) {
    .d-md-block {
      display: block; } }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5; }

/* header */
.main-nav {
  background: transparent linear-gradient(89deg, #D3B4D5 0%, #D6ECF9 100%) 0% 0% no-repeat;
  text-align: center;
  padding: 30px 0 35px; }
  @media (max-width: 767px) {
    .main-nav {
      padding: 15px 0; } }
  .main-nav img {
    max-width: 229px; }
    @media (max-width: 767px) {
      .main-nav img {
        max-width: 150px; } }

.banner {
  background: url("../img/banner.jpg") no-repeat 75% center;
  background-size: cover;
  position: relative; }
  @media (min-width: 1499px) {
    .banner {
      background-position: right; } }
  @media (max-width: 1281px) {
    .banner {
      background-position: 62% center; } }
  @media (max-width: 767px) {
    .banner {
      background: url("../img/mobile_bg.png") no-repeat center center;
      background-size: cover; } }
  .banner h1 {
    font-size: 40px;
    background: transparent linear-gradient(94deg, #C5A0C0 0%, #969CC1 42%, #6697C1 99%, #6697C1 100%) 0% 0% no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3; }
    @media (max-width: 767px) {
      .banner h1 {
        font-size: 25px; } }
  @media (max-width: 767px) {
    .banner img {
      width: 90%;
      margin: 20px auto;
      display: block; } }
  .banner h2 {
    font-size: 22px;
    margin-top: 25px; }
    @media (max-width: 767px) {
      .banner h2 {
        text-align: left;
        margin-bottom: 15px; } }
  .banner h3 {
    font-size: 90px; }
    @media (max-width: 991px) {
      .banner h3 {
        font-size: 79px; } }
    @media (max-width: 767px) {
      .banner h3 {
        font-size: 70px;
        text-align: left;
        line-height: 1; } }
  .banner .text-wrapper {
    display: flex;
    padding-top: 150px;
    padding-bottom: 238px;
    justify-content: end;
    justify-content: flex-end; }
    @media (max-width: 767px) {
      .banner .text-wrapper {
        display: block;
        padding-top: 50px;
        padding-bottom: 50px; } }
    .banner .text-wrapper .text {
      width: 50%; }
      @media (min-width: 1499px) {
        .banner .text-wrapper .text {
          width: 40%; } }
      @media (max-width: 767px) {
        .banner .text-wrapper .text {
          width: 100%;
          text-align: center; } }
  .banner .warn {
    position: absolute;
    right: 5%;
    bottom: 5%;
    font-weight: 100;
    font-size: 18px; }
    @media (max-width: 767px) {
      .banner .warn {
        font-size: 12px;
        left: 5%; } }

.s1 {
  padding-top: 130px;
  padding-bottom: 100px; }
  @media (max-width: 767px) {
    .s1 {
      padding-top: 30px;
      padding-bottom: 30px; } }
  .s1 .text-wrapper {
    display: flex;
    align-items: center; }
    @media (max-width: 767px) {
      .s1 .text-wrapper {
        display: block; } }
    .s1 .text-wrapper > * {
      flex: 1; }
    .s1 .text-wrapper .btns {
      display: flex;
      justify-content: center;
      margin: 10px 0; }
      .s1 .text-wrapper .btns .btn {
        border: 1.5px solid #A09681;
        border-radius: 4px;
        color: #6F5F52;
        font-size: 22px;
        padding: 5px 10px;
        font-weight: 600;
        margin: 0 5px; }
        @media (max-width: 767px) {
          .s1 .text-wrapper .btns .btn {
            font-size: 13px; } }
        .s1 .text-wrapper .btns .btn + .btn {
          font-weight: 400; }
    .s1 .text-wrapper .left {
      text-align: center;
      margin-right: 75px; }
      @media (max-width: 767px) {
        .s1 .text-wrapper .left {
          margin: 0; } }
      .s1 .text-wrapper .left h2 {
        font-size: 40px;
        background: transparent linear-gradient(94deg, #D8AC58 0%, #E0C475 49%, #C9A75F 70%, #B18A49 99%, #B18A49 100%) 0% 0% no-repeat padding-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
        @media (max-width: 991px) {
          .s1 .text-wrapper .left h2 {
            font-size: 34px; } }
        @media (max-width: 767px) {
          .s1 .text-wrapper .left h2 {
            font-size: 30px; } }
      .s1 .text-wrapper .left .tagline {
        background: transparent linear-gradient(89deg, #CCA35B 0%, #CCA35B 1%, #E1C575 52%, #AB894E 100%) 0% 0% no-repeat padding-box;
        font-size: 30px;
        color: #fff;
        padding: 5px 20px;
        margin: 5px 0 10px; }
        @media (max-width: 767px) {
          .s1 .text-wrapper .left .tagline {
            font-size: 25px; } }
      .s1 .text-wrapper .left p {
        color: #6F5F52;
        font-size: 17px; }
        @media (max-width: 767px) {
          .s1 .text-wrapper .left p {
            font-size: 13px; } }
        .s1 .text-wrapper .left p small {
          font-size: 12px; }
    @media (max-width: 767px) {
      .s1 .text-wrapper .right {
        margin-top: 35px; } }
    .s1 .text-wrapper .right img {
      max-width: 100%; }
  .s1 .text-bottom {
    width: 450px;
    margin: 100px auto 0;
    text-align: center; }
    @media (max-width: 767px) {
      .s1 .text-bottom {
        width: 100%;
        margin-top: 30px; } }
    .s1 .text-bottom > p {
      padding: 0 11px; }
    .s1 .text-bottom p {
      font-size: 26px;
      color: #000; }
      @media (max-width: 767px) {
        .s1 .text-bottom p {
          font-size: 18px; } }
    .s1 .text-bottom h2 {
      margin-top: 40px;
      font-size: 45px;
      line-height: 1.3; }
      @media (max-width: 767px) {
        .s1 .text-bottom h2 {
          font-size: 31px;
          margin-top: 20px; } }

.s2 {
  background: url("../img/bg_pink.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px; }
  @media (max-width: 767px) {
    .s2 {
      padding-top: 50px;
      padding-bottom: 50px;
      background-image: url("../img/mobile-pink-bg.png"); } }
  .s2 .box-wrapper {
    background: white 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.26);
    border-radius: 10px;
    padding: 50px;
    text-align: center; }
    @media (max-width: 991px) {
      .s2 .box-wrapper {
        padding: 20px; } }
    @media (max-width: 767px) {
      .s2 .box-wrapper {
        padding: 15px; } }
    .s2 .box-wrapper h2 {
      font-size: 45px; }
      @media (max-width: 991px) {
        .s2 .box-wrapper h2 {
          font-size: 33px; } }
      @media (max-width: 767px) {
        .s2 .box-wrapper h2 {
          font-size: 5vw;
          line-height: 1.7; } }
      .s2 .box-wrapper h2 .blue {
        background: transparent linear-gradient(89deg, #047EB0 0%, #149DB9 50%, #426EA9 100%) 0% 0% no-repeat padding-box;
        color: #fff;
        padding: 0 10px;
        margin-right: 15px; }
        @media (max-width: 767px) {
          .s2 .box-wrapper h2 .blue {
            margin-right: 5px;
            padding: 0 2px; } }
      .s2 .box-wrapper h2 .pink {
        background: transparent linear-gradient(89deg, #d0589c 0%, #f19cb1 50%, #e17ba3 100%) 0% 0% no-repeat padding-box;
        color: #fff;
        padding: 0 10px; }
        @media (max-width: 767px) {
          .s2 .box-wrapper h2 .pink {
            padding: 0 2px; } }
    .s2 .box-wrapper .effect {
      position: relative;
      height: 50px; }
      .s2 .box-wrapper .effect span {
        transform: matrix(0.96, -0.29, 0.29, 0.96, 0, 0);
        font-family: 'Sacramento';
        font-size: 24px;
        text-align: left;
        position: absolute;
        left: 0;
        top: 0; }
    .s2 .box-wrapper .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 856px;
      margin: 50px auto 0; }
      @media (max-width: 991px) {
        .s2 .box-wrapper .row .col {
          margin: 0 15px; } }
      @media (max-width: 767px) {
        .s2 .box-wrapper .row {
          margin-top: 25px;
          max-width: 100%;
          justify-content: center; } }
      .s2 .box-wrapper .row img {
        max-width: 100%; }
      .s2 .box-wrapper .row > * {
        flex: 1;
        max-width: 388px; }
        @media (max-width: 767px) {
          .s2 .box-wrapper .row > * {
            margin: 0 auto; } }
      .s2 .box-wrapper .row .quote {
        position: relative; }
        .s2 .box-wrapper .row .quote:before, .s2 .box-wrapper .row .quote:after {
          color: #E9E9E9;
          font-size: 60px; }
        .s2 .box-wrapper .row .quote:before {
          content: '“'; }
        .s2 .box-wrapper .row .quote:after {
          content: '”'; }
      .s2 .box-wrapper .row h2 {
        font-size: 30px;
        line-height: 1.3; }
        @media (max-width: 991px) {
          .s2 .box-wrapper .row h2 {
            font-size: 2.85vw; } }
        @media (max-width: 767px) {
          .s2 .box-wrapper .row h2 {
            font-size: 5vw; } }
      .s2 .box-wrapper .row p {
        font-size: 16px;
        text-align: left;
        margin-top: 15px; }
        @media (max-width: 767px) {
          .s2 .box-wrapper .row p {
            font-size: 14px; } }
        .s2 .box-wrapper .row p small {
          font-size: 14px; }
          @media (max-width: 767px) {
            .s2 .box-wrapper .row p small {
              font-size: 12px; } }
      @media (max-width: 767px) {
        .s2 .box-wrapper .row img.d-md-block {
          margin: 25px auto;
          display: block; } }
      .s2 .box-wrapper .row .order-2 {
        order: 2; }
      .s2 .box-wrapper .row .order-1 {
        order: 1; }
    .s2 .box-wrapper .footer {
      max-width: 856px;
      margin: 50px auto 0;
      text-align: left;
      padding: 20px 55px;
      background: transparent linear-gradient(89deg, #F6E5B3 0%, #F6E5B3 0%, #FEFADC 55%, #FFF0C5 100%) 0% 0% no-repeat padding-box; }
      @media (max-width: 767px) {
        .s2 .box-wrapper .footer {
          max-width: 100%;
          padding: 5px 15px;
          width: auto;
          margin: 10px auto 0; } }
      .s2 .box-wrapper .footer h3 {
        color: #CBA15A;
        font-size: 33px; }
        @media (max-width: 991px) {
          .s2 .box-wrapper .footer h3 {
            font-size: 25px; } }
        @media (max-width: 767px) {
          .s2 .box-wrapper .footer h3 {
            font-size: 23px;
            line-height: 1.3; } }
      .s2 .box-wrapper .footer p {
        font-size: 22px;
        font-weight: 300; }
        @media (max-width: 991px) {
          .s2 .box-wrapper .footer p {
            font-size: 16px; } }
        @media (max-width: 767px) {
          .s2 .box-wrapper .footer p {
            font-size: 10px; } }
      .s2 .box-wrapper .footer .flex {
        display: flex; }
      .s2 .box-wrapper .footer .left {
        width: 50%; }
      .s2 .box-wrapper .footer .right {
        position: relative;
        width: 50%; }
        @media (max-width: 767px) {
          .s2 .box-wrapper .footer .right {
            margin-left: 5px; } }
        .s2 .box-wrapper .footer .right img {
          max-width: 100%;
          position: absolute;
          left: 11%;
          top: -28%;
          width: 350px; }
          @media (max-width: 767px) {
            .s2 .box-wrapper .footer .right img {
              max-width: 100%;
              left: 0;
              top: 7%; } }
  .s2 .mid {
    max-width: 750px;
    margin: 90px auto 0; }
    @media (max-width: 767px) {
      .s2 .mid {
        margin-top: 30px; } }
    .s2 .mid h2 {
      font-size: 45px;
      text-align: center;
      line-height: 1.3; }
      @media (max-width: 767px) {
        .s2 .mid h2 {
          font-size: 21px; } }
    .s2 .mid .tagline {
      display: flex;
      margin-top: 30px;
      margin-bottom: 20px;
      font-weight: 300; }
      @media (max-width: 767px) {
        .s2 .mid .tagline {
          margin-top: 15px;
          margin-bottom: 10px; } }
      .s2 .mid .tagline > * {
        flex: 1;
        color: #fff;
        font-size: 27px;
        text-align: center;
        padding: 5px 0; }
        @media (max-width: 991px) {
          .s2 .mid .tagline > * {
            font-size: 22px; } }
        @media (max-width: 767px) {
          .s2 .mid .tagline > * {
            font-size: 12px; } }
      .s2 .mid .tagline .left {
        background: #7F7F7F; }
      .s2 .mid .tagline .right {
        background: transparent linear-gradient(89deg, #D0589C 0%, #F19CB1 50%, #E17BA3 100%) 0% 0% no-repeat padding-box; }
  .s2 .bottom {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #CBA15A;
    padding: 48px 38px;
    max-width: 80vw;
    margin: 40px auto 0; }
    @media (max-width: 767px) {
      .s2 .bottom {
        max-width: 90vw;
        padding: 0; } }
    .s2 .bottom .wrapper {
      display: flex;
      justify-content: center; }
      @media (max-width: 991px) {
        .s2 .bottom .wrapper {
          display: block;
          padding: 15px; } }
    .s2 .bottom .flex {
      display: flex;
      align-items: center; }
      @media (max-width: 991px) {
        .s2 .bottom .flex {
          justify-content: center;
          margin-bottom: 20px; } }
      .s2 .bottom .flex > * {
        width: 270px; }
        @media (max-width: 1281px) {
          .s2 .bottom .flex > * {
            width: 200px; } }
        @media (max-width: 767px) {
          .s2 .bottom .flex > * {
            width: 100%;
            flex: auto; } }
      .s2 .bottom .flex h3 {
        font-family: 'Optima';
        font-size: 45px; }
        @media (max-width: 767px) {
          .s2 .bottom .flex h3 {
            font-size: 29px; } }
      .s2 .bottom .flex p {
        font-size: 33px;
        margin-bottom: 15px; }
        @media (max-width: 767px) {
          .s2 .bottom .flex p {
            font-size: 17px; } }
      .s2 .bottom .flex .arrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 0 20px 20px;
        border-color: transparent transparent transparent #c79e53;
        margin: 0 15px;
        margin-top: 150px; }
        @media (max-width: 767px) {
          .s2 .bottom .flex .arrow {
            margin-top: 100px; } }
    .s2 .bottom .left {
      text-align: center;
      margin-right: 33px; }
      .s2 .bottom .left img {
        max-width: 100%; }
      @media (max-width: 767px) {
        .s2 .bottom .left {
          margin-right: 0; } }
    @media (max-width: 991px) {
      .s2 .bottom .right {
        margin-left: 11%; } }
    @media (max-width: 767px) {
      .s2 .bottom .right {
        margin-left: 0%; } }
    .s2 .bottom .right h2 {
      font-size: 40px;
      color: #C79E53;
      line-height: 1.3; }
      @media (max-width: 1281px) {
        .s2 .bottom .right h2 {
          font-size: 29px; } }
      @media (max-width: 767px) {
        .s2 .bottom .right h2 {
          font-size: 21px; } }
    .s2 .bottom .right p {
      font-size: 24px;
      margin: 25px 0 20px; }
      @media (max-width: 1281px) {
        .s2 .bottom .right p {
          font-size: 18px; } }
      @media (max-width: 767px) {
        .s2 .bottom .right p {
          font-size: 13px;
          margin: 15px 0 10px; } }
      .s2 .bottom .right p small {
        font-size: 18px; }
        @media (max-width: 767px) {
          .s2 .bottom .right p small {
            font-size: 10px; } }

.footer {
  background: transparent linear-gradient(133deg, #FEE6C4 0%, #FFF0D0 9%, #FFF9DC 100%) 0% 0% no-repeat padding-box;
  padding-top: 100px;
  padding-bottom: 100px; }
  @media (max-width: 767px) {
    .footer {
      padding-top: 30px;
      padding-bottom: 30px; } }
  .footer .wrapper {
    display: flex;
    align-items: center;
    max-width: 80vw;
    margin: 0 auto;
    justify-content: center; }
    @media (max-width: 1281px) {
      .footer .wrapper {
        max-width: 90vw; } }
  .footer img {
    max-width: 100%;
    width: 487px; }
  .footer .right {
    text-align: center;
    margin-left: 30px;
    width: 638px; }
    @media (max-width: 767px) {
      .footer .right {
        width: 100%;
        margin: 0; } }
  .footer h2 {
    font-size: 45px;
    color: #C79E53;
    line-height: 1.3;
    margin-bottom: 30px; }
    @media (max-width: 1281px) {
      .footer h2 {
        font-size: 36px; } }
    @media (max-width: 991px) {
      .footer h2 {
        font-size: 29px; } }
    @media (max-width: 767px) {
      .footer h2 {
        font-size: 24px;
        margin-bottom: 15px; } }
  .footer p {
    font-size: 22px;
    font-weight: 300;
    color: #6F5F52; }
    @media (max-width: 1281px) {
      .footer p {
        font-size: 18px; } }
    @media (max-width: 991px) {
      .footer p {
        font-size: 15px; } }
    @media (max-width: 767px) {
      .footer p {
        font-size: 12px; } }
    .footer p small {
      font-size: 18px; }
      @media (max-width: 1281px) {
        .footer p small {
          font-size: 14px; } }
      @media (max-width: 991px) {
        .footer p small {
          font-size: 13px; } }
      @media (max-width: 767px) {
        .footer p small {
          font-size: 12px; } }
  @media (max-width: 767px) {
    .footer img.d-md-block {
      margin: 20px auto;
      display: block; } }
  .footer hr {
    border: 0;
    border-top: 1px solid #6F5F52;
    margin: 20px 0; }
  .footer h3 {
    color: #6F5F52;
    font-size: 33px; }
    @media (max-width: 767px) {
      .footer h3 {
        font-size: 24px; } }
  .footer .btns {
    display: flex;
    justify-content: center;
    margin: 10px 0; }
    .footer .btns .btn {
      border: 1.5px solid #A09681;
      border-radius: 4px;
      color: #6F5F52;
      font-size: 22px;
      padding: 5px 10px;
      font-weight: 600;
      margin: 0 5px; }
      .footer .btns .btn + .btn {
        font-weight: 400; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0; }

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*# sourceMappingURL=style.css.map */