:root {
  --color-white: #fff;
  --color-black: #000; }

*, *::before, *::after {
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  height: 100%; }

body {
  margin: 0;
  font-size: 3.5vw;
  font-family: 'Kanit', serif;
  font-weight: 300;
  padding-top: 48px; }

img {
  width: auto;
  max-width: 100%;
  float: left; }

ul, li {
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  margin: 8px 0;
  width: 100%;
  float: left; }

h1 {
  font-size: 8vw; }

h2 {
  font-size: 5vw;
  line-height: 1.2; }

h3 {
  font-size: 5.4vw;
  line-height: 1.2; }
  h3 span {
    font-weight: 400;
    font-size: 4vw; }

h4 {
  font-size: 3.6vw;
  line-height: 1.2;
  margin: 0 0 12px; }

.tablet {
  display: none; }

p {
  margin: 0; }

.layout {
  width: 100%;
  max-width: 100%;
  max-width: 1440px;
  margin: 0 auto; }

header {
  background-color: var(--color-white);
  font-family: 'Kanit', serif;
  font-weight: 300;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 10px;
  z-index: 100;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
  header img {
    float: left;
    width: 128px;
    margin-top: 2px;
    max-width: none; }

nav {
  float: right;
  font-size: 14px; }
  nav ul, nav li {
    padding: 0;
    margin: 0;
    list-style: none; }
  nav li {
    float: left;
    margin-left: 20px;
    line-height: calc(24 / 12); }
  nav a {
    color: var(--black);
    text-decoration: none; }

section {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative; }
  section.s1, section.s2, section.s7 {
    padding-top: 56.25%;
    position: relative;
    height: 0;
    background: #000; }
    section.s1 iframe, section.s1 video, section.s2 iframe, section.s2 video, section.s7 iframe, section.s7 video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  section.s1 {
    padding-top: 50.8% !important; }
  section.s3 {
    background: url("../images/s3-bg.jpg") no-repeat center top;
    background-size: cover;
    text-align: center;
    color: var(--color-white); }
    section.s3 div {
      bottom: auto;
      width: 100%;
      margin: 30% auto 5%; }
      section.s3 div img {
        width: 64%;
        float: none; }
      section.s3 div h2 {
        margin: 0 0 4px; }
      section.s3 div p {
        font-size: 3.5vw;
        font-style: italic;
        line-height: 1.2; }
  section.s4 .section4-slide .first, section.s4 .section4-slide .last {
    padding: 0;
    background-size: cover; }
  section.s4 .section4-slide .first {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    background: #CFE8F2 url("../images/s4-bg-mobile.jpg") no-repeat left top;
    background-size: 200%; }
    section.s4 .section4-slide .first > div {
      width: 100%; }
      section.s4 .section4-slide .first > div:first-child {
        padding: 0 20px; }
        section.s4 .section4-slide .first > div:first-child img {
          width: 90%;
          float: none; }
      section.s4 .section4-slide .first > div:last-child {
        margin-top: 24px; }
        section.s4 .section4-slide .first > div:last-child img {
          width: 100%; }
  section.s4 .section4-slide .last {
    background: #CFE8F2 url("../images/s4-bg-mobile.jpg") no-repeat right top;
    background-size: 200%; }
    section.s4 .section4-slide .last div {
      width: 100%;
      padding: 12px 5%; }
      section.s4 .section4-slide .last div > img {
        width: 40%;
        margin-left: 6%;
        margin-top: 3%; }
    section.s4 .section4-slide .last h2 {
      text-align: center;
      font-size: 7vw; }
    section.s4 .section4-slide .last ul li {
      border-radius: 16px;
      width: 100%;
      padding: 12px;
      overflow: hidden;
      display: flex;
      align-items: center; }
      section.s4 .section4-slide .last ul li:first-child {
        background-color: rgba(255, 255, 255, 0.9); }
      section.s4 .section4-slide .last ul li:last-child {
        margin-bottom: 0; }
      section.s4 .section4-slide .last ul li > img {
        width: 30%;
        float: left; }
      section.s4 .section4-slide .last ul li > div {
        width: 70%;
        float: left;
        overflow: hidden;
        padding: 12px 0 12px 3%; }
        section.s4 .section4-slide .last ul li > div img {
          width: 60%;
          margin-bottom: 2%;
          margin-left: 0; }
      section.s4 .section4-slide .last ul li h3 {
        text-align: left;
        font-size: 5vw;
        margin-bottom: 0; }
      section.s4 .section4-slide .last ul li p {
        text-align: left;
        font-size: 2.8vw;
        line-height: 1.3;
        margin-top: 8px;
        width: 100%;
        float: left;
        overflow: hidden; }
      section.s4 .section4-slide .last ul li:last-child div img {
        width: 60%; }
  section.s5 {
    background-color: #E0E1E0; }
    section.s5 .section5-slide .first {
      background: #E0E2E1 url("../images/s5-bg-mobile.jpg") no-repeat left top;
      background-size: 200%;
      padding: 25% 0; }
      section.s5 .section5-slide .first img {
        width: 70%;
        float: none; }
      section.s5 .section5-slide .first div {
        width: 100%;
        height: 100%;
        overflow: hidden; }
        section.s5 .section5-slide .first div div {
          margin-top: 35%;
          padding: 16px 10%; }
    section.s5 .section5-slide .last {
      background: #E0E2E1 url("../images/s5-bg-mobile.jpg") no-repeat right top;
      background-size: 200%;
      font-size: 3.4vw;
      padding: 32px 12px; }
      section.s5 .section5-slide .last ul li {
        width: 100%;
        overflow: hidden;
        text-align: center;
        float: left;
        margin: 3% 0;
        display: flex;
        align-items: center; }
      section.s5 .section5-slide .last ul img {
        width: 35%; }
      section.s5 .section5-slide .last ul p {
        overflow: hidden;
        text-align: left;
        padding-left: 2%;
        width: 65%; }
  section.s6 {
    max-height: calc(100vh - 60); }
    section.s6 .section6-slide {
      height: 100%;
      background-color: #A6CDD6;
      text-align: left; }
      section.s6 .section6-slide .first {
        height: 100%;
        background: url("../images/s6-bg-mobile.png") no-repeat left top;
        background-size: 300%;
        float: left; }
        section.s6 .section6-slide .first > div {
          padding: 42% 8px 20px;
          float: left;
          width: 100%; }
          section.s6 .section6-slide .first > div div {
            margin: 12px 0 0;
            float: left; }
            section.s6 .section6-slide .first > div div img {
              border-radius: 16px; }
            section.s6 .section6-slide .first > div div p {
              width: 100%;
              margin: 4px 0 8px;
              overflow: hidden; }
            section.s6 .section6-slide .first > div div div img {
              width: 100%;
              max-width: none; }
          section.s6 .section6-slide .first > div .img {
            width: 100%; }
        section.s6 .section6-slide .first h2, section.s6 .section6-slide .first h3 {
          margin: 0; }
        section.s6 .section6-slide .first h2 {
          font-size: 6vw;
          padding-left: 10%; }
        section.s6 .section6-slide .first h3 {
          text-align: center; }
        section.s6 .section6-slide .first ul, section.s6 .section6-slide .first li {
          overflow: hidden;
          float: left;
          width: 100%; }
        section.s6 .section6-slide .first li {
          background-color: #252E41;
          color: var(--color-white);
          font-size: 2.5vw;
          line-height: 1.6;
          border-radius: 16px;
          margin: 2px 0;
          padding: 0 4px; }
          section.s6 .section6-slide .first li span {
            color: #7BBDDA;
            width: 25%;
            float: left;
            text-align: center; }
          section.s6 .section6-slide .first li:first-child span {
            width: 35%; }
          section.s6 .section6-slide .first li strong {
            font-size: 2.5vw;
            font-weight: 600; }
      section.s6 .section6-slide .second h3, section.s6 .section6-slide .last h3 {
        position: relative; }
        section.s6 .section6-slide .second h3::before, section.s6 .section6-slide .last h3::before {
          content: "";
          width: 5px;
          height: 100%;
          background-color: #fff;
          position: absolute;
          margin-left: -20px; }
      section.s6 .section6-slide .second {
        background: url("../images/s6-bg-mobile.png") no-repeat center top;
        background-size: 300%;
        height: 100%; }
        section.s6 .section6-slide .second > div {
          padding: 20px;
          margin: 0 5%;
          font-size: 3.2vw; }
          section.s6 .section6-slide .second > div p {
            float: left;
            margin: 8px 0 12px; }
        section.s6 .section6-slide .second .bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background: url("../images/s6-slide2-img2.png") no-repeat left bottom;
          background-size: 200%; }
      section.s6 .section6-slide .last {
        background: url("../images/s6-bg-mobile.png") no-repeat right top;
        background-size: 300%;
        height: 100%; }
        section.s6 .section6-slide .last > div {
          align-self: flex-start;
          padding-top: 40px;
          font-size: 3.5vw; }
          section.s6 .section6-slide .last > div h3, section.s6 .section6-slide .last > div p {
            padding: 0 40px; }
          section.s6 .section6-slide .last > div p {
            float: left;
            margin-bottom: 20px; }
        section.s6 .section6-slide .last .bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background: url("../images/s6-slide2-img2.png") no-repeat right bottom;
          background-size: 200%; }
    section.s6 .note {
      font-size: 2vw;
      float: left;
      margin-top: 8px; }
  section.s8 {
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
    padding: 40px;
    display: flex;
    align-items: center;
    flex-direction: column; }
    section.s8 span {
      color: #B58C6E; }
    section.s8 img {
      float: none;
      width: 40%;
      margin-bottom: 16px; }
    section.s8 p {
      display: block;
      overflow: hidden;
      width: 100%; }
  section.s10 {
    background: #000 url("../images/s10-bg.jpg") no-repeat right top -50px;
    background-size: 200%;
    padding-bottom: 40px; }
    section.s10 h4 {
      font-weight: 400;
      font-size: 3.5vw; }
    section.s10 > div {
      padding: 20px;
      margin-top: 70%;
      color: var(--color-white);
      text-align: left;
      font-size: 3vw;
      position: relative; }
      section.s10 > div div img {
        width: 100%;
        max-width: none; }
        section.s10 > div div img:first-of-type {
          width: 65%; }
      section.s10 > div div p {
        line-height: 1.1;
        margin: 4px 0;
        float: left;
        width: 35%;
        padding-left: 12px; }
      section.s10 > div > img {
        width: 45%;
        position: absolute;
        top: 0;
        right: 20px;
        transform: translateY(-35%); }

.swiper {
  width: 100%;
  padding: 0; }

.swiper-button-prev, .swiper-button-next {
  background-repeat: no-repeat !important;
  height: 32px !important;
  width: 24px !important;
  background-size: contain; }

.swiper-button-prev {
  left: 4px !important;
  background-image: url("../images/icon-triangle.svg") !important; }

.swiper-button-next {
  right: 4px !important;
  transform: rotate(180deg);
  background-image: url("../images/icon-triangle.svg") !important; }

:root {
  --swiper-theme-color: transparent !important; }

.swiper-button-disabled {
  opacity: 0 !important; }

.swiper-slide {
  height: auto !important;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }

.slide8 {
  background-color: var(--color-white);
  padding: 20px;
  font-size: 16px; }
  .slide8 img {
    margin-bottom: 10px;
    float: none; }
  .slide8 a {
    background-color: var(--color-black);
    border-radius: 8px;
    color: var(--color-white);
    padding: 5px 10px;
    text-decoration: none;
    width: 40%;
    margin: 0 5px;
    display: inline-block; }

footer {
  background-color: #023C67;
  color: var(--color-white);
  padding: 20px;
  overflow: hidden; }
  footer a {
    color: var(--color-white);
    text-decoration: none; }
  footer ul {
    padding: 0;
    margin: 0;
    list-style: none; }
    footer ul li {
      padding: 10px;
      border-bottom: 1px solid var(--color-white);
      margin: 0;
      text-align: left;
      overflow: hidden; }
  footer img {
    float: left;
    margin-right: 10px; }
  footer p {
    overflow: hidden;
    margin: 0; }
  footer > p {
    padding: 10px 0;
    font-weight: 300;
    font-size: 1.1rem; }
  footer .iso img {
    width: 38%; }
  footer .iso p {
    font-size: 2.5vw;
    line-height: 1.4; }

.cookie {
  background-color: #37C6F2;
  color: var(--color-white);
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-size: 1.4rem;
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100; }
  .cookie a {
    color: #fff; }
  .cookie button {
    background-color: #fff;
    color: #37C6F2;
    border: 0;
    height: 32px;
    padding: 0 16px;
    font-family: 'Kanit', sans-serif;
    margin-top: 16px;
    cursor: pointer; }
  .cookie.display {
    display: block; }

@media screen and (min-width: 48em) {
  h1 {
    font-size: 4.3vw; }
  h2 {
    font-size: 4.2vw;
    line-height: 1.2; }
  h3 {
    font-size: 4vw; }
    h3 span {
      font-size: 3vw; }
  h4 {
    font-size: 2.5vw;
    line-height: 1.3;
    font-weight: 400; }
  body {
    font-size: 2vw;
    line-height: 1.3;
    padding-top: 60px; }
  .mobile {
    display: none; }
  .tablet {
    display: block; }
  header {
    padding: 12px 10px 16px; }
    header img {
      width: 200px; }
  nav {
    font-size: 16px;
    font-weight: 400; }
  section {
    text-align: left; }
    section.s3 div {
      margin-top: 26%;
      overflow: hidden;
      width: 70%; }
      section.s3 div h2 {
        margin-top: 12px; }
      section.s3 div img {
        width: 58%; }
      section.s3 div p {
        font-size: 2.2vw;
        line-height: 1.3;
        margin-top: 8px;
        float: left;
        width: 100%; }
    section.s4 {
      min-height: auto; }
      section.s4 > div {
        width: 100%;
        height: 100%; }
      section.s4 .section4-slide .first, section.s4 .section4-slide .last {
        padding: 0;
        background-size: cover; }
      section.s4 .section4-slide .first {
        display: block;
        background: #CFE8F2 url("../images/s4-bg-mobile.jpg") no-repeat left top;
        background-size: 200%; }
        section.s4 .section4-slide .first > div {
          width: 55%;
          margin-left: auto;
          margin-right: auto;
          margin-top: 7%;
          float: left; }
          section.s4 .section4-slide .first > div:first-child {
            padding: 0 0 0 10%;
            text-align: left;
            width: 51%; }
            section.s4 .section4-slide .first > div:first-child img {
              margin-bottom: 6%;
              width: 120%;
              max-width: none; }
            section.s4 .section4-slide .first > div:first-child p {
              width: 91%;
              float: left; }
          section.s4 .section4-slide .first > div:last-child {
            margin-top: 24px;
            width: 60%;
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 0; }
            section.s4 .section4-slide .first > div:last-child img {
              width: 100%;
              float: right; }
      section.s4 .section4-slide .last {
        background: #CFE8F2 url("../images/s4-bg-mobile.jpg") no-repeat right top;
        background-size: 200%; }
        section.s4 .section4-slide .last > div {
          width: 60%;
          margin: 0 auto;
          padding: 3% 5%; }
        section.s4 .section4-slide .last h2 {
          font-size: 2.6vw;
          width: 100%;
          margin: 3% auto 3%;
          float: none;
          font-style: normal; }
        section.s4 .section4-slide .last ul {
          width: 100%;
          float: left;
          margin: 0; }
          section.s4 .section4-slide .last ul li {
            align-items: flex-start;
            padding: 16px;
            margin-bottom: 2%; }
            section.s4 .section4-slide .last ul li h3 {
              font-size: 2.2vw;
              margin-top: 0; }
            section.s4 .section4-slide .last ul li p {
              font-size: 1.6vw;
              line-height: 1.2; }
            section.s4 .section4-slide .last ul li > div {
              padding: 0 0 0 3%; }
    section.s5 {
      min-height: auto; }
      section.s5 h2 {
        font-size: 3.4vw; }
      section.s5 .section5-slide .first {
        background: url("../images/s5-bg-large.jpg") no-repeat left top;
        background-size: 200%;
        padding: 0; }
        section.s5 .section5-slide .first img {
          width: 40%;
          margin-left: 20px;
          margin-top: 3%;
          align-items: center; }
        section.s5 .section5-slide .first > div {
          display: flex;
          flex-direction: column;
          width: 90%;
          height: auto; }
          section.s5 .section5-slide .first > div div {
            width: 80%;
            padding-left: 20px;
            margin-top: 2%;
            font-size: 1.5vw; }
            section.s5 .section5-slide .first > div div p {
              margin-top: 0;
              width: 100%;
              line-height: 1.5; }
      section.s5 .section5-slide .last {
        background: url("../images/s5-bg-large.jpg") no-repeat right top;
        background-size: 200%;
        padding: 0; }
        section.s5 .section5-slide .last h2 {
          text-align: center;
          font-size: 3.6vw;
          font-style: normal; }
        section.s5 .section5-slide .last div {
          width: 100%;
          margin: 3% 0; }
        section.s5 .section5-slide .last ul {
          width: 70%;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          padding: 0 0 20px 0; }
          section.s5 .section5-slide .last ul li {
            width: 50%;
            padding: 0 3% 0 0;
            margin-bottom: 0;
            overflow: initial;
            font-size: 1.25vw;
            position: relative;
            display: inline-block;
            text-align: center; }
            section.s5 .section5-slide .last ul li:nth-child(1) {
              order: 1; }
            section.s5 .section5-slide .last ul li:nth-child(2) {
              order: 2; }
            section.s5 .section5-slide .last ul li:nth-child(3) {
              order: 4; }
            section.s5 .section5-slide .last ul li:nth-child(4) {
              order: 3; }
              section.s5 .section5-slide .last ul li:nth-child(4)::after {
                transform: rotate(180deg);
                right: -25px !important; }
            section.s5 .section5-slide .last ul li:nth-child(1)::after, section.s5 .section5-slide .last ul li:nth-child(4)::after {
              content: "";
              width: 15%;
              height: 15%;
              background: url("../images/s5-arrow1.png") no-repeat right center;
              background-size: contain;
              position: absolute;
              top: 20%;
              right: -30px; }
            section.s5 .section5-slide .last ul li:nth-child(2)::after {
              content: '';
              width: 11%;
              height: 130%;
              background: url("../images/s5-arrow2.png") no-repeat center top;
              background-size: 80%;
              position: absolute;
              top: 25%;
              right: 0;
              transform: translateX(100%); }
            section.s5 .section5-slide .last ul li:nth-child(2), section.s5 .section5-slide .last ul li:nth-child(3) {
              padding-right: 0;
              padding-left: 3%; }
          section.s5 .section5-slide .last ul img {
            width: 55%;
            float: none; }
          section.s5 .section5-slide .last ul p {
            width: 100%;
            text-align: center;
            padding-left: 0; }
    section.s6 .section6-slide .first {
      background: url("../images/s6-bg-large.jpg") no-repeat left top;
      background-size: 310%; }
      section.s6 .section6-slide .first h2, section.s6 .section6-slide .first h3 {
        width: 100%;
        overflow: hidden;
        line-height: 1.2; }
      section.s6 .section6-slide .first h2 {
        font-size: 3.2vw;
        padding-left: 0;
        margin: 0 0 0; }
      section.s6 .section6-slide .first h3 {
        text-align: left;
        padding-left: 50px;
        font-size: 2.5vw;
        margin: 0; }
      section.s6 .section6-slide .first > div {
        padding: 20px;
        width: 100%;
        max-width: 95%;
        margin: 0 0 0 5%;
        overflow: hidden; }
        section.s6 .section6-slide .first > div > div {
          float: left;
          margin-top: 8px;
          margin-bottom: 4px; }
          section.s6 .section6-slide .first > div > div img, section.s6 .section6-slide .first > div > div p {
            width: calc(50% - 6px); }
          section.s6 .section6-slide .first > div > div img {
            float: none; }
          section.s6 .section6-slide .first > div > div p {
            margin: 0 0 0 6px;
            font-size: 1.5vw;
            line-height: 1.3; }
          section.s6 .section6-slide .first > div > div > div {
            display: flex;
            flex-direction: row;
            align-items: center; }
        section.s6 .section6-slide .first > div .img {
          text-align: center;
          width: calc(50% - 6px);
          margin-right: 6px; }
          section.s6 .section6-slide .first > div .img img {
            width: 80%; }
      section.s6 .section6-slide .first ul {
        display: flex;
        flex-wrap: wrap; }
        section.s6 .section6-slide .first ul li {
          width: calc(50% - 6px);
          margin: 4px 6px;
          font-size: 1.3vw;
          line-height: 2.8; }
          section.s6 .section6-slide .first ul li strong {
            font-size: 1.2vw;
            font-weight: 400; }
          section.s6 .section6-slide .first ul li:nth-child(1) {
            order: 1;
            margin-left: 0; }
          section.s6 .section6-slide .first ul li:nth-child(2) {
            order: 3;
            margin-left: 0; }
          section.s6 .section6-slide .first ul li:nth-child(3) {
            order: 5;
            margin-left: 0; }
          section.s6 .section6-slide .first ul li:nth-child(4) {
            order: 2;
            margin-right: 0; }
          section.s6 .section6-slide .first ul li:nth-child(5) {
            order: 4;
            margin-right: 0; }
          section.s6 .section6-slide .first ul li:nth-child(6) {
            order: 6;
            margin-right: 0; }
    section.s6 .section6-slide .second {
      background: url("../images/s6-bg-large.jpg") no-repeat left 47% top;
      background-size: 310%; }
      section.s6 .section6-slide .second > div {
        width: 60%;
        transform: translateX(20%); }
      section.s6 .section6-slide .second .bg {
        transform: translateX(0);
        background-size: 160%; }
    section.s6 .section6-slide .last .bg {
      display: none; }
    section.s6 .section6-slide .last > div {
      width: 100%;
      padding-top: 10%; }
    section.s6 .section6-slide .last h3, section.s6 .section6-slide .last p {
      width: 60%;
      transform: translateX(50%); }
    section.s6 .section6-slide .last .img {
      width: 100%;
      position: absolute;
      bottom: 0; }
      section.s6 .section6-slide .last .img img {
        width: 50%; }
    section.s6 .section6-slide .second h3, section.s6 .section6-slide .last h3 {
      font-size: 4vw; }
    section.s6 .section6-slide .second p, section.s6 .section6-slide .last p {
      font-size: 2vw; }
    section.s6 .note {
      font-size: 1.2vw;
      width: 100%;
      overflow: hidden;
      float: left; }
    section.s8 {
      text-align: center;
      flex-direction: row;
      justify-content: center; }
      section.s8 img {
        width: 25%;
        margin-right: 48px;
        display: inline-block; }
      section.s8 p {
        width: auto;
        display: inline-block;
        text-align: left; }
    section.s9 ul {
      width: 100%;
      float: left; }
    section.s9 li {
      width: 50%;
      float: left;
      overflow: hidden; }
    section.s9 img {
      width: 100%;
      max-width: none; }
    section.s10 {
      background-size: 100%; }
      section.s10 > div {
        margin-top: 0;
        float: left;
        line-height: 1.2; }
        section.s10 > div h1 {
          font-size: 3.3vw; }
        section.s10 > div h4 {
          font-size: 1.8vw;
          width: 100%; }
        section.s10 > div div {
          width: 48%;
          margin-left: 8%;
          float: left;
          overflow: hidden; }
          section.s10 > div div img:first-of-type {
            width: 75%; }
          section.s10 > div div p {
            width: 100%;
            margin: 2% 0;
            font-size: 1.9vw; }
        section.s10 > div > img {
          top: auto;
          bottom: 20px;
          right: 40px;
          transform: translateY(0);
          width: 24%; }
  .slide8 {
    text-align: center; }
    .slide8 div {
      display: block;
      margin: 10px 0; }
    .slide8 a {
      width: 30%; }
  footer ul li {
    border-bottom: 0;
    float: left;
    font-size: 14px;
    font-weight: 300; }
    footer ul li:nth-child(1) {
      width: 30%;
      border-right: 1px solid var(--color-white); }
    footer ul li:nth-child(2) {
      width: 25%; }
    footer ul li:nth-child(3) {
      width: 20%; }
    footer ul li:nth-child(4) {
      width: 25%; }
      footer ul li:nth-child(4) p {
        margin-top: 5px; }
  footer ul + p {
    width: 100%;
    float: left;
    margin: 16px 0; }
  footer p {
    font-size: 14px;
    text-align: left; }
  footer .iso p {
    font-size: 10px; }
  .swiper-button-next {
    right: 10px !important; }
  .swiper-button-prev {
    left: 10px !important; }
  .swiper-button-prev, .swiper-button-next {
    height: 52px !important;
    width: 40px !important; } }

@media screen and (min-width: 60em) {
  section.s1, section.s2, section.s7 {
    padding-top: 50%; }
  .slide8 {
    padding: 50px 0; }
    .slide8 .layout {
      width: 1000px;
      margin: 0 auto; }
    .slide8 img {
      float: left; }
    .slide8 div a {
      margin-top: 20px;
      font-size: 20px; }
  .cookie p {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px; }
  .cookie button {
    margin-top: 0;
    width: 80px;
    margin-left: 20px; } }

@media screen and (min-width: 64em) {
  body {
    font-size: 1.8vw; }
  h1 {
    font-size: 3.8vw; }
  section.s4 .section4-slide .first > div:first-child {
    padding-left: 15%; }
  section.s5 h2 {
    margin-top: 5%; }
  section.s5 .section5-slide .first img {
    width: 35%; }
  section.s5 .section5-slide .first > div {
    width: 70%; }
    section.s5 .section5-slide .first > div div p {
      margin-top: 8px; }
  section.s6 .section6-slide .first ul li {
    font-size: 1vw;
    line-height: 2.5; }
    section.s6 .section6-slide .first ul li strong {
      font-size: 1vw;
      font-weight: 400; }
  section.s6 .note {
    font-size: 0.9vw; } }